/* First screen: nav space, wordmark row, hero row, tagline row (Figma frame 1) */
.navspace { height: calc(90px * var(--u)); background: var(--beige); }
.wm-row { height: calc(142px * var(--u)); background: var(--beige); }
.wm-h { margin: 0; }
.wm-row svg { position: absolute; left: calc(128px * var(--u)); top: calc(31.66px * var(--u)); width: calc(1256px * var(--u)); color: var(--oak); }
.hline { position: absolute; left: calc(var(--xl) - var(--sl)); width: calc(var(--xr) - var(--xl)); height: 1px; background: var(--taupe); }
.hero-row { height: calc(var(--heroH) * 1px * var(--u)); background: var(--beige); }

/* Hero, fully native (no per-frame JS positioning, so nothing can lag the scroll):
   .hero-box   = the visible frame: scrolls with the row, rounded, clips everything (its bottom edge is the crop edge)
   .hero-track = taller than the box, so the sticky visual can stay pinned while the box's bottom rises over it
   .hero-vis   = sticky: pinned by the browser 8px under the flat nav */
.hero-box { position: absolute; left: calc(104px * var(--u)); top: calc(8px * var(--u)); width: calc(1304px * var(--u));
  bottom: calc(8px * var(--u)); overflow: clip; border-radius: calc(98px * var(--u)); }
.hero-track { position: relative; height: calc(100% + 4000px); }
.hero-vis { position: sticky; top: calc(65px * var(--u)); height: calc((var(--heroH) - 16) * 1px * var(--u)); }
.hero-clip { position: absolute; inset: 0; overflow: hidden; border-radius: calc(98px * var(--u)); }
.brackets-b { position: absolute; pointer-events: none; left: 0; bottom: 0; width: 100%; height: calc((var(--heroH) - 16) * 1px * var(--u)); overflow: visible; }
/* Photo placement as in Figma (1610.75 × 873 at −184.17, −177.17). On squarer screens the frame grows taller than that
   crop covers, so the photo grows to cover it (QA, 2026-10-07: a beige band at 1024×768), keeping its top and staying
   centered horizontally; at normal screen proportions it's exactly the Figma placement. */
.hero-clip img { position: absolute; --imgH: max(calc(873px * var(--u)), calc((var(--heroH) - 16 + 177.17) * 1px * var(--u) + 4px));
  height: var(--imgH); width: calc(var(--imgH) * 1.845085); top: calc(-177.17px * var(--u));
  left: calc(-184.17px * var(--u) - (var(--imgH) * 1.845085 - 1610.75px * var(--u)) / 2); max-width: none; will-change: transform; }
.hero-clip .tint { position: absolute; inset: 0;
  background: linear-gradient(170deg, rgba(151,160,166,.18), rgba(151,160,166,.07) 50%, rgba(151,160,166,0)), rgba(94,76,61,.08); }
.brackets { position: absolute; pointer-events: none; inset: 0; overflow: visible; width: 100%; height: 100%; }
/* Veil + rays live in one layer twice the frame's height, centered on it. A scroll-driven (compositor) animation moves
   the layer up at half the scroll speed once the hero is pinned, so the closing veil stays centered on the visible,
   shrinking frame, locked to its crop edge. */
.hero-clip .vlayer { position: absolute; left: 0; width: 100%; top: -50%; height: 200%; pointer-events: none; }
.hero-clip .veil { position: absolute; inset: 0; background: var(--beige); }
/* The button is just a button: exactly at the frame's center, it fades out in place as the veil begins.
   Outline as in Figma (864:14130): a pill minus an inner pill inset 3 at the ends and 1 at the top and bottom, so the
   rounded ends read thicker (user, 2026-10-06), filled with the Argent gradient (lit at the center, toward shade at the
   ends: Figma's radial, 111% × 891% of the button). 196 × 32 at the design size. */
.btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: calc(10px * var(--u)) calc(18px * var(--u));
  border-radius: 999px; color: var(--c-chrome-lit); white-space: nowrap;
  /* a faint dark glow behind the label, so it reads over the bright sky (4.5:1 in its brightest spot; was ~3.3) */
  background: color-mix(in srgb, var(--earth-950) var(--btn-dim, 28%), transparent);
  box-shadow: 0 0 calc(22px * var(--u)) calc(6px * var(--u)) color-mix(in srgb, var(--earth-950) 22%, transparent);
  font: 500 calc(12px * var(--u))/1 var(--f-small); letter-spacing: .12em; }
.btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  padding: max(1px, calc(1px * var(--u))) max(2px, calc(3px * var(--u)));
  background: radial-gradient(ellipse 111% 891% at 50% 50%, var(--lit), var(--shade));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.btn, .btn:visited, .btn:hover { text-decoration: none; color: var(--c-chrome-lit); }

/* Tagline row: beige at rest; on scroll a soft band rises through it and the brown (with the silver tagline) comes up
   from below. The side panels (rail zones) stay beige, so the sides reveal the brown one row later than the center. */
.tag-row { height: calc(99px * var(--u)); }
.tag-side { position: absolute; top: 0; bottom: 0; background: var(--beige); }
.tag-side.l { left: 0; width: calc(var(--sl) + 96px * var(--u)); }
.tag-side.r { left: calc(var(--sl) + 1416px * var(--u)); right: 0; }
.tagline { position: absolute; left: calc(130px * var(--u)); top: calc(32px * var(--u)); width: calc(1252px * var(--u)); height: calc(37px * var(--u));
  margin: 0; display: flex; align-items: center; justify-content: center; white-space: nowrap; color: var(--argent-300);
  font: 500 calc(50px * var(--u))/1 var(--f-display); letter-spacing: .05em; text-transform: uppercase; }   /* live type: Alpina Ext Medium 50, +5% (the outlined Figma line's spec) */
/* Soft rise, fully native: three layers move up through the row on scroll-driven (compositor) animations; the text
   copies inside them are counter-moved the same amount, so they stay put while the band passes over them. Above the
   band's midpoint the text darkens from grey-blue to the wordmark brown; at the midpoint it flips crisply to silver, so
   it never fades through the band's mid-tone. */
.tsoft { position: absolute; inset: 0; overflow: clip; pointer-events: none; }
.tmove { position: absolute; left: 0; right: 0; top: 0; }
.tcounter { position: absolute; left: 0; right: 0; top: 0; height: calc(99px * var(--u)); }
#tmSheet { height: calc((99px + 70px) * var(--u)); background: var(--beige);
  mask-image: linear-gradient(180deg, #000 calc(100% - 70px * var(--u)), transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 70px * var(--u)), transparent 100%); }
#tmDark { height: calc((99px + 35px) * var(--u)); overflow: clip; }
#tmGrey { height: calc((99px + 70px) * var(--u));
  mask-image: linear-gradient(180deg, #000 calc(100% - 70px * var(--u)), transparent calc(100% - 43.75px * var(--u)));
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 70px * var(--u)), transparent calc(100% - 43.75px * var(--u))); }
#tmDark .tagline { color: var(--oak); } #tmGrey .tagline { color: var(--c-tagline-on-ground); }