/* ==========================================================================
   GoWise — go-wise.ai
   Visual authority: GoWise-presentation-design-system-v1.png; the hero follows
   the approved gradient-field concept, which supersedes A01-V03-HERO-BRIEF.md
   Copy authority:   planning/landing-page-rebuild/01-CONTENT-SPEC.md

   Two rules govern everything below.

   THE FIELD RULE.  Navy is where the system diagrams live — the thin strokes
   and the cyan/periwinkle/violet sequence only read on it. Reading sections
   are light. A diagram on paper, or a wall of body copy on navy, breaks both.

   THE TWO-RAMP RULE.  Brand hues do atmosphere and strokes on navy. Anything
   carrying text on a light ground uses a darkened derivative. Raw periwinkle
   under white text measures 3.4:1 and fails; --brand-ink measures 8.9:1.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600&display=swap');

/* --------------------------------------------------------------- tokens -- */

:root{
  /* frozen brand ---------------------------------------------------------- */
  --navy:#151342;
  --navy-2:#24205F;
  --navy-deep:#0E0C2B;
  --cy:#55C8F3;
  --pw:#7E82F4;
  --vi:#A97AF6;
  --vi-t:#C4A3FF;   /* violet lifted for text on a plate — 5.7:1 */
  --pw-t:#A6A9FA;   /* periwinkle lifted for text on a plate — 5.9:1 */
  --warm:#F7F6F2;
  --ice:#EEF4FF;

  /* grounds */
  --field:#FFFFFF;
  --field-2:#FAFAFB;

  /* ink on light — measured against #FFFFFF */
  --ink:#151342;      /* 16.4:1 */
  --ink-2:#4B4977;    /*  8.3:1 — body */
  --ink-3:#5E5C85;    /*  6.3:1 on white, 5.4:1 under the strong wash */
  --brand-ink:#3D39A8;/*  8.9:1 — eyebrows, links, numerals */

  /* ink on navy — measured against #151342 */
  --on-navy:#FFFFFF;   /* 17.7:1 */
  --on-navy-2:#C3C7EA; /* 10.7:1 */
  --on-navy-3:#A8ACD4; /*  8.0:1 on navy, 5.4:1 on the figure plate */

  /* rules */
  --rule:rgba(21,19,66,.10);
  --rule-2:rgba(21,19,66,.17);
  --rule-i:rgba(174,180,235,.17);
  --rule-i2:rgba(174,180,235,.32);

  /* Status ramp, two ramps like the ink. The context comparison is light, so
     its red and green labels take the paper-safe ramp, not the plate one. */
  --go:#1F7A55;   --care:#8A5A06;   --stop:#A62A21;    /* on paper */
  --go-i:#3FD69A; --care-i:#F0B840; --stop-i:#F2707A;  /* on a plate */

  /* the action gradient — lightest stop holds 4.8:1 with white text */
  --btn:linear-gradient(135deg,#6461E4 0%,#5450D6 52%,#443FBE 100%);
  --btn-shadow:0 10px 26px rgba(68,63,190,.26);
  --btn-shadow-lift:0 14px 32px rgba(68,63,190,.34);

  /* type ramp */
  --t-h1:clamp(2.4rem,5vw,3.3rem);
  --t-h2:clamp(1.85rem,3.3vw,2.6rem);
  --t-h3:1.3rem;
  --t-lead:clamp(1.06rem,1.5vw,1.19rem);
  --t-body:1.0625rem;
  --t-sm:.9375rem;
  --t-xs:.8125rem;

  /* motion — Corporate: no overshoot, ever */
  --quick:140ms;
  --std:260ms;
  --slow:420ms;
  --ease:cubic-bezier(.2,0,0,1);

  --shell:1200px;
  --gutter:clamp(20px,5vw,40px);
}

/* ---------------------------------------------------------------- reset -- */

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--field);
  color:var(--ink-2);
  font-family:"Outfit","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:var(--t-body);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ max-width:100%; }
img{ height:auto; display:block; }

h1,h2,h3,h4{
  margin:0;
  color:var(--ink);
  font-weight:600;
  line-height:1.14;
  letter-spacing:-.018em;
  text-wrap:balance;
}
h1{ font-size:var(--t-h1); line-height:1.06; letter-spacing:-.03em; }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); letter-spacing:-.012em; line-height:1.3; }

p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }

a{ color:var(--brand-ink); text-decoration-thickness:1px; text-underline-offset:3px; }

ul{ margin:0; padding:0; list-style:none; }

/* An optional break. Three sentences on the page used to start in the last
   few characters of a line, which reads as a stray word; these put them on a
   line of their own where there is room, and vanish where the column is
   narrow enough to reflow them anyway. Added 2026-09-24. */
.brk{ display:none; }
@media (min-width:1000px){ .brk{ display:inline; } }

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

:focus-visible{
  outline:2px solid var(--brand-ink);
  outline-offset:3px;
  border-radius:4px;
}
.plate :focus-visible{ outline-color:var(--cy); }

/* --------------------------------------------------------------- layout -- */

.wrap{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

section{ position:relative; }

/* A light reading section. One faint wash, assigned hue, nothing stacked.
   Cap is 0.13 alpha at 460px+ radius — above that it stops reading as tinted
   paper and starts reading as a glow orb, which is the failure this avoids. */
.light{
  background:var(--field);
  padding-block:clamp(72px,9vw,124px);
  isolation:isolate;
}
.light > *{ position:relative; z-index:1; }

.light::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none; z-index:0;
  background:
    radial-gradient(58% 70% at 84% 8%,  var(--wash-a), transparent 68%),
    radial-gradient(52% 64% at 10% 88%, var(--wash-b), transparent 70%);
}
[data-hue="cy"]{ --wash-a:rgba(85,200,243,.13);  --wash-b:rgba(126,130,244,.08); --hue:85,200,243; }
[data-hue="pw"]{ --wash-a:rgba(126,130,244,.13); --wash-b:rgba(169,122,246,.08); --hue:126,130,244; }
[data-hue="vi"]{ --wash-a:rgba(169,122,246,.12); --wash-b:rgba(85,200,243,.08);  --hue:169,122,246; }
/* ~~[data-hue="warm"] — a cream wash at .55, four times the alpha of every
   other hue.~~ **Removed 2026-09-24 at the user's request:** it read as gold
   across the whole top of Why GoWise. That section now takes `pw` like the
   rest, and no section carries a warm wash. */

/* A navy plate. Its own field — diagrams and the hero live here. */
.plate{
  background:var(--navy);
  color:var(--on-navy-2);
  padding-block:clamp(72px,9vw,124px);
  isolation:isolate;
  --hue:85,200,243;
}
.plate > *{ position:relative; z-index:1; }
.plate h1,.plate h2,.plate h3{ color:var(--on-navy); }
.plate::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none; z-index:0;
  background:
    radial-gradient(64% 74% at 78% 6%,  rgba(85,200,243,.13), transparent 68%),
    radial-gradient(58% 66% at 6% 92%,  rgba(126,130,244,.16), transparent 70%);
}

/* ---------------------------------------------------- the pointer wash ----

   One soft field that follows the pointer and, crucially, LAGS it — the JS
   lerps toward the cursor at ~0.1/frame so the light trails and settles.
   Locked to the pointer it reads as a template component; trailing, it reads
   as material. Hover-capable pointers only; never on touch.                */

.glow{
  position:absolute; inset:0;
  pointer-events:none; z-index:0;
  opacity:0;
  transition:opacity var(--slow) var(--ease);
  /* two stops: a small core gives the light a centre, the wide field gives it
     reach. One radial alone reads either flat or blobby. */
  background:
    radial-gradient(230px circle at var(--px,50%) var(--py,50%),
      rgba(var(--hue),var(--glow-core,.05)), transparent 72%),
    radial-gradient(480px circle at var(--px,50%) var(--py,50%),
      rgba(var(--hue),var(--glow-a,.10)), transparent 68%);
}
.plate .glow{ --glow-a:.15; --glow-core:.08; }


@media (hover:hover) and (pointer:fine){
  .is-lit > .glow{ opacity:1; }
}
@media (prefers-reduced-motion:reduce){
  .glow{ display:none; }
}

/* ----------------------------------------------------------- primitives -- */

/* Eyebrow — flanked rule, never a floating chip. Enlarged 2026-09-15 at the
   user's request (13px read as a caption): 15px on phones rising to 17px on
   desktop, with the tracking eased a touch so the longer ones stay compact. */
.eyebrow{
  display:flex; align-items:center; gap:16px;
  margin:0 0 20px;
  /* 15–17px until 2026-09-24, when the user asked every eyebrow up a size. */
  font-size:clamp(1.0625rem, .84rem + .5vw, 1.1875rem);
  font-weight:600;
  letter-spacing:.18em;
  text-wrap:balance;          /* a two-line eyebrow splits evenly, no orphan */
  text-transform:uppercase;
  color:var(--brand-ink);
}
.eyebrow::after{
  content:""; flex:1 1 auto; max-width:92px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,currentColor,transparent);
  opacity:.5;
}
.plate .eyebrow{ color:var(--cy); }
/* Lifted cyan for the hero only. Raw --cy measures 6.2:1 on flat navy, but the
   bloom lifts the ground beneath this line and it fell to 3.13:1 — measured,
   not assumed. Same reasoning that produced --pw-t and --vi-t. */
.hero .eyebrow{
  color:#8FDCFA;
  /* Larger than the section eyebrows below: this one opens the page. Raised
     with them 2026-09-15 (16px → 19px, was 14–15.5px) so it stays a step
     above; the phone tracking below keeps it on one line at 360. */
  font-size:clamp(1rem, .8rem + .5vw, 1.1875rem);
}
.eyebrow--mid{ justify-content:center; }
.eyebrow--mid::before{
  content:""; flex:1 1 auto; max-width:92px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,currentColor);
  opacity:.5;
}

/* Action */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 34px;
  border:0; border-radius:999px;
  background-image:var(--btn);
  color:#fff;
  font:inherit; font-size:1.0625rem; font-weight:500;
  letter-spacing:-.005em;
  text-decoration:none; cursor:pointer;
  box-shadow:var(--btn-shadow);
  transition:transform var(--std) var(--ease), box-shadow var(--std) var(--ease);
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--btn-shadow-lift); }
.btn:active{ transform:translateY(0); }
.btn svg{ width:17px; height:17px; flex:none; transition:transform var(--std) var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn--sm{ min-height:44px; padding:0 24px; font-size:var(--t-sm); }
.nav .btn{ flex:none; }

/* Ghost — an underlined text action, per the hero concept */
.ghost{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:6px 2px;
  color:var(--ink);
  font-weight:500; font-size:1.0625rem;
  text-decoration:none;
  border-bottom:1px solid var(--rule-2);
  transition:border-color var(--std) var(--ease), color var(--std) var(--ease);
}
.ghost:hover{ border-color:var(--brand-ink); color:var(--brand-ink); }
.ghost svg{ width:14px; height:14px; transition:transform var(--std) var(--ease); }
.ghost:hover svg{ transform:translateX(3px); }
.plate .ghost{ color:var(--on-navy); border-color:var(--rule-i2); }
.plate .ghost:hover{ color:var(--cy); border-color:var(--cy); }

/* Section head */
.head{ max-width:56ch; margin-bottom:clamp(38px,4.5vw,60px); }
.head--mid{ margin-inline:auto; text-align:center; }
.head--mid .eyebrow{ justify-content:center; }
.head--mid .eyebrow::before{
  content:""; flex:1 1 auto; max-width:92px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,currentColor); opacity:.5;
}
.lede{
  margin-top:18px;
  font-size:var(--t-lead);
  color:var(--ink-2);
  max-width:60ch;
}
.plate .lede{ color:var(--on-navy-2); }

/* ------------------------------------------------------------------ nav -- */

.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(21,19,66,.86);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:border-color var(--std) var(--ease), background var(--std) var(--ease);
}
.nav.is-stuck{ border-bottom-color:var(--rule-i); background:rgba(21,19,66,.94); }
.nav__in{
  display:flex; align-items:center; gap:24px;
  min-height:72px;
}
.mark{
  display:block; flex:none;
  width:132px; height:29px;
  /* Twice the mark's width and symmetrical, so sliding it end to end runs the
     colours through the letterforms and back without a seam. At rest the left
     half is showing: violet on "Go", cyan on "ise", as the logo file reads. */
  background-image:linear-gradient(102deg,
    var(--vi) 0%, var(--pw) 25%, var(--cy) 50%, var(--pw) 75%, var(--vi) 100%);
  background-size:200% 100%;
  background-position:0% 50%;
  -webkit-mask:url(../img/wordmark-trim.png) no-repeat center/contain;
  mask:url(../img/wordmark-trim.png) no-repeat center/contain;
}
a.mark{
  text-decoration:none;
  height:44px;                          /* hit area, not glyph height */
  -webkit-mask-size:132px 29px; mask-size:132px 29px;
  transition:background-position 640ms var(--ease);
}
/* The colours travel through the wordmark and settle mirrored. No overlay, no
   flash — the gradient itself moves. An earlier white sheen swept across the
   glyphs instead and read as a hard glint; this is the quieter thing. */
a.mark:hover,
a.mark:focus-visible{ background-position:100% 50%; }

.nav__links{
  display:flex; align-items:center; gap:30px;
  margin-left:auto;
}
.nav__links a:not(.btn){
  color:var(--on-navy-2);
  font-size:var(--t-sm); font-weight:500;
  text-decoration:none;
  padding:6px 0;
  position:relative;
  transition:color var(--std) var(--ease);
}
.nav__links a:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--cy);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--std) var(--ease);
}
.nav__links a:not(.btn):hover{ color:var(--on-navy); }
.nav__links a:not(.btn):hover::after{ transform:scaleX(1); }

.burger{
  display:none;
  margin-left:auto;
  width:44px; height:44px;
  padding:0; border:1px solid var(--rule-i2); border-radius:10px;
  background:transparent; color:var(--on-navy);
  cursor:pointer;
  align-items:center; justify-content:center;
}
.burger svg{ width:20px; height:20px; }
.burger .x{ display:none; }
.burger[aria-expanded="true"] .m{ display:none; }
.burger[aria-expanded="true"] .x{ display:block; }

/* ----------------------------------------------------------------- hero -- */

/* Centred, full-bleed, ambient. The earlier split layout spent its right half
   trying to fill a column that did not need to exist; centring deletes the
   problem instead of decorating around it, and a centred stack shrinks under
   breakpoints where a split layout has to be recomposed at each one. */
.plate.hero{
  background:
    radial-gradient(120% 92% at 50% 38%, #17153F 0%, #100E2F 62%, #0C0A24 100%);
}
.hero{
  position:relative;
  overflow:hidden;                    /* the field is full-bleed; clip it */
  display:flex; flex-direction:column;
  padding-block:clamp(44px,5vw,72px) clamp(26px,3vw,40px);
  text-align:center;
}
.hero__in{
  flex:1 1 auto;
  display:grid;
  grid-template-rows:1fr auto auto;   /* copy floats in the free space */
}

@media (min-width:1001px){
  /* svh, not vh: a mobile browser's dynamic toolbar makes vh overshoot.
     Capped so a very tall monitor cannot strand the anchors off-screen. */
  .hero{ min-height:min(900px, calc(100svh - 72px)); }
}

.hero__copy{ align-self:center; max-width:900px; margin-inline:auto; position:relative; }
.hero h1{
  margin-bottom:22px;
  font-size:clamp(2.45rem,4.9vw,4.4rem);
}
.hero .lede{ margin-top:0; margin-inline:auto; max-width:54ch; }
.acts{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:14px 26px; margin-top:36px;
}

/* The two-line composition, without a hard break. Block-level AND
   non-wrapping above 1180px: nowrap alone would still let both clauses share
   a line on a very wide viewport, and display:block alone would still allow
   the second clause to wrap internally. Together they guarantee exactly two
   lines. Below the breakpoint both properties are handed back. */
.hero h1 .hl{ display:inline; white-space:normal; }
/* 1001, not 1180: between the two the headline had room to run as a single
   forty-character line, which is the same failure the tablet cap fixes lower
   down. Aligning the breakpoint with the desktop layout closes the gap, and
   the longer clause still only needs ~590px at this size, so nowrap is safe. */
@media (min-width:1001px){
  .hero h1 .hl{ display:block; white-space:nowrap; }
}

/* -------------------------------------------------------- hero field ----

   `.plate > *` sets position:relative/z-index:1 on every child, so the rules
   below are written at (0,2,0) to outrank it rather than relying on source
   order — the same specificity trap recorded in DESIGN.md.
   ---------------------------------------------------------------------- */

.hero .glow{ z-index:1; }
.hero .hf{
  position:absolute; inset:0; z-index:0;
  pointer-events:none;                /* never captures or blocks a click */
  overflow:hidden;
  --hx:0; --hy:0;                     /* eased pointer, -1..1, written by JS */
}

/* The shared .plate wash is tuned for a plate carrying a diagram. The hero
   ground wants to be deeper so the bloom reads as the light source. Scoped to
   .hero — #contact keeps the plate wash unchanged. */
.hero::before{ background:none; }   /* the bloom is the only light source */

/* ---- the bloom ----------------------------------------------------------

   Radial gradients, not blurred circles. A radial gradient is already soft,
   so there is no filter to re-rasterise on every frame and each blob animates
   on transform alone. Blurring solid circles — which is how this pattern is
   usually built — is precisely what makes it expensive.

   Cycle lengths are co-prime (23/29/31/37/41s) so the five never resync and
   the field has no visible loop.                                          */

.hf__bloom{ position:absolute; inset:0; }
.hf__b{
  position:absolute;
  border-radius:50%;
  mix-blend-mode:plus-lighter;
  will-change:transform;
}
.hf__b--1{
  width:40vw; height:40vw; left:24%; top:58%; margin:-20vw 0 0 -20vw;
  background:radial-gradient(circle, rgba(85,200,243,.26) 0%, rgba(85,200,243,0) 62%);
  animation:hf-d1 23s ease-in-out infinite;
}
.hf__b--2{                            /* the main bloom, behind the headline */
  width:52vw; height:52vw; left:52%; top:40%; margin:-26vw 0 0 -26vw;
  background:radial-gradient(circle, rgba(126,130,244,.30) 0%, rgba(126,130,244,0) 62%);
  animation:hf-d2 29s ease-in-out infinite;
}
.hf__b--3{
  width:44vw; height:44vw; left:68%; top:56%; margin:-22vw 0 0 -22vw;
  background:radial-gradient(circle, rgba(169,122,246,.28) 0%, rgba(169,122,246,0) 62%);
  animation:hf-d3 31s ease-in-out infinite;
}
.hf__b--4{
  width:30vw; height:30vw; left:82%; top:22%; margin:-15vw 0 0 -15vw;
  background:radial-gradient(circle, rgba(196,163,255,.16) 0%, rgba(196,163,255,0) 64%);
  animation:hf-d4 37s ease-in-out infinite;
}
.hf__b--5{
  width:34vw; height:34vw; left:16%; top:72%; margin:-17vw 0 0 -17vw;
  background:radial-gradient(circle, rgba(85,200,243,.14) 0%, rgba(85,200,243,0) 64%);
  animation:hf-d5 41s ease-in-out infinite;
}
/* the sixth follows the pointer, lagging — JS writes --bx/--by */
.hf__b--ptr{
  width:32vw; height:32vw; left:0; top:0; margin:-16vw 0 0 -16vw;
  background:radial-gradient(circle, rgba(126,130,244,.20) 0%, rgba(85,200,243,.09) 40%, rgba(85,200,243,0) 66%);
  transform:translate3d(var(--bx,50vw), var(--by,45vh), 0);
  opacity:0; transition:opacity var(--slow) var(--ease);
}
.hf.is-near .hf__b--ptr{ opacity:1; }

@keyframes hf-d1{ 0%,100%{transform:translate3d(0,0,0)} 33%{transform:translate3d(7vw,5vh,0)} 66%{transform:translate3d(-4vw,-3vh,0)} }
@keyframes hf-d2{ 0%,100%{transform:translate3d(0,0,0)} 30%{transform:translate3d(-6vw,4vh,0)} 70%{transform:translate3d(5vw,-5vh,0)} }
@keyframes hf-d3{ 0%,100%{transform:translate3d(0,0,0)} 40%{transform:translate3d(6vw,-6vh,0)} 75%{transform:translate3d(-5vw,3vh,0)} }
@keyframes hf-d4{ 0%,100%{transform:translate3d(0,0,0)} 45%{transform:translate3d(-8vw,-4vh,0)} 80%{transform:translate3d(4vw,6vh,0)} }
@keyframes hf-d5{ 0%,100%{transform:translate3d(0,0,0)} 35%{transform:translate3d(5vw,-5vh,0)} 72%{transform:translate3d(-6vw,4vh,0)} }

/* ---- the particle field -------------------------------------------------
   Brand ramp only. The container carries one very slow drift; individual
   stars twinkle on opacity (which cannot fight the transform) and take their
   pointer offset from JS. Delete .hf__stars from the markup to remove them —
   nothing else depends on it.                                             */

.hf__stars{
  position:absolute; inset:0;
  animation:hf-stars 90s ease-in-out infinite;
}
@keyframes hf-stars{ 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(-2.5vw,1.6vh,0)} }

.hf__s{
  position:absolute; left:var(--x); top:var(--y);
  /* Diameter halved 2026-09-12 at the user's request, then raised 20% the same
     day (x.6 of the original): finer points, same field. */
  width:calc(var(--s) * .6); height:calc(var(--s) * .6);
  border-radius:50%;
  /* Brightened 2026-09-12 at the user's request: each hue lifted toward
     white, opacity raised by about a third, and a faint halo sized to the
     star, so the field reads on the navy rather than hiding in it. */
  --oo:min(1, calc(var(--o) * 1.3 + .1));
  background:var(--c);
  background:color-mix(in srgb, var(--c) 72%, #fff);
  box-shadow:0 0 calc(var(--s) * .96) color-mix(in srgb, var(--c) 55%, transparent);
  opacity:var(--oo);
  transform:translate3d(var(--sx,0px), var(--sy,0px), 0);
  animation:hf-tw var(--t) ease-in-out var(--dl) infinite;
}
/* Rests at full opacity, dips in the middle. The global reduced-motion rule
   collapses every animation to its final keyframe, so 100% has to be the
   state we actually want to see — the inverse landed on the dim end. */
@keyframes hf-tw{ 0%,100%{ opacity:var(--oo); } 50%{ opacity:calc(var(--oo) * .42); } }

/* ---- the pointer layer --------------------------------------------------
   Two parts, at different lags: a small gradient dot that leads and stays
   close to the cursor, and a soft glow that trails behind it. The native
   cursor is never hidden — replacing it breaks affordances on links and form
   fields for the sake of a flourish.                                      */

.hf__spark{
  position:absolute; top:0; left:0;
  width:540px; height:540px; margin:-270px 0 0 -270px;
  border-radius:50%;
  /* Halved three times from .30/.18/.09. At this level the wash is at the
     edge of what a display can resolve over the bloom — see the measured
     contribution in the handoff. The dot carries the pointer now. */
  background:radial-gradient(circle,
    rgba(200,225,255,.037) 0%, rgba(150,150,255,.022) 26%,
    rgba(126,130,244,.011) 48%, rgba(85,200,243,0) 70%);
  mix-blend-mode:plus-lighter;
  opacity:0; transition:opacity var(--slow) var(--ease);
  will-change:transform;
}
.hf.is-near .hf__spark{ opacity:1; }

/* ------------------------------------------------------ the cursor dot --

   Page-wide, not hero-scoped. Fixed positioning means it reads viewport
   coordinates straight from the pointer event with no scroll compensation,
   and it sits above the sticky nav, because a cursor ornament that slides
   under the header reads as a bug.

   It carries the brand ramp, so it stays legible on the navy plates and on
   the light reading sections alike. Never captures a click.               */

.cursor-dot{
  position:fixed; top:0; left:0; z-index:9999;
  width:11px; height:11px; margin:-5.5px 0 0 -5.5px;
  border-radius:50%;
  background:linear-gradient(140deg, var(--cy), var(--pw) 52%, var(--vi));
  box-shadow:0 0 12px 3px rgba(126,130,244,.38);
  pointer-events:none;
  opacity:0; transition:opacity var(--std) var(--ease);
  will-change:transform;
}
.cursor-dot.is-on{ opacity:1; }
@media (hover:none),(pointer:coarse){ .cursor-dot{ display:none; } }
@media (prefers-reduced-motion:reduce){ .cursor-dot{ display:none; } }

/* The copy's ground. A soft radial lift under the text block and a firm foot
   under the anchors, so neither ever sits on a bloom peak. */
.hf__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(12,10,36,.74) 0%, rgba(12,10,36,0) 30%),
    radial-gradient(58% 42% at 50% 42%, rgba(12,10,36,.56) 0%, rgba(12,10,36,0) 74%),
    radial-gradient(120% 100% at 50% 45%, rgba(12,10,36,0) 44%, rgba(12,10,36,.72) 100%),
    linear-gradient(0deg, #0C0A24 0%, #0C0A24 5%, rgba(12,10,36,.85) 15%, rgba(12,10,36,0) 34%);
}

/* --------------------------------------------------- capability anchors --

   A plain ordered list. Non-interactive by decision: no pointer cursor, no
   lift, no hover state — nothing may suggest these are clickable. Numerals
   are large enough for the 3:1 large-text floor, and every gradient stop uses
   a lifted derivative (--pw-t, --vi-t) rather than raw brand hex, per the
   two-ramp rule.
   -------------------------------------------------------------------- */

.caps{
  display:grid;
  /* The middle label is the longest, so its column takes a little more room
     (2026-09-15, user request) and fits on one line from about 940px. The
     outer anchors each give up ~28px, so they sit slightly further out. */
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);
  gap:0;
  margin:0; padding:clamp(26px,3.4vw,44px) 0 0;
  border-top:1px solid var(--rule-i);
  list-style:none;
}
.caps__i{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(10px,1.1vw,16px);
  padding:clamp(4px,1vw,12px) clamp(12px,1.6vw,24px);
  text-align:left;
}
.caps__i + .caps__i{ border-left:1px solid var(--rule-i); }

.caps__n{
  flex:none;
  font-size:clamp(2.1rem,3.4vw,3.1rem);
  font-weight:600; line-height:1; letter-spacing:-.03em;
  background-image:linear-gradient(150deg,var(--cy),var(--pw-t));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.caps__i:nth-child(2) .caps__n{ background-image:linear-gradient(150deg,#6FA2F6,var(--pw-t)); }
.caps__i:nth-child(3) .caps__n{ background-image:linear-gradient(150deg,var(--pw-t),var(--vi-t)); }

.caps__r{
  flex:none; width:clamp(14px,1.6vw,30px); height:1px;
  background:linear-gradient(90deg,var(--rule-i2),rgba(174,180,235,.10));
}
.caps__t{
  font-size:clamp(11.5px,.86vw,12.5px);
  font-weight:500; line-height:1.35;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--on-navy-2);
}

/* Scroll indicator — decorative, so it is aria-hidden in the markup and never
   takes focus. The bob is CSS-only and needs no script. */
.hero__down{
  justify-self:center;
  margin-top:clamp(14px,2vw,26px);
  color:var(--on-navy-3);
  opacity:.62;
}
.hero__down svg{ display:block; width:26px; height:26px; }
@media (prefers-reduced-motion:no-preference){
  .hero__down svg{ animation:hf-bob 2.8s var(--ease) infinite; }
}
@keyframes hf-bob{ 0%,68%,100%{ transform:none; } 84%{ transform:translateY(4px); } }

/* Off-screen or hidden tab: stop burning frames on a hero nobody is looking
   at. JS adds .hero--rest; without JS everything simply keeps running. */
.hero--rest .hf__b,
.hero--rest .hf__stars,
.hero--rest .hf__s,
.hero--rest .hero__down svg{ animation-play-state:paused; }

/* ================================================= context comparison ====

   Replaced the A02 before/after slider 2026-09-15, to the user's concept
   image and locked copy. One shared task, asked once, branches into two ways
   of working: AI used as a chatbot, where the context is typed every
   session, and AI with working context, where it is already in place. HTML
   and CSS only, no script; the concept image is a reference, never an asset.

   Stacking follows the section's real width. .ctx is a size container: the
   pair sits side by side only from 990px of content (about 1070px of
   viewport), where each panel keeps ~480px — a comfortable prompt measure,
   the chips and their label on one row, a 2×2 tile group. Narrower, the task
   and both panels stack in a centred 780px column, chatbot first. Each
   panel is its own container for the phone adjustments.
   ========================================================================= */

.ctx{
  --ctx-g:clamp(20px,2.2vw,32px);
  container:ctx / inline-size;
}
.ctx svg{
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
/* 32–40px from the headline to the task (the supporting line under the
   headline was removed 2026-09-15 at the user's request) */
.ctx__head{ max-width:none; margin-bottom:clamp(32px,3vw,40px); }
.ctx__head h2{ max-width:24em; margin-inline:auto; text-wrap:balance; }

/* the small uppercase labels: TASK, the prompt's three headings, AI RESPONSE */
.ctx__k{
  display:block;
  margin:0 0 4px;
  font-size:12px; font-weight:600; line-height:1.3;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
}

/* ------ the shared task: the request, once */
.ctx__task,
.ctx__pair{ max-width:780px; margin-inline:auto; }
.ctx__task{
  display:flex; align-items:center; gap:16px;
  padding:14px 22px 14px 14px;
  border:1px solid rgba(61,57,168,.22);
  border-radius:16px;
  background:rgba(255,255,255,.92);
  box-shadow:0 14px 32px -24px rgba(61,57,168,.5);
  transition:translate var(--std) var(--ease), border-color var(--std) var(--ease), box-shadow var(--std) var(--ease);
}
.ctx__task-ic{
  flex:none; display:grid; place-items:center;
  width:46px; height:46px; border-radius:12px;
  background:#F4F5FF; box-shadow:inset 0 0 0 1px rgba(61,57,168,.12);
  color:var(--ink);
  transition:background-color var(--std) var(--ease), color var(--std) var(--ease), box-shadow var(--std) var(--ease);
}
.ctx__task-ic svg{ width:24px; height:24px; }
.ctx__task p{
  margin:0;
  font-size:clamp(1.0625rem,1.4vw,1.25rem); font-weight:500; line-height:1.35;
  color:var(--ink);
}
.ctx__task .ctx__k{ margin-bottom:2px; }

/* ------ the connector. Stacked: one short stem from the task into the
   first panel. Side by side (below): the stem forks, red down to the chatbot
   panel and violet down to the working-context one, each ending in a dot on
   its panel's top edge. Decoration only. */
.ctx__fork{ position:relative; height:22px; }
.ctx__fork::before{
  content:""; position:absolute; left:50%; top:0; bottom:0;
  width:2px; margin-left:-1px; border-radius:2px;
  background:linear-gradient(rgba(61,57,168,.3),rgba(166,42,33,.4));
  transition:top var(--std) var(--ease);   /* follows the task when it lifts */
}
.ctx__br{ display:none; }

/* ------ the two panels */
.ctx__pair{ display:grid; gap:18px; }
.ctx__p{
  --pb:rgba(166,42,33,.2); --pbh:rgba(166,42,33,.36); --psh:rgba(166,42,33,.34);
  container:ctxp / inline-size;
  position:relative;
  display:flex; flex-direction:column;
  padding:clamp(20px,2.4vw,30px);
  border:1px solid var(--pb);
  border-radius:20px;
  background:linear-gradient(180deg,#FFF4F2 0%,#FFF9F7 45%,#FFFCFB 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 18px 40px -32px var(--psh);
  transition:translate var(--std) var(--ease), border-color var(--std) var(--ease), box-shadow var(--std) var(--ease);
}
.ctx__p--ctx{
  --pb:rgba(61,57,168,.2); --pbh:rgba(61,57,168,.36); --psh:rgba(61,57,168,.4);
  background:linear-gradient(180deg,#F1F4FF 0%,#F7F8FF 45%,#FBFCFF 100%);
}
.ctx__tag{
  align-self:flex-start;
  max-width:100%;
  margin:0 0 14px; padding:6px 14px;
  border-radius:14px;              /* a pill on one line, a soft box if it wraps */
  text-wrap:balance;
  font-size:12px; font-weight:600; line-height:1.3;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--stop);
  background:rgba(166,42,33,.08); box-shadow:inset 0 0 0 1px rgba(166,42,33,.16);
}
.ctx__p--ctx .ctx__tag{
  color:var(--brand-ink);
  background:rgba(126,130,244,.13); box-shadow:inset 0 0 0 1px rgba(61,57,168,.14);
}
.ctx__p h3{
  margin:0 0 18px;
  font-size:clamp(1.3rem,1.9vw,1.6rem); line-height:1.2; letter-spacing:-.015em;
  color:var(--ink);
}

/* the prompt, typed out again by hand */
.ctx__prompt{
  position:relative;               /* anchors the red label on wider panels */
  padding:18px 20px 16px;
  border-radius:14px;
  background:rgba(255,255,255,.85);
  box-shadow:inset 0 0 0 1px rgba(166,42,33,.12), 0 10px 24px -22px rgba(166,42,33,.45);
}
/* direct children only: the tilted label is a <p> further down and keeps
   its own size and margins */
.ctx__prompt > p{ margin:0 0 14px; font-size:15.5px; line-height:1.55; color:var(--ink-2); }
.ctx__prompt .ctx__k{ margin:0 0 3px; font-size:12px; line-height:1.3; }
/* A hand-drawn loop around a detail that has to be typed again. The phrase
   never wraps and the instructions break one sentence per line (2026-09-15,
   user request), so every detail gets exactly one loop. The loop runs just
   outside the text on every side and its overshoot trails under the
   baseline — an earlier draw closed across the first letters and read as a
   strike-through. The text never moves. */
.ctx__ring{
  padding:.18em .42em; margin:0 -.42em;
  white-space:nowrap;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M46 36C18 37 3 31 4 21 5 9 48 2 104 3c56 1 93 7 92 18-1 11-40 17-97 16-27-1-49-2-71-5' fill='none' stroke='%23A62A21' stroke-width='1.5' stroke-opacity='.72' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transition:background-image var(--std) var(--ease);
}
/* A hand-drawn underline under the attachment list the prompt retypes
   (2026-09-15, user sketch). Unlike the loops it wraps with the text: the
   background is cloned per line fragment, so each line gets its own stroke. */
.ctx__under{
  padding-bottom:.16em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.5C38 3 82 6.5 124 4.5S182 3.5 198 5' fill='none' stroke='%23A62A21' stroke-width='1.6' stroke-opacity='.72' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left bottom / 100% .42em no-repeat;
  transition:background-image var(--std) var(--ease);
}
.ctx__attach{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px;
  margin-top:2px;
}
.ctx__files{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.ctx__files li{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 11px;
  border-radius:10px;
  background:#fff; box-shadow:inset 0 0 0 1px rgba(21,19,66,.1);
  font-size:13px; font-weight:500; line-height:1.2; color:var(--ink);
  white-space:nowrap;
}
.ctx__files svg{ flex:none; width:16px; height:16px; color:var(--ink-3); }
.ctx__files .is-sheet svg{ color:var(--go); }

/* The tilted labels: a fine outline, a warm-white fill, a slight turn and a
   small offset shadow in the label's own colour (the brief asks for the
   offset). Each sits in its own space — the chip row, the row under the
   tiles — and the vertical margin covers the corners the turn lifts, so it
   never covers text. */
.ctx__stk{
  --c:166,42,33; --rot:-5deg;
  display:inline-flex; align-items:center; gap:7px;
  width:max-content; max-width:100%;
  margin:8px 2px 8px auto;
  padding:8px 16px 8px 12px;
  border:1.5px solid rgb(var(--c)); border-radius:11px;
  background:#FFFDF9;
  color:rgb(var(--c));
  font-size:15px; font-weight:600; line-height:1.2;
  rotate:var(--rot);
  box-shadow:3px 4px 0 -1px rgba(var(--c),.22), 0 10px 18px -12px rgba(var(--c),.45);
  transition:rotate var(--std) var(--ease), box-shadow var(--std) var(--ease);
}
.ctx__stk svg{ flex:none; width:14px; height:14px; stroke-width:2.4; }
.ctx__stk--ok{ --c:31,122,85; margin:-2px 6px 6px auto; }
/* On panels wide enough, the red label straddles the prompt box's lower-right
   edge instead of taking a row of its own (2026-09-15, user sketch). The extra
   bottom padding keeps it clear of the chips; below the box it sits right of
   "AI response", never over it. Narrower, it stays in the chip row. */
@container ctxp (min-width:470px){
  .ctx__prompt{ padding-bottom:28px; }
  .ctx__prompt .ctx__stk--no{ position:absolute; right:18px; bottom:-20px; margin:0; }
}

/* the four kinds of context: categories, never numbered */
.ctx__tiles{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
  margin:0; padding:10px 10px 14px; list-style:none;
  border-radius:16px;
  background:rgba(255,255,255,.55); box-shadow:inset 0 0 0 1px rgba(61,57,168,.1);
}
.ctx__tiles li{
  display:flex; align-items:center; gap:12px;
  min-height:56px; padding:12px 14px;
  border-radius:12px;
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(21,19,66,.08), 0 6px 16px -14px rgba(61,57,168,.5);
  font-size:15px; font-weight:500; line-height:1.25; color:var(--ink);
  transition:translate var(--std) var(--ease), background-color var(--std) var(--ease), box-shadow var(--std) var(--ease);
}
.ctx__tiles svg{
  flex:none; width:22px; height:22px; color:var(--brand-ink);
  transition:scale var(--std) var(--ease), color var(--std) var(--ease);
}

/* the response */
.ctx__p > .ctx__k{ margin:22px 0 6px; }
.ctx__resp{ margin:0; font-size:15.5px; line-height:1.5; color:var(--ink-2); }
.ctx__resp strong{ display:block; margin-bottom:2px; font-size:1.125rem; font-weight:600; color:var(--ink); }
.ctx__resp--done{ font-size:1.0625rem; color:var(--ink); }
.ctx__resp--done strong{ display:inline; margin:0; font-size:inherit; }
.ctx__p--chat .ctx__resp{ margin-bottom:22px; }
/* the verdict sits at the foot of the panel, whatever its height */
.ctx__verdict{
  margin:auto 0 0; padding-top:18px;
  border-top:1.5px solid rgba(166,42,33,.4);
  font-size:clamp(1.15rem,1.55vw,1.35rem); font-weight:600; line-height:1.3; letter-spacing:-.01em;
  color:var(--stop);
}

/* the finished file — an illustration, not a control */
.ctx__file{
  display:flex; align-items:center; gap:18px;
  margin-top:12px; padding:14px 16px;
  border-radius:14px; background:#fff;
  box-shadow:inset 0 0 0 1px rgba(21,19,66,.08), 0 10px 24px -20px rgba(61,57,168,.55);
}
.ctx__cover{
  position:relative; flex:none; overflow:hidden;
  width:64px; aspect-ratio:3 / 4;
  border-radius:6px;
  background:#fff;
  box-shadow:0 0 0 1px rgba(21,19,66,.1), 0 6px 14px -8px rgba(21,19,66,.35);
}
.ctx__cover i{ position:absolute; left:14%; height:2px; border-radius:2px; background:rgba(21,19,66,.16); }
.ctx__cover i:nth-child(1){ top:15%; width:46%; height:3px; background:rgba(21,19,66,.5); }
.ctx__cover i:nth-child(2){ top:28%; width:64%; }
.ctx__cover i:nth-child(3){ top:36%; width:52%; }
.ctx__cover::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:40%;
  background:linear-gradient(120deg,var(--cy),var(--pw) 55%,var(--vi));
  clip-path:ellipse(95% 72% at 72% 100%);
}
.ctx__meta p{ margin:0; }
.ctx__meta .ctx__file-t{ font-size:15.5px; font-weight:600; line-height:1.3; color:var(--ink); }
.ctx__meta .ctx__file-s{ margin-top:3px; font-size:13.5px; line-height:1.35; color:var(--ink-3); }
/* quiet metadata: no arrow, underline, link colour, cursor or hover */
.ctx__meta .ctx__open{ margin-top:5px; font-size:13.5px; font-weight:500; line-height:1.35; color:var(--ink-3); }

/* More air above the checks and between them, a step up in size
   (2026-09-15), and a check with a little depth: a soft top-lit green, a fine
   highlight on the rim, a small shadow and a crisp tick. */
/* at least 28px above the list; side by side, the list sits at the foot of
   its panel, level with the red verdict, so both panels end together */
.ctx__checks{ display:grid; gap:14px; margin:auto 0 0; padding:28px 0 0; list-style:none; }
.ctx__checks li{ position:relative; padding-left:38px; font-size:16.5px; line-height:1.45; color:var(--ink-2); }
.ctx__checks li::before{
  content:""; position:absolute; left:0; top:0;
  width:24px; height:24px; border-radius:50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.3 8.3l2.5 2.5 4.9-5.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat,
    linear-gradient(160deg,#2EBF7E 0%,#1D9A61 55%,#168552 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 3px 8px -3px rgba(23,144,90,.55);
  transition:filter var(--std) var(--ease), box-shadow var(--std) var(--ease);
}

.ctx__close{
  margin:clamp(40px,3.3vw,48px) auto 0;     /* 40–48px before the closing line */
  text-align:center;
  font-size:clamp(1.45rem,2.8vw,2.25rem);
  font-weight:600; line-height:1.2; letter-spacing:-.022em;
  color:var(--ink);
  text-wrap:balance;
}
/* the site's cyan → violet, darkened to hold on white (as .how__em) */
.ctx__em{
  background-image:linear-gradient(90deg,#1A7FBF,#4E53D6 52%,#7A45DA);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
@media (forced-colors:active){ .ctx__em{ background:none; color:inherit; } }

/* ------ side by side, from 990px of content */
@container ctx (min-width:990px){
  .ctx__task{ max-width:860px; }
  .ctx__pair{ max-width:none; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--ctx-g); }
  .ctx__fork{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--ctx-g);
    height:40px;
  }
  .ctx__fork::before{ bottom:auto; height:14px; background:rgba(61,57,168,.3); }
  .ctx__br{ --c:166,42,33; --a:.6; display:block; position:relative; }
  .ctx__br--ctx{ --c:84,80,222; }
  /* each branch: from the centre of the gap along the top, then down into
     its panel's centre; the two meet under the stem */
  .ctx__br::before{
    content:""; position:absolute; top:12px; bottom:4px;
    left:50%; right:calc(var(--ctx-g) / -2 - 1px);
    border:0 solid rgba(var(--c),var(--a));
    border-top-width:2px; border-left-width:2px;
    border-top-left-radius:14px;
    transition:border-color var(--std) var(--ease);
  }
  .ctx__br--ctx::before{
    left:calc(var(--ctx-g) / -2 - 1px); right:50%;
    border-left-width:0; border-right-width:2px;
    border-top-left-radius:0; border-top-right-radius:14px;
  }
  .ctx__br::after{
    content:""; position:absolute; bottom:-4px; left:50%;
    width:8px; height:8px; margin-left:-3px; border-radius:50%;
    background:rgba(var(--c),calc(var(--a) + .3));
    transition:background-color var(--std) var(--ease);
  }
  .ctx__br--ctx::after{ margin-left:-5px; }
}

/* ------ phones */
@container ctx (max-width:520px){
  .ctx__p{ padding:18px; border-radius:18px; }
  .ctx__task{ gap:12px; padding:12px 16px 12px 12px; }
  .ctx__task-ic{ width:40px; height:40px; }
}
@container ctxp (max-width:419px){
  .ctx__prompt{ padding:14px 14px 12px; }
  .ctx__prompt > p{ font-size:15px; line-height:1.6; }
  .ctx__stk{ --rot:-4deg; }
  .ctx__tiles{ grid-template-columns:1fr; }
  .ctx__file{ gap:14px; padding:12px 14px; }
  .ctx__cover{ width:56px; }
}

/* ------ hover: fine pointers only, and never the only way to see anything */
@media (hover:hover) and (pointer:fine){
  .ctx__p:hover{
    translate:0 -3px;
    border-color:var(--pbh);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 28px 52px -32px var(--psh);
  }
  .ctx__p--chat:hover .ctx__ring{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M46 36C18 37 3 31 4 21 5 9 48 2 104 3c56 1 93 7 92 18-1 11-40 17-97 16-27-1-49-2-71-5' fill='none' stroke='%23A62A21' stroke-width='1.9' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  }
  .ctx__p--chat:hover .ctx__under{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.5C38 3 82 6.5 124 4.5S182 3.5 198 5' fill='none' stroke='%23A62A21' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  }
  .ctx__p:hover .ctx__stk{
    rotate:calc(var(--rot) + 2deg);
    box-shadow:4px 5px 0 -1px rgba(var(--c),.32), 0 14px 22px -12px rgba(var(--c),.5);
  }
  .ctx__p--ctx:hover .ctx__tiles li{ box-shadow:inset 0 0 0 1px rgba(61,57,168,.2), 0 8px 18px -14px rgba(61,57,168,.6); }
  /* a single tile: a small lift, a brand hairline, the icon comes forward.
     Scoped under .ctx__p--ctx so it outranks the panel-hover rule above, which
     is also true whenever a tile is hovered. */
  .ctx__p--ctx .ctx__tiles li:hover{
    translate:0 -2px;
    background-color:#FCFCFF;
    box-shadow:inset 0 0 0 1.5px rgba(61,57,168,.42), 0 12px 22px -14px rgba(61,57,168,.6);
  }
  .ctx__p--ctx .ctx__tiles li:hover svg{ scale:1.1; color:#2F2B96; }
  .ctx__p--ctx:hover .ctx__checks li::before{
    filter:saturate(1.12) brightness(.96);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 4px 10px -3px rgba(23,144,90,.6), 0 0 0 4px rgba(31,157,99,.13);
  }
  /* the task (2026-09-15, user request): a light lift, a firmer hairline, the
     icon tile tints, and both branches brighten — it feeds both panels. The
     stem stretches up with it, so no gap opens under the lifted bar. */
  .ctx__task:hover{
    translate:0 -2px;
    border-color:rgba(61,57,168,.36);
    box-shadow:0 20px 38px -26px rgba(61,57,168,.6);
  }
  .ctx__task:hover .ctx__task-ic{
    background-color:#ECEEFF; color:var(--brand-ink);
    box-shadow:inset 0 0 0 1px rgba(61,57,168,.22);
  }
  .ctx:has(.ctx__task:hover) .ctx__fork::before{ top:-2px; }
  .ctx:has(.ctx__task:hover) .ctx__br{ --a:.95; }
  /* the connector brightens toward the hovered panel */
  .ctx:has(.ctx__p:hover) .ctx__br{ --a:.28; }
  .ctx:has(.ctx__p--chat:hover) .ctx__br--chat,
  .ctx:has(.ctx__p--ctx:hover) .ctx__br--ctx{ --a:1; }
}
@media (prefers-reduced-motion:reduce){
  .ctx__p:hover{ translate:none; }
  .ctx__p:hover .ctx__stk{ rotate:var(--rot); }
  .ctx__p--ctx .ctx__tiles li:hover{ translate:none; }
  .ctx__p--ctx .ctx__tiles li:hover svg{ scale:none; }
  .ctx__task:hover{ translate:none; }
  .ctx:has(.ctx__task:hover) .ctx__fork::before{ top:0; }
}

/* ------------------------------------------------------------ what we do --

   Rebuilt 2026-09-15 to the user's concept image and locked copy (replacing
   the .band rows). Three complementary capabilities, not steps: an unordered
   list, no numbers, no line joining them, so it cannot read as a second
   How we work. Open editorial columns: a thin accent line on top, hairlines
   between, no card and no ground. Each capability carries its own hue
   (cyan · periwinkle · violet). The text and icon colours are darkened
   derivatives that hold on the wash: 5.5 / 6.0 / 5.7:1 on white.

   Mobile first: one column, the accent lines doubling as the separators.
   From 700px each capability becomes a row, name left and text right, so
   the measure stays readable. From 1100px, three columns on a subgrid, so
   the titles, descriptions and outcomes line up across all three. The
   opening splits earlier, at 1000px.                                      */

#what{
  --svc-h:clamp(2.05rem, 1.2rem + 2.7vw, 3.375rem);   /* 33px → 54px */
  --svc-t:240ms;
}
.svc__head{ margin-bottom:clamp(44px,5vw,72px); }
.svc__head h2{
  max-width:13em;
  font-size:var(--svc-h);
  line-height:1.07;
  letter-spacing:-.03em;
}
.svc__intro{
  max-width:34em;
  margin:20px 0 0;
  font-size:var(--t-lead);
  line-height:1.62;
  color:var(--ink-2);
  text-wrap:pretty;
}

.svc{
  --pad:0px;                 /* inner padding, so the hover wash has room */
  display:grid;
  gap:clamp(40px,6vw,52px);
  margin:0; padding:0;
  list-style:none;
}
.svc__i{
  /* --c drives the wash, --a the label and icon, --l the accent line */
  --c:85,200,243; --a:#156EA8;
  --l:linear-gradient(90deg,#55C8F3,#6FA6F6);
  position:relative;
  isolation:isolate;
  display:flex; flex-direction:column;
  padding:clamp(28px,3vw,40px) var(--pad) 0;
}
.svc__i--organise{ --c:126,130,244; --a:#4E53D6; --l:linear-gradient(90deg,#6A9CF5,#7E82F4 55%,#8E7FF5); }
.svc__i--build{    --c:169,122,246; --a:#7A45DA; --l:linear-gradient(90deg,#957CF6,#A97AF6); }

/* the accent line spans the text column only, not the padding */
.svc__i::before{
  content:"";
  position:absolute; top:0; left:var(--pad); right:var(--pad);
  height:2px; border-radius:2px;
  background:var(--l);
  opacity:.62;
  transition:opacity var(--svc-t) var(--ease);
}
/* the hover wash sits behind everything and stays hidden until a fine pointer rests on the capability */
.svc__i::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(var(--c),.085),rgba(var(--c),.04) 55%,rgba(var(--c),0));
  opacity:0;
  transition:opacity var(--svc-t) var(--ease);
}

/* The glyphs sit about 5 units inside their 40-unit box, so a 42px box draws
   a 29–33px mark. The negative margin puts the mark on the text edge. */
.svc__ic{
  display:block; flex:none;
  width:42px; height:42px;
  margin-left:-5px;
  color:var(--a);
  transition:translate var(--svc-t) var(--ease);
}
.svc__ic *{ fill:none; stroke:currentColor; stroke-width:1.45; stroke-linecap:round; stroke-linejoin:round; }
.svc__lab{
  margin:20px 0 0;
  font-size:clamp(1.0625rem, .8rem + .55vw, 1.25rem);   /* 17px → 20px */
  font-weight:600;
  line-height:1.2;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--a);
  transition:translate var(--svc-t) var(--ease);
}
.svc__i h3{
  max-width:13em;
  margin:12px 0 0;
  font-size:clamp(1.375rem, 1rem + 1vw, 1.75rem);       /* 22px → 28px */
  line-height:1.2;
  letter-spacing:-.018em;
}
.svc__txt{
  max-width:36em;
  margin:14px 0 0;
  font-size:clamp(1.0625rem, 1rem + .18vw, 1.125rem);   /* 17px → 18px */
  line-height:1.65;
  color:var(--ink-2);
  text-wrap:pretty;
}
/* smaller than the body and heavier, introduced by the site's cyan → violet */
.svc__out{
  margin:auto 0 0;
  padding-top:28px;
  font-size:1rem;
  font-weight:500;
  line-height:1.45;
  word-spacing:.08em;        /* Outfit's space is narrow; the · needs air */
  color:var(--ink);
}
.svc__out::before{
  content:"";
  display:block;
  width:28px; height:3px;
  margin-bottom:14px;
  border-radius:3px;
  background:linear-gradient(90deg,var(--cy),var(--pw) 55%,var(--vi));
}

/* 700–1099: a row per capability. Label, title and text start on one line,
   and the outcome sits under the text. */
@media (min-width:700px) and (max-width:1099px){
  .svc{ --pad:clamp(20px,2.6vw,26px); gap:12px; margin-inline:calc(var(--pad) * -1); }
  .svc__i{
    display:grid;
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    grid-template-areas:"ic ." "lab txt" "ttl txt" ". out";
    grid-template-rows:auto auto 1fr auto;
    column-gap:clamp(28px,4vw,48px);
    align-items:start;
    padding-bottom:32px;
  }
  .svc__ic{ grid-area:ic; }
  .svc__lab{ grid-area:lab; }
  .svc__i h3{ grid-area:ttl; }
  .svc__txt{ grid-area:txt; margin-top:20px; }
  .svc__out{ grid-area:out; margin:0; }
}

@media (min-width:1000px){
  .svc__head{
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
    column-gap:clamp(40px,5vw,80px);
    align-items:end;
  }
  .svc__intro{ max-width:30rem; margin:0; padding-bottom:.35em; }
}

/* 1100, not 1000: at 1024 a third of the row left the first description at
   about 28 characters a line. The row layout keeps it near 50 there. */
@media (min-width:1100px){
  .svc{
    --pad:clamp(20px,2vw,30px);
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;
    margin-inline:calc(var(--pad) * -1);
  }
  .svc__i{ padding-bottom:30px; }
  .svc__i + .svc__i{ border-left:1px solid var(--rule); }
  /* One row per part, shared by all three. The outcomes then start on one
     line with their dashes level, whatever wraps above them. */
  @supports (grid-template-rows:subgrid){
    .svc{ grid-template-rows:repeat(5,auto); }
    .svc__i{ display:grid; grid-row:span 5; grid-template-rows:subgrid; row-gap:0; }
    .svc__out{ margin-top:0; }
  }
}

/* Hover belongs to fine pointers only. A wash fades in, the line firms and
   the icon and label rise 2px. Nothing changes size, so nothing reflows.
   The columns are not links, so the cursor stays the default. */
@media (hover:hover) and (pointer:fine){
  .svc__i:hover::before{ opacity:1; }
  .svc__i:hover::after{ opacity:1; }
  .svc__i:hover .svc__ic,
  .svc__i:hover .svc__lab{ translate:0 -2px; }
}
@media (prefers-reduced-motion:reduce){
  .svc__i:hover .svc__ic,
  .svc__i:hover .svc__lab{ translate:none; }
}

/* ------------------------------------------------------- selected work --

   Three case studies, one row each, text and visual alternating. Built in
   HTML and CSS rather than inline SVG: every label is set in px (or in
   container units with a px floor) and renders at that size at any width,
   so the viewBox type-scaling faults recorded in DESIGN.md cannot happen
   here, and each visual needs one build rather than two.

   Namespaces are deliberate: nothing here reuses `.ctx`, the context
   comparison above. `.rv` goes on the row only — it
   animates transform, and a second transform on an artefact would replace
   that artefact's own rather than compose with it.                        */

.work__row{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);
  gap:clamp(28px,4.4vw,64px);
  align-items:center;
  padding-block:clamp(44px,5.4vw,76px);
  border-top:1px solid var(--rule);
}
.work__row:last-child{ padding-bottom:0; }

/* Enlarged 2026-09-12 at the user's request: the numeral reads as a real
   index (30px) and the label at 17px, rather than a 13px caption. */
.work__lab{
  display:flex; align-items:center; gap:16px;
  margin:0 0 20px;
  font-size:clamp(.9375rem,1.2vw,1.0625rem); font-weight:600; line-height:1.1;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2);
}
.work__n{
  display:inline-flex; align-items:center; gap:16px;
  font-size:clamp(1.5rem,2.2vw,1.875rem); line-height:1;
  letter-spacing:-.02em;
  color:var(--brand-ink);
  font-variant-numeric:tabular-nums;
}
/* a drawn dot, never content:"·" — generated text is announced */
.work__n::after{
  content:""; width:5px; height:5px; border-radius:50%;
  background:currentColor; opacity:.55;
}
.work__txt h3{ font-size:clamp(1.35rem,2.2vw,1.7rem); margin-bottom:14px; }
/* The outcome is the row's claim: a statement under a short rule, in the
   eyebrow vocabulary of this page. A side stripe here read as a stock card
   accent, and the detector flagged it as exactly that. */
.work__out{
  position:relative;
  margin-top:20px; padding-top:14px;
  font-weight:600; color:var(--ink);
  text-wrap:pretty;
}
.work__out::before{
  content:""; position:absolute; left:0; top:0;
  width:36px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--cy),var(--pw),var(--vi));
}
.work__ev{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:22px 0 0; padding:0; list-style:none;
}
/* Evidence, not controls: hairline and an 8px radius so it never reads as a
   pill button. ~~No hover state~~ — superseded 2026-09-10 at the user's
   request: on hover a light line crowns the tag, a sheen crosses it and its
   edge takes the brand hue. Still no pointer cursor and no press state,
   nothing that promises an action. */
.work__ev li{
  position:relative; overflow:hidden;
  padding:6px 12px;
  border:1px solid var(--rule-2); border-radius:8px;
  background:rgba(255,255,255,.55);
  font-size:var(--t-xs); font-weight:500;
  color:var(--ink-2);
  transition:
    border-color var(--std) var(--ease), background-color var(--std) var(--ease),
    color var(--std) var(--ease), box-shadow var(--slow) var(--ease),
    translate var(--std) var(--ease);
}
.work__ev li::before{
  content:""; position:absolute; left:8%; right:8%; top:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--cy), var(--pw), var(--vi), transparent);
  opacity:0;
  transition:opacity var(--std) var(--ease);
}
.work__ev li::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.95) 47%, rgba(169,122,246,.16) 55%, transparent 70%);
  translate:-110% 0;
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .work__ev li:hover{
    border-color:rgba(126,130,244,.5);
    background-color:#fff;
    color:var(--ink);
    translate:0 -1px;
    box-shadow:
      0 0 0 3px rgba(126,130,244,.09),
      0 -4px 14px -6px rgba(85,200,243,.45),
      0 8px 20px -8px rgba(99,91,240,.4),
      inset 0 1px 0 #fff;
  }
  .work__ev li:hover::before{ opacity:1; }
  .work__ev li:hover::after{ translate:110% 0; transition:translate .8s var(--ease); }
}
@media (prefers-reduced-motion:reduce){
  .work__ev li:hover{ translate:none; }
  .work__ev li::after{ display:none; }
}

/* ------------------------------------------------ 01 · meeting intelligence

   Simplified 2026-09-10 to the user's second reference: six glass nodes on
   one continuous line — meeting, decisions, actions and owners, task
   tracker, project history, next meeting — and a return arc that closes the
   loop. No box: the field melts into the section, a recorded exception to
   the field rule (see DESIGN.md).

   Geometry lives in one coordinate space. The stage keeps the SVG's aspect
   ratio (1000 × 344) and is the query container, so 1 unit = .1cqw: every
   node is placed and sized in the same units the connectors are drawn in,
   and they meet at any width with no measuring script. Labels are set in
   px (11px floor), so text never scales with the drawing. Below 680px the
   line gives way to a vertical list with its own loop.                   */

/* Restructured twice on 2026-09-24. First to the video row's shape — a header
   pair, then a full-width artefact — which left the tracker marooned below a
   row with 330px of dead space on its right. The user's verdict was fair:
   "layout is horrible now". So the row is now one grid of three placed items.
   The copy spans both rows on the left; the loop takes the top right; the
   tracker takes the space under the loop that was empty, CLIPPED to a preview.
   Opening it moves it to a full-width row of its own, which is the only way a
   workspace this dense stays readable without shrinking its type.

   `align-items:start` is the user's "raise the diagram" from earlier the same
   day: the loop had been centred in a row the copy makes twice as tall, so it
   floated in the middle of empty space. */
.work__row--feature{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,2fr);
  column-gap:clamp(28px,4.4vw,64px);
  row-gap:clamp(20px,2.4vw,34px);
  align-items:start;
}
.work__row--feature > .work__txt{ grid-column:1; grid-row:1 / span 2; }
.work__row--feature > .ml{ grid-column:2; grid-row:1; }
.ops__proof{ grid-column:2; grid-row:2; min-width:0; }
/* open: out of the column and across the whole section */
.work__row--feature.is-wide > .ops__proof{ grid-column:1 / -1; grid-row:3; }
.work__intro{ margin-bottom:10px; }
.work__pts{
  display:grid; gap:9px;
  margin:0; padding:0; list-style:none;
  line-height:1.5;
}
.work__pts li{ position:relative; padding-left:22px; }
/* a drawn dot on the first line, in the eyebrow's cyan → violet */
.work__pts li::before{
  content:""; position:absolute; left:3px; top:.62em;
  width:7px; height:7px; border-radius:50%;
  background:linear-gradient(135deg,var(--cy),var(--vi));
}
/* the loop's field and disc bleed past the figure on purpose; the text must
   stay above them wherever the two meet */
.work__row--feature > .work__txt{ position:relative; z-index:2; }

.ml{
  position:relative; isolation:isolate;
  margin:0;
  container:ml / inline-size;
}

/* the field: lavender and blue haze, no edge, masked to nothing before
   the figure's own bounds end. No white bloom and no disc (removed
   2026-09-11 at the user's request). */
.ml__field{
  position:absolute; inset:-16% -4% -18% -9%; z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(30% 38% at 20% 66%, rgba(126,130,244,.15), transparent 70%),
    radial-gradient(28% 40% at 86% 26%, rgba(169,122,246,.15), transparent 70%),
    radial-gradient(42% 44% at 62% 92%, rgba(85,200,243,.09), transparent 72%),
    radial-gradient(60% 60% at 50% 50%, rgba(238,236,255,.75), transparent 78%);
  -webkit-mask-image:radial-gradient(closest-side, #000 58%, transparent);
          mask-image:radial-gradient(closest-side, #000 58%, transparent);
}

.ml__stage{ position:relative; aspect-ratio:1000 / 344; }

.ml__wires{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; overflow:visible;
}
.ml__w  { fill:none; stroke-width:3; stroke-linecap:round; transition:opacity var(--slow) var(--ease); }
/* one gradient across the whole thread, so the segments read as one line */
.ml__w--a,.ml__w--b,.ml__w--c,.ml__w--d,.ml__w--e{ stroke:url(#mlW); }
.ml__tip{ fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.ml__tip--e{ stroke:#A24FE6; }
.ml__dot{ stroke:#fff; stroke-width:2.5; transform-box:fill-box; transform-origin:center; }
/* a light that runs along a connector on hover; pathLength 1, one dash */
.ml__comet{
  fill:none; stroke:#fff; stroke-width:5; stroke-linecap:round;
  stroke-dasharray:.07 1.3; stroke-dashoffset:.07;
  opacity:0; pointer-events:none;
}

/* ------ the nodes */

.ml__steps{
  position:absolute; inset:0; z-index:1;
  margin:0; padding:0; list-style:none;
}
.ml__step{
  --r:56;
  position:absolute;
  left:calc(var(--cx) * .1cqw);
  top:calc((var(--cy) - var(--r)) * .1cqw);
  width:calc(var(--r) * .2cqw);
  translate:-50% 0;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}
.ml__step--1{ --cx:70;  --cy:122; --t1:#F5FAFF; --t2:#DCEAFF; --lit:64,150,255; }
.ml__step--2{ --cx:242; --cy:96; --t1:#F4F8FF; --t2:#DAE6FF; --lit:78,132,252; }
.ml__step--3{ --cx:414; --cy:148; --t1:#F6F6FF; --t2:#E1E0FF; --lit:104,108,248; }
.ml__step--4{ --cx:586; --cy:96; --t1:#F7F4FF; --t2:#E4DDFF; --lit:122,96,245; }
.ml__step--5{ --cx:758; --cy:148; --t1:#F8F3FF; --t2:#E8DBFF; --lit:139,90,242; }
.ml__step--6{ --cx:930; --cy:122; --t1:#FAF3FF; --t2:#ECDAFF; --lit:160,84,238; }
/* Where the thread passes under a node, the node drops and its label goes
   above it: every label sits on the side away from its curve, and the
   drawing mirrors about the baseline. The orb stays at --cy by pinning the
   item's bottom edge (the orb's bottom) to the stage instead of its top;
   344 is the stage height in units. */
.ml__step--3,.ml__step--5{
  top:auto;
  bottom:calc((344 - var(--cy) - var(--r)) * .1cqw);
  flex-direction:column-reverse;
}
.ml__step--3 .ml__lab,
.ml__step--5 .ml__lab{ margin-top:0; margin-bottom:clamp(10px,1.5cqw,16px); }
.ml__step--3::before,
.ml__step--5::before{ top:auto; bottom:calc(var(--r) * -.07cqw); }

/* the bloom that rises behind a node on hover */
.ml__step::before{
  content:""; position:absolute; z-index:-1;
  left:50%; top:calc(var(--r) * -.07cqw); width:170%; aspect-ratio:1;
  translate:-50% 0; scale:.7;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(var(--lit),.30), rgba(var(--lit),.10) 55%, transparent);
  opacity:0;
  transition:opacity var(--slow) var(--ease), scale .6s var(--ease);
  pointer-events:none;
}

.ml__orb{
  --ring:max(4px,.7cqw);
  position:relative;
  display:grid; place-items:center;
  width:100%; aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(110% 80% at 50% -6%, rgba(255,255,255,.95), rgba(255,255,255,0) 58%),
    radial-gradient(circle at 50% 62%, var(--t1) 0%, var(--t2) 100%);
  box-shadow:
    0 0 0 var(--ring) rgba(255,255,255,.74),
    0 0 0 calc(var(--ring) + 1px) rgba(126,130,244,.10),
    0 1.9cqw 4.4cqw -1.6cqw rgba(70,62,190,.34),
    inset 0 -1.1cqw 2.2cqw rgba(116,100,232,.13),
    inset 0 1px 1px #fff;
  transition:
    translate .5s var(--ease), scale .5s var(--ease),
    box-shadow .5s var(--ease), opacity var(--std) var(--ease);
}
/* the gradient ring that lights on hover */
.ml__orb::before{
  content:""; position:absolute;
  inset:calc(var(--ring) * -1 - 1px);
  padding:2px; border-radius:50%;
  background:conic-gradient(from 200deg, #55C8F3, #7E82F4, #A97AF6, #55C8F3);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity:0;
  transition:opacity var(--slow) var(--ease);
}
/* light from above, brightening the crown of the glass on hover */
.ml__orb::after{
  content:""; position:absolute; inset:0; z-index:1;
  border-radius:50%;
  background:radial-gradient(72% 52% at 50% 0%, #fff, rgba(255,255,255,0) 72%);
  opacity:0;
  transition:opacity var(--slow) var(--ease);
}
/* a specular sweep across the glass, clipped to the circle */
.ml__sheen{
  position:absolute; inset:0; z-index:1;
  border-radius:50%; overflow:hidden;
  pointer-events:none;
}
.ml__sheen::before{
  content:""; position:absolute; inset:-25%;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.85) 50%, transparent 62%);
  translate:-105% 0;
}
.ml__ic{
  position:relative; z-index:2;
  width:45%; height:45%;
  overflow:visible;
  filter:drop-shadow(0 2px 4px rgba(70,62,190,.16));
  transition:translate .5s var(--ease), scale .5s var(--ease);
}

.ml__lab{
  width:max-content;
  margin-top:clamp(10px,1.5cqw,16px);
  /* 11–13px until 2026-09-24. Raised with .ml__sub so the pair keeps its
     relationship: the quiet line under a label was asked to grow, and a
     label smaller than its own subtitle inverts the hierarchy. */
  font-size:clamp(12.5px,1.55cqw,14.5px); font-weight:600;
  line-height:1.3; letter-spacing:.075em; text-transform:uppercase;
  color:var(--ink);
  transition:color var(--std) var(--ease);
}
.ml__sub{
  display:block; margin-top:4px;
  /* 11–12.5px, then 13–14px on 2026-09-15, then this on 2026-09-24 — both at the
     user's request. With the return arc gone, this line is what closes the
     sequence, so it earns the size. */
  font-size:clamp(15px,1.9cqw,17px); font-weight:400;
  line-height:1.35; letter-spacing:0; text-transform:none;
  color:var(--ink-3);
}

/* ------ hover: lift, ring, crown light, bloom, sweep — and the node's
   a light runs once along its outgoing connector. The other nodes and
   connectors step back a little so the one under the pointer leads. */
@media (hover:hover) and (pointer:fine){
  .ml__step:hover .ml__orb{
    translate:0 -6px; scale:1.05;
    box-shadow:
      0 0 0 var(--ring) rgba(255,255,255,.92),
      0 0 0 calc(var(--ring) + 1px) rgba(var(--lit),.20),
      0 0 4.4cqw 1cqw rgba(var(--lit),.26),
      0 2.8cqw 5.2cqw -1.6cqw rgba(var(--lit),.42),
      inset 0 -1.1cqw 2.2cqw rgba(var(--lit),.14),
      inset 0 1px 1px #fff;
  }
  .ml__step:hover::before{ opacity:1; scale:1; }
  .ml__step:hover .ml__orb::before,
  .ml__step:hover .ml__orb::after{ opacity:1; }
  .ml__step:hover .ml__sheen::before{ translate:105% 0; transition:translate .9s var(--ease); }
  .ml__step:hover .ml__ic{ translate:0 -1px; scale:1.08; }
  .ml__step:hover .ml__lab{ color:var(--brand-ink); }
  .ml__steps:has(.ml__step:hover) .ml__step:not(:hover) .ml__orb{ opacity:.66; }

  /* the connectors step back too, all but the segment that wraps the
     hovered node (Meeting takes the first, Next meeting the last) */
  .ml:has(.ml__step:hover) .ml__w{ opacity:.4; }
  .ml:has(.ml__step--1:hover, .ml__step--2:hover) .ml__w--a,
  .ml:has(.ml__step--3:hover) .ml__w--b,
  .ml:has(.ml__step--4:hover) .ml__w--c,
  .ml:has(.ml__step--5:hover) .ml__w--d,
  .ml:has(.ml__step--6:hover) .ml__w--e{ opacity:1; }
  .ml:has(.ml__step--1:hover, .ml__step--2:hover) .ml__comet--a,
  .ml:has(.ml__step--3:hover) .ml__comet--b,
  .ml:has(.ml__step--4:hover) .ml__comet--c,
  .ml:has(.ml__step--5:hover) .ml__comet--d,
  .ml:has(.ml__step--6:hover) .ml__comet--e{ animation:mlComet 1.15s var(--ease) both; }
}

/* ------ the sequence: the line draws left to right and each node lands as
   it arrives and the next meeting lands. ~~A return arc then closed the loop
   back to the start; removed 2026-09-24 at the user's request.~~ Once. No script
   means no .anim, so the resting CSS
   above IS the final frame. Held until main.js adds .is-run (on screen, tab
   visible); a paused animation freezes its pending delay too, so scrolling
   away and back resumes.
   Sped up 2026-09-14 at the user's request — the reader should never wait.
   Every delay and duration is the original choreography × --pace: at .4 the
   first node lands at .1s and the loop rests at about 1.75s (was 4.4s), in
   the same order with the same overlaps. One number to retune. */
.ml{ --pace:.4; }
.anim .ml__cel{
  animation-duration:calc(var(--pace) * .6s); animation-timing-function:var(--ease);
  animation-fill-mode:both; animation-play-state:paused;
}
.anim .ml.is-run .ml__cel{ animation-play-state:running; }
.anim .ml__step{ animation-name:mlIn; }
.anim .ml__w   { stroke-dasharray:1 1; animation-name:mlDraw; }
.anim .ml__dot { animation-name:mlPop; animation-duration:calc(var(--pace) * .34s); }
.anim .ml__tip { animation-name:mlFade; animation-duration:calc(var(--pace) * .24s); }

.ml__step--1{ animation-delay:calc(var(--pace) * .25s); }
.ml__w--a{ animation-delay:calc(var(--pace) * .55s); }   .ml__dot--1{ animation-delay:calc(var(--pace) * .72s); }
.ml__step--2{ animation-delay:calc(var(--pace) * .8s); } .ml__dot--2{ animation-delay:calc(var(--pace) * 1.22s); }
.ml__w--b{ animation-delay:calc(var(--pace) * 1.25s); }  .ml__step--3{ animation-delay:calc(var(--pace) * 1.4s); }  .ml__dot--3{ animation-delay:calc(var(--pace) * 1.68s); }
.ml__w--c{ animation-delay:calc(var(--pace) * 1.7s); }   .ml__step--4{ animation-delay:calc(var(--pace) * 1.85s); } .ml__dot--4{ animation-delay:calc(var(--pace) * 2.13s); }
.ml__w--d{ animation-delay:calc(var(--pace) * 2.15s); }  .ml__step--5{ animation-delay:calc(var(--pace) * 2.3s); }  .ml__dot--5{ animation-delay:calc(var(--pace) * 2.58s); }
.ml__w--e{ animation-delay:calc(var(--pace) * 2.6s); }   .ml__step--6{ animation-delay:calc(var(--pace) * 2.72s); } .ml__tip--e{ animation-delay:calc(var(--pace) * 2.84s); }
/* durations need the .anim weight, or .anim .ml__cel wins */
.anim .ml__w--a{ animation-duration:calc(var(--pace) * .72s); }
.anim .ml__w--b,.anim .ml__w--c,.anim .ml__w--d{ animation-duration:calc(var(--pace) * .46s); }
.anim .ml__w--e{ animation-duration:calc(var(--pace) * .26s); }

@keyframes mlIn   { from{ opacity:0; transform:translateY(10px) scale(.9); } to{ opacity:1; transform:none; } }
@keyframes mlDraw { from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
@keyframes mlPop  { from{ opacity:0; transform:scale(.3); } to{ opacity:1; transform:none; } }
@keyframes mlFade { from{ opacity:0; } to{ opacity:1; } }
@keyframes mlComet{
  0%  { stroke-dashoffset:.07; opacity:0; }
  12% { opacity:1; }
  82% { opacity:1; }
  100%{ stroke-dashoffset:-1; opacity:0; }
}

@media (max-width:1180px){
  .work__row--feature{ grid-template-columns:1fr; }
  .work__row--feature > .work__txt,
  .work__row--feature > .ml,
  .ops__proof,
  .work__row--feature.is-wide > .ops__proof{ grid-column:1; grid-row:auto; }
  .work__row--feature > .work__txt{ max-width:62ch; }
  .ml{ width:100%; max-width:980px; margin:clamp(20px,5vw,48px) auto 0; }
}

/* ------ narrow: a vertical list. The line runs down through the node
   centres. ~~A return arc on the left brought the last node back to the first;
   removed 2026-09-24 with the desktop arc, so the diagram reads the same way at
   every width.~~ Rows are fixed at the node's height so the line stays exact. */
@container ml (max-width:679px){
  .ml__stage{ aspect-ratio:auto; }
  .ml__wires{ display:none; }
  .ml__steps{
    position:relative; inset:auto;
    display:grid; gap:18px;
    padding:0 0 0 30px;
  }
  .ml__step{
    position:relative; left:auto; top:auto; bottom:auto; translate:none;
    width:auto; min-height:60px;
    flex-direction:row; gap:16px;
    text-align:left;
  }
  .ml__step::before,
  .ml__step--3::before,
  .ml__step--5::before{ left:30px; top:-25px; bottom:auto; width:110px; }
  .ml__step--3 .ml__lab,
  .ml__step--5 .ml__lab{ margin:0; }
  .ml__orb{ --ring:4px; flex:none; width:60px; }
  .ml__orb{
    box-shadow:
      0 0 0 4px rgba(255,255,255,.74),
      0 0 0 5px rgba(126,130,244,.12),
      0 10px 22px -10px rgba(70,62,190,.36),
      inset 0 -6px 12px rgba(116,100,232,.13),
      inset 0 1px 1px #fff;
  }
  .ml__lab{ width:auto; margin:0; font-size:13.5px; }
  .ml__lab br{ display:none; }
  .ml__sub{ font-size:15px; }
  /* the forward line, through the node centres */
  .ml__steps::before{
    content:""; position:absolute; left:59px; top:30px; bottom:30px; width:2px;
    background:linear-gradient(#3F9BF3,#7E82F4 50%,#A24FE6);
  }
}

@media (prefers-reduced-motion:reduce){
  .anim .ml__cel{ animation:none !important; }
  .ml__orb,.ml__ic,.ml__step::before{ transition:opacity var(--std) var(--ease), box-shadow var(--std) var(--ease); }
  .ml__step:hover .ml__orb,
  .ml__step:hover .ml__ic{ translate:none; scale:none; }
  .ml__sheen,.ml__comet{ display:none; }
}

/* ------------------------------------------------ the task tracker (.tt) --

   Added 2026-09-24. The artefact the meeting loop produces, sitting full
   width under the loop that describes it — the same shape the video row
   already had (header pair, then one full-width visual). Until now Operations
   was the only case with no artefact: the reel proves video production, and a
   flowchart was proving Operations, which is to say nothing was.

   Ported from planning/…/A09-meeting-dashboard-proof/dashboard-proof.html.
   That source is built for three fixed canvases and sizes everything in
   absolute px against them; none of that survives here. Sizes are set for the
   width the label will actually render at, and the three layouts are container
   queries on the figure, not viewport media queries, so the tracker reflows
   with its own column.

   Nothing here is interactive, by design: it is a product shot, not a toy.
   Default cursor, no hover, no focus stop. The chrome deliberately still
   LOOKS operational — a status that reads as mutable is the whole argument
   that this is a working surface rather than a report.

   Its palette is local. The page has no department colours, and these five
   were already contrast-checked in the source; only the blue moved, to the
   page's proven #156EA8 (5.5:1).                                          */

.tt{
  --tt-navy:#151342; --tt-ink:#28265c; --tt-ink2:#4b4977; --tt-ink3:#66648b;
  --tt-rule:#e3e5ef; --tt-rule2:#d5d8e7;
  --tt-brand:#5f5bdc; --tt-brand-ink:#3d39a8;
  --tt-canvas:#F3F6FF; --tt-paper:#fff;
  margin:0;
  /* The container moved to .tt__app on 2026-09-24: collapsed, that element is
     pinned to the full-width layout and scaled down, so the queries have to
     read the layout width it is composed at, not the box it is squeezed into. */
}
.tt__lab{
  display:flex; align-items:center; gap:14px;
  margin:0 0 16px;
  font-size:var(--t-xs); font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3);
}
.tt__lab::before{
  content:""; flex:none; width:36px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--cy),var(--vi));
}
/* The frame is the thing the view transition morphs when the tracker opens,
   so it carries the name. Reduced motion drops it and the change is instant. */
.tt__frame{
  /* The fade over a clipped preview is this element's ::after, so this element
     has to be its containing block. Without it the gradient resolved against a
     positioned ancestor further up and washed out the control below the frame
     instead of the foot of the frame. Fixed 2026-09-24. */
  position:relative;
  view-transition-name:tracker;
  border-radius:18px; overflow:hidden;
  background:#fff;
  box-shadow:0 0 0 1px rgba(21,19,66,.07), 0 34px 70px -40px rgba(21,19,66,.45);
  transition:box-shadow var(--slow) var(--ease);
}
/* Above the frame since 2026-09-24, at the user's request — under it, below
   the fold of a clipped preview and under the button, nobody read it. It is
   the line that keeps the figure honest, so it sits where the eye lands. */
.tt__cap{ margin:0 0 16px; max-width:76ch; font-size:var(--t-sm); color:var(--ink-3); }
/* Open, it runs the full width and the measure would only force a break that
   leaves one short line under a very wide frame. 2026-09-24. */
.ops__proof.is-open .tt__cap{ max-width:none; }

/* ---- the preview, and the control that opens it.
   Collapsed, the frame is cut off at --peek with the paper fading out, so it
   reads as a window onto something longer rather than a short screenshot. */
.ops__proof{ --peek:clamp(250px,26vw,340px); --mini-w:1120px; }
.ops__proof:not(.is-open) .tt__frame{ max-height:var(--peek); }
/* The fade belongs to the foot of the frame. It needs .tt__frame to be
   positioned, or it resolves against an ancestor and lands over the control
   below instead — which is exactly what it did until 2026-09-24. */
.ops__proof:not(.is-open) .tt__frame::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:120px;
  background:linear-gradient(rgba(243,246,255,0), var(--tt-canvas) 82%);
  pointer-events:none;
}
.tt__more{
  margin:14px 0 0;
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 17px;
  border:1px solid var(--rule); border-radius:999px;
  background:#fff; color:var(--brand-ink);
  font:inherit; font-size:var(--t-sm); font-weight:600;
  cursor:pointer;
  transition:border-color var(--std) var(--ease), box-shadow var(--std) var(--ease);
}
.tt__more:hover{ border-color:var(--cy); box-shadow:0 10px 24px -18px rgba(21,19,66,.6); }
.tt__more:focus-visible{ outline:2px solid var(--vi); outline-offset:3px; }
/* The frame answers its own control, so the two read as one object. It is the
   only hover in this figure: nothing inside the workspace responds, because
   nothing inside it does anything. */
@media (hover:hover) and (pointer:fine){
  .ops__proof:not(.is-open):has(.tt__more:hover) .tt__frame,
  .ops__proof:not(.is-open):has(.tt__more:focus-visible) .tt__frame{
    box-shadow:0 0 0 1px rgba(95,91,220,.18), 0 42px 84px -42px rgba(21,19,66,.52);
  }
}
.tt__more-i{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.tt__more-i--shut{ display:none; }
.tt__more[aria-expanded="true"] .tt__more-i--open{ display:none; }
.tt__more[aria-expanded="true"] .tt__more-i--shut{ display:block; }
/* main.js already skips the transition here; dropping the name as well means
   nothing is even captured. */
@media (prefers-reduced-motion:reduce){
  .tt__frame{ view-transition-name:none; }
}
/* The preview is the real thing, smaller — 2026-09-24, at the user's request
   ("for the reduced size version i want the full width content, just with
   width reduced"). Collapsed in a column narrower than the layout it is
   composed at, .tt__app keeps its full 1120px width and is scaled to fit, so
   the preview shows the complete workspace — both filter rows, the counts, the
   open task in two columns — rather than the reduced layout the column width
   would otherwise select. Its type is scaled with it and is not meant to be
   read at this size; the control underneath is what makes that fair. Open, the
   scale and the pinned width both drop away and every label renders at the
   size it is set. main.js writes --k, because CSS cannot divide one length by
   another to get a number. */
.tt__app{ cursor:default; container:tt / inline-size; }
.ops__proof.is-mini .tt__app{
  width:var(--mini-w,1120px);
  transform:scale(var(--k,1));
  transform-origin:top left;
}

/* ---- workspace bar */
.tt__bar{
  display:flex; align-items:center;
  height:56px; padding:0 20px;
  border-bottom:1px solid var(--tt-rule);
}
.tt__mark{ width:84px; height:19px; }
.tt__bar-name{
  margin-left:12px; padding-left:12px;
  border-left:1px solid var(--tt-rule);
  font-size:13px; color:var(--tt-ink3);
}
.tt__project{
  margin-left:28px; padding-left:18px;
  border-left:1px solid var(--tt-rule);
  display:flex; align-items:center; gap:6px;
  font-size:14px; font-weight:500; color:var(--tt-ink2);
}
.tt__project svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; }
.tt__search{
  margin-left:auto;
  display:flex; align-items:center; gap:8px;
  width:210px; height:36px; padding:0 12px;
  border:1px solid var(--tt-rule2); border-radius:9px;
  font-size:13px; color:var(--tt-ink3);
}
.tt__search svg{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; }
.tt__live{ margin-left:14px; display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--tt-ink3); }
.tt__live i{ width:8px; height:8px; border-radius:50%; background:#31b97a; box-shadow:0 0 0 4px rgba(49,185,122,.1); }

/* ---- page head */
/* Tinted canvas, white cards — 2026-09-24, at the user's request, and the same
   move the context comparison already makes: a pale blue ground so the task
   cards read as objects on a surface rather than white on white. Flat, not a
   gradient: the preview is clipped at an arbitrary height, and the fade below
   has to end on exactly this colour whatever that height turns out to be.
   Checked on the tint: --tt-ink3 holds 5.1:1 and --tt-ink2 7.7:1. */
.tt__main{ padding:18px 20px 20px; background:var(--tt-canvas); }
.tt__bar{ background:#fff; }
.tt__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.tt__h1{ margin:0; font-size:25px; line-height:1.1; letter-spacing:-.03em; font-weight:600; color:var(--tt-navy); }
.tt__sub{ margin:5px 0 0; font-size:14px; color:var(--tt-ink3); }
.tt__new{
  flex:none; height:38px; padding:0 17px; border-radius:9px;
  display:inline-flex; align-items:center;
  color:#fff; background:linear-gradient(135deg,#6461e4,#4c47c9);
  font-size:13.5px; font-weight:600;
  box-shadow:0 10px 24px -15px rgba(68,63,190,.72);
}

/* ---- filters. The two rows are the argument that responsibility is
   visible: who owns it, and which part of the business it belongs to. */
.tt__filters{
  margin-top:14px; padding:10px 2px;
  border-top:1px solid var(--tt-rule); border-bottom:1px solid var(--tt-rule);
  display:grid; gap:8px;
}
.tt__row{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.tt__flab{
  width:92px; flex:none;
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tt-ink3);
}
.tt__chip{
  height:30px; padding:0 11px;
  border:1px solid var(--tt-rule); border-radius:8px; background:#fff;
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:500; color:var(--tt-ink2);
}
.tt__chip.is-on{ color:var(--tt-brand-ink); border-color:rgba(61,57,168,.17); background:#eff0ff; }
.tt__av{
  width:18px; height:18px; border-radius:50%;
  display:grid; place-items:center;
  font-style:normal; font-size:10px; font-weight:600; color:#fff;   /* a decorative initial, not information: the name is beside it */
}
.tt__av--1{ background:#5e5ad8; } .tt__av--2{ background:#2d7da8; } .tt__av--3{ background:#9b5aad; }
.tt__av--4{ background:#2d8b71; } .tt__av--5{ background:#b66742; }

/* one colour per department, carried by both the filter chip and the tag on
   a task, so the two always agree */
.tt__chip--mk,.tt__tag--mk{ --c:#704ac8; --bg:#f2edff; --bd:#ded2fa; }
.tt__chip--hr,.tt__tag--hr{ --c:#a94750; --bg:#fff0f1; --bd:#f1d3d6; }
.tt__chip--fi,.tt__tag--fi{ --c:#8a5a06; --bg:#fff6df; --bd:#ecdba9; }
.tt__chip--op,.tt__tag--op{ --c:#156EA8; --bg:#eaf5fc; --bd:#cee5f2; }
.tt__chip--de,.tt__tag--de{ --c:#1f7a55; --bg:#e8f6ef; --bd:#cae7d9; }
.tt__chip--mk,.tt__chip--hr,.tt__chip--fi,.tt__chip--op,.tt__chip--de{
  color:var(--c); background:var(--bg); border-color:var(--bd);
}
.tt__count{ margin-left:auto; display:flex; gap:16px; font-size:13px; color:var(--tt-ink3); }
.tt__count > span{ display:flex; align-items:baseline; gap:5px; }
.tt__count b{ font-size:16px; font-weight:600; color:var(--tt-navy); font-variant-numeric:tabular-nums; }
.tt__count--go b{ color:var(--tt-brand-ink); }
.tt__status{
  margin-left:8px; padding-left:15px;
  border-left:1px solid var(--tt-rule);
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; color:var(--tt-ink2);
}
.tt__status svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; }

/* ---- the task list */
.tt__list{ margin-top:12px; display:grid; gap:8px; }
.tt__task{ border:1px solid var(--tt-rule); border-radius:13px; background:#fff; }
/* The open task leads on border, ring and shadow only. The source drew a 3px
   cyan to violet stripe across its top edge; it went on 2026-09-24, for the
   same reason the outcome rule replaced a side stripe elsewhere on this page —
   a coloured bar on one edge of a card reads as a stock accent, and the
   detector names it the most recognisable tell of a generated UI. This card is
   already the only one with a body; it does not need a flag as well. */
.tt__task--open{
  position:relative; overflow:hidden;
  border-color:#cfd2f6;
  box-shadow:0 0 0 1px rgba(95,91,220,.10), 0 16px 38px -28px rgba(61,57,168,.55);
}
.tt__task-head{
  padding:15px 18px 12px;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px 18px;
}
.tt__title{ margin:0; font-size:18px; line-height:1.3; font-weight:600; letter-spacing:-.01em; color:var(--tt-navy); }
.tt__side{ display:flex; align-items:center; gap:9px; }
.tt__due{
  display:grid; align-content:center;
  min-width:90px; padding:5px 12px; border-radius:9px;
  background:#fff6df; color:#8a5a06;
}
.tt__due i{ font-style:normal; font-size:11px; line-height:1; letter-spacing:.1em; text-transform:uppercase; font-weight:600; }
.tt__due b{ margin-top:3px; font-size:18px; line-height:1; font-weight:600; font-variant-numeric:tabular-nums; }
.tt__state,.tt__toggle{
  height:28px; padding:0 10px; border-radius:8px;
  display:inline-flex; align-items:center; gap:7px;
  white-space:nowrap;
}
.tt__state{ background:#eeedff; color:var(--tt-brand-ink); font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.tt__toggle{ background:#f5f6fa; color:var(--tt-ink2); font-size:12px; font-weight:500; }
.tt__state svg,.tt__toggle svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; }
.tt__meta{ grid-column:1 / -1; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.tt__tag{
  height:25px; padding:0 9px; border-radius:7px;
  display:inline-flex; align-items:center;
  font-size:12px; font-weight:500;
  background:#f3f4f8; color:var(--tt-ink2);
}
.tt__tag--who{ background:#f0efff; color:var(--tt-brand-ink); }
.tt__tag--mk,.tt__tag--hr,.tt__tag--fi,.tt__tag--op,.tt__tag--de{ background:var(--bg); color:var(--c); }

/* ---- the open task */
.tt__body{
  padding:15px 18px 17px;
  border-top:1px solid var(--tt-rule); background:#F7FAFF;
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.82fr); gap:24px;
}
.tt__h2{ margin:0 0 9px; font-size:13px; font-weight:600; color:var(--tt-ink2); }
.tt__decision{
  margin-bottom:13px; padding:11px 13px; border-radius:10px;
  background:#f0f1ff;
  display:flex; align-items:flex-start; gap:10px;
}
.tt__decision svg{ width:17px; height:17px; flex:none; margin-top:1px; fill:none; stroke:var(--tt-brand); stroke-width:1.9; }
.tt__decision b{ display:block; font-size:13px; color:var(--tt-brand-ink); }
.tt__decision p{ margin:3px 0 0; font-size:14px; line-height:1.35; color:var(--tt-ink); }
.tt__updates{ display:grid; gap:11px; }
.tt__u{ position:relative; padding-left:18px; display:grid; grid-template-columns:58px minmax(0,1fr); gap:12px; }
/* the dated spine: the newest update is the lit one */
.tt__u::before{
  content:""; position:absolute; left:0; top:6px;
  width:8px; height:8px; border-radius:50%;
  background:#fff; box-shadow:0 0 0 1px #bfc2da;
}
.tt__u:first-child::before{ background:var(--tt-brand); box-shadow:0 0 0 4px rgba(95,91,220,.11); }
.tt__when{ font-size:12px; color:var(--tt-ink3); font-variant-numeric:tabular-nums; }
.tt__u p{ margin:0; font-size:13.5px; line-height:1.42; color:var(--tt-ink2); }
.tt__u b{ color:var(--tt-navy); font-weight:600; }
.tt__right{ padding-left:22px; border-left:1px solid var(--tt-rule); }
.tt__docs{ display:grid; gap:7px; }
.tt__doc{
  min-height:36px; padding:0 10px;
  border:1px solid var(--tt-rule2); border-radius:9px; background:#fff;
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:500; color:var(--tt-brand-ink);
}
.tt__doc > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tt__doc svg{ width:14px; height:14px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; }
.tt__out{ margin-left:auto; color:var(--tt-ink3); }
.tt__review{ margin:11px 0 0; display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--tt-ink2); }
.tt__review svg{ width:16px; height:16px; flex:none; fill:none; stroke:var(--tt-brand); stroke-width:1.8; }
.tt__comment{ margin-top:11px; display:flex; gap:7px; }
.tt__input{
  flex:1; min-width:0; height:38px; padding:0 12px;
  border:1px solid var(--tt-rule2); border-radius:9px; background:#fff;
  display:flex; align-items:center;
  font-size:13px; color:var(--tt-ink3);
}
.tt__send{ width:40px; height:38px; flex:none; border-radius:9px; background:var(--navy-deep); display:grid; place-items:center; color:#fff; }
.tt__send svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; }

/* ---- the two closed tasks. They are what makes this a list of work rather
   than one card, so they stay at every width. */
.tt__task--shut{ min-height:52px; padding:0 16px; display:flex; align-items:center; gap:12px; }
.tt__title--shut{ margin:0; min-width:0; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tt__task--shut .tt__meta{ grid-column:auto; flex:none; }
.tt__task--shut .tt__tag{ height:23px; }
.tt__open{
  margin-left:auto; flex:none;
  height:24px; padding:0 10px; border-radius:999px;
  background:#eaf5fc; color:#156EA8;
  display:inline-flex; align-items:center;
  font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
}
.tt__toggle--shut{ flex:none; border:1px solid var(--tt-rule); background:transparent; }

/* ---- medium: the workspace chrome thins out and the open task goes
   vertical, documents running as a row under the updates rather than in a
   column beside them. */
/* 939, not 999: at a 1024 viewport the open tracker is 944px wide, and the
   full layout still fits there. Cutting at 999 meant opening it showed LESS
   than the scaled preview did, which reads as the control taking something
   away. Retuned 2026-09-24. */
@container tt (max-width:939px){
  .tt__bar-name,.tt__project,.tt__live{ display:none; }
  .tt__search{ margin-left:auto; }
  .tt__count{ display:none; }
  .tt__chip--5{ display:none; }
  .tt__body{ grid-template-columns:minmax(0,1fr); gap:0; }
  .tt__right{ margin-top:15px; padding:14px 0 0; border-left:0; border-top:1px solid var(--tt-rule); }
  .tt__docs{ grid-template-columns:1fr 1fr; }
  .tt__doc--3{ grid-column:1 / -1; }
}

/* ---- phone. Not a shrunken desktop: the search, the status filter and the
   later chips go, the task head stacks, the third update and third document
   go, and the filter label takes its own line so the chips never squeeze.
   The comment box stays — it is what says the tracker is worked in. */
@container tt (max-width:700px){
  .tt__frame{ border-radius:14px; }
  .tt__bar{ height:50px; padding:0 14px; }
  .tt__mark{ width:72px; height:16px; }
  .tt__search{ display:none; }
  .tt__main{ padding:14px 13px 16px; }
  .tt__h1{ font-size:22px; }
  .tt__sub{ font-size:13px; }
  .tt__new{ height:34px; padding:0 13px; font-size:13px; }
  .tt__filters{ padding:9px 0; }
  .tt__flab{ width:100%; }
  .tt__chip--4,.tt__chip--5{ display:none; }
  .tt__status{ display:none; }
  .tt__task-head{ padding:13px 13px 11px; grid-template-columns:minmax(0,1fr); }
  .tt__title{ font-size:16.5px; }
  .tt__side{ flex-wrap:wrap; }
  .tt__body{ padding:13px 13px 15px; }
  .tt__decision p{ font-size:13.5px; }
  .tt__u{ grid-template-columns:minmax(0,1fr); gap:3px; }
  .tt__u--3{ display:none; }
  .tt__doc--3{ display:none; }
  .tt__docs{ grid-template-columns:1fr; }
  .tt__task--shut{ min-height:0; padding:11px 13px; flex-wrap:wrap; }
  .tt__title--shut{ flex:1 1 100%; white-space:normal; }
  .tt__open{ margin-left:0; }
  /* the closed rows keep their state but lose the toggle: with the title on
     its own line there is not room for four things, and one row wrapped
     while the other did not */
  .tt__toggle--shut{ display:none; }
}

/* -------------------------------------------------- 02 · video production

   Rebuilt 2026-09-11 to the user's brief, then simplified the same day to
   the user's reference. Desktop: the text and the video side by side, the
   production workflow full width beneath. The workflow is six stages on one
   straight production line; one automated loop above it (AI review back to
   AI generation), one human loop below it (between AI generation and Human
   approval, a head at each end). ~~The memory line beneath~~ removed
   2026-09-11: the bold statement in the text already says it.

   Real HTML nodes and labels over a decorative SVG in the same 1000 × 410
   space; the figure is the query container, so one unit is .1cqw and node,
   line and label meet at any width with no script. Labels are px with an
   11px floor. Every arrowhead sits on its curve's exact end tangent, and
   each stroke ends inside its head. Below an 860px figure the workflow
   becomes a vertical list with the two loops as brackets.                 */

.work__row--vp{ display:block; }
.vp__head{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(28px,4.4vw,64px);
  align-items:start;
}

.vp{
  position:relative; isolation:isolate;
  margin:clamp(48px,6vw,88px) 0 0;
  container:vp / inline-size;
}
/* soft cyan and lilac haze at the ends, masked to nothing at the edges */
.vp__field{
  position:absolute; inset:-12% -3% -8%; z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(22% 44% at 10% 42%, rgba(85,200,243,.12), transparent 70%),
    radial-gradient(26% 48% at 90% 38%, rgba(169,122,246,.12), transparent 70%),
    radial-gradient(34% 40% at 50% 92%, rgba(126,130,244,.07), transparent 72%);
  -webkit-mask-image:radial-gradient(closest-side, #000 62%, transparent);
          mask-image:radial-gradient(closest-side, #000 62%, transparent);
}

.vp__stage{ position:relative; aspect-ratio:1000 / 410; }
.vp__wires{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; overflow:visible;
}
.vp__g   { fill:none; stroke:url(#vpM); stroke-width:4.5; stroke-linecap:round; }
.vp__auto{ fill:none; stroke:#1BA3D9; stroke-width:2.4; stroke-linecap:round; }
.vp__hum { fill:none; stroke:#8A55EE; stroke-width:2.4; stroke-linecap:round; }
.vp__g,.vp__auto,.vp__hum{ transition:opacity var(--slow) var(--ease); }
/* a light that runs along a line on hover, as on the meeting loop;
   pathLength 1, one dash — a longer one on the short straight segments */
.vp__comet{
  fill:none; stroke:#fff; stroke-width:6; stroke-linecap:round;
  stroke-dasharray:.16 1.3; stroke-dashoffset:.16;
  opacity:0; pointer-events:none;
}
.vp__comet--auto,.vp__comet--hum{ stroke-width:5; stroke-dasharray:.07 1.3; stroke-dashoffset:.07; }
.vp__tip { stroke:none; }
.vp__tip--auto{ fill:#1BA3D9; }
.vp__tip--hum { fill:#8A55EE; }

/* ------ labels on the lines */

.vp__tag{
  position:absolute; z-index:2; margin:0;
  left:calc(var(--x) * .1cqw); top:calc(var(--y) * .1cqw);
  translate:-50% -50%;
  display:inline-flex; align-items:center; gap:8px;
  white-space:nowrap;
  font-size:clamp(12px,1.2cqw,13.5px); line-height:1.2;
}
.vp__ti{ flex:none; width:1.2em; height:1.2em; }
.vp__tag--brand{
  --x:488; --y:30;
  gap:10px;
  padding:10px 22px 10px 16px;
  border:1px solid rgba(126,130,244,.24); border-radius:999px;
  background:rgba(255,255,255,.9);
  box-shadow:0 8px 22px -12px rgba(70,62,190,.35), inset 0 1px 0 #fff;
  color:var(--brand-ink); font-weight:500;
  /* larger than the loop labels since 2026-09-17 (user request): it names
     the rule over the whole line, not one loop */
  font-size:clamp(14px,1.65cqw,17px);
}
.vp__tag--auto { --x:505; --y:72;  color:#0B6F99; font-weight:600; letter-spacing:.01em; }
.vp__tag--human{ --x:567; --y:390; color:#6A3DC4; font-weight:600; letter-spacing:.01em; }

/* ------ the six stages */

.vp__vw{ display:none; }
.vp__steps{
  position:absolute; inset:0; z-index:1;
  margin:0; padding:0; list-style:none;
}
.vp__step{
  position:absolute;
  left:calc(var(--cx) * .1cqw);
  top:14.6cqw;                     /* (190 − 44) × .1: the orb's top edge */
  width:8.8cqw;                    /* 2 × 44 × .1 */
  translate:-50% 0;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}
.vp__step--1{ --cx:96;  --t1:#FFFFFF; --t2:#F1F6FF; --lit:60,150,245; }
.vp__step--2{ --cx:253; --t1:#FFFFFF; --t2:#F0F3FF; --lit:70,130,245; }
.vp__step--3{ --cx:410; --t1:#FBFAFF; --t2:#EAE7FF; --lit:100,105,242; }
.vp__step--4{ --cx:567; --t1:#FBF9FF; --t2:#E9E3FF; --lit:122,96,240; }
.vp__step--5{ --cx:724; --t1:#FBF8FF; --t2:#EAE2FF; --lit:138,90,238; }
.vp__step--6{ --cx:881; --t1:#FFFFFF; --t2:#F4F0FF; --lit:150,98,236; }
/* the bloom that rises behind a stage on hover, centred on the orb */
.vp__step::before{
  content:""; position:absolute; z-index:-1;
  left:50%; top:calc(44 * -.07cqw); width:170%; aspect-ratio:1;
  translate:-50% 0; scale:.7;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(var(--lit),.30), rgba(var(--lit),.10) 55%, transparent);
  opacity:0;
  transition:opacity var(--slow) var(--ease), scale .6s var(--ease);
  pointer-events:none;
}

.vp__orb{
  --ring:max(3px,.45cqw);
  position:relative;
  display:grid; place-items:center;
  width:100%; aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 50% 32%, #fff 0%, var(--t1) 45%, var(--t2) 100%);
  box-shadow:
    0 0 0 1.5px rgba(var(--lit),.34),
    0 0 0 calc(var(--ring) + 1.5px) rgba(255,255,255,.75),
    0 0 0 calc(var(--ring) + 2.5px) rgba(var(--lit),.10),
    0 1.4cqw 3.4cqw -1.2cqw rgba(70,62,190,.26),
    inset 0 -.8cqw 1.8cqw rgba(var(--lit),.10);
  transition:
    translate .5s var(--ease), scale .5s var(--ease),
    box-shadow .5s var(--ease), opacity var(--std) var(--ease);
}
/* the meeting loop's hover pieces: a gradient ring on the outer edge, light
   on the crown of the glass, and a specular sweep clipped to the circle */
.vp__orb::before{
  content:""; position:absolute;
  inset:calc(var(--ring) * -1 - 2.5px);
  padding:2px; border-radius:50%;
  background:conic-gradient(from 200deg, #55C8F3, #7E82F4, #A97AF6, #55C8F3);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity:0;
  transition:opacity var(--slow) var(--ease);
}
.vp__orb::after{
  content:""; position:absolute; inset:0; z-index:1;
  border-radius:50%;
  background:radial-gradient(72% 52% at 50% 0%, #fff, rgba(255,255,255,0) 72%);
  opacity:0;
  transition:opacity var(--slow) var(--ease);
}
.vp__sheen{
  position:absolute; inset:0; z-index:1;
  border-radius:50%; overflow:hidden;
  pointer-events:none;
}
.vp__sheen::before{
  content:""; position:absolute; inset:-25%;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.85) 50%, transparent 62%);
  translate:-105% 0;
}
.vp__ic{
  position:relative; z-index:2;
  width:46%; height:46%; overflow:visible;
  filter:drop-shadow(0 2px 4px rgba(70,62,190,.16));
  transition:translate .5s var(--ease), scale .5s var(--ease);
}
.vp__lab{
  width:max-content;
  margin-top:clamp(10px,1.3cqw,15px);
  font-size:clamp(11.5px,1.2cqw,13px); font-weight:600;
  line-height:1.3; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink);
  transition:color var(--std) var(--ease);
}
.vp__desc{
  display:block; margin-top:4px;
  font-size:clamp(13px,1.4cqw,14px); font-weight:400;   /* was 11.5–12.5px; enlarged 2026-09-15 */
  letter-spacing:.01em; text-transform:none;
  color:var(--ink-3);
}
.vp__sub{ display:none; }

/* a ring that flashes on AI generation when work is sent back to it */
.vp__pulse{
  position:absolute; inset:calc(var(--ring) * -1 - 4px);
  border:2px solid #1BA3D9; border-radius:50%;
  opacity:0; pointer-events:none;
}
/* the approval mark on the human gate */
.vp__ok{
  position:absolute; z-index:2; right:-4%; top:-4%;
  display:grid; place-items:center;
  width:max(20px,2.5cqw); aspect-ratio:1;
  border-radius:50%;
  background:#1F9D63;
  box-shadow:0 0 0 2px #fff, 0 4px 10px -3px rgba(31,122,85,.55);
}
.vp__ok svg{
  width:64%; height:64%;
  fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

/* ------ hover: the meeting loop's, brought across 2026-09-14 at the user's
   request so both diagrams answer the pointer the same way — lift, ring,
   crown light, bloom, sweep, the icon rises and the label takes the brand
   ink. The other stages and lines step back, and a light runs once along
   the hovered stage's line (and along its loop, at the two review stages). */
@media (hover:hover) and (pointer:fine){
  .vp__step:hover .vp__orb{
    translate:0 -6px; scale:1.05;
    box-shadow:
      0 0 0 1.5px rgba(var(--lit),.55),
      0 0 0 calc(var(--ring) + 1.5px) rgba(255,255,255,.92),
      0 0 0 calc(var(--ring) + 2.5px) rgba(var(--lit),.20),
      0 0 3.4cqw .8cqw rgba(var(--lit),.26),
      0 2.2cqw 4cqw -1.2cqw rgba(var(--lit),.42),
      inset 0 -.8cqw 1.8cqw rgba(var(--lit),.14);
  }
  .vp__step:hover::before{ opacity:1; scale:1; }
  .vp__step:hover .vp__orb::before,
  .vp__step:hover .vp__orb::after{ opacity:1; }
  .vp__step:hover .vp__sheen::before{ translate:105% 0; transition:translate .9s var(--ease); }
  .vp__step:hover .vp__ic{ translate:0 -1px; scale:1.08; }
  .vp__step:hover .vp__lab{ color:var(--brand-ink); }
  .vp__steps:has(.vp__step:hover) .vp__step:not(:hover) .vp__orb{ opacity:.66; }

  /* the lines step back too, all but the hovered stage's own: its outgoing
     segment, plus the automated loop at AI review and the human loop at
     approval; Final production keeps the segment that feeds it */
  .vp:has(.vp__step:hover) :is(.vp__g,.vp__auto,.vp__hum){ opacity:.4; }
  .vp:has(.vp__step--1:hover) .vp__g--1,
  .vp:has(.vp__step--2:hover) .vp__g--2,
  .vp:has(.vp__step--3:hover) .vp__g--3,
  .vp:has(.vp__step--4:hover) :is(.vp__g--4,.vp__auto),
  .vp:has(.vp__step--5:hover) :is(.vp__g--5,.vp__hum),
  .vp:has(.vp__step--6:hover) .vp__g--5{ opacity:1; }
  .vp:has(.vp__step--1:hover) .vp__comet--1,
  .vp:has(.vp__step--2:hover) .vp__comet--2,
  .vp:has(.vp__step--3:hover) .vp__comet--3,
  .vp:has(.vp__step--4:hover) .vp__comet--4,
  .vp:has(.vp__step--5:hover) .vp__comet--5,
  .vp:has(.vp__step--6:hover) .vp__comet--5{ animation:mlComet .8s var(--ease) both; }
  .vp:has(.vp__step--4:hover) .vp__comet--auto,
  .vp:has(.vp__step--5:hover) .vp__comet--hum{ animation:mlComet 1.15s var(--ease) both; }
}

/* ------ the sequence, once: the line draws stage to stage; at AI review
   the cyan loop sends work back to generation; at the human gate the violet
   loop goes back and forth and the approval mark lands; the line finishes.
   No script means no .anim, so the resting CSS above IS the final frame.
   Held until main.js adds .is-run (on screen, tab visible).
   Sped up 2026-09-14 with the meeting loop: every delay and duration is the
   original choreography × --pace; at .4 the first stage lights at .06s and
   the sequence rests at about 1.7s (was 4.3s). The two pulse flashes still
   land on the two loops' arrowheads, since both scale together. */
.vp{ --pace:.4; }
.anim .vp__cel{
  animation-duration:calc(var(--pace) * .35s); animation-timing-function:var(--ease);
  animation-fill-mode:both; animation-play-state:paused;
}
.anim .vp.is-run .vp__cel{ animation-play-state:running; }
.anim .vp__step{ animation-name:vpOn; animation-duration:calc(var(--pace) * .24s); }
.anim .vp__g,
.anim .vp__auto,
.anim .vp__hum { stroke-dasharray:1 1; animation-name:vpDraw; }
.anim .vp__tip,
.anim .vp__tag { animation-name:vpFade; animation-duration:calc(var(--pace) * .3s); }
.anim .vp__ok  { animation-name:vpPop; animation-duration:calc(var(--pace) * .26s); }
.anim .vp__pulse{ animation-name:vpPulseTwice; animation-duration:calc(var(--pace) * 1.5s); animation-timing-function:linear; }
.anim .vp__auto{ animation-duration:calc(var(--pace) * .5s); }
.anim .vp__hum { animation-duration:calc(var(--pace) * .55s); }

.vp__tag--brand{ animation-delay:calc(var(--pace) * .2s); }
.vp__step--1{ animation-delay:calc(var(--pace) * .15s); }
.vp__g--1{ animation-delay:calc(var(--pace) * .3s); }   .vp__step--2{ animation-delay:calc(var(--pace) * .6s); }
.vp__g--2{ animation-delay:calc(var(--pace) * .72s); }  .vp__step--3{ animation-delay:calc(var(--pace) * 1.02s); }
.vp__g--3{ animation-delay:calc(var(--pace) * 1.14s); } .vp__step--4{ animation-delay:calc(var(--pace) * 1.44s); }
.vp__auto{ animation-delay:calc(var(--pace) * 1.6s); }  .vp__tag--auto{ animation-delay:calc(var(--pace) * 1.75s); } .vp__tip--auto{ animation-delay:calc(var(--pace) * 2.08s); }
.vp__pulse{ animation-delay:calc(var(--pace) * 2.08s); }
.vp__g--4{ animation-delay:calc(var(--pace) * 2.3s); }  .vp__step--5{ animation-delay:calc(var(--pace) * 2.6s); }
.vp__hum{ animation-delay:calc(var(--pace) * 2.75s); }  .vp__tag--human{ animation-delay:calc(var(--pace) * 2.9s); } .vp__tip--hum{ animation-delay:calc(var(--pace) * 3.28s); }
.vp__ok{ animation-delay:calc(var(--pace) * 3.55s); }
.vp__g--5{ animation-delay:calc(var(--pace) * 3.75s); } .vp__step--6{ animation-delay:calc(var(--pace) * 4.05s); }

@keyframes vpOn  { from{ opacity:.22; transform:scale(.9); } to{ opacity:1; transform:none; } }
@keyframes vpDraw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
@keyframes vpPop { from{ opacity:0; transform:scale(.3); } to{ opacity:1; transform:none; } }
@keyframes vpFade{ from{ opacity:0; } to{ opacity:1; } }
/* two flashes on AI generation: sent back by automated review (cyan) at
   about 2.1s, then by the human gate (violet) at about 3.3s */
@keyframes vpPulseTwice{
  0%    { opacity:0; transform:scale(.92); border-color:#1BA3D9; }
  3%    { opacity:1; }
  13%   { opacity:0; transform:scale(1.3); }
  13.1% { transform:scale(.92); }
  78%   { opacity:0; transform:scale(.92); border-color:#8A55EE; }
  81%   { opacity:1; border-color:#8A55EE; }
  93%   { opacity:0; transform:scale(1.3); border-color:#8A55EE; }
  100%  { opacity:0; border-color:#8A55EE; }
}

/* ------ narrow: a vertical sequence. The production line runs down the
   node centres; the automated loop and the human loop become brackets on
   the left (cyan AI review → AI generation, violet between Human approval
   and AI generation, a head at each end); the loop names sit under their
   stage labels; the brand statement opens the list. Rows are fixed at 56px so the px brackets hold. */
@container vp (max-width:859px){
  .vp__stage{
    aspect-ratio:auto;
    display:flex; flex-direction:column; align-items:flex-start; gap:20px;
  }
  .vp__wires,
  .vp__tag--auto,
  .vp__tag--human{ display:none; }
  .vp__tag{ position:static; translate:none; white-space:normal; }
  .vp__list{ order:1; position:relative; width:100%; padding-left:64px; }
  .vp__vw{
    display:block; position:absolute; left:0; top:0;
    width:64px; height:406px; overflow:visible;
  }
  .vp__steps{ position:relative; inset:auto; display:grid; gap:14px; }
  .vp__steps::before{
    content:""; position:absolute; left:22px; top:28px; bottom:28px; width:4px; border-radius:2px;
    background:linear-gradient(#5DB6F5,#7C7EF2 50%,#B091F4);
  }
  .vp__step{
    position:relative; left:auto; top:auto; translate:none;
    width:auto; height:56px;
    flex-direction:row; gap:14px;
    text-align:left;
  }
  .vp__orb{
    --ring:3px; flex:none; width:48px;
    box-shadow:
      0 0 0 1.5px rgba(var(--lit),.34),
      0 0 0 4.5px rgba(255,255,255,.8),
      0 8px 18px -8px rgba(70,62,190,.32),
      inset 0 -5px 10px rgba(var(--lit),.10);
  }
  .vp__step::before{ left:24px; top:-31px; width:118px; }   /* on the 48px orb */
  .vp__ok{ width:18px; right:-5px; top:-5px; }
  .vp__lab{ width:auto; margin:0; font-size:12.5px; }
  .vp__lab br{ display:none; }
  .vp__desc{ margin-top:2px; font-size:14px; }
  .vp__sub{
    display:block; margin-top:2px;
    font-size:13.5px; font-weight:600; letter-spacing:.01em; text-transform:none;
  }
  .vp__sub--auto { color:#0B6F99; }
  .vp__sub--human{ color:#6A3DC4; }
}
.vp__vw-auto{ fill:none; stroke:#1BA3D9; stroke-width:2; }
.vp__vw-halo{ fill:none; stroke:#fff; stroke-width:6; }
.vp__vw-hum { fill:none; stroke:#8A55EE; stroke-width:2; }
.vp__vw-tip--auto{ fill:#1BA3D9; }
.vp__vw-tip--hum { fill:#8A55EE; }

/* ------ the proof: one real reel, presented as evidence */

.vproof{ margin:0; }
.vproof__lab{
  display:flex; align-items:center; gap:14px;
  margin:0 0 16px;
  font-size:var(--t-xs); font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3);
}
.vproof__lab::before{
  content:""; flex:none; width:36px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--cy),var(--pw),var(--vi));
}
.vproof__fig{ margin:0; }
.vproof__frame{
  position:relative;
  aspect-ratio:16 / 9;
  border-radius:14px; overflow:hidden;
  background:var(--navy-deep);
  box-shadow:0 0 0 1px rgba(21,19,66,.08), 0 30px 60px -34px rgba(21,19,66,.6);
}
.vproof__v{ display:block; width:100%; height:100%; object-fit:cover; }
/* always visible, never hover-revealed: the pause control WCAG 2.2.2
   requires for a loop that runs past five seconds */
.vproof__pp{
  position:absolute; left:16px; bottom:18px; z-index:1;
  display:grid; place-items:center;
  width:44px; height:44px; padding:0;
  border:1px solid var(--rule-i2); border-radius:50%;
  background:rgba(14,12,43,.72);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:#fff; cursor:pointer;
  transition:background var(--std) var(--ease);
}
.vproof__pp:hover{ background:rgba(14,12,43,.9); }
.vproof__pp:focus-visible{ outline:2px solid var(--cy); outline-offset:3px; }
.vproof__pp[hidden],
.vproof__prog[hidden]{ display:none; }
.vproof__ic{ grid-area:1 / 1; width:16px; height:16px; fill:currentColor; }
.vproof__ic--pause,
.vproof__pp.is-playing .vproof__ic--play{ display:none; }
.vproof__pp.is-playing .vproof__ic--pause{ display:block; }
.vproof__prog{
  position:absolute; left:0; right:0; bottom:0; height:3px;
  background:rgba(255,255,255,.14);
  cursor:pointer; touch-action:none;
}
/* The hairline doubles as a scrubber (2026-09-17, user request) and looks
   exactly as before: a transparent 16px hit area sits over it, clear of the
   play button, and focus shows only for the keyboard. */
.vproof__prog::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:16px; }
.vproof__prog:focus{ outline:none; }
.vproof__prog:focus-visible{ box-shadow:0 -2px 0 var(--cy); }
.vproof__prog i{
  display:block; width:100%; height:100%;
  transform-origin:left; transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--cy),var(--pw),var(--vi));
}
.vproof__cap{ margin:12px 0 0; font-size:var(--t-sm); color:var(--ink-3); }

@media (max-width:1000px){
  .vp__head{ grid-template-columns:1fr; }
  .vp__head .work__txt{ max-width:62ch; }
}
@media (prefers-reduced-motion:reduce){
  .anim .vp__cel{ animation:none !important; }
  .vp__orb,.vp__ic,.vp__step::before{ transition:opacity var(--std) var(--ease), box-shadow var(--std) var(--ease); }
  .vp__step:hover .vp__orb,
  .vp__step:hover .vp__ic{ translate:none; scale:none; }
  .vp__sheen,.vp__comet{ display:none; }
}

/* ----------------------------------------------------------- responsive -- */

@media (max-width:1000px){
  .work__row{ grid-template-columns:1fr; }
  .work__txt{ max-width:62ch; }
}

/* --------------------------------------------------------- how we work --

   Third pass 2026-09-12, to the user's concept image and copy. The
   distilled logic stays — each stage is an action and a labelled outcome —
   and the look follows the concept: headline and one introduction; four
   stages on one line, each node inset over its column with a short tick
   down to its title; the four outcomes on one tinted panel split by
   hairlines; the closing line centred beneath. The "Outcome" labels stay,
   so the panel never reads as a row of bullets.

   Hover (fine pointers, desktop): the stage comes forward — its node rises
   and fills, its tick extends, its title takes the brand ink and its outcome
   cell turns to paper — while the other three step back.

   Mobile first: a vertical path. From 1000px the stages sit side by side on
   a subgrid, so titles and outcomes each line up across all four.        */

#how{
  --how-h:clamp(1.95rem,4.1vw,3.25rem);
  --how-nd:44px;
  --how-in:30px;                       /* node inset over its column, desktop */
}
.how__head h2{
  max-width:18.5em;
  font-size:var(--how-h);
  line-height:1.06;
  letter-spacing:-.03em;
}
/* Enlarged 2026-09-24 at the user's request: this intro carries the section on
   its own, so it sets a step above the shared --t-lead. */
.how__intro{
  max-width:1040px;
  margin:22px 0 0;
  font-size:clamp(1.1875rem, 1.65vw, 1.3125rem);
  line-height:1.6;
  color:var(--ink-2);
  text-wrap:pretty;
}

.how__path{
  position:relative;
  display:grid; gap:34px;
  max-width:760px;
  margin:clamp(48px,6vw,76px) 0 0; padding:0;
  list-style:none;
}
/* the line: down the node centres here, across them on desktop. Revealed,
   not stretched, so each stretch keeps its own hue as it draws. */
.how__path::after{
  content:"";
  position:absolute;
  left:calc(var(--how-nd) / 2 - .75px); top:calc(var(--how-nd) / 2); bottom:0;
  width:1.5px;
  background:linear-gradient(180deg,var(--cy),#6A9CF5 30%,var(--pw) 58%,var(--vi) 84%,rgba(169,122,246,0));
  clip-path:inset(0);
  transition:clip-path 1s var(--ease) .1s;
  display:none;                         /* desktop only; phones use the segments below */
}
/* phones: one segment per gap, from just under each node to just above the
   next, in the two hues it joins — the line never touches a ring */
.how__stage:not(:last-child)::after{
  content:"";
  position:absolute;
  left:calc(var(--how-nd) / 2 - .75px); width:1.5px;
  top:calc(var(--how-nd) + 7px);
  bottom:calc(7px - 34px);              /* 34px is the path's gap between stages */
  border-radius:2px;
  background:linear-gradient(180deg,rgba(var(--rgb),.85),rgba(var(--rgb2),.85));
  clip-path:inset(0);
  transition:clip-path .6s var(--ease);
}

.how__stage{
  --i:0; --rgb:85,200,243; --rgb2:106,156,245; --tint:#EAF7FD; --tint2:#D6F0FB;
  position:relative;
  display:grid;
  grid-template-columns:var(--how-nd) minmax(0,1fr);
  column-gap:20px;
  align-items:start;
}
.how__stage--2{ --i:1; --rgb:106,156,245; --rgb2:126,130,244; --tint:#EDF3FE; --tint2:#DAE6FD; }
.how__stage--3{ --i:2; --rgb:126,130,244; --rgb2:169,122,246; --tint:#EFF0FE; --tint2:#DFE0FD; }
.how__stage--4{ --i:3; --rgb:169,122,246; --tint:#F4EFFE; --tint2:#E8DCFD; }

/* the numeral is the marker; opaque, so the line passes behind it */
.how__n{
  position:relative; z-index:1;
  grid-row:1 / span 2;
  width:var(--how-nd); height:var(--how-nd);
  display:grid; place-items:center;
  border-radius:50%;
  border:1.5px solid rgba(var(--rgb),.95);
  background-color:var(--tint);
  outline:1px solid rgba(var(--rgb),0); outline-offset:0;
  color:var(--brand-ink);
  font-size:15px; font-weight:600; line-height:1;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  transition:
    background-color var(--slow) var(--ease), border-color var(--slow) var(--ease),
    translate var(--std) var(--ease), box-shadow var(--std) var(--ease),
    outline-color var(--std) var(--ease), outline-offset var(--std) var(--ease),
    opacity var(--std) var(--ease);
}
.how__stage h3{
  margin:0;
  padding-top:calc((var(--how-nd) - 1.25em) / 2);  /* first line on the node's centre */
  font-size:clamp(1.25rem,1.7vw,1.5rem);
  line-height:1.25; letter-spacing:-.015em;
  text-wrap:balance;
  transition:opacity var(--slow) var(--ease), translate var(--slow) var(--ease), color var(--std) var(--ease);
}
.how__out{
  position:relative; z-index:0;
  margin:14px 0 0;
  padding:16px 18px 18px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(85,200,243,.08),rgba(169,122,246,.09));
  font-size:1.0625rem; line-height:1.5;
  color:var(--ink);
  text-wrap:pretty;
  transition:opacity var(--slow) var(--ease), translate var(--slow) var(--ease);
}
.how__tag{
  display:flex; align-items:center; gap:7px;
  margin-bottom:7px;
  font-size:12px; font-weight:600; line-height:1.2;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand-ink);
}
.how__tag svg{ width:15px; height:15px; flex:none; }
.how__tag circle{ fill:none; stroke:currentColor; stroke-width:1.3; opacity:.5; }
.how__tag path{ fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

.how__close{
  margin:clamp(48px,5.5vw,72px) 0 0;
  font-size:clamp(1.5rem,2.8vw,2.25rem);
  font-weight:600; line-height:1.2; letter-spacing:-.022em;
  color:var(--ink);
  text-wrap:balance;
}
/* the site's cyan → violet, darkened to hold on white: 4.4 / 6.0 / 5.7:1 */
.how__em{
  font-style:normal;
  background-image:linear-gradient(90deg,#1A7FBF,#4E53D6 52%,#7A45DA);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
@media (forced-colors:active){ .how__em{ background:none; color:inherit; } }

@media (min-width:1000px){
  .how__path{
    --g:clamp(40px,4.2vw,64px);
    max-width:none;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:auto auto auto;
    column-gap:var(--g); row-gap:0;
  }
  /* one panel behind all four outcomes, so they read as a set */
  .how__path::before{
    content:"";
    grid-row:3; grid-column:1 / -1;
    margin-inline:-32px;
    border-radius:20px;
    background:linear-gradient(90deg,rgba(85,200,243,.075),rgba(126,130,244,.07) 50%,rgba(169,122,246,.09));
    box-shadow:inset 0 0 0 1px rgba(126,130,244,.1);
  }
  /* node 01 to node 04, centre to centre */
  .how__path::after{
    left:calc(var(--how-in) + var(--how-nd) / 2);
    right:calc(25% - var(--g) * .75 - var(--how-in) - var(--how-nd) / 2);
    top:calc(var(--how-nd) / 2 - .75px); bottom:auto;
    width:auto; height:1.5px;
    background:linear-gradient(90deg,var(--cy),#6A9CF5 34%,var(--pw) 66%,var(--vi));
    display:block;
    /* Cut around each node. The nodes sit at 0, 1/3, 2/3 and the end of the
       line, so four transparent bands of --cut either side of those points
       leave 7px of air outside each ring (2px outside the hover ring): a node
       dimmed on hover never shows the line running through it. */
    --cut:29px;
    -webkit-mask:linear-gradient(90deg,
      transparent var(--cut), #000 var(--cut) calc(33.333% - var(--cut)),
      transparent calc(33.333% - var(--cut)) calc(33.333% + var(--cut)),
      #000 calc(33.333% + var(--cut)) calc(66.667% - var(--cut)),
      transparent calc(66.667% - var(--cut)) calc(66.667% + var(--cut)),
      #000 calc(66.667% + var(--cut)) calc(100% - var(--cut)),
      transparent calc(100% - var(--cut)));
            mask:linear-gradient(90deg,
      transparent var(--cut), #000 var(--cut) calc(33.333% - var(--cut)),
      transparent calc(33.333% - var(--cut)) calc(33.333% + var(--cut)),
      #000 calc(33.333% + var(--cut)) calc(66.667% - var(--cut)),
      transparent calc(66.667% - var(--cut)) calc(66.667% + var(--cut)),
      #000 calc(66.667% + var(--cut)) calc(100% - var(--cut)),
      transparent calc(100% - var(--cut)));
  }
  .how__stage:not(:last-child)::after{ display:none; }
  /* explicit columns: the panel holds row 3, so auto-placement would push
     the stages below it */
  .how__stage{
    grid-row:1 / span 3;
    grid-template-columns:none;
    grid-template-rows:subgrid;
  }
  .how__stage--1{ grid-column:1; }
  .how__stage--2{ grid-column:2; }
  .how__stage--3{ grid-column:3; }
  .how__stage--4{ grid-column:4; }
  .how__n{ grid-row:auto; margin-left:var(--how-in); }
  /* the tick: from the node down towards its title */
  .how__n::after{
    content:"";
    position:absolute; left:50%; top:100%;
    width:1px; height:18px; margin:1.5px 0 0 -.5px;
    background-color:rgba(var(--rgb),.6);
    transform-origin:50% 0;
    transition:scale var(--std) var(--ease), background-color var(--std) var(--ease);
  }
  .how__stage h3{ margin:30px 0 28px; padding:0 8px 0 0; }
  .how__out{ margin:0; padding:26px 8px 30px 0; background:none; border-radius:0; }
  /* hairlines between the outcome cells, centred in the gap */
  .how__stage + .how__stage .how__out::before{
    content:"";
    position:absolute; left:calc(var(--g) / -2); top:24px; bottom:24px;
    width:1px;
    background:rgba(94,104,206,.16);
  }
  .how__close{ text-align:center; }
}

/* ------ hover: the stage comes forward, the others step back */
@media (hover:hover) and (pointer:fine) and (min-width:1000px){
  .how__out::after{
    content:"";
    position:absolute; z-index:-1;
    top:12px; bottom:12px;
    left:calc(var(--g) / -2 + 8px); right:calc(var(--g) / -2 + 8px);
    border-radius:14px;
    background:rgba(255,255,255,.92);
    box-shadow:0 14px 30px -20px rgba(61,57,168,.5), inset 0 0 0 1px rgba(126,130,244,.16);
    opacity:0; translate:0 4px;
    transition:opacity var(--std) var(--ease), translate var(--std) var(--ease);
  }
  .how__stage:hover .how__n{
    translate:0 -3px;
    background-color:var(--tint2);
    box-shadow:0 10px 20px -10px rgba(var(--rgb),.8);
    outline-color:rgba(var(--rgb),.35); outline-offset:4px;
  }
  .how__stage:hover .how__n::after{ scale:1 1.35; background-color:rgb(var(--rgb)); }
  .how__stage:hover h3{ color:var(--brand-ink); }
  .how__stage:hover .how__out::after{ opacity:1; translate:0 0; }
  .how__path:has(.how__stage:hover) .how__stage:not(:hover) :is(.how__n,h3,.how__out){ opacity:.45; }
}

/* ------ arrival, once: the line draws, each node fills as it is reached,
   its title and outcome settle behind it. The staggered delays apply only
   while arriving (.is-in without .is-done), so hover never waits on them.
   Only under .anim: no script or reduced motion shows the finished path. */
.anim .how__path:not(.is-in) .how__stage::after{ clip-path:inset(0 0 100% 0); }
.anim .how__path.is-in:not(.is-done) .how__stage::after{ transition-delay:calc(var(--i) * 200ms + 220ms); }
.anim .how__path:not(.is-in) .how__n{ background-color:#fff; border-color:rgba(94,104,206,.3); }
.anim .how__path:not(.is-in) :is(h3,.how__out){ opacity:.55; translate:0 8px; }
.anim .how__path.is-in:not(.is-done) :is(.how__n,h3){ transition-delay:calc(var(--i) * 200ms + 150ms); }
.anim .how__path.is-in:not(.is-done) .how__out{ transition-delay:calc(var(--i) * 200ms + 270ms); }
@media (min-width:1000px){
  .anim .how__path:not(.is-in)::after{ clip-path:inset(0 100% 0 0); }
  .anim .how__path:not(.is-in) .how__n::after{ scale:1 0; }
  .anim .how__path.is-in:not(.is-done) .how__n::after{ transition-delay:calc(var(--i) * 200ms + 260ms); }
}
@media (prefers-reduced-motion:reduce){
  .how__path::after,.how__stage::after,.how__n,.how__stage h3,.how__out{ transition:none; }
  .how__stage:hover .how__n,.how__stage:hover .how__out::after{ translate:none; }
}

/* -------------------------------------------------------------- founder -- */

/* Refined 2026-09-14: an editorial profile row, not a card. The portrait
   (232px on desktop, ~200px on tablets) keeps its caption tight beneath it;
   the biography sits beside it in a capped column that opens on a lead
   sentence, so the row never runs the full shell and the text never becomes
   a wall. Below 740px the identity turns into a compact portrait-and-name
   row above the text. */
/* Relaid out 2026-09-24 at the user's request. ~~Portrait left, bio right in a
   580px column~~ ~~widened to two columns inside that right track 2026-09-24~~ —
   both left the top right of the section empty beside the headline, which is
   where the warm wash was pooling as gold. It is now a masthead and a bio: the
   headline and the portrait share the top row over a hairline, and the three
   paragraphs run the full width beneath in two columns of about 60 characters.
   Nothing is squeezed into a leftover any more. */
.who{ display:block; }
.who__top{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(30px,4vw,64px);
  align-items:end;
  padding-bottom:clamp(28px,3.2vw,44px);
  border-bottom:1px solid var(--rule);
}
.who__top .head{ margin:0; }
.who__id{ width:clamp(176px,19vw,232px); min-width:0; }
.who__pic{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(160deg,var(--ice),#fff 60%);
  border:1px solid var(--rule);
  aspect-ratio:1/1;
}
/* The supplied source is 400x400 with a cool grey cast. Corrected in CSS
   rather than regenerated — an identity-preserving upscale that drifts is
   worse than the original shown small. */
.who__pic img{
  width:100%; height:100%;
  object-fit:cover; object-position:center 18%;
  filter:saturate(1.06) contrast(1.04) brightness(1.03) hue-rotate(-4deg);
  mix-blend-mode:multiply;
}
.who__pic::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:radial-gradient(80% 70% at 80% 6%,rgba(85,200,243,.20),transparent 62%),
             radial-gradient(70% 60% at 6% 96%,rgba(126,130,244,.16),transparent 66%);
  mix-blend-mode:screen;
}
.who__name{
  margin:14px 0 0;
  font-size:var(--t-sm); line-height:1.4;
  color:var(--ink-3);
}
.who__name b{ display:block; margin-bottom:2px; color:var(--ink); font-weight:600; font-size:1.0625rem; }

.who__body{
  margin-top:clamp(28px,3.2vw,44px);
  columns:2; column-gap:clamp(38px,3.6vw,64px);
  font-size:clamp(1.0625rem, .6vw + .8rem, 1.125rem);
  line-height:1.7;
  color:var(--ink-2);
}
.who__body p{ margin:0 0 22px; break-inside:avoid; }
.who__body p:last-child{ margin-bottom:0; }
.who__lead{
  display:block;
  margin-bottom:.4em;
  font-size:1.2em; font-weight:600; line-height:1.35; letter-spacing:-.012em;
  color:var(--ink);
}

/* Widened 2026-09-24 at the user's request — the bio ran tall and narrow beside
   the portrait with the right half of the row empty. From 1180px the text sets
   in two balanced columns: the block loses about half its height and each line
   still runs a readable ~48 characters. Widening one column to fill the row
   instead would have pushed the measure past 85, which is the reason this is a
   column split and not a wider track. */
/* One column as soon as two would drop under ~55 characters each. */
@media (max-width:900px){
  .who__body{ columns:auto; max-width:64ch; }
}

@media (max-width:740px){
  .who__top{ grid-template-columns:minmax(0,1fr); gap:26px; align-items:start; padding-bottom:24px; }
  .who__id{ width:auto; }
  .who__id{
    display:grid;
    grid-template-columns:clamp(104px, 28vw, 124px) minmax(0,1fr);
    align-items:center; column-gap:18px;
  }
  .who__pic{ border-radius:14px; }
  .who__name{ margin:0; }
  .who__body{ margin-top:24px; font-size:clamp(1rem, .5vw + .9rem, 1.0625rem); line-height:1.68; }
  .who__body p{ margin-bottom:18px; }
}

/* ----------------------------------------------------- common questions -- */

/* 2026-09-14, the user's locked copy. One centred column (~1000px) replaces
   the old two-column split and its navy closing block: a head, one quiet
   accordion, and the closing line set as plain type. The accordion is native
   <details name="faq">, so the browser keeps one row open at a time and
   supplies the keyboard and screen-reader behaviour; no script. */
.faq-sec > *{ max-width:1000px; margin-inline:auto; }

.faq__head{ text-align:center; }
.faq__head h2{ max-width:20em; margin-inline:auto; text-wrap:balance; }
.faq__intro{
  max-width:46em;
  margin:20px auto 0;
  font-size:var(--t-lead); line-height:1.6;
  color:var(--ink-2);
  text-wrap:pretty;
}

/* one container, rows split by hairlines — never floating cards */
@property --faq-wash{ syntax:"<number>"; inherits:false; initial-value:0; }
.faq{
  margin-top:clamp(40px,5vw,64px);
  border:1px solid var(--rule);
  border-radius:20px;
  background:rgba(255,255,255,.72);
  overflow:clip;
  interpolate-size:allow-keywords;     /* lets the panel run to height:auto */
}
.faq details + details{ border-top:1px solid var(--rule); }
/* the open row takes a very pale cyan → violet wash; no edge stripe */
.faq details{
  --faq-wash:0;
  background:linear-gradient(90deg,rgba(85,200,243,calc(var(--faq-wash) * .06)),rgba(169,122,246,calc(var(--faq-wash) * .07)));
  transition:--faq-wash 220ms var(--ease);
}
.faq details[open]{ --faq-wash:1; }
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:22px 28px;
  cursor:pointer;
  list-style:none;
  color:var(--ink);
  font-size:clamp(1.125rem,1.6vw,1.3125rem);
  font-weight:500; line-height:1.35; letter-spacing:-.01em;
  transition:color var(--std) var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--brand-ink); }
/* inset, so the container's clip never cuts the ring */
.faq summary:focus-visible{ outline:2px solid var(--brand-ink); outline-offset:-5px; border-radius:16px; }
.faq summary::after{
  content:"";
  flex:none; width:10px; height:10px;
  border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform 220ms var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg) translate(-3px,-3px); }
/* height and opacity only, 220ms, CSS only. Browsers without
   ::details-content simply open at once. */
.faq details::details-content{
  height:0; opacity:0;
  overflow:clip;
  transition:height 220ms var(--ease), opacity 180ms var(--ease), content-visibility 220ms allow-discrete;
}
.faq details[open]::details-content{ height:auto; opacity:1; }
.faq details p{
  max-width:70ch;
  margin:0; padding:0 28px 24px;
  font-size:1.0625rem; line-height:1.6;
  color:var(--ink-2);
}

/* the resolution, as type: solid ink, the second sentence in brand ink */
.faq__close{
  margin-top:clamp(44px,5vw,68px);
  text-align:center;
  font-size:clamp(1.5rem,2.8vw,2.25rem);
  font-weight:600; line-height:1.2; letter-spacing:-.022em;
  color:var(--ink);
  text-wrap:balance;
}
.faq__close span{ display:block; color:var(--brand-ink); }

@media (max-width:600px){
  .faq{ border-radius:16px; }
  .faq summary{ gap:16px; padding:18px; font-size:1.0625rem; }
  .faq details p{ padding:0 18px 20px; font-size:1rem; }
}
@media (prefers-reduced-motion:reduce){
  .faq details,.faq details::details-content,.faq summary::after{ transition:none; }
}

/* -------------------------------------------------------------- contact -- */

.contact__in{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(34px,5vw,72px);
  align-items:start;
}
.form{ display:grid; gap:16px; }
.form .btn{ justify-self:start; margin-top:4px; }
.row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.f{ display:grid; gap:7px; }
.f label{
  font-size:var(--t-xs); font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--on-navy-3);
}
.f input,.f select,.f textarea{
  width:100%;
  padding:13px 15px;
  border:1px solid var(--rule-i2);
  border-radius:11px;
  background:rgba(255,255,255,.05);
  color:var(--on-navy);
  font:inherit;
  font-size:16px;              /* 16px or iOS zooms the page on focus */
  transition:border-color var(--std) var(--ease), background var(--std) var(--ease);
}
.f textarea{ min-height:118px; resize:vertical; }
.f select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--on-navy-2) 50%),
                   linear-gradient(135deg,var(--on-navy-2) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
.f select option{ background:var(--navy); color:var(--on-navy); }
.f input:focus,.f select:focus,.f textarea:focus{
  border-color:var(--cy);
  background:rgba(255,255,255,.09);
  outline:none;
}
.f input::placeholder,.f textarea::placeholder{ color:var(--on-navy-3); opacity:.7; }
.f.err input,.f.err select,.f.err textarea{ border-color:var(--stop-i); }
.msg{
  font-size:var(--t-xs);
  color:var(--stop-i);
  min-height:1em;
}
.msg:empty{ min-height:0; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* The three direct channels under the contact copy. Was .mailto, the GoWise
   address; became .wa on 2026-09-24 when that mailbox proved not to be live,
   and .reach the same day when LinkedIn joined it. The address returned that
   same day once the domain was confirmed, so .reach now carries three rows and
   the grid gap does the spacing. Each row is its own flex
   line, so the mark sits on the text baseline and the rule under a link stops
   at the text rather than running the width of the column. */
.reach{
  display:grid; gap:4px; justify-items:start;
  margin-top:28px; padding-top:22px;
  border-top:1px solid var(--rule-i);
  font-size:1.0625rem;
}
.reach p{ margin:0; }
.reach a{
  display:inline-flex; align-items:center; gap:10px; padding:8px 0 6px;
  color:var(--on-navy); text-decoration:none;
  border-bottom:1px solid var(--rule-i2);
  padding-bottom:2px;
  transition:color var(--std) var(--ease), border-color var(--std) var(--ease);
}
.reach a:hover{ color:var(--cy); border-color:var(--cy); }
.reach__ic{ width:22px; height:22px; flex:none; }

/* The one line the form owes the visitor: what the details are used for, and
   what not to put in them. Added 2026-09-24 at the user's request. It follows
   the live status rather than preceding it, so the status stays next to the
   button it answers. */
.form-priv{
  margin:0;
  max-width:56ch;
  font-size:var(--t-xs); line-height:1.55;
  color:var(--on-navy-3);
}

.sent{
  padding:26px;
  border:1px solid rgba(63,214,154,.4);
  border-radius:14px;
  background:rgba(63,214,154,.08);
  color:var(--on-navy);
}
.sent b{ display:block; margin-bottom:6px; font-size:1.14rem; font-weight:600; }
.form-note{ margin-top:4px; font-size:var(--t-xs); color:var(--on-navy-3); }
/* Before a submit the note is empty and contributes nothing but the grid gap,
   which would otherwise push the line below it 64px off the button. */
.form-note:empty{ margin-top:0; }

/* --------------------------------------------------------------- footer -- */

.foot{
  background:var(--navy-deep);
  color:var(--on-navy-3);
  padding-block:44px;
  font-size:var(--t-sm);
}
.foot__in{
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 30px;
}
.foot .mark{ width:106px; height:23px; }
.foot__links{ display:flex; flex-wrap:wrap; gap:24px; margin-left:auto; }
.foot a{ display:inline-block; padding:6px 0; color:var(--on-navy-2); text-decoration:none; transition:color var(--std) var(--ease); }
.foot a:hover{ color:var(--cy); }
.foot small{ font-size:var(--t-xs); }

/* ------------------------------------------------------ section reveals --

   Floor of 0.55, never 0. If a timeline fails or a browser lands mid-range,
   the content is dimmed — never invisible.                                 */

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .rv{
      animation:rise linear both;
      animation-timeline:view();
      animation-range:entry 4% entry 40%;
    }
  }
}
@keyframes rise{
  from{ opacity:.55; transform:translateY(15px); }
  to  { opacity:1;   transform:none; }
}

/* ----------------------------------------------------------- responsive -- */

@media (max-width:1000px){
  .nav__links{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    padding:8px var(--gutter) 20px;
    background:rgba(21,19,66,.98);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--rule-i);
  }
  .nav__links.is-open{ display:flex; }
  .nav__links a:not(.btn){ padding:14px 0; border-bottom:1px solid var(--rule-i); font-size:1.0625rem; }
  .nav__links a:not(.btn)::after{ display:none; }
  .nav__links .btn{ margin-top:16px; align-self:flex-start; }
  .burger{ display:inline-flex; }
  .nav__in{ position:relative; }

  /* A centred stack does not need recomposing here — it simply gets smaller.
     That is most of the point of the centred layout: the split build needed
     a different composition at every breakpoint, this one does not. */
  .hero{ min-height:0; padding-block:clamp(36px,5vw,60px) clamp(24px,3vw,36px); }
  .hero__copy{ max-width:640px; }
  .hero .lede{ max-width:50ch; }
  .hf{ opacity:.86; }
  .caps{ padding-top:clamp(22px,3vw,34px); }

  .contact__in{ grid-template-columns:1fr; }
}

@media (max-width:700px){
  .row{ grid-template-columns:1fr; }
  .acts{ gap:14px 20px; }
  .btn{ width:100%; }
  .acts .ghost{ margin-inline:auto; }
  .hero__copy{ max-width:none; }

  /* Fewer, larger blobs at phone size: three is enough to read as a bloom,
     and six overlapping at this scale just becomes an even wash. The pointer
     layer is off here anyway, so it is dropped outright. */
  .hf__b--4,.hf__b--5,.hf__b--ptr{ display:none; }
  .hf__spark,.hf__dot{ display:none; }
  .hf__s:nth-child(2n){ display:none; }
  .hf__scrim{
    background:
      radial-gradient(80% 34% at 50% 40%, rgba(21,19,66,.58) 0%, rgba(21,19,66,0) 74%),
      linear-gradient(0deg, var(--navy) 0%, var(--navy) 6%, rgba(21,19,66,.86) 16%, rgba(21,19,66,0) 36%);
  }
}

/* The anchors stack and stay substantial — a single column, each row still
   carrying its full-size numeral, the vertical separators becoming horizontal
   so the group still reads as one set.
   860, not 700: three columns still fit at 930, but by 768 the longest label
   was breaking to three lines inside its column. */
@media (max-width:860px){
  .caps{ grid-template-columns:1fr; }
  .caps__i{ padding:14px 0; }
  .caps__i + .caps__i{
    border-left:0; border-top:1px solid var(--rule-i); padding-left:0;
  }
  .caps__t{ font-size:12px; }
}

@media (max-width:560px){
  .hf{ opacity:.9; }
  /* The larger hero eyebrow tipped onto a second line here. Tracking buys the
     line back without giving up the size: .2em over 28 characters is ~78px of
     pure letter-spacing at this scale. */
  .eyebrow{ letter-spacing:.14em; gap:12px; }
  /* 16px at 390, easing to 15px by 360, so it stays on one line */
  .hero .eyebrow{ font-size:clamp(.9375rem, 4.1vw, 1rem); letter-spacing:.11em; gap:10px; }
}

/* -------------------------------------------------------- reduced motion -- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .btn:hover{ transform:none; }
}