/* =============================================================================
   WHITELY — Digital systems, beautifully built.
   Design system. Bone ground, near-black ink, one ember accent.
   Editorial grid: 12 columns, wide margins, deliberate breaks.
   ========================================================================== */

/* ---------- tokens ------------------------------------------------------- */
:root{
  /* ground + ink */
  --bone:        #F5F5F0;
  --bone-2:      #EFEEE7;
  --bone-3:      #E7E5DC;
  --ink:         #0A0A0A;
  --ink-2:       #111111;
  --ink-60:      rgba(10,10,10,.60);
  --ink-42:      rgba(10,10,10,.42);
  --ink-28:      rgba(10,10,10,.28);
  --rule:        rgba(10,10,10,.14);
  --rule-soft:   rgba(10,10,10,.07);

  /* the single accent, used selectively */
  --ember:       #E8674A;
  --ember-ink:   #C2452A;
  --ember-wash:  rgba(232,103,74,.10);

  /* success / failure, in two grounds. The dark pair is not decoration:
     #1B7F52 on #0A0A0A is 2.2:1, which is a message nobody can read. */
  --ok:            #1B7F52;
  --bad:           #C0392B;
  --ok-on-dark:    #6FD3A0;
  --bad-on-dark:   #FF9182;

  /* on dark bands */
  --on-dark:     #F5F5F0;
  --on-dark-72:  rgba(245,245,240,.72);
  --on-dark-60:  rgba(245,245,240,.60);
  --on-dark-38:  rgba(245,245,240,.38);
  --rule-dark:   rgba(245,245,240,.16);

  /* type */
  --f-display: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --f-text:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "Roboto Mono", ui-monospace, "SF Mono", monospace;  /* greek-capable */

  /* scale — one ratio, held everywhere */
  --t-mega:  clamp(2.3rem, 10.6vw, 12.5rem);  /* sized for the greek, not the english */
  --t-h1:    clamp(2rem, 6.6vw, 6.6rem);
  --t-h2:    clamp(2rem, 4.6vw, 4rem);
  --t-h3:    clamp(1.3rem, 2vw, 1.85rem);
  --t-lead:  clamp(1rem, 1.25vw, 1.2rem);
  --t-body:  1rem;
  --t-small: .875rem;
  --t-micro: .6875rem;

  /* editorial grid */
  --gutter:  clamp(1.25rem, 5vw, 5.5rem);
  --measure: 1560px;
  --col-gap: clamp(1rem, 2.2vw, 2rem);

  --ease:      cubic-bezier(.22,.61,.24,1);
  --ease-out:  cubic-bezier(.16,.84,.28,1);
}

/* the page commits to one look. no dual theme — this is an art-directed site,
   and a bone/black editorial identity does not survive being inverted. */
@media (prefers-color-scheme: dark){ :root{ color-scheme: light; } }

/* ---------- reset -------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; overflow-x:hidden; overflow-x:clip; }
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--f-text);
  font-size:var(--t-body);
  line-height:1.55;
  font-weight:400;
  overflow-x:hidden; overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
}
img,canvas,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-family:var(--f-display); font-weight:500; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--ink); color:var(--bone); }
:focus-visible{ outline:2px solid var(--ember); outline-offset:4px; }

/* ---------- primitives --------------------------------------------------- */
.shell{ width:100%; max-width:var(--measure); margin-inline:auto; padding-inline:var(--gutter); }
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--col-gap); }

.label{
  font-family:var(--f-mono);
  font-size:var(--t-micro);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-42);
  font-weight:400;
}
.label--ember{ color:var(--ember-ink); }
.label--dark{ color:var(--on-dark-38); }

/* the rotated spine label the reference runs down its left edge */
.spine{
  position:absolute; left:calc(var(--gutter) * .34); top:0;
  writing-mode:vertical-rl;
  font-family:var(--f-mono); font-size:var(--t-micro);
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-28); white-space:nowrap; pointer-events:none;
}
@media (max-width:1100px){ .spine{ display:none; } }

.lead{ font-size:var(--t-lead); color:var(--ink-60); max-width:34ch; line-height:1.5; }

.rule{ height:1px; background:var(--rule); border:0; margin:0; }

/* numerals line up in every table and metric on the page */
.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* ---------- buttons ------------------------------------------------------ */
.btn{
  --btn-fg:var(--bone); --btn-bg:var(--ink);
  position:relative; display:inline-flex; align-items:center; gap:.7em;
  height:3.25rem; padding:0 1.6rem;
  background:var(--btn-bg); color:var(--btn-fg);
  font-family:var(--f-text); font-size:.9375rem; font-weight:500; letter-spacing:-.01em;
  border-radius:2px;
  transition:background .4s var(--ease), color .4s var(--ease), transform .5s var(--ease);
  will-change:transform;
}
.btn:hover{ --btn-bg:var(--ember); }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--ink); box-shadow:inset 0 0 0 1px var(--rule); }
.btn--ghost:hover{ --btn-bg:var(--ink); --btn-fg:var(--bone); box-shadow:inset 0 0 0 1px var(--ink); }
.btn--on-dark{ --btn-bg:var(--bone); --btn-fg:var(--ink); }
.btn--on-dark:hover{ --btn-bg:var(--ember); --btn-fg:var(--bone); }
.btn__arrow{ transition:transform .45s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(.28em); }

/* ---------- navigation --------------------------------------------------- */
.nav{
  position:fixed; inset:0 0 auto; z-index:80;
  display:flex; align-items:center; gap:var(--col-gap);
  padding:1.5rem var(--gutter);
  mix-blend-mode:difference;                 /* reads on bone and on the dark bands */
  color:#F5F5F0;
  transition:padding .55s var(--ease);
}
.nav--tight{ padding-block:.85rem; }
.nav__brand{
  font-family:var(--f-display); font-size:1.0625rem; font-weight:600;
  letter-spacing:-.02em; text-transform:uppercase;
  margin-right:auto;
}
.nav__links{ display:flex; gap:1.9rem; }
.nav__links a{
  font-size:.8125rem; letter-spacing:.02em; position:relative; padding-block:.2rem;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__end{ display:flex; align-items:center; gap:1.1rem; }
.nav__lang{
  font-family:var(--f-mono); font-size:var(--t-micro); letter-spacing:.12em;
  display:inline-flex; gap:.35rem;
}
.nav__lang b{ font-weight:400; }
.nav__lang i{ font-style:normal; opacity:.4; }
.nav__cta{ font-size:.8125rem; display:inline-flex; align-items:center; gap:.5rem; }
.nav__cta .btn__arrow{ display:inline-block; transition:transform .45s var(--ease); }
.nav__cta:hover .btn__arrow{ transform:translateX(.28em); }
@media (max-width:860px){ .nav__links{ display:none; } }

/* ---------- hero --------------------------------------------------------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-block:9rem 3rem; overflow:hidden;
}
@media (max-width:640px){
  .hero{ min-height:auto; padding-block:7.5rem 3.5rem; }
  .hero__title{ margin-left:-.03em; }
}
/* the Core sits behind the type and is allowed to be cropped by the viewport */
.hero__stage{ position:absolute; inset:0; z-index:0; }
.hero__stage canvas{ width:100%; height:100%; }
.hero__inner{ position:relative; z-index:2; }

.hero__eyebrow{ display:flex; align-items:center; gap:.7rem; margin-bottom:2.2rem; }
.hero__eyebrow .label{ color:var(--ink-60); }   /* sits over the object, needs the weight */
.hero__dot{ width:6px; height:6px; border-radius:50%; background:var(--ember); flex:none; }

/* oversized, tight, and deliberately wider than the text column */
.hero__title{
  font-size:var(--t-mega);
  line-height:.85;
  letter-spacing:-.055em;
  font-weight:500;
  text-transform:uppercase;
  margin-left:-.06em;                        /* optical: pull the cap off the margin */
}
.hero__title .ln{ display:block; }
.hero__title .ln--push{ padding-left:.34em; }   /* the intentional grid break */
.hero__title em{ font-style:normal; color:var(--ember); }

.hero__foot{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--col-gap);
  align-items:end; margin-top:clamp(2rem,4vw,3.4rem);
}
.hero__actions{ display:flex; gap:.75rem; flex-wrap:wrap; }
.hero__meta{ display:flex; gap:2.4rem; text-align:right; }
.hero__meta div b{ display:block; font-family:var(--f-display); font-size:1.5rem; font-weight:500; letter-spacing:-.03em; }
@media (max-width:820px){
  .hero__foot{ grid-template-columns:1fr; }
  .hero__meta{ text-align:left; }
}

/* ---------- marquee ------------------------------------------------------ */
.marquee{
  border-block:1px solid var(--rule);
  overflow:hidden; padding-block:1rem; background:var(--bone);
}
.marquee__track{ display:flex; width:max-content; animation:slide 44s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track span{
  font-family:var(--f-mono); font-size:var(--t-micro);
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-42);
  padding-inline:1.6rem; display:flex; align-items:center; gap:1.6rem; white-space:nowrap;
}
.marquee__track span::after{ content:"•"; color:var(--ember); }
@keyframes slide{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }

/* ---------- section chrome ---------------------------------------------- */
/* anchored jumps must clear the fixed nav */
section[id], header[id]{ scroll-margin-top:5.5rem; }
/* Section rhythm. The generous band of air above each heading is the whole
   editorial look, and it scales with viewport WIDTH — which breaks on a window
   that is wide but not tall. A 1920x420 browser got the full 160px of padding
   with almost no room left to show anything, so scrolling to a section landed
   on a blank white band.

   min(11vw, 18vh) caps the air against the height that is actually available.
   Deliberately gentle: at 1920x1080 and 1440x900 it changes nothing at all,
   and the 5.5rem floor keeps mobile as it was. Only short windows move. */
.section{ position:relative; padding-block:clamp(5.5rem, min(11vw, 18vh), 10rem); }
.section--dark{ background:var(--ink); color:var(--on-dark); }

/* Three blocks sit on the near-black ground, and only one of them is
   .section--dark: .system and .close paint their own background. Anything
   written as ".section--dark X" silently skipped those two, which is how the
   System lead paragraph ended up as near-black text on a near-black band at a
   contrast ratio of 1.0 — present, styled, invisible.
   Add a new dark block to this list, not to a single rule below. */
.section--dark .label,.system .label,.close .label{ color:var(--on-dark-38); }
.section--dark .lead,.system .lead,.close .lead{ color:var(--on-dark-60); }
.section--dark .rule,.system .rule,.close .rule{ background:var(--rule-dark); }
.section__head{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--col-gap); align-items:end; margin-bottom:clamp(2.5rem,5vw,4.5rem); }
.section__head h2{ grid-column:1 / span 7; font-size:var(--t-h2); line-height:.98; letter-spacing:-.04em; }
.section__head .lead{ grid-column:9 / span 4; }
@media (max-width:900px){
  .section__head h2{ grid-column:1 / -1; }
  .section__head .lead{ grid-column:1 / -1; }
}

/* ---------- services ----------------------------------------------------- */
.svc{ border-top:1px solid var(--rule); }
.svc__row{
  display:grid; grid-template-columns:5.5rem minmax(0,3fr) minmax(0,4fr) auto;
  gap:var(--col-gap); align-items:baseline;
  padding-block:clamp(1.8rem,3.4vw,2.9rem);
  border-bottom:1px solid var(--rule);
  position:relative; cursor:default;
  transition:padding-left .6s var(--ease);
}
.svc__row::before{
  content:""; position:absolute; inset:0 calc(var(--gutter) * -1); z-index:-1;
  background:var(--ember-wash); opacity:0; transition:opacity .5s var(--ease);
}
.svc__row:hover{ padding-left:1.1rem; }
.svc__row:hover::before{ opacity:1; }
.svc__n{ font-family:var(--f-mono); font-size:var(--t-micro); letter-spacing:.16em; color:var(--ink-28); }
.svc__row:hover .svc__n{ color:var(--ember); }
.svc__name{
  font-family:var(--f-display); font-size:var(--t-h3);
  font-weight:500; letter-spacing:-.035em; text-transform:uppercase;
}
.svc__copy{ color:var(--ink-60); font-size:.9375rem; max-width:46ch; }
.svc__go{ font-family:var(--f-mono); font-size:var(--t-micro); color:var(--ink-28); transition:color .4s var(--ease),transform .5s var(--ease); }
.svc__row:hover .svc__go{ color:var(--ember); transform:translateX(.3rem); }
@media (max-width:900px){
  .svc__row{ grid-template-columns:3.2rem 1fr; row-gap:.7rem; }
  .svc__copy{ grid-column:2; }
  .svc__go{ display:none; }
}

/* ---------- the Whitely System (pinned, scroll-driven) ------------------- */
/* 3 viewports tall so the sticky pin has 2 viewports of scroll to
   delaminate across. without this the pin has zero runway. */
.system{ position:relative; min-height:300svh; background:var(--ink); color:var(--on-dark); }
.system__pin{ position:sticky; top:0; height:100svh; display:grid; grid-template-columns:1fr 1fr; align-items:center; overflow:hidden; }
.system__stage{ position:relative; height:100%; }
.system__stage canvas{ width:100%; height:100%; }
.system__side{ padding:var(--gutter); display:flex; flex-direction:column; justify-content:center; }
.system__side h2{ font-size:var(--t-h2); letter-spacing:-.04em; line-height:.98; margin-bottom:1.4rem; }
.system__layers{ margin-top:2.4rem; border-top:1px solid var(--rule-dark); }
.system__layer{
  display:grid; grid-template-columns:3.4rem 1fr; gap:1rem; align-items:baseline;
  padding-block:.95rem; border-bottom:1px solid var(--rule-dark);
  transition:opacity .5s var(--ease);
}
.js .system__layer{ opacity:.3; }
.system__layer.is-on{ opacity:1; }
.system__layer b{ font-family:var(--f-display); font-size:1.0625rem; font-weight:500; letter-spacing:-.02em; text-transform:uppercase; }
.system__layer span{ font-size:.8125rem; color:var(--on-dark-60); }
.system__layer i{ font-family:var(--f-mono); font-style:normal; font-size:var(--t-micro); color:var(--on-dark-38); letter-spacing:.14em; }
.system__layer.is-on i{ color:var(--ember); }
@media (max-width:960px){
  .system{ min-height:0; }
  .system__pin{ grid-template-columns:1fr; height:auto; position:static; }
  .system__stage{ height:56svh; }
}

/* ---------- work --------------------------------------------------------- */
.work__item{
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--col-gap);
  padding-block:clamp(2.2rem,4vw,3.4rem); border-top:1px solid var(--rule);
  align-items:start;
}
.work__meta{ grid-column:1 / span 3; display:flex; flex-direction:column; gap:.5rem; }
.work__body{ grid-column:4 / span 5; }
.work__body h3{ font-size:var(--t-h3); letter-spacing:-.035em; text-transform:uppercase; margin-bottom:.7rem; }
.work__body p{ color:var(--ink-60); font-size:.9375rem; max-width:44ch; }
.work__metrics{ grid-column:10 / span 3; display:flex; flex-direction:column; gap:1.1rem; }
.work__metric b{ display:block; font-family:var(--f-display); font-size:2rem; font-weight:500; letter-spacing:-.045em; line-height:1; }
/* an unfilled metric must never read as a real number */
.work__metric b[data-empty]{ color:var(--ink-28); }
@media (max-width:1000px){
  .work__meta{ grid-column:1 / -1; flex-direction:row; gap:1.2rem; }
  .work__body,.work__metrics{ grid-column:1 / -1; }
  .work__metrics{ flex-direction:row; gap:2.4rem; }
}

/* ---------- ai + search + social bands ---------------------------------- */
.band{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--col-gap); align-items:center; }
.band__type{ grid-column:1 / span 5; }
.band__type h2{ font-size:var(--t-h2); line-height:.98; letter-spacing:-.04em; margin-bottom:1.3rem; }
.band__vis{ grid-column:7 / span 6; }
.band--flip .band__type{ grid-column:8 / span 5; }

/* A headline whose line breaks ARE the argument — setup on the first two
   lines, answer on the last two — has to hold its line count. Sized against
   the viewport it wrapped into five ragged lines and lost the beat.

   So this variant sizes to its own column instead. 11cqw is calibrated: the
   longest line in either language is "WITH TECHNOLOGY." at 8.8 character
   widths, so the type can be at most 1/8.8 ≈ 11.3% of the column before it
   wraps. The min() keeps it from ever exceeding the normal h2 scale.

   Budget for whoever edits the copy: no line may exceed ~8.8 character
   widths. Past that it wraps — it will not overflow, but the rhythm goes. */
.band__type--fit{ container-type:inline-size; }
.band__type--fit h2{ font-size:min(var(--t-h2), 11cqw); }
.band--flip .band__vis{ grid-column:1 / span 6; }
@media (max-width:960px){
  .band__type,.band__vis,.band--flip .band__type,.band--flip .band__vis{ grid-column:1 / -1; }
  .band__vis{ margin-top:2rem; }
}

/* search cascade — pure type + rules, no chart chrome */
.cascade{ border-top:1px solid var(--rule); }
.cascade__step{
  /* the bar must sit in the flexible column — in an `auto` column an empty
     span collapses to zero width and the fill never shows */
  display:grid; grid-template-columns:2.6rem minmax(9ch,14ch) 1fr; gap:1.2rem; align-items:center;
  padding-block:.95rem; border-bottom:1px solid var(--rule);
}
.cascade__step i{ font-family:var(--f-mono); font-style:normal; font-size:var(--t-micro); color:var(--ink-28); letter-spacing:.16em; }
.cascade__step b{ font-family:var(--f-display); font-size:1.0625rem; font-weight:500; letter-spacing:-.02em; text-transform:uppercase; }
.cascade__bar{ height:1px; background:var(--rule); position:relative; }
.cascade__bar::after{
  content:""; position:absolute; inset:0; background:var(--ember);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s var(--ease-out) var(--delay,0s);
}
/* the chain draws itself once the section is reached */
#search.is-in .cascade__bar::after{ transform:scaleX(var(--fill,0)); }
.section--dark .cascade,.section--dark .cascade__step{ border-color:var(--rule-dark); }
.section--dark .cascade__bar{ background:var(--rule-dark); }

/* social / ai stream — hairline-separated rows, label over description */
.stream{ display:flex; flex-direction:column; gap:1px; background:var(--rule); border-block:1px solid var(--rule); }
.stream__row{ background:var(--bone); display:grid; grid-template-columns:3.2rem 1fr; gap:1.2rem; align-items:baseline; padding:1.05rem .2rem; }
.stream__row i{ font-family:var(--f-mono); font-style:normal; font-size:var(--t-micro); color:var(--ink-28); letter-spacing:.16em; }
.stream__row b{ display:block; font-family:var(--f-display); font-weight:500; letter-spacing:-.02em; text-transform:uppercase; font-size:1rem; margin-bottom:.15rem; }
.stream__row span{ display:block; font-size:.8125rem; color:var(--ink-60); }
/* the same component sitting on the dark band */
.section--dark .stream{ background:var(--rule-dark); border-color:var(--rule-dark); }
.section--dark .stream__row{ background:var(--ink); }
.section--dark .stream__row i{ color:var(--on-dark-38); }
.section--dark .stream__row span{ color:var(--on-dark-60); }

/* ---------- process ------------------------------------------------------ */
.process{ border-top:1px solid var(--rule); }
.process__step{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:var(--col-gap); align-items:start;
  padding-block:clamp(2rem,3.6vw,3rem); border-bottom:1px solid var(--rule);
}
.process__num{
  font-family:var(--f-display); font-size:clamp(3.4rem,8vw,7.5rem);
  font-weight:500; letter-spacing:-.06em; line-height:.8; color:var(--ink-28);
  transition:color .6s var(--ease);
}
.process__step:hover .process__num{ color:var(--ember); }
.process__step h3{ font-size:var(--t-h3); letter-spacing:-.035em; text-transform:uppercase; margin-bottom:.6rem; }
.process__step p{ color:var(--ink-60); font-size:.9375rem; max-width:48ch; }

/* ---------- about -------------------------------------------------------- */
.about__statement{
  grid-column:2 / span 9;
  font-family:var(--f-display); font-size:clamp(1.6rem,3.3vw,2.9rem);
  font-weight:500; line-height:1.12; letter-spacing:-.035em; text-wrap:balance;
}
.about__statement em{ font-style:normal; color:var(--ember); }
@media (max-width:900px){ .about__statement{ grid-column:1 / -1; } }

/* ---------- closing cta -------------------------------------------------- */
.close{ position:relative; background:var(--ink); color:var(--on-dark); overflow:hidden; min-height:92svh; display:flex; align-items:center; }
.close__stage{ position:absolute; inset:0; z-index:0; }
/* keeps the closing line readable where it crosses the object */
.close::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(52% 44% at 46% 50%, rgba(10,10,10,.92), rgba(10,10,10,.55) 60%, transparent 82%); }
.close__stage canvas{ width:100%; height:100%; }
.close__inner{ position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center; }
.close__title{
  font-size:var(--t-h1); line-height:.88; letter-spacing:-.05em;
  text-transform:uppercase; font-weight:500;
}
.close__title em{ font-style:normal; color:var(--ember); }

/* ---------- lead form ---------------------------------------------------- */
/* The form's small type is the one thing here that has to know its ground.
   It was hardcoded to --ink-42 — near-black at 42% — while the only place the
   form appears is the near-black closing band, so every field label rendered
   at a contrast ratio of 1.0: present in the DOM, invisible on screen.
   The colours are custom properties now, and .close overrides them, so the
   component survives being moved to the bone ground later. */
.lead{
  --lead-label: var(--ink-60);
  --lead-note:  var(--ink-42);
  width:min(560px,100%); margin-top:2.6rem; display:flex; flex-direction:column; gap:.9rem;
  text-align:left;
}
.close .lead,.system .lead,.section--dark .lead{
  --lead-label: var(--on-dark-72);
  --lead-note:  var(--on-dark-60);
}
.lead__row{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
@media (max-width:560px){ .lead__row{ grid-template-columns:1fr; } }
.lead__field{ display:flex; flex-direction:column; gap:.35rem; }
.lead__field span{
  font-family:var(--f-mono); font-size:var(--t-micro); letter-spacing:.14em;
  text-transform:uppercase; color:var(--lead-label);
}
.lead__field input,.lead__field textarea{
  width:100%; padding:.7rem .85rem; font:inherit; font-size:.95rem;
  color:var(--ink); background:var(--bone); border:1px solid var(--rule);
  border-radius:2px; transition:border-color .3s var(--ease);
}
.lead__field textarea{ resize:vertical; line-height:1.5; }
.lead__field input:focus,.lead__field textarea:focus{ outline:none; border-color:var(--ink); }
/* honeypot: off-screen rather than display:none, which some bots skip */
.lead__trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.lead .btn{ align-self:flex-start; margin-top:.3rem; }
.lead__status{ font-size:.9rem; min-height:1.2em; }
.lead__status[data-tone="good"]{ color:var(--ok); }
.lead__status[data-tone="bad"]{ color:var(--bad); }
.close .lead__status[data-tone="good"],.section--dark .lead__status[data-tone="good"]{ color:var(--ok-on-dark); }
.close .lead__status[data-tone="bad"],.section--dark .lead__status[data-tone="bad"]{ color:var(--bad-on-dark); }
.lead__small{
  font-family:var(--f-mono); font-size:var(--t-micro); letter-spacing:.1em;
  text-transform:uppercase; color:var(--lead-note);
}
.lead__small a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.lead__small a:hover{ color:var(--on-dark); }
/* the closing band centres its content; the form reads better left-aligned */
.close__inner:has(.lead){ align-items:flex-start; text-align:left; }

/* ---------- footer ------------------------------------------------------- */
.foot{ background:var(--ink); color:var(--on-dark); padding-block:3.5rem 2rem; border-top:1px solid var(--rule-dark); }
.foot__grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--col-gap); }
.foot__brand{ grid-column:1 / span 4; font-family:var(--f-display); font-size:1.0625rem; font-weight:600; letter-spacing:-.02em; text-transform:uppercase; }
.foot__col{ grid-column:span 2; display:flex; flex-direction:column; gap:.6rem; }
.foot__col a{ font-size:.8125rem; color:var(--on-dark-60); transition:color .35s var(--ease); }
.foot__col a:hover{ color:var(--on-dark); }
.foot__base{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:3rem; padding-top:1.2rem; border-top:1px solid var(--rule-dark); }
/* .label--dark is 3.3:1 on the ink ground — fine for a section eyebrow, which
   is decoration, but the footer uses the same class for the copyright line and
   the contact email. Those are information, so they get a readable weight.
   The eyebrows elsewhere are left as designed. */
.foot__base .label--dark{ color:var(--on-dark-60); }
@media (max-width:900px){
  .foot__brand{ grid-column:1 / -1; margin-bottom:1.4rem; }
  .foot__col{ grid-column:span 6; }
}

/* ---------- unfilled content slots -------------------------------------- */
/* deliberately visible: an empty slot must never be mistaken for a real claim */
.slot{
  font-family:var(--f-mono); font-size:.8em; letter-spacing:.04em;
  color:var(--ember-ink); background:var(--ember-wash);
  padding:.1em .45em; border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(232,103,74,.32);
  white-space:nowrap;
}
.section--dark .slot,.close .slot,.foot .slot{
  color:#F0A28C; background:rgba(232,103,74,.14); box-shadow:inset 0 0 0 1px rgba(232,103,74,.34);
}

/* ---------- reveals ------------------------------------------------------ */
/* one motion idea, used consistently: a masked rise. nothing bounces. */
/* must be a block box: overflow and transform are both ignored on an
   inline box, which silently disables the whole reveal */
.rise{ display:block; overflow:hidden; }
/* Reveal timing.

   These were 1.05s and .9s, with staggers up to 320ms written into the markup
   — so the last element in a group took 1.22s to finish arriving, and spent
   most of that transparent. Scrolling to a section showed a blank white band
   where the copy should be, which reads as a broken page rather than as a
   considered entrance.

   The durations are shorter now and the staggers are scaled from one place:
   --d stays as authored, and the multiplier below tunes the whole page's
   choreography at once. Raise --reveal-stagger back towards 1 for a slower,
   more deliberate cascade; the relative order never changes. */
:root{ --reveal-stagger:.55; }

.rise > *{ display:block; }
.js .rise > *{
  transform:translateY(110%);
  transition-property:transform;
  transition-duration:.7s;
  transition-timing-function:var(--ease-out);
  transition-delay:calc(var(--d,0ms) * var(--reveal-stagger));
  will-change:transform;
}
.rise.is-in > *{ transform:none; }

.js .fade{
  opacity:0; transform:translateY(14px);
  transition-property:opacity, transform;
  transition-duration:.55s;
  transition-timing-function:var(--ease-out);
  transition-delay:calc(var(--d,0ms) * var(--reveal-stagger));
}
.fade.is-in{ opacity:1; transform:none; }

/* ---------- reduced motion ---------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .rise > *{ transform:none; }
  .fade{ opacity:1; transform:none; }
  .system{ min-height:0; }
  .system__pin{ position:static; height:auto; }
  .system__layer{ opacity:1; }
}

/* ---------- skip link ---------------------------------------------------- */
/* Off-screen until focused. First thing a keyboard reaches, so it must not be
   display:none — that would remove it from the tab order entirely. */
.skip{
  position:fixed; top:0; left:0; z-index:200;
  transform:translateY(-120%);
  background:var(--ink); color:var(--bone);
  font-family:var(--f-mono); font-size:var(--t-micro);
  letter-spacing:.14em; text-transform:uppercase;
  padding:.9rem 1.3rem;
  transition:transform .3s var(--ease);
}
.skip:focus{ transform:none; }