/* ─────────────────────────────────────────────────────────────
   Selou Digital — main stylesheet
   Typeface and palette are fixed by the brand guide (brand/brand-guide.html).
   ───────────────────────────────────────────────────────────── */

:root{
  --night:#1B1F3B;
  --night-deep:#141731;
  --night-deepest:#0E1020;
  --day:#F4F6FB;
  --paper:#FFFFFF;
  --cyan:#00C2FF;
  --cyan-deep:#0A7FA8;
  --cyan-lift:#3FD3FF;      /* hover only */
  /* Cyan as TEXT on a light surface. --cyan-deep clears 4.5:1 on pure white
     (4.55) but not on --day (4.21) or over the findings' cyan tint (3.99), and
     those are the surfaces it actually sits on. This is the same hue taken far
     enough down to pass on all three. */
  --cyan-ink:#0A7296;
  --ink:#06223A;            /* text ON cyan, never a background */

  /* Text, darkest to lightest. Named by role so a contrast fix happens in
     one place instead of across 200 inline styles. */
  --t-strong:#1B1F3B;
  --t-body:#3C4658;
  --t-muted:#5B6577;
  --t-dim:#7C86A2;
  --t-on-dark:#DCE3F2;
  --t-on-dark-2:#B9C2D8;
  --t-on-dark-3:#AEB8D0;
  --t-on-dark-4:#8E99B5;
  --t-on-dark-5:#C8D0E4;
  --t-on-dark-6:#A9B3CC;
  --t-on-dark-7:#9AA3BC;

  --line:#E6EAF3;
  --line-2:#DCE3EF;
  --surface-raised:#2A3057;

  /* Semantic, used by the comparison table only */
  --bad:#B3261E;   --bad-bg:#FDEFEF;
  --good:#1B7A4B;  --good-bg:#EDF9F2;
  /* --bad on the night background fails contrast; these are the dark-surface
     equivalents used by the contact modal. */
  --bad-on-dark:#FF8A80;  --good-on-dark:#6EE7A8;

  /* Radius scale. Was 15 ad-hoc values; these five plus the pill cover it. */
  --r-xxs:3px;   /* rotated glyph squares */
  --r-xs:6px;
  --r-sm:10px;   /* buttons, inputs */
  --r-md:14px;   /* cards */
  --r-lg:20px;   /* large panels */
  --r-pill:999px;

  /* Type scale. Was 20 fixed sizes including 8 half-pixel ones; every merge
     below moves a value by at most 1px. Fluid clamp() display sizes are left
     alone - they are a separate, intentional scale. */
  --fs-1:10px;  --fs-2:11px;  --fs-3:12px;  --fs-4:13px;  --fs-5:14px;
  --fs-6:15px;  --fs-7:17px;  --fs-8:19px;  --fs-9:22px;  --fs-10:25px;

  /* Terminator depths. Deep marks a major shift in the argument,
     soft marks a minor one. Scaled to viewport width rather than clamped
     to a pixel floor, so the arc keeps one radius instead of turning into
     a dome on narrow screens. */
  --arc-deep:min(6.4vw,92px);
  --arc-soft:min(3.8vw,54px);
}

*,::before,::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* `overflow-x:hidden` forces overflow-y to compute as `auto`, which turns body
   into a scroll container and is the classic silent way position:sticky stops
   working. `clip` does the same clipping WITHOUT creating one. Guarded so
   older browsers keep the hidden fallback rather than gaining a sideways
   scrollbar. */
@supports (overflow-x:clip){
  body{overflow-x:clip}
}
img{max-width:100%}
a{color:var(--cyan-deep);text-decoration:none}
a:hover{color:var(--cyan)}
::selection{background:var(--cyan);color:#06223A}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;background:#E6EAF3;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--cyan);border:3px solid #fff;box-shadow:0 2px 8px rgba(27,31,59,.25);cursor:pointer}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--cyan);border:3px solid #fff;cursor:pointer}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ── Sections ────────────────────────────────────────────────
   Generous vertical rhythm so the arcs read as space, not clutter. */
.sec{position:relative;padding:clamp(84px,8.5vw,124px) 0}
.sec--night{background:var(--night)}
.sec--deep{background:var(--night-deep)}
.sec--day{background:var(--day)}
.sec--paper{background:var(--paper)}

.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,44px)}

/* Night sky texture. The pattern carries the same arc language as the
   dividers, so dark sections stop being flat fills. */
.sec--stars{
  background-image:
    linear-gradient(rgba(27,31,59,.90),rgba(27,31,59,.955)),
    url("../img/selou-pattern.webp");
  background-size:auto,cover;
  background-position:center,center;
  background-repeat:no-repeat,no-repeat;
}
.sec--deep.sec--stars{
  background-image:
    linear-gradient(rgba(20,23,49,.90),rgba(20,23,49,.955)),
    url("../img/selou-pattern.webp");
}

/* ── Hero ───────────────────────────────────────────────────
   The moon limb sits behind the architecture panel, anchored right,
   masked so it dissolves before it reaches the headline. */
.sec--hero{
  position:relative;overflow:hidden;
  padding:clamp(56px,7vw,92px) 0 0;
  background:radial-gradient(1000px 520px at 88% 18%,rgba(0,194,255,.20),transparent 62%),var(--night);
}
/* Cropped hard to the lit limb at top right — the render's mocked-up
   panels are masked out entirely, only the crescent glow survives. */
.sec--hero::before{
  content:"";position:absolute;inset:0;
  background:url("../img/selou-hero.webp") 96% 16%/auto 150% no-repeat;
  opacity:.55;
  -webkit-mask-image:radial-gradient(46% 52% at 90% 20%,#000 0%,#000 30%,transparent 70%);
  mask-image:radial-gradient(46% 52% at 90% 20%,#000 0%,#000 30%,transparent 70%);
  pointer-events:none;
}
.sec--hero>*{position:relative}
@media (max-width:900px){.sec--hero::before{opacity:.16}}

/* ── Shooting stars ─────────────────────────────────────────
   Each has a lit head and a tail pointing back along its path. The travel
   vectors all keep a 0.625 rise/run so they match the tail's -32deg — a
   mismatch there makes the streak look like it is sliding sideways.
   Long, uneven durations and offset delays keep them occasional; a tight
   loop of five would read as decoration rather than sky.
   Specificity beats `.sec--hero>*`, which would otherwise force relative. */
/* Specificity has to beat `.sec--hero>*` and `.site-footer>*`, both of which
   would otherwise force position:relative and drop the layer. */
.sec--hero .stars{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.site-footer .stars{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.stars span{
  position:absolute;width:2px;height:2px;border-radius:50%;
  background:#EAF6FF;box-shadow:0 0 7px 2px rgba(120,200,255,.45);
  opacity:0;
  animation:shoot var(--dur) linear var(--delay) infinite;
}
.stars span::before{
  content:"";position:absolute;top:50%;left:1px;
  width:var(--tail);height:1px;
  transform-origin:0 50%;
  transform:translateY(-50%) rotate(-32deg);
  background:linear-gradient(90deg,rgba(190,230,255,.72),rgba(190,230,255,0));
}
/* All start right of 66% so none sweep across the headline; they cross the
   open sky and pass behind the glass panel, which reads as depth. */
.stars--hero span:nth-child(1){top:5%;left:66%;--tx:-360px;--ty:225px;--tail:92px;--dur:11s;--delay:1.5s}
.stars--hero span:nth-child(2){top:2%;left:88%;--tx:-430px;--ty:269px;--tail:88px;--dur:14s;--delay:6s}
.stars--hero span:nth-child(3){top:18%;left:78%;--tx:-300px;--ty:188px;--tail:70px;--dur:17s;--delay:10.5s}
.stars--hero span:nth-child(4){top:8%;left:96%;--tx:-380px;--ty:238px;--tail:78px;--dur:19s;--delay:15s}
.stars--hero span:nth-child(5){top:26%;left:93%;--tx:-460px;--ty:288px;--tail:104px;--dur:13s;--delay:21s}

/* Four in the footer, not five, and on their own timings — the two skies
   should never appear to fire in step. Kept in the upper band so they stay
   in open sky rather than crossing the lunar surface. */
.stars--footer span:nth-child(1){top:4%;left:62%;--tx:-300px;--ty:188px;--tail:80px;--dur:15s;--delay:3s}
.stars--footer span:nth-child(2){top:9%;left:86%;--tx:-380px;--ty:238px;--tail:96px;--dur:18s;--delay:8.5s}
.stars--footer span:nth-child(3){top:2%;left:44%;--tx:-260px;--ty:163px;--tail:68px;--dur:21s;--delay:14s}
.stars--footer span:nth-child(4){top:15%;left:94%;--tx:-330px;--ty:206px;--tail:86px;--dur:16s;--delay:19.5s}

/* ── Twinkle ────────────────────────────────────────────────
   A static field that breathes, behind the shooting stars. Children are <i>
   so they don't inherit the shooting-star head and tail from `.stars span`;
   the shared `.stars` class means reduced-motion already removes them.
   Positions come from tools/ rejection sampling with a minimum separation,
   so the field never clumps into constellations that read as a pattern.
   Each star has its own period and floor/ceiling opacity — a shared timing
   would pulse the whole sky in unison. */
.stars--twinkle i{
  position:absolute;border-radius:50%;
  background:#DCEBFF;
  box-shadow:0 0 4px 1px rgba(150,200,255,.35);
  opacity:var(--lo);
  /* No will-change: opacity/transform animations are composited anyway, and
     pinning a layer for each of 26 dots buys nothing. */
  animation:twinkle var(--dur) ease-in-out var(--delay) infinite;
}
@keyframes twinkle{
  0%,100%{opacity:var(--lo);transform:scale(1)}
  50%    {opacity:var(--hi);transform:scale(1.4)}
}

.stars--twinkle-hero i:nth-child(1){left:63.5%;top:5.9%;width:1px;height:1px;--dur:6.9s;--delay:3.3s;--lo:.15;--hi:.59}
.stars--twinkle-hero i:nth-child(2){left:35.0%;top:60.5%;width:2px;height:2px;--dur:5.5s;--delay:1.0s;--lo:.27;--hi:.78}
.stars--twinkle-hero i:nth-child(3){left:14.9%;top:88.0%;width:2.5px;height:2.5px;--dur:5.4s;--delay:2.3s;--lo:.27;--hi:.79}
.stars--twinkle-hero i:nth-child(4){left:72.7%;top:82.3%;width:2.5px;height:2.5px;--dur:4.2s;--delay:5.5s;--lo:.17;--hi:.92}
.stars--twinkle-hero i:nth-child(5){left:21.7%;top:5.8%;width:2px;height:2px;--dur:5.9s;--delay:2.8s;--lo:.28;--hi:.90}
.stars--twinkle-hero i:nth-child(6){left:80.5%;top:45.2%;width:1px;height:1px;--dur:5.9s;--delay:0.4s;--lo:.12;--hi:.67}
.stars--twinkle-hero i:nth-child(7){left:7.4%;top:78.5%;width:1.5px;height:1.5px;--dur:6.4s;--delay:2.1s;--lo:.30;--hi:.64}
.stars--twinkle-hero i:nth-child(8){left:72.7%;top:35.2%;width:1px;height:1px;--dur:3.2s;--delay:0.6s;--lo:.11;--hi:.69}
.stars--twinkle-hero i:nth-child(9){left:44.0%;top:56.5%;width:1px;height:1px;--dur:4.7s;--delay:1.7s;--lo:.29;--hi:.65}
.stars--twinkle-hero i:nth-child(10){left:12.0%;top:12.2%;width:1.5px;height:1.5px;--dur:6.6s;--delay:3.6s;--lo:.15;--hi:.77}
.stars--twinkle-hero i:nth-child(11){left:82.5%;top:79.4%;width:1px;height:1px;--dur:4.9s;--delay:0.2s;--lo:.25;--hi:.63}
.stars--twinkle-hero i:nth-child(12){left:44.0%;top:23.1%;width:1px;height:1px;--dur:4.8s;--delay:0.7s;--lo:.21;--hi:.86}
.stars--twinkle-hero i:nth-child(13){left:35.0%;top:41.3%;width:1px;height:1px;--dur:3.9s;--delay:2.9s;--lo:.29;--hi:.85}
.stars--twinkle-hero i:nth-child(14){left:93.1%;top:33.2%;width:1px;height:1px;--dur:4.5s;--delay:3.0s;--lo:.19;--hi:.75}
.stars--twinkle-hero i:nth-child(15){left:62.0%;top:82.5%;width:1px;height:1px;--dur:4.0s;--delay:2.1s;--lo:.28;--hi:.91}
.stars--twinkle-hero i:nth-child(16){left:57.7%;top:26.5%;width:1px;height:1px;--dur:3.2s;--delay:3.4s;--lo:.28;--hi:.63}
.stars--twinkle-hero i:nth-child(17){left:96.6%;top:62.6%;width:2px;height:2px;--dur:5.5s;--delay:6.0s;--lo:.29;--hi:.61}
.stars--twinkle-hero i:nth-child(18){left:27.6%;top:69.8%;width:2.5px;height:2.5px;--dur:6.0s;--delay:5.1s;--lo:.23;--hi:.92}
.stars--twinkle-hero i:nth-child(19){left:74.0%;top:64.5%;width:2px;height:2px;--dur:6.0s;--delay:2.4s;--lo:.18;--hi:.64}
.stars--twinkle-hero i:nth-child(20){left:16.7%;top:53.5%;width:1px;height:1px;--dur:5.5s;--delay:4.7s;--lo:.22;--hi:.61}
.stars--twinkle-hero i:nth-child(21){left:63.8%;top:51.5%;width:1.5px;height:1.5px;--dur:6.3s;--delay:1.3s;--lo:.29;--hi:.73}
.stars--twinkle-hero i:nth-child(22){left:46.2%;top:74.0%;width:1px;height:1px;--dur:5.8s;--delay:1.9s;--lo:.10;--hi:.89}
.stars--twinkle-hero i:nth-child(23){left:55.2%;top:62.6%;width:1.5px;height:1.5px;--dur:3.1s;--delay:3.0s;--lo:.27;--hi:.89}
.stars--twinkle-hero i:nth-child(24){left:79.9%;top:15.5%;width:2.5px;height:2.5px;--dur:4.1s;--delay:0.3s;--lo:.21;--hi:.80}
.stars--twinkle-hero i:nth-child(25){left:91.5%;top:12.1%;width:2.5px;height:2.5px;--dur:5.7s;--delay:2.6s;--lo:.24;--hi:.72}
.stars--twinkle-hero i:nth-child(26){left:32.8%;top:11.7%;width:2.5px;height:2.5px;--dur:3.5s;--delay:3.4s;--lo:.26;--hi:.58}

/* Footer sky. Confined to 3-42% of the footer's height: the moon's image box
   starts at 46.7% at the widest viewport, so anything lower would sit on the
   lunar surface instead of in the sky. Eighteen rather than the hero's
   twenty-six, since the band is roughly half as tall. */
.stars--twinkle-footer i:nth-child(1){left:10.6%;top:17.8%;width:1px;height:1px;--dur:5.0s;--delay:2.8s;--lo:.25;--hi:.74}
.stars--twinkle-footer i:nth-child(2){left:11.4%;top:33.9%;width:1px;height:1px;--dur:4.0s;--delay:1.5s;--lo:.13;--hi:.82}
.stars--twinkle-footer i:nth-child(3){left:51.9%;top:11.0%;width:2.5px;height:2.5px;--dur:3.2s;--delay:1.4s;--lo:.16;--hi:.92}
.stars--twinkle-footer i:nth-child(4){left:36.2%;top:18.1%;width:1px;height:1px;--dur:3.9s;--delay:2.2s;--lo:.11;--hi:.79}
.stars--twinkle-footer i:nth-child(5){left:32.2%;top:34.4%;width:1px;height:1px;--dur:3.3s;--delay:1.2s;--lo:.16;--hi:.90}
.stars--twinkle-footer i:nth-child(6){left:27.3%;top:19.3%;width:2.5px;height:2.5px;--dur:3.2s;--delay:6.8s;--lo:.21;--hi:.83}
.stars--twinkle-footer i:nth-child(7){left:60.2%;top:34.6%;width:1.5px;height:1.5px;--dur:4.9s;--delay:4.7s;--lo:.14;--hi:.72}
.stars--twinkle-footer i:nth-child(8){left:22.4%;top:12.5%;width:1.5px;height:1.5px;--dur:6.7s;--delay:1.3s;--lo:.15;--hi:.58}
.stars--twinkle-footer i:nth-child(9){left:95.5%;top:35.4%;width:2.5px;height:2.5px;--dur:6.4s;--delay:6.4s;--lo:.24;--hi:.65}
.stars--twinkle-footer i:nth-child(10){left:25.0%;top:37.8%;width:2.5px;height:2.5px;--dur:6.2s;--delay:5.8s;--lo:.11;--hi:.82}
.stars--twinkle-footer i:nth-child(11){left:75.9%;top:41.9%;width:1.5px;height:1.5px;--dur:4.2s;--delay:1.5s;--lo:.30;--hi:.90}
.stars--twinkle-footer i:nth-child(12){left:45.2%;top:38.7%;width:1.5px;height:1.5px;--dur:3.9s;--delay:5.2s;--lo:.24;--hi:.59}
.stars--twinkle-footer i:nth-child(13){left:84.5%;top:36.1%;width:1.5px;height:1.5px;--dur:6.4s;--delay:6.6s;--lo:.15;--hi:.56}
.stars--twinkle-footer i:nth-child(14){left:17.9%;top:23.7%;width:1.5px;height:1.5px;--dur:5.9s;--delay:0.8s;--lo:.19;--hi:.87}
.stars--twinkle-footer i:nth-child(15){left:76.8%;top:7.8%;width:1.5px;height:1.5px;--dur:3.6s;--delay:0.8s;--lo:.19;--hi:.69}
.stars--twinkle-footer i:nth-child(16){left:85.5%;top:28.6%;width:1.5px;height:1.5px;--dur:5.3s;--delay:2.4s;--lo:.26;--hi:.67}
.stars--twinkle-footer i:nth-child(17){left:19.6%;top:31.3%;width:1.5px;height:1.5px;--dur:6.1s;--delay:3.2s;--lo:.18;--hi:.81}
.stars--twinkle-footer i:nth-child(18){left:5.8%;top:10.4%;width:1px;height:1px;--dur:6.1s;--delay:5.6s;--lo:.18;--hi:.81}

@keyframes shoot{
  0%  {opacity:0;transform:translate3d(0,0,0)}
  2%  {opacity:1}
  12% {opacity:1}
  17% {opacity:0;transform:translate3d(var(--tx),var(--ty),0)}
  100%{opacity:0;transform:translate3d(var(--tx),var(--ty),0)}
}

/* ── The terminator ─────────────────────────────────────────
   A single large-radius arc, always curving the same way, so it reads
   as one recurring moon limb rather than a decorative wave.
   The strip takes the colour of the section above; the arc is the
   colour of the section below, rising into it. */
.dv{display:block;width:100%;height:var(--arc-deep);line-height:0;background-repeat:no-repeat;background-position:bottom center;background-size:100% 100%}
.dv--soft{height:var(--arc-soft)}

.dv-night-day{background-color:var(--night);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 Q720,-100 1440,100 Z' fill='%23F4F6FB'/%3E%3C/svg%3E")}
.dv-day-night{background-color:var(--day);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 Q720,-100 1440,100 Z' fill='%231B1F3B'/%3E%3C/svg%3E")}
.dv-night-paper{background-color:var(--night);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 Q720,-100 1440,100 Z' fill='%23FFFFFF'/%3E%3C/svg%3E")}
.dv-paper-deep{background-color:var(--paper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 Q720,-100 1440,100 Z' fill='%23141731'/%3E%3C/svg%3E")}
.dv-deep-day{background-color:var(--night-deep);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 Q720,-100 1440,100 Z' fill='%23F4F6FB'/%3E%3C/svg%3E")}

/* Where night meets night the fill never changes — only a thin lit edge,
   the same curve the pattern image draws. */
/* The stroke fades to nothing at both ends. Drawn at a flat opacity it ran
   edge to edge and stopped dead at the viewport sides, which read as a
   scratch across the page rather than light catching a curve.
   Note the %23 in url(%23…): a raw # would terminate the data URI. */
.dv-limb{
  height:var(--arc-soft);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='lm' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%2300C2FF' stop-opacity='0'/%3E%3Cstop offset='.22' stop-color='%2300C2FF' stop-opacity='.30'/%3E%3Cstop offset='.5' stop-color='%2300C2FF' stop-opacity='.46'/%3E%3Cstop offset='.78' stop-color='%2300C2FF' stop-opacity='.30'/%3E%3Cstop offset='1' stop-color='%2300C2FF' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0,100 Q720,-100 1440,100' fill='none' stroke='url(%23lm)' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"),
    linear-gradient(var(--night),var(--night-deep));
}
/* No divider above the footer: the moon supplies the limb, and the footer
   eases its own tone in from the contact colour. */

/* ── Method timeline ────────────────────────────────────────
   A vertical rail, deliberately a layout family the page uses nowhere else.
   Every other section is either a card grid or a two-column tool, and the
   repetition was one of the audit findings. No marker dots: the timestamp
   is the marker, so the rail stays quiet. */
/* The rail column carries phase labels ("Week 2+", "+30 days") rather than the
   timestamps it was built for. Widened to fit them: .tl-time is nowrap, so an
   under-sized column overflows rather than wrapping. */
.tl-step{
  display:grid;
  grid-template-columns:clamp(68px,7.6vw,96px) minmax(0,1fr);
  gap:clamp(14px,2.4vw,26px);
}
.tl-time{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;font-weight:700;
  letter-spacing:.5px;color:#0A7FA8;text-align:right;padding-top:2px;white-space:nowrap}
.tl-body{border-left:1px solid #DCE3EF;padding:0 0 clamp(28px,3.6vw,44px) clamp(18px,2.6vw,30px)}
/* Transparent rather than removed, so the last step keeps its indent. */
.tl-step:last-child .tl-body{border-left-color:transparent;padding-bottom:0}
.tl-title{font-size:17px;font-weight:700;letter-spacing:-.3px;color:#1B1F3B;margin:0 0 6px}
.tl-copy{font-size:14.5px;line-height:1.65;color:#5B6577;margin:0;max-width:60ch}

/* ── Deep space ─────────────────────────────────────────────
   The footer content sits in the sky above a lunar surface. The moon is a
   generated asset (tools/generate-moon.py) — a real sphere with a power-law
   crater field, so craters foreshorten into ellipses toward the limb.
   Bottom padding reserves the band the moon occupies, which is what keeps
   the columns off the bright surface. */
.site-footer{
  position:relative;overflow:hidden;isolation:isolate;
  /* The reserved band has to track the moon's rendered height, which is
     width x 620/2600. A flat value let the surface run under the bottom
     line on phones. */
  padding:clamp(92px,10vw,140px) 0 clamp(215px,calc(21.5vw + 24px),470px);
  /* The footer opens at exactly the contact section's colour and eases down
     over 320px. Handing that transition to a 30px divider strip crammed the
     whole tone change into a band, and the point where it stopped read as a
     horizontal shadow across the page. Starting on the same value means
     there is no edge to see, and the star texture fades in with it. */
  background-color:var(--night-deepest);
  background-image:
    /* Eased out over many stops rather than two. A ramp that stops dead at
       one stop leaves a corner in the curve, and the eye reads that corner
       as a horizontal line even though there is no step in the colour. */
    linear-gradient(
      rgba(20,23,49,1) 0,
      rgba(20,23,49,.93) 40px,
      rgba(20,23,49,.80) 92px,
      rgba(20,23,49,.60) 152px,
      rgba(20,23,49,.38) 214px,
      rgba(20,23,49,.19) 272px,
      rgba(20,23,49,.07) 322px,
      rgba(20,23,49,.02) 366px,
      rgba(20,23,49,0) 400px),
    linear-gradient(rgba(14,16,32,.84),rgba(14,16,32,.93)),
    url("../img/selou-pattern.webp");
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-position:top center,top center,center;
  background-size:auto,auto,cover;
}
.site-footer::before{
  content:"";position:absolute;z-index:0;
  left:50%;bottom:0;transform:translateX(-50%);
  /* Never narrower than 860px, so the limb keeps its curve on phones
     instead of flattening into a strip. */
  width:min(max(100%,860px),2000px);
  aspect-ratio:2600 / 620;
  background:url("../img/moon-limb.webp") center bottom/100% 100% no-repeat;
  pointer-events:none;
}
/* Nebula, plus a scrim that fades out before it reaches the surface — the
   moon stays bright at the page's edge, the sky above it stays dark. */
.site-footer::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  /* Masked in from the top edge. This layer paints OVER the footer's own
     background, so at full strength on row one it darkened the seam by the
     scrim and lifted it with the nebula — a hard step of about (-3,+6,+4)
     against the section above, which is the line that kept coming back.
     Matching the background's start colour was never enough on its own. */
  -webkit-mask-image:linear-gradient(to bottom,
    rgba(0,0,0,0) 0,rgba(0,0,0,.05) 44px,rgba(0,0,0,.18) 100px,
    rgba(0,0,0,.42) 165px,rgba(0,0,0,.68) 230px,rgba(0,0,0,.88) 292px,
    rgba(0,0,0,.97) 344px,#000 390px);
  mask-image:linear-gradient(to bottom,
    rgba(0,0,0,0) 0,rgba(0,0,0,.05) 44px,rgba(0,0,0,.18) 100px,
    rgba(0,0,0,.42) 165px,rgba(0,0,0,.68) 230px,rgba(0,0,0,.88) 292px,
    rgba(0,0,0,.97) 344px,#000 390px);
  background:
    radial-gradient(56% 46% at 78% 18%,rgba(0,194,255,.08),transparent 72%),
    radial-gradient(46% 40% at 16% 14%,rgba(108,92,210,.07),transparent 74%),
    /* This scrim was the visible seam: it ramped down and then held flat
       from 66%, and that corner banded across the full width. Eased to
       zero at 100% instead, so the slope never changes abruptly. */
    linear-gradient(
      rgba(14,16,32,.34) 0,
      rgba(14,16,32,.30) 14%,
      rgba(14,16,32,.24) 30%,
      rgba(14,16,32,.17) 46%,
      rgba(14,16,32,.11) 62%,
      rgba(14,16,32,.06) 76%,
      rgba(14,16,32,.02) 89%,
      rgba(14,16,32,0) 100%);
}
/* Keep the footer's own content in front of both. */
.site-footer>*{position:relative;z-index:2}

/* Below this the four nav links wrap onto their own line and push the bar
   out of its 80px rail. The logo and the booking CTA carry the bar instead. */
@media (max-width:760px){.nav-link{display:none}}

/* The three-column comparison can't compress below ~540px, so it scrolls
   inside its own card rather than being clipped on small screens. */
.cmp-table{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}

/* ── The relay ──────────────────────────────────────────────
   One signal travels the four rows in order — enquiry, automation,
   CRM, morning digest — then the panel rests before the next night.
   The pipeline is the product, so this is the one animated moment
   on the page; everything else stays still. */
@keyframes relay-sweep{
  0%     {transform:translateX(-101%)}
  22%    {transform:translateX(101%)}
  100%   {transform:translateX(101%)}
}
@keyframes relay-lift{
  0%,4%  {border-color:rgba(255,255,255,.10);background-color:rgba(255,255,255,.04)}
  9%     {border-color:rgba(0,194,255,.55);background-color:rgba(0,194,255,.10)}
  26%    {border-color:rgba(255,255,255,.10);background-color:rgba(255,255,255,.04)}
  100%   {border-color:rgba(255,255,255,.10);background-color:rgba(255,255,255,.04)}
}
@keyframes pulse-dot{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(0,194,255,.55)}
  70%    {opacity:.85;box-shadow:0 0 0 7px rgba(0,194,255,0)}
}

.arch-row{position:relative;overflow:hidden;animation:relay-lift 9s cubic-bezier(.4,0,.2,1) infinite}
.arch-row::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(0,194,255,.20) 48%,transparent);
  transform:translateX(-101%);
  animation:relay-sweep 9s cubic-bezier(.4,0,.2,1) infinite;
}
.arch-row:nth-child(1),.arch-row:nth-child(1)::after{animation-delay:0s}
.arch-row:nth-child(2),.arch-row:nth-child(2)::after{animation-delay:.75s}
.arch-row:nth-child(3),.arch-row:nth-child(3)::after{animation-delay:1.5s}
.arch-row:nth-child(4),.arch-row:nth-child(4)::after{animation-delay:2.25s}

.pulse{animation:pulse-dot 2.6s ease-out infinite}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,::before,::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  /* Removed outright, not just stilled — the blanket rule above would
     collapse each star's animation and leave it frozen mid-flight. */
  .stars{display:none}
}

/* ── Contact modal ─────────────────────────────────────────────────────────
   Body scroll is locked from JS while this is open. The backdrop closes on
   click; the panel stops propagation so clicks inside do not close it. */
.cf-backdrop{
  position:fixed;inset:0;z-index:1000;display:grid;place-items:center;
  padding:clamp(14px,4vw,32px);
  background:rgba(14,16,32,.74);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:cf-fade .16s ease-out both;
  overflow-y:auto;
}
.cf-dialog{
  width:min(560px,100%);max-height:calc(100dvh - 2 * clamp(14px,4vw,32px));
  overflow-y:auto;
  background:linear-gradient(180deg,var(--surface-raised),var(--night-deep));
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-lg);
  padding:clamp(24px,3.4vw,36px);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  animation:cf-rise .2s cubic-bezier(.16,1,.3,1) both;
}
@keyframes cf-fade{from{opacity:0}to{opacity:1}}
@keyframes cf-rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

/* A visible focus ring is the only way a keyboard user can tell where they
   are inside the dialog. Never remove it without replacing it. */
.cf-dialog :is(input,textarea,button,a):focus-visible{
  outline:2px solid var(--cyan);outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  .cf-backdrop,.cf-dialog{animation:none}
}

/* reCAPTCHA badge is suppressed; the required attribution text is rendered
   inside the contact modal instead. Google's terms permit hiding the badge
   ONLY while that wording is shown — if the attribution is ever removed from
   the modal, this rule must go too. The challenge iframe is untouched. */
.grecaptcha-badge{visibility:hidden}

/* ── Extracted utilities ───────────────────────────────────────────────────
   These replace inline style attributes that were repeated verbatim across
   index.html. Named by role rather than by their declarations, so a change
   here is a change everywhere - which was the whole problem with having them
   inline. `.wrap` already existed above and was going unused. */

/* Grid/flex children need this to be allowed to shrink below content width;
   without it long strings force horizontal overflow. */
.minw0{min-width:0}

.stack-10{display:flex;flex-direction:column;gap:10px}
.row-12{display:flex;gap:12px;flex-wrap:wrap}

/* Section headings. The two variants differ only in colour, so the dark one
   is a modifier rather than a second full rule. */
.sec-h2{
  font-size:clamp(30px,3.6vw,42px);font-weight:800;letter-spacing:-1.5px;
  line-height:1.12;color:var(--t-strong);margin:0;text-wrap:pretty;
}
.sec-h2--on-dark{color:#fff}

/* Small uppercase field labels. The -tight variant carries the tighter top
   margin used when a label follows another field rather than opening a group. */
.field-label{
  display:block;font-size:var(--fs-2);font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--t-dim);margin-bottom:8px;
}
.field-label--spaced{margin:18px 0 8px}

/* Monospace eyebrow used for panel headers on dark surfaces. */
.mono-eyebrow{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--fs-2);
  font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#fff;
}

.t-dim-sm{font-size:var(--fs-5);color:var(--t-on-dark-4)}
.t-white{color:#fff}
.t-cyan-bold{color:var(--cyan);font-weight:700}

/* Inline validation message under a contact-modal field. */
.cf-err{font-size:var(--fs-4);color:var(--bad-on-dark);margin:7px 0 0}

/* ═══ Nav ══════════════════════════════════════════════════════════════════ */
.nav{
  position:sticky;top:0;z-index:70;background:rgba(20,23,49,.90);
  backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.10);
}
.nav__inner{
  max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,44px);height:80px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.nav__brand{display:flex;align-items:center;flex:none}
.nav__logo{height:48px}
.nav__links{
  display:flex;align-items:center;gap:clamp(16px,2.4vw,30px);
  flex-wrap:wrap;justify-content:flex-end;
}
.nav-link{font-size:var(--fs-5);font-weight:600;color:var(--t-on-dark-5);white-space:nowrap}

/* Shared button shapes. Sizes differ, so the padding lives on the modifier. */
.btn{
  border:0;border-radius:var(--r-sm);font-weight:700;cursor:pointer;
  font-family:inherit;white-space:nowrap;
}
.btn--cyan{background:var(--cyan);color:var(--ink)}
.btn--sm{flex:none;font-size:var(--fs-5);padding:11px 18px}
.btn--lg{font-size:var(--fs-6);padding:15px 24px;white-space:normal}
.btn--ghost{
  border:1px solid rgba(255,255,255,.22);color:#fff;font-weight:700;
  font-size:var(--fs-6);padding:15px 24px;border-radius:var(--r-sm);
}

/* ═══ Hero ═════════════════════════════════════════════════════════════════ */
.hero__grid{
  max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,44px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));
  gap:clamp(32px,4vw,56px);align-items:start;
}
.hero__eyebrow{
  display:inline-flex;align-items:center;font-size:var(--fs-2);font-weight:700;
  letter-spacing:3.2px;text-transform:uppercase;color:var(--cyan);
  background:rgba(0,194,255,.10);border:1px solid rgba(0,194,255,.28);
  padding:7px 14px;border-radius:var(--r-pill);margin:0 0 26px;
}
.hero__title{
  font-size:clamp(38px,4.6vw,58px);font-weight:800;letter-spacing:-2px;
  line-height:1.04;color:#fff;margin:0;text-wrap:pretty;
}
.hero__lede{
  font-size:clamp(16px,1.3vw,17.5px);line-height:1.7;color:var(--t-on-dark-2);
  margin:24px 0 26px;max-width:50ch;
}

/* The system-map panel. */
.panel{
  min-width:0;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);
  padding:clamp(16px,1.6vw,22px);
}
.panel__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.10);
}
.panel__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.10);
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--fs-2);
  letter-spacing:1.2px;text-transform:uppercase;
}
.mono-micro{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--fs-1);
  letter-spacing:1.2px;text-transform:uppercase;color:var(--t-dim);
}
.arch-list{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.arch-row__grid{
  display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:center;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-sm);padding:14px 16px;
}
.arch-row__num{
  display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-sm);
  background:rgba(0,194,255,.14);font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--fs-2);font-weight:700;color:var(--cyan);
}
.arch-row__title{display:block;font-size:var(--fs-5);font-weight:700;color:#fff}
.arch-row__sub{display:block;font-size:var(--fs-4);color:var(--t-on-dark-4);margin-top:2px}

/* ═══ Proof strip ══════════════════════════════════════════════════════════ */
.proof{max-width:1180px;margin:clamp(44px,5vw,64px) auto 0;padding:0 clamp(20px,4vw,44px)}
.proof__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  gap:32px;padding:34px 0 clamp(40px,5vw,52px);border-top:1px solid rgba(255,255,255,.10);
}
.proof__n{
  display:block;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:clamp(28px,3vw,34px);font-weight:700;letter-spacing:-1.4px;color:#fff;
}
.proof__l{
  display:block;font-size:var(--fs-3);letter-spacing:1.8px;text-transform:uppercase;
  color:var(--t-dim);font-weight:700;margin-top:8px;
}

.bg-strong{background:var(--t-strong)}
.bg-night{background:var(--night)}
.t-cyan{color:var(--cyan)}
.t-dim{color:var(--t-dim)}

/* ═══ Disciplines ══════════════════════════════════════════════════════════ */
.sec-head--center{text-align:center;max-width:70ch;margin:0 auto 40px}
.sec-head--left{max-width:52ch;margin:0 0 44px}
.sec-lede{font-size:var(--fs-7);line-height:1.7;color:var(--t-muted);margin:18px auto 0;max-width:58ch}
.sec-lede--on-dark{color:var(--t-on-dark-3);max-width:56ch}
/* Service cards. Two columns, not three: with four services a three-column
   grid leaves the fourth card alone on its own row, and because grid rows
   stretch to their tallest member, the shortest card in the top row was
   carrying ~230px of empty space above its button. Two columns pairs them 2x2
   and makes each card wide enough that fewer bullet lines wrap, so the cards
   are closer in height to begin with.

   440px never yields three columns inside the 1092px content box, so this is a
   2x2 on every desktop width and a single column below about 890px. */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:20px}

.card{
  min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:28px;display:flex;flex-direction:column;
}
.card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.card__glyph{
  display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-sm);
  background:rgba(0,194,255,.12);flex:none;
}
.card__tag{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--fs-1);font-weight:700;
  letter-spacing:1.3px;text-transform:uppercase;color:var(--t-dim);text-align:right;
}
.card__title{
  font-size:var(--fs-8);font-weight:700;letter-spacing:-0.5px;line-height:1.3;
  color:var(--t-strong);margin:0 0 10px;
}
.card__body{font-size:var(--fs-6);line-height:1.65;color:var(--t-muted);margin:0 0 20px}
.card__label{
  font-size:var(--fs-1);font-weight:800;letter-spacing:1.7px;text-transform:uppercase;
  color:var(--t-dim);margin:0 0 12px;
}
.card__points{display:flex;flex-direction:column;gap:9px;margin-bottom:24px}
.point{
  display:grid;grid-template-columns:16px minmax(0,1fr);gap:9px;align-items:start;
  font-size:var(--fs-5);line-height:1.55;color:var(--t-body);
}
.point__tick{
  display:block;width:11px;height:6px;border-left:2px solid var(--cyan);
  border-bottom:2px solid var(--cyan);transform:rotate(-45deg);margin-top:5px;
}
.card__foot{
  margin-top:auto;padding-top:20px;border-top:1px solid var(--line);
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
/* The foot holds only the add-to-scope button now that the price is gone, so
   it stretches full width rather than sitting in a half-empty flex row. */
.card__foot > button{width:100%}

/* Comparison table */
.compare{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,40px);margin-top:32px;
}
.compare__eyebrow{
  font-size:var(--fs-2);font-weight:800;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--cyan-deep);margin:0 0 12px;
}
.compare__title{
  font-size:clamp(22px,2.4vw,28px);font-weight:800;letter-spacing:-1px;line-height:1.2;
  color:var(--t-strong);margin:0 0 28px;
}
.compare__table{
  display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-md);
}
.compare__row{
  display:grid;grid-template-columns:minmax(140px,.85fr) minmax(200px,1.3fr) minmax(200px,1.3fr);
  gap:1px;background:var(--line);
}
.compare__h{
  padding:14px 18px;font-size:var(--fs-1);font-weight:800;letter-spacing:1.5px;
  text-transform:uppercase;background:var(--day);color:var(--t-dim);
}
.compare__h--bad{background:var(--bad-bg);color:var(--bad)}
.compare__h--good{background:var(--good-bg);color:var(--good)}
.compare__factor{background:#fff;padding:18px;font-size:var(--fs-5);font-weight:700;color:var(--t-strong)}
.compare__cell{
  background:#fff;padding:18px;display:grid;grid-template-columns:15px minmax(0,1fr);
  gap:10px;align-items:start;font-size:var(--fs-5);line-height:1.6;color:var(--t-muted);
}
.compare__cell--good{color:var(--t-body)}
.compare__mark--bad{display:block;font-weight:700;color:var(--bad);line-height:1.5}
.compare__mark--good{display:block;font-weight:700;color:var(--good);line-height:1.5}

/* ═══ Estimator ════════════════════════════════════════════════════════════ */
.est__layout{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.est__left{min-width:0;flex:1.6 1 420px}
.est__step{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--fs-2);font-weight:700;
  letter-spacing:1.7px;text-transform:uppercase;color:var(--t-dim);margin:0 0 14px;
}
.est__step--later{margin:26px 0 14px}
.est-row__text{text-align:left;min-width:0}
.est-row__titles{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.est-row__title{font-size:var(--fs-6);font-weight:700;color:#fff}
.est-row__sub{display:block;font-size:var(--fs-5);color:var(--t-on-dark-4);margin-top:5px}
.est-row__meta{
  display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--fs-2);
  letter-spacing:1.1px;text-transform:uppercase;color:var(--t-dim);margin-top:8px;
}
.speed-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:10px}
.speed__label{display:block;font-size:var(--fs-6);font-weight:700;color:#fff}
.speed__sub{display:block;font-size:var(--fs-4);line-height:1.5;color:var(--t-on-dark-4);margin-top:4px}

.summary{
  min-width:0;flex:1 1 300px;
  background:linear-gradient(180deg,rgba(0,194,255,.10),rgba(255,255,255,.02));
  border:1px solid rgba(0,194,255,.35);border-radius:var(--r-lg);padding:26px;
}
.summary__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.summary__badge{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--fs-1);font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--cyan);
  background:rgba(0,194,255,.14);padding:4px 8px;border-radius:var(--r-xs);
}
.summary__label{
  font-size:var(--fs-1);font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--t-dim);margin:0 0 10px;
}
.summary__label--plain{margin:0}
.summary__items{
  display:flex;flex-direction:column;gap:8px;padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.summary__item{display:flex;justify-content:space-between;gap:12px;font-size:var(--fs-5);line-height:1.5;color:var(--t-on-dark)}
.summary__pair{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:18px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.summary__k{
  display:block;font-size:var(--fs-1);font-weight:800;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--t-dim);margin-bottom:6px;
}
.summary__v{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--fs-9);font-weight:700;color:#fff}
.summary__v--cyan{color:var(--cyan)}
.summary__total{padding:18px 0 6px}
.summary__total-k{
  display:block;font-size:var(--fs-1);font-weight:800;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--t-dim);margin-bottom:8px;
}
.summary__terms{font-size:var(--fs-4);line-height:1.6;color:var(--t-on-dark-4);margin:12px 0 0}
.summary__note{text-align:center;font-size:var(--fs-3);line-height:1.6;color:var(--t-dim);margin:12px 0 0}
.btn--block{
  display:block;width:100%;text-align:center;background:var(--cyan);color:var(--ink);
  font-weight:700;font-size:var(--fs-6);padding:15px;border:0;border-radius:var(--r-sm);
  margin-top:20px;transition:.15s;cursor:pointer;font-family:inherit;
}
.btn--block-muted{
  display:block;text-align:center;background:rgba(255,255,255,.05);color:var(--t-on-dark-4);
  border:1px solid rgba(255,255,255,.14);font-weight:700;font-size:var(--fs-6);padding:14px;
  border-radius:var(--r-sm);margin-top:20px;transition:.15s;
}

/* ═══ ROI calculator ═══════════════════════════════════════════════════════ */
.grid-330{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:20px;align-items:stretch}
.roi__inputs{min-width:0;background:var(--day);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3vw,34px)}
.slider{margin-bottom:30px}
.slider__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.slider__label{font-size:var(--fs-5);font-weight:600;line-height:1.5;color:var(--t-body)}
.slider__value{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--fs-8);font-weight:700;color:var(--t-strong);white-space:nowrap}
.slider__ends{display:flex;justify-content:space-between;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--fs-2);color:var(--t-dim);margin-top:8px}
.roi__totalrow{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line)}
.roi__totalk{font-size:var(--fs-5);font-weight:600;color:var(--t-muted)}
.roi__totalv{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--fs-6);font-weight:700;color:var(--cyan-deep)}
.roi__out{min-width:0;background:var(--t-strong);border-radius:var(--r-lg);padding:clamp(24px,3vw,34px);border:1px solid rgba(0,194,255,.30)}
.roi__outhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.mono-cyan{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--fs-2);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--cyan)}
.mono-dim{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--fs-1);font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--t-dim)}
.roi__k{display:block;font-size:var(--fs-2);font-weight:800;letter-spacing:1.7px;text-transform:uppercase;color:var(--t-dim);margin-bottom:10px}
.roi__big{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:clamp(34px,3.8vw,44px);font-weight:700;letter-spacing:-2px;color:var(--cyan)}
.roi__rows{display:flex;flex-direction:column;gap:1px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10);border-radius:var(--r-sm);overflow:hidden;margin:26px 0}
.roi__row{display:flex;justify-content:space-between;gap:16px;background:var(--night-deep);padding:14px 16px}
.roi__rowk{font-size:var(--fs-5);line-height:1.5;color:var(--t-on-dark-2)}
.roi__rowv{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--fs-5);font-weight:700;color:var(--cyan);white-space:nowrap}
.btn--block-flat{display:block;width:100%;text-align:center;background:var(--cyan);color:var(--ink);font-weight:700;font-size:var(--fs-6);padding:15px;border:0;border-radius:var(--r-sm);cursor:pointer;font-family:inherit}
.foot-note{font-size:var(--fs-3);line-height:1.6;color:var(--t-dim);margin:14px 0 0;text-align:center}

/* ═══ Audit ════════════════════════════════════════════════════════════════ */
.sec-head--narrow{text-align:center;max-width:60ch;margin:0 auto 44px}
.audit__form{min-width:0;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);padding:clamp(24px,3vw,32px)}
.audit__legend{display:flex;align-items:center;gap:10px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--fs-2);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#fff;margin:0 0 24px}
.diamond{display:block;width:7px;height:7px;background:var(--cyan);border-radius:var(--r-xxs);transform:rotate(45deg)}
.diamond--lg{width:9px;height:9px}
.input{width:100%;height:46px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-sm);padding:0 14px;color:#fff;font-size:var(--fs-6);font-family:inherit}
.input--mb{margin-bottom:20px}
.select{width:100%;height:46px;background:var(--t-strong);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-sm);padding:0 12px;color:#fff;font-size:var(--fs-6);font-family:inherit;margin-bottom:20px}
.grid-130{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(130px,100%),1fr));gap:16px}
.btn--submit{width:100%;margin-top:26px;background:var(--cyan);color:var(--ink);font-weight:700;font-size:var(--fs-6);padding:16px;border:0;border-radius:var(--r-sm);cursor:pointer;font-family:inherit}
.audit__out{min-width:0;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);padding:clamp(24px,3vw,32px);display:flex;flex-direction:column;justify-content:center}
.audit__idle{text-align:center;padding:20px 0}
.audit__idlemark{width:54px;filter:brightness(0) invert(1);opacity:.5}
.audit__idleh{font-size:var(--fs-8);font-weight:700;color:#fff;margin:22px 0 10px}
.audit__idlep{font-size:var(--fs-6);line-height:1.7;color:var(--t-on-dark-4);margin:0 auto;max-width:38ch}
.audit__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:20px}
.linkbtn{font-family:inherit;font-size:var(--fs-3);font-weight:600;color:var(--t-on-dark-4);background:none;border:0;cursor:pointer;text-decoration:underline}
.audit__profile{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--fs-2);font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--cyan);margin:0 0 10px}
.audit__h{font-size:var(--fs-9);font-weight:800;letter-spacing:-0.8px;line-height:1.25;color:#fff;margin:0 0 8px}
.audit__summary{font-size:var(--fs-6);line-height:1.7;color:var(--t-on-dark-3);margin:0 0 22px}
.stack-12{display:flex;flex-direction:column;gap:12px}
.finding{background:rgba(0,194,255,.07);border:1px solid rgba(0,194,255,.28);border-radius:var(--r-sm);padding:16px 18px}
.finding__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.finding__impact{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--fs-2);font-weight:700;color:var(--cyan)}
.finding__body{font-size:var(--fs-5);line-height:1.6;color:var(--t-on-dark-6);margin:0}
.audit__notes{margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:12px}
.audit__noteslabel{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--fs-2);font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--t-dim)}
.audit__note{display:grid;grid-template-columns:14px minmax(0,1fr);gap:10px;font-size:var(--fs-5);line-height:1.65;color:var(--t-on-dark-2);margin:0}
.audit__phase{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-size:var(--fs-5);color:var(--t-on-dark-2)}
.mono-white{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:700;color:#fff}
.btn--block-plain{display:block;width:100%;text-align:center;background:var(--cyan);color:var(--ink);font-weight:700;font-size:var(--fs-6);padding:15px;border:0;border-radius:var(--r-sm);margin-top:20px;cursor:pointer;font-family:inherit}
.micro-note{text-align:center;font-size:var(--fs-3);color:var(--t-dim);margin:11px 0 0}

/* ═══ Method / Story ═══════════════════════════════════════════════════════ */
.sec-head--54{max-width:54ch;margin:0 0 clamp(38px,4.6vw,58px)}
.sec-lede--tight{font-size:var(--fs-7);line-height:1.7;color:var(--t-muted);margin:18px 0 0}
.method__after{font-size:var(--fs-6);line-height:1.7;color:var(--t-muted);margin:clamp(34px,4vw,48px) 0 0;padding-top:26px;border-top:1px solid var(--line-2);max-width:62ch}
.story__grid{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,44px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:clamp(32px,5vw,64px);align-items:center}
.story__card{min-width:0;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);padding:clamp(36px,4vw,56px) 36px;text-align:center}
.story__mark{width:min(150px,40%);filter:brightness(0) invert(1)}
.story__eyebrow{font-size:var(--fs-2);font-weight:800;letter-spacing:2.4px;text-transform:uppercase;color:var(--cyan);margin:32px 0 8px}
.story__name{font-size:var(--fs-9);font-weight:800;letter-spacing:-0.6px;color:#fff;margin:0}
.story__sub{font-size:var(--fs-5);line-height:1.7;color:var(--t-on-dark-4);margin:14px auto 0;max-width:30ch}
.h2-on-dark{font-size:clamp(28px,3.4vw,40px);font-weight:800;letter-spacing:-1.5px;line-height:1.1;color:#fff;margin:0;text-wrap:pretty}
.story__lede{font-size:var(--fs-7);line-height:1.75;color:var(--t-on-dark-2);margin:22px 0 26px;max-width:60ch}
.grid-220{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:14px}
.principle{min-width:0;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:var(--r-md);padding:20px 22px}
.principle__t{font-size:var(--fs-7);font-weight:700;letter-spacing:-0.2px;color:#fff;margin:0 0 7px}
.principle__b{font-size:var(--fs-5);line-height:1.65;color:var(--t-on-dark-4);margin:0}
.story__pledge{display:grid;grid-template-columns:20px 1fr;gap:14px;align-items:center;background:rgba(0,194,255,.08);border:1px solid rgba(0,194,255,.28);border-radius:var(--r-md);padding:18px 22px;margin-top:14px}
.story__pledgetext{font-size:var(--fs-5);line-height:1.6;color:var(--t-on-dark);margin:0}

/* ═══ Contact ══════════════════════════════════════════════════════════════ */
.contact__panel{background:linear-gradient(120deg,var(--cyan) 0%,var(--cyan-deep) 100%);border-radius:var(--r-lg);padding:clamp(36px,4.5vw,60px) clamp(24px,3.5vw,48px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:clamp(28px,3.5vw,48px);align-items:center}
.contact__h{font-size:clamp(28px,3.4vw,40px);font-weight:800;letter-spacing:-1.5px;line-height:1.1;color:var(--ink);margin:0}
.contact__lede{font-size:var(--fs-7);line-height:1.7;color:rgba(6,34,58,.80);margin:16px 0 26px;max-width:48ch}
.btn--dark{background:var(--t-strong);color:#fff;font-weight:700;font-size:var(--fs-6);padding:16px 26px;border:0;border-radius:var(--r-sm);cursor:pointer;font-family:inherit}
.btn--outline-ink{color:var(--ink);font-weight:700;font-size:var(--fs-6);padding:16px 20px;border-radius:var(--r-sm);border:1.5px solid rgba(6,34,58,.35)}
.contact__next{min-width:0;background:rgba(6,34,58,.10);border:1px solid rgba(6,34,58,.20);border-radius:var(--r-md);padding:26px}
.contact__nextk{display:block;font-size:var(--fs-1);font-weight:800;letter-spacing:1.7px;text-transform:uppercase;color:rgba(6,34,58,.7);margin-bottom:16px}
.contact__step{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start;font-size:var(--fs-6);line-height:1.6;color:var(--ink)}
.mono-b{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:700}

/* ═══ Footer ═══════════════════════════════════════════════════════════════ */
.footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:40px;margin-bottom:40px}
.footer__logo{height:52px;margin-bottom:18px}
.footer__blurb{font-size:var(--fs-6);line-height:1.7;color:var(--t-on-dark-4);margin:0 0 20px;max-width:38ch}
.footer__badge{display:inline-flex;align-items:center;gap:9px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--fs-2);font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--cyan);background:rgba(0,194,255,.10);border:1px solid rgba(0,194,255,.28);padding:8px 12px;border-radius:var(--r-xs)}
.footer__colh{font-size:var(--fs-2);letter-spacing:2px;text-transform:uppercase;color:#fff;margin:0 0 16px}
.footer__legal{border-top:1px solid rgba(255,255,255,.10);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:var(--fs-4);color:var(--t-on-dark-7)}

/* ═══ Contact modal internals ══════════════════════════════════════════════ */
.cf__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.cf__title{font-size:var(--fs-10);font-weight:800;letter-spacing:-0.8px;line-height:1.2;color:#fff;margin:0}
.cf__close{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-sm);color:var(--t-on-dark-2);font-size:var(--fs-8);line-height:1;cursor:pointer;font-family:inherit}
.cf__intro{font-size:var(--fs-6);line-height:1.7;color:var(--t-on-dark-3);margin:12px 0 0}
.cf__attach{display:flex;align-items:center;gap:9px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--fs-2);font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--cyan);background:rgba(0,194,255,.10);border:1px solid rgba(0,194,255,.30);border-radius:var(--r-sm);padding:11px 14px;margin:18px 0 0}
.cf__form{margin-top:22px}
.cf__optional{font-weight:600;letter-spacing:.4px;text-transform:none;color:var(--t-on-dark-4)}
.cf__honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cf__alert{font-size:var(--fs-5);line-height:1.6;color:var(--bad-on-dark);background:rgba(255,138,128,.10);border:1px solid rgba(255,138,128,.32);border-radius:var(--r-sm);padding:12px 14px;margin:18px 0 0}
.cf__submit{width:100%;margin-top:22px;background:var(--cyan);color:var(--ink);font-weight:700;font-size:var(--fs-6);padding:16px;border:0;border-radius:var(--r-sm);cursor:pointer;font-family:inherit}
.cf__fine{font-size:var(--fs-3);line-height:1.6;color:var(--t-dim);margin:12px 0 0;text-align:center}
.cf__legal{font-size:var(--fs-2);line-height:1.6;color:var(--t-dim);margin:8px 0 0;text-align:center}
.cf__legallink{color:var(--t-on-dark-4);text-decoration:underline}
.cf__done{margin-top:24px}
.cf__doneh{display:flex;align-items:center;gap:10px;font-size:var(--fs-8);font-weight:700;color:var(--good-on-dark);margin:0 0 12px}
.cf__tick{font-size:var(--fs-9)}
.cf__donep{font-size:var(--fs-6);line-height:1.7;color:var(--t-on-dark-3);margin:0}
.cf__closebtn{width:100%;margin-top:24px;background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.18);font-weight:700;font-size:var(--fs-6);padding:15px;border-radius:var(--r-sm);cursor:pointer;font-family:inherit}
.sec-lede--56{max-width:56ch}

/* ═══ FAQ ══════════════════════════════════════════════════════════════════
   Two columns: the heading holds the left, the accordion takes the rest of the
   container. A single left-aligned 74ch stack left roughly 350px of dead space
   down the right of the whole section, and simply widening the list to the full
   1092px would not have fixed it — a question and its chevron a metre apart,
   over answers still capped at a readable 66ch, moves the empty space inside
   the rows instead of removing it. Splitting the section gives that width to
   the heading, so nothing is padding.

   The heading sticks while the list scrolls past it. The column is far shorter
   than the accordion, so without this it scrolls away and the answers lose the
   question they belong to. */
.faq-layout{
  display:grid;
  grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr);
  gap:clamp(40px,5.4vw,88px);
  align-items:start;
}
.faq-layout .sec-head--54{
  margin-bottom:0;
  position:sticky;
  /* .nav__inner is 80px and the bar sits at z-index 70, so anything sticking
     to a smaller offset slides underneath it. The extra 28px is breathing
     room, not clearance. */
  top:108px;
}

/* Chosen from the measurement, not by convention: at 1000px the right column
   lands at about 520px, which is the narrowest the answers stay comfortable.
   Below it both columns lose too much, so the section returns to a single
   stack and the heading stops sticking. */
@media (max-width:1000px){
  .faq-layout{grid-template-columns:1fr;gap:0}
  .faq-layout .sec-head--54{
    position:static;margin-bottom:clamp(38px,4.6vw,58px);
  }
}

.faq{
  border-top:1px solid var(--line-2);
}
.faq__item{border-bottom:1px solid var(--line-2)}
/* h3 wraps the button for document outline; it must not add its own type. */
.faq__h{margin:0;font-size:inherit;font-weight:inherit}
.faq__q{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;
  gap:clamp(16px,3vw,32px);
  background:none;border:0;cursor:pointer;font-family:inherit;text-align:left;
  padding:clamp(20px,2.4vw,26px) 2px;
  color:var(--t-strong);
}
.faq__qtext{font-size:var(--fs-7);font-weight:700;letter-spacing:-.2px;line-height:1.45}
.faq__q:hover .faq__qtext{color:var(--cyan-deep)}

/* Chevron drawn from borders rather than shipped as an icon file — it has to
   rotate, and two borders do that with no extra request. */
.faq__icon{
  flex:0 0 auto;width:9px;height:9px;margin-top:7px;
  border-right:2px solid var(--cyan-deep);border-bottom:2px solid var(--cyan-deep);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq__item.is-open .faq__icon{transform:rotate(-135deg)}

/* display:none rather than a zero-height trick: a collapsed answer should be
   out of the accessibility tree, not merely invisible. */
.faq__a{display:none}
.faq__item.is-open .faq__a{display:block;animation:faq-in .2s ease-out both}
.faq__atext{
  font-size:var(--fs-6);line-height:1.7;color:var(--t-muted);
  margin:0;padding:0 clamp(16px,3vw,32px) clamp(22px,2.6vw,28px) 2px;
  max-width:66ch;
}
@keyframes faq-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}



/* ── Engagement scrollytelling ──────────────────────────────────────────────
   The steps scroll; the sky holds. That difference in movement is where the
   parallax comes from — there is no per-frame scroll maths anywhere here, so
   there is nothing to throttle and nothing to jank.

   The moon waxes as each step crosses the middle of the viewport, driven by an
   IntersectionObserver in the component. Without JS, or without IO support,
   the first phase simply stays put and the section still reads correctly. */
:root{
  --sky-w:clamp(104px,15vw,232px);
  --moon-lg:clamp(76px,10.5vw,168px);
}

.tl{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--sky-w);
  gap:clamp(20px,3vw,44px);
  max-width:980px;
  align-items:start;
}
.tl__steps{min-width:0}

/* No background of its own: the section is already night, so a panel here
   would only draw a box around sky that is otherwise continuous. It stays a
   positioned, full-height grid cell purely to give the sticky orbit something
   to travel down.
   Deliberately NOT overflow:hidden — a clipping ancestor silently kills
   position:sticky on the orbit inside. */
.tl__sky{
  position:relative;
  align-self:stretch;
}

/* Parked just above the vertical middle so the moon sits beside the step being
   read rather than below it. */
.tl__orbit{
  position:sticky;
  top:calc(50vh - var(--moon-lg) * 0.72);
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:clamp(20px,2.4vw,32px) 0;
}
.tl__disc{position:relative;width:var(--moon-lg);aspect-ratio:1}

/* All five stacked and cross-faded. Swapping one element's background-image
   would cut hard and flash while the next file decodes. */
.tl-phase{
  position:absolute;inset:0;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  opacity:0;transition:opacity .55s ease;
}
.tl-phase.is-active{opacity:1}
.tl-phase--1{background-image:url("../img/moon-p1.webp")}
.tl-phase--2{background-image:url("../img/moon-p2.webp")}
.tl-phase--3{background-image:url("../img/moon-p3.webp")}
.tl-phase--4{background-image:url("../img/moon-p4.webp")}
.tl-phase--5{background-image:url("../img/moon-p5.webp")}

/* The halo grows with the phase, so it lives on the container rather than the
   discs — otherwise five stacked shadows all render at once. */
.tl__disc::after{
  content:"";position:absolute;inset:-18%;border-radius:50%;
  background:radial-gradient(circle,rgba(120,200,255,.20),transparent 68%);
  opacity:var(--halo-o,.35);transition:opacity .55s ease;
  pointer-events:none;z-index:-1;
}
.tl__phase-label{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--fs-2);font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--cyan);
  opacity:.85;
}

@media (prefers-reduced-motion:reduce){
  /* The phase still changes — it tracks the step you are reading, which is
     information. Only the fade is removed. */
  .tl-phase,.tl__disc::after{transition:none}
}

/* Below the breakpoint the sky would halve the width available to the copy,
   so the whole column goes and the steps run full width. */
@media (max-width:820px){
  .tl{grid-template-columns:minmax(0,1fr);gap:0;max-width:none}
  .tl__sky{display:none}
}

/* Halo strength tracks the phase: a thin crescent throwing a full glow looks
   wrong. :has() lets the container respond to which disc is active. Browsers
   without it keep the default and lose only the gradation.

   Opacity is set ON the pseudo-element rather than through a custom property
   it reads. Both work; this form is one indirection shorter and avoids relying
   on custom-property inheritance into a pseudo-element, which has historically
   been a weak spot. */
.tl__disc:has(.tl-phase--1.is-active)::after{opacity:.18}
.tl__disc:has(.tl-phase--2.is-active)::after{opacity:.32}
.tl__disc:has(.tl-phase--3.is-active)::after{opacity:.50}
.tl__disc:has(.tl-phase--4.is-active)::after{opacity:.72}
.tl__disc:has(.tl-phase--5.is-active)::after{opacity:.95}

/* Give each step room to own the viewport as it passes.
   Without this the five steps total ~570px, so on a normal screen you see the
   whole timeline at once and there is nothing to scroll through — the moon
   would change three phases in a flick of the wheel. One value tunes the whole
   effect; lower it to shorten the section. */
@media (min-width:821px){
  .tl{--step-h:48vh}
  .tl-step{min-height:var(--step-h);align-content:center}
  /* The rail must stay continuous through the added space. */
  .tl-step .tl-body{padding-bottom:clamp(28px,3.6vw,44px)}
}

/* ── Method timeline on dark ────────────────────────────────────────────────
   The timeline's type was set for the light section it used to live in. On the
   night ground every one of those colours fails: #1B1F3B titles on #141731 are
   effectively invisible. These are the on-dark equivalents. */

.sec--method .tl-time{color:var(--cyan)}
.sec--method .tl-title{color:#fff}
.sec--method .tl-copy{color:var(--t-on-dark-3)}
.sec--method .tl-body{border-left-color:rgba(255,255,255,.14)}
.sec--method .tl-step:last-child .tl-body{border-left-color:transparent}

.sec-lede--on-dark{color:var(--t-on-dark-3)}
.method__after--on-dark{
  color:var(--t-on-dark-4);
  border-top-color:rgba(255,255,255,.12);
}

/* The halo has to work harder against a night ground than it did inside a
   panel, where the panel's own glow was doing half the job. */
.sec--method .tl__disc::after{
  background:radial-gradient(circle,rgba(120,200,255,.28),transparent 70%);
}

/* Second paragraph and the concrete markers under each step. These exist
   because each step now claims 58vh and the original single paragraph left
   most of it empty — the fix for dead space is substance, not smaller type. */
.tl-copy + .tl-copy{margin-top:12px}
.tl-marks{
  list-style:none;margin:18px 0 0;padding:0;
  display:flex;flex-direction:column;gap:8px;
}
.tl-mark{
  position:relative;padding-left:20px;
  font-size:var(--fs-5);line-height:1.6;color:var(--t-on-dark-4);
}
.tl-mark::before{
  content:"";position:absolute;left:0;top:.55em;
  width:7px;height:7px;border-radius:var(--r-xxs);
  background:var(--cyan);transform:rotate(45deg);
}

/* ── Audit on white ─────────────────────────────────────────────────────────
   This section was built for the night ground and every colour in it assumed
   that: white text, translucent-white panels, cyan at full saturation. On
   white each of those either vanishes or fails contrast.

   Scoped to .sec--audit rather than rewritten in place, because several of
   these classes are shared with sections that are still dark — .field-label
   and .diamond with the contact modal, .est-row__title with the estimator,
   .t-cyan-bold with the hero. Recolouring them globally would break those. */

/* --cyan is a night colour: on white it sits near 2:1. --cyan-deep is the
   same hue tuned to pass on a light ground. */
.sec--audit .audit__profile,
.sec--audit .finding__impact,
.sec--audit .mono-cyan,
.sec--audit .t-cyan-bold{color:var(--cyan-ink)}

.sec--audit .audit__form{background:var(--day);border:1px solid var(--line)}
.sec--audit .audit__out{
  background:var(--day);border:1px solid var(--line);
}
.sec--audit .audit__legend{color:var(--t-strong)}
.sec--audit .field-label{color:var(--t-muted)}

.sec--audit .input,
.sec--audit .select{
  background:#fff;border:1px solid var(--line-2);color:var(--t-strong);
}
.sec--audit .input::placeholder{color:var(--t-dim)}

/* The mark is multi-colour, so brightness(0) flattens it to a single dark
   silhouette; the old invert() made it white, which on white is nothing. */
.sec--audit .audit__idlemark{filter:brightness(0);opacity:.22}
.sec--audit .audit__idleh{color:var(--t-strong)}
.sec--audit .audit__idlep{color:var(--t-muted)}

.sec--audit .audit__head{border-bottom-color:var(--line)}
.sec--audit .linkbtn{color:var(--t-muted)}
.sec--audit .audit__h{color:var(--t-strong)}
.sec--audit .audit__summary{color:var(--t-muted)}

.sec--audit .finding{
  background:rgba(0,194,255,.07);
  border-color:rgba(10,127,168,.28);
}
.sec--audit .est-row__title{color:var(--t-strong)}
.sec--audit .finding__body{color:var(--t-muted)}

.sec--audit .audit__notes{border-top-color:var(--line)}
.sec--audit .audit__noteslabel{color:var(--t-muted)}
.sec--audit .audit__note{color:var(--t-body)}
.sec--audit .audit__phase{border-top-color:var(--line);color:var(--t-muted)}
.sec--audit .mono-white{color:var(--t-strong)}
.sec--audit .micro-note{color:var(--t-muted)}