/* Homepage styles. Every value is taken from the Figma file at its 90rem
   desktop frame (tablet 768 / mobile 390 rules follow the matching frames).
   Between the specified widths the layout scales proportionally. */

/* ---------- Shared */
main > section, .footer { margin-top: 12.5rem; }   /* Main Content gap = 200 */

/* Above 1440 the page stops growing (html font-size caps at 16px in base.css)
   and content centres in the window. Full-bleed by design — matching the
   agency's "Homepage - Desktop (Ultra-wide)" frame: the hero, the beige
   Industry band and the footer block still span the full width, while their
   inner content is capped with everything else. The fixed nav pill and article
   chip stay pinned to the viewport edges. (Trello, 2026-07-27.) */
main > section:not(.industry),
.industry-head,
.industry-media,
.footer-cta {
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
}
/* In-page anchors stop clear of the floating nav pill (bottom edge 84px) +
   breathing room, instead of the section heading sliding underneath it.
   scroll-padding on the scroller (html), NOT scroll-margin on the targets:
   Safari ignores scroll-margin for #fragment navigation (JD hit this). */
html { scroll-padding-top: 6.75rem; }

.kicker {
  display: inline-block;
  align-self: flex-start;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  font-family: var(--font-mono);
  font-weight: 450;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.0375rem;
  text-transform: uppercase;
}

.h-72 {
  font-family: var(--font-grotesk);
  font-weight: 300;
  font-size: 4.5rem;
  line-height: 5.25rem;
  letter-spacing: 0;
}

/* Black translucent pill button ("Read article" etc.) */
.btn-blur { display: inline-flex; gap: 0.25rem; align-self: flex-start; }
.btn-blur-pill {
  display: flex; align-items: center;
  height: 3.5rem; padding: 0 3rem;
  background: var(--blur-pill-bg);
  backdrop-filter: blur(var(--blur-pill-blur));
  -webkit-backdrop-filter: blur(var(--blur-pill-blur));
  border-radius: 3.875rem;
  font-family: var(--font-mono); font-weight: 400;
  font-size: 1rem; line-height: 1.3rem;
  color: var(--yellow);
  transition: background 0.25s ease;
}
.btn-blur-icon {
  display: flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem;
  background: var(--blur-pill-bg);
  backdrop-filter: blur(var(--blur-pill-blur));
  -webkit-backdrop-filter: blur(var(--blur-pill-blur));
  border-radius: 0.25rem;
  transition: background 0.25s ease;
}
/* UI Bible: on hover the black goes 40% -> 60% */
.btn-blur:hover .btn-blur-pill, .btn-blur:hover .btn-blur-icon { background: var(--blur-pill-bg-hover); }

/* ---------- Sticky nav (Figma: Navigation 780:2141, UI Bible "Sticky Buttons")
   Visible from page load, not only after scrolling past the hero logo
   (agency, Trello 2026-07-27 — supersedes the earlier hide-until-scrolled rule). */
.nav {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 40;
}

.nav-pill {
  display: flex;
  align-items: center;
  height: 3.75rem;
  /* Spacing per the Aug-18 Figma Nav spec (2558:9371): pad-left 32, pad-right 12,
     32 between the links and the CTA, 24 between links (Trello: Nav new naming + spacing) */
  padding: 0 0.75rem 0 2rem;
  gap: 2rem;
  background: var(--blur-pill-bg);
  backdrop-filter: blur(var(--blur-pill-blur));
  -webkit-backdrop-filter: blur(var(--blur-pill-blur));
  border-radius: 0.5rem;
  transition: background 0.25s ease;
}
.nav-pill:hover { background: var(--blur-pill-bg-hover); }

.nav-links { display: flex; gap: 1.5rem; }
.nav-links a {
  font-family: var(--font-mono);
  font-weight: 450;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.0375rem;
  /* "Tighten the space between How / it / Works" (Vanderbrand email
     2026-08-07). Their file draws it with full mono spaces (96 wide, same as
     we rendered), so no target exists — a quarter-space reduction, on the
     preview for their sign-off. Single-word labels are unaffected. */
  word-spacing: -0.25em;
  color: var(--offwhite);
  transition: opacity 0.25s ease;
}
.nav-links a:hover { opacity: 0.6; } /* UI Bible: text opacity drops to 60% */

.nav-cta { display: flex; gap: 0.25rem; align-items: center; }
.nav-cta-link {
  display: flex; align-items: center; justify-content: center;
  height: 2.25rem; padding: 0 1.25rem;
  border: 0.5px solid var(--offwhite);
  border-radius: 3.875rem;
  font-family: var(--font-mono);
  font-weight: 450;
  font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.0375rem;
  color: var(--offwhite);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.nav-cta-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border: 0.5px solid var(--offwhite);
  border-radius: 0.1606rem;
  color: var(--offwhite);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
/* Arrow drawn as a mask so it takes the link colour (purple on hover) */
.nav-cta-arrow-icon {
  width: 0.5rem; height: 0.5rem;
  background: currentColor;
  -webkit-mask: url('../assets/images/arrow-icon-11.svg') center / contain no-repeat;
  mask: url('../assets/images/arrow-icon-11.svg') center / contain no-repeat;
}
/* Hover: background fills blue, text/arrow turn purple — pill and square
   change together, hovering either one (agency, Trello 2026-07-27) */
.nav-cta:hover .nav-cta-link,
.nav-cta:hover .nav-cta-arrow {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--purple);
}

/* ---------- Sticky article CTA (Figma: Button 780:2159, UI Bible "Article CTA") */
.sticky-cta {
  position: fixed;
  left: 1.5rem;
  bottom: 1.5rem;
  z-index: 40;
  width: 22.875rem;
  min-height: 5.9375rem;
  /* Redlined by the agency (Trello 2026-07-27): 16 left, 20 right, 20 between
     text / thumbnail / arrow, all three vertically centred. */
  padding: 1rem 1.25rem 1rem 1rem;
  background: var(--blur-pill-bg);
  backdrop-filter: blur(var(--blur-pill-blur));
  -webkit-backdrop-filter: blur(var(--blur-pill-blur));
  border-radius: 1rem;
  display: flex;
  gap: 1.25rem;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, background 0.25s ease;
}
.sticky-cta.is-visible { opacity: 1; pointer-events: auto; }
.sticky-cta:hover { background: var(--blur-pill-bg-hover); }
.sticky-cta-text {
  /* Takes the leftover space so the redlined gaps land exactly: the agency's
     numbers sum to 365 in a 366 card, and any slack must not sit after the
     arrow (it made the right gap 21 instead of 20). */
  flex: 1;
  width: 12.25rem;
  font-family: var(--font-mono); font-weight: 400;
  font-size: 1rem; line-height: 1.3rem;
  color: var(--nearwhite);
}
.sticky-cta-thumb {
  width: 5.125rem; height: 4.9375rem;
  border-radius: 0.5rem;
  background: #FFFFFF;  /* VB 27AUG26 #5: pure white, not off-white */
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.sticky-cta-thumb img { width: 3.4375rem; height: 5.3125rem; object-fit: cover; }
/* Trello Aug-27: video "fits" the white box instead of being cropped */
.sticky-cta-thumb video { width: 100%; height: 100%; object-fit: contain; }
.sticky-cta-arrow { flex-shrink: 0; }

/* ---------- Hero (Figma: Hero Section 779:1600, 1440x900) */
.hero {
  position: relative;
  /* Hero fills the browser window at every size — "Match 100% of the browser
     size no matter what the browser size is" (Vanderbrand email 2026-08-07;
     supersedes the frames' fixed 900). svh ignores mobile browser bars;
     the min-height floor keeps the headline clear of the wordmark in very
     short windows (text ~304 + wordmark ~16.5vw + margins). */
  height: 100vh;
  height: 100svh;
  min-height: calc(21rem + 18vw);
  overflow: hidden;
  color: var(--offwhite);
}
.hero-bg {
  /* Hero video arrived (agency assets 2026-08-24). The still stays as the
     poster/fallback; the gradient png is its own layer between the video and
     the blur shades, preserving the original stacking order. */
  position: absolute; inset: 0;
  background: url('../assets/images/hero-bg.jpg') center / cover no-repeat;
}
/* hero-gradient.png removed 2026-08-26: it is a fully OPAQUE composite render
   of the old still hero (photo+gradient baked together, not a transparent
   overlay) — layered above the video it hid it on every device. The blur
   shades provide the design's darkening. */
/* Background videos fill their card; every host has the still as fallback */
.bg-video {
  /* 1px over each edge: fractional-width rounding left a 1px background line
     at the video's left/right (Trello Aug-27) */
  position: absolute; inset: -1px;
  width: calc(100% + 2px); height: calc(100% + 2px);
  object-fit: cover;
}
/* Approach: three layered videos, the open item's fades in (no reload flash);
   fast fade per JD 2026-08-26. Inactive layers go fully invisible after the
   fade, and these layers skip the 1px edge oversize — dark under-layers were
   bleeding out as a dark line at the card's right edge (VB 28AUG26 #1). */
.video-card .bg-video { inset: 0; width: 100%; height: 100%; }
/* Map card too (VB 31AUG26): its backdrop is the identical satellite still,
   so the oversize hides nothing — and skipping it removes the oversized edge
   column where a black line could composite (same artifact as the video card). */
.info-card .bg-video { inset: 0; width: 100%; height: 100%; }
.approach-bg { opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0s 0.15s; }
.approach-bg.is-active { opacity: 1; visibility: visible; transition: opacity 0.15s ease; }
/* VB 27AUG26 #8: the Software Package animation is squarer than the card —
   letterbox it on the video's own near-white instead of cropping */
.approach-bg--contain { object-fit: contain; background: #FDFDFD; }
/* Desktop/mobile cuts are separate elements; CSS picks one per breakpoint */
.vid-mobile { display: none; }
/* Two soft black glows from the design (Ellipse 11 / Ellipse 12, 32% + blur 220).
   Rendered as radial gradients — same softness, far cheaper than filter:blur. */
.hero-shade {
  position: absolute;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.30) 55%, rgba(0,0,0,0) 100%);
}
.hero-shade-1 { left: -85%; top: -90%; width: 160%; height: 165%; }
.hero-shade-2 { left: -62%; top: 25%; width: 217%; height: 165%; }

.hero-text {
  position: absolute;
  left: 3.33%;                 /* 48/1440 */
  top: 3rem;
  width: 35.6%;                /* 512.5/1440 */
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.hero-title {
  font-family: var(--font-grotesk);
  /* VB 27AUG26 #1: live Figma frame 780:2180 says 72/84 LIGHT — their Aug-18
     100px card is superseded for the hero (industry/article titles keep 100). */
  font-weight: 300;
  font-size: 4.5rem;
  line-height: 5.25rem;
  letter-spacing: 0;
}

/* Solid CTA button (yellow pill + square icon) — hover inverts (UI Bible) */
.btn-solid { display: inline-flex; gap: 0.25rem; align-self: flex-start; }
.btn-solid-pill {
  display: flex; align-items: center;
  height: 3.5rem; padding: 0 3rem;
  background: var(--yellow);
  border-radius: 3.875rem;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 1rem; line-height: 1.3rem;
  color: var(--red);
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-solid-icon {
  display: flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem;
  background: var(--yellow);
  border-radius: 0.25rem;
  color: var(--red);
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-solid:hover .btn-solid-pill, .btn-solid:hover .btn-solid-icon { background: var(--red); color: var(--yellow); }

/* Icons & fixed-size artwork: HTML width/height attributes are px, so they
   would not follow the proportional zoom — size them in rem here instead
   (values = the Figma px ÷ 16, same as everything else). */
.btn-solid-icon svg, .btn-blur-icon svg { width: 0.875rem; height: 0.875rem; }   /* 14 */
.nav-cta-arrow img, .legal-link img { width: 0.5rem; height: 0.5rem; }           /* 8 */
.sticky-cta-arrow { width: 0.6875rem; height: 0.6875rem; }                       /* 11 */
.acc-pill-row .acc-square svg { width: 1.125rem; height: 1.125rem; }             /* 18 */
.acc-card .acc-square svg { width: 0.875rem; height: 0.875rem; }                 /* 14 */
.acc-partner-logo { width: 7.3125rem; height: 2.4375rem; }                       /* 117x39 */
/* The exported SVG is the whole 481x91 header cell (Figma 779:1647) with the
   wordmark placed inside it at 180x30. Draw it at artboard size — forcing the
   img to 180x30 shrank the wordmark itself to ~67px (agency, Trello 2026-07-27). */
.t-head .t-ih { padding: 0; }
.t-head .t-ih img { width: 100%; height: 100%; }
.impl-gh-wordmark { width: 24.3125rem; height: 3rem; }                           /* 389x48 */
.menu-btn img { width: 100%; height: 100%; }

/* Wordmark: in-flow slot marks the start position; the fixed element is driven
   by JS between the slot rect and the small top-left state (UI Bible "Logo Scaling") */
.hero-logo-slot {
  position: absolute;
  left: 3.33%;
  bottom: 3rem;                /* 48 at 1440 — fixed units, not % of the
                                  now-dynamic hero height */
  width: 93.33%;               /* 1344/1440 */
  aspect-ratio: 1344 / 222;
  pointer-events: none;
}
.hero-logo {
  position: fixed;
  top: 0; left: 0;
  z-index: 50;
  transform-origin: top left;
  will-change: transform;   /* JS scales via transform only — no re-layout per frame */
}
.hero-logo img { width: 100%; height: auto; transition: filter 0.3s ease; }
/* Off-white over the hero imagery; black (Figma small-logo fill #000000)
   once it no longer sits on the hero — JS toggles the class */
.hero-logo.is-dark img { filter: brightness(0); }

/* ---------- Overview (Figma 779:1608) */
.overview { padding-left: 45.75rem; padding-right: 6rem; }  /* 732 / 96 at 1440 */
.overview p {
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.95rem;
  letter-spacing: 0.03rem;
}

/* ---------- Info / map (Figma 779:1610) */
.info { padding: 0 3rem; }              /* 48 at 1440 */
.info-card {
  position: relative;
  border-radius: 5rem;
  aspect-ratio: 1344 / 835;
  /* Satellite image replaces the map render (agency file update 2026-08-12;
     changed on their mobile + ultra-wide frames — desktop/tablet frames still
     draw the old image, FLAGGED as inconsistent, newest edit followed) */
  background: url('../assets/images/map-satellite.jpg') center / cover no-repeat;
  overflow: hidden;
}
.info-title {
  position: absolute;
  left: 50%; top: 46.8%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-weight: 400;
  font-size: 2.875rem;
  line-height: 3.3062rem;
  color: var(--offwhite);
}
/* soft shadow behind the title (Ellipse 6: black 20%, blur 54) */
.info-title::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 102%;
  background: rgba(0,0,0,0.2);
  filter: blur(3.375rem);
  border-radius: 50%;
  z-index: -1;
}
/* (info dots removed — VB 27AUG26 #3: dots are baked into the map video) */

/* ---------- Impact (Figma 779:1619) */
.impact { padding: 0 6rem; }            /* 96 at 1440 */
.impact-block { display: flex; flex-direction: column; gap: 2rem; align-items: flex-start; }
.impact-desc {
  margin-top: 3rem;
  max-width: 42.0625rem;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.95rem;
  letter-spacing: 0.03rem;
}
/* 10px between paragraphs — was mobile-only (Trello 2026-07-27); extended to
   every breakpoint per Vanderbrand's "desktop should match" (email 2026-08-07) */
.impact-desc p + p { margin-top: 0.625rem; }

/* ---------- Industry Overview (Figma 779:1624) */
.industry {
  background: var(--beige);
  padding: 6.25rem 0 3.5rem;
}
.industry-head {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.industry-head .kicker { align-self: center; }
.industry-title {
  margin-top: 3.5rem;
  max-width: 71.875rem;
  font-weight: 300;
  /* Aug-18 Figma: largest headlines 100px Light, line 110% */
  font-size: 6.25rem;
  line-height: 6.875rem;
}
/* VB 27AUG26 #2: TM at 1/3 of the title size, Light, raised */
.industry-title .tm { font-size: 0.3333em; line-height: 0; vertical-align: 1.55em; letter-spacing: 0; }
.industry-desc {
  margin-top: 3.5rem;
  max-width: 29rem;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4rem;
  letter-spacing: 0.04rem;
}
.industry-media { margin-top: 6.25rem; padding: 0 3rem; }
.video-card {
  position: relative;
  border-radius: 2rem;
  aspect-ratio: 1344 / 835;
  background: url('../assets/images/hero-bg.jpg') center / cover no-repeat;
  overflow: hidden;
}

/* Accordion (UI Bible "Dropdown Button CTA": one open at a time) */
.accordion {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 27.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-end;
}
.acc-card {
  display: none;
  width: 27.3125rem;
  padding: 1rem 1rem 1.5rem 1.5rem;
  gap: 1rem;
  background: var(--blur-pill-bg);
  backdrop-filter: blur(var(--blur-pill-blur));
  -webkit-backdrop-filter: blur(var(--blur-pill-blur));
  border-radius: 1rem;
  color: var(--offwhite);
  cursor: pointer;               /* the whole open panel closes it */
  transition: background 0.25s ease;
}
/* Hover on the open panel: black 40% -> 60%, same as the other black buttons
   (agency, Trello 2026-07-27) */
.acc-card:hover { background: var(--blur-pill-bg-hover); }
.acc-item.is-open .acc-card { display: flex; }
.acc-item.is-open .acc-pill-row { display: none; }
.acc-body { flex: 1; padding-top: 1.0938rem; display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }
.acc-body h3 { font-family: var(--font-mono); font-weight: 400; font-size: 1rem; line-height: 1.3rem; }
.acc-body p { font-weight: 400; font-size: 1rem; line-height: 1.4rem; letter-spacing: 0.04rem; }
.acc-body p:empty { display: none; }
.acc-body hr { width: 100%; border: none; border-top: 1px solid #FFFFFF; }
.acc-partner-label, .acc-license {
  font-family: var(--font-mono); font-weight: 450;
  font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.0375rem;
}
.acc-square {
  display: flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem;
  border-radius: 0.25rem;
  flex-shrink: 0;
}
/* Closed rows sit 32 from the card edge so their + square right-aligns with the
   open card's - square (16 card inset + 16 card padding) — agency, Trello 2026-07-27 */
.acc-pill-row { display: inline-flex; gap: 0.25rem; align-items: center; margin-right: 1rem; }
.acc-pill {
  display: flex; align-items: center;
  height: 3.5rem; padding: 0 3rem;
  background: var(--blur-pill-bg);
  backdrop-filter: blur(var(--blur-pill-blur));
  -webkit-backdrop-filter: blur(var(--blur-pill-blur));
  border-radius: 3.875rem;
  font-family: var(--font-mono); font-weight: 400;
  font-size: 1rem; line-height: 1.3rem;
  color: var(--offwhite);
  transition: background 0.25s ease;
}
.acc-pill-row:hover .acc-pill { background: var(--blur-pill-bg-hover); }

/* ---------- Insights (Figma 779:1630) */
.insights-head { padding: 0 6rem; }
.insights-desc {
  margin-top: 3rem;
  max-width: 38.0625rem;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4rem;
  letter-spacing: 0.04rem;
}
.table {
  margin: 5rem 3.5rem 0 6rem;   /* right 56, left 96 at 1440 */
  font-weight: 400;
}
.t-row {
  display: grid;
  grid-template-columns: 23.45% 37.34% 1.5rem 1fr;  /* 302 / 481 / 24 / 481 of 1288 */
  border-top: 1px solid rgba(0,0,0,0.1);
}
.t-row.t-cap-top, .t-row.t-head, .t-row.t-cap-bottom { border-top: none; }
.t-row:last-child { border-bottom: none; }
.t-cap-top { height: 2.125rem; }
.t-cap-top .t-trad, .t-cap-top .t-ih { border-radius: 1.5rem 1.5rem 0 0; }
.t-cap-bottom { height: 2.8125rem; }
.t-cap-bottom .t-trad, .t-cap-bottom .t-ih { border-radius: 0 0 1.5rem 1.5rem; }
.t-head { height: 5.6875rem; }
.t-head .t-trad { justify-content: center; }
.t-head-text { font-size: 1.5rem; line-height: 1.95rem; letter-spacing: 0.03rem; }
.t-head .t-ih { justify-content: center; }
.t-trad { background: var(--beige); }
/* Aug-18 Figma (Trello: reorder Interhouse + light blue): Interhouse column
   now first, fill #C2ECFF */
.t-ih { background: var(--blue); }
.t-div { background: var(--offwhite); }
.t-label, .t-trad, .t-ih {
  display: flex;
  align-items: center;
  min-height: 3.625rem;
  padding: 1.125rem 3rem 1.125rem 0;
}
.t-trad, .t-ih {
  padding-left: 3rem;
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1.3rem;
}
.t-label { font-size: 1rem; line-height: 1.4rem; letter-spacing: 0.04rem; }
/* Icon now nested inside the label span so it rides the LAST word when the
   label wraps (Trello 2026-08-18 mobile-'i' card); no whitespace before it in
   the HTML, so the pair can't break apart — margin-left draws the 8px gap. */
.t-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  vertical-align: middle;
  width: 1rem; height: 1rem;
  border: 1px solid rgba(0,0,0,0.4);
  border-radius: 50%;
  color: rgba(0,0,0,0.4);
  font-family: var(--font-mono);
  font-size: 0.625rem; line-height: 1;
  letter-spacing: 0;  /* inherited 0.04rem pushed the glyph off-centre in the circle */
  text-indent: 0;
  flex-shrink: 0;
  cursor: default;
}
/* Tooltip: mechanism per UI Bible ("small description appears next to the icon");
   texts from the agency's edit doc, added 2026-07-21. */
.t-info[data-tip]:not([data-tip=""])::after {
  content: attr(data-tip);
  position: absolute;
  left: 1.5rem; top: 50%;
  transform: translateY(-50%);
  /* Measured off the agency's screenshot (Trello 2026-07-27): icon + tooltip
     selection is 264x41, so the pill is 240x41 with 16 side padding and 16px
     mono text (their string measures 207.4 wide = 16px, not the 12px matched
     from the prototype on 2026-07-21). 40% black + blur, like every other
     black button — both supersede the earlier grey/12px treatment. */
  padding: 0.625rem 1rem;
  background: var(--blur-pill-bg);
  backdrop-filter: blur(var(--blur-pill-blur));
  -webkit-backdrop-filter: blur(var(--blur-pill-blur));
  color: var(--offwhite);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 1rem; line-height: 1.3rem;
  letter-spacing: 0;
  border-radius: 0.375rem;
  width: max-content;
  max-width: 20rem;      /* long texts wrap instead of running off-screen */
  white-space: normal;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.t-info[data-tip]:not([data-tip=""]):hover::after { opacity: 1; }

/* ---------- Implementation (Figma 779:1744) */
.impl-head { padding: 0 6rem; }
.impl-desc {
  margin-top: 3rem;
  max-width: 38.25rem;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4rem;
  letter-spacing: 0.04rem;
}
.impl-strip {
  margin-top: 5rem;
  display: flex;
  gap: 1.5rem;
  padding: 0 3rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.impl-strip::-webkit-scrollbar { display: none; }
.impl-card { flex-shrink: 0; border-radius: 2rem; overflow: hidden; }
.impl-gh {
  position: relative;
  width: 36.625rem; height: 36.625rem;
  background: url('../assets/images/greenhouse-under.jpg') center / cover no-repeat;
}
.impl-gh-img {
  position: absolute;
  left: -5.1625rem; top: -6.8875rem;
  width: 46.9188rem; height: 50.4188rem;
  max-width: none;
  object-fit: cover;
}
.impl-gh-wordmark { position: absolute; left: 6.1875rem; top: 16.8125rem; }
.impl-gh-caption {
  position: absolute;
  left: 0; right: 0; bottom: 3rem;
  text-align: center;
  font-family: var(--font-mono); font-weight: 450;
  font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.0375rem;
  color: var(--offwhite);
}
.impl-pair {
  flex-shrink: 0;
  width: 24.9062rem; height: 36.625rem;
  display: flex; flex-direction: column;
  gap: 1.5125rem;
}
.impl-pair img { height: 17.5562rem; width: 100%; object-fit: cover; border-radius: 1.5rem; }
.impl-stats {
  position: relative;
  width: 36.625rem; height: 36.625rem;
  background: var(--beige);
}
.impl-stats-desc {
  position: absolute; left: 3.0312rem; top: 3rem;
  width: 13rem;
  font-weight: 400; font-size: 1rem; line-height: 1.4rem; letter-spacing: 0.04rem;
}
.stats-list {
  position: absolute; left: 18.3438rem; top: 3rem;
  width: 15.3125rem;
  display: flex; flex-direction: column; gap: 2.5rem;
}
.stats-list li {
  border-top: 1px solid var(--ink);
  padding-top: 0.75rem;
  display: flex; flex-direction: column;
}
.stat-num { font-weight: 300; font-size: 4.5rem; line-height: 5.25rem; }
.stat-label {
  font-family: var(--font-mono); font-weight: 450;
  font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.0375rem;
}
/* (stats footnote removed — JD deleted the footnotes 2026-08-19) */
.impl-tall { flex-shrink: 0; width: 24.875rem; height: 36.625rem; border-radius: 1.5rem; overflow: hidden; }
.impl-tall img { width: 100%; height: 100%; object-fit: cover; }
.impl-feature {
  position: relative;
  width: 36.625rem; height: 36.625rem;
  background: var(--yellow);
}
.impl-feature-text { position: absolute; left: 3rem; top: 3rem; width: 29rem; }
.impl-feature-text h3 { max-width: 20.4375rem; font-weight: 400; font-size: 2.125rem; line-height: 2.55rem; }
.impl-feature-text p { margin-top: 1.5rem; font-weight: 400; font-size: 1.25rem; line-height: 1.675rem; letter-spacing: 0.05rem; }
.impl-feature > img {
  position: absolute;
  left: 1rem; top: 17.0625rem;
  width: 34.625rem; height: 18.5625rem;
  object-fit: cover;
  border-radius: 1rem;
}
/* Performance graph card (Figma 2486:1973, added 2026-08-12). The chart is
   the agency's own vectors (SVG exports, text outlined); positions are the
   frame's, with sub-3px centring where Figma's export bounds differ from the
   layout box. The tablet frame draws the identical 586 card. */
.impl-graph {
  position: relative;
  width: 36.625rem; height: 36.625rem;
  background: var(--beige);
}
.impl-graph h3 {
  position: absolute; left: 3rem; top: 3rem;
  max-width: 20.4375rem;
  font-weight: 400; font-size: 2.125rem; line-height: 2.55rem;
}
/* Aug-18 graph (Trello "update graph"): one SVG composed from the Figma vector
   geometry fills the card 1:1 (design-data/build-graph-svgs.py); labels and
   legend are real HTML text at the frame's % coordinates — licensed fonts,
   selectable, accessible. */
.impl-graph-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.igl {
  position: absolute;
  font-family: var(--font-mono); font-weight: 450;
  font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.0375rem;
  color: var(--ink);
}
.igl-y { left: 8.27%; top: 29.76%; height: 36.86%; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; }
.igl-x { left: 37.45%; top: 75.22%; width: 30.2%; text-align: center; }
.igl-gh { left: 23.04%; top: 67.06%; }
.igl-p2 { left: 26.11%; top: 58.53%; }
.igl-p3 { left: 33.96%; top: 48.12%; }
.igl-leg { left: 8.27%; top: 84.07%; display: flex; flex-direction: column; gap: 1rem; }
.igl-row { display: flex; align-items: center; gap: 0.8125rem; }
.igl-swatch { width: 1.5rem; height: 0.6875rem; border-radius: 0.1348rem; flex-shrink: 0; }

/* ---------- Press (Figma 779:1789) */
.press { padding: 0 6rem; }
.press-head { display: flex; flex-direction: column; gap: 2rem; align-items: flex-start; }
.press-list { margin-top: 5rem; display: flex; flex-direction: column; gap: 4rem; }
.press-item {
  display: flex;
  gap: 13.875rem;
  border-top: 1px solid var(--taupe);
  padding-top: 2.5rem;
}
.press-date {
  width: 6rem; flex-shrink: 0;
  white-space: nowrap;  /* Trello 2026-08-18: dates on one line */
  font-family: var(--font-mono); font-weight: 450;
  font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.0375rem;
}
.press-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.press-source { font-family: var(--font-mono); font-weight: 400; font-size: 1rem; line-height: 1.3rem; }
.press-headline { margin-top: 2rem; font-weight: 400; font-size: 2.125rem; line-height: 2.55rem; max-width: 58.125rem; }
.press-body .btn-blur { margin-top: 2.5rem; }

/* ---------- Footer (Figma 779:1797) */
.footer-cta { padding: 0 3rem; }
.footer-cta-card {
  position: relative;
  border-radius: 5rem;
  aspect-ratio: 1344 / 835;
  background: url('../assets/images/footer-cta-bg.jpg') center / cover no-repeat;
  overflow: hidden;
  color: var(--offwhite);
}
.footer-cta-card::before {   /* Ellipse 11: black 32%, blur 500 */
  content: '';
  position: absolute;
  left: -56%; top: -56%;
  width: 131%; height: 95%;
  background: #000;
  opacity: 0.32;
  filter: blur(13.75rem);
  border-radius: 50%;
}
.footer-cta-card .h-72 { position: absolute; left: 3rem; top: 3rem; }
.footer-cta-card .btn-solid { position: absolute; left: 3rem; top: 15.5rem; }

.footer-main {
  margin-top: 3rem;
  background: var(--beige);
  border-radius: 2.5rem 2.5rem 0 0;
  padding: 4rem 3.33%;
}
.footer-links { display: flex; flex-direction: column; gap: 0.625rem; align-items: flex-start; }
.footer-links a {
  font-weight: 400;
  font-size: 2.125rem;
  line-height: 2.55rem;
  transition: opacity 0.25s ease;
}
.footer-links a:hover { opacity: 0.6; }  /* UI Bible: menu & footer hover */
.footer-legal-block { margin-top: 3.75rem; }
.footer-legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-legal-left { display: flex; gap: 3rem; }
.legal-link {
  display: inline-flex; align-items: center; gap: 0.625rem;
  font-family: var(--font-mono); font-weight: 450;
  font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.0375rem;
  transition: opacity 0.25s ease;
}
.legal-link:hover { opacity: 0.6; }
.legal-copy {
  font-family: var(--font-mono); font-weight: 450;
  font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.0375rem;
}
.footer-wordmark { margin-top: 4rem; width: 100%; }

/* ---------- Ultra-wide (Figma: "Homepage - Desktop (Ultra-wide)" 4110:997,
   2560x11095, added by the agency 2026-08-04). The frame confirms the
   cap-and-centre model already in place, and specifies the full-bleed parts:

   - Centered sections are the 1440 design verbatim (columns sit at exactly
     (100vw - 1440) / 2) — already handled by the --page-max rule above.
   - Hero: video/gradient full-bleed; the two glow ellipses keep their 1440
     size and stay locked to the viewport CENTRE (ellipse x moves by exactly
     +560 = half the extra width). Text block, wordmark, nav pill and article
     chip move from their 1440 offsets to hand-placed 2560 values:
       nav pill      top 24 -> 40, right 24 -> 80
       hero text     left 48 -> 80, top 48 -> 40, box width fixed at 512.5
       hero wordmark side margins 48 -> 80, bottom 48 -> 80 (aspect kept)
       article chip  left 24 -> 80, vertical padding 16 -> 28.5 (h 95 -> 120)
     Between 1440 and 2560 the file gives nothing, so these interpolate
     linearly (clamp() hits both endpoints exactly and holds beyond 2560).
     ASSUMED, flagged to Vanderbrand: the chip's bottom offset (their frame
     parks the chip below the fold line, so it carries no viewport offset) —
     mirrored from the nav pill's 24 -> 40 top.
   - Footer bottom block: the frame is the 1440 block scaled by vw/1440 with
     the text reset to natural size — side padding 3.33% already does this;
     the vertical rhythm switches from rem (capped) to vw to match. One
     exception, confirmed against the agency's own render: the
     legal->wordmark gap SHRINKS 64 -> 48, so it interpolates instead. */

/* vw-proportional swaps: identical to the rem values at 1200-1439 (rem is
   100vw/90 there), keep scaling above the 1440 cap. Tablet/mobile keep their
   own overrides in responsive.css. */
@media (min-width: 1200px) {
  /* The chip's height is text-driven in the design (95 = 63 text + 2x16 pad;
     120 = 63 + 2x28.5 at 2560): the 79-tall thumbnail overlaps the padding,
     centred. Without this it stretched the chip to 111 at 1440 — a
     pre-existing mismatch the ultra-wide frame (120, not 136) exposed. */
  .sticky-cta-thumb { margin-top: -0.5rem; margin-bottom: -0.5rem; }
  .hero-shade-1 { left: calc(50% - 121.5rem); width: 144rem; }    /* == -85% / 160% below 1440 */
  .hero-shade-2 { left: calc(50% - 100.8rem); width: 195.3rem; }  /* == -62% / 217% below 1440 */
  .footer-main { padding-top: 4.4444vw; padding-bottom: 4.4444vw; }  /* 64 @1440, 113.8 @2560 */
  .footer-legal-block { margin-top: 4.1667vw; }                      /* 60 -> 106.7 */
}

/* 1440 -> 2560 interpolations (rem is a fixed 16px in this range, so px math
   is safe; every clamp() equals the old value at exactly 1440). */
@media (min-width: 1440px) {
  /* Trello 2026-08-18 "Green House section on larger browser shouldn't crop":
     above 1440 the strip escapes the centered page column so cards run to the
     window edge instead of being sliced at the column boundary mid-card. The
     header stays capped; padding keeps the first card on the 1440 grid. */
  main > section.implementation { max-width: none; }
  .implementation .impl-head { max-width: var(--page-max); margin-left: auto; margin-right: auto; }
  .impl-strip { padding-left: calc((100vw - var(--page-max)) / 2 + 3rem); padding-right: calc((100vw - var(--page-max)) / 2 + 3rem); }
  .nav {
    top: clamp(24px, calc(24px + (100vw - 1440px) * 0.0142857), 40px);
    right: clamp(24px, calc(24px + (100vw - 1440px) * 0.05), 80px);
  }
  .sticky-cta {
    left: clamp(24px, calc(24px + (100vw - 1440px) * 0.05), 80px);
    bottom: clamp(24px, calc(24px + (100vw - 1440px) * 0.0142857), 40px);
    padding-top: clamp(16px, calc(16px + (100vw - 1440px) * 0.0111607), 28.5px);
    padding-bottom: clamp(16px, calc(16px + (100vw - 1440px) * 0.0111607), 28.5px);
  }
  .hero-text {
    left: clamp(48px, calc(48px + (100vw - 1440px) * 0.0285714), 80px);
    top: clamp(40px, calc(48px - (100vw - 1440px) * 0.0071429), 48px);
    width: 32.03125rem;          /* 512.5 — the box stops growing with vw */
  }
  .hero-logo-slot {
    left: clamp(48px, calc(48px + (100vw - 1440px) * 0.0285714), 80px);
    right: clamp(48px, calc(48px + (100vw - 1440px) * 0.0285714), 80px);
    bottom: clamp(48px, calc(48px + (100vw - 1440px) * 0.0285714), 80px);
    width: auto;
  }
  .footer-wordmark { margin-top: clamp(48px, calc(64px - (100vw - 1440px) * 0.0142857), 64px); }
}