/* =========
   ROOT / TOKENS
   ========= */
:root{
  --mega-w: 1240px;              /* wide */
  --mega-pad: 28px;
  --mega-gap: 28px;
  --radius-lg: 22px;
  --shadow-lg: 0 18px 60px rgba(0,0,0,.12);
  --text-dim: rgba(0,0,0,.55);
  --ng-accent: #18e06a;
  --ng-divider: #e7eaee;
  --gutter: max(24px, calc((100vw - var(--mega-w)) / 2));
  --nav-pad: 24px;
  --hero-pad: 24px; /* match hero side padding from template */
  --nav-height: 72px; /* approximate navbar height on desktop */
}

body {
  font-family: var(--site-font);
  color: var(--dark-100);
  /* background-color: #ebebeb; */
  background-color: #ffffff !important;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3em;
}

/* --- NAV BAR LAYOUT (match hero padding exactly) --- */
.navbar-row{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; column-gap:24px; padding-left:var(--hero-pad); padding-right:var(--hero-pad); }
.nav-menu{ justify-self:center; }
.nav-links{ display:flex; align-items:center; gap:clamp(12px, 2vw, 36px); flex-wrap:nowrap; }
.nav-dropdown-toggle{ position:relative; display:flex; align-items:center; gap:8px; font-weight:600; }

/* Remove default navbar side padding so gutters match dropdowns exactly */
.navbar{ padding-left:0 !important; padding-right:0 !important; }

/* Neutralize generic _2-columns wrappers inside navbar to avoid unintended grid spacing */
.navbar-row ._2-columns{ margin:0; padding:0; }
.nav-links > ._2-columns.nav-item{ display:contents; }
.navbar-row ._2-columns.logo-item {
    max-width: 120px;
    display: block;
}
.nav-dropdown{ margin:0; }

/* underline on hover/open */
.ng-toggle-underline::after{ content:""; position:absolute; left:0; right:0; bottom:-18px; height:3px; background:transparent; border-radius:3px; }
.w-dropdown.w--open > .ng-toggle-underline::after,
.w-dropdown:hover > .ng-toggle-underline::after{ background:var(--ng-accent); }

/* Full-width dropdown panel aligned to viewport left; body matches hero padding */
.w-nav .w-dropdown-list.ng-mega-panel{ left:0 !important; right:0 !important; transform:none !important; width:100vw; max-width:none; padding:0; border:0; background:transparent; }

/* Panel chrome */
.ng-mega-panel .nav-dropdown-body{
  width:100vw; max-width:100vw; margin:0;
  padding: var(--mega-pad) var(--hero-pad); /* match hero */
  background:#fff; border-radius:0; box-shadow:none;
  border-top:1px solid var(--ng-divider);
  text-align:left; /* ensure left aligned */
}

/* Fallback: ensure non-mega simple dropdown grids align to the same gutter */
.w-nav .w-dropdown-list .nav-dropdown-body .dropdown-grid-links{
  padding-left: var(--hero-pad);
  padding-right: var(--hero-pad);
  box-sizing: border-box;
  text-align: left;
}
/* Layout helpers */
.ng-mega{ max-width:var(--mega-w); margin:0; display:grid; gap:var(--mega-gap); align-items:start; }
.ng-mega-split{ grid-template-columns: 1fr 260px; }          /* main + CTA */
.ng-mega-split-3{ grid-template-columns: 1fr 280px 220px; }   /* main + mid list + CTA */

/* Section kicker on left blocks (CASE STUDIES / BLOG / INDUSTRIES) */
.mega-section-title{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--text-dim); margin:0 0 16px; }

/* Link grids */
.mega-grid{ display:grid; column-gap:40px; row-gap:10px; }
.mega-grid-services{ grid-template-columns: repeat(3, minmax(220px, 1fr)); row-gap:22px; } /* 3 cols x 2 rows */
.mega-grid-3{ grid-template-columns: repeat(3, minmax(200px, 1fr)); }
.mega-grid-2{ grid-template-columns: repeat(2, minmax(260px, 1fr)); }

.mega-col-title{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--text-dim); margin:0 0 12px; }
.mega-links{ list-style:none; margin:0; padding:0; }
.mega-links-item{ margin:0; padding:8px 0; }
.ng-link{ text-decoration:none; font-weight:600; }
.ng-link:hover{ text-decoration:underline; }

/* Restore original CTA typography and sizing */
.nav-button-wrapper .button, .nav-row-button{
  font-size:16px; /* match base template */
  line-height:1.2;
  font-weight:600;
  max-width: 166px;
}

.nav-button-wrapper-align {
    grid-column-gap: 3px;
    grid-row-gap: 3px;
    flex: 0 auto;
    justify-content: flex-end;
    align-items: flex-end;
    display: flex;
}

/* Right rails */
.mega-rail{ border-left:1px solid var(--ng-divider); padding-left:28px; display:flex; flex-direction:column; gap:14px; align-self:stretch; }
.mega-rail--mid{ border-left:1px solid var(--ng-divider); }
.mega-rail--cta{ border-left:0; padding-left:28px; }
.mega-rail-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.mega-rail-link{ margin-top:auto; font-weight:700; color:#111; text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px; position:relative; display:inline-block; }

/* Tile-style industry cards (no images, light background) */
.mega-tiles .mega-tile{ background:#f4f6f8; border-radius:12px; padding:18px; box-shadow:0 1px 0 rgba(0,0,0,.02); display:block; }
.mega-tile-title{ font-weight:700; margin-bottom:6px; }
.mega-tile-text{ color:var(--text-dim); font-size:14px; }

/* Blog/Case cards (image + caption band) */
.mega-cards-2{ display:grid; grid-template-columns: repeat(2, minmax(280px, 1fr)); gap:24px; }
.mega-post-card{ display:block; text-decoration:none; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.08); width:100%; }
.mega-post-img{ width:100%; max-width:100%; height:220px; object-fit:cover; display:block; overflow:hidden; }
.mega-post-caption{ padding:14px 16px; background:#eef1f4; color:#111; font-weight:600; }

/* Fit CTA and menu on narrower desktops (do not change font-size; keep original) */
@media (max-width:1280px){ .nav-links{ gap:clamp(12px, 1.8vw, 22px); } .nav-row-button, .nav-button-wrapper .button{ padding:10px 14px; white-space:nowrap; } }
@media (max-width:1100px){ .nav-links{ gap:14px; } .nav-row-button, .nav-button-wrapper .button{ padding:8px 12px; } }
@media (max-width:600px){ .nav-row-button, .nav-button-wrapper .button{ padding:8px 10px; } .nav-logo-image{ height:24px; } }

/* ==========================
   LINK UNDERLINES (GLOBAL IN MEGA)
   ========================== */
/* Default: remove underline and add it on hover/focus */
.ng-mega a{ text-decoration:none; }
.ng-mega a:hover,
.ng-mega a:focus-visible{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px; }

/* Cards: underline their text when the whole card is hovered/focused */
.mega-post-card:hover .mega-post-caption,
.mega-post-card:focus-within .mega-post-caption{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px; }

/* Tiles: underline the title when the tile is hovered/focused */
.mega-tile:hover .mega-tile-title,
.mega-tile:focus-within .mega-tile-title{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px; }

/* Rail lists and CTA links */
.mega-rail-list a:hover,
.mega-rail-list a:focus-visible,
.mega-rail-link:hover,
.mega-rail-link:focus-visible{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px; }

/* Default underline for right-rail CTAs (black) */
.ng-mega a.mega-rail-link{ color:#111; text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px; }

/* Ensure dropdown sits above page content */
.w-nav .w-dropdown-list{ z-index: 9999; }

/* =====================
   RESPONSIVE (≤ 991px)
   ===================== */

@media screen and (max-width: 991px) {
    .mobile-logo {
        margin-bottom: 48px;
        display: block;
        max-width: 60px;
    }
}

.button-wrapper.dark.nav-button-wrapper {
/* display: none; */
}

@media (max-width: 991px){
  /* Make the mobile drawer full-width without causing horizontal overflow */
  .w-nav-menu, .w-nav-overlay{ width:100% !important; left:0 !important; right:0 !important; box-sizing:border-box; }
  /* Use overlay as the single scroll container */
  .w-nav-overlay{ position:fixed !important; top:0; left:0; right:0; bottom:0; height:100vh !important; overflow:hidden !important; }
  .w-nav-overlay .w-nav-menu{ position:absolute !important; top:0; left:0; right:0; bottom:0; height:100% !important; max-height:none !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch; }
  /* If overlay not used, fallback to menu scrolling */
  .w-nav:not(.use-overlay) .w-nav-menu{ max-height:calc(100vh - 80px); overflow:auto; -webkit-overflow-scrolling:touch; }

  /* Left align mobile/tablet nav contents */
  .nav-links{ flex-direction:column; align-items:flex-start; gap:8px; padding-left: var(--hero-pad) !important; padding-right: var(--hero-pad) !important; }
  .nav-dropdown-toggle{ width:100%; justify-content:space-between; }

  .w-nav .w-dropdown-list.ng-mega-panel{ position: static !important; transform:none !important; width:100% !important; }
  .ng-toggle-underline::after{ display:none !important; }

  /* Avoid nested scrollbars inside dropdowns and constrain width */
  .ng-mega-panel .nav-dropdown-body{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    border-radius:0 !important; /* remove rounded corners on mobile */
    box-shadow:none !important;
    padding:16px var(--hero-pad) !important; /* align with hero padding */
    max-height:none !important;
    overflow:visible !important;
    text-align:left !important;
  }
  .ng-mega{ width:100% !important; max-width:100% !important; }
  .mega-cards-2, .mega-grid, .mega-grid-2, .mega-grid-3, .mega-grid-services{ width:100% !important; }
  .mega-post-card{ width:100% !important; }

  .ng-mega{ gap:20px !important; }
  .ng-mega-split, .ng-mega-split-3{ grid-template-columns: 1fr !important; }

  .mega-grid-services,.mega-grid-3,.mega-grid-2{ grid-template-columns: 1fr !important; }
  .mega-cards-2{ grid-template-columns: 1fr !important; gap:16px !important; width:100% !important; }
  .mega-post-img{ width:100% !important; height:auto !important; max-width:100% !important; aspect-ratio: 16 / 9; object-fit:cover; }

  /* Rails become blocks; keep CTA at bottom */
  .mega-rail, .mega-rail--mid, .mega-rail--cta{ border-left:0 !important; padding-left:0 !important; border-top:1px solid var(--ng-divider) !important; padding-top:16px !important; margin-top:8px !important; }
  .mega-rail-link{ margin-top:12px !important; }

  .mega-rail-list a, .mega-links a, .mega-rail-link{ display:inline-block !important; padding:8px 0 !important; }
}

/* =====================
   TABLET ONLY (640–991px)
   ===================== */
@media (min-width: 640px) and (max-width: 991px){
  .mega-grid-services{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .mega-grid-3{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .mega-grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .mega-cards-2{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* Prevent accidental horizontal scrolling due to 100vw elements */
html, body{ overflow-x:hidden; }

/* =====================
   TRUSTED-BY LOGO STRIP
   ===================== */
.logo-strip{ padding:12px var(--hero-pad); }
.logo-strip .row{ align-items:center; }
.logo-strip .small-text{ color:rgba(255,255,255,.85); }
.logo-strip img{ display:block; height:clamp(26px, 2.4vw, 40px); width:auto; }
@media (min-width: 1200px){
  .logo-strip img{ height:36px; }
}

/* =====================
   HOMEPAGE-HERO LOGOS (match max widths from screenshot)
   ===================== */
.homepage-hero__logos{ padding:12px 0; display:flex; align-items:center; justify-content:flex-start; gap:24px; }
.homepage-hero__label{ margin:0; color:rgba(255,255,255,.85); white-space:nowrap; display:flex; align-items:center; height:40px; line-height:40px; transform: translateY(-4px); }
.homepage-hero__logos .logos{ display:flex; align-items:center; justify-content:flex-start; gap:24px; flex-wrap:nowrap; }
.homepage-hero__logos .logos .logo{ display:flex; align-items:center; height:40px; }
.homepage-hero__logos .logos img{ display:block; height:auto; max-height:100%; width:auto; filter:brightness(0) invert(1); }
.homepage-hero__logos .logos .logo:nth-child(1) img{ max-width:76px; }
.homepage-hero__logos .logos .logo:nth-child(2) img{ max-width:75px; }
.homepage-hero__logos .logos .logo:nth-child(3) img{ max-width:75px; }
.homepage-hero__logos .logos .logo:nth-child(4) img{ max-width:60px; }
@media (max-width: 991px){
  .homepage-hero__logos{ gap:20px; flex-direction: column; align-items:flex-start; }
  /* label on its own line */
  .homepage-hero__label{ height:auto; line-height:normal; transform:none; text-align:left; }
  /* logos under the label; wrap to next line if needed */
  .homepage-hero__logos .logos{ gap:16px; flex-wrap:wrap; flex-direction: row; align-items:center; justify-content:flex-start; width:100%; }
  .homepage-hero__logos .logos .logo{ height:28px; }
  .homepage-hero__logos .logos img{ max-height:28px; }
}

/* =====================
   HERO HEIGHT LIMIT WITH VH
   ===================== */
/* On larger screens, keep hero within viewport height so headline and logos are visible */
.hero-section-a{ height: calc(100vh - var(--nav-height)) !important; }
@media (max-width: 991px){
  :root{ --nav-height: 64px; }
/*  .hero-section-a{ height: auto !important; min-height: calc(100vh - var(--nav-height)); } */
  .hero-section-a{ height: auto !important; min-height: calc(90vh - var(--nav-height)); }
}

/* Increase spacing between hero content blocks */
.cta.hero-a-cta{ grid-row-gap: 64px !important; }

/* Изолированный шим — только через c-* алиасы */

.c-form { position: relative; }

/* Поля */
.c-input, .c-textarea { outline: none; }
.c-input:focus, .c-textarea:focus { box-shadow: 0 0 0 2px rgba(90,130,255,.35); }

/* Ошибки/успех */
.is-invalid { box-shadow: 0 0 0 2px rgba(220,38,38,.45) !important; }
.c-error { margin-top: 6px; font-size: .875rem; line-height: 1.4; color: #ff6b6b; }
.c-success { border-radius: 8px; padding: 16px; background: rgba(34,197,94,.12); color: #16a34a; }
.c-button { cursor: pointer; }
.c-label { display: inline-block; }
.c-note  { opacity: .9; }

/* ===== Checkbox ===== */
.c-checkbox { position: relative; display: inline-flex; align-items: center; gap: 8px; }

/* Доступно спрятанный инпут: клики по label работают, фокус доступен */
.c-checkbox-input-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0;
  opacity: 0;
  outline: none;
}

/* Фокус отдаём на визуальный бокс */
.c-checkbox:focus-within .w-checkbox-input { box-shadow: 0 0 0 2px rgba(90,130,255,.35); }

/* Ошибки чекбокса */
.c-checkbox.is-invalid .w-checkbox-input { box-shadow: 0 0 0 2px rgba(220,38,38,.45) !important; }

/* Для checked состояние рисует Webflow-класс w--redirected-checked (вешает наш JS) */
.w-checkbox-input.w--redirected-checked {
  background-color: rgba(255,255,255,.25);
  border-color: currentColor;
}

/* Микроотступы для ошибок */
.c-form .c-error > div + div { margin-top: 2px; }

.footer-text-right {
    color: var(--white);
    font-weight: 500;
    transition: opacity .2s;
}

.customer-logo-image {
    max-width: 160px;
}

.customer-spotlight-logo {
    height: 60px;
}

.table-logo-image {
    max-width: 160px;
}

.expert-logo-image {
    max-width: 120px;
}

.nav-logo-image {
    max-width: 60px;
}

.footer-logo {
    max-width: 40px;
}

.main-article-image-wrapper {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    display: flex;
}

.article-contents {
    grid-column-gap: 144px;
    grid-row-gap: 40px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    display: flex;
}

.customer-story-item-logo {
    max-width: 120px;
}