/* Touch pop-up for the 'i' icons — 32 from each screen edge, centred, X to
   close (agency spec, Trello 2026-07-27). Only below 1200: desktop keeps the
   hover tooltip. */
.info-modal { display: none; }
@media (max-width: 1199px) {
  body.info-open .info-modal {
    display: flex;
    position: fixed; inset: 0; z-index: 70;
    align-items: center; justify-content: center;
  }
}
.info-modal-card {
  position: relative;
  width: calc(100% - 4rem);
  min-height: 9.0625rem;
  padding: 3rem 2rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 1rem;
  background: var(--blur-pill-bg);
  backdrop-filter: blur(var(--blur-pill-blur));
  -webkit-backdrop-filter: blur(var(--blur-pill-blur));
  color: var(--offwhite);
}
.info-modal-text {
  text-align: center;
  font-family: var(--font-mono); font-weight: 400;
  font-size: 1rem; line-height: 1.3rem;
}
.info-modal-close { position: absolute; top: 1rem; right: 1rem; width: 1.5rem; height: 1.5rem; }
.info-modal-close span, .info-modal-close span::before {
  position: absolute; left: 0; top: 0.6875rem;
  display: block; width: 1.5rem; height: 0.125rem;
  background: var(--offwhite);
}
.info-modal-close span { transform: rotate(45deg); }
.info-modal-close span::before { content: ''; top: 0; transform: rotate(90deg); }

/* Tablet (768 design frame, applied 768–1199) and Mobile (390 design frame,
   applied <768). All values from the matching Figma frames; between the
   specified widths the layout scales fluidly. Desktop rules stay ≥1200. */

/* Mobile/tablet-only bits, hidden by default on desktop. These defaults must
   come BEFORE the media queries below — same specificity, so source order
   decides which wins inside the breakpoints. */
.table-toggle { display: none; }
.acc-video { display: none; }
.industry-desc-mobile { display: none; }

/* Hamburger + overlay are the navigation below 1200 (no nav pill in the
   tablet/mobile designs) */
/* Menu button: 48 blur square with a 22x17 hamburger, keeping the old icon's
   centre (Figma still shows the previous bare 30px icon — this newer style
   came from the agency's screenshot, Trello 2026-07-27). */
.menu-btn {
  display: none;
  position: fixed;
  top: 2rem; right: 1rem;
  z-index: 60;
  width: 3rem; height: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background: var(--blur-pill-bg);
  backdrop-filter: blur(var(--blur-pill-blur));
  -webkit-backdrop-filter: blur(var(--blur-pill-blur));
}
.menu-btn-bars { position: relative; }
.menu-btn-bars,
.menu-btn-bars::before,
.menu-btn-bars::after {
  display: block;
  width: 1.375rem; height: 0.125rem;      /* 22 x 2 */
  background: var(--offwhite);
  transition: transform 0.25s ease, background 0.2s ease;
}
.menu-btn-bars::before { content: ''; position: absolute; top: -0.4688rem; }  /* 7.5 */
.menu-btn-bars::after  { content: ''; position: absolute; top:  0.4688rem; }
/* Open state: the bars become the X (UI Bible "icon turns into X to close") */
body.menu-open .menu-btn-bars { background: transparent; }
body.menu-open .menu-btn-bars::before { transform: translateY(0.4688rem) rotate(45deg); }
body.menu-open .menu-btn-bars::after  { transform: translateY(-0.4688rem) rotate(-45deg); }
.menu-overlay {
  display: none;
  position: fixed; inset: 0;
  z-index: 55;
  background: var(--blur-pill-bg);
  backdrop-filter: blur(var(--blur-pill-blur));
  -webkit-backdrop-filter: blur(var(--blur-pill-blur));
}
/* Overlay can only exist below 1200 — the media query guards against the
   open menu surviving a resize up into desktop (JS also closes it) */
@media (max-width: 1199px) {
  body.menu-open .menu-overlay { display: block; }
}
/* Same box as the page's parked logo (x24 y38.5 w185, Aug-18 Figma 2558:9470)
   so the wordmark doesn't jump when the menu opens/closes (Trello card) */
.menu-overlay-logo { position: absolute; left: 1.5rem; top: 2.4062rem; width: 11.5625rem; }
.menu-overlay-logo img { width: 100%; display: block; }
/* Links and the CTA run in flow from the links' start position, so the button
   can never land on top of the last link — it did with the fixed offset the
   overlay used to have (agency, Trello 2026-07-27). */
.menu-overlay-body {
  position: absolute; left: 1.5rem; right: 1.5rem; top: 15.0625rem;
  display: flex; flex-direction: column; align-items: flex-start;
}
.menu-overlay-links {
  /* Figma 2558:9470 draws leading-trimmed 17px link boxes at gap 32 = a 49px
     pitch; our full 31.2px line boxes made the menu ~30% more spread out
     (VB 28AUG26 #4) — gap 17.8 restores the exact 49px pitch. */
  display: flex; flex-direction: column; gap: 1.1125rem;
  align-items: flex-start;
}
.menu-overlay-links a {
  font-weight: 400; font-size: 1.5rem; line-height: 1.95rem; letter-spacing: 0.03rem;
  color: var(--offwhite);
}
.menu-overlay .btn-solid { margin-top: 2.625rem; }  /* Figma: 42 above the button */

@media (max-width: 1199px) {
  .gh-br { display: none; }  /* VB 27AUG26 #4: forced break is desktop-only */
  .nav { display: none; }
  .sticky-cta { left: 1rem; }   /* 16 on tablet (agency file 2026-08-12) */
  .menu-btn { display: flex; }

  /* Buttons: pill 200x48 pad 40, icon square 48 (UI Bible: mobile buttons smaller) */
  .btn-solid-pill, .btn-blur-pill, .acc-pill { height: 3rem; padding: 0 2.5rem; }
  .btn-solid-icon, .btn-blur-icon, .acc-square { width: 3rem; height: 3rem; }
  /* Icons inside the 48px squares are 11.4px in the tablet/mobile frames */
  .btn-solid-icon svg, .btn-blur-icon svg,
  .acc-pill-row .acc-square svg, .acc-card .acc-square svg { width: 0.7125rem; height: 0.7125rem; }

  /* section gap 100 -> 120 (agency working file, 2026-08-12) */
  main > section, .footer { margin-top: 7.5rem; }

  /* Hero: title 46/52.9 at (32,40); wordmark 704x116 at (32,639) of 768x788.
     Height = the browser window (Vanderbrand email 2026-08-07, supersedes the
     frame's 788); min-height keeps the title clear of the wordmark. Wordmark
     bottom margin is fixed units now that the height is dynamic (33/788). */
  .hero { height: 100vh; height: 100svh; max-height: none; min-height: 56.5vw; }
  .hero-text { left: 4.17%; top: 2rem; width: 20.125rem; gap: 1.5rem; }
  .hero-title { font-size: 2.875rem; line-height: 3.625rem; }
  .hero-logo-slot { left: 4.17%; bottom: 2.0625rem; width: 91.67%; } /* 704/768 */

  /* Overview: pad-left 220, text 448w 20/26.8 ls .8 */
  .overview { padding-left: 28.65%; padding-right: 3rem; }
  .overview p { max-width: 28rem; font-size: 1.25rem; line-height: 1.675rem; letter-spacing: 0.05rem; }

  /* Info map card: 704x710 r56, title 34, dots 24 */
  .info { padding: 0 4.17%; }
  .info-card { border-radius: 3.5rem; aspect-ratio: 704 / 710; }
  .info-title { font-size: 2.125rem; line-height: 2.55rem; }

  /* Impact: pad 48, h2 46/52.9 500w, body 20/26.8 496w */
  .impact { padding: 0 3rem; }
  .impact .h-72 { font-size: 2.875rem; line-height: 3.625rem; max-width: 31.25rem !important; }
  .impact-desc { margin-top: 2.5rem; max-width: 31rem; font-size: 1.25rem; line-height: 1.675rem; letter-spacing: 0.05rem; }

  /* Industry: pad top 100 bottom 40, h2 72/84 670w, video card 704x710 r32 */
  .industry { padding: 6.25rem 0 2.5rem; }
  .industry-title { margin-top: 2rem; font-size: 4.5rem; line-height: 5.25rem; max-width: 41.875rem; }  /* gap 32 (2026-08-12) */
  .industry-desc { margin-top: 2rem; max-width: 31.125rem; }
  .industry-media { margin-top: 4rem; padding: 0 4.17%; }
  .video-card { border-radius: 2rem; aspect-ratio: 704 / 710; }
  .accordion { width: 23.3125rem; }
  /* Open card spans the full accordion column so its left margin matches the
     right (Trello 2026-08-18 "extend the left side of opened dropdown boxes") */
  .acc-card { width: 23.3125rem; padding: 0.75rem 0.75rem 2rem 1.5rem; }
  /* The 32-from-the-edge rule for closed rows is a desktop redline; below 1200
     the accordion sits in its own container (mobile offset set further down). */
  .acc-pill-row { margin-right: 0; }

  /* Insights: h2 46/52.9; table switches to toggle component 672w r24 */
  .insights-head { padding: 0 3rem; }
  .insights-head .h-72 { font-size: 2.875rem; line-height: 3.625rem; max-width: 31.25rem !important; }
  .insights-desc { margin-top: 2.5rem; max-width: 31rem; font-size: 1rem; }
  .table {
    margin: 2.5rem 3rem 0;
    background: var(--beige);
    border-radius: 1.5rem;
    padding: 1.5rem 1.5rem 3.5rem;
  }
  /* Aug-18 Figma: card matches the selected column — Interhouse light blue */
  .table[data-view="interhouse"] { background: var(--blue); }
  .t-cap-top, .t-cap-bottom, .t-head { display: none; }
  .table-toggle {
    display: flex;
    justify-content: center;
    margin-bottom: 2.5rem;
  }
  .table-toggle-pill {
    display: flex;
    padding: 0.5rem;
    gap: 0;
    background: var(--blur-pill-bg);
    backdrop-filter: blur(0.75rem);
    -webkit-backdrop-filter: blur(0.75rem);
    border-radius: 1rem;
  }
  .table-toggle-pill button {
    padding: 0.625rem 1rem;
    border-radius: 0.5625rem;
    font-family: var(--font-mono); font-weight: 450;
    font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.0375rem;
    color: var(--offwhite);
  }
  .table-toggle-pill button.is-active { background: var(--offwhite); color: var(--ink); }
  .t-row { grid-template-columns: 15.8125rem 1fr; gap: 0 0; border-top: 1px solid rgba(0,0,0,0.1); }
  .t-div { display: none; }
  .table[data-view="traditional"] .t-ih { display: none; }
  .table[data-view="interhouse"] .t-trad { display: none; }
  .t-trad, .t-ih { background: none; padding: 0.75rem 0; min-height: 0; }
  .t-label { opacity: 0.6; padding: 0.75rem 1.5rem 0.75rem 0; min-height: 0; }
  /* The desktop hover tooltip is 320 wide and absolutely positioned inside a
     16px icon — below 1200 it pushed the page 91px wider than the viewport
     (the horizontal scroll the agency reported, Trello 2026-07-27). Touch
     screens get the tap pop-up below instead. */
  .t-info[data-tip]:not([data-tip=""])::after { content: none; }
  .t-info[data-tip]:not([data-tip=""]) { cursor: pointer; }

  /* Implementation: strip stays horizontal, pad 32, cards unchanged 586 */
  .impl-head { padding: 0 3rem; }
  .impl-head .h-72 { font-size: 2.875rem; line-height: 3.625rem; max-width: 31.25rem !important; }
  .impl-desc { margin-top: 2.5rem; max-width: 31rem; }
  .impl-strip { margin-top: 2.5rem; padding: 0 2rem; }
  .impl-feature-text h3 { font-size: 1.5rem; line-height: 1.95rem; letter-spacing: 0.03rem; }
  .impl-feature-text p { margin-top: 1.5rem; font-size: 1rem; line-height: 1.4rem; letter-spacing: 0.04rem; }
  .impl-feature > img { top: 12.875rem; height: 22.75rem; }

  /* Press: headline 24/31.2, gap 16, date col fills */
  .press { padding: 0 3rem; }
  .press-head .h-72 { font-size: 2.875rem; line-height: 3.625rem; }
  .press-list { margin-top: 3rem; gap: 2rem; }  /* 48 (2026-08-12) */
  .press-item { gap: 1rem; }
  .press-date { width: 9.75rem; }
  .press-headline { margin-top: 2rem; font-size: 1.5rem; line-height: 1.95rem; letter-spacing: 0.03rem; }

  /* Footer: CTA card 704x710 r56, h2 34/40.8 at (40,40); beige r24 pad 40/32/24 */
  .footer-cta { padding: 0 4.17%; }
  .footer-cta-card { border-radius: 3.5rem; aspect-ratio: 704 / 710; }
  .footer-cta-card .h-72 { left: 2.5rem; top: 2.5rem; font-size: 2.125rem; line-height: 2.55rem; max-width: 15.875rem !important; }
  .footer-cta-card .btn-solid { left: 2.5rem; top: 9.125rem; }
  /* CTA->footer gap 32; internal rhythm 56/32/32/32 (agency file 2026-08-12) */
  .footer-main { margin-top: 2rem; border-radius: 1.5rem 1.5rem 0 0; padding: 3.5rem 2rem 2rem; }
  /* Links 34/41 tight rows (24px in the old frame); legal + wordmark gaps 32 */
  .footer-links { gap: 0; }
  .footer-links a { font-size: 2.125rem; line-height: 2.5625rem; letter-spacing: 0; }
  .footer-legal-block { margin-top: 2rem; }
  .footer-wordmark { margin-top: 2rem; }

  /* Sticky article CTA keeps desktop offsets on tablet */
}

@media (max-width: 767px) {
  main > section { margin-top: 7.5rem; }
  .footer { margin-top: 7.5rem; }

  /* Hero: title 46/52.9 254w; wordmark 358x59 at (16,704) of 390x788.
     Height = the browser window (Vanderbrand email 2026-08-07, supersedes the
     frame's 788); floor keeps title + wordmark apart on tiny screens.
     Wordmark bottom fixed (25/788) now that the height is dynamic. */
  .hero { height: 100vh; height: 100svh; min-height: 24rem; }
  /* Aug-18 Figma: largest headlines 54px Light / 115% on mobile; text col 342 */
  .hero-text { left: 6.15%; top: 2rem; width: 21.375rem; }
  .hero-title { font-size: 3.375rem; line-height: 3.8813rem; }
  .hero-logo-slot { left: 4.1%; bottom: 1.5625rem; width: 91.8%; } /* 358/390 */

  /* Overview: centered block 342w 20/26.8 */
  .overview { padding: 0 1.5rem; }
  .overview p { max-width: 21.375rem; }

  /* Info map card: 366x581 r40, no dots, title 34/40.8 wraps */
  .info { padding: 0 0.75rem; }
  .info-card { border-radius: 2.5rem; aspect-ratio: 366 / 581; }
  .info-title { white-space: normal; width: 18.5rem; text-align: center; top: 42.9%; }

  /* Impact: pad 24, h2 34/40.8 */
  .impact { padding: 0 1.5rem; }
  .impact .h-72 { font-size: 2.125rem; line-height: 2.55rem; max-width: 21.375rem !important; }
  .impact-desc { max-width: 21.375rem; }

  /* Industry: pad top 120 bottom 80; h2 46/52.9; no full-bleed video card —
     accordion stands alone (with embedded video thumb) */
  .industry { padding: 7.5rem 0 5rem; }
  .industry-head { padding: 0 1.5rem; }
  .industry-title { margin-top: 2rem; font-size: 3.375rem; line-height: 3.8813rem; max-width: 21.375rem; }  /* Aug-18: 54px Light / 115% */
  .industry-desc { margin-top: 2rem; max-width: 21.375rem; }
  .industry-desc-desktop { display: none; }
  .industry-desc-mobile { display: block; }
  .industry-media { margin-top: 3.5rem; padding: 0 0.5312rem; }
  .video-card { aspect-ratio: auto; background: none; border-radius: 0; overflow: visible; }
  /* Agency (Trello 2026-07-27): rows right-aligned, squares 20 from the section
     edge, pill text at 12 mono so each label fits on one line. Their reference
     frame ("Frame 1160445579") is not in the shared Figma file — built from the
     screenshot, worth confirming with them. */
  .accordion { position: static; width: 23.3125rem; margin: 0 auto; align-items: flex-end; }
  .acc-pill-row { margin-right: 0.7188rem; }
  .acc-pill {
    font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.0375rem;
    white-space: nowrap;
  }
  .acc-video { display: block; }
  .acc-video img,
  .acc-video video { width: 17.625rem; height: 11.1875rem; object-fit: cover; border-radius: 0.5rem; }
  /* Software Package letterboxes on mobile too (VB 28AUG26 #2) */
  .acc-video--contain video { object-fit: contain; background: #FDFDFD; }
  /* Mobile has no video card behind the accordion — in-card embeds instead */
  .video-card .bg-video { display: none; }
  /* Below 768 the mobile video cuts take over */
  .vid-desktop { display: none; }
  .vid-mobile { display: block; }
  /* Open card is a single column on mobile (Figma 2207:4838): the square
     close button sits in the title row at top-right; video + copy run full
     width below. Title is 12px mono in this frame. */
  .acc-card { position: relative; }
  .acc-card .acc-square { position: absolute; top: 0.75rem; right: 0.75rem; }
  .acc-card .acc-body { padding-top: 0; }
  .acc-body h3 { min-height: 3rem; display: flex; align-items: center; padding-right: 3.5rem;
                 font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.0375rem; }
  .acc-body p { max-width: 19.875rem; }

  /* Insights table mobile: 366w, toggle pills 120/112x52, label col 127 */
  .insights-head { padding: 0 1.5rem; }
  .insights-head .h-72 { font-size: 2.125rem; line-height: 2.55rem; max-width: 21.375rem !important; }
  .insights-desc { max-width: 21.375rem; }
  .table { margin: 2.5rem 0.75rem 0; }
  .t-row { grid-template-columns: 7.9375rem 1fr; }
  .t-label { padding-right: 0.75rem; }

  /* Implementation: strip cards 332x480 r20, gap/pad 12 */
  .impl-head { padding: 0 1.5rem; }
  .impl-head .h-72 { font-size: 2.125rem; line-height: 2.55rem; max-width: 21.375rem !important; }
  .impl-desc { max-width: 21.375rem; }
  .impl-strip { margin-top: 2.5rem; padding: 0 0.75rem; gap: 0.75rem; }
  .impl-card { border-radius: 1.25rem; }
  .impl-gh { width: 20.75rem; height: 30rem; }
  .impl-gh-img { left: -2.9375rem; top: -3.875rem; width: 26.5625rem; height: 28.5625rem; }
  .impl-gh-wordmark { left: 2.4375rem; top: 14rem; width: 15.8438rem; height: 1.95rem; }
  .impl-gh-caption { bottom: 1.5rem; padding: 0 2.1875rem; }
  .impl-pair { width: 20.75rem; height: 30rem; gap: 0.75rem; }
  .impl-pair img { height: 14.625rem; border-radius: 1.25rem; }
  .impl-stats { width: 20.75rem; height: 29.875rem; }
  .impl-stats-desc { left: 2rem; top: 2rem; width: 16.75rem; }
  .stats-list { left: 2rem; top: 7.625rem; width: 16.75rem; gap: 1rem; }
  .stat-num { font-size: 2.875rem; line-height: 3.625rem; font-weight: 400; }
  .impl-tall { width: 20.75rem; height: 30rem; border-radius: 1.25rem; }
  .impl-feature { width: 20.75rem; height: 29.875rem; }
  .impl-feature-text { left: 2rem; top: 2rem; width: 16.75rem; }
  .impl-feature-text h3 { max-width: 15.75rem; }
  .impl-feature > img { left: 0.75rem; top: 14.6875rem; width: 19.25rem; height: 14.4375rem; border-radius: 0.625rem; }
  /* Graph card, mobile composition (Figma 2486:2695, 332x478): heading inside
     at 24px, its own chart exports, legend as two stacked rows */
  .impl-graph { width: 20.75rem; height: 29.875rem; }
  .impl-graph h3 { left: 2rem; top: 2rem; max-width: 15.75rem; font-size: 1.5rem; line-height: 1.8rem; }
  /* Aug-18 graph: label coordinates from the 332x478 mobile frame, 8px mono */
  .igl { font-size: 0.5rem; line-height: 0.65rem; letter-spacing: 0.025rem; }
  .igl-y { left: 4.82%; top: 29.88%; height: 45.19%; }
  .igl-x { left: 35.24%; top: 78.21%; width: 36.75%; }
  .igl-gh { left: 21.39%; top: 68.1%; }
  .igl-p2 { left: 25.3%; top: 62.24%; }
  .igl-p3 { left: 34.34%; top: 53.25%; }
  .igl-leg { left: 14.16%; top: 85.81%; gap: 0.5rem; }
  .igl-swatch { width: 1rem; height: 0.375rem; }

  /* Press: items stack; source left + date right on one row */
  .press { padding: 0 1.5rem; }
  .press-head .h-72 { font-size: 2.125rem; line-height: 2.55rem; }
  .press-list { margin-top: 2.5rem; gap: 4rem; }
  .press-item { flex-direction: column; gap: 1.5rem; position: relative; padding: 2rem 0.25rem 0; }
  .press-date { position: absolute; top: 2rem; right: 0.25rem; width: auto; text-align: right; }
  /* Source takes the date's type so the two sit on one 16px baseline
     (agency, Trello 2026-07-27) */
  .press-source {
    font-weight: 450;
    font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.0375rem;
  }
  .press-headline { margin-top: 1.5rem; }

  /* Footer: CTA card 366x581 r40, text bottom-anchored; footer stacks */
  .footer { margin-top: 7.5rem; }
  .footer-cta { padding: 0 0.75rem; }
  .footer-cta-card { border-radius: 2.5rem; aspect-ratio: 366 / 581; }
  /* Width matches "Delivering Housing at Scale" in the map card (18.5rem),
     Trello 2026-08-18 general card */
  .footer-cta-card .h-72 { left: 1.5rem; top: auto; bottom: 6.625rem; font-size: 2.125rem; line-height: 2.55rem; z-index: 1; max-width: 18.5rem !important; }
  .footer-cta-card .btn-solid { left: 1.5rem; top: auto; bottom: 1.5rem; z-index: 1; }
  /* Subtle black gradient under the bottom-anchored text so it stays legible
     over the bright factory footage (agency, Trello 2026-07-27) */
  .footer-cta-card::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 55%;
    background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
    z-index: 0;
    pointer-events: none;
  }
  /* Bottom 32 under the wordmark (Aug-18 Figma Footer/Mobile pad 56/24/32);
     safe-area keeps the beige running under the iPhone home-indicator strip
     (Trello: "too much space below the logo + remove the white band") */
  .footer-main { margin-top: 1.5rem; padding: 3.5rem 1.5rem calc(2rem + env(safe-area-inset-bottom)); }
  /* Agency redline: 56 above the legal links, 56 above the copyright line,
     24 above the wordmark (Trello 2026-07-27) */
  .footer-legal-block { margin-top: 3.5rem; }
  .footer-legal { flex-direction: column; align-items: flex-start; gap: 0; }
  .footer-legal-left { flex-direction: column; gap: 1rem; }
  .legal-copy { margin-top: 3.5rem; }
  .footer-wordmark { margin-top: 1.5rem; }

  /* Sticky article CTA — mobile chip 332x83, text 12/16, thumb 82x67 (UI Bible 32/32).
     Agency redline (Trello 2026-07-27): 16 left/right, 20 text->thumb,
     16 thumb->arrow, everything vertically centred. */
  .sticky-cta { left: 2rem; bottom: 2rem; width: 20.75rem; min-height: 5.1875rem; border-radius: 1rem; padding: 0.75rem 1rem; gap: 1rem; }
  .sticky-cta-text { width: 10.375rem; margin-right: 0.25rem; font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.0375rem; }
  .sticky-cta-thumb { width: 5.125rem; height: 4.1875rem; }
  .sticky-cta-thumb img { width: 2.875rem; height: 4.4375rem; }
}