/* ============================================================
   DIGITUM VIEWPORT + HEADER STABILITY PASS
   Must remain the final stylesheet on every route.
   Goals:
   1. One identical header scale on every page.
   2. One deterministic responsive gutter system.
   3. No document-level horizontal overflow on mobile/tablet.
   4. Wide content scrolls inside its own component, never the page.
   ============================================================ */

/* ---------- Root viewport contract ---------- */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

body.site-page {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden !important;
}

body.site-page > main {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

body.site-page main > section,
body.site-page main section {
  min-width: 0;
  max-width: 100%;
}

body.site-page img,
body.site-page svg,
body.site-page video,
body.site-page canvas {
  max-width: 100%;
}

/* ---------- Header: page CSS must never resize the shared chrome ---------- */
.site-header {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  font-family: "Satoshi", sans-serif !important;
}

.site-header .nav-wrap {
  width: min(var(--container), calc(100% - 40px)) !important;
  max-width: var(--container) !important;
  min-height: 78px !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 34px !important;
}

.site-header .brand-logo {
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

.site-header .brand-logo img {
  display: block !important;
  width: auto !important;
  height: 31px !important;
  max-width: 170px !important;
}

.site-header nav {
  min-width: 0 !important;
  justify-self: center !important;
}

.site-header .nav-links {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 24px !important;
  color: #c9cec4 !important;
  font-family: "Satoshi", sans-serif !important;
  font-size: .82rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.site-header .nav-links a,
.site-header .nav-dropdown-toggle {
  font: inherit !important;
}

.site-header .nav-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.site-header .nav-cta {
  min-height: 41px !important;
  padding-inline: 17px !important;
  font-family: "Satoshi", sans-serif !important;
  font-size: .76rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* ---------- Intrinsic sizing: grids/flex children may shrink ---------- */
.site-page .hero-grid,
.site-page .services-hero-grid,
.site-page .ads-hero-grid,
.site-page .seo-hero-grid,
.site-page .website-hero-grid,
.site-page .automation-hero-grid,
.site-page .about-hero-grid,
.site-page .contact-hero-grid,
.site-page .work-hero-grid,
.site-page .portfolio-hero-grid,
.site-page .case-hero-grid,
.site-page .ads-case-hero-grid,
.site-page .automation-case-hero-grid,
.site-page .blog-hero-grid,
.site-page .article-layout,
.site-page .section-head,
.site-page .commercial-summary,
.site-page .journey-shell,
.site-page .result-grid,
.site-page .diagnostic-grid,
.site-page .strategy-grid,
.site-page .footer-surface,
.site-page .footer-wrap {
  min-width: 0 !important;
}

.site-page .hero-grid > *,
.site-page .services-hero-grid > *,
.site-page .ads-hero-grid > *,
.site-page .seo-hero-grid > *,
.site-page .website-hero-grid > *,
.site-page .automation-hero-grid > *,
.site-page .about-hero-grid > *,
.site-page .contact-hero-grid > *,
.site-page .work-hero-grid > *,
.site-page .portfolio-hero-grid > *,
.site-page .case-hero-grid > *,
.site-page .ads-case-hero-grid > *,
.site-page .automation-case-hero-grid > *,
.site-page .blog-hero-grid > *,
.site-page .article-layout > * {
  min-width: 0 !important;
  max-width: 100%;
}

/* Wide editorial data stays local to its wrapper. */
.article-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Responsive shared chrome + gutters ---------- */
@media (max-width: 1040px) {
  .site-header .nav-wrap {
    width: calc(100% - 40px) !important;
    max-width: var(--container) !important;
    min-height: 74px !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 18px !important;
  }

  .site-header nav {
    justify-self: auto !important;
  }

  .site-header .nav-links {
    position: fixed !important;
    top: 74px !important;
    left: 20px !important;
    right: 20px !important;
    width: auto !important;
    max-width: calc(100vw - 40px) !important;
    display: grid !important;
    gap: 0 !important;
    padding: 16px 20px !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    background: rgba(18,18,18,.985) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.34) !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(.985);
    transform-origin: top right;
    white-space: normal !important;
  }

  .site-header .nav-links.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }

  .site-header .nav-links a {
    display: block !important;
    padding: 11px 0 !important;
  }

  .site-header .nav-cta {
    display: none !important;
  }

  .site-header .menu-toggle {
    display: grid !important;
    flex: 0 0 44px !important;
  }

  /* One tablet gutter contract for every page, including homepage. */
  body.site-page .container {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: var(--container) !important;
    margin-inline: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Header wrapper uses its own exact gutter so it cannot double-pad. */
  body.site-page .site-header .nav-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 720px) {
  html,
  body.site-page {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body.site-page .container {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .site-header .nav-wrap {
    width: calc(100% - 32px) !important;
    min-height: 70px !important;
    margin-inline: auto !important;
  }

  .site-header .brand-logo img {
    height: 29px !important;
    max-width: 158px !important;
  }

  .site-header .nav-links {
    top: 70px !important;
    left: 16px !important;
    right: 16px !important;
    max-width: calc(100vw - 32px) !important;
  }

  body.site-page main,
  body.site-page main > section,
  body.site-page main section {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Desktop decoration never defines the mobile layout width. */
  body.site-page main section::before,
  body.site-page main section::after {
    max-width: 100vw !important;
  }

  /* No component may widen the page because of a long label/string. */
  .site-page h1,
  .site-page h2,
  .site-page h3,
  .site-page p,
  .site-page li,
  .site-page strong,
  .site-page span,
  .site-page a {
    overflow-wrap: break-word;
  }

  .site-page .btn-row {
    max-width: 100% !important;
  }

  .site-page .btn-row .btn {
    max-width: 100% !important;
  }
}

@media (max-width: 430px) {
  body.site-page .container {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .site-header .nav-wrap {
    width: calc(100% - 28px) !important;
  }

  .site-header .nav-links {
    left: 14px !important;
    right: 14px !important;
    max-width: calc(100vw - 28px) !important;
  }
}
/* ============================================================
   FINAL MOBILE HEADER HOTFIX
   1. Keep logo and menu control away from viewport edges.
   2. Allow every Our Work item to expand on mobile.
   3. Keep the full mobile menu usable on shorter screens.
   ============================================================ */

@media (max-width: 1040px) {
  .site-header .nav-links {
    max-height: calc(100dvh - 92px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .site-header .nav-work-dropdown.open > .nav-dropdown-menu {
    max-height: 310px !important;
    margin-bottom: 8px !important;
    overflow: visible !important;
  }

  .site-header .nav-services-dropdown.open > .nav-dropdown-menu {
    max-height: 390px !important;
    margin-bottom: 8px !important;
  }
}

@media (max-width: 720px) {
  .site-header .nav-wrap {
    width: auto !important;
    max-width: none !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
  }

  .site-header .brand-logo {
    margin-left: 2px !important;
  }

  .site-header .menu-toggle {
    margin-right: 2px !important;
  }

  .site-header .nav-links {
    left: 20px !important;
    right: 20px !important;
    width: auto !important;
    max-width: none !important;
  }
}

@media (max-width: 430px) {
  .site-header .nav-wrap {
    margin-left: 18px !important;
    margin-right: 18px !important;
  }

  .site-header .brand-logo {
    margin-left: 3px !important;
  }

  .site-header .menu-toggle {
    margin-right: 3px !important;
  }

  .site-header .nav-links {
    left: 18px !important;
    right: 18px !important;
  }
}