/* ==========================================================================
   vyrala / styles.css
   Order: tokens · reset · primitives · layout · components · motion ·
          responsive · reduced-motion
   ==========================================================================

   SPACING
   -------
   Every padding, margin, gap and inset in this file resolves to a token or to
   a documented clamp(). There are no raw pixel values in those properties.
   The scale is 8px based with four named half steps, because a 6px chip pad
   and a 12px stack gap are real relationships that 8 and 16 cannot express
   without the layout looking loose.

     --s-hair  2px    hairline offsets, focus insets
     --s-tick  4px    inside chips and meters
     --s-nib   6px    tight interior padding, icon gaps
     --s-half 12px    the most common stack gap
     --s1      8px   --s2 16px  --s3 24px  --s4 32px  --s5 40px
     --s6     48px   --s7 64px  --s8 96px  --s9 128px  --s10 160px

   MOTION CONTRACT
   ---------------
   The page is an edit. Sections are cuts, surface changes are wipes, display
   type behaves like a title card that settles. When a movement is optional it
   is removed.

   Easing set. Four curves, one job each. No browser defaults anywhere.
     --e-enter  expo-out        entrances, reveals, wipes
     --e-state  quart-in-out    state changes, swaps, open and close
     --e-touch  low overshoot   interactive feedback only
     --e-scrub  linear          scroll linked motion only

   Duration ladder, tied to distance travelled.
     micro 150ms under 8px · state 280ms 8 to 24px
     entrance 620ms 24 to 80px · cinematic 1150ms over 80px

   Stagger. 60ms base, 0.82 decay per index, 22ms floor.

   Scroll linked motion is declarative through animation-timeline where the
   browser supports it, and falls back to one rAF loop in main.js where it
   does not. Discrete state machines (the pinned narratives) stay in JS
   because they switch states rather than interpolate.

   Light. One key, top left. Every gradient and every elevation step obeys it.
   ========================================================================== */


/* ---------------------------------------------------------------- tokens - */
:root {
  --paper: #F7F9F2;
  --forest: #0A211F;
  --panel: #2A4E45;
  --panel-2: #213634;
  --char: #292423;
  --sage: #E6ECD6;
  --sage-2: #EEF3E4;

  /* --accent measures 1.48:1 on --paper and can never carry text there.
     On light surfaces text uses --accent-deep (5.31:1 on paper). */
  --accent: #00E5A0;
  --accent-dim: #00B37D;
  --accent-deep: #00734F;
  --mint: #8DFDBA;
  --coral: #FF9595;

  --on-dark: var(--paper);
  --on-dark-70: rgba(247, 249, 242, .70);
  --on-dark-55: rgba(247, 249, 242, .55);
  --on-dark-40: rgba(247, 249, 242, .40);
  --on-light-70: rgba(10, 33, 31, .72);
  --on-light-55: rgba(10, 33, 31, .56);
  --hair-dark: rgba(247, 249, 242, .14);
  --hair-light: rgba(10, 33, 31, .13);

  --ff-display: "Bricolage Grotesque", "Bricolage Fallback", "Instrument Sans", system-ui, sans-serif;
  --ff-body: "Instrument Sans", "Instrument Fallback", system-ui, sans-serif;

  --fs-cap: 12px;
  --fs-sm: 14.5px;
  --fs-body: clamp(16px, .55vw + 14.4px, 18px);
  --fs-lead: clamp(19px, 1.1vw + 15px, 26px);
  --fs-h3: clamp(21px, .8vw + 17.5px, 27px);
  --fs-h2: clamp(31px, 3.9vw + 8px, 66px);
  --fs-hero: clamp(38px, 6.6vw + 2px, 112px);
  --fs-stat: clamp(56px, 9vw, 148px);

  --tr-hero: -.045em;
  --tr-h2: -.032em;
  --tr-h3: -.02em;
  --tr-cap: .06em;

  /* spacing scale, 8px based with four named half steps */
  --s-hair: 2px; --s-tick: 4px; --s-nib: 6px; --s-half: 12px;
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;  --s5: 40px;
  --s6: 48px; --s7: 64px; --s8: 96px; --s9: 128px; --s10: 160px;
  --sect: clamp(64px, 8vw, 128px);
  --shell: 1200px;
  --gut: var(--s3);

  /* breakpoint ladder, derived from the shell.
     desk = shell + two gutters rounded to the 8 scale. Written into the
     media queries below by hand because custom properties cannot be used
     in media conditions. 1440 / 1280 / 1024 / 768 / 480 */

  --r-media: 20px;
  --r-plate: 28px;
  --r-chip: 6px;
  --r-field: 8px;
  --r-pill: 999px;
  --r-data: 0px;

  --e-enter: cubic-bezier(.16, 1, .3, 1);
  --e-state: cubic-bezier(.76, 0, .24, 1);
  --e-touch: cubic-bezier(.34, 1.36, .64, 1);
  --e-scrub: linear;

  --t-micro: 150ms;
  --t-state: 280ms;
  --t-enter: 620ms;
  --t-cine: 1150ms;

  --el-1: 0 1px 1px rgba(10,33,31,.05), 0 2px 4px -2px rgba(10,33,31,.08);
  --el-2: 0 1px 2px rgba(10,33,31,.06), 0 6px 12px -6px rgba(10,33,31,.14);
  --el-3: 0 2px 3px rgba(10,33,31,.07), 0 14px 28px -12px rgba(10,33,31,.20);
  --el-4: 0 3px 5px rgba(10,33,31,.08), 0 28px 54px -22px rgba(10,33,31,.30);
  --el-5: 0 4px 8px rgba(10,33,31,.10), 0 52px 96px -34px rgba(10,33,31,.44);

  --grain: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjgyJyBudW1PY3RhdmVzPSczJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzE4MCcgaGVpZ2h0PScxODAnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");

  --hdr-h: 64px;
  /* the announcement strip is a fixed-height token so the hero can subtract
     it: first paint shows announce + nav + a fully composed hero in one
     viewport. Once seen (sessionStorage), .ann-off zeroes it before paint. */
  --ann-h: 36px;
}
.ann-off { --ann-h: 0px; }


/* ----------------------------------------------------------------- reset - */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + var(--s2)); }
body {
  margin: 0;
  background: var(--forest);
  color: var(--forest);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.58;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, fieldset, legend, dl, dd, dt { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-inline-size: 0; }
table { border-collapse: collapse; }
::selection { background: var(--accent); color: var(--forest); }

:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: var(--s-tick); }
.s-dark :focus-visible, .s-char :focus-visible, .hdr :focus-visible { outline-color: var(--accent); }


/* ------------------------------------------------------------ primitives - */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }

.skip {
  position: absolute; top: 0; left: 0; z-index: 200;
  background: var(--forest); color: var(--paper);
  padding: var(--s2) var(--s3);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.s-dark  { background: var(--forest); color: var(--paper); }
.s-light { background: var(--paper);  color: var(--forest); }
.s-sage  { background: var(--sage);   color: var(--forest); }
section { position: relative; padding-block: var(--sect); }

.s-light::after, .s-sage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* plain alpha instead of multiply: at 3% the difference is invisible and
     dropping the blend mode removes a full-section offscreen composite */
  background-image: var(--grain); opacity: .03;
}

h1, h2, h3 { font-family: var(--ff-display); font-weight: 600; line-height: 1.02; }
.t-hero { font-size: var(--fs-hero); letter-spacing: var(--tr-hero); line-height: .93; text-wrap: balance; }
.t-h2   { font-size: var(--fs-h2);   letter-spacing: var(--tr-h2);   line-height: 1.0;  text-wrap: balance; }
.t-h3   { font-size: var(--fs-h3);   letter-spacing: var(--tr-h3);   line-height: 1.14; text-wrap: balance; }
.beat { color: color-mix(in srgb, currentColor 55%, transparent); }

p { text-wrap: pretty; }
.lead { font-size: var(--fs-lead); line-height: 1.4; max-width: 34ch; letter-spacing: -.012em; }
.meas { max-width: 62ch; }
.dim { color: var(--on-light-70); }
.s-dark .dim, .s-char .dim { color: var(--on-dark-70); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.cap {
  font-size: var(--fs-cap); font-weight: 600; letter-spacing: var(--tr-cap);
  text-transform: uppercase; color: var(--on-light-55);
}
.s-dark .cap, .s-char .cap { color: var(--on-dark-55); }

/* Editorial device: a numeral hung into the left margin on a hairline rule.
   Baseline aligned, not centred, because the numeral and the label are both
   text and their cap heights differ. */
.mark {
  display: grid; grid-template-columns: auto auto 1fr; align-items: baseline;
  gap: var(--s2); margin-bottom: var(--s4);
}
.mark i { height: 1px; background: currentColor; opacity: .18; transform-origin: left; align-self: center; }
.mark > span {
  font-size: var(--fs-cap); font-weight: 600; letter-spacing: var(--tr-cap);
  text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.mark > span:first-child { color: var(--accent-deep); }
.s-dark .mark > span:first-child { color: var(--accent); }
.s-dark .mark > span:nth-child(2) { color: var(--on-dark-55); }
.mark > span:nth-child(2) { color: var(--on-light-55); }

/* links: two line underline swap, out then in */
.lk { position: relative; color: inherit; text-decoration: none; padding-bottom: var(--s-hair); }
.lk::before, .lk::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform-origin: right;
  transition: transform var(--t-state) var(--e-state);
}
.lk::after { transform-origin: left; transform: scaleX(0); }
.lk:hover::before, .lk:focus-visible::before { transform: scaleX(0); }
.lk:hover::after, .lk:focus-visible::after { transform: scaleX(1); transition-delay: 120ms; }


/* ------------------------------------------------------------- buttons --- */
.btn {
  position: relative; display: inline-flex;
  /* centred: a button label is a single line inside a fixed pill, so box
     centring and optical centring agree here */
  align-items: center; justify-content: center;
  gap: var(--s-half);
  min-height: var(--s7); padding: var(--s2) var(--s4);
  font-size: 16px; font-weight: 600; letter-spacing: -.008em;
  border: 1px solid transparent; border-radius: var(--r-pill);
  cursor: pointer; text-decoration: none; overflow: hidden; isolation: isolate;
  /* no button label may wrap: .btn clips for the ::before fill, so a second
     line would be cut. Slovak and Czech labels are the longest of the three. */
  white-space: nowrap;
  transition: transform var(--t-micro) var(--e-touch),
              color var(--t-state) var(--e-state),
              border-color var(--t-state) var(--e-state);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--mint); transform: translateY(101%);
  transition: transform var(--t-state) var(--e-state);
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit;
  box-shadow: var(--el-3); opacity: 0;
  transition: opacity var(--t-state) var(--e-state);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover::after, .btn:focus-visible::after { opacity: 1; }
.btn:active { transform: scale(.985) !important; }
/* the arrow glyph carries its mass right of centre, so it is nudged back
   one pixel to sit optically level with the label baseline */
.btn .arw { transform: translateY(-1px); transition: transform var(--t-state) var(--e-enter); }
.btn:hover .arw { transform: translate(4px, -1px); }

.btn-fill { background: var(--accent); color: var(--forest); }
/* a light wash behind the outline button keeps its label readable when it
   sits over bright video frames (hero) */
.btn-line-d { background: rgba(10, 33, 31, .32); color: var(--paper); border-color: var(--hair-dark); }
.btn-line-d::before { background: var(--paper); }
.btn-line-d:hover, .btn-line-d:focus-visible { color: var(--forest); }
.btn-line-l { background: transparent; color: var(--forest); border-color: var(--hair-light); }
.btn-line-l::before { background: var(--forest); }
.btn-line-l:hover, .btn-line-l:focus-visible { color: var(--paper); }
.btn-sm { min-height: var(--s6); padding: var(--s-half) var(--s3); font-size: 15px; }
.btn-lg { min-height: var(--s8); padding: var(--s3) var(--s5); font-size: 17px; }
.btn[aria-busy="true"] { pointer-events: none; opacity: .64; }
.btn[disabled] { opacity: .38; pointer-events: none; }

.sub { font-size: var(--fs-sm); color: var(--on-light-55); margin-top: var(--s2); max-width: 44ch; }
/* copy that names an input method must match the device */
.if-touch { display: none; }
@media (hover: none) { .if-hover { display: none; } .if-touch { display: inline; } }
.s-dark .sub, .s-char .sub { color: var(--on-dark-55); }

/* the CTA row: always the last element of its section's content column,
   always one full --s7 below the content above it (the doctrine's s-8 step) */
.act { margin-top: var(--s7); }


/* -------------------------------------------------------- announce + hdr - */
.announce {
  background: var(--accent); color: var(--forest);
  font-size: var(--fs-sm); font-weight: 600; text-align: center;
  /* one line, fixed height, ellipsis — the strip may never wrap or push */
  height: var(--ann-h); line-height: var(--ann-h);
  padding: 0 var(--gut); position: relative; z-index: 60;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: height var(--t-state) var(--e-state);
}
.ann-off .announce { visibility: hidden; }
.announce span { font-weight: 500; opacity: .78; }

/* the only true glass in the build: page content passes behind it */
.hdr {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background var(--t-state) var(--e-state), border-color var(--t-state) var(--e-state);
}
.hdr.stuck {
  background: rgba(10, 33, 31, .78);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom-color: var(--hair-dark);
}
/* centred: a fixed height bar of single line items, no baseline to share */
.hdr-in { min-height: var(--hdr-h); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.brand {
  display: inline-flex; align-items: center; gap: var(--s1); text-decoration: none;
  font-family: var(--ff-display); font-weight: 700; font-size: 21px;
  letter-spacing: -.05em; color: var(--paper);
}
.brand img { height: 27px; width: auto; display: block; }
.nav { display: flex; gap: var(--s4); }
.nav a { color: var(--on-dark-70); font-size: 15px; text-decoration: none; transition: color var(--t-micro) var(--e-state); }
.nav a:hover { color: var(--paper); }
/* centred: fixed height controls in a bar */
.hdr-r { display: flex; align-items: center; gap: var(--s-half); }

.langsw { display: flex; gap: var(--s-hair); border: 1px solid var(--hair-dark); border-radius: var(--r-pill); padding: var(--s-tick); }
.langsw a {
  font-size: 12px; font-weight: 600; letter-spacing: var(--tr-cap);
  color: var(--on-dark-55); text-decoration: none;
  padding: var(--s1) var(--s-half); border-radius: var(--r-pill); min-width: 44px; text-align: center;
  transition: background var(--t-micro) var(--e-state), color var(--t-micro) var(--e-state);
}
.langsw a:hover { color: var(--paper); }
.langsw a[aria-current="true"] { background: var(--accent); color: var(--forest); }

/* centred: three fixed bars inside a fixed square */
.burger {
  display: none; width: 44px; height: 44px; background: transparent;
  border: 1px solid var(--hair-dark); border-radius: var(--r-pill); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: var(--s-nib);
}
/* the icon morphs with the touch curve: a small spring, not a slide */
.burger i { width: 15px; height: 1.5px; background: var(--paper); transition: transform var(--t-state) var(--e-touch), opacity var(--t-micro); }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* full-screen takeover: dark-mint glass over the page, display-scale links
   staggering in, the CTA pinned in the thumb zone */
.drawer {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(10, 33, 31, .88);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  backdrop-filter: saturate(140%) blur(18px);
  padding: calc(var(--hdr-h) + var(--s6)) var(--gut)
           calc(var(--s5) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; justify-content: space-between;
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path var(--t-cine) var(--e-enter), visibility 0s linear var(--t-cine);
}
@supports not (backdrop-filter: blur(1px)) { .drawer { background: var(--forest); } }
.drawer.open { clip-path: inset(0 0 0 0); visibility: visible; transition-delay: 0s, 0s; }
.drawer nav { display: grid; }
.drawer nav a {
  font-family: var(--ff-display); font-size: clamp(38px, 10.5vw, 58px); font-weight: 600;
  letter-spacing: -.04em; line-height: 1.12; color: var(--paper); text-decoration: none;
  padding-block: var(--s2); border-bottom: 1px solid var(--hair-dark);
  opacity: 0; transform: translateY(26px);
  transition: opacity var(--t-enter) var(--e-enter), transform var(--t-enter) var(--e-enter);
}
.drawer.open nav a {
  opacity: 1; transform: none;
  transition-delay: calc(140ms + var(--i, 0) * 60ms);
}
.drawer-btm { display: grid; gap: var(--s3); justify-items: stretch; }
.drawer-btm .langsw { justify-self: start; }


/* -------------------------------------------------------------- 01 hero -- */
.hero {
  position: relative; overflow: clip; color: var(--paper);
  /* the full composition fits the first viewport with the announce strip and
     the nav both on screen; when the strip is gone the same calc reclaims it */
  min-height: calc(100vh - var(--hdr-h) - var(--ann-h));
  min-height: calc(100dvh - var(--hdr-h) - var(--ann-h));
  display: flex; align-items: flex-end;
  padding-block: var(--s8) var(--s7);
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg video, .hero-bg img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 42%; }
.hero-bg video { cursor: pointer; }
/* The veil is directional: heavy where the type sits (left, lower) and thin
   on the right so the footage actually reads. Measured at the headline's
   position the composite is 8.9:1 for paper on forest. */
.hero-veil {
  /* clicks fall through to the footage: the hero clip opens the lightbox */
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(96deg, rgba(10,33,31,.92) 0%, rgba(10,33,31,.78) 34%, rgba(10,33,31,.34) 68%, rgba(10,33,31,.20) 100%),
    linear-gradient(0deg, rgba(10,33,31,.86) 0%, rgba(10,33,31,.22) 46%, rgba(10,33,31,.34) 100%);
}
.hero-in { position: relative; z-index: 2; width: 100%; }
.hero-grid { display: grid; grid-template-columns: 8fr 4fr; gap: var(--s7); align-items: end; }
.hero h1 { margin-bottom: var(--s5); }
.hero .lead { color: var(--on-dark-70); max-width: 38ch; }
.hero-act { display: flex; flex-wrap: wrap; gap: var(--s-half); margin-top: var(--s5); }
.hero-facts { display: grid; gap: var(--s3); border-top: 1px solid var(--hair-dark); padding-top: var(--s3); }
/* baseline: the figure and its label are both text on one line */
.hero-facts div { display: grid; grid-template-columns: auto 1fr; gap: var(--s2); align-items: baseline; }
.hero-facts b { font-family: var(--ff-display); font-size: 28px; font-weight: 600; letter-spacing: -.03em; }
.hero-facts span { font-size: var(--fs-sm); color: var(--on-dark-55); }

/* baseline: rule and label sit on the same line of text */
.cue {
  position: absolute; left: var(--gut); bottom: var(--s3); z-index: 3;
  display: flex; align-items: baseline; gap: var(--s-half);
  font-size: var(--fs-cap); letter-spacing: var(--tr-cap); text-transform: uppercase; color: var(--on-dark-40);
}
.cue i { display: block; width: 32px; height: 1px; background: currentColor; transform-origin: left; animation: draw 2600ms var(--e-state) infinite; }
@keyframes draw { 0%, 100% { transform: scaleX(.2); } 50% { transform: scaleX(1); } }


/* ---------------------------------------------------------- 02 capacity -- */
.cap-grid { display: grid; grid-template-columns: 6fr 6fr; gap: var(--s7); align-items: center; }
/* eight slots as objects: four playing client work (the proof), four open
   frames (the scarcity). 4x2 desktop, 2x4 on phones. */
.slotgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-half); }
.scell { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-media); overflow: hidden; margin: 0; }
/* a proof cell is a button now: click opens the full cut in the lightbox */
.scell.full { background: var(--panel-2); box-shadow: var(--el-2); border: 0; padding: 0; cursor: pointer; text-align: left; }
.scell.full video { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-state) var(--e-state); }
.scell-tag {
  position: absolute; left: var(--s1); bottom: var(--s1);
  font-size: 10px; font-weight: 700; letter-spacing: var(--tr-cap); text-transform: uppercase;
  padding: var(--s-tick) var(--s1); border-radius: var(--r-chip);
  background: rgba(10,33,31,.66); color: var(--paper);
}
/* an open frame is a door: a real link to the form, not decoration */
.scell.openc {
  display: grid; place-items: center;
  background: rgba(10,33,31,.045);
  text-decoration: none; cursor: pointer;
  transition: background var(--t-micro) var(--e-state), transform var(--t-micro) var(--e-touch);
}
.scell.openc:active { transform: scale(.97); }
.scell.openc span:first-child {
  font-size: var(--fs-cap); font-weight: 600; letter-spacing: var(--tr-cap);
  text-transform: uppercase; color: var(--accent-deep);
}
/* the invitation microcopy: fades in on hover, absent on touch (press only) */
.scell-go {
  position: absolute; left: var(--s1); right: var(--s1); bottom: var(--s1);
  font-size: 11px; font-weight: 600; text-align: center; color: var(--accent-deep);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--t-micro) var(--e-state), transform var(--t-micro) var(--e-state);
}
@media (hover: hover) {
  .scell.openc:hover { background: rgba(0, 229, 160, .08); }
  .scell.openc:hover::after { opacity: 1; animation: none; }
  .scell.openc:hover .scell-go, .scell.openc:focus-visible .scell-go { opacity: 1; transform: none; }
}
/* one accent ring expands from the pressed cell, then the page travels */
.scell.openc.ping::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 2px solid var(--accent-deep);
  animation: slotPing 400ms var(--e-enter) forwards;
}
@keyframes slotPing {
  from { transform: scale(1); opacity: .9; }
  to   { transform: scale(1.14); opacity: 0; }
}
/* the pulse is an opacity breath on a drawn frame — compositor only */
.scell.openc::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 1px solid var(--accent-deep);
  animation: slotPulse 2200ms var(--e-state) infinite;
}
@keyframes slotPulse { 0%, 100% { opacity: .3; } 50% { opacity: .9; } }
/* a taken cell beyond the four proof videos (config open < 4): the door
   closes — no link, no pulse, no invitation */
.scell.taken { background: rgba(10,33,31,.12); pointer-events: none; }
.scell.taken::after { animation: none; opacity: .18; border-color: currentColor; }
.scell.taken span { color: var(--on-light-55); }
.scell.taken .scell-go { display: none; }
.slotgrid-cap { margin-top: var(--s3); }
.slotgrid-cap b { color: var(--accent-deep); font-weight: 700; }
/* desktop only: pointer tilt (JS writes --tx/--ty, max 4deg) + crop tighten */
@media (min-width: 1025px) and (hover: hover) {
  .js:not(.low-power) [data-tilt] {
    transform: perspective(900px)
      rotateX(calc(var(--ty, 0) * -4deg)) rotateY(calc(var(--tx, 0) * 4deg));
    transition: transform var(--t-state) var(--e-state);
  }
  .scell.full:hover video { transform: scale(1.05); }
}


/* -------------------------------------------------------- 03 work grid --- */
.work-top { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s6); align-items: baseline; margin-bottom: var(--s6); }
/* the section CTA lives inside the mosaic's left column, filling the space
   the staggered right columns leave behind. On mobile the column unwraps
   (display:contents), so the CTA becomes a grid item: full row, ordered last. */
.work-cta { grid-column: 1 / -1; order: 99; margin-top: var(--s3); }
/* Every work clip is a vertical 9:16 reel, so the mosaic is built from
   standing tiles: a scaled-up 9:16 feature anchoring a double-width column,
   two single columns beside it, the middle one dropped by half a tile. The
   ragged edge is the design. Mobile keeps two staggered columns with the
   feature bridging both. Percentage offsets resolve against column width,
   so "half a tile" is 16/9 / 2 = 89% at every size. */
.grid-w { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-half); align-items: start; }
.bc-a, .bpair { display: contents; }
.bc-b, .bc-c { display: grid; gap: var(--s-half); align-content: start; }
.bc-b { padding-top: 89%; }
.bt-feat { grid-column: 1 / -1; width: min(100%, calc(70dvh * 9 / 16)); justify-self: center; }
/* tablet up: the feature column is double width, so its 9:16 tile stands
   two rows tall and reads as the anchor; its pair closes the column flush */
@media (min-width: 769px) {
  .grid-w { grid-template-columns: 2fr 1fr 1fr; gap: var(--s2); }
  .bc-a { display: grid; gap: var(--s2); align-content: start; }
  .bpair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
  .bc-b, .bc-c { gap: var(--s2); }
  .bt-feat { grid-column: auto; width: 100%; justify-self: stretch; }
  .work-cta { grid-column: auto; order: 0; margin-top: var(--s4); }
}

.tile {
  position: relative; display: block; width: 100%; height: auto; aspect-ratio: 9 / 16;
  padding: 0; text-align: left;
  border: 0; border-radius: var(--r-media);
  overflow: hidden; background: var(--panel-2); cursor: none;
  transition: transform var(--t-state) var(--e-state);
}
.tile video, .tile .ph { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-state) var(--e-state); }
/* differential scale: frame 1.02, media 1.06, so the crop tightens */
.tile:hover, .tile:focus-visible, .tile.near { transform: scale(1.02); }
.tile:hover video, .tile:focus-visible video, .tile.near video { transform: scale(1.06); }
.tile-ui {
  position: absolute; inset: 0; padding: var(--s2); pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(196deg, rgba(10,33,31,.34) 0%, transparent 32%, transparent 58%, rgba(10,33,31,.76) 100%);
}
.chips { display: flex; flex-wrap: wrap; gap: var(--s-nib); }
.chip {
  font-size: 10.5px; font-weight: 700; letter-spacing: var(--tr-cap); text-transform: uppercase;
  padding: var(--s-tick) var(--s1); border-radius: var(--r-chip);
  background: var(--accent); color: var(--forest);
}
.chip.b { background: rgba(247,249,242,.92); }
/* baseline: label and duration are both text */
.tile-cap { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); color: var(--paper); font-size: 14px; font-weight: 600; }
.tile-cap span:last-child { font-size: 12px; color: var(--on-dark-55); font-variant-numeric: tabular-nums; }

/* the brand tile: the mark on the page's own dark green, same radius as its
   neighbours, grain + top-left edge light per the dark-band system. A quiet
   full stop for the mosaic, not an ad. */
.bcell-brand {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 6 / 5; border-radius: var(--r-media); overflow: hidden;
  background: radial-gradient(120% 130% at 28% 18%, var(--panel-2) 0%, var(--forest) 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), var(--el-2);
}
.bcell-brand::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); opacity: .05;
}
.bcell-brand img { width: clamp(180px, 74%, 340px); height: auto; }
/* slow spotlight on hover, desktop pointer only */
.bcell-brand::before {
  content: ""; position: absolute; inset: -30%; pointer-events: none;
  background: radial-gradient(42% 36% at 34% 30%, rgba(0, 229, 160, .12), transparent 70%);
  opacity: 0; transition: opacity var(--t-cine) var(--e-state);
}
@media (hover: hover) { .bcell-brand:hover::before { opacity: 1; } }


/* --------------------------------------------------------- 04 live wall -- */
.wall-sec { overflow: clip; }
.wall-rail { display: flex; gap: var(--s2); width: max-content; }
.wall-item {
  position: relative; width: clamp(168px, 16vw, 244px); aspect-ratio: 9 / 16;
  border-radius: var(--r-media); overflow: hidden; background: var(--panel-2);
  border: 0; padding: 0; cursor: pointer;
  transition: transform var(--t-state) var(--e-state);
}
.wall-item video { width: 100%; height: 100%; object-fit: cover; }
.wall-item:hover, .wall-item:focus-visible { transform: scale(1.03); }
.wall-item .snd {
  position: absolute; right: var(--s-half); bottom: var(--s-half);
  /* centred: a pill of one short line at fixed height */
  display: inline-flex; align-items: center; gap: var(--s-nib);
  font-size: 11px; font-weight: 600; letter-spacing: var(--tr-cap); text-transform: uppercase;
  padding: var(--s-nib) var(--s-half); border-radius: var(--r-pill);
  background: rgba(10,33,31,.66); color: var(--paper);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--t-micro) var(--e-state), transform var(--t-micro) var(--e-state);
}
.wall-item:hover .snd, .wall-item:focus-visible .snd { opacity: 1; transform: none; }
.wall-item[aria-pressed="true"] .snd { background: var(--accent); color: var(--forest); opacity: 1; transform: none; }
/* edge fade via overlay gradients instead of a mask: masking the whole rail
   forces an offscreen buffer for sixteen playing videos, overlays cost two
   small composited strips. The section background is solid forest, so the
   result is visually identical. */
.wall-mask { position: relative; }
.wall-mask::before, .wall-mask::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 6%;
  z-index: 2; pointer-events: none;
}
.wall-mask::before { left: 0; background: linear-gradient(90deg, var(--forest), rgba(10,33,31,0)); }
.wall-mask::after { right: 0; background: linear-gradient(270deg, var(--forest), rgba(10,33,31,0)); }


/* ---------------------------------------------------------- 05 process --- */
/* Unpinned by design ruling (2026-07-31): the five steps read as one
   staggered list at every width. The comparison narrative keeps the page's
   single pinned moment. */
.pin { position: relative; }
.pin-stage { display: flex; align-items: center; }
.pin-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s7); width: 100%; align-items: start; }
.steps { display: grid; gap: var(--s-hair); }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s3);
  padding: var(--s3); border-radius: var(--r-chip);
  background: var(--panel-2);
  /* baseline: the step numeral sits on the first line of the step heading */
  align-items: baseline;
}
.step-n { font-size: var(--fs-cap); font-weight: 700; letter-spacing: var(--tr-cap); font-variant-numeric: tabular-nums; color: var(--accent); }
.step h3 { margin-bottom: var(--s1); }
.step p { color: var(--on-dark-70); font-size: var(--fs-sm); max-width: 54ch; }


/* ------------------------------------------------------ 06 localisation -- */
.loc-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s7); align-items: start; }
/* the plate is much shorter than the picker column; centring it kills the
   dead lower-right quadrant at desktop widths */
.loc-plate { align-self: center; }
.loc-plate {
  position: relative; background: var(--sage-2); border: 1px solid var(--hair-light);
  border-radius: var(--r-plate); padding: clamp(24px, 3.4vw, 48px); overflow: hidden;
  box-shadow: var(--el-2);
}
.loc-line {
  font-family: var(--ff-display); font-size: clamp(21px, 2.4vw, 33px); font-weight: 600;
  letter-spacing: var(--tr-h2); line-height: 1.1; min-height: 2.4em;
  clip-path: inset(0 0 0 0); transition: clip-path var(--t-state) var(--e-state);
}
.loc-line.swap { clip-path: inset(0 0 100% 0); }
.loc-meta { margin-top: var(--s2); font-size: var(--fs-sm); color: var(--on-light-55); }
.loc-pick { display: flex; flex-wrap: wrap; gap: var(--s-nib); margin-top: var(--s5); }
.loc-pick button {
  font-size: 14px; font-weight: 600; cursor: pointer; min-height: 44px; padding: var(--s-half);
  border: 1px solid var(--hair-light); border-radius: var(--r-pill);
  background: transparent; color: var(--forest);
  transition: background var(--t-micro) var(--e-state), color var(--t-micro) var(--e-state), border-color var(--t-micro) var(--e-state);
}
.loc-pick button:hover { border-color: var(--forest); }
.loc-pick button[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: var(--accent); }
/* optical hang: the opening quote has no left mass, so it sits outside the
   measure to keep the text block edge visually straight */
.hang { margin-left: -.42em; }
/* the section's open air is anchored by a ghost numeral: the void reads as a
   margin the composition owns, not content that failed to arrive */
#languages { overflow: clip; }
.ghost {
  position: absolute; right: calc(var(--gut) * -0.5); bottom: calc(var(--sect) * -0.18);
  z-index: 0; pointer-events: none; user-select: none;
  font-family: var(--ff-display); font-weight: 700; line-height: .7;
  font-size: clamp(180px, 30vw, 460px); letter-spacing: -.06em;
  color: var(--forest); opacity: .045;
}
#languages .shell { position: relative; z-index: 1; }


/* ---------------------------------------------------------- 07 pricing --- */
.price-sec { padding-top: var(--s10); }
.plate {
  position: relative; margin-top: calc(var(--s9) * -1);
  background: var(--char); color: var(--paper);
  border-radius: var(--r-plate); padding: clamp(28px, 4vw, 64px);
  /* shadow alone disappears dark-on-dark; the hairline draws the object edge */
  border: 1px solid var(--hair-dark);
  box-shadow: var(--el-5);
  display: grid; grid-template-columns: 6fr 6fr; gap: var(--s7); align-items: start;
}
.price-head { font-family: var(--ff-display); font-size: clamp(40px, 5vw, 76px); font-weight: 600; letter-spacing: -.045em; line-height: .92; color: var(--accent); font-variant-numeric: tabular-nums; }
.price-head small { display: block; font-family: var(--ff-body); font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--on-dark-55); margin-top: var(--s-half); }

/* anchor pricing: one number, said plainly, sourced from config */
.price-pre { display: block; font-family: var(--ff-body); font-size: var(--fs-cap); font-weight: 600; letter-spacing: var(--tr-cap); text-transform: uppercase; color: var(--on-dark-55); margin-bottom: var(--s-half); }
.price-line { margin-top: var(--s5); border-top: 1px solid var(--hair-dark); padding-top: var(--s5); color: var(--on-dark-70); max-width: 42ch; }

/* terms as a data object: square corners, hairline rules, tabular values */
.terms { width: 100%; font-size: var(--fs-sm); }
.terms caption { text-align: left; font-size: var(--fs-cap); letter-spacing: var(--tr-cap); text-transform: uppercase; color: var(--on-dark-40); padding-bottom: var(--s3); }
.terms th, .terms td { text-align: left; vertical-align: baseline; padding-block: var(--s3); border-bottom: 1px solid var(--hair-dark); border-radius: var(--r-data); }
.terms th { font-weight: 500; color: var(--on-dark-55); width: 52%; padding-right: var(--s3); }
.terms td { font-weight: 600; font-variant-numeric: tabular-nums; }


/* ------------------------------------------------------- 08 speed -------- */
/* Split narrative: the strikethrough drama on the left, the day-by-day proof
   on the right with a scroll-drawn connector. */
.tl-grid { display: grid; grid-template-columns: 6fr 6fr; gap: var(--s7); align-items: center; }
/* struck-through but still content: must clear 4.5:1 */
.cmp-old { font-size: var(--fs-lead); color: var(--on-dark-55); text-decoration: line-through; text-decoration-thickness: 1px; }
.cmp-new { font-family: var(--ff-display); font-size: clamp(48px, 7vw, 118px); font-weight: 600; letter-spacing: -.05em; line-height: .9; color: var(--accent); font-variant-numeric: tabular-nums; margin-top: var(--s2); }
.cmp-say { font-size: var(--fs-lead); max-width: 30ch; color: var(--paper); margin-top: var(--s4); }

.tl { position: relative; display: grid; gap: var(--s6); }
.tl-track, .tl-line {
  position: absolute; left: 5.5px; top: var(--s-nib); bottom: var(--s-nib); width: 1px;
}
.tl-track { background: var(--hair-dark); }
.tl-line { background: var(--accent); transform-origin: top; }
/* the connector draws with scroll: native timeline where supported, the rAF
   loop writes the same transform elsewhere. Default is fully drawn. */
@supports (animation-timeline: view()) {
  .js .tl-line {
    animation: tlDraw linear both;
    animation-timeline: view();
    animation-range: entry 20% cover 70%;
  }
}
@keyframes tlDraw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.tl-item { position: relative; display: grid; grid-template-columns: 12px 1fr; gap: var(--s3); }
.tl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); margin-top: var(--s-nib); }
/* node dots pop with the touch curve — a deliberate extension of the spring
   budget from buttons/chips to timeline nodes */
.js .tl-item .tl-dot { transform: scale(0); transition: transform var(--t-state) var(--e-touch); transition-delay: calc(var(--d, 0ms) + 120ms); }
.js .tl-item.in .tl-dot { transform: scale(1); }
.tl-day { display: block; font-size: var(--fs-cap); font-weight: 700; letter-spacing: var(--tr-cap); text-transform: uppercase; color: var(--accent); font-variant-numeric: tabular-nums; margin-bottom: var(--s1); }
.tl-item h3 { margin-bottom: var(--s1); }
.tl-item p { color: var(--on-dark-70); font-size: var(--fs-sm); max-width: 44ch; }


/* --------------------------------------------------------- 09 founders --- */
/* The human moment: two portrait cards with the real founders, names,
   one-line roles, short first-person bios. */
.fdr-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s7); align-items: center; }
.fdr-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); align-items: stretch; }
/* the whole card is a quiet trust link to the founder's LinkedIn profile:
   card affordance, never a button competing with the form CTA */
.fdr-card {
  background: var(--sage-2); border: 1px solid var(--hair-light);
  border-radius: var(--r-media); overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--el-2);
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: transform var(--t-state) var(--e-state), box-shadow var(--t-state) var(--e-state);
}
.fdr-card:hover, .fdr-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--el-3);
}
.fdr-shot { position: relative; display: block; }
.fdr-card img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
/* the "in" glyph chip sits visibly in the corner at all times */
.fdr-li {
  position: absolute; top: var(--s2); right: var(--s2);
  width: var(--s4); height: var(--s4); display: grid; place-items: center;
  border-radius: var(--r-chip); background: rgba(10, 33, 31, .58); color: var(--paper);
}
/* the invitation appears only when the card is engaged */
.fdr-view {
  position: absolute; left: var(--s2); bottom: var(--s2);
  font-size: 11px; font-weight: 600; letter-spacing: var(--tr-cap); text-transform: uppercase;
  padding: var(--s-nib) var(--s-half); border-radius: var(--r-pill);
  background: rgba(10, 33, 31, .66); color: var(--paper);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--t-micro) var(--e-state), transform var(--t-micro) var(--e-state);
}
.fdr-card:hover .fdr-view, .fdr-card:focus-visible .fdr-view { opacity: 1; transform: none; }
/* baseline: the name and the role are one line of text together */
.fdr-meta { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); align-items: baseline; padding: var(--s3) var(--s3) 0; }
.fdr-name { font-family: var(--ff-display); font-size: clamp(19px, 1.8vw, 24px); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.fdr-role { font-size: var(--fs-cap); letter-spacing: var(--tr-cap); text-transform: uppercase; color: var(--on-light-55); }
.fdr-bio { display: block; color: var(--on-light-70); font-size: var(--fs-sm); padding: var(--s2) var(--s3) var(--s3); }
.fdr-grid .dim { max-width: 52ch; }


/* -------------------------------------------------------------- 10 faq --- */
.faq { border-top: 1px solid var(--hair-light); }
.faq-i { border-bottom: 1px solid var(--hair-light); }
/* centred: a heading line against a fixed 20px glyph box, no shared baseline */
.faq-q {
  width: 100%; background: transparent; border: 0; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: 1fr auto; gap: var(--s3); align-items: center;
  padding-block: var(--s4); min-height: var(--s8);
  font-family: var(--ff-display); font-size: clamp(18px, 1.6vw, 23px); font-weight: 600;
  letter-spacing: var(--tr-h3); color: var(--forest);
}
/* the plus glyph reads heavy at its geometric centre, so the box is nudged
   one pixel up to sit level with the heading x-height */
.faq-ico { width: 20px; height: 20px; position: relative; transform: translateY(-1px); transition: transform var(--t-state) var(--e-state); }
.faq-ico::before, .faq-ico::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.5px; background: var(--accent-deep);
}
.faq-ico::after { transform: rotate(90deg); }
/* the plus turns 45deg into a close mark */
.faq-q[aria-expanded="true"] .faq-ico { transform: translateY(-1px) rotate(45deg); }
/* height is animated with WAAPI in main.js; without JS every answer is open */
.js .faq-a { height: 0; overflow: hidden; }
.js .faq-i.open .faq-a { height: auto; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding-bottom: var(--s4); color: var(--on-light-70); max-width: 62ch; }


/* ------------------------------------------------- 11 form and success --- */
.form-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s7); align-items: stretch; }
/* the offer column: headline and lead at the top, the two benefit blocks
   centred against the card's height so the space reads structured, not empty */
.form-grid > div:first-child { display: flex; flex-direction: column; }
.trust {
  display: grid; gap: var(--s5); margin-block: auto;
  border-top: 1px solid var(--hair-dark); padding-block: var(--s6);
}
.trust li { display: grid; grid-template-columns: auto 1fr; gap: var(--s-half); }
.trust li > div { display: grid; gap: var(--s-tick); }
.trust svg { width: 14px; height: 14px; stroke: var(--accent); stroke-width: 2.6; fill: none; margin-top: calc((1lh - 14px) / 2); }
.trust b { font-size: var(--fs-sm); font-weight: 600; }
.trust span { font-size: var(--fs-sm); color: var(--on-dark-55); }

/* the destination card: one register deeper than every other surface on the
   page — accent tick, edge light, the heaviest elevation step */
.card {
  position: relative; background: var(--panel); border-radius: var(--r-plate);
  padding: clamp(24px, 3vw, 48px);
  border: 1px solid var(--hair-dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--el-5);
  transition: transform var(--t-state) var(--e-state);
}
.card::before { content: ""; position: absolute; top: -1px; left: clamp(24px, 3vw, 48px); width: var(--s7); height: 2px; background: var(--accent); }
/* arrival greeting: when a slot door (or any in-page CTA) delivered the
   visitor, the card glows once — a hairline in, a hairline out, no state */
.card.greet::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  border: 1px solid var(--accent);
  box-shadow: 0 0 44px rgba(0, 229, 160, .28);
  opacity: 0;
  animation: cardGreet 900ms var(--e-state) forwards;
}
@keyframes cardGreet { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
/* success flips the card: out on the y axis, content swaps, back in */
.card.flip { transform: rotateY(88deg); }

/* progress: five beats, one per question */
.prog { display: flex; gap: var(--s-nib); margin-bottom: var(--s6); }
.prog i { flex: 1; height: 3px; background: rgba(247,249,242,.16); transition: background var(--t-state) var(--e-state); }
.prog i.on { background: var(--accent); }
.prog-n { font-size: var(--fs-cap); letter-spacing: var(--tr-cap); color: var(--on-dark-40); font-variant-numeric: tabular-nums; margin-bottom: var(--s2); }

/* No JS: every question is visible and the form submits normally.
   With JS the .seq class turns the same markup into one question per view. */
.q { margin-bottom: var(--s6); }
.seq .q { display: none; }
.seq .q.live { display: block; animation: qIn var(--t-enter) var(--e-enter) both; }
@keyframes qIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.q-ask { font-family: var(--ff-display); font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--tr-h3); margin-bottom: var(--s3); }
.q-hint { font-size: var(--fs-sm); color: var(--on-dark-55); margin-bottom: var(--s3); max-width: 46ch; }

.f { position: relative; }
.f input[type="text"], .f input[type="email"] {
  width: 100%; min-height: var(--s7); padding: var(--s4) var(--s2) var(--s-half);
  background: rgba(10,33,31,.36); color: var(--paper);
  border: 1px solid var(--hair-dark); border-radius: var(--r-field);
  transition: border-color var(--t-state) var(--e-state);
}
/* floating label: rests as the field's prompt, floats to a cap on focus/fill */
.flbl {
  position: absolute; left: var(--s2); top: 50%; translate: 0 -50%;
  font-size: 16px; color: var(--on-dark-55); pointer-events: none;
  transform-origin: left top;
  transition: translate var(--t-state) var(--e-state), scale var(--t-state) var(--e-state),
              color var(--t-state) var(--e-state), letter-spacing var(--t-state) var(--e-state);
}
.f input:focus ~ .flbl, .f input:not(:placeholder-shown) ~ .flbl {
  translate: 0 calc(-50% - var(--s2) - var(--s-hair)); scale: .72;
  letter-spacing: var(--tr-cap); text-transform: uppercase; color: var(--accent);
}
.f .ring { position: absolute; inset: 0; border-radius: var(--r-field); pointer-events: none; overflow: hidden; }
.f .ring::before {
  content: ""; position: absolute; inset: 0; border: 1px solid var(--accent); border-radius: inherit;
  clip-path: circle(0% at var(--fx, 50%) var(--fy, 50%));
  transition: clip-path 420ms var(--e-enter);
}
.f input:focus ~ .ring::before { clip-path: circle(150% at var(--fx, 50%) var(--fy, 50%)); }
.f input[aria-invalid="true"] { border-color: var(--coral); }
/* the valid tick draws itself in */
.f .ok {
  position: absolute; right: var(--s2); top: 50%; translate: 0 -50%;
  width: 16px; height: 16px; stroke: var(--accent); stroke-width: 2.4; fill: none;
}
.f .ok path { stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset var(--t-state) var(--e-state) 60ms; }
.f.ok .ok path { stroke-dashoffset: 0; }
.err { font-size: 13px; color: var(--coral); margin-top: var(--s1); }
.err:empty { display: none; }
/* spam trap: off screen, out of the tab order, hidden from assistive tech */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* 404: the legal hero, stretched to fill the first viewport */
.nf { min-height: 70svh; display: flex; align-items: center; }
.nf .t-h2 { margin-top: var(--s3); }
.nf-lead { margin-top: var(--s3); max-width: 46ch; color: var(--on-dark-70); font-size: var(--fs-lead); }
.nf .act { margin-top: var(--s6); }
.nf-langs { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s3); font-size: var(--fs-sm); }
/* Turnstile renders nothing unless Cloudflare needs an interaction */
.ts { margin-top: var(--s2); }
.ts:empty { display: none; }

/* slot picker: a two step calendar — pick the day, then the time */
.cal-days { display: flex; flex-wrap: wrap; gap: var(--s-nib); margin-bottom: var(--s3); }
.cal-day {
  min-height: var(--s6); padding: var(--s-half) var(--s2);
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
  background: transparent; color: var(--on-dark-70);
  border: 1px solid var(--hair-dark); border-radius: var(--r-pill);
  transition: background var(--t-micro) var(--e-state), color var(--t-micro) var(--e-state), border-color var(--t-micro) var(--e-state);
}
.cal-day:hover { border-color: rgba(0,229,160,.55); color: var(--paper); }
.cal-day[aria-pressed="true"] { background: var(--paper); border-color: var(--paper); color: var(--forest); }
.cal-times { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-nib); }
.slots { display: block; }
.slot { position: relative; }
.slot input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.slot span {
  display: grid; place-items: center; min-height: var(--s6); padding: var(--s-half); font-size: 14px; font-weight: 600;
  background: rgba(10,33,31,.36); border: 1px solid var(--hair-dark); border-radius: var(--r-field);
  font-variant-numeric: tabular-nums;
  transition: background var(--t-micro) var(--e-state), border-color var(--t-micro) var(--e-state), color var(--t-micro) var(--e-state);
}
.slot span b { display: block; font-weight: 700; }
.slot input:hover + span { border-color: rgba(0,229,160,.55); }
.slot input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--forest); }
.slot input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: var(--s-hair); }
.cal-note { font-size: 13px; color: var(--on-dark-55); margin-top: var(--s3); }

.consent { display: grid; grid-template-columns: auto 1fr; gap: var(--s-half); }
.consent input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }
.consent label { font-size: 13.5px; color: var(--on-dark-70); line-height: 1.5; }
.consent a { color: var(--accent); }

.q-nav { display: flex; flex-wrap: wrap; gap: var(--s-half); margin-top: var(--s5); }
.q-back { background: transparent; border: 0; cursor: pointer; color: var(--on-dark-55); font-size: var(--fs-sm); padding: var(--s-half) 0; text-decoration: underline; }

/* risk reversal sits beside the submit control, never above the form */
.risk { display: flex; flex-wrap: wrap; gap: var(--s-nib) var(--s3); margin-top: var(--s3); font-size: 13px; color: var(--on-dark-55); }
.risk span { display: inline-flex; align-items: baseline; gap: var(--s-nib); }
.risk svg { width: 12px; height: 12px; stroke: var(--accent); stroke-width: 2.6; fill: none; align-self: center; }

.sent { display: none; }
.card.done .form-body { display: none; }
.card.done .sent { display: block; }
.sent ol { margin-top: var(--s5); }
.sent li { display: grid; grid-template-columns: 96px 1fr; gap: var(--s3); padding-block: var(--s3); border-top: 1px solid var(--hair-dark); align-items: baseline; }
.sent li b { font-size: var(--fs-cap); letter-spacing: var(--tr-cap); text-transform: uppercase; color: var(--accent); font-variant-numeric: tabular-nums; }
.sent li span { font-size: var(--fs-sm); color: var(--on-dark-70); }


/* ---------------------------------------------------------------- footer - */
/* Two registers: an oversized final CTA band, then one slim utility row. */
.ftr { background: var(--forest); color: var(--paper); padding-bottom: var(--s5); }
.ftr .dim { color: var(--on-dark-70); }
.ftr-cta {
  position: relative; overflow: clip; isolation: isolate;
  padding-block: var(--s9) var(--s8); text-align: center;
  border-bottom: 1px solid var(--hair-dark);
}
/* two-layer mesh: the base radial field, plus a slow drifting layer. Both
   are transforms on a pseudo-element, 28s, frozen for reduce and low power. */
.ftr-cta::before {
  content: ""; position: absolute; inset: -42%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 30% at 32% 38%, rgba(0,229,160,.13), transparent 68%),
    radial-gradient(44% 36% at 68% 62%, rgba(42,78,69,.85), transparent 72%);
  animation: meshDrift 28s var(--e-scrub) infinite alternate;
}
.ftr-cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); opacity: .05;
}
@keyframes meshDrift {
  from { transform: translate3d(-3.5%, -2%, 0) rotate(0deg); }
  to   { transform: translate3d(3.5%, 2%, 0) rotate(5deg); }
}
.low-power .ftr-cta::before { animation: none; }
.ftr-head { margin-inline: auto; max-width: 16ch; }
.ftr-cta .act { display: grid; justify-items: center; gap: 0; }
/* the band is forest but not .s-dark, so the muted alias is re-pointed */
.ftr-cta .sub { max-width: none; color: var(--on-dark-55); }
.ftr-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s3) var(--s5); padding-top: var(--s6);
}
.ftr-nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); font-size: var(--fs-sm); }
.ftr-nav a { color: var(--on-dark-70); text-decoration: none; transition: color var(--t-micro) var(--e-state); }
.ftr-nav a:hover { color: var(--accent); }
.ftr-btm { display: flex; flex-wrap: wrap; gap: var(--s-half) var(--s5); justify-content: space-between; align-items: baseline; margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--hair-dark); font-size: 13px; color: var(--on-dark-55); }


/* ---------------------------------------------------------- legal pages -- */
/* Calm reading pages on the same system: dark hero-lite band, a 72ch
   reading column, a sticky scroll-spy contents rail on desktop that
   collapses to a chip row on smaller screens. */
.legal-hero { padding-block: calc(var(--sect) * .66) var(--s7); }
.legal-hero h1 { margin-top: var(--s3); }
.legal-updated { font-size: var(--fs-sm); color: var(--on-dark-55); margin-top: var(--s4); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.legal-grid { display: grid; grid-template-columns: minmax(0, 72ch) 1fr; gap: var(--s8); align-items: start; }
.toc { position: sticky; top: calc(var(--hdr-h) + var(--s4)); display: grid; gap: var(--s-hair); font-size: var(--fs-sm); }
.toc a {
  color: var(--on-light-55); text-decoration: none;
  padding: var(--s1) 0 var(--s1) var(--s2); border-left: 2px solid var(--hair-light);
  transition: color var(--t-micro) var(--e-state), border-color var(--t-micro) var(--e-state);
}
.toc a:hover { color: var(--forest); }
.toc a[aria-current="true"] { color: var(--accent-deep); border-left-color: var(--accent-deep); }
/* the discreet template notice — visible, never shouting */
.legal-note {
  display: flex; align-items: baseline; gap: var(--s-half);
  padding: var(--s2) var(--s3); margin-bottom: var(--s6);
  border: 1px solid var(--hair-light); border-radius: var(--r-chip);
  background: var(--sage-2); font-size: 13px; color: var(--on-light-70);
}
.legal-note::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); align-self: center; }
.legal-doc h2 {
  display: flex; align-items: baseline; gap: var(--s2);
  font-size: var(--fs-h3); letter-spacing: var(--tr-h3);
  margin: var(--s7) 0 var(--s3); scroll-margin-top: calc(var(--hdr-h) + var(--s3));
}
.legal-doc h2::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-deep); align-self: center; }
.legal-doc h2:first-of-type { margin-top: 0; }
.legal-doc p { color: var(--on-light-70); margin-bottom: var(--s3); }
.legal-doc strong { color: var(--forest); font-weight: 600; }
.legal-doc ul { list-style: disc; padding-left: 1.1em; margin-bottom: var(--s3); display: grid; gap: var(--s1); color: var(--on-light-70); }
.legal-doc blockquote {
  border-left: 2px solid var(--accent-deep); background: var(--sage-2);
  padding: var(--s3); border-radius: var(--r-chip); margin-block: var(--s4);
  color: var(--on-light-70); font-size: var(--fs-sm);
}
.legal-co { font-style: normal; }
.backtop { margin-top: var(--s7); }
@media (max-width: 1024px) {
  .legal-grid { grid-template-columns: 1fr; gap: var(--s5); }
  /* the rail becomes a chip row above the document */
  .toc { position: static; display: flex; flex-wrap: wrap; gap: var(--s-nib); order: -1; }
  .toc a { border: 1px solid var(--hair-light); border-radius: var(--r-pill); padding: var(--s1) var(--s2); }
  .toc a[aria-current="true"] { border-color: var(--accent-deep); }
}

/* ------------------------------------------------------- sticky + cookie - */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none;
  /* centred: a fixed height bar of single line items */
  align-items: center; justify-content: space-between; gap: var(--s-half);
  padding: var(--s-half) var(--s2) calc(var(--s-half) + env(safe-area-inset-bottom));
  background: rgba(10,33,31,.96);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--hair-dark);
  transform: translateY(110%); transition: transform var(--t-state) var(--e-state);
}
.sticky.on { transform: none; }
.sticky b { display: block; color: var(--paper); font-size: 14px; }
.sticky span { font-size: 12px; color: var(--on-dark-55); }

.cookie {
  position: fixed; left: var(--s2); bottom: var(--s2); z-index: 70; max-width: 520px; display: none;
  background: var(--paper); color: var(--forest);
  border-radius: var(--r-media); padding: var(--s4); box-shadow: var(--el-5);
}
.cookie.on { display: block; }
.cookie p { font-size: 13.5px; color: var(--on-light-70); margin-top: var(--s-half); }
.cookie div { display: flex; flex-wrap: wrap; gap: var(--s-half); margin-top: var(--s4); }
.cookie .btn { flex: 1 1 140px; }


/* ------------------------------------------------------------- lightbox -- */
/* One shared player for every video on the page. Custom minimal controls:
   a centre play toggle that sleeps during playback, a thin accent seek bar,
   a mute toggle and a 48px close. Sound is on because opening it was the
   user's explicit ask. */
.lb {
  /* the dialog centres itself: inset 0 + margin auto, its box grown from
     the video below — never from viewport guesses */
  inset: 0; margin: auto; border: 0; padding: 0; background: transparent;
  width: fit-content; height: fit-content; max-width: none; max-height: none;
  overflow: visible;
  opacity: 0; transform: scale(.96);
  transition: opacity var(--t-state) var(--e-state), transform var(--t-state) var(--e-state),
              overlay var(--t-state) allow-discrete, display var(--t-state) allow-discrete;
}
.lb[open] { opacity: 1; transform: none; }
@starting-style { .lb[open] { opacity: 0; transform: scale(.96); } }
.lb::backdrop {
  background: rgba(5, 6, 10, .9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: opacity var(--t-state) var(--e-state),
              overlay var(--t-state) allow-discrete, display var(--t-state) allow-discrete;
  opacity: 0;
}
.lb[open]::backdrop { opacity: 1; }
@starting-style { .lb[open]::backdrop { opacity: 0; } }
.lb-stage { position: relative; }
.lb video {
  /* the box IS the clip's ratio: --ar is seeded from the opening tile and
     corrected from metadata, so a 9:16 reel stands and a 16:9 asset lies
     wide, centred both axes from the first frame — no letterbox, no snap */
  display: block;
  aspect-ratio: var(--ar, 0.5625);
  width: min(92vw, calc((78dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * var(--ar, 0.5625)));
  height: auto; object-fit: cover;
  border-radius: var(--r-media); background: var(--panel-2); cursor: pointer;
}
/* centred: a circular control, geometric centre is the optical centre */
.lb-play {
  position: absolute; inset: 0; margin: auto;
  width: 72px; height: 72px; display: grid; place-items: center;
  background: rgba(10, 33, 31, .62); color: var(--paper);
  border: 1px solid var(--hair-dark); border-radius: var(--r-pill); cursor: pointer;
  transition: opacity var(--t-state) var(--e-state), background var(--t-micro) var(--e-state);
}
.lb-play:hover { background: rgba(10, 33, 31, .82); }
.lb-play .i-pause, .lb.playing .lb-play .i-play { display: none; }
.lb.playing .lb-play .i-pause { display: block; }
/* while playing the control sleeps; pointer or touch wakes it (.ctl) */
.lb.playing:not(.ctl) .lb-play { opacity: 0; }
.lb-stage:hover .lb-play, .lb-play:focus-visible { opacity: 1; }
/* the control bar hangs below the media box without joining it, so the
   video itself is what centres in the viewport */
.lb-bar { position: absolute; top: calc(100% + var(--s2)); left: 0; right: 0; display: flex; align-items: center; gap: var(--s2); }
.lb-prog { flex: 1; position: relative; height: var(--s3); display: grid; align-items: center; cursor: pointer; touch-action: none; }
.lb-prog::before { content: ""; height: 3px; width: 100%; border-radius: var(--s-hair); background: rgba(247, 249, 242, .22); }
#lbFill {
  position: absolute; left: 0; top: 50%; translate: 0 -50%; height: 3px; width: 100%;
  border-radius: var(--s-hair); background: var(--accent);
  transform: scaleX(0); transform-origin: left;
}
.lb-mute, .lb-x {
  display: grid; place-items: center;
  background: rgba(247,249,242,.12); color: var(--paper);
  border: 1px solid var(--hair-dark); border-radius: var(--r-pill); cursor: pointer;
  transition: background var(--t-micro) var(--e-state);
}
.lb-mute { width: var(--s6); height: var(--s6); }
.lb-mute .i-mut, .lb.muted .lb-mute .i-snd { display: none; }
.lb.muted .lb-mute .i-mut { display: block; }
/* close lives inside the visible video bounds, top-right, safe-area aware */
.lb-x {
  position: absolute; z-index: 1;
  right: calc(var(--s2) + env(safe-area-inset-right));
  top: calc(var(--s2) + env(safe-area-inset-top));
  width: var(--s6); height: var(--s6);
  background: rgba(10, 33, 31, .55);
}
.lb-mute:hover, .lb-x:hover { background: rgba(247,249,242,.24); }
/* short viewports (landscape phones): shrink the media cap so the control
   bar below it stays on screen */
@media (max-height: 500px) {
  .lb video { width: min(92vw, calc(64dvh * var(--ar, 0.5625))); }
}


/* ------------------------------------------------------ contextual cursor */
.cur {
  position: fixed; top: 0; left: 0; z-index: 80; pointer-events: none;
  /* centred: a circular badge, the only case where geometric centre is the
     optical centre by definition */
  display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%;
  background: var(--accent); color: var(--forest);
  font-size: 11px; font-weight: 700; letter-spacing: var(--tr-cap); text-transform: uppercase;
  opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.4);
  transition: opacity var(--t-micro) var(--e-state), transform var(--t-state) var(--e-touch);
}
.cur.on { opacity: 1; }
@media (hover: none) { .cur { display: none; } .tile { cursor: pointer; } }


/* ----------------------------------------------------------------- motion */
/* compositor layers are held only until the entrance lands; afterwards the
   element is static and the layer is released */
.js [data-anim]:not(.in) { will-change: transform, opacity, clip-path; }

/* headline: line by line behind a clip mask, never an opacity fade */
.js [data-anim="line"] > span { display: block; overflow: hidden; }
.js [data-anim="line"] > span > span { display: block; transform: translateY(105%); transition: transform var(--t-enter) var(--e-enter); transition-delay: var(--d, 0ms); }
.in[data-anim="line"] > span > span { transform: none; }

/* cards: y offset plus scale from 0.97 */
.js [data-anim="rise"] { opacity: 0; transform: translateY(22px) scale(.976); transition: opacity var(--t-enter) var(--e-enter), transform var(--t-enter) var(--e-enter); transition-delay: var(--d, 0ms); }
.in[data-anim="rise"] { opacity: 1; transform: none; }

/* copy: short travel, no scale */
.js [data-anim="soft"] { opacity: 0; transform: translateY(12px); transition: opacity var(--t-state) var(--e-enter), transform var(--t-state) var(--e-enter); transition-delay: var(--d, 0ms); }
.in[data-anim="soft"] { opacity: 1; transform: none; }

/* rules draw from one edge */
.js [data-anim="draw"] { transform: scaleX(0); transform-origin: left; transition: transform var(--t-enter) var(--e-enter); transition-delay: var(--d, 0ms); }
.in[data-anim="draw"] { transform: none; }

/* the pricing plate: cinematic, late, slow */
.js [data-anim="plate"] { opacity: 0; transform: translateY(56px) scale(.985); transition: opacity var(--t-cine) var(--e-enter), transform var(--t-cine) var(--e-enter); transition-delay: var(--d, 0ms); }
.in[data-anim="plate"] { opacity: 1; transform: none; }

/* material transition between paper and forest */
.wipe::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: var(--wipe-from, var(--forest));
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--t-cine) var(--e-enter);
}
.js .wipe:not(.in)::before { clip-path: inset(0 0 0 0); }

/* --- declarative scroll linked motion ------------------------------------
   Where the browser supports scroll driven animations the hero scrub, the
   depth layers and the wipes run off the compositor with no JS at all. The
   rAF path in main.js checks the same condition and stands down. */
@supports (animation-timeline: view()) {
  .hero-type {
    animation: heroType linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 100vh;
  }
  .hero-bg video, .hero-bg img {
    animation: heroPush linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 100vh;
  }
  .hero-veil {
    animation: heroVeil linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 100vh;
  }
  .hero-side {
    animation: heroSide linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 100vh;
  }
  [data-depth] {
    animation: depth linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  .wall-rail {
    animation: railDrift linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
}
/* letter-spacing is a layout property and cannot ride the compositor; the
   scale already carries the visual tightening, so the scrub stays cheap */
@keyframes heroType { to { transform: scale(.88) translateY(-40px); } }
@keyframes heroPush { to { transform: scale(1.28); } }
@keyframes heroVeil { to { opacity: .45; } }
@keyframes heroSide { to { transform: translateY(-84px); } }
@keyframes depth { from { transform: translateY(calc(var(--k, 6) * 1%)); } to { transform: translateY(calc(var(--k, 6) * -1%)); } }
@keyframes railDrift { from { transform: translateX(0); } to { transform: translateX(-38%); } }


/* ------------------------------------------------------------- responsive */
/* Ladder derived from the 1200px shell plus gutters:
   1440 wide · 1280 desk · 1024 lap · 768 tab · 480 phone */

@media (max-width: 1280px) {
  .hero-grid { gap: var(--s6); }
  .pin-grid, .loc-grid, .cap-grid, .fdr-grid, .form-grid { gap: var(--s6); }
}

@media (max-width: 1024px) {
  /* the header row cannot hold nav, switcher and CTA together below this;
     the sticky bar carries the CTA from here down */
  .hdr-r .btn { display: none; }
  .sticky { display: flex; }
  .hero-grid, .work-top, .pin-grid, .cap-grid, .loc-grid, .fdr-grid, .form-grid, .plate { grid-template-columns: 1fr; }
  .hero { padding-block: var(--s8) var(--s7); }
  .plate { margin-top: calc(var(--s8) * -1); }
  .price-sec { padding-top: var(--s9); }
  /* founders: keep the desktop reverse split, lead with the headline here */
  .fdr-grid > :nth-child(1) { order: 2; }
  .fdr-grid > :nth-child(2) { order: 1; }
  .tl-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .nav { display: none; }
  .burger { display: flex; }
  .hero-bg video, .hero-bg img { animation: none; transform: none; }
  .hero-veil { animation: none; }
  .hero-type, .hero-side { animation: none; transform: none; letter-spacing: var(--tr-hero); }
}

/* 390 by 844 designed as its own layout, not a collapsed desktop */
@media (max-width: 480px) {
  :root { --gut: var(--s2); --sect: var(--s8); --fs-hero: clamp(34px, 10.4vw, 46px); --ann-h: 32px; }
  .ann-off { --ann-h: 0px; }
  /* .btn never wraps (the fill clip), so on narrow screens the large pill
     must shrink instead of inflating its column past the viewport */
  .btn-lg { min-height: var(--s7); padding: var(--s2) var(--s3); font-size: 16px; }
  .plate > div { min-width: 0; }
  /* last-resort: inside the plate a label longer than the column wraps to
     two centred lines instead of pushing the layout wide */
  .plate .btn { white-space: normal; text-align: center; }
  .hero { padding-block: var(--s7) var(--s8); }
  .hero-grid { gap: var(--s6); }
  .hero h1 { margin-bottom: var(--s4); }
  .hero .lead { font-size: 17px; max-width: none; }
  .hero-act { margin-top: var(--s4); }
  .hero-act .btn { width: 100%; }
  .hero-facts { gap: var(--s2); }
  .hero-facts b { font-size: 22px; }
  .slotgrid { grid-template-columns: repeat(2, 1fr); }
  .scell { aspect-ratio: 4 / 3; }
  .fdr-cards { grid-template-columns: 1fr; }
  /* one tidy column; the CTA band above stays thumb-first */
  .ftr-row { flex-direction: column; align-items: flex-start; gap: var(--s4); }
  .ftr-cta { padding-bottom: calc(var(--s8) + env(safe-area-inset-bottom)); }
  .ftr-cta .act .btn { width: 100%; }
  .cmp-new { font-size: clamp(38px, 13vw, 56px); }
  .sent li { grid-template-columns: 1fr; gap: var(--s-tick); }
  .cal-times { grid-template-columns: repeat(2, 1fr); }
  .cookie { left: var(--s-half); right: var(--s-half); bottom: var(--s-half); }
  /* one line of chrome, not two: the reason-clause is a desktop luxury */
  .announce span { display: none; }
}

@media (max-width: 360px) {
  /* the bar's label and button say the same thing; below 360 the label
     wraps into noise, so the button carries it alone */
  .sticky p { display: none; }
  .sticky { justify-content: center; }
}


/* ------------------------------------------------------------- low power - */
/* Set by main.js on weak hardware (deviceMemory < 4 or <= 4 cores). The page
   must still look finished: posters and layout stay, continuous motion goes. */
/* the wall rail stays live in the low tier: it is a compositor-only scrub
   that moves nothing unless the user scrolls (C4 touch parity) */
.low-power .hero-bg video, .low-power [data-depth] { animation: none !important; }
.low-power .wall-item:nth-child(n+9) { display: none; }

/* deferred render for below-fold sections; sizes match real heights closely
   enough that the scrollbar does not jump. The wall (#wall) stays live so its
   scrub never pops in, and the hero and capacity carry the first paint. */
#how, #founders, #faq { content-visibility: auto; contain-intrinsic-size: auto 760px; }
#work { content-visibility: auto; contain-intrinsic-size: auto 2400px; }
#languages, #pricing, #compare { content-visibility: auto; contain-intrinsic-size: auto 1100px; }
#sample { content-visibility: auto; contain-intrinsic-size: auto 1700px; }


/* -------------------------------------------------------- reduced motion - */
/* Every content end state is preserved. Nothing is ever left hidden. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
  .js [data-anim] { opacity: 1 !important; transform: none !important; }
  .js [data-anim="line"] > span > span { transform: none !important; }
  .wipe::before { display: none; }
  .hero-type, .hero-side, .hero-bg video, .hero-bg img, .wall-rail, [data-depth] { animation: none !important; transform: none !important; }
  .hero-veil { animation: none !important; opacity: 1 !important; }
  .tl-line { animation: none !important; transform: none !important; }
  .tl-dot { transform: none !important; }
  .cur { display: none; }
  .cue i { animation: none; transform: scaleX(1); }
  .seq .q { display: block; }
}

@media print {
  .hdr, .sticky, .cookie, .drawer, .cur, .hero-bg, .wall-sec { display: none !important; }
}