/* =====================================================================
   responsive.css — mobile / tablet layering for the whole site.
   Loaded LAST in every page (after base + theme + page CSS) so these
   rules win without !important. Token overrides target the theme
   classes (.theme-lobby/.theme-corporate) because those set the tokens.
   Breakpoints:  <=920px tablet/stack + hamburger nav   |   <=600px phone
   ===================================================================== */

/* ----------  HAMBURGER BUTTON (hidden on desktop)  ---------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  cursor: pointer;
  flex: 0 0 auto;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text-1);
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.18s ease;
}

/* =====================  <= 920px  : tablet + mobile nav  ===================== */
@media (max-width: 920px) {
  .theme-lobby, .theme-corporate, :root {
    --container-pad: 26px;
    --section-pad-y: 44px;
    --hero-pad-y: 46px;
  }
  body { overflow-x: hidden; }
  html { overflow-x: hidden; }   /* iOS Safari needs both */

  /* ----- restructure wide page-specific components -----
     Inner pages ship custom desktop-sized diagrams ~700-1000px wide.
     Rather than push the page or squeeze them into a narrow strip,
     drop the multi-column grids to a single column on mobile/tablet
     so each card reads at full width.
       .flow-* (hvac/industrial/construction)
       .tree-* (solutions decision tree)  */

  /* =================================================================
     FLOW DIAGRAM — phone REDESIGN (hvac / industrial / construction)
     The desktop diagram is a horizontal 4-stage grid with SVG connectors
     between stages. On phone we turn it into a real VERTICAL flow:
       • the stage rail becomes a compact numbered "stages" legend strip
       • the diagram stacks to one column (stage groups in narrative order)
       • the connector cells (which fall BETWEEN stage groups when stacked)
         are re-shown as a vertical line + ↓ chevron, so the flow still
         reads as a connected sequence rather than a pile of cards.
     ================================================================= */
  .flow-composition { padding: 24px 18px; }

  /* stage rail → wrapping legend of numbered chips (not an orphaned 2x2) */
  .flow-rail {
    grid-template-columns: none;
    display: flex; flex-wrap: wrap; gap: 8px;
    padding-bottom: 16px;
    margin-bottom: 22px;
  }
  .flow-rail-stage {
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-pill);
  }
  .flow-rail-stage + .flow-rail-stage::before { display: none; }

  /* diagram → single column; connectors become vertical row separators */
  .flow-diagram {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: auto;
    margin-bottom: 22px;
  }
  .flow-col,
  .flow-col--parallel,
  .flow-col--single,
  .flow-col--terminal { gap: 12px; }

  /* vertical connector: hide the horizontal SVG, draw a line + down chevron */
  .flow-connector {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 12px 0;
    color: var(--accent);
  }
  .flow-connector svg { display: none; }
  .flow-connector::before {
    content: '';
    width: 2px; height: 20px;
    background: currentColor; opacity: 0.5;
  }
  .flow-connector::after {
    content: '';
    width: 11px; height: 11px;
    border-right: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    transform: translateY(-5px) rotate(45deg);
  }

  /* fs-mod-arrow (industrial + construction module sequences) is a horizontal
     SVG arrow between modules; once the modules stack it points sideways into
     nothing. Swap it for a small ↓ chevron, matching the flow connectors. */
  .fs-mod-arrow {
    height: auto;
    padding: 8px 0;
  }
  .fs-mod-arrow svg { display: none; }
  .fs-mod-arrow::after {
    content: '';
    width: 10px; height: 10px;
    border-right: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    transform: rotate(45deg);
  }

  /* hvac-only: the Invoicing -> Zoho Books mini-row inside the terminal
     column was a 3-col grid; stack it too. */
  .flow-invoice-row { grid-template-columns: 1fr; gap: 14px; }
  .flow-books-connector { display: none; }

  /* hvac-only: WorkDrive 'foundation layer' band is a 3-col 'brand | tagline | icons'
     grid that runs ~600px wide and has negative margins extending past the
     composition. Restack as a column and let the icons wrap. */
  .flow-workdrive { margin: 0; }
  .flow-workdrive-band {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 14px;
  }
  .flow-workdrive-brand {
    border-right: none;
    padding-right: 0;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }
  .flow-workdrive-icons { flex-wrap: wrap; }

  /* hvac-only: .unlock-grid is a 2-col 'P21 today | QuotePro next' card
     grid that didn't fit on phone. Stack. */
  .unlock-grid { grid-template-columns: 1fr; }

  /* Page-specific multi-col grids found via a Playwright sweep at 375px —
     all of these were authored for desktop and pushed wider than the
     viewport on mobile. Collapse each to a single column. */
  .spec-callout-rows,           /* hvac     — 3-col specs band */
  .fullsteam-pillars,           /* industrial — 3-col 'pillars' grid */
  .fs-zone-head,                /* industrial — 2-col zone heading */
  .fs-zone-modules,             /* industrial — 7-col module strip */
  .cn-modrow,                   /* construction — multi-col module rows */
  .cn-modrow--three,            /* construction — 3-col variant */
  .focus-grid,                  /* solutions — 6-col focus capabilities */
  .layer-body,                  /* solutions — 2-col layer cards */
  .layer-top-body,
  .layer-base-body {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* solutions architecture: the OUTER .layer grid is a 132px label rail +
     body. On phone the rail eats the left third and the body overflows, so
     stack it: the rail becomes a full-width header with a bottom dashed rule
     (instead of a right rail + connector dot). */
  .layer { grid-template-columns: 1fr; }
  .layer-rail {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 0 0 12px;
    border-right: none;
    border-bottom: 1px dashed var(--accent);
    margin-bottom: 16px;
  }
  .layer-rail::after { display: none; }   /* the on-rail connector dot doesn't apply when stacked */
  .layer-body { padding: 0; }             /* drop the left indent that assumed a rail to the left */

  /* construction-only: .asym-grid is a 2-col 'main card | side panel'
     layout that doesn't fit on phones (the right partnership panel gets
     clipped). Stack it. */
  .asym-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* Solutions decision-tree row: 3-col if|arrow|then -> stacked */
  .tree-row { grid-template-columns: 1fr; gap: 14px; }
  .tree-if {
    border-right: none;
    border-bottom: 1px dashed var(--line);
    padding: 16px 0;
  }
  .tree-then-arrow { display: none; }

  /* Long CTA copy: base.css sets white-space: nowrap for desktop; let
     it wrap on mobile so it doesn't push the page wide. */
  .btn { white-space: normal; text-align: center; }

  /* ----- mobile nav ----- */
  .nav-toggle { display: inline-flex; }
  .topbar .partner-badge { display: none; }   /* declutter; badge still in hero/footer */
  .navlinks {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    display: none;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-top: none;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    box-shadow: 0 16px 28px rgba(0,0,0,0.12);
    padding: 6px 0;
    z-index: 30;
  }
  body.nav-open .navlinks { display: flex; }
  .navlinks a {
    padding: 14px var(--container-pad);
    width: 100%;
    font-size: 15px;
  }
  .navlinks a + a { border-top: 1px solid var(--line); }
  /* hamburger -> X */
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* lobby has a DARK topbar with light nav text, so the bars + dropdown
     must be dark-surface too (the default --bg-1/--text-1 are the light
     body tokens and would render light-on-light). Corporate's white
     topbar + dark text works with the defaults. */
  .theme-lobby .nav-toggle { border-color: rgba(244, 241, 236, 0.22); }
  .theme-lobby .nav-toggle span { background: #f4f1ec; }
  .theme-lobby .navlinks {
    background: #1a1e26;
    border-color: rgba(244, 241, 236, 0.12);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.45);
  }
  .theme-lobby .navlinks a + a { border-top-color: rgba(244, 241, 236, 0.10); }

  /* ----- hero stacks ----- */
  .hero-grid { grid-template-columns: 1fr; gap: 38px; }
  .hero h1 { font-size: clamp(40px, 7.4vw, 60px); }
  .hero .lede { max-width: none; }
  .hero-visual {
    margin-right: 0;          /* kill the desktop viewport-bleed */
    border-right: 1px solid var(--line);
    aspect-ratio: 16 / 10;
  }

  /* ----- grids step down ----- */
  .services-grid,
  .industries-grid,
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { gap: 40px 32px; }
  .cases-grid { grid-template-columns: 1fr; }
  .section-head.wide { grid-template-columns: 1fr; gap: 14px; }
  .section-head { margin-bottom: 44px; }

  /* ----- CTA + footer ----- */
  .cta-grid { grid-template-columns: 1fr; gap: 30px; }
  .cta-band h2 { font-size: clamp(38px, 6.2vw, 52px); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px 28px; }

  /* ----- home "practice" build/engage section: drop the spine ----- */
  .be-grid { grid-template-columns: 1fr; gap: 8px; }
  .be-spine { display: none; }
  .be-col { padding: 8px 0; }
  /* the engage column needs a TOP divider on phone so "How we engage" reads as
     a distinct section once the central spine is gone (was the spine's job). */
  .be-col--engage { padding: 28px 0 8px; border-top: 1px solid var(--card-border); margin-top: 20px; }
  .be-col-lede { margin-left: 0; }
  .be-stack { margin-left: 0; }
  /* align the engage "phase" rows with the build "marker" rows: the desktop
     100px pip gutter wastes a third of a phone width and mis-indents vs the
     56px build markers. */
  .be-item--phase { grid-template-columns: 56px 1fr; }

  /* ---------------------------------------------------------------
     BESPOKE GRIDS missed by the original sweep. These kept their
     desktop grid-template-columns at phone width, so their tracks
     summed wider than the ~327px content box and content was pushed
     off the right edge (silently clipped by overflow-x:hidden).
     Verified off-screen at 390px. Collapse each to one column.
       work-grid / contractor-card ............ hvac
       fullsteam-card / feat-case-card ........ industrial (+ construction)
       aci-band / asym-main-head / asym-pillars
         / benefits-grid / ps-drop-row ........ construction
       process-grid ........................... solutions
       case-hero-grid / .at-a-glance dl ....... all 4 case pages
       space-grid / facts-grid ................ about
     (Phase 2 replaces the flow / layer / tree stacks with DESIGNED
     vertical layouts; this pass just stops the breakage.)
     --------------------------------------------------------------- */
  .work-grid,
  .contractor-card,
  .fullsteam-card,
  .feat-case-card,
  .aci-band,
  .asym-main-head,
  .asym-pillars,
  .benefits-grid,
  .process-grid,
  .ps-drop-row,
  .case-hero-grid,
  .space-grid,
  .facts-grid {
    grid-template-columns: 1fr;
  }

  /* case-study hero: restore the marketing photo (was a ~2px sliver) */
  .case-hero-grid { gap: 28px; }
  .case-hero-visual { min-height: 220px; aspect-ratio: 16 / 10; }

  /* co-brand bands + contractor card: tidy the now-orphaned rhythm */
  .aci-band { gap: 16px; }
  .asym-main-head { gap: 16px; padding: 22px 24px; }
  .contractor-card { gap: 18px; }

  /* Project Scout 7-col drop-row stacks; SVG step arrows get a Phase-2
     redesign — for now hide the horizontal connectors so they don't
     float sideways between stacked rows. */
  .ps-drop-row { gap: 12px; }
  .ps-drop-arrow { display: none; }
}

/* =====================  <= 600px  : phone  ===================== */
@media (max-width: 600px) {
  .theme-lobby, .theme-corporate, :root {
    --container-pad: 24px;        /* gutter — wordmark/hamburger sit off the edge */
    --section-pad-y: 38px;
    --hero-pad-y: 34px;
    --gap-grid: 16px;
  }

  /* everything to a single column */
  .services-grid,
  .industries-grid,
  .why-grid,
  .stats-grid { grid-template-columns: 1fr; }
  .why-grid { gap: 30px; }
  .stats-grid { gap: 24px; }

  /* type scale-down */
  .hero h1 { font-size: clamp(31px, 9vw, 42px); }
  .hero .lede { font-size: 16px; margin-bottom: 30px; }
  .section-head { margin-bottom: 32px; }
  .section-head h2 { font-size: clamp(28px, 8.5vw, 38px); }
  .cta-band h2 { font-size: clamp(30px, 9vw, 40px); }

  /* case tile: stack image over body */
  .case-tile { grid-template-columns: 1fr; }
  .case-image { aspect-ratio: 16 / 9; min-height: 180px; }

  /* footer to one column, centered baseline row */
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-end { flex-direction: column; gap: 10px; text-align: center; }

  /* full-width, easy-tap buttons */
  .cta-row { width: 100%; }
  .cta-row .btn,
  .cta-actions .btn,
  .cta-actions { width: 100%; }
  .cta-row .btn,
  .cta-actions .btn { justify-content: center; }

  /* case-page bottom CTA card: 2-col text|button grid stacks vertically
     and the button goes full-width so it doesn't push past the card. */
  .case-cta {
    grid-template-columns: 1fr;
    padding: 28px 22px;
    gap: 18px;
  }
  .case-cta .btn { width: 100%; justify-content: center; }

  /* nudge the theme switch into the corner */
  .theme-switch { bottom: 16px; left: 16px; }
  .theme-switch button { padding: 5px 10px; }

  /* services/industry cards: a touch less padding */
  .service { padding: 26px 22px; }
  .ind-body { padding: 22px 22px 24px; }
  /* case article: the inner .container already supplies the gutter, so the
     22px here was a DOUBLE gutter (~46px each side → ~280px reading width).
     Vertical-only padding restores the full reading measure. */
  .case-body { padding: 24px 0 8px; }

  /* client logo marquee: narrower chips + smaller edge fade so more than
     ~1.5 logos are visible at a time and edge logos aren't half-clipped. */
  .logo-slot { flex-basis: 158px; height: 66px; padding: 12px 18px; }
  .logo-slot img { max-height: 34px; }
  .logo-strip {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
  }

  /* at-a-glance (case pages): drop the 110px label rail so values get
     full width instead of a 1-word-per-line "ransom note" column. */
  .at-a-glance dl { grid-template-columns: 1fr; gap: 2px 0; }
  .at-a-glance dt { margin-top: 14px; }

  /* TAP TARGETS — lift below-44px controls toward the 44px guideline.
     Footer nav + mailto/tel links were ~29px; theme toggle ~24px. */
  .footer .footer-grid a { padding: 10px 0; }
  .theme-switch button { padding: 8px 14px; }
}