/* ============================================================
   cntrst.co — design tokens
   Values copied verbatim from the design source. Do not round.
   ============================================================ */
:root{
  /* Surfaces */
  --bg:#0A0A0A;
  --bg-hero:#070707;
  --bg-alt:#0C0C0C;
  --card-flat:#0D0D0D;
  --card-cta:#0B0B0B;
  --card-step:linear-gradient(180deg,#131313 0%,#0D0D0D 100%);
  --card-hi:linear-gradient(180deg,#131313,#0E0E0E);
  --chip:linear-gradient(168deg,#1A1A1A 0%,#0C0C0C 52%,#050505 100%);

  /* Accent */
  --teal:#00C4B3;
  --teal-light:#7FE3D8;
  --teal-mid:#1EC7B7;
  --teal-deep:#14A99C;

  /* Text */
  --tx:#FFFFFF;
  --tx-high:#EDEDED;
  --tx-body:#D6D6D6;
  --tx-dim:#BEBEBE;
  --tx-muted:#A3A3A3;
  --tx-muted2:#9A9A9A;
  --tx-faint:#777777;
  --tx-fainter:#6E6E6E;
  --tx-meta:#5C5C5C;
  --tx-label-off:#4A4A4A;
  --tx-footer:#3F3F3F;

  /* Lines */
  --hairline:rgba(255,255,255,0.07);
  --hairline-strong:rgba(255,255,255,0.09);
  --border-card:rgba(255,255,255,0.08);
  --border-teal:rgba(0,196,179,0.32);
  --border-chip:rgba(0,196,179,0.28);

  /* Shadows */
  --sh-top:inset 0 1px 0 rgba(255,255,255,0.05);
  --sh-top-strong:inset 0 1px 0 rgba(255,255,255,0.10);
  --sh-step:inset 0 1px 0 rgba(255,255,255,0.06),0 26px 56px -34px rgba(0,0,0,0.9);
  --sh-bloom:inset 0 1px 0 rgba(255,255,255,0.10),0 40px 90px -60px rgba(0,196,179,0.55);
  --sh-chip:inset 0 1px 0 rgba(255,255,255,0.16),inset 0 -16px 24px -18px rgba(255,255,255,0.10),0 22px 48px -26px rgba(0,0,0,0.9);
  --sh-cta:inset 0 1px 0 rgba(255,255,255,0.13),inset 0 -16px 22px -18px rgba(255,255,255,0.13);
  --sh-cta-drop:0 16px 34px -20px rgba(0,0,0,0.55);

  /* Easing */
  --ease:cubic-bezier(0.25,1,0.5,1);
  --ease-reveal:cubic-bezier(.16,1,.3,1);

  /* Rhythm */
  --gutter:32px;
  --container:1180px;
  --section-y:clamp(88px,11vw,152px);

  /* Type */
  --font:'Red Hat Display',system-ui,-apple-system,sans-serif;
  /* One family across the whole page. Small caps labels and numeric indices
     share --label-ls; the indices add tabular-nums so digits stay aligned. */
  --label-ls:0.085em;
}

/* ============================================================
   Base
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{
  background:var(--bg);
  color:var(--tx-dim);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--tx);text-decoration:none}
a:hover{color:var(--teal)}
img{max-width:100%}
[hidden]{display:none !important}
::selection{background:var(--teal);color:var(--bg)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}

@keyframes cnBeam{0%{transform:translateX(-60%)}100%{transform:translateX(160%)}}
@keyframes cnSpin{to{transform:rotate(1turn)}}

.page{position:relative;background:var(--bg);overflow-x:hidden}
.container{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Off-screen defs sheet for the shared chevron gradient */
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ============================================================
   Type primitives
   ============================================================ */
.eyebrow{
  font-family:var(--font);font-size:14px;font-weight:600;letter-spacing:var(--label-ls);
  text-transform:uppercase;color:var(--teal);display:inline-block;
}
.h1{font-size:clamp(40px,6.2vw,88px);line-height:0.96;letter-spacing:-0.045em;font-weight:800;color:var(--tx);text-wrap:balance}
.h2{font-size:clamp(32px,4.4vw,60px);line-height:1.06;letter-spacing:-0.04em;font-weight:700;color:var(--tx);text-wrap:balance}
.h2--sm{font-size:clamp(30px,4vw,54px)}
.h3{font-size:clamp(26px,2.9vw,40px);line-height:1.1;letter-spacing:-0.035em;font-weight:700;color:var(--tx);text-wrap:balance}
.lead{font-size:clamp(18px,1.7vw,24px);line-height:1.55;text-wrap:pretty}
.body{font-size:clamp(16px,1.35vw,19px);line-height:1.6;text-wrap:pretty}
.meta{font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:var(--label-ls);color:var(--tx-meta)}

/* ============================================================
   CTA ring colour — registered so it can transition.
   ============================================================ */
@property --ring-color{
  syntax:'<color>';
  inherits:true;
  initial-value:#00C4B3;
}

/* ============================================================
   CTA button (5 instances)
   ============================================================ */
.cta{
  position:relative;display:inline-flex;padding:1.5px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,0.16),rgba(255,255,255,0.035));
  overflow:hidden;width:fit-content;
  --ring-color:var(--teal);
  --cta-inner-a:rgba(0,196,179,0.85);
  --cta-inner-b:rgba(0,196,179,0.5);
  transition:transform 300ms var(--ease),box-shadow 600ms ease,--ring-color 700ms var(--ease);
}
.cta:hover{transform:translateY(-1px);color:var(--tx)}
.cta--raised{box-shadow:var(--sh-cta-drop)}
.cta--glow{box-shadow:var(--sh-cta-drop),0 0 30px -6px var(--cta-glow,rgba(0,196,179,0.45))}
.cta__ring{
  position:absolute;left:50%;top:50%;width:220%;aspect-ratio:1;transform-origin:center;
  background:conic-gradient(from 0deg,transparent 0deg,transparent 250deg,var(--ring-color) 320deg,transparent 360deg);
  margin-left:-110%;margin-top:-110%;animation:cnSpin 4s linear infinite;
}
.cta__inner{
  position:relative;display:inline-flex;align-items:center;gap:11px;
  background:linear-gradient(180deg,rgba(14,14,14,0.94),rgba(4,4,4,0.97));
  box-shadow:var(--sh-cta);
  color:var(--tx);font-size:14px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;
  padding:16px 28px;border-radius:12.5px;overflow:hidden;
  transition:background 500ms var(--ease),box-shadow 700ms var(--ease);
}
.cta:hover .cta__inner{
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.13),
             inset 0 -26px 40px -20px var(--cta-inner-a),
             inset 0 -8px 16px -8px var(--cta-inner-b);
}
.cta--lg .cta__inner{padding:18px 32px}
@media (max-width:480px){
  [data-final-cta-btn] .cta__inner{
    font-size:clamp(11.5px,3.4vw,13px);
    padding:clamp(12px,3.6vw,14px) clamp(16px,5.2vw,21px);
    gap:clamp(7px,2.2vw,9px);
  }
  [data-final-cta-btn] .cta__chevron{width:clamp(13px,4vw,15px);height:auto}
}
.cta__label{position:relative;white-space:nowrap}
.cta__chevron{position:relative;display:block;flex:none;filter:drop-shadow(0 0 2px rgba(0,196,179,0.1))}
.cta-block{display:flex;flex-direction:column;gap:16px;align-items:center}

/* ============================================================
   1 — Hero
   ============================================================ */
.hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;background:var(--bg-hero);
}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero__scrim-x{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(7,11,10,0.94) 0%,rgba(7,11,10,0.70) 32%,rgba(7,11,10,0.20) 64%,rgba(7,11,10,0.06) 100%)}
.hero__scrim-y{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,#0A0A0A 0%,rgba(10,10,10,0.80) 22%,rgba(10,10,10,0.10) 58%,rgba(10,10,10,0.42) 100%)}
.hero__bar{
  position:absolute;top:0;left:0;right:0;z-index:3;display:flex;justify-content:flex-start;
  max-width:var(--container);margin:0 auto;padding:34px var(--gutter);width:100%;
}
.hero__logo{height:22px;width:90px;flex:none;object-fit:contain;display:block}
.hero__body{
  position:relative;z-index:2;width:100%;max-width:var(--container);margin:0 auto;
  padding:0 var(--gutter) clamp(64px,7vw,88px);display:flex;flex-direction:column;gap:26px;
}
.hero__body .h1{max-width:100%;font-size:clamp(40px,6.2vw,82px)}
/* Optical left alignment, headline only -- the subhead and the CTA border
   stay on the grid. Matching ink bounds is not enough for diagonals: measured
   against a flat-sided H (recession 0.004em), 'W' sits 0.080em inboard of its
   own leftmost point and 'Y' a full 0.201em, because the Y's arm tip reaches
   the edge while its mass sits well right of it. These pull each line left so
   the perceived edge lines up with the subhead's "We", not the bounding box.
   In em so the correction scales with the clamp. Tied to these first
   characters -- recheck if the hero copy changes. */
.hero__h1-a{display:block;color:rgba(255,255,255,0.62);margin-left:-0.044em}
.hero__h1-b{display:block;margin-left:-0.040em}
.hero__sub{font-size:clamp(16px,1.35vw,19px);line-height:1.6;color:rgba(255,255,255,0.72);max-width:52ch;text-wrap:pretty}
.hero__actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:6px}

/* ============================================================
   2 — The ceiling
   ============================================================ */
.ceiling{position:relative;padding-block:clamp(54px,6.4vw,86px) clamp(68px,8.5vw,118px)}
.ceiling::before{
  content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.13) 22%,
    rgba(255,255,255,0.13) 78%,
    rgba(255,255,255,0) 100%);
}
.ceiling__stack{display:flex;flex-direction:column;gap:clamp(26px,3vw,40px)}
.ceiling__head{display:flex;flex-direction:column;gap:22px;max-width:100%}
.ceiling__head .h2{font-size:clamp(29px,3.05vw,38px);max-width:none}
.ceiling__lower{display:flex;flex-direction:column;max-width:var(--container)}
.ceiling__aside{color:var(--tx-dim);max-width:48ch;margin-bottom:clamp(38px,4.8vw,64px)}
.ceiling__lower .rule-row{margin-bottom:clamp(15px,1.7vw,22px)}
.rule-row{display:flex;align-items:center;gap:20px}
.rule-row__label{font-size:clamp(18px,1.7vw,24px);color:var(--tx-dim);white-space:nowrap}
.rule-row__track{position:relative;flex:1;height:1px;overflow:hidden;
  background:linear-gradient(90deg,rgba(255,255,255,0.16),rgba(255,255,255,0))}
.rule-row__beam{position:absolute;inset:0 auto 0 0;width:32%;
  background:linear-gradient(90deg,rgba(0,196,179,0),var(--teal),rgba(0,196,179,0));
  animation:cnBeam 5.2s linear infinite}
.options{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.option{
  border-radius:16px;padding:clamp(28px,3vw,40px);
  display:flex;flex-direction:column;gap:18px;min-height:230px;
}
.option__label{font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:var(--label-ls)}
.option__copy{font-size:clamp(20px,2vw,27px);line-height:1.25;letter-spacing:-0.03em;margin-top:auto;text-wrap:pretty}
/* Option 01 reads as the passive choice, but legibly so — it was dim
   enough to look disabled. Still clearly subordinate to Option 02, which
   keeps pure white at weight 600 plus the teal border and bloom. */
.option--a{
  border:1px solid rgba(255,255,255,0.18);
  background:var(--card-flat);
  box-shadow:var(--sh-top-strong);
}
.option--a .option__label{color:#8C8C8C}
.option--a .option__copy{font-weight:500;color:var(--tx-dim)}
.option--b{border:1px solid var(--border-teal);background:var(--card-hi);box-shadow:var(--sh-bloom)}
.js .option--b:not(.is-in){
  border-color:rgba(255,255,255,0.14);
  box-shadow:var(--sh-top-strong);
}
/* Needs (0,3,0) to outrank `.js [data-reveal]` further down the sheet, which
   would otherwise replace this transition with its own opacity/transform one. */
.js .option.option--b{
  transition:opacity .9s var(--ease-reveal),transform 1s var(--ease-reveal),
             border-color 1000ms var(--ease) 220ms,
             box-shadow 1300ms var(--ease) 220ms;
}
.js .option--b:not(.is-in) .option__label{color:var(--tx-faint)}
.js .option.option--b .option__label{transition:color 900ms var(--ease) 220ms}
.option--b .option__label{color:var(--teal)}
.option--b .option__copy{font-weight:600;color:var(--tx)}

/* ============================================================
   3 — The shift
   ============================================================ */
.shift{padding:0 var(--gutter) clamp(88px,11vw,144px)}
.shift__copy{display:flex;flex-direction:column;gap:clamp(22px,2.2vw,30px)}
.shift__p1{font-size:clamp(19px,1.95vw,23px);line-height:1.42;letter-spacing:-0.015em;color:var(--tx-high);max-width:100%;text-wrap:pretty}
.shift__p2{font-size:clamp(16px,1.55vw,21px);line-height:1.55;color:var(--tx-muted);max-width:100%;text-wrap:pretty}
/* No gap: three consecutive one-line paragraphs read as one three-line block.
   Narrow screens wrap each sentence, so a small gap keeps them legible. */
.shift__lines{display:flex;flex-direction:column}
@media (max-width:899px){ .shift__lines{gap:12px} }
.shift__cta{display:flex;flex-direction:column;gap:18px;align-items:flex-start;
  width:fit-content;margin-top:clamp(30px,3.4vw,44px)}
.shift__cta .meta{align-self:center}
.pullquote{
  border-left:1px solid rgba(0,196,179,0.55);padding-left:22px;
  font-size:clamp(17px,1.65vw,21px);line-height:1.5;letter-spacing:-0.01em;
  color:var(--tx);max-width:64ch;text-wrap:pretty;
  display:flex;flex-direction:column;
}
@media (max-width:899px){ .pullquote{gap:10px} }

/* ============================================================
   4 — What we build (orbit)
   ============================================================ */
.build{position:relative;overflow:hidden;border-top:1px solid var(--hairline);background:var(--bg)}
.build__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.build__inner{position:relative;z-index:1;padding-block:var(--section-y)}
.build__eyebrow-row{display:flex;justify-content:center;margin-bottom:clamp(28px,4vw,52px)}

/* Two rows of deliverables that drift in opposite directions as the block
   crosses the viewport — top right-to-left, bottom left-to-right. Offsets
   are written by initScrollFx; see [data-wb-row]. */
.wb{display:flex;flex-direction:column;gap:clamp(34px,5vw,64px)}
.wb__row{
  position:relative;width:100%;overflow:hidden;
  /* soft edges so cards enter and leave rather than being chopped off */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
}
.wb__track{
  display:flex;justify-content:center;align-items:stretch;
  gap:clamp(14px,1.8vw,24px);padding-inline:var(--gutter);
  will-change:transform;
}
.wb-card{
  flex:0 0 clamp(228px,27vw,362px);
  display:flex;flex-direction:column;gap:9px;
  padding:clamp(20px,2.2vw,28px);
  border:1px solid var(--border-chip);border-radius:16px;
  background:var(--chip);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:var(--sh-chip);
  transition:border-color 400ms ease,transform 400ms var(--ease);
}
.wb-card:hover{border-color:rgba(0,196,179,0.55);transform:translateY(-2px)}
.wb-card__n{font-family:var(--font);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:var(--label-ls);color:var(--teal)}
.wb-card__title{font-size:clamp(16px,1.5vw,20px);line-height:1.2;letter-spacing:-0.02em;font-weight:700;color:var(--tx)}
.wb-card__body{font-size:clamp(13.5px,1.15vw,15.5px);line-height:1.55;color:var(--tx-muted2);text-wrap:pretty}

.statement{
  position:relative;z-index:2;font-size:clamp(24px,3.3vw,46px);line-height:1.1;
  letter-spacing:-0.04em;font-weight:700;color:var(--tx);text-align:center;
}
.statement > span{display:block;white-space:nowrap}
.uline{position:relative;display:inline-block}
.uline::after{
  content:"";position:absolute;left:-5%;bottom:-1px;width:110%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(0,196,179,0) 0px,rgba(0,196,179,0.72) 34px,rgba(0,196,179,0.72) calc(100% - 34px),rgba(0,196,179,0) 100%);
}

/* Below this, three cards can't sit side by side without cutting the copy
   in half — so the rows stack into a single readable column and the drift
   is switched off entirely. */
@media (max-width:880px){
  .wb{gap:clamp(16px,3vw,22px)}
  .wb__row{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .wb__track{flex-direction:column;gap:16px;transform:none !important}
  .wb-card{flex:1 1 auto;width:100%}
}

@media (prefers-reduced-motion:reduce){
  .wb__track{transform:none !important}
}

/* ============================================================
   5 — Transition
   ============================================================ */
.transition{position:relative;overflow:hidden;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);background:var(--bg-alt)}
.glow{position:absolute;left:50%;transform:translateX(-50%);pointer-events:none}
.glow--top{top:-240px;width:900px;height:420px;background:radial-gradient(ellipse at center,rgba(226,230,232,0.10),rgba(226,230,232,0) 68%)}
.glow--bottom{bottom:-200px;width:900px;height:400px;background:radial-gradient(ellipse at center,rgba(226,230,232,0.10),rgba(226,230,232,0) 68%)}
.glow--panel{bottom:-260px;width:820px;height:420px;background:radial-gradient(ellipse at center,rgba(226,230,232,0.11),rgba(226,230,232,0) 68%)}
.transition__inner{
  position:relative;
  padding-block:clamp(22px,2.4vw,32px) clamp(30px,3.2vw,44px);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(18px,2vw,24px);
}
/* In flow, so symmetric padding centres the line and heading together as
   one group. The height reduction comes off the padding, not the layout. */
/* Long enough for the fade to actually resolve — over ~50px a linear ramp
   just reads as uniformly dim. The midpoint stop keeps the lower half
   clearly teal rather than spending the whole length getting there. */
.transition__line{
  display:block;width:1px;height:clamp(44px,4.7vw,66px);
  background:linear-gradient(180deg,
    rgba(0,196,179,0) 0%,
    rgba(0,196,179,0.45) 48%,
    var(--teal) 100%);
  transform-origin:top center;
}
.transition__inner h2{font-size:clamp(26px,3.4vw,46px);line-height:1.15;letter-spacing:-0.035em;font-weight:600;color:var(--tx);max-width:24ch;text-wrap:balance}

/* ============================================================
   6 — Build sequence
   ============================================================ */
.seq{position:relative;overflow:hidden;padding-block:clamp(40px,5vw,64px) var(--section-y)}
.seq__wrap{position:relative;display:flex;flex-direction:column;align-items:center}
.seq__col{position:relative;width:100%;max-width:760px;display:flex;flex-direction:column;align-items:center}
.seq__track{
  position:relative;width:100%;display:flex;flex-direction:column;align-items:center;
  /* Extra run of spine above step 01 so the fade has room to breathe.
     The spine is absolutely positioned to the padding box, so it still
     starts at top:0 — this just pushes the cards down. */
  --spine-lead:clamp(16px,1.9vw,28px);
  /* The full run of spine above card 01: the lead plus the step's own top
     padding. The fade spans all of it, so the top half reads as genuinely
     faded rather than solid-with-a-soft-cap. */
  --spine-fade:calc(var(--spine-lead) + clamp(26px,3vw,38px));
  padding-top:var(--spine-lead);
}
/* Fade the head of the spine in, matching the descending line above
   "Here's exactly how we install it". This is a scrim painted over the
   lines rather than a mask on them, because the progress line is
   scaleY()-animated and a mask would be squashed along with it. */
.seq__track::before{
  content:"";position:absolute;z-index:1;pointer-events:none;
  top:0;left:50%;transform:translateX(-50%);
  width:48px;height:var(--spine-fade);
  /* Linear alpha ramp: line visibility goes 0 -> 1 evenly, the same curve as
     .transition__line's rgba(0,196,179,0) -> teal gradient. */
  background:linear-gradient(180deg,var(--bg) 0%,rgba(10,10,10,0) 100%);
}
.seq__spine,.seq__progress{position:absolute;left:50%;top:0;width:1px;margin-left:-0.5px;z-index:0}
.seq__spine{bottom:clamp(26px,3vw,38px);background:var(--hairline-strong)}
.seq__progress{height:calc(100% - clamp(26px,3vw,38px));background:var(--teal);box-shadow:0 0 14px rgba(0,196,179,0.6);transform-origin:top center;transform:scaleY(0)}
.step{position:relative;z-index:2;width:100%;padding:clamp(26px,3vw,38px) 0;display:flex;flex-direction:column;align-items:center}
.step__card{
  position:relative;width:100%;border:1px solid var(--hairline-strong);border-radius:18px;
  background:var(--card-step);box-shadow:var(--sh-step);
  padding:clamp(30px,3.4vw,44px) clamp(24px,3vw,40px);
  display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
  transition:border-color 450ms ease,box-shadow 550ms ease,background 400ms ease;
}
.step__card:hover{border-color:var(--border-teal)}
.step__outline{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);overflow:visible;pointer-events:none;filter:drop-shadow(0 0 8px rgba(0,196,179,0.45))}
.step__dot{position:absolute;left:50%;top:-4px;width:7px;height:7px;margin-left:-3.5px;border-radius:99px;background:var(--teal);box-shadow:0 0 12px rgba(0,196,179,0.7)}
.step__n{font-family:var(--font);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:var(--label-ls);color:var(--teal)}
.step__title{font-size:clamp(23px,2.4vw,33px);line-height:1.1;letter-spacing:-0.035em;font-weight:700;color:var(--tx)}
.step__body{font-size:clamp(16px,1.35vw,19px);line-height:1.6;color:var(--tx-muted2);max-width:46ch;text-wrap:pretty}
.seq__cta{position:relative;padding:clamp(36px,4vw,52px) 0 0;display:flex;flex-direction:column;gap:16px;align-items:center;background:var(--bg)}

/* ============================================================
   7 — The call
   ============================================================ */
.call{border-top:1px solid var(--hairline);background:var(--bg-alt);position:relative;overflow:hidden}
.call__inner{position:relative;padding:clamp(48px,5.8vw,88px) var(--gutter) clamp(48px,5.5vw,80px);
  display:flex;flex-direction:column;align-items:center;gap:clamp(30px,3.6vw,46px)}
.call__inner .h2{font-size:clamp(28px,3.1vw,46px);text-align:center;max-width:24ch}
.call__cta{display:flex;flex-direction:column;gap:18px;align-items:center}
.call__list{display:flex;flex-direction:column;width:100%;max-width:790px}
.call__row{border-top:1px solid var(--hairline-strong);padding:24px 0;display:flex;gap:22px;align-items:flex-start}
@media (min-width:900px){
  .call__row{margin-inline:-51px;padding-left:70px;padding-right:60px}
}

.call__row:last-child{border-bottom:1px solid var(--hairline-strong)}
.call__icon{
  width:24px;height:24px;flex:none;flex-shrink:0;display:block;color:var(--teal);
  font-size:clamp(17px,1.6vw,21px);
  margin-top:calc((1.5em - 24px) / 2);
}
.call__row p{font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:var(--tx-body);text-wrap:pretty}

/* ============================================================
   8 — FAQ
   ============================================================ */
.faq{padding:clamp(88px,11vw,144px) var(--gutter) 0}
.faq__head{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;margin-bottom:clamp(36px,4vw,54px)}
.faq__head .h2{max-width:20ch;font-size:clamp(28px,3.1vw,46px)}   /* same scale as the call heading */
.faq__list{max-width:860px;margin:0 auto;display:flex;flex-direction:column}
.faq__item{border-top:1px solid var(--hairline-strong)}
.faq__end{border-top:1px solid var(--hairline-strong)}
.faq__q{
  width:100%;background:transparent;border:0;padding:18px 4px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:26px;
  cursor:pointer;text-align:left;color:inherit;font-family:inherit;
}
.faq__q-group{display:flex;gap:22px;align-items:flex-start}
.faq__n{font-family:var(--font);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:var(--label-ls);color:var(--teal);padding-top:7px;flex:none}
.faq__text{font-size:clamp(17px,1.5vw,21px);line-height:1.4;letter-spacing:-0.02em;font-weight:500;color:var(--tx-body);max-width:none;text-wrap:pretty;transition:color 300ms ease}
.faq__q[aria-expanded="true"] .faq__text{color:var(--tx)}
.faq__icon{flex:none;position:relative;width:15px;height:15px;margin-top:9px}
.faq__icon i{position:absolute;border-radius:2px;background:var(--teal);display:block}
.faq__icon i:first-child{top:7px;left:0;width:15px;height:1.5px}
.faq__icon i:last-child{top:0;left:6.75px;width:1.5px;height:15px;
  transition:transform 420ms var(--ease),opacity 300ms ease}
.faq__q[aria-expanded="true"] .faq__icon i:last-child{transform:rotate(90deg) scaleY(0.6);opacity:0}
/* 0fr -> 1fr grid trick: no max-height cap, answers of any length work */
.faq__panel{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows 480ms var(--ease),opacity 340ms ease}
.faq__item.is-open .faq__panel{grid-template-rows:1fr;opacity:1}
.faq__panel > div{overflow:hidden;min-height:0}
.faq__panel p{padding:0 44px 30px 56px;font-size:clamp(15px,1.4vw,18px);line-height:1.6;color:var(--tx-muted);max-width:none;text-wrap:pretty}

/* ============================================================
   9 — Final CTA
   ============================================================ */
.final{padding:clamp(72px,9vw,120px) var(--gutter) clamp(88px,11vw,140px)}
.final__panel{
  position:relative;border:1px solid var(--border-card);border-radius:26px;background:var(--card-cta);
  box-shadow:var(--sh-top);overflow:hidden;
  padding:clamp(64px,9vw,132px) clamp(28px,5vw,72px);
  display:flex;flex-direction:column;align-items:center;gap:34px;text-align:center;
}
.final__panel h2{position:relative;font-size:clamp(32px,4.3vw,60px);line-height:1.02;letter-spacing:-0.045em;font-weight:700;color:var(--tx);max-width:100%;text-wrap:balance}
.final__cta{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px}

/* ============================================================
   10 — Grain + footer
   ============================================================ */
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0.05;
  mix-blend-mode:soft-light;background-size:160px 160px;
  background-image:url('../assets/grain.svg');
}
.site-footer{position:relative;z-index:2;border-top:1px solid var(--hairline)}
.site-footer .container{padding-block:40px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.site-footer__meta{display:grid;justify-items:end;gap:8px}
@media (max-width:720px){
  .site-footer .container{flex-direction:column;align-items:flex-start;gap:18px}
  .site-footer__meta{justify-items:start}
}
.site-footer img{height:18px;width:74px;flex:none;object-fit:contain;display:block}
.site-footer span{font-family:var(--font);font-size:12px;font-weight:500;letter-spacing:var(--label-ls);color:var(--tx-footer)}
.site-footer__links{display:flex;align-items:center;gap:8px}
.site-footer__links a{font-family:var(--font);font-size:13px;font-weight:500;letter-spacing:0.02em;color:var(--tx-footer);text-decoration:none;transition:color .25s var(--ease)}
.site-footer__links a:hover,.site-footer__links a:focus-visible{color:var(--tx-muted)}
.site-footer .site-footer__sep{color:var(--tx-footer);opacity:.7}

/* ============================================================
   Reveal on scroll
   ============================================================ */
.js [data-reveal]{opacity:0;transform:translateY(26px);will-change:opacity,transform;
  transition:opacity .9s var(--ease-reveal),transform 1s var(--ease-reveal)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* Staggered arrival for the three call-out points */
.js .call__list .call__row{--row-delay:0ms;transition-delay:var(--row-delay)}
.js .call__list .call__row:nth-child(2){--row-delay:110ms}
.js .call__list .call__row:nth-child(3){--row-delay:220ms}
.js .call__list .call__icon{
  opacity:0;transform:scale(0.9);
  transition:opacity 650ms var(--ease-reveal) calc(var(--row-delay) + 150ms),
             transform 750ms var(--ease-reveal) calc(var(--row-delay) + 150ms);
}
.js .call__list .call__row.is-in .call__icon{opacity:1;transform:none}

/* ============================================================
   Responsive — replaces the prototype's JS width check
   ============================================================ */
@media (max-width:720px){
  :root{--gutter:22px}
  .option{min-height:0;gap:14px}
  .option__copy{margin-top:0}
  .hero__body{padding-bottom:56px}
  .statement > span{white-space:normal}
  .faq__panel p{padding:0 0 30px 34px}
  .faq__q-group{gap:14px}
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;scroll-behavior:auto !important}
  .js [data-reveal]{opacity:1;transform:none}
  .js .call__list .call__icon{opacity:1;transform:none}
  .rule-row__beam,.cta__ring{animation:none}
  .cta__ring{opacity:0.35}
}

/* ============================================================
   /book  +  /confirmed  — sub-pages
   ============================================================ */
.subpage{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;background:var(--bg);overflow-x:hidden;
}
.subpage__glow{
  position:absolute;top:-320px;left:50%;transform:translateX(-50%);
  width:1100px;height:620px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(0,196,179,0.07),rgba(0,196,179,0) 66%);
}
.topbar{position:relative;z-index:3;border-bottom:1px solid var(--hairline)}
.topbar .container{padding-block:26px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.topbar img{height:20px;width:82px;flex:none;object-fit:contain;display:block}
.topbar__back{
  font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:var(--label-ls);text-transform:uppercase;
  color:var(--tx-meta);transition:color 300ms ease;
}
.topbar__back:hover{color:var(--teal)}

.subpage__main{position:relative;z-index:2;flex:1;padding-block:clamp(48px,7vw,88px)}
.book{max-width:880px;margin:0 auto}
/* /book is white-on-black only — teal stays on the landing page and the CTA.
   The form runs in a narrower column so each line reads in one glance. */
.subpage--book .subpage__main{padding-top:clamp(32px,3.5vw,48px)}
.subpage--book .book{max-width:680px}
.subpage--book .book:has(.cal-step:not([hidden])){max-width:880px}
.subpage--book .subpage__glow{background:radial-gradient(ellipse at center,rgba(255,255,255,0.035),rgba(255,255,255,0) 66%)}
/* Legal pages (/privacy, /terms): a quiet reading column on the /book chrome */
.legal{counter-reset:legal-sec;max-width:680px;margin:0 auto;padding-block:0 clamp(24px,4vw,48px)}
.legal__head{margin-bottom:clamp(22px,2.4vw,30px);padding-bottom:clamp(16px,1.8vw,22px);border-bottom:1px solid var(--hairline-strong)}
.legal__head h1{font-size:clamp(30px,2.9vw,40px);line-height:1.08;letter-spacing:-0.04em;font-weight:700;color:var(--tx)}
.legal__date{margin-top:8px;font-size:14px;color:var(--tx-faint)}
.legal h2{font-size:clamp(18px,1.5vw,20px);line-height:1.3;letter-spacing:-0.02em;font-weight:600;color:var(--tx-high);margin:clamp(26px,2.4vw,32px) 0 8px}
.legal h2{counter-increment:legal-sec}
.legal h2::before{content:counter(legal-sec) ".";display:inline-block;min-width:1.45em;color:var(--tx-faint);font-variant-numeric:tabular-nums}
.legal p,.legal li{font-size:16px;line-height:1.6;color:var(--tx-muted);text-wrap:pretty}
.legal p + p,.legal ul + p{margin-top:10px}
.legal ul{margin:10px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.legal li::marker{color:var(--tx-meta)}
.legal strong{font-weight:600;color:var(--tx-body)}
.legal a{color:var(--tx-high);border-bottom:1px solid rgba(255,255,255,0.25);transition:border-color 250ms ease}
.legal a:hover{border-color:var(--tx-high)}

/* /contact rides the /book look; only its head, confirmation and booking line are its own.
   Like /confirmed it fits one screen: spacing and sizes key off viewport height (vh).
   min-height (not a fixed height) so a very short screen scrolls instead of clipping. */
.subpage--contact .subpage__main{display:flex;align-items:center;padding-block:clamp(14px,3vh,36px)}
.subpage--contact .subpage__main > .container{width:100%}
.subpage--contact .book__head{gap:clamp(6px,1.2vh,12px);margin-bottom:clamp(16px,3vh,30px)}
.subpage--contact .book__head h1{font-size:clamp(26px,min(2.9vw,5vh),40px);line-height:1.08;letter-spacing:-0.04em;font-weight:700;color:var(--tx)}
.subpage--contact .book__head p{font-size:clamp(15px,min(1.3vw,2.3vh),18px)}
.subpage--contact .field__label .opt{font-size:13px;font-weight:400}
.subpage--contact .field{gap:clamp(6px,1vh,10px);margin-bottom:clamp(12px,2vh,22px)}
.subpage--contact .input,.subpage--contact .textarea{padding-block:clamp(9px,1.5vh,14px)}
.subpage--contact .textarea{min-height:clamp(64px,11vh,110px)}
.subpage--contact .form__foot{margin-top:clamp(16px,3vh,28px)}
.subpage--contact .btn-submit{height:clamp(44px,6.4vh,54px)}
.contact__mail{color:var(--tx-high);border-bottom:1px solid rgba(255,255,255,0.25);transition:border-color 250ms ease}
.contact__mail:hover{border-color:var(--tx-high)}
.contact__done{padding-block:8px 4px;outline:none}
.contact__done[hidden]{display:none}
.contact__done-title{font-size:clamp(20px,1.8vw,24px);font-weight:600;letter-spacing:-0.02em;color:var(--tx);margin-bottom:6px}
.contact__done p:not(.contact__done-title){font-size:16px;color:var(--tx-muted)}
.contact__book{margin-top:clamp(14px,3vh,32px);font-size:14px;color:var(--tx-faint);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.book__head{display:flex;flex-direction:column;gap:18px;margin-bottom:clamp(20px,2vw,28px)}
.book__head p{font-size:clamp(16px,1.3vw,18px);line-height:1.6;color:var(--tx-muted);text-wrap:pretty}

/* Step rail */
.steps-rail{display:flex;align-items:center;gap:14px;margin-bottom:clamp(36px,4vw,52px);flex-wrap:wrap}
.rail-step{display:flex;align-items:center;gap:10px;font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:var(--label-ls);text-transform:uppercase;color:var(--tx-label-off);transition:color 400ms ease}
.rail-step__dot{width:6px;height:6px;border-radius:99px;background:var(--tx-label-off);transition:background 400ms ease,box-shadow 400ms ease}
.rail-step.is-active{color:var(--tx-high)}
.rail-step.is-active .rail-step__dot{background:var(--tx-high)}
.rail-step.is-done{color:var(--tx-meta)}
.rail-step.is-done .rail-step__dot{background:var(--tx-meta)}
.rail-sep{flex:1;min-width:24px;height:1px;background:var(--hairline-strong)}

/* Panel shared by form + calendar */
.panel{
  position:relative;border:1px solid var(--border-card);border-radius:20px;
  background:var(--card-step);box-shadow:var(--sh-step);
  padding:clamp(28px,4vw,48px);
}

/* Form — sentence-case questions, neutral fields, white as the only highlight */
.field{display:flex;flex-direction:column;gap:10px;margin-bottom:30px}
.field__label{font-family:var(--font);font-size:15px;font-weight:500;line-height:1.4;color:var(--tx-high)}
.field__label .opt{color:var(--tx-faint);margin-left:8px}
.field__hint{font-size:14px;line-height:1.5;color:var(--tx-muted2);margin-top:-6px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.input,.select,.textarea{
  width:100%;font-family:inherit;font-size:16px;line-height:1.5;color:var(--tx);
  background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.08);border-radius:12px;
  padding:14px 16px;transition:border-color 250ms ease,box-shadow 250ms ease,background 250ms ease;
  -webkit-appearance:none;appearance:none;
}
.input::placeholder,.textarea::placeholder{color:var(--tx-faint)}
.input:hover,.select:hover,.textarea:hover{border-color:rgba(255,255,255,0.16)}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:rgba(255,255,255,0.45);
  box-shadow:0 0 0 3px rgba(255,255,255,0.05);background:rgba(255,255,255,0.04);
}
/* Browser autofill paints fields pale blue/yellow; keep them dark */
.input:-webkit-autofill{
  -webkit-text-fill-color:var(--tx);caret-color:var(--tx);
  -webkit-box-shadow:0 0 0 1000px #111 inset;transition:background-color 9999s ease 0s;
}
.textarea{resize:vertical;min-height:120px}
/* Field with a fixed URL prefix (instagram.com/ …). The wrapper carries the
   field's border and states; the input inside is bare. */
.input-prefix{
  display:flex;align-items:center;cursor:text;min-width:0;
  background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.08);border-radius:12px;
  transition:border-color 250ms ease,box-shadow 250ms ease,background 250ms ease;
}
.input-prefix:hover{border-color:rgba(255,255,255,0.16)}
.input-prefix:focus-within{border-color:rgba(255,255,255,0.45);box-shadow:0 0 0 3px rgba(255,255,255,0.05);background:rgba(255,255,255,0.04)}
.input-prefix__text{padding-left:16px;font-size:16px;line-height:1.5;color:var(--tx-muted2);white-space:nowrap;user-select:none}
.input-prefix .input,.input-prefix .input:hover,.input-prefix .input:focus{
  min-width:0;border:0;background:transparent;box-shadow:none;padding-left:1px;border-radius:0 12px 12px 0;
}
.select{
  cursor:pointer;padding-right:44px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23A3A3A3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
}
.select:invalid{color:var(--tx-faint)}
.select option{background:#0D0D0D;color:var(--tx)}

.form__foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:44px}
.form__error{color:#FF8A7A;font-size:14px;line-height:1.5;margin-top:16px}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* Submit — solid white, the one bright object on /book. Same height and
   radius as the fields so it reads as part of the form. */
.btn-submit{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:54px;padding:0 26px;border:0;border-radius:12px;cursor:pointer;
  font-family:var(--font);font-size:13px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:#0A0A0A;
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#FFFFFF 0%,#E6E6E6 100%);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,0.08),0 12px 32px -16px rgba(255,255,255,0.22);
  transition:background 250ms ease,box-shadow 300ms ease,transform 150ms ease;
}
.btn-submit::before{
  /* Slow grey smoke drifting under the label */
  content:"";position:absolute;inset:-60% -30%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(30% 45% at 28% 62%,rgba(0,0,0,0.13),transparent 70%),
    radial-gradient(26% 40% at 70% 38%,rgba(0,0,0,0.09),transparent 70%),
    radial-gradient(22% 35% at 52% 80%,rgba(0,0,0,0.06),transparent 70%);
  filter:blur(8px);animation:btnSmoke 9s ease-in-out infinite alternate;
}
@keyframes btnSmoke{
  0%{transform:translate(-10%,2%) rotate(0deg)}
  50%{transform:translate(4%,-3%) rotate(6deg)}
  100%{transform:translate(10%,1%) rotate(-4deg)}
}
@media (prefers-reduced-motion:reduce){ .btn-submit::before{animation:none} }
.btn-submit__arrow{flex:none;overflow:visible}
/* Hover: the chevron slides right and a shaft fades in behind it */
.btn-submit__shaft{opacity:0;transition:opacity 200ms ease}
.btn-submit__tip{transition:transform 250ms var(--ease)}
.btn-submit:hover .btn-submit__shaft,.btn-submit:focus-visible .btn-submit__shaft{opacity:1}
.btn-submit:hover .btn-submit__tip,.btn-submit:focus-visible .btn-submit__tip{transform:translateX(3px)}
.btn-submit:hover{box-shadow:inset 0 -2px 0 rgba(0,0,0,0.08),0 14px 38px -14px rgba(255,255,255,0.34)}
.btn-submit:active{transform:translateY(1px);background:#EDEDED}
.btn-submit:focus-visible{outline:2px solid rgba(255,255,255,0.8);outline-offset:3px}
.btn-submit[disabled]{cursor:progress;opacity:0.6}

/* Calendar step */
.cal-step[hidden]{display:none}
.cal__head{display:flex;flex-direction:column;gap:12px;margin-bottom:26px}
.cal__head h2{font-size:clamp(24px,2.6vw,34px);line-height:1.15;letter-spacing:-0.03em;font-weight:700;color:var(--tx)}
.cal__head p{font-size:16px;line-height:1.6;color:var(--tx-muted);max-width:54ch}
.cal__frame{
  position:relative;border:1px solid var(--hairline-strong);border-radius:16px;
  overflow:hidden;min-height:var(--cal-h);
  --cal-h:820px;
  background:#0E0E0E;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),0 40px 90px -50px rgba(0,0,0,0.9);
}
.cal__frame iframe{
  display:block;width:100%;height:var(--cal-h);border:0;
  /* Google's booking UI is light-only and ignores prefers-color-scheme
     (verified by emulating dark — it still renders white). invert() flips
     lightness; hue-rotate(180deg) puts the hues back, so the panel reads
     dark while Google blue stays blue. Side effects: the Meet icon shifts
     warm, and the profile badge inverts to a light circle. */
  filter:invert(1) hue-rotate(180deg);
}
/* Cal.com themes itself dark, so no inversion and no fixed height —
   its inline embed sizes to its own content. */
.cal__frame.is-cal{background:transparent;box-shadow:none;border:0;min-height:0}
.cal__frame.is-cal iframe{filter:none;height:auto}
#cal-inline{width:100%;min-height:420px}   /* placeholder only — Cal sets its own height */
.cal__fallback{
  display:flex;align-items:center;justify-content:center;gap:12px;
  flex-wrap:wrap;margin-top:18px;
}

.link-quiet{
  font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:var(--label-ls);text-transform:uppercase;
  color:var(--tx-meta);border-bottom:1px solid transparent;transition:color 300ms ease,border-color 300ms ease;
}
.link-quiet:hover{color:var(--tx-high);border-color:rgba(255,255,255,0.3)}

/* ---------- /confirmed ---------- */
/* Orbital sphere (js/orb.js) fills the page like the original ThreeUI
   background; the renderer itself shifts the sphere right on wide screens
   and low-centre on narrow ones. A radial scrim keeps the copy readable. */
.orb{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
}
/* A real element between canvas (z 0) and content (z 2) rather than a
   negative-index pseudo — .done doesn't create a stacking context, so the
   pseudo escaped into the wrong layer and the sphere showed through the copy. */
.orb-scrim{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(1000px,160vw);aspect-ratio:1;
  z-index:1;pointer-events:none;
  background:radial-gradient(closest-side,
    rgba(10,10,10,0.94) 0%,
    rgba(10,10,10,0.88) 34%,
    rgba(10,10,10,0.55) 56%,
    rgba(10,10,10,0) 80%);
}
.subpage__main{position:relative;z-index:2}

/* Once there's room, split them apart the way the reference does: the
   sphere sits right of centre, the confirmation block left, with the
   scrim following the copy rather than the sphere. Below this the
   viewport is too narrow to offset anything, so both stay centred. */
@media (min-width:1000px){
  .orb-scrim{left:36%;width:min(880px,64vw)}
  .done{margin-left:0;margin-right:auto}
}
.done{max-width:720px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px;padding-block:clamp(20px,4vw,48px)}
.done__mark{
  position:relative;width:74px;height:74px;border-radius:99px;flex:none;
  display:grid;place-items:center;
  border:1px solid var(--border-teal);background:linear-gradient(180deg,#131313,#0B0B0B);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.10),0 30px 70px -40px rgba(0,196,179,0.75);
}
.done__mark svg{width:30px;height:30px;display:block}
.done__mark svg path{
  stroke:var(--teal);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;fill:none;
  stroke-dasharray:30;stroke-dashoffset:30;
  animation:cnCheck 700ms var(--ease-reveal) 260ms forwards;
}
@keyframes cnCheck{to{stroke-dashoffset:0}}
.done h1{font-size:clamp(38px,5.4vw,68px);line-height:1.02;letter-spacing:-0.045em;font-weight:700;color:var(--tx);text-wrap:balance}
.done__lead{font-size:clamp(17px,1.6vw,21px);line-height:1.55;color:var(--tx-body);max-width:46ch;text-wrap:pretty}
.done__next{width:100%;max-width:560px;display:flex;flex-direction:column;text-align:left;margin-top:8px}
.done__row{border-top:1px solid var(--hairline-strong);padding:22px 0;display:flex;gap:20px;align-items:flex-start}
.done__row:last-child{border-bottom:1px solid var(--hairline-strong)}
.done__row span{font-family:var(--font);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:var(--label-ls);color:var(--tx-faint);padding-top:4px;flex:none}
.done__row p{font-size:16px;line-height:1.6;color:var(--tx-muted);text-wrap:pretty}

/* /confirmed fits in one screen, no scroll. Sizes key off viewport height
   (vh) as well as width so short laptop windows and phones both fit. */
.subpage--confirmed{height:100vh;height:100svh;min-height:0;overflow:hidden;overflow:clip}
/* Neutral top glow, same grey as the landing page's section glows */
.subpage--confirmed .subpage__glow{background:radial-gradient(ellipse at center,rgba(226,230,232,0.05),rgba(226,230,232,0) 68%)}
/* Shared with /book so both sub-pages have the same header height */
.subpage--confirmed .topbar .container,.subpage--book .topbar .container{padding-block:clamp(14px,2.6vh,26px)}
.subpage--confirmed .subpage__main{display:flex;align-items:center;padding-block:clamp(12px,3vh,40px)}
.subpage--confirmed .subpage__main > .container{width:100%}
.subpage--confirmed .done{gap:clamp(12px,2.4vh,24px);padding-block:0}
.subpage--confirmed .done__mark{width:clamp(44px,7vh,64px);height:clamp(44px,7vh,64px)}
.subpage--confirmed .done__mark svg{width:40%;height:40%}
.subpage--confirmed .done h1{font-size:clamp(30px,min(4vw,6.4vh),52px)}
.subpage--confirmed .done__lead{font-size:clamp(15px,min(1.35vw,2.3vh),18px);max-width:none;text-wrap:balance}
.subpage--confirmed .done__next{margin-top:0}
.subpage--confirmed .done__row{padding:clamp(8px,1.8vh,16px) 0}
.subpage--confirmed .done__row p{font-size:clamp(13.5px,min(1.1vw,2vh),15px);line-height:1.5}
.subpage--confirmed .site-footer .container,.subpage--contact .site-footer .container{padding-block:clamp(14px,2.6vh,26px)}
/* Single follow-up line under the lead: centred, and one line on desktop */
.subpage--confirmed .done{max-width:900px}
.subpage--confirmed .done__next{max-width:none;width:auto}
.subpage--confirmed .done__row{justify-content:center;text-align:center}
.subpage--confirmed .done__row p{color:#8A8A8A}   /* a step below the lead, still ~5.6:1 on the ground */
@media (min-width:900px){ .subpage--confirmed .done__row p{white-space:nowrap} }
@media (max-width:720px){
  .subpage--confirmed .site-footer .container,.subpage--contact .site-footer .container{gap:8px}
  /* Name + Email stay side by side on /contact so the page still fits one screen */
  .subpage--contact .grid-2{grid-template-columns:1fr 1fr;gap:0 10px}
  .subpage--contact .subpage__main{padding-block:10px}
  .subpage--contact .field{margin-bottom:12px}
  .subpage--contact .textarea{min-height:60px}
  .subpage--contact .form__foot{margin-top:16px}
  .subpage--contact .contact__book{margin-top:12px;font-size:13px}
  .subpage--confirmed .site-footer__meta,.subpage--contact .site-footer__meta{gap:4px}
  .subpage--confirmed .done__row{gap:14px}
}

@media (max-width:760px){
  .grid-2{grid-template-columns:1fr}
  .field .grid-2{row-gap:12px}
  .btn-submit{width:100%}
  /* Bottleneck field's dashed-example placeholder: each line needs to stay
     on one row on mobile, so the font drops a touch (16px wraps; 14px
     clears the longest line down to a 375px screen). Scoped to this field
     only — Name/Email/Message keep the normal 16px (iOS zooms inputs
     under 16px on focus, and this is the one field where it's worth it). */
  #f-bottleneck{font-size:14px}
  /* The Cal embed is already a dark rounded card, so the outer panel just
     eats horizontal space on a phone — 100px of a 375px screen. Drop it and
     let the calendar run to the container edges. */
  .cal-step .panel{padding:0;background:transparent;border:0;box-shadow:none}
  .cal__frame{border:0;border-radius:0;background:transparent;box-shadow:none}
  .cal__frame{--cal-h:760px}
}

/* ============================================================
   Scroll-driven text wave (the shift section)
   Colour is written per character by js/site.js — see initTextWave.
   Nothing here sets colour, so with JS off the copy simply renders
   in the colour its own class already specifies.
   ============================================================ */
.wave-word{display:inline-block}
.wave-char{will-change:color}

@media (prefers-reduced-motion:reduce){
  .wave-char{color:inherit !important;will-change:auto}
}