/* ==========================================================================
   ERRORMATIC — RESPONSIVE LAYER
   Loaded last so it can correct layout at tablet and phone widths.
   Targets: 320px, 375px, 425px phones; 768–1024px tablets.
   Desktop rendering above 1100px is intentionally left untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   GLOBAL OVERFLOW GUARDS
   A single overflowing child creates horizontal scroll for the whole page,
   which is the most common "broken on mobile" symptom. These are the cheap
   structural guarantees that prevent it.
   -------------------------------------------------------------------------- */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas, iframe { max-width: 100%; }
/* Long words/URLs (e.g. the contact email) must not push the layout wide. */
p, li, h1, h2, h3, h4, h5, a, span, summary { overflow-wrap: break-word; }
/* Grid and flex children default to min-width:auto, which refuses to shrink
   below content size — the usual cause of stubborn overflow. */
.container > *, .hero-inner > *, .prose-row > *, .contact-layout > * { min-width: 0; }

/* --------------------------------------------------------------------------
   TABLET  (≤1100px)
   Multi-column grids step down to two columns rather than jumping straight
   from three to one, which previously wasted a lot of tablet width.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .services-grid,
  .hub-grid,
  .values-list,
  .tier-grid { grid-template-columns: repeat(2, 1fr); }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  .hero-inner { grid-template-columns: 1fr; gap: var(--sp-5); }
  .hero-meta {
    border-left: none;
    border-top: 1px solid var(--c-line);
    padding-left: 0;
    padding-top: var(--sp-4);
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-5);
  }
  .page-intro .intro-row { grid-template-columns: 1fr; }

  /* Section headers stop fighting for width and stack instead. */
  .section-head { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .section-head h2, .section-head p { max-width: none; }
}

/* --------------------------------------------------------------------------
   SMALL TABLET / LARGE PHONE  (≤860px)
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .services-grid,
  .hub-grid,
  .portfolio-grid,
  .feature-grid,
  .values-list,
  .tier-grid,
  .prose-row,
  .contact-layout { grid-template-columns: 1fr; }

  .hero { min-height: auto; padding-top: calc(var(--sp-9) + 1rem); }
  /* The absolutely-positioned scroll cue collided with the hero stats once
     the hero stopped being full-viewport-height. It adds nothing on touch. */
  .scroll-cue { display: none; }

  /* Trust strip: the label and the marquee can't share a row this narrow. */
  .trust-strip .container { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .marquee { width: 100%; }

  /* Footer collapses to two columns, brand block spans full width. */
  .footer-top { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }

  /* Process steps: drop the oversized numeral column, keep the content. */
  .approach-item { grid-template-columns: 1fr; gap: var(--sp-2); padding-block: var(--sp-5); }
  .approach-item::before { display: none; }

  .timeline-item { grid-template-columns: 1fr; gap: var(--sp-2); }

  /* Job cards: title and Apply button stack instead of colliding. */
  .job-card { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }

  .cta-band { padding: var(--sp-7) var(--sp-4); }
  .form-row { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   PHONE  (≤600px) — covers 425px, 375px and 320px
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  /* Buttons go full-width and stack; side-by-side pills wrap badly at 320px. */
  .hero-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .hero-actions .btn { width: 100%; justify-content: center; }

  .stats-grid { grid-template-columns: 1fr; }
  .stat-card { padding: var(--sp-5) var(--sp-4); }

  .footer-top { grid-template-columns: 1fr; }

  /* Portfolio: square media matches the 1:1 source images exactly. */
  .portfolio-card { aspect-ratio: 1 / 1; }
  .portfolio-card .overlay { padding: var(--sp-3); }

  .testimonial-card { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
  .testimonial-card::before { font-size: 4.5rem; }
  .testimonial-card .quote { font-size: 1.125rem; }

  .faq-item summary { gap: var(--sp-3); }
  .feature-item { flex-direction: column; gap: var(--sp-3); }

  /* Contact details can be long; let them wrap rather than overflow. */
  .info-block a { word-break: break-word; }

  .cta-band { margin-inline: var(--container-pad); padding: var(--sp-6) var(--sp-4); }
  .map-frame { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   NARROW PHONE  (≤360px) — the 320px case
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
  .logo img { height: 28px; }
  .btn { padding: 0.8rem 1.1rem; font-size: 0.875rem; }
  .service-card, .hub-card { padding: var(--sp-4); min-height: 0; }
  .stat-card { padding: var(--sp-4) var(--sp-3); }
  .testimonial-card::before { font-size: 3.5rem; }
}

/* --------------------------------------------------------------------------
   TOUCH & MOBILE NAV
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  /* The mega-menu had min-width:560px, which overflows any phone. */
  .mega-menu { min-width: 0; width: 100%; }
  .mega-menu a { padding: var(--sp-2) 0; }

  /* Give the drawer room to breathe and allow it to scroll if the menu is
     taller than the viewport (it is, on a 320x568 device). */
  .primary-nav {
    padding-top: 5.5rem;
    padding-bottom: var(--sp-6);
    -webkit-overflow-scrolling: touch;
  }
}

/* Comfortable tap targets on touch devices (WCAG 2.5.5 suggests ~44px).
   Measured in a headless browser at 320/375/425px: footer links were landing
   at 17px tall and the logo at 28px, both well under a usable tap size. */
@media (hover: none) and (pointer: coarse) {
  .nav-link { min-height: 44px; align-items: center; }
  .mega-menu a { min-height: 44px; justify-content: center; }
  .footer-col a,
  .footer-socials a,
  .footer-bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .footer-col li { line-height: 1.2; }
  /* Footer brand block holds the email/phone links in a plain <p>. */
  .footer-brand a { display: inline-flex; align-items: center; min-height: 40px; }
  .logo { min-height: 44px; align-items: center; }
  .info-block a { display: inline-flex; align-items: center; min-height: 40px; }
  .faq-item summary { min-height: 52px; }
  .swiper-nav-btn { width: 44px; height: 44px; }
  /* Hover-only lifts are pointless on touch and can leave cards stuck in a
     hovered state after a tap. */
  .service-card:hover, .hub-card:hover, .feature-item:hover { transform: none; }
}

/* Landscape phones: the full-height hero leaves no room for content. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; padding-top: 6rem; padding-bottom: var(--sp-6); }
  .scroll-cue { display: none; }
}

/* --------------------------------------------------------------------------
   MOBILE NAV DRAWER — correctness fixes
   Verified in a headless browser: with the drawer open, the fixed-position
   panel painted over the header, hiding the logo and the hamburger. Because
   the toggle is statically positioned it lost the paint order to the fixed
   drawer, leaving no way to close the menu. The header CTA was also being
   hidden outright rather than shown inside the drawer.
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  /* Keep the header (logo + toggle) above the open drawer. */
  .site-header { z-index: 900; }
  .header-inner { position: relative; z-index: 2; }
  .logo { position: relative; z-index: 3; }
  .nav-toggle { position: relative; z-index: 3; }
  .primary-nav { z-index: 1; }

  /* Swap the hamburger for a close glyph while the drawer is open. */
  .nav-toggle .icon-close { display: none; }
  body.nav-open .nav-toggle .icon-open { display: none; }
  body.nav-open .nav-toggle .icon-close { display: block; }

  /* Show the call-to-action inside the drawer instead of removing it. */
  .header-cta { margin-top: var(--sp-5); width: 100%; }
  .header-cta .btn-ghost {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    border-color: var(--c-signal);
    color: var(--c-text);
  }
}

/* --------------------------------------------------------------------------
   MOBILE DRAWER — containing-block fix
   ROOT CAUSE: .site-header.is-scrolled applies backdrop-filter. Any of
   backdrop-filter / filter / transform / perspective on an ancestor makes that
   ancestor the containing block for position:fixed descendants. So once the
   page was scrolled, the drawer's `inset: 0` resolved against the 120px-tall
   header instead of the viewport, collapsing it and clipping the submenus.
   That is exactly why it only worked at the top of the page.
   FIX: drop the backdrop-filter (and any transform) while the drawer is open,
   so the drawer measures against the viewport again.
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  body.nav-open .site-header,
  body.nav-open .site-header.is-scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
    filter: none;
    background: transparent;
    box-shadow: none;
  }

  /* Belt and braces: pin the drawer explicitly to the viewport and let it
     scroll internally when the expanded submenus exceed the screen height.
     100dvh keeps it correct while mobile browser toolbars show/hide. */
  .primary-nav {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Submenus expand in flow inside the drawer rather than floating. */
  .nav-item.is-open .mega-menu {
    display: grid;
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    background: transparent;
  }
  .mega-menu .item-desc { display: none; } /* keep the expanded list compact */
}

/* --------------------------------------------------------------------------
   DRAWER CONTAINING-BLOCK SAFETY
   The header carries backdrop-filter once scrolled. On real iOS/Android
   browsers (unlike headless Chromium) backdrop-filter establishes a
   containing block for fixed-position descendants — which collapses the
   fixed drawer into the header's 68px box, so the menu only appeared
   correct at scrollY 0. Dropping the filter while the drawer is open keeps
   the drawer anchored to the viewport at any scroll position.
   -------------------------------------------------------------------------- */
body.nav-open .site-header,
body.nav-open .site-header.is-scrolled {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  filter: none;
  transform: none;
  will-change: auto;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 960px) {
  .primary-nav {
    /* dvh tracks the mobile URL bar; vh is the fallback for older browsers. */
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overscroll-behavior: contain; /* stop scroll chaining to the page behind */
  }
  /* The drawer paints its own solid backdrop, so it stays readable even with
     the header's background removed above. */
  .primary-nav.is-open { background: var(--c-paper); }

  /* Submenus animate open rather than snapping, and never inherit the
     desktop popover's absolute positioning. */
  .mega-menu {
    position: static;
    transform: none;
    box-shadow: none;
  }
}