/* fallback faces sized to the web fonts' measured width and line metrics */
  @font-face{font-family:'Host Grotesk Fallback';src:local('Arial'),local('ArialMT');size-adjust:102.3%;ascent-override:99.7%;descent-override:31.3%;line-gap-override:0%;}
  @font-face{font-family:'Geist Mono Fallback';src:local('Courier New'),local('CourierNewPSMT');size-adjust:100%;ascent-override:101%;descent-override:30%;line-gap-override:0%;}
  :root{
    --f-display:'Host Grotesk','Host Grotesk Fallback',sans-serif;
    --f-body:'Host Grotesk','Host Grotesk Fallback',sans-serif;
    --f-mono:'Geist Mono','Geist Mono Fallback',monospace;
    color-scheme:dark;
    --black:#08080a;
    --white:#f4f4f5;
    --grey-1:#7c7e83; /* lifted from #6b6d72: small grey text now passes 4.5:1 contrast */
    --grey-2:#9a9ca1;
    --grey-3:#3a3b3e;
    --line:rgba(255,255,255,.09);
    --surface:#0f0f12;
    --surface-2:#1c1d21;
    --glint:rgba(255,255,255,.3);
    --sweep-lift:none;
    --dim:#6e7075; /* the quiet words of a headline: still 3:1 at display size */
    /* ACCENT: never invented, always borrowed from the work. Each chapter of
       the page takes one from a concept (script: CHAPTER ACCENTS); it lights
       small, live things only: the scroll line, dots, the chips' pixels, the
       process line, strike-throughs. Text stays ink. */
    --accent:#e64e14;
    --on-accent:#ffffff;
    --nav-h:60px;
    --gut:clamp(16px,2.2vw,28px);
  }
  @media(max-width:640px){:root{--nav-h:56px;}}
  /* the theme colours are registered, so a change of material (or nightfall
     in "In operation") fades across the page instead of flipping */
  @property --black{syntax:'<color>';inherits:true;initial-value:#08080a;}
  @property --white{syntax:'<color>';inherits:true;initial-value:#f4f4f5;}
  @property --grey-1{syntax:'<color>';inherits:true;initial-value:#7c7e83;}
  @property --grey-2{syntax:'<color>';inherits:true;initial-value:#9a9ca1;}
  @property --grey-3{syntax:'<color>';inherits:true;initial-value:#3a3b3e;}
  @property --line{syntax:'<color>';inherits:true;initial-value:rgba(255,255,255,.09);}
  @property --surface{syntax:'<color>';inherits:true;initial-value:#0f0f12;}
  @property --surface-2{syntax:'<color>';inherits:true;initial-value:#1c1d21;}
  @property --dim{syntax:'<color>';inherits:true;initial-value:#6e7075;}
  @property --accent{syntax:'<color>';inherits:true;initial-value:#e64e14;}
  html{transition:--black .9s ease,--white .9s ease,--grey-1 .9s ease,--grey-2 .9s ease,--grey-3 .9s ease,--line .9s ease,--surface .9s ease,--surface-2 .9s ease,--dim .9s ease,--accent 1.1s ease;}
  *{margin:0;padding:0;box-sizing:border-box;}
  /* the fixed nav (and, on phones, the dock) never covers an anchor target
     or a focused control: the page scrolls them clear. Scrollbar, caret and
     native controls take the theme's own ink and canvas. */
  html{scroll-behavior:smooth;scroll-padding-top:72px;scrollbar-color:var(--grey-3) var(--black);accent-color:var(--white);}
  body{background:var(--black);color:var(--white);font-family:var(--f-body);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
  ::selection{background:var(--accent);color:var(--on-accent);}
  a{color:inherit;text-decoration:none;}
  a,button{touch-action:manipulation;}
  h1,h2,h3,h4{text-wrap:balance;}
  p{text-wrap:pretty;}
  .display{font-family:var(--f-display);}
  .mono{font-family:var(--f-mono);}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
  /* the hidden attribute always wins over a component's own display */
  [hidden]{display:none !important;}
  /* Fanned preview cards deliberately poke past their column; clip them at
     the page edge. "clip" (not "hidden") keeps position:sticky working and
     stops mobile browsers from widening the layout to fit them. */
  main{overflow-x:clip;}

  /* Visible keyboard focus everywhere (mouse clicks don't trigger it) */
  :focus-visible{outline:1px solid var(--white);outline-offset:4px;border-radius:2px;}

  .skip-link{
    position:fixed;left:16px;top:-60px;z-index:300;
    background:var(--white);color:var(--black);padding:10px 16px;border-radius:999px;
    font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
    transition:top .2s ease;
  }
  .skip-link:focus{top:16px;}

  /* NAV: one ruled bar, like the top strip of an instrument: the mark, the
     section index over the studio line with Cairo's clock, the switch */
  nav{
    position:fixed;top:0;left:0;right:0;z-index:40;height:var(--nav-h);
    display:flex;justify-content:space-between;align-items:center;gap:24px;
    padding:0 var(--gut);background:var(--black);border-bottom:1px solid var(--line);
  }
  /* current section's link: full opacity plus a hairline underneath */
  .nav-links a{position:relative;}
  .nav-links a::after{
    content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--accent);
    transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.7,0,.2,1);
  }
  .nav-right a.is-current,.nav-right a[aria-current="page"]{opacity:1;}
  .nav-right a.is-current::after,.nav-right a[aria-current="page"]::after{transform:scaleX(1);}
  .nav-mark{display:flex;align-items:center;gap:10px;}
  .nav-mark img{width:26px;height:26px;display:block;}
  .nav-mark span{font-family:var(--f-display);font-weight:600;font-size:15px;letter-spacing:-.01em;}
  .nav-mark sup{font-size:8px;opacity:.6;}
  .nav-right{display:flex;align-items:center;gap:32px;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;}
  .nav-right a{opacity:.7;transition:opacity .2s;}
  .nav-right a:hover{opacity:1;}
  .nav-grid{display:grid;grid-template-columns:auto auto;column-gap:16px;row-gap:5px;align-items:baseline;}
  .nav-k{color:var(--grey-1);}
  .nav-links{display:flex;gap:18px;}
  .nav-clock{margin-left:8px;color:var(--grey-1);font-variant-numeric:tabular-nums;}
  @media(max-width:1000px){.nav-k{display:none;}.nav-grid{grid-template-columns:auto;}}
  /* the index and studio block sits in the middle of the bar, the mark on
     the left and the material switch on the right */
  @media(min-width:641px){
    .nav-grid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
    @media(max-width:1000px){.nav-grid{justify-items:center;}}
  }
  /* phones: the section links and the material switch move into a
     full-screen menu, opened by one text button with a full-size target */
  .menu-btn{display:none;}
  @media(max-width:640px){
    .nav-right .loc{display:none;}
    /* without script the menu can't open, so the links stay in the bar
       (the material switch needs script too, so it steps aside) */
    html:not(.js) .nav-right{gap:12px;letter-spacing:.04em;}
    html.js .nav-grid,html.js .nav-right > .material-toggle{display:none;}
    html.js .menu-btn{
      display:inline-flex;align-items:center;justify-content:center;min-width:64px;min-height:44px;margin:-12px -12px -12px 0;padding:0 12px;
      background:none;border:0;color:inherit;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;
    }
  }

  /* MATERIALS TOGGLE: swaps the ink/canvas pair between "matte black" and "brushed steel" */
  .material-toggle{
    position:relative;
    font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    background:none;color:inherit;border:1px solid currentColor;opacity:.7;
    padding:6px 10px;border-radius:2px;cursor:pointer;transition:opacity .2s;
    -webkit-appearance:none;appearance:none;
    /* "socket" edge: a faint highlight along the bottom-right, as if the
       button sits in a slightly recessed cutout */
    box-shadow:1px 2px 3px -2px var(--white);
  }
  .material-toggle:hover{opacity:1;}
  /* the switch needs script, so without it there's nothing to press */
  html:not(.js) .material-toggle{display:none;}
  /* Catches the light on hover/focus: a soft rim glow fading in along the
     bottom edge, like the socket effect. Uses ::before since ::after is
     the BS/MB initials the compact header shows. */
  .material-toggle::before{
    content:"";
    position:absolute;inset:0;
    border-radius:inherit;
    opacity:0;
    box-shadow:0 2px 3px 0 var(--white);
    transition:opacity .2s ease;
    pointer-events:none;
  }
  .material-toggle:hover::before,
  .material-toggle:focus-visible::before{
    opacity:1;
  }
  /* COMPACT HEADER: once the page scrolls, the full bar folds into a
     rounded pill at the top centre: the icon, the section links and the
     material switch, shortened to its initials (BS brushed steel, MB matte black).
     Back at the top, the full bar returns. (script: COMPACT HEADER) */
  html.nav-pill nav{
    left:50%;right:auto;top:12px;height:48px;transform:translateX(-50%);
    gap:18px;padding:0 7px 0 16px;border:1px solid var(--line);border-radius:999px;
    box-shadow:0 14px 34px -20px rgba(0,0,0,.45);
    animation:navPill .5s cubic-bezier(.2,.8,.2,1);
  }
  @keyframes navPill{from{opacity:0;transform:translateX(-50%) translateY(-12px) scale(.94);}}
  html.nav-bar-in:not(.nav-pill) nav{animation:navBarIn .4s ease;}
  @keyframes navBarIn{from{opacity:0;transform:translateY(-8px);}}
  /* in the pill: the icon alone, then the section links (the current one
     underlined in the chapter's colour), then the switch */
  html.nav-pill .nav-mark span{display:none;}
  html.nav-pill .nav-grid{display:flex;position:static;transform:none;}
  html.nav-pill .nav-k,html.nav-pill .nav-grid .loc{display:none;}
  html.nav-pill .nav-right{gap:22px;}
  html.nav-pill .nav-right > .material-toggle .toggle-label{display:none;}
  html.nav-pill .nav-right > .material-toggle{
    display:grid;place-items:center;width:34px;height:34px;padding:0;border-radius:50%;opacity:1;
  }
  html.nav-pill .nav-right > .material-toggle::after{content:"BS";letter-spacing:.04em;}
  html.nav-pill .nav-right > .material-toggle[data-material="black"]::after{content:"MB";}
  @media(max-width:640px){
    html.nav-pill nav{height:46px;gap:10px;padding:0 4px 0 14px;}
    html.nav-pill .menu-btn{margin:0;min-height:38px;}
    html.js.nav-pill .nav-grid{display:none;}
    html.nav-pill .nav-right{gap:10px;}
  }
  @media(prefers-reduced-motion:reduce){html.nav-pill nav,html.nav-bar-in:not(.nav-pill) nav{animation:none;}}
  /* PHONE MENU: the four sections set large, each rising from behind its
     own rule, with the material switch (full label) underneath */
  .menu{
    position:fixed;inset:0;z-index:39;display:flex;flex-direction:column;justify-content:flex-end;
    padding:96px 20px calc(28px + env(safe-area-inset-bottom));background:var(--black);overscroll-behavior:contain;
    opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s;
  }
  .menu.is-open{opacity:1;visibility:visible;transition:opacity .35s ease;}
  .menu-links{list-style:none;border-bottom:1px solid var(--line);}
  .menu-links li{overflow:hidden;border-top:1px solid var(--line);}
  .menu-links a{
    display:block;padding:16px 0 14px;font-family:var(--f-display);font-weight:600;
    font-size:clamp(40px,12.5vw,60px);line-height:1;letter-spacing:-.035em;font-weight:500;text-transform:uppercase;
    transform:translateY(110%);transition:transform .7s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 55ms + 60ms);
  }
  .menu.is-open .menu-links a{transform:none;}
  .menu-foot{
    display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:24px;
    font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-2);
  }
  .menu-foot .material-toggle{min-height:44px;padding:0 18px;border-radius:999px;opacity:1;}
  html.menu-open{overflow:hidden;}
  html.menu-open .dock{opacity:0;visibility:hidden;}
  @media(min-width:641px){.menu{display:none;}}

  /* HUD FRAME: corner marks round the viewport under the nav and ticks at
     the side midpoints. Decoration only. */
  .hud{position:fixed;left:10px;right:10px;top:calc(var(--nav-h) + 10px);bottom:10px;z-index:38;pointer-events:none;color:var(--white);opacity:.5;}
  .hud i{position:absolute;width:12px;height:12px;border:0 solid currentColor;}
  .hud i:nth-child(1){left:0;top:0;border-width:1px 0 0 1px;}
  .hud i:nth-child(2){right:0;top:0;border-width:1px 1px 0 0;}
  .hud i:nth-child(3){left:0;bottom:0;border-width:0 0 1px 1px;}
  .hud i:nth-child(4){right:0;bottom:0;border-width:0 1px 1px 0;}
  .hud b{position:absolute;top:50%;width:6px;height:1px;background:currentColor;}
  .hud b:nth-of-type(1){left:0;}
  .hud b:nth-of-type(2){right:0;}
  @media(max-width:640px){.hud{left:6px;right:6px;bottom:6px;top:calc(var(--nav-h) + 6px);}}

  /* HEADLINE MARKS: the quiet words go grey, the word that matters is set
     in a block of ink */
  .dim{color:var(--dim);}
  mark.inv{
    display:inline-block;line-height:.84;padding:.07em .08em .03em;margin:0 .02em;border-radius:.1em;
    background:var(--white);color:var(--black);
  }
  /* split titles give each word its own block; without the side margins
     the blocks butt up into one bar, rounded only at its two ends */
  .is-split mark.inv{margin:0;}
  .is-split mark.inv.ms{border-radius:.1em 0 0 .1em;}
  .is-split mark.inv.mm{border-radius:0;}
  .is-split mark.inv.me{border-radius:0 .1em .1em 0;}

  /* HERO: the page as an instrument panel. Title and name card on top, the
     pressed-in wordmark over a dithered screen in the middle, the promise
     with its one action and the studio line underneath. */
  .hero{
    min-height:100svh;position:relative;display:grid;
    grid-template-columns:minmax(0,1fr) minmax(250px,300px);grid-template-rows:auto minmax(0,1fr) auto;
    column-gap:clamp(24px,4vw,64px);
    padding:calc(var(--nav-h) + clamp(28px,5vh,52px)) calc(var(--gut) + 14px) clamp(28px,5vh,44px);
  }
  .hero-title{
    grid-column:1;grid-row:1;align-self:start;
    font-family:var(--f-display);font-weight:500;text-transform:uppercase;
    font-size:clamp(34px,min(calc((100vw - 460px) / 16),8.2vh),68px);line-height:.94;letter-spacing:-.035em;
  }
  .hero-title .hl{display:block;}
  /* a few of the real screens, dithered to one bit, cycling inside the line */
  .chip{display:inline-block;width:1.8em;height:1em;margin-left:.16em;vertical-align:-.1em;border-radius:.08em;}
  html:not(.js) .chip{display:none;}
  /* the same window elsewhere: beside the screens counter (it shows the
     screen in view), closing the contact title, and signing off the footer */
  .scr-chip{width:72px;height:40px;margin:0 6px 0 0;vertical-align:middle;border-radius:4px;}
  .cta h2 .chip{width:1.45em;height:.8em;margin-left:.14em;}
  .foot-chip{width:36px;height:20px;margin:0 12px 0 0;vertical-align:middle;border-radius:3px;}

  /* NAME CUT: where the name comes from. Both words sit split on one cut
     line; the parts the name leaves behind are struck through, then the
     name they make types out underneath. Hovering (or a tap) replays it. */
  .name-cut{grid-column:2;grid-row:1;align-self:start;justify-self:end;}
  .nm-grid{
    display:grid;grid-template-columns:auto auto;
    font-family:var(--f-display);font-weight:500;font-size:clamp(22px,1.9vw,28px);line-height:1.1;letter-spacing:-.02em;text-transform:uppercase;
  }
  .nm-grid span{position:relative;}
  .nm-grid span:nth-child(odd){justify-self:end;padding-right:10px;}
  .nm-grid span:nth-child(even){padding-left:10px;border-left:1px solid var(--white);}
  .nm-d{color:var(--dim);}
  .nm-d::after{
    content:"";position:absolute;top:50%;height:2px;margin-top:-1px;background:var(--accent);
    transform-origin:left;transition:transform .55s cubic-bezier(.7,0,.2,1);transition-delay:var(--sd,0s);
  }
  .nm-grid span:nth-child(2)::after{left:10px;right:0;--sd:.1s;}
  .nm-grid span:nth-child(3)::after{left:0;right:10px;--sd:.35s;}
  html.js .name-cut:not(.is-cut) .nm-d::after{transform:scaleX(0);transition:none;}
  .nm-out{
    display:flex;align-items:baseline;gap:10px;margin-top:14px;
    font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-1);
  }
  .nm-out b{
    font-family:var(--f-display);font-weight:600;font-size:clamp(22px,1.9vw,28px);letter-spacing:-.02em;text-transform:none;color:var(--white);
    clip-path:inset(0 0 -20% 0);transition:clip-path .8s steps(9,end) .75s;
  }
  html.js .name-cut:not(.is-cut) .nm-out b{clip-path:inset(0 100% -20% 0);transition:none;}
  .nm-sub{margin-top:4px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-2);}

  @property --lx{syntax:'<length-percentage>';inherits:true;initial-value:50%;}
  @property --ly{syntax:'<length-percentage>';inherits:true;initial-value:50%;}
  .hero-mid{grid-column:1 / -1;grid-row:2;align-self:center;justify-self:center;position:relative;margin:clamp(20px,4vh,40px) 0;}
  .hero-wordmark{position:relative;font-size:clamp(70px,16.8vw,248px);text-align:center;}
  /* EMBOSSED WORDMARK: the word is pressed into the canvas (same colour,
     hairline stroke, shadow emboss) */
  .emboss{
    position:relative;
    font-family:var(--f-display);font-weight:700;
    letter-spacing:-.04em;line-height:.9;
    color:var(--black);
    /* the hairline is four 1px shadows rather than a text-stroke: a stroke
       traces every contour, and this variable font's overlapping outlines
       (the bar of the e, the cross of each t) showed through as stray lines */
    --hair:rgba(255,255,255,.16);
    text-shadow:
      1px 0 0 var(--hair), -1px 0 0 var(--hair), 0 1px 0 var(--hair), 0 -1px 0 var(--hair),
      1px 1px 0 rgba(0,0,0,.9),
      2px 2px 1px rgba(0,0,0,.7),
      -1px -1px 1px rgba(255,255,255,.05);
    user-select:none;
  }
  /* Specular highlight: a copy of the word filled with a soft light that
     follows the pointer, so the pressed-in letters catch the light like
     machined metal. Until the pointer moves (and always on touch screens)
     the light makes one pass across the letters each time the mark comes
     into view, then rests. Moving the light repaints the whole word every
     frame, so a sweep that never stopped cost phones a steady 20-30% of
     the main thread while they sat on the hero. */
  /* The light is the word in the glint colour, faded out by a round mask.
     Its box reaches .3em past the word on every side: the tight letter
     spacing pushes the last t past the word's own box, and a light clipped
     to that box cut the t's ends off square (dark boxes on the bar and the
     foot). The padding keeps the text exactly over the word. */
  .emboss::after{
    content:attr(data-text);
    position:absolute;inset:-.3em;padding:.3em;
    color:var(--glint);text-shadow:none;
    -webkit-mask-image:radial-gradient(circle clamp(120px,16vw,260px) at calc(var(--lx) + .3em) calc(var(--ly) + .3em), #000, transparent 70%);
    mask-image:radial-gradient(circle clamp(120px,16vw,260px) at calc(var(--lx) + .3em) calc(var(--ly) + .3em), #000, transparent 70%);
    pointer-events:none;
  }
  /* The pass after loading: the same soft light as the pointer's (--glint),
     as a wide slanted band crossing the whole word at a steady pace and
     leaving past the t. On steel a faint shadow under the lit letters lifts
     them off the near-white canvas, where white alone wouldn't show. */
  html.is-loaded .emboss.glint-auto:not(.is-off){animation:glintSweep 3s cubic-bezier(.3,.1,.7,.9) .7s both;}
  html.is-loaded .emboss.glint-auto:not(.is-off)::after{
    text-shadow:var(--sweep-lift);
    --band:linear-gradient(102deg,transparent calc(var(--lx) - 42%),#000 var(--lx),transparent calc(var(--lx) + 22%));
    -webkit-mask-image:var(--band);mask-image:var(--band);
  }
  @keyframes glintSweep{
    0%{--lx:-24%;--ly:50%;}
    100%{--lx:150%;--ly:50%;}
  }

  .hero-foot{grid-column:1;grid-row:3;align-self:end;}
  .hero-foot p{color:var(--grey-2);font-size:17px;line-height:1.5;max-width:40ch;}
  .hero-foot .btn-primary{margin-top:22px;}
  .hero-meta{
    grid-column:2;grid-row:3;align-self:end;justify-self:end;text-align:right;
    font-family:var(--f-mono);font-size:11px;line-height:1.7;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-2);
  }

  @media(max-width:900px){
    .hero{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:28px;padding-top:calc(var(--nav-h) + 28px);}
    .hero > *{grid-column:1;grid-row:auto;}
    .hero-title{order:1;font-size:clamp(30px,8.4vw,52px);}
    .hero-mid{order:2;margin:28px 0;}
    .hero-foot{order:3;}
    .name-cut{order:4;justify-self:start;}
    .hero-meta{display:none;}
  }

  /* Hero entrance: staggered in once the intro overlay clears */
  html.js .h-in{opacity:0;transform:translateY(14px);}
  html.js.is-loaded .h-in{
    opacity:1;transform:none;
    transition:opacity .8s ease, transform .9s cubic-bezier(.16,1,.3,1);
    transition-delay:var(--d,0s);
  }

  /* SECTION TITLES: each word rises from behind its own mask (JS splits them;
     without JS or with reduced motion they're plain headings) */
  .tw{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .05em .16em;margin:0 -.05em -.16em;}
  .tw > span{display:inline-block;transition:transform 1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 55ms);}
  html.js .is-split.reveal:not(.is-visible){opacity:1;transform:none;}
  .is-split:not(.is-visible) .tw > span{transform:translateY(108%);}

  /* SPEC STRIP: single cycling bar */
  .spec-strip{
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;
    height:64px;overflow:hidden;position:relative;
  }
  .spec-cycle{
    position:relative;width:100%;height:100%;
  }
  .spec-item{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--f-mono);font-size:12px;
    letter-spacing:.16em;text-transform:uppercase;color:var(--grey-2);
    opacity:0;transform:translateY(10px);
    transition:opacity .5s ease, transform .5s ease;
    pointer-events:none;text-align:center;padding:0 16px;
  }
  .spec-item.is-active{
    opacity:1;transform:translateY(0);
  }

  /* SECTIONS */
  section{padding:140px 24px;}
  .section-inner{max-width:1200px;margin:0 auto;}
  /* SECTION BAR: every section opens on a ruled strip, its name on the left
     in brackets and a fact about it on the right, like a window title */
  .sec-bar{
    position:relative;display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:10px;margin-bottom:clamp(40px,6vw,72px);
    font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-1);
  }
  /* the rule draws across, then the fact on the right types in */
  .sec-bar::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--white);transform-origin:left;transition:transform 1.1s cubic-bezier(.7,0,.2,1);}
  .sec-bar span:last-child{transition:clip-path .8s steps(22,end) .5s;}
  html.js .sec-bar.reveal:not(.is-visible)::after{transform:scaleX(0);}
  html.js .sec-bar.reveal:not(.is-visible) span:last-child{clip-path:inset(0 0 0 100%);}
  .sec-bar span:first-child{display:inline-flex;align-items:center;gap:10px;color:var(--white);}
  .sec-bar span:first-child::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);}
  .faq-wrap > .sec-bar{grid-column:1 / -1;margin-bottom:0;}
  .cta .sec-bar{max-width:1200px;margin-left:auto;margin-right:auto;text-align:left;}
  .title{font-family:var(--f-display);font-weight:500;font-size:clamp(32px,4.6vw,68px);letter-spacing:-.035em;line-height:.95;max-width:24ch;text-transform:uppercase;}
  .lede{margin-top:20px;color:var(--grey-2);font-size:16px;line-height:1.65;max-width:52ch;}
  @media(max-width:640px){section{padding:100px 20px;}}

  /* Start states are scoped to html.js so the page is fully readable if
     scripts never run */
  .reveal{transition:opacity .7s ease,transform .7s ease;}
  html.js .reveal:not(.is-visible){opacity:0;transform:translateY(20px);}

  /* WHAT WE BUILD: exploded view with a reading panel. One object, three
     layers: (W) Websites, (A) Automations, (S) Systems.
     Static (no JS / reduced motion): every panel in order beside a sticky
     exploded diagram. JS adds .xv-live: the stage pins for a long scroll, a
     single 0..1 progress value drives the object, and the reading panel
     swaps its content per beat while staying put. */
  .xv{--lw:540px;--lh:340px;position:relative;margin-top:56px;}
  .xv-stage{
    position:relative;max-width:1360px;margin:0 auto;
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:start;
  }
  .xv-scene{position:sticky;top:90px;height:680px;perspective:2200px;perspective-origin:50% 40%;}
  .xv-obj{position:absolute;left:50%;top:48%;width:0;height:0;transform-style:preserve-3d;transform:scale(var(--os,1));}
  .xv-layer{
    position:absolute;left:calc(var(--lw) / -2);top:calc(var(--lh) / -2);width:var(--lw);height:var(--lh);
    border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden;
    box-shadow:0 40px 70px -42px rgba(0,0,0,.75);backface-visibility:hidden;will-change:transform,opacity;
  }
  .xv-layer[data-l="w"]{transform:rotateX(56deg) rotateZ(-38deg) translateZ(150px);}
  .xv-layer[data-l="a"]{transform:rotateX(56deg) rotateZ(-38deg) translateZ(0);}
  .xv-layer[data-l="s"]{transform:rotateX(56deg) rotateZ(-38deg) translateZ(-150px);}
  .xv-anchor{position:absolute;right:0;top:50%;width:1px;height:1px;}

  /* layer chrome */
  .lx-bar{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-bottom:1px solid var(--line);}
  .lx-bar i{width:7px;height:7px;border-radius:50%;border:1px solid var(--grey-3);}
  .lx-url,.lx-title{margin-left:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;color:var(--grey-1);}
  .lx-title{margin-left:0;}
  .lx-tag{margin-left:auto;font-family:var(--f-mono);font-size:11px;color:var(--white);}
  .lx-body{padding:20px 22px;}

  /* (W) design build: grid, type specimen, swatches; the finished UI lands on top */
  .w-build{position:absolute;inset:36px 0 0 0;}
  .w-cols{position:absolute;inset:16px 22px;display:grid;grid-template-columns:repeat(6,1fr);column-gap:14px;}
  .w-cols i{background:var(--line);transform-origin:top;}
  .w-spec{position:absolute;left:30px;top:26px;display:flex;flex-direction:column;gap:6px;}
  .w-spec b{font-family:var(--f-display);font-weight:600;font-size:66px;line-height:.9;letter-spacing:-.04em;color:var(--white);}
  .w-spec .s1{margin-top:10px;font-family:var(--f-display);font-weight:600;font-size:21px;letter-spacing:-.01em;color:var(--white);}
  .w-spec .s2{font-family:var(--f-body);font-size:13px;color:var(--grey-2);}
  .w-spec .s3{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-1);}
  .w-sw{position:absolute;right:30px;bottom:26px;display:flex;gap:10px;}
  .w-sw span{display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--f-mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-1);}
  .w-sw i{position:relative;display:block;width:38px;height:38px;border:1px solid var(--grey-3);border-radius:8px;overflow:hidden;}
  .w-sw i b{position:absolute;inset:0;transform-origin:bottom;}
  .w-sw span:nth-child(1) b{background:var(--black);}
  .w-sw span:nth-child(2) b{background:var(--grey-3);}
  .w-sw span:nth-child(3) b{background:var(--grey-1);}
  .w-sw span:nth-child(4) b{background:var(--white);}
  .xv:not(.xv-live) .w-build{display:none;}

  /* (W) the finished site */
  .w-ui{
    position:absolute;inset:36px 0 0 0;padding:16px 22px 14px;background:var(--surface);
    display:grid;grid-template-columns:1.12fr 1fr;grid-template-rows:auto 1fr auto;column-gap:22px;
  }
  .w-nav{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;}
  .w-brand{font-family:var(--f-display);font-weight:700;font-size:14px;letter-spacing:.24em;color:var(--white);}
  .w-links{display:flex;gap:16px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2);}
  .w-hero{align-self:end;padding-bottom:4px;}
  .w-hero h4{font-family:var(--f-display);font-weight:600;font-size:35px;line-height:.96;letter-spacing:-.035em;color:var(--white);}
  .w-hero p{margin-top:12px;font-size:12px;line-height:1.5;color:var(--grey-2);max-width:24ch;}
  .w-form{align-self:end;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--black);}
  .w-form-t{display:block;font-family:var(--f-display);font-weight:600;font-size:15px;letter-spacing:-.01em;color:var(--white);}
  .w-lbl{display:block;margin-top:10px;font-family:var(--f-mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-1);}
  .w-field{
    display:flex;align-items:center;height:34px;margin-top:6px;padding:0 10px;
    border:1px solid var(--grey-3);border-radius:8px;font-size:12.5px;color:var(--white);white-space:pre;overflow:hidden;
  }
  .w-caret{flex:none;width:1.5px;height:15px;margin-left:2px;background:var(--white);opacity:0;}
  .w-btn{
    display:block;margin-top:10px;text-align:center;font-family:var(--f-display);font-weight:600;font-size:13px;
    background:var(--white);color:var(--black);padding:8px 0;border-radius:999px;transition:transform .12s ease;
  }
  .w-btn.is-pressed{transform:scale(.95);}
  .w-btn.is-sent{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1px var(--white);}
  .w-foot{
    grid-column:1 / -1;display:flex;justify-content:space-between;margin-top:14px;padding-top:9px;border-top:1px solid var(--line);
    font-family:var(--f-mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-1);
  }
  .w-cursor{position:absolute;left:0;top:0;width:16px;height:22px;opacity:0;z-index:3;pointer-events:none;}
  .w-cursor path{fill:var(--white);stroke:var(--black);stroke-width:1.2;}

  /* (A) workflow: five step buttons on a wire, a pulse runs along it */
  .a-flow{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding-top:6px;}
  .a-track{position:absolute;left:10%;right:10%;top:24px;height:1px;}
  .a-wire{position:absolute;inset:0;background:var(--grey-3);}
  .a-wire-hi{position:absolute;inset:0;background:var(--white);transform-origin:left;transform:scaleX(var(--pp,1));}
  .a-pulse{position:absolute;inset:0;transform:translateX(calc(var(--pp,1) * 100%));opacity:0;}
  .a-pulse::before{content:"";position:absolute;left:0;top:0;width:9px;height:9px;border-radius:50%;background:var(--white);transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(255,255,255,.12);}
  .a-flow.running .a-pulse{opacity:1;}
  .a-step{position:relative;}
  .a-node{
    display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;
    background:none;border:0;padding:0;color:inherit;font:inherit;text-align:center;cursor:pointer;
  }
  .a-node i{
    width:36px;height:36px;border-radius:10px;border:1px solid var(--grey-3);background:var(--surface);
    transition:background-color .25s ease,border-color .25s ease;
  }
  .a-node span{font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;line-height:1.35;color:var(--grey-1);transition:color .25s ease;}
  .a-node.on i{background:var(--white);border-color:var(--white);}
  .a-node.on span{color:var(--white);}
  .a-node:focus-visible{outline:1px solid var(--white);outline-offset:4px;border-radius:8px;}
  .a-tip{
    position:absolute;top:calc(100% + 8px);left:50%;z-index:4;width:176px;
    padding:8px 10px;border-radius:8px;background:var(--white);color:var(--black);
    font-family:var(--f-body);font-size:11px;line-height:1.45;text-align:left;
    opacity:0;transform:translate(-50%,4px);transition:opacity .2s ease,transform .2s ease;pointer-events:none;
  }
  .a-step:first-child .a-tip{left:0;transform:translate(0,4px);}
  .a-step:last-child .a-tip{left:auto;right:0;transform:translate(0,4px);}
  .a-step:hover .a-tip,.a-node:focus-visible + .a-tip,.a-step.is-tip .a-tip{opacity:1;transform:translate(-50%,0);}
  .a-step:first-child:hover .a-tip,.a-step:first-child .a-node:focus-visible + .a-tip,.a-step:first-child.is-tip .a-tip,
  .a-step:last-child:hover .a-tip,.a-step:last-child .a-node:focus-visible + .a-tip,.a-step:last-child.is-tip .a-tip{transform:none;}
  .a-log{
    margin-top:22px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
    display:grid;gap:5px;font-size:11px;line-height:1.5;color:var(--grey-2);font-variant-numeric:tabular-nums;
  }
  .a-line{white-space:pre;min-height:1.5em;}
  .a-done{color:var(--white);font-weight:500;}
  .xv-live .a-done{opacity:0;}
  .xv-live .a-done.on{opacity:1;}

  /* (S) sheet + confirmation */
  .s-sheet{border:1px solid var(--line);border-radius:10px;overflow:hidden;}
  .s-row{display:grid;grid-template-columns:1fr 1.4fr .7fr 1fr;padding:9px 12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--grey-2);font-variant-numeric:tabular-nums;}
  .s-row.s-h{border-top:0;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-1);}
  .s-row.s-new{color:var(--white);}
  .s-row.s-new.is-hot{box-shadow:inset 2px 0 0 var(--white);}
  .s-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:16px;}
  .s-bubble{
    padding:9px 13px;border-radius:14px;border-bottom-left-radius:4px;
    background:var(--surface-2);color:var(--white);font-size:13px;transform-origin:bottom left;
  }
  .s-count{font-size:11px;letter-spacing:.04em;color:var(--grey-2);text-align:right;}
  .s-count b{font-weight:500;color:var(--white);}

  /* outline traced around the reassembled object */
  .xv-outline{
    position:absolute;left:calc(var(--lw) / -2 - 10px);top:calc(var(--lh) / -2 - 10px);
    width:calc(var(--lw) + 20px);height:calc(var(--lh) + 20px);opacity:0;pointer-events:none;
  }
  .xv-outline svg{display:block;width:100%;height:100%;overflow:visible;}
  .xv-outline rect{fill:none;stroke:var(--white);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;}

  /* READING PANEL: one mini spec sheet per beat */
  .xv-panels{display:flex;flex-direction:column;gap:64px;}
  .xv-panel{padding-top:28px;border-top:1px solid var(--line);}
  .xv-p-tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-1);}
  .xv-p-title{margin-top:12px;font-family:var(--f-display);font-weight:600;font-size:clamp(28px,2.7vw,40px);line-height:1.1;letter-spacing:-.02em;}
  .xv-p-lead{margin-top:16px;font-size:16px;line-height:1.6;color:var(--grey-2);max-width:40ch;}
  .xv-spec{margin-top:24px;}
  .xv-spec > div{display:grid;grid-template-columns:124px minmax(0,1fr);gap:16px;padding:13px 0;border-top:1px solid var(--line);}
  .xv-spec dt{padding-top:3px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-1);}
  .xv-spec dd{font-size:15px;line-height:1.55;color:var(--grey-2);max-width:44ch;}
  .xv-pills{list-style:none;display:flex;flex-wrap:wrap;gap:6px;}
  .xv-pills li{
    font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--white);border:1px solid var(--grey-3);border-radius:999px;padding:5px 10px;
  }
  .xv-p-link{
    display:inline-block;margin-top:22px;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--white);border-bottom:1px solid var(--grey-3);padding-bottom:4px;
    transition:border-color .2s ease;
  }
  .xv-p-link:hover{border-color:var(--white);}

  /* edge labels: short tags pinned to the stage's right edge (live, desktop) */
  .xv-labels{display:none;list-style:none;flex-direction:column;justify-content:space-between;}
  .xv-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-1);transition:color .3s ease;}
  .xv-label b{display:block;margin-top:4px;font-family:var(--f-display);font-weight:600;font-size:16px;letter-spacing:-.01em;text-transform:none;color:var(--white);}
  .xv-label.is-on{color:var(--white);}
  .xv-leaders{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;display:none;}
  .xv-leaders path{fill:none;stroke:var(--grey-1);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;}
  .xv-leaders circle{fill:var(--white);opacity:0;}

  /* progress rail + counter (live only) */
  .xv-rail{display:none;}
  .xv-count{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--grey-2);display:inline-flex;white-space:nowrap;}
  .xv-track{position:relative;background:var(--line);}
  .xv-fill{position:absolute;inset:0;background:var(--white);transform-origin:top;transform:scaleY(0);}
  .xv-track ol{list-style:none;}
  .xv-track li{
    position:absolute;top:var(--at);left:16px;transform:translateY(-50%);
    font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--grey-1);transition:color .3s ease;
  }
  .xv-track li::before{
    content:"";position:absolute;left:-20px;top:50%;width:7px;height:7px;border-radius:50%;
    border:1px solid currentColor;background:var(--black);transform:translateY(-50%);transition:background-color .3s ease;
  }
  .xv-track li.is-past{color:var(--grey-2);}
  .xv-track li.is-on{color:var(--white);}
  .xv-track li.is-on::before,.xv-track li.is-past::before{background:currentColor;}
  .xv-step{display:none;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--white);white-space:nowrap;}
  /* skip the pinned walkthrough: lives in the stage, so it stays put while pinned */
  .xv-skip{display:none;}
  .xv-live .xv-skip{
    display:inline-flex;align-items:center;gap:6px;position:absolute;left:0;bottom:28px;z-index:3;
    font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-1);transition:color .2s ease;
  }
  .xv-live .xv-skip:hover{color:var(--white);}

  /* LIVE desktop: rail | reading panel | object | edge labels, pinned 480vh */
  .xv-live{height:480vh;margin-top:24px;}
  .xv-live .xv-stage{
    position:sticky;top:0;height:100vh;height:100svh;padding:76px 0 28px;
    grid-template-columns:44px minmax(300px,31%) minmax(0,1fr) 120px;gap:clamp(20px,2.6vw,44px);align-items:stretch;
  }
  .xv-live .xv-scene{position:relative;top:auto;height:auto;}
  .xv-live .xv-panels{display:grid;align-self:center;}
  .xv-live .xv-panel{
    grid-area:1 / 1;opacity:0;visibility:hidden;
    transition:opacity .3s ease,visibility 0s linear .3s;
  }
  .xv-live .xv-panel.is-active{opacity:1;visibility:visible;transition:opacity .35s ease .12s,visibility 0s;}
  /* reuse the letter-flip: the active panel's title rolls in */
  .xv-live .xv-panel.is-active .xv-p-title [data-letters]{--y:-100%;}
  .xv-live .xv-labels{display:flex;align-self:center;height:min(58%,480px);}
  .xv-live .xv-leaders{display:block;}
  .xv-live .xv-rail{display:flex;flex-direction:column;gap:20px;padding:12vh 0;}
  .xv-live .xv-track{flex:1;width:1px;margin-left:4px;}

  html[data-material="steel"] .xv-layer{box-shadow:0 40px 70px -42px rgba(40,42,48,.4);}

  /* phones and touch: object above, reading card below, shorter pin */
  @media(max-width:768px),(hover:none){
    .xv{--lw:min(330px, calc(100vw - 56px));--lh:300px;}
    .xv-stage{grid-template-columns:1fr;gap:28px;}
    .xv-scene{position:relative;top:auto;height:470px;order:-1;}
    .xv-obj{--os:.78;}
    .xv-layer[data-l="w"]{transform:rotateX(50deg) rotateZ(-30deg) translateZ(84px);}
    .xv-layer[data-l="a"]{transform:rotateX(50deg) rotateZ(-30deg) translateZ(0);}
    .xv-layer[data-l="s"]{transform:rotateX(50deg) rotateZ(-30deg) translateZ(-84px);}
    .lx-body{padding:14px;}
    .w-ui{padding:12px 14px 10px;column-gap:12px;grid-template-columns:1fr 1fr;}
    .w-links{gap:9px;font-size:8px;}
    .w-brand{font-size:12px;letter-spacing:.2em;}
    .w-hero h4{font-size:23px;}
    .w-hero p{font-size:10.5px;margin-top:8px;}
    .w-form{padding:10px;}
    .w-form-t{font-size:13px;}
    .w-field{height:30px;font-size:10.5px;padding:0 7px;}
    .w-btn{font-size:11.5px;padding:6px 0;margin-top:8px;}
    .w-foot{font-size:7.5px;margin-top:10px;}
    .w-spec{left:18px;top:18px;}
    .w-spec b{font-size:46px;}
    .w-spec .s1{font-size:16px;margin-top:6px;}
    .w-spec .s2{font-size:11px;}
    .w-spec .s3{font-size:8.5px;}
    .w-sw{right:16px;bottom:16px;gap:6px;}
    .w-sw i{width:28px;height:28px;border-radius:6px;}
    .w-cols{inset:12px 14px;column-gap:8px;}
    .a-node i{width:28px;height:28px;border-radius:8px;}
    .a-track{top:20px;}
    .a-node span{font-size:8.5px;}
    .a-tip{width:150px;font-size:10px;}
    .a-log{font-size:9.5px;padding:10px;margin-top:16px;}
    .s-row{font-size:11px;padding:7px 9px;}
    .s-foot{flex-direction:column;align-items:flex-start;gap:10px;}
    .s-count{text-align:left;font-size:10px;}
    .xv-panels{gap:40px;}
    .xv-p-title{font-size:26px;}
    .xv-p-lead{font-size:14.5px;}
    .xv-spec > div{grid-template-columns:1fr;gap:6px;padding:11px 0;}
    .xv-spec dd{font-size:13.5px;}

    .xv-live{height:380vh;}
    .xv-live .xv-stage{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;padding:64px 0 14px;gap:10px;}
    /* explicit rows: the panels come first in the markup but sit below the object */
    .xv-live .xv-rail{grid-row:1;}
    .xv-live .xv-scene{order:0;grid-row:2;min-height:0;}
    .xv-live .xv-panels{grid-row:3;}
    .xv-live .xv-panels{align-self:end;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);}
    .xv-live .xv-panel{padding-top:0;border-top:0;}
    .xv-live .xv-p-title{margin-top:6px;font-size:21px;}
    .xv-live .xv-p-tag{font-size:11px;}
    .xv-live .xv-p-lead{margin-top:8px;font-size:13px;line-height:1.5;}
    .xv-live .xv-spec{margin-top:10px;}
    .xv-live .xv-spec > div{gap:3px;padding:7px 0;}
    .xv-live .xv-spec dt{font-size:10.5px;padding-top:0;}
    .xv-live .xv-spec dd{font-size:13.5px;line-height:1.45;}
    /* phones keep the one row that says what it does, plus the tags */
    .xv-live .xv-minor{display:none;}
    .xv-live .xv-pills{gap:5px;}
    .xv-live .xv-pills li{font-size:10.5px;padding:4px 8px;}
    .xv-live .xv-p-link{margin-top:10px;font-size:11px;}
    .xv-live .xv-labels,.xv-live .xv-leaders{display:none;}
    .xv-live .xv-rail{flex-direction:row;align-items:center;gap:12px;padding:0 64px 16px 0;}
    /* the rail names the current step in words; the dots stay as markers */
    .xv-live .xv-step{display:inline-block;min-width:92px;}
    .xv-live .xv-skip{left:auto;right:0;bottom:auto;top:64px;line-height:18px;}
    .xv-live .xv-track{flex:1;width:auto;height:1px;margin:0 8px 0 0;}
    .xv-fill{transform-origin:left;}
    .xv-track li{top:10px;left:var(--at);transform:translateX(-50%);font-size:0;}
    .xv-track li::before{left:50%;top:-14px;transform:translateX(-50%);}
  }

  /* SELECTED SCREENS: a full-bleed scroll-snap row of framed UI shots.
     Hover, focus or tap brings up redline annotations built from
     SCREEN_NOTES in the script. */
  .scr-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;}
  .scr-ctrl{display:flex;align-items:center;gap:10px;flex:none;}
  .scr-count{margin-right:8px;font-size:11px;letter-spacing:.12em;color:var(--grey-2);font-variant-numeric:tabular-nums;}
  .scr-btn{
    display:grid;place-items:center;
    width:44px;height:44px;border-radius:50%;border:1px solid var(--grey-3);background:none;color:var(--white);
    cursor:pointer;transition:border-color .2s ease,transform .15s ease;
  }
  .scr-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
  .scr-btn:hover{border-color:var(--white);}
  .scr-btn:active{transform:scale(.95);}
  .scr-btn:disabled{opacity:.3;cursor:default;}
  .scr-row{
    display:flex;gap:clamp(20px,3vw,44px);
    margin:72px calc(50% - 50vw) 0;padding:8px 15vw 36px;
    position:relative;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:15vw;overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .scr-row::-webkit-scrollbar{display:none;}
  /* mouse: grab the row and drag it; snapping waits until it settles */
  @media(hover:hover) and (pointer:fine){.scr-row{cursor:grab;user-select:none;}}
  .scr-row.is-dragging{scroll-snap-type:none;cursor:grabbing;}
  .scr-row img,.scr-row video{-webkit-user-drag:none;}
  .scr{flex:0 0 70vw;margin:0;scroll-snap-align:center;}
  .scr:focus-visible{outline-offset:8px;}
  .scr-frame{position:relative;aspect-ratio:16 / 9;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface);}
  .scr-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
  .scr.is-missing img{display:none;}
  /* video frame: the recording plays over its hero still, then fades away
     so the still remains as the screen */
  .scr-still,.scr-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
  .scr-vid{transition:opacity .8s ease;}
  .scr-video.is-done .scr-vid{opacity:0;pointer-events:none;}
  .scr-replay{
    position:absolute;right:14px;bottom:14px;z-index:2;padding:7px 13px;border-radius:999px;
    border:1px solid var(--grey-3);background:var(--black);color:var(--white);cursor:pointer;
    font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
    /* hidden, and out of the tab order, while the recording plays */
    opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease .4s,border-color .2s ease;
  }
  .scr-replay:hover{border-color:var(--white);}
  .scr-video.is-done .scr-replay{opacity:1;visibility:visible;pointer-events:auto;}
  /* notes describe the still, so they wait until the recording has finished */
  .scr-video:not(.is-done) .scr-notes{visibility:hidden;}
  /* EMPTY SLOT: until a screen file exists, the frame shows a wireframe of a
     page in progress that draws itself in when it scrolls into view */
  .scr-ph{position:absolute;inset:0;}
  /* only an image that failed to load shows the placeholder; a real one
     never has the wireframe or its tag painted over it */
  .scr:not(.is-missing) .scr-ph{visibility:hidden;}
  .scr-ph > b{
    position:absolute;right:5%;top:calc(6.5% - 8px);z-index:1;padding:5px 10px;border:1px solid var(--grey-3);border-radius:999px;background:var(--surface);
    font-family:var(--f-mono);font-weight:400;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-2);
  }
  .scr-ph > span{display:none;}
  .bp{position:absolute;inset:6.5% 5% 7%;display:grid;gap:7% 6%;}
  .bp i{display:block;background:var(--surface-2);border-radius:3px;transform-origin:left;}
  .bp .h{height:clamp(8px,1.5vw,22px);}
  .bp .t{height:clamp(3px,.45vw,7px);background:var(--grey-3);}
  .bp .s{width:62%;}
  .bp .btn{width:28%;height:clamp(10px,1.6vw,24px);border-radius:999px;background:none;border:1px solid var(--grey-3);}
  .bp-col{display:flex;flex-direction:column;justify-content:center;gap:clamp(5px,1vw,14px);}
  /* logo bar left, links centred; the In progress tag takes the right */
  .bp-nav{grid-column:1 / -1;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-bottom:3%;border-bottom:1px solid var(--line);}
  .bp-nav > i{width:38%;height:clamp(5px,.8vw,11px);}
  .bp-nav span{display:flex;gap:clamp(6px,1.4vw,20px);}
  .bp-nav span i{width:clamp(18px,3.4vw,48px);height:clamp(3px,.45vw,7px);background:var(--grey-3);}
  .bp-img{position:relative;border:1px solid var(--grey-3);border-radius:6px;overflow:hidden;}
  .bp-img svg{position:absolute;inset:0;width:100%;height:100%;}
  .bp-img line{stroke:var(--grey-3);stroke-width:1;vector-effect:non-scaling-stroke;}
  .bp-a{grid-template-columns:1fr 1.1fr;grid-template-rows:auto 1fr;}
  .bp-b{grid-template-rows:auto 1fr 38%;}
  .bp-b .bp-col{align-items:center;}
  .bp-b .h{width:64%;}
  .bp-b .h.s{width:44%;}
  .bp-b .t{width:38%;}
  .bp-b i{transform-origin:center;}
  .bp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:4%;min-height:0;}
  .bp-c{grid-template-columns:1.3fr 1fr;grid-template-rows:auto 1fr auto;}
  .bp-c .bp-img{grid-column:1 / -1;}
  .bp-c .bp-col{justify-content:flex-start;}
  .scr.is-missing .scr-notes{display:none;}
  /* drawn in: bars sweep open left to right, image boxes wipe down */
  html.js .bp:not(.is-drawn) i{transform:scaleX(0);}
  html.js .bp:not(.is-drawn) .bp-img{clip-path:inset(0 0 100% 0);}
  .bp i{transition:transform .8s cubic-bezier(.7,0,.2,1);transition-delay:calc(var(--k,0) * 60ms);}
  .bp .bp-img{transition:clip-path 1s cubic-bezier(.7,0,.2,1);transition-delay:calc(var(--k,0) * 60ms);}
  .scr-bar{
    display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--white);
    font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-1);
  }
  .scr-bar span:first-child{display:inline-flex;align-items:center;gap:10px;color:var(--white);}
  .scr-bar span:first-child::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);}
  /* a dithered pass of the screen, drawn coarse to fine, then lifted off */
  .scr-dither{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;transition:opacity .45s ease;pointer-events:none;}
  .scr-dither.is-off{opacity:0;}
  .scr figcaption{margin-top:16px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-2);}

  /* redlines: a measurement line with end ticks and a small mono label */
  /* the notes read on any screen, light, dark or brightly coloured: ink is
     always the darker of the theme pair, every line and tick carries a thin
     halo of the lighter one, and labels are solid ink pills */
  .scr-notes{position:absolute;inset:0;pointer-events:none;--rl-ink:var(--black);--rl-paper:var(--white);}
  html[data-material="steel"] .scr-notes{--rl-ink:var(--white);--rl-paper:var(--black);}
  .scr-notes .rl{filter:drop-shadow(0 0 1px var(--rl-paper));}
  .rl{
    position:absolute;left:var(--x);top:var(--y);width:var(--w);height:0;border-top:1px solid var(--rl-ink);
    opacity:0;transform:scaleX(0);transform-origin:left;
    transition:transform .5s cubic-bezier(.7,0,.2,1),opacity .2s ease;transition-delay:calc(var(--i,0) * 70ms);
  }
  .rl::before,.rl::after{content:"";position:absolute;top:-4px;width:1px;height:7px;background:var(--rl-ink);}
  .rl::before{left:0;}
  .rl::after{right:0;}
  .rl.v{width:0;height:var(--h);border-top:0;border-left:1px solid var(--rl-ink);transform:scaleY(0);transform-origin:top;}
  .rl.v::before,.rl.v::after{left:-4px;width:7px;height:1px;}
  .rl.v::before{top:0;}
  .rl.v::after{top:auto;bottom:0;right:auto;}
  .rl span{
    position:absolute;left:50%;bottom:7px;transform:translateX(-50%);white-space:nowrap;
    padding:3px 7px;border-radius:4px;background:var(--rl-ink);color:var(--rl-paper);
    font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  }
  .rl.v span{left:9px;bottom:auto;top:50%;transform:translateY(-50%);}
  /* labels near a frame edge anchor to that side instead of centring */
  .rl.al span{left:0;transform:none;}
  .rl.ar span{left:auto;right:0;transform:none;}
  .rl.below span{bottom:auto;top:7px;}
  .scr:hover .rl,.scr:focus-visible .rl,.scr.is-notes .rl{opacity:1;transform:none;}

  @media(max-width:768px){
    .scr-head{flex-direction:column;align-items:flex-start;}
    /* counter stays left, arrows go to the right edge */
    .scr-ctrl{align-self:stretch;}
    .scr-count{margin-right:auto;}
    .scr-row{margin-top:44px;padding-inline:6vw;scroll-padding-inline:6vw;}
    .scr{flex-basis:88vw;}
    .rl span{font-size:8px;padding:2px 5px;}
    /* a phone-sized frame has room for two notes: the first two of each screen */
    .scr-notes .rl:nth-child(n+3){display:none;}
  }

  /* IN OPERATION: one example night, told as timed vignettes beside a
     sticky clock that rolls forward as each vignette reaches the middle of
     the screen. Hidden/start states only apply once JS arms the section
     (.ops-armed), so without JS or with reduced motion every vignette
     simply shows its finished state. */
  .ops-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,7vw,110px);margin-top:80px;align-items:start;}
  .ops-clock{position:sticky;top:24vh;}
  .odo{display:inline-flex;font-variant-numeric:tabular-nums;}
  .odo .digit{display:block;height:1em;overflow:hidden;}
  .odo .reel{display:flex;flex-direction:column;transition:transform .9s cubic-bezier(.16,1,.3,1);transition-delay:var(--dd,0s);}
  /* letter-spacing 0 inside reels: negative tracking narrows each digit's
     slot and the overflow clip would shave the glyph's right edge */
  .odo .reel span{display:block;height:1em;line-height:1;letter-spacing:0;}
  .clock{
    font-family:var(--f-mono);font-weight:500;
    font-size:clamp(64px,8vw,120px);line-height:1;letter-spacing:-.05em;
  }
  .clock .sep{display:block;width:.55em;text-align:center;line-height:1;}
  .ops.is-live .clock .sep{animation:sepBlink 2s steps(1) infinite;}
  @keyframes sepBlink{50%{opacity:.2;}}
  .clock-meta{
    margin-top:22px;display:flex;justify-content:space-between;gap:16px;
    font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-2);
  }
  .clock-meta .owner{color:var(--grey-1);}
  .roll-mask{display:inline-block;overflow:hidden;vertical-align:bottom;}
  .roll{display:inline-block;transition:transform .24s cubic-bezier(.4,0,.2,1),opacity .24s ease;}
  .roll.roll-out{transform:translateY(-70%);opacity:0;}
  .roll.roll-in{transform:translateY(70%);opacity:0;transition:none;}
  /* the dot layer is translated by up to 100% of its own width, so clip
     sideways (6px of slack keeps the dot whole at 00:00 and 09:00) or it
     widens the page on phones */
  .night{margin:30px -6px 0;padding:0 6px;overflow-x:clip;overflow-y:visible;}
  .night-track{position:relative;height:1px;background:var(--line);}
  .night-fill{position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(var(--pf,0));transition:transform .9s cubic-bezier(.16,1,.3,1);}
  .night-dot{position:absolute;inset:0;transform:translateX(var(--p,0%));transition:transform .9s cubic-bezier(.16,1,.3,1);}
  .night-dot::before{
    content:"";position:absolute;left:0;top:0;width:9px;height:9px;border-radius:50%;
    background:var(--accent);transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(255,255,255,.1);
  }
  .night-ends{display:flex;justify-content:space-between;margin-top:14px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--grey-1);}
  /* every event of the night as a tick; the clock's passing lights them in
     order (each one's delay is set so it lights as the dot sweeps by) */
  .night-ticks{position:absolute;inset:0;pointer-events:none;}
  .tick{
    position:absolute;left:var(--x);top:-4px;width:1px;height:9px;background:var(--white);
    opacity:.22;transform:scaleY(.55);transition:opacity .4s ease,transform .5s cubic-bezier(.16,1,.3,1);transition-delay:var(--td,0s);
  }
  .tick.big{top:-7px;height:15px;}
  .tick.on{opacity:1;transform:none;background:var(--accent);}
  .night-count{display:inline-flex;align-items:center;gap:8px;text-transform:uppercase;color:var(--grey-2);}
  .night-count b{display:inline-flex;font-weight:500;color:var(--white);}

  /* NIGHT SWITCH: which kind of business the night belongs to. A pill slides
     behind the chosen one (before the script measures, the chosen button
     carries its own fill) */
  .night-pick{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin-top:36px;}
  .np-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-1);}
  .np-seg{position:relative;display:inline-flex;padding:4px;border:1px solid var(--line);border-radius:999px;}
  .np-seg button{
    position:relative;z-index:1;padding:9px 16px;border:0;border-radius:999px;background:none;cursor:pointer;white-space:nowrap;
    font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-2);transition:color .3s ease;
  }
  .np-seg button:hover{color:var(--white);}
  .np-seg button[aria-pressed="true"]{color:var(--black);}
  .np-seg:not(.is-ready) button[aria-pressed="true"]{background:var(--white);}
  .np-ind{
    position:absolute;left:0;top:4px;bottom:4px;width:0;border-radius:999px;background:var(--white);
    transition:transform .5s cubic-bezier(.2,.8,.2,1),width .5s cubic-bezier(.2,.8,.2,1);
  }
  html:not(.js) .night-pick{display:none;}
  .ops .lede{transition:opacity .25s ease;}
  .ops .lede.is-swapping{opacity:0;}
  @media(max-width:640px){
    .night-pick{flex-direction:column;align-items:flex-start;}
    .np-seg button{padding:9px 11px;font-size:11px;letter-spacing:.04em;}
  }

  .ops-list{display:flex;flex-direction:column;gap:clamp(110px,18vh,170px);padding-bottom:6vh;}
  .vig-time{
    display:flex;align-items:center;gap:14px;
    font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-1);
    transition:color .4s ease;
  }
  .vig-time::after{content:"";flex:1;height:1px;background:var(--line);}
  .vig.is-active .vig-time{color:var(--white);}
  .vig h3{font-family:var(--f-display);font-weight:600;font-size:clamp(24px,2.6vw,32px);line-height:1.15;letter-spacing:-.01em;}
  .vig-time + .vl{margin-top:18px;}
  .vig p{margin-top:12px;color:var(--grey-2);font-size:16px;line-height:1.6;max-width:46ch;}
  .vig-visual{margin-top:34px;}
  /* each text line rises from behind its own mask; the visual wipes open */
  .vl{display:block;overflow:hidden;padding-bottom:.08em;}
  .ops-armed .vl-in{display:block;transform:translateY(105%);}
  .ops-armed .vig.is-in .vl-in{transform:none;transition:transform .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 90ms);}
  .ops-armed .vig-time{clip-path:inset(0 100% 0 0);}
  .ops-armed .vig.is-in .vig-time{clip-path:inset(0 0 0 0);transition:clip-path 1s cubic-bezier(.7,0,.2,1),color .4s ease;}
  .ops-armed .vig-visual{clip-path:inset(0 0 100% 0);}
  .ops-armed .vig.is-in .vig-visual{clip-path:inset(0 0 -40px 0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1) .25s;}

  /* Reply time, under the chat: the wait it would have been, struck out,
     beside the time it actually took */
  .swap{display:grid;grid-template-columns:1fr 1fr;margin-top:28px;border-top:1px solid var(--line);}
  .swap-row{display:flex;flex-direction:column;gap:12px;padding:18px 22px 0 0;}
  .swap-row.after{padding:18px 0 0 22px;border-left:1px solid var(--line);}
  .swap-k{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-2);line-height:1.5;}
  .swap-v{position:relative;align-self:flex-start;font-family:var(--f-display);font-weight:600;font-size:clamp(34px,3.8vw,50px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap;}
  .vig .swap-note{margin-top:18px;font-size:14px;line-height:1.6;max-width:56ch;}
  .swap-note b{font-weight:500;color:var(--white);}
  .swap-v.before{color:var(--grey-1);}
  .swap-v.before::after{
    content:"";position:absolute;left:-4%;right:-4%;top:54%;height:2px;background:var(--accent);
    transform-origin:left;transition:transform .6s cubic-bezier(.7,0,.2,1);
  }
  .ops-armed .swap-v.before::after{transform:scaleX(0);}
  .ops-armed .swap.is-struck .swap-v.before::after{transform:scaleX(1);}
  .ops-armed .swap-row.after{clip-path:inset(0 100% 0 0);}
  .ops-armed .swap.is-after .swap-row.after{clip-path:inset(0 0 0 0);transition:clip-path .8s cubic-bezier(.7,0,.2,1);}

  /* Vignette: lead routing */
  .route-svg{display:block;width:100%;max-width:480px;height:auto;overflow:visible;}
  .route-svg .wire{fill:none;stroke:var(--grey-3);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:0;}
  .route-svg .wire-hi{fill:none;stroke:var(--white);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:0;}
  .route-svg .node{fill:var(--surface-2);}
  .route-svg .lane{fill:transparent;stroke:var(--grey-3);transition:fill .5s ease,stroke .5s ease;}
  .route-svg .lane.on{fill:var(--white);stroke:var(--white);}
  .route-svg text{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;fill:var(--grey-2);transition:fill .5s ease;}
  .route-svg .node-t{fill:var(--white);font-family:var(--f-display);font-size:15px;letter-spacing:0;text-transform:none;font-weight:600;}
  .route-svg .node-s{font-family:var(--f-body);font-size:12.5px;letter-spacing:0;text-transform:none;}
  .route-svg .lane.on + text{fill:var(--black);}
  .route-svg .pulse{fill:var(--white);}
  .ops-armed .route-svg .wire{stroke-dashoffset:1;}
  .ops-armed .route-svg.is-drawn .wire{stroke-dashoffset:0;transition:stroke-dashoffset .9s cubic-bezier(.7,0,.2,1);transition-delay:calc(var(--i,0) * 120ms);}
  .ops-armed .route-svg .wire-hi{stroke-dashoffset:1;}
  .ops-armed .route-svg.is-routed .wire-hi{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.45,0,.2,1);}
  .ops-armed .route-svg .pulse{opacity:0;}
  .ops-armed .route-svg.is-routed .pulse{opacity:1;}
  /* .vig .route-tag: .vig p would otherwise make it a body paragraph */
  .vig .route-tag{max-width:none;line-height:1.5;margin-top:18px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-2);}
  .ops-armed .route-tag{clip-path:inset(0 100% 0 0);}
  .ops-armed .route-tag.is-typed{clip-path:inset(0 0 0 0);transition:clip-path 1s steps(34,end);}

  /* Vignette: self-repair monitor */
  .mon{max-width:480px;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden;}
  .mon-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--grey-2);transition:color .4s ease;}
  .mon-row .mon-s{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-1);}
  .mon-row.is-hot{color:var(--white);}
  .mon-row.is-hot .mon-s{color:var(--white);}
  .st{position:relative;width:10px;height:10px;border-radius:50%;background:var(--grey-2);border:1.5px solid var(--grey-2);}
  .st.fail{background:transparent;border-color:var(--white);animation:stBlink .8s steps(1) infinite;}
  .st.retry{background:transparent;border-color:var(--white);border-right-color:transparent;animation:stSpin .7s linear infinite;}
  .st.ok{background:var(--white);border-color:var(--white);}
  .st.ok::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:1px solid var(--white);animation:stRing 1.2s cubic-bezier(.16,1,.3,1) 2 forwards;}
  @keyframes stBlink{50%{opacity:.15;}}
  @keyframes stSpin{to{transform:rotate(360deg);}}
  @keyframes stRing{from{transform:scale(1);opacity:.8;}to{transform:scale(2.8);opacity:0;}}
  .mon-log{padding:14px 18px 16px;display:grid;gap:6px;font-size:11.5px;color:var(--grey-1);font-variant-numeric:tabular-nums;}
  .mon-log div{white-space:nowrap;overflow:hidden;}
  .mon-log div.hot{color:var(--white);}
  .ops-armed .mon-log div{clip-path:inset(0 100% 0 0);}
  .ops-armed .mon-log div.is-typed{clip-path:inset(0 0 0 0);transition:clip-path .9s steps(30,end);}

  /* Vignette: morning summary */
  .digest{max-width:480px;}
  .digest-head{display:flex;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid var(--white);font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-2);}
  .dg-row{position:relative;display:flex;justify-content:space-between;align-items:center;padding:15px 0;font-size:15px;color:var(--grey-2);}
  .dg-row::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);transform-origin:left;}
  .dg-row b{font-family:var(--f-mono);font-weight:500;font-size:20px;color:var(--white);}
  .ops-armed .dg-row{opacity:.3;transition:opacity .5s ease;}
  .ops-armed .dg-row::after{transform:scaleX(0);transition:transform .7s cubic-bezier(.7,0,.2,1);}
  .ops-armed .dg-row.on{opacity:1;}
  .ops-armed .dg-row.on::after{transform:scaleX(1);}
  .dg-total{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding-top:26px;}
  .dg-total > span:first-child{font-family:var(--f-display);font-weight:600;font-size:clamp(20px,2vw,24px);max-width:12ch;line-height:1.15;}
  .dg-total b{font-family:var(--f-display);font-weight:600;font-size:clamp(64px,7vw,96px);line-height:.85;letter-spacing:-.04em;transition:transform .6s cubic-bezier(.16,1,.3,1);}
  .dg-total.is-done b{transform:scale(1.06);}

  @media(max-width:900px){
    .ops-grid{grid-template-columns:1fr;gap:56px;margin-top:48px;}
    /* the clock collapses into a slim sticky bar that rides above the vignettes */
    /* top:0 + nav-height padding so the bar also masks the strip behind the
       (transparent) fixed nav instead of letting text slide through it */
    .ops-clock{
      top:0;z-index:5;margin:0 -20px;padding:64px 20px 14px;
      background:var(--black);border-bottom:1px solid var(--line);
      display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:18px;
    }
    .clock{font-size:34px;}
    .clock-meta{margin-top:0;flex-direction:column;gap:4px;font-size:11px;align-items:flex-end;text-align:right;}
    .night{grid-column:1 / -1;margin-top:12px;}
    .night-ends{display:none;}
  }
  /* the diagram scales down with the column, so bump its label sizes on phones */
  @media(max-width:640px){
    .route-svg text{font-size:13px;}
    .route-svg .node-t{font-size:17px;}
    .route-svg .node-s{font-size:14px;}
  }

  .chat{
    border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden;
    box-shadow:0 48px 90px -48px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05);
  }
  .chat-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);}
  .chat-avatar{
    width:36px;height:36px;border-radius:50%;background:var(--surface-2);flex:none;
    display:grid;place-items:center;font-family:var(--f-display);font-weight:600;font-size:15px;
  }
  .chat-head strong{display:block;font-family:var(--f-display);font-size:15px;font-weight:600;}
  .chat-head small{font-size:12px;color:var(--grey-2);}
  .chat-time{margin-left:auto;font-size:11px;color:var(--grey-1);font-variant-numeric:tabular-nums;}
  .chat-body{padding:22px 18px 26px;display:flex;flex-direction:column;gap:12px;}
  .msg{position:relative;max-width:84%;align-self:flex-start;}
  .msg.out{align-self:flex-end;}
  /* corners and anchors are direction-aware, so the Arabic (right-to-left)
     version mirrors like WhatsApp does */
  .bubble{
    display:block;padding:11px 14px;border-radius:14px;border-end-start-radius:4px;
    font-size:14.5px;line-height:1.5;background:var(--surface-2);color:var(--white);
    transform-origin:bottom left;
  }
  .msg.out .bubble{background:var(--white);color:var(--black);border-radius:14px;border-end-end-radius:4px;transform-origin:bottom right;}
  .chat-body[dir="rtl"] .bubble{transform-origin:bottom right;}
  .chat-body[dir="rtl"] .msg.out .bubble{transform-origin:bottom left;}
  .chat-body[lang="ar"] .bubble,.chat-head small[lang="ar"]{font-family:'Segoe UI','Noto Sans Arabic','Geeza Pro',Tahoma,sans-serif;}
  .chat-body[lang="ar"] .bubble{font-size:15.5px;line-height:1.6;}
  .dots{
    position:absolute;top:0;inset-inline-end:0;display:flex;gap:4px;
    padding:14px 15px;border-radius:14px;border-end-end-radius:4px;background:var(--surface-2);
    opacity:0;transition:opacity .2s ease;pointer-events:none;
  }
  /* the pulse only runs while the dots are actually showing */
  .dots i{width:6px;height:6px;border-radius:50%;background:var(--grey-2);animation:dotPulse 1s ease-in-out infinite paused;}
  .msg.typing .dots i{animation-play-state:running;}
  .dots i:nth-child(2){animation-delay:.15s;}
  .dots i:nth-child(3){animation-delay:.3s;}
  @keyframes dotPulse{0%,100%{opacity:.3;transform:translateY(0);}50%{opacity:1;transform:translateY(-2px);}}
  .chat.is-armed .bubble{opacity:0;transform:translateY(8px) scale(.97);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1);}
  .chat.is-armed .msg.shown .bubble{opacity:1;transform:none;}
  .chat.is-armed .msg.typing .dots{opacity:1;}
  .demo-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 16px;margin-top:16px;}
  /* .vig p would otherwise make this a body paragraph */
  .vig .demo-note{margin:0;max-width:none;font-size:11px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-1);text-align:right;}
  .lang-toggle{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:999px;}
  .lang-btn{
    min-width:44px;padding:6px 12px;border:0;border-radius:999px;background:none;color:var(--grey-2);cursor:pointer;
    font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;transition:background-color .25s ease,color .25s ease;
  }
  .lang-btn[lang="ar"]{font-family:'Segoe UI','Noto Sans Arabic','Geeza Pro',Tahoma,sans-serif;font-size:12.5px;letter-spacing:0;}
  .lang-btn[aria-pressed="true"]{background:var(--white);color:var(--black);}

  /* PROCESS: connected route */
  .route{position:relative;margin-top:64px;padding-top:8px;}
  .route-counter{
    position:absolute;top:-38px;right:0;
    font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--grey-2);font-variant-numeric:tabular-nums;
    opacity:0;transition:opacity .3s ease;
  }
  .route-line-bg{position:absolute;left:20px;width:0;border-left:1px dashed var(--grey-1);}
  .route-line-progress{
    position:absolute;left:20px;width:2px;background:var(--accent);
    transform-origin:top;transform:scaleY(0);
  }
  .route-marker{
    position:absolute;left:20px;top:0;width:10px;height:10px;border-radius:50%;
    background:var(--accent);box-shadow:0 0 0 4px rgba(255,255,255,.12);
    transform:translate(-50%,-50%);opacity:0;transition:opacity .3s ease;z-index:5;
  }
  .route-step{
    position:relative;display:flex;gap:24px;padding-bottom:64px;
    transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
  }
  html.js .route-step:not(.is-revealed){opacity:0;transform:translateY(18px);}
  .route-step:last-child{padding-bottom:4px;}
  .route-node{
    flex:none;width:40px;height:40px;border-radius:50%;
    background:var(--black);border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--f-mono);font-size:12px;color:var(--grey-2);
    position:relative;z-index:2;
    transition:border-color .4s ease,color .4s ease,background-color .45s ease;
  }
  .route-step.is-revealed .route-node{border-color:var(--white);color:var(--white);}
  .route-content{position:relative;padding-top:6px;}
  .route-content h3{font-family:var(--f-display);font-size:19px;font-weight:600;margin-bottom:6px;}
  .route-content p{font-size:15.5px;color:var(--grey-2);line-height:1.6;max-width:56ch;}

  /* Nodes the marker has passed flip to solid ink; the one it's on pulses */
  .route-step.is-passed .route-node{background:var(--white);border-color:var(--white);color:var(--black);}
  .route-step.is-current .route-node::after{
    content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--white);
    animation:liveRing 1.8s cubic-bezier(.16,1,.3,1) infinite;
  }

  /* A short connector draws from the rail out to each step's text */
  .route-content::before{
    content:"";position:absolute;top:20px;height:1px;background:var(--grey-3);
    left:-24px;width:24px;transform-origin:left;
    transition:transform .6s cubic-bezier(.7,0,.2,1) .15s,background-color .4s ease;
  }
  html.js .route-step:not(.is-revealed) .route-content::before{transform:scaleX(0);}
  .route-step.is-passed .route-content::before{background:var(--white);}

  /* "You get" deliverable, wiped open from the rail side */
  .route-content .route-get{
    display:inline-flex;align-items:baseline;gap:12px;margin-top:16px;
    padding:10px 14px;border:1px solid var(--line);border-radius:10px;
    font-size:13.5px;line-height:1.5;color:var(--white);text-align:left;
    transition:clip-path .8s cubic-bezier(.7,0,.2,1) .35s;
  }
  .route-get span{flex:none;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-1);}
  html.js .route-step:not(.is-revealed) .route-get{clip-path:inset(0 100% 0 0);}

  /* End of the route: the system goes live when the line reaches it */
  .route-final .route-node{width:40px;height:40px;}
  .route-final .route-node i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--grey-2);transition:background-color .4s ease,border-color .4s ease;}
  .route-final.is-passed .route-node i{background:var(--accent);border-color:var(--accent);}
  .route-final.is-passed .route-node::after{
    content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--accent);
    animation:liveRing 2.4s cubic-bezier(.16,1,.3,1) infinite;
  }
  /* a pulse that stays close to its node (and inside the page on phones) */
  @keyframes liveRing{from{transform:scale(1);opacity:.7;}to{transform:scale(1.9);opacity:0;}}
  /* the label sits on the node's centre line; its connector stops short of it */
  .route-final .route-content{display:flex;align-items:center;min-height:40px;padding-top:0;}
  .route-final .route-content::before{top:50%;width:14px;}
  .route-live{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-1);transition:color .4s ease;}
  .route-final.is-passed .route-live{color:var(--white);}
  @media(min-width:901px){
    /* zigzag: the connector spans the 40px gap on whichever side faces the rail */
    .route-content::before{left:auto;right:0;width:40px;transform-origin:right;}
    .route-step.right .route-content::before{left:0;right:auto;transform-origin:left;}
    html.js .route-step:not(.right):not(.is-revealed) .route-get{clip-path:inset(0 0 0 100%);}
    .route-final .route-content{justify-content:flex-end;}
    .route-final .route-content::before{width:26px;}
  }
  @media(max-width:640px){
    .route-content::before{left:-16px;width:16px;top:17px;}
    .route-final .route-node{width:34px;height:34px;}
    .route-final .route-content{min-height:34px;}
    .route-final .route-content::before{width:8px;}
    .route-counter{top:-32px;}
    .route-step{gap:16px;padding-bottom:44px;}
    .route-node{width:34px;height:34px;font-size:11px;}
    .route-line-bg,.route-line-progress,.route-marker{left:17px;}
  }

  /* Zigzag layout on wider screens: alternating left/right of a centered line */
  @media(min-width:901px){
    .route-line-bg,.route-line-progress,.route-marker{left:50%;}
    .route-step{
      display:grid;grid-template-columns:1fr 40px 1fr;
      align-items:start;gap:0;padding-bottom:84px;
    }
    /* both pinned to row 1: the node comes first in the markup, so without
       an explicit row a left-column (column 1) item gets bumped to row 2
       and sits a full node-height below its circle */
    .route-node{grid-column:2;grid-row:1;justify-self:center;}
    .route-content{grid-column:1;grid-row:1;text-align:right;padding-right:40px;}
    .route-content p{margin-left:auto;}
    .route-step.right .route-content{
      grid-column:3;text-align:left;padding-right:0;padding-left:40px;
    }
    .route-step.right .route-content p{margin-left:0;margin-right:auto;}
  }

  /* MORE: two big rows that open the "Who it's for" and "Questions" pages */
  .more-list{list-style:none;border-top:1px solid var(--line);}
  .more-row{
    display:grid;grid-template-columns:180px minmax(0,1fr) 210px;align-items:center;gap:24px;
    padding:clamp(28px,4vw,48px) 0;
  }
  .more-list li{border-bottom:1px solid var(--line);}
  .more-k,.more-n{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-1);white-space:nowrap;}
  .more-n{justify-self:end;}
  @media(max-width:860px){.more-n{justify-self:start;}}
  .more-t{font-family:var(--f-display);font-weight:500;font-size:clamp(26px,3.6vw,52px);letter-spacing:-.035em;line-height:.95;text-transform:uppercase;transition:transform .45s cubic-bezier(.2,.8,.2,1);}
  .more-arrow{display:inline-block;margin-left:8px;color:var(--white);transition:transform .35s cubic-bezier(.2,.8,.2,1);}
  @media(hover:hover){
    .more-row:hover .more-t{transform:translateX(10px);}
    .more-row:hover .more-arrow{transform:translateX(6px);color:var(--accent);}
  }
  @media(max-width:860px){
    .more-row{grid-template-columns:1fr;gap:12px;}
  }
  @media(prefers-reduced-motion:reduce){.more-t,.more-arrow{transition:none;}}
  /* WHO IT'S FOR: one hairline row per industry */
  .for-list{list-style:none;margin-top:64px;border-top:1px solid var(--line);}
  .for-row{
    /* fixed tag column, so every row's columns line up with the others */
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) 240px;align-items:baseline;gap:24px;
    padding:26px 0;border-bottom:1px solid var(--line);
  }
  .for-row h3{font-family:var(--f-display);font-weight:600;font-size:clamp(20px,2vw,26px);letter-spacing:-.01em;transition:transform .45s cubic-bezier(.2,.8,.2,1);}
  .for-row p{font-size:16px;line-height:1.55;color:var(--grey-2);}
  .for-tags{justify-self:end;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-1);white-space:nowrap;}
  .for-row h3{justify-self:start;padding:0 .12em;margin-left:-.12em;border-radius:6px;}
  @media(hover:hover){.for-row:hover h3{transform:translateX(8px);background:var(--accent);color:var(--on-accent);}}
  @media(max-width:860px){
    .for-row{grid-template-columns:1fr;gap:8px;padding:22px 0;}
    .for-tags{justify-self:start;}
  }

  /* RESULTS (hidden until there are entries): before -> after cards, quotes */
  .res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:64px;}
  .res{padding:26px;border:1px solid var(--line);border-radius:16px;background:var(--surface);}
  .res-tag,.res-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-1);}
  .res h3{margin-top:10px;font-family:var(--f-display);font-weight:600;font-size:21px;letter-spacing:-.01em;}
  .res-metric{margin-top:26px;font-family:var(--f-display);font-weight:600;font-size:clamp(34px,3.6vw,48px);letter-spacing:-.03em;line-height:1;}
  .res-metric s{color:var(--grey-1);text-decoration-thickness:2px;}
  .res-label{margin-top:10px;}
  .res-built{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;line-height:1.55;color:var(--grey-2);}
  .quotes{display:grid;gap:40px;margin-top:72px;}
  .quote blockquote{font-family:var(--f-display);font-weight:600;font-size:clamp(22px,2.6vw,34px);line-height:1.25;letter-spacing:-.015em;max-width:30ch;}
  .quote figcaption{margin-top:16px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-1);}

  /* PACKAGES: three starting points, the whole system inverted, plus the care plan */
  .pk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:64px;}
  .pk{display:flex;flex-direction:column;padding:28px;border:1px solid var(--line);border-radius:16px;background:var(--surface);}
  .pk-tag{font-size:11px;letter-spacing:.12em;color:var(--grey-1);}
  .pk h3,.pk-run h3{margin-top:14px;font-family:var(--f-display);font-weight:600;font-size:26px;letter-spacing:-.015em;}
  .pk-desc{margin-top:10px;font-size:15px;line-height:1.55;color:var(--grey-2);max-width:40ch;}
  .pk-list{list-style:none;display:grid;gap:9px;margin:24px 0 30px;font-size:15px;}
  .pk-list li{display:flex;align-items:baseline;gap:10px;}
  .pk-list li::before{content:"";flex:none;width:10px;height:1px;background:currentColor;opacity:.55;transform:translateY(-4px);}
  .pk-price{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--grey-2);}
  .pk-price b{display:block;margin-top:6px;font-family:var(--f-display);font-weight:600;font-size:26px;letter-spacing:-.015em;color:var(--white);}
  .pk-cta{
    align-self:flex-start;margin-top:18px;padding-bottom:4px;border-bottom:1px solid var(--grey-3);
    font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;transition:border-color .2s ease;
  }
  .pk-cta:hover{border-color:currentColor;}
  /* inverted: ink card, canvas text; secondary text dims by opacity so it
     stays within the two theme colours */
  .pk-feature{background:var(--white);border-color:var(--white);color:var(--black);}
  .pk-feature .pk-tag,.pk-feature .pk-desc,.pk-feature .pk-price{color:var(--black);opacity:.72;}
  .pk-feature .pk-price{opacity:1;border-top-color:var(--black);}
  .pk-feature .pk-price,.pk-feature .pk-price b{color:var(--black);}
  .pk-feature .pk-cta{border-bottom-color:var(--black);}
  /* the three packages in grades: white, dark grey, black, the same in either
     material. Each lifts under the pointer and a chip of the work wakes
     in its corner. */
  .pk-grid .pk{
    position:relative;background:var(--pk-bg);border-color:var(--pk-rule);color:var(--pk-ink);
    transition:opacity .7s ease,transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease;
  }
  .pk-grid .pk:nth-child(1){--pk-bg:#f7f7f8;--pk-ink:#111214;--pk-soft:#5f6166;--pk-rule:rgba(17,18,20,.14);}
  .pk-grid .pk:nth-child(2){--pk-bg:#3a3b3f;--pk-ink:#f4f4f5;--pk-soft:#b9bbbf;--pk-rule:rgba(255,255,255,.16);}
  .pk-grid .pk:nth-child(3){--pk-bg:#111214;--pk-ink:#f4f4f5;--pk-soft:#a3a5a9;--pk-rule:rgba(255,255,255,.16);}
  .pk-grid .pk .pk-tag,.pk-grid .pk .pk-desc,.pk-grid .pk .pk-price{color:var(--pk-soft);opacity:1;}
  .pk-grid .pk .pk-price{border-top-color:var(--pk-rule);}
  .pk-grid .pk .pk-price b{color:var(--pk-ink);}
  .pk-grid .pk .pk-cta{border-bottom-color:var(--pk-soft);}
  .pk-chip{position:absolute;top:24px;right:24px;width:72px;height:40px;margin:0;border-radius:4px;opacity:0;transform:scale(.6);transform-origin:top right;transition:opacity .25s ease,transform .4s cubic-bezier(.2,.8,.2,1);}
  .pk-grid .pk:hover .pk-chip,.pk-grid .pk:focus-within .pk-chip{opacity:1;transform:none;}
  @media(hover:hover) and (pointer:fine) and (min-width:901px){.pk-grid .pk:hover{transform:translateY(-12px) scale(1.02);box-shadow:0 32px 60px -32px rgba(0,0,0,.5);z-index:1;}}
  .pk-run{
    display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:16px;padding:26px 28px;
    border:1px dashed var(--grey-3);border-radius:16px;
  }
  .pk-run .pk-price{margin-top:0;padding-top:0;border-top:0;text-align:right;}
  @media(max-width:900px){
    .pk-grid{grid-template-columns:1fr;}
    .pk-run{flex-direction:column;align-items:flex-start;}
    .pk-run .pk-price{text-align:left;}
  }

  /* FAQ: sticky heading beside a hairline accordion (native details) */
  .faq-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,7vw,110px);align-items:start;}
  .faq-head{position:sticky;top:110px;}
  .faq-list{border-top:1px solid var(--line);}
  .faq{border-bottom:1px solid var(--line);}
  .faq summary{
    list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;cursor:pointer;
    font-family:var(--f-display);font-weight:600;font-size:clamp(17px,1.6vw,20px);line-height:1.3;letter-spacing:-.01em;
  }
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary i{position:relative;flex:none;width:14px;height:14px;transition:transform .35s cubic-bezier(.2,.8,.2,1);}
  .faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;top:50%;width:14px;height:1.5px;background:currentColor;transform:translateY(-50%);}
  .faq summary i::after{transform:translateY(-50%) rotate(90deg);}
  .faq[open] summary i{transform:rotate(45deg);color:var(--accent);}
  .faq-a{padding:0 40px 24px 0;font-size:16px;line-height:1.65;color:var(--grey-2);max-width:62ch;}
  .faq-a a{color:var(--white);border-bottom:1px solid var(--grey-3);}
  .faq[open] .faq-a{animation:faqIn .45s cubic-bezier(.2,.8,.2,1);}
  @keyframes faqIn{from{opacity:0;transform:translateY(-6px);}}
  @media(max-width:900px){
    .faq-wrap{grid-template-columns:1fr;gap:40px;}
    .faq-head{position:static;}
    .faq-a{padding-right:0;}
  }

  /* CTA: live availability, the ask, two ways in, and what the audit is */
  .cta{text-align:center;padding-top:clamp(110px,13vw,170px);padding-bottom:clamp(64px,8vw,110px);}
  .cta-status{
    display:inline-flex;align-items:center;gap:10px;margin-bottom:34px;padding:8px 14px 8px 12px;
    border:1px solid var(--line);border-radius:999px;
    font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-2);
    font-variant-numeric:tabular-nums;
  }
  .cta-dot{position:relative;flex:none;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--grey-2);}
  .cta-status.is-open{color:var(--white);}
  .cta-status.is-open .cta-dot{background:var(--accent);border-color:var(--accent);}
  .cta-status.is-open .cta-dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:1px solid var(--accent);animation:stRing 2.4s cubic-bezier(.16,1,.3,1) infinite;}
  .cta-status.is-off .cta-dot::after{animation-play-state:paused;}
  .cta h2{font-family:var(--f-display);font-weight:500;font-size:clamp(34px,6vw,92px);letter-spacing:-.04em;max-width:17ch;margin:0 auto 26px;line-height:.94;text-transform:uppercase;}
  .cta p{color:var(--grey-2);max-width:44ch;margin:0 auto 36px;font-size:16px;line-height:1.6;}
  .cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
  .cta-facts{list-style:none;display:flex;max-width:560px;margin:64px auto 0;border-top:1px solid var(--line);}
  .cta-facts li{flex:1;display:flex;flex-direction:column;gap:7px;padding:18px 10px 0;font-family:var(--f-display);font-weight:600;font-size:17px;letter-spacing:-.01em;}
  .cta-facts li + li{border-left:1px solid var(--line);}
  .cta-facts span{font-family:var(--f-mono);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-1);}
  @media(max-width:640px){.cta-facts{margin-top:48px;}.cta-facts li{font-size:15px;padding-inline:6px;}}

  /* AUDIT FORM: hairline fields on the canvas; a mark on a field that needs
     fixing is a dashed ink border plus the message, no new colours */
  .audit{max-width:680px;margin:0 auto;text-align:left;}
  .cta .audit p,.cta .af-done p{margin:0;max-width:none;}
  .cta .af-live{margin-bottom:18px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-2);text-align:center;}
  .af-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .af-field{display:flex;flex-direction:column;gap:8px;}
  .af-field > span:first-child{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-1);}
  .af-field em{font-style:normal;letter-spacing:.04em;text-transform:none;}
  .af-wide{grid-column:1 / -1;}
  .af-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
  html.js .af-other:not(.is-on){display:none;}
  .af-other.is-on{animation:afOther .45s cubic-bezier(.2,.8,.2,1);}
  @keyframes afOther{from{opacity:0;transform:translateY(-8px);}}
  @media(prefers-reduced-motion:reduce){.af-other.is-on{animation:none;}}
  .audit input,.audit select,.audit textarea{
    display:block;width:100%;padding:12px 14px;border:1px solid var(--grey-3);border-radius:10px;
    background:var(--surface);color:var(--white);font-family:var(--f-body);font-size:16px;line-height:1.4;
    -webkit-appearance:none;appearance:none;transition:border-color .2s ease;caret-color:var(--white);
  }
  /* the open list of a select (Windows draws it with system colours otherwise) */
  .audit option{background:var(--surface);color:var(--white);}
  .audit textarea{min-height:96px;resize:vertical;line-height:1.5;}
  .audit ::placeholder{color:var(--grey-1);opacity:1;}
  .audit input:hover,.audit select:hover,.audit textarea:hover{border-color:var(--grey-1);}
  .audit input:focus-visible,.audit select:focus-visible,.audit textarea:focus-visible{outline:none;border-color:var(--white);box-shadow:inset 0 0 0 1px var(--white);}
  .audit [aria-invalid="true"]{border-color:var(--white);border-style:dashed;}
  .af-sel{position:relative;display:block;}
  .af-sel select{padding-right:40px;cursor:pointer;}
  .af-sel::after{
    content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;pointer-events:none;
    border-right:1.5px solid var(--grey-2);border-bottom:1.5px solid var(--grey-2);transform:translateY(-70%) rotate(45deg);
  }
  .cta .af-error{margin-top:14px;font-size:14px;color:var(--white);}
  .af-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px 24px;margin-top:22px;}
  .af-foot .btn-primary{border:0;cursor:pointer;}
  .af-foot .btn-primary:disabled{opacity:.5;cursor:default;}
  .cta .af-note{font-size:13px;color:var(--grey-2);}
  .af-note a{color:var(--white);border-bottom:1px solid var(--grey-3);transition:border-color .2s ease;}
  .af-note a:hover{border-color:var(--white);}
  /* the sent message: a small box in the bottom corner with its own X */
  .af-done{
    position:fixed;right:24px;bottom:24px;z-index:60;width:min(360px,calc(100vw - 32px));
    display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:12px;
    padding:16px 14px 16px 18px;border:1px solid var(--line);border-radius:16px;
    background:var(--surface);color:var(--white);text-align:left;
    box-shadow:0 24px 50px -24px rgba(0,0,0,.45);
    animation:afdIn .45s cubic-bezier(.2,.8,.2,1);
  }
  .af-done[hidden]{display:none;}
  .af-done.is-leaving{opacity:0;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease;}
  @keyframes afdIn{from{opacity:0;transform:translateY(16px);}}
  .afd-dot{width:8px;height:8px;margin-top:7px;border-radius:50%;background:var(--accent);}
  .af-done b{display:block;font-family:var(--f-display);font-weight:600;font-size:17px;letter-spacing:-.01em;}
  .af-done p{margin:4px 0 0;max-width:none;color:var(--grey-2);font-size:14px;line-height:1.5;}
  .afd-x{
    position:relative;width:30px;height:30px;margin:-6px -4px 0 0;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer;
    transition:background-color .2s ease;
  }
  .afd-x::before,.afd-x::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:1.5px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg);}
  .afd-x::after{transform:translate(-50%,-50%) rotate(-45deg);}
  .afd-x:hover{background:var(--line);}
  .af-done:focus-visible{outline-offset:4px;}
  @media(max-width:640px){.af-done{right:16px;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:auto;}}
  @media(prefers-reduced-motion:reduce){.af-done{animation:none;}.af-done.is-leaving{transition:none;}}
  .cta-alt{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:48px;}
  .cta-alt > span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-1);}
  @media(max-width:640px){
    .af-grid{grid-template-columns:1fr;}
    .af-foot{flex-direction:column;align-items:stretch;}
    .af-foot .btn-primary{justify-content:center;}
    .cta .af-note{text-align:center;}
  }

  /* MOBILE DOCK: phones only; slides up once the hero is gone */
  .dock{display:none;}
  @media(max-width:768px){
    .dock{
      display:inline-flex;align-items:center;gap:10px;position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:45;
      padding:15px 22px;border-radius:999px;background:var(--white);color:var(--black);
      font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
      box-shadow:0 14px 30px -12px rgba(0,0,0,.7);
      transform:translate(-50%,160%);opacity:0;visibility:hidden;
      transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease,visibility 0s linear .45s;
    }
    .dock.is-on{transform:translate(-50%,0);opacity:1;visibility:visible;transition-delay:0s;}
    html{scroll-padding-bottom:84px;}
  }

  /* CLOSING MARK: the name and where it comes from, as a full-screen finale
     that ends with the footer. With script, each
     time it comes into view: "Devstinct" opens out into "A Development /
     Instinct" (the letters of the name stay lit), holds, then closes back up
     in the middle of the space. Without script, or with reduced motion, it's
     simply the finished word. */
  .finale{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;}
  /* top padding clears the fixed nav, which sits over the finale at the very bottom */
  .end-mark{flex:1;display:flex;flex-direction:column;padding:clamp(88px,7vw,104px) clamp(16px,3vw,40px) 0;overflow:clip;}
  .end-cap{
    display:flex;justify-content:space-between;gap:16px;
    padding-bottom:12px;border-bottom:1px solid var(--line);
    font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-1);
  }
  .end-word{
    flex:1;display:flex;align-items:center;justify-content:center;position:relative;white-space:nowrap;
    font-family:var(--f-display);font-weight:700;font-size:20.5vw;line-height:.74;letter-spacing:-.04em;
    color:var(--white);user-select:none;
  }
  /* live: every glyph is placed by script and only moves by transform */
  .end-word.is-live{text-align:left;}
  .end-word .el{position:absolute;left:0;top:0;line-height:.74;transform-origin:50% 60%;transition:translate .35s cubic-bezier(.2,.8,.2,1);}
  .end-word .el.x{color:var(--grey-1);}
  /* once it has closed up, the letters lift under a mouse */
  @media(hover:hover) and (pointer:fine){.end-word.is-done .el:hover{translate:0 -7%;}}
  .end-measure{position:absolute;left:0;top:0;visibility:hidden;font-size:100px;line-height:.74;}

  .btn-primary{display:inline-flex;align-items:center;gap:12px;background:var(--white);color:var(--black);padding:15px 22px;font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;white-space:nowrap;transition:opacity .2s,transform .15s ease;}
  .btn-primary::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent);}
  .btn-primary:hover{opacity:.85;}
  .btn-ghost{display:inline-flex;border:1px solid var(--white);border-radius:999px;padding:14px 22px;font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;transition:border-color .2s,transform .15s ease;}
  .btn-ghost:hover{background:var(--white);color:var(--black);}
  .btn-primary:active,.btn-ghost:active{transform:scale(.97);}

  footer{
    padding:36px 24px calc(36px + env(safe-area-inset-bottom));
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
    border-top:1px solid var(--line);
    font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-1);
  }
  footer .foot-mark{justify-self:start;display:flex;gap:14px;flex-wrap:wrap;}
  footer .foot-links{display:flex;flex-wrap:wrap;gap:12px 22px;justify-self:center;justify-content:center;}
  footer .foot-copy{justify-self:end;display:inline-flex;align-items:center;}
  @media(max-width:640px){
    footer{grid-template-columns:1fr;justify-items:center;text-align:center;}
    footer .foot-mark,footer .foot-links,footer .foot-copy{justify-self:center;justify-content:center;}
  }

  /* Letter-flip hover effect, shared by footer links and CTA buttons.
     Each [data-letters] element gets its text split into per-letter
     top/bottom spans (see JS) so a hover flips every letter up in a
     staggered wave, revealing a duplicate underneath. Screen readers get
     one clean copy of the text from a visually-hidden span. */
  /* line-height 1.3 (not 1) so the clip window is taller than the glyphs:
     descenders like "pp" fit, and the hidden copy sitting one line below
     can't peek into view */
  [data-letters]{
    position:relative;
    overflow:hidden;
    line-height:1.3;
    display:inline-flex;
    --y:0;
  }
  [data-letters]:hover,
  .btn-primary:hover [data-letters],
  .btn-ghost:hover [data-letters]{
    --y:-100%;
  }
  [data-letters] .letter{
    position:relative;
    display:inline-block;
    transition:transform .3s ease-in-out;
    transform:translateY(var(--y));
    transition-delay:calc(var(--i, 0) * 0.02s);
  }
  [data-letters] .letter .bottom{
    position:absolute;
    top:0;
    left:0;
    display:inline-block;
    transform:translateY(100%);
  }

  footer .foot-links a{
    color:var(--grey-1);
    transition:color .2s ease-in-out;
  }
  footer .foot-links a:hover{
    color:var(--white);
  }

  /* SCROLL PROGRESS LINE */
  .scroll-progress{
    position:fixed;top:0;left:0;width:100%;height:2px;z-index:60;
    background:var(--accent);transform-origin:left;transform:scaleX(0);
    pointer-events:none;
  }

  /* BOOT-UP INTRO: facets fly in and assemble the mark */
  .intro-overlay{
    position:fixed;inset:0;z-index:100;background:var(--black);
    display:flex;align-items:center;justify-content:center;
    transition:opacity .6s ease;
  }
  .intro-overlay.is-hidden{opacity:0;pointer-events:none;}
  html:not(.js) .intro-overlay{display:none;}
  html.no-intro .intro-overlay{display:none;}
  html:not(.js) .spec-item:first-child{opacity:1;transform:none;}
  .intro-rig{position:relative;width:120px;aspect-ratio:1 / 1.0425;}
  .intro-shard{
    position:absolute;inset:0;
    background:#616267;
    -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    opacity:0;will-change:transform,opacity;
    animation:shardIn .75s cubic-bezier(.16,1,.3,1) forwards;
    animation-delay:var(--d,0s);
  }
  .boot{
    width:min(1100px,100% - 48px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:40px;
    font-family:var(--f-mono);font-size:11px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-1);
  }
  .boot-title{margin-bottom:20px;font-weight:500;letter-spacing:.32em;color:var(--white);}
  .boot-list{list-style:none;display:grid;gap:6px;}
  /* each line lights with a quick fade (a stepped .01s animation sometimes
     never landed on its last frame and left the line dim) */
  .boot-list li{opacity:.25;animation:bootLine .15s ease-out forwards;animation-delay:calc(var(--i) * 380ms + 250ms);}
  @keyframes bootLine{to{opacity:1;}}
  .boot-foot{margin-top:20px;}
  .boot-pct{justify-self:end;color:var(--white);font-variant-numeric:tabular-nums;}
  @media(max-width:640px){
    .boot{grid-template-columns:1fr;justify-items:start;gap:28px;}
    .boot .intro-rig{order:-1;justify-self:center;}
    .boot-pct{justify-self:start;}
  }
  @keyframes shardIn{
    from{opacity:0;transform:translate(var(--fx),var(--fy)) rotate(var(--fr)) scale(.7);}
    to{opacity:1;transform:none;}
  }

  /* BRUSHED STEEL: light material variant. --white/--black are used
     throughout as "ink" / "canvas" rather than literal colors, so swapping
     them (plus the greys) re-themes the whole page from one place. */
  html[data-material="steel"]{
    color-scheme:light;
    --black:#ededee;
    --white:#111214;
    --grey-1:#5f6166;
    --grey-2:#46484c;
    --grey-3:#c9cacd;
    --line:rgba(17,18,20,.14);
    --surface:#f7f7f8;
    --surface-2:#dcdddf;
    --dim:#85878b;
    --glint:rgba(255,255,255,.95);
    --sweep-lift:0 .02em .08em rgba(0,0,0,.24);
  }
  /* NIGHTFALL: while the night in "In operation" plays, the light material
     takes the dark one's colours (script: NIGHTFALL) */
  html[data-material="steel"].is-night{
    color-scheme:dark;
    --black:#08080a;--white:#f4f4f5;--grey-1:#7c7e83;--grey-2:#9a9ca1;--grey-3:#3a3b3e;
    --line:rgba(255,255,255,.09);--surface:#0f0f12;--surface-2:#1c1d21;--dim:#6e7075;--glint:rgba(255,255,255,.3);
  }
  html[data-material="steel"].is-night .chat{box-shadow:0 48px 90px -48px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05);}
  html[data-material="steel"] .emboss{
    --hair:rgba(0,0,0,.2);
    text-shadow:
      1px 0 0 var(--hair), -1px 0 0 var(--hair), 0 1px 0 var(--hair), 0 -1px 0 var(--hair),
      -2px -2px 1px rgba(255,255,255,.75),
      -3px -3px 2px rgba(255,255,255,.5),
      2px 2px 2px rgba(0,0,0,.12);
  }
  html[data-material="steel"] .chat{box-shadow:0 48px 90px -48px rgba(40,42,48,.35), inset 0 1px 0 rgba(255,255,255,.7);}
  html[data-material="steel"] .route-node{background:var(--black);}

  /* MAGNETIC CURSOR: dot + trailing ring, snaps larger over clickable elements.
     Only enabled for precision pointers; touch devices keep their native cursor. */
  .cursor-dot,.cursor-ring{
    position:fixed;top:0;left:0;pointer-events:none;z-index:200;
    transform:translate(-50%,-50%);opacity:0;transition:opacity .3s ease;
  }
  .cursor-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);}
  .cursor-ring{
    width:34px;height:34px;border-radius:50%;border:1px solid var(--grey-1);
    transition:width .25s cubic-bezier(.2,.8,.2,1),height .25s cubic-bezier(.2,.8,.2,1),border-color .25s ease,background-color .25s ease,opacity .3s ease;
  }
  /* label state: over a drag zone the ring fills and says what to do */
  .cursor-label{
    position:absolute;inset:0;display:grid;place-items:center;
    font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--black);
    opacity:0;transition:opacity .2s ease;
  }
  html.cursor-labelled .cursor-ring{width:74px;height:74px;background:var(--white);border-color:var(--white);}
  html.cursor-labelled .cursor-label{opacity:1;transition-delay:.08s;}
  html.cursor-labelled.cursor-ready .cursor-dot{opacity:0;}
  html.cursor-labelled.cursor-dragging .cursor-ring{width:58px;height:58px;}
  .cursor-ring::after{
    content:"";position:absolute;top:50%;left:50%;width:7px;height:7px;
    transform:translate(-50%,-50%) rotate(-45deg);
    border-top:1.5px solid var(--white);border-right:1.5px solid var(--white);
    opacity:0;transition:opacity .25s ease;
  }
  html.cursor-ready .cursor-dot,html.cursor-ready .cursor-ring{opacity:1;}
  html.cursor-active .cursor-ring{width:56px;height:56px;border-color:var(--white);}
  html.cursor-active .cursor-ring::after{opacity:1;}
  html.cursor-active .cursor-dot{opacity:0;}
  html.cursor-ready,html.cursor-ready a,html.cursor-ready button,html.cursor-ready [tabindex]{cursor:none;}
  @media(hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none !important;}}

  /* REDUCED MOTION: everything settles into its final state, no loops */
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    html.js .reveal,html.js .route-step{transition:none;opacity:1 !important;transform:none !important;}
    html.js .h-in{opacity:1;transform:none;transition:none;}
    .intro-shard{animation:none;opacity:1;transform:none;}
    .boot-list li{animation:none;opacity:1;}
    .emboss.glint-auto{animation:none !important;}
    .nm-d::after,.nm-out b{transition:none !important;}
    html{transition:none;}
    .pk-grid .pk:hover{transform:none;}
    .sec-bar::after,.sec-bar span:last-child{transition:none;}
    .spec-item{transition:none;}
    .rl{transition:none;}
    .tw > span{transition:none;}
    .bp i,.bp .bp-img{transition:none;}
    .cta-status.is-open .cta-dot::after{display:none;}
    .faq[open] .faq-a{animation:none;}
    .faq summary i,.for-row h3,.dock{transition:none;}
    .dots i{animation:none;opacity:.8;}
    .tick,.np-ind,.ops .lede{transition:none;}
    .odo .reel,.night-fill,.night-dot{transition:none;}
    .st.fail,.st.retry{animation:none;}
    .st.ok::after{display:none;}
    .route-content .route-get{clip-path:none !important;transition:none;}
    .route-content::before{transform:none !important;transition:none;}
    .route-step.is-current .route-node::after,.route-final.is-passed .route-node::after{animation:none;display:none;}
    .cursor-dot,.cursor-ring{display:none !important;}
    .menu,.menu-links a{transition:none;}
    .menu-links a{transform:none;}
  }

  /* DUO: screens and operation. The whole screen split on computers, two
     stacked cards on phones. Both sides follow the material. (script: DUO) */
  .duo-sec{padding-top:clamp(72px,9vw,120px);padding-bottom:clamp(72px,9vw,120px);}
  .duo{display:grid;gap:12px;max-width:1520px;margin:0 auto;}
  .duo-p{
    position:relative;display:flex;flex-direction:column;gap:26px;padding:20px;
    border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--black);color:var(--white);
  }
  .duo-p:focus-visible{outline:2px solid var(--accent);outline-offset:-6px;}
  .duo-head{
    display:flex;justify-content:space-between;gap:16px;padding-top:10px;border-top:1px solid var(--white);
    font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-1);
  }
  .duo-head span:first-child{display:inline-flex;align-items:center;gap:10px;color:var(--white);}
  .duo-head span:first-child::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);}
  .duo-text{display:flex;flex-direction:column;align-items:flex-start;gap:22px;}
  .duo-title{
    font-family:var(--f-display);font-weight:500;font-size:clamp(28px,8vw,48px);letter-spacing:-.035em;line-height:.98;text-transform:uppercase;
  }
  .duo-go{
    display:inline-flex;align-items:center;gap:12px;padding:13px 20px;border:1px solid var(--white);border-radius:999px;
    font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
    transition:background-color .25s ease,color .25s ease;
  }
  .duo-arrow{display:inline-block;transition:transform .35s cubic-bezier(.2,.8,.2,1);}
  .duo-p:hover .duo-go,.duo-p:focus-visible .duo-go{background:var(--white);color:var(--black);}
  .duo-p:hover .duo-arrow,.duo-p:focus-visible .duo-arrow{transform:translateX(5px);}

  .duo-stack{position:relative;display:block;aspect-ratio:16 / 10;margin-top:6%;}
  .duo-shot{
    --x:0%;--y:0%;--r:0deg;--s:1;
    position:absolute;left:0;bottom:0;width:86%;aspect-ratio:16 / 9;
    border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface-2);
    box-shadow:0 26px 44px -30px rgba(0,0,0,.55);
    transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(var(--s));transform-origin:50% 100%;
    transition:transform .85s cubic-bezier(.7,0,.2,1),opacity .6s ease;
  }
  .duo-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;}
  .duo-shot[data-p="0"]{z-index:4;}
  .duo-shot[data-p="1"]{z-index:3;--x:5%;--y:-9%;--r:2deg;--s:.95;}
  .duo-shot[data-p="2"]{z-index:2;--x:10%;--y:-18%;--r:4deg;--s:.9;}
  .duo-shot[data-p="3"],.duo-shot[data-p="4"]{z-index:1;--x:14%;--y:-24%;--r:5deg;--s:.86;opacity:0;}

  .duo-night{display:flex;flex-direction:column;gap:14px;}
  .duo-clock{font-family:var(--f-display);font-weight:500;font-size:clamp(68px,23vw,150px);letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums;}
  .duo-owner{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-1);}
  .duo-owner span{color:var(--white);}
  .duo-bar{position:relative;display:block;height:1px;background:var(--line);}
  .duo-bar i{position:absolute;left:0;right:0;top:-.5px;height:2px;background:var(--accent);transform:scaleX(1);transform-origin:left;}
  .duo-log{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;font-family:var(--f-mono);font-size:12px;line-height:1.4;color:var(--white);}
  .duo-log span{display:block;opacity:.25;transition:opacity .3s ease;}
  .duo-log span.is-on{opacity:1;}
  .duo-log b{display:block;font-weight:400;color:var(--grey-1);font-size:11px;letter-spacing:.1em;}
  .duo-scrub{display:none;}

  /* computers: the whole screen split in two, edge to edge. The track shows
     where the screens are, and the pointer can play along. */
  @media(min-width:901px){
    .duo-sec{padding:0;scroll-margin-top:-72px;}
    .duo{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;max-width:none;min-height:100vh;min-height:100svh;border-bottom:1px solid var(--white);}
    .duo-p{
      gap:clamp(16px,2.4vh,26px);padding:clamp(76px,10vh,104px) clamp(24px,3.4vw,56px) clamp(28px,5vh,52px);
      border:0;border-radius:0;
      transition:opacity .3s ease,--accent .4s ease;
    }
    .duo-b{border-left:1px solid var(--white);}
    .duo-text{margin-top:auto;}
    .duo-title{font-size:clamp(28px,3.5vw,60px);}
    .duo-stack{aspect-ratio:auto;width:min(100%,calc(40vh * 1.8));height:clamp(230px,40vh,520px);margin:clamp(28px,5vh,64px) auto 0;}
    .duo-shot{width:84%;}
    .duo-a.is-scrub .duo-shot{transition-duration:.42s;}
    .duo-scrub{display:flex;flex-direction:column;gap:10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-1);}
    .duo-now{display:flex;justify-content:space-between;gap:16px;}
    .duo-now span:first-child{color:var(--white);}
    .duo-rail{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;}
    .duo-rail i{height:2px;background:var(--line);transition:background-color .2s ease;}
    .duo-rail i.is-on{background:var(--accent);}
    .duo-clock{font-size:clamp(84px,11.6vw,230px);margin-top:clamp(10px,3vh,40px);}
    .duo-log{margin-top:6px;}
    /* pressed: the other half fades while the page opens */
    .duo.is-going .duo-p:not(.is-picked){opacity:0;}
  }
  @media(prefers-reduced-motion:reduce){
    .duo-p,.duo-shot,.duo-arrow{transition:none;}
  }

  /* the line closing the Work section; it draws left to right */
  #work{padding-bottom:0;}
  .sec-rule{position:absolute;left:0;right:0;top:0;height:1px;}
  .sec-rule::after{content:"";position:absolute;inset:0;background:var(--white);transform-origin:left;transition:transform 1.2s cubic-bezier(.7,0,.2,1);}
  html.js .sec-rule.reveal:not(.is-visible){opacity:1;transform:none;}
  html.js .sec-rule.reveal:not(.is-visible)::after{transform:scaleX(0);}

  #studioTitle{max-width:10.6em;} /* keeps "live system." together in every browser */
  /* TICKER: the band under the Work line. (script: TICKER) */
  .ticker{position:relative;overflow:hidden;margin-top:clamp(56px,7vw,96px);padding:clamp(18px,2.6vw,34px) 0;border-bottom:1px solid var(--white);}
  .ticker-track{display:flex;width:max-content;will-change:transform;}
  .ticker-set{display:flex;flex:none;align-items:center;margin:0;max-width:none;}
  .tk{
    flex:none;font-family:var(--f-display);font-weight:500;font-size:clamp(48px,9vw,150px);line-height:1;
    letter-spacing:-.04em;text-transform:uppercase;white-space:nowrap;
  }
  .tk img{display:block;height:.8em;width:auto;}
  .tk-dim{color:var(--dim);}
  .ticker-set > i{flex:none;width:.2em;height:.2em;margin:0 .42em;border-radius:50%;background:var(--accent);font-size:clamp(48px,9vw,150px);}

  /* ABOUT: one film, driven by the scroll. Scenes are plain sections until
     the script arms the page (.ab-armed): then a scene grows tall and its
     stage stays pinned while its part plays. (script: ABOUT) */
  .ab-back{position:fixed;left:clamp(16px,2.6vw,40px);top:calc(var(--nav-h) + 20px);z-index:30;}
  .ab-back{transition:opacity .3s ease;}
  html.menu-open .ab-back{opacity:0;visibility:hidden;}
  .ab-back.is-off{opacity:0;pointer-events:none;}
  .ab-back .pg-back{background:var(--black);}
  .ab-back .pg-back:hover{background:var(--white);}
  .ab-armed .sc{height:calc(var(--len) * 1vh);height:calc(var(--len) * 1svh);padding:0;}
  .ab-armed .sc-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;}
  .sc-count{position:absolute;left:0;right:0;top:calc(var(--nav-h) + 34px);text-align:center;font-size:11px;letter-spacing:.14em;color:var(--grey-1);}
  html:not(.ab-armed) .sc-count{display:none;}

  /* the name */
  .nm{position:relative;padding:0;height:340vh;height:340svh;}
  .nm-stage{
    position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
  }
  .nm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
  .nm-word{
    position:relative;display:grid;grid-template-columns:auto auto;
    font-family:var(--f-display);font-weight:500;font-size:min(13.6vw,27vh);line-height:.94;letter-spacing:-.045em;white-space:nowrap;
  }
  .nm-l,.nm-r{display:block;will-change:transform;}
  .nm-l{justify-self:end;padding-right:.1em;}
  .nm-r{justify-self:start;padding-left:.1em;}
  .nm-drop{position:relative;}
  .nm-drop > span{display:inline-block;will-change:transform,opacity;}
  .nm-strike{position:absolute;left:0;right:0;top:50%;height:.045em;background:var(--accent);transform:scaleX(0);transform-origin:left;}
  .nm-cut{position:absolute;left:var(--cut,50%);top:0;bottom:0;width:1px;background:var(--white);transform-origin:top;}
  html:not(.nm-armed) .nm-cut{display:none;}
  .nm-cap{
    position:absolute;left:0;right:0;top:calc(50% + min(11vw,15vh));padding:0 24px;text-align:center;max-width:none;
    font-family:var(--f-mono);font-size:12px;line-height:1.7;letter-spacing:.12em;text-transform:uppercase;color:var(--white);
  }
  .nm-cap span{display:block;color:var(--grey-1);}
  .nm-hint{
    position:absolute;left:0;right:0;bottom:calc(26px + env(safe-area-inset-bottom));text-align:center;
    font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-1);
  }
  .nm-hint span{display:inline-block;animation:nmHint 1.8s ease-in-out infinite;}
  @keyframes nmHint{50%{transform:translateY(5px);}}
  html:not(.nm-armed) .nm{height:auto;}
  html:not(.nm-armed) .nm-stage{position:relative;height:auto;padding:170px 0 60px;}
  html:not(.nm-armed) .nm-cap{position:static;margin-top:32px;}
  html:not(.nm-armed) .nm-hint{display:none;}
  .nm-armed .nm-cap{opacity:0;transform:translateY(10px);}

  /* the statement: lights up word by word */
  .st-text{
    max-width:21ch;padding:0 24px;margin:0 auto;font-family:var(--f-display);font-weight:500;
    font-size:clamp(34px,min(6.2vw,10.4vh),104px);line-height:1;letter-spacing:-.035em;text-transform:uppercase;color:var(--white);
  }
  .st-text .w{display:inline-block;margin-right:.24em;will-change:opacity;}

  /* the six lines */
  .fx-list{list-style:none;width:100%;padding:0 24px;}
  .fx-list li{
    font-family:var(--f-display);font-weight:500;font-size:clamp(30px,min(5.2vw,10.5vh),86px);line-height:1.08;letter-spacing:-.035em;
    text-transform:uppercase;text-align:center;will-change:transform;
  }

  /* the year rolls up like a counter, then the logo opens as a window of
     light and the page flies through it into the morning */
  .yr-est{min-height:1.5em;margin-top:clamp(8px,1.6vh,16px);font-size:clamp(15px,1.7vw,24px);line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--white);text-align:center;max-width:none;}
  .yr-est b{font-weight:400;color:var(--accent);animation:yrCaret .8s steps(1) infinite;}
  @keyframes yrCaret{50%{opacity:0;}}
  .yr-static{display:block;width:min(40vw,200px);height:auto;margin:32px auto 0;}
  .ab-armed .yr-static{display:none;}
  .yr-parts{display:none;}
  .ab-armed .yr-parts{display:block;position:absolute;left:50%;top:50%;width:min(36vw,60vh);aspect-ratio:1 / 1.0425;margin-left:calc(min(36vw,60vh) / -2);margin-top:calc(min(36vw,60vh) * -.52125);pointer-events:none;}
  .yr-part{
    position:absolute;inset:0;background:#ededee;opacity:0;will-change:transform,opacity;
    -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  }
  html:not([data-material="steel"]) .yr-part{background:#f4f4f5;}
  .yr-num{display:flex;justify-content:center;font-family:var(--f-display);font-weight:500;font-size:min(35vw,62vh);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;}
  html:not(.ab-armed) .yr-num::before{content:"2026";}
  .yr-digit{display:block;height:1em;overflow:hidden;}
  .yr-digit i{display:block;font-style:normal;will-change:transform;}
  .yr-digit b{display:block;height:1em;font-weight:500;}
  .yr-win{
    /* drawn four times too big, then scaled down by the script: the graphics
       card scales that one drawing, so the flight stays sharp and smooth */
    --size:calc(min(36vw,60vh) * 4);
    display:none;position:absolute;left:50%;top:50%;width:var(--size);aspect-ratio:1 / 1.0425;margin-left:calc(var(--size) / -2);margin-top:calc(var(--size) * -.52125);
    background:#ededee;will-change:transform,opacity;
    -webkit-mask:url('logo-mask.png') center / 100% 100% no-repeat;mask:url('logo-mask.png') center / 100% 100% no-repeat;
    pointer-events:none;
  }
  html:not([data-material="steel"]) .yr-win{background:#f4f4f5;}
  .ab-armed .yr-win{display:block;opacity:0;}
  .yr-ask{
    display:block;max-width:18ch;margin:clamp(24px,4vh,44px) auto 0;padding:0 24px;text-align:left;color:var(--white);
    font-family:var(--f-display);font-weight:500;font-size:clamp(38px,min(7vw,13vh),118px);line-height:.96;letter-spacing:-.04em;text-transform:uppercase;
  }
  .yr-ask i{display:inline-block;font-style:normal;margin-left:.15em;color:var(--accent);transition:transform .35s cubic-bezier(.2,.8,.2,1);}
  @media(hover:hover){.yr-ask:hover i{transform:translateY(.12em);}}
  .ab-armed .yr-ask{position:absolute;left:0;right:0;top:50%;margin:0 auto;opacity:0;pointer-events:none;}

  /* the two halves */
  .hv-in{width:100%;}
  .ab-armed .hv-in{padding-top:clamp(40px,7vh,64px);}
  .hv .title{max-width:10.5em;font-size:clamp(30px,min(4.4vw,8vh),68px);} /* keeps each half on its own line in every browser */
  .hv-grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(20px,3.6vh,44px);border-top:1px solid var(--white);}
  .hv-cut{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--white);transform-origin:top;}
  .hv-col{padding:18px clamp(20px,3.4vw,52px) 0 0;}
  .hv-col + .hv-col{padding-right:0;padding-left:clamp(20px,3.4vw,52px);}
  .hv-col h3{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-family:var(--f-display);font-weight:500;font-size:clamp(24px,min(2.8vw,5vh),44px);letter-spacing:-.03em;line-height:1;}
  .hv-col h3 span{font-family:var(--f-mono);font-weight:400;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-1);text-align:right;}
  .hv-col ol{margin-top:clamp(10px,1.6vh,18px);list-style:none;counter-reset:hv;}
  .hv-col li{counter-increment:hv;display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px;padding:clamp(9px,1.5vh,16px) 0;border-top:1px solid var(--line);will-change:transform,opacity;}
  .hv-col li::before{content:counter(hv,decimal-leading-zero);font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--grey-1);line-height:2;}
  .hv-col li p{max-width:none;font-size:clamp(15px,min(1.45vw,2.5vh),21px);line-height:1.28;letter-spacing:-.01em;color:var(--white);}

  /* capabilities and who it's for: two rows running opposite ways */
  .cp-block{width:100%;}
  .cp-block + .cp-block{margin-top:clamp(20px,4vh,48px);}
  .cp-block h2{padding:0 clamp(20px,3vw,44px);font-weight:400;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-1);}
  .cp-row{list-style:none;}
  .cp-row li{font-family:var(--f-display);font-weight:500;line-height:1.02;letter-spacing:-.04em;text-transform:uppercase;font-size:clamp(34px,min(5vw,9vh),80px);}
  .ab-armed .cp-row{display:flex;width:max-content;margin-top:10px;padding:0 clamp(20px,3vw,44px);will-change:transform;}
  .ab-armed .cp-row li{font-size:min(10.5vw,19vh);white-space:nowrap;}
  .ab-armed .cp-row li + li::before{content:"";display:inline-block;width:.18em;height:.18em;margin:0 .34em;vertical-align:.3em;border-radius:50%;background:var(--accent);}

  /* process and approach */
  .pr-in{width:100%;}
  .pr-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:24px;align-items:start;}
  .pr-head h2{font-weight:400;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding-top:8px;}
  .pr-approach{max-width:36ch;font-family:var(--f-display);font-weight:500;font-size:clamp(20px,min(2.3vw,4vh),34px);line-height:1.1;letter-spacing:-.02em;color:var(--white);}
  .pr-steps{list-style:none;margin-top:clamp(24px,5vh,56px);}
  .pr-steps li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:24px;padding:18px 0;border-top:1px solid var(--line);}
  .pr-steps span{font-family:var(--f-display);font-weight:500;font-size:clamp(40px,6vw,96px);line-height:.9;letter-spacing:-.04em;color:var(--dim);font-variant-numeric:tabular-nums;}
  .pr-steps b{display:block;font-family:var(--f-display);font-weight:500;font-size:clamp(40px,6vw,96px);line-height:.9;letter-spacing:-.04em;text-transform:uppercase;}
  .pr-steps p{max-width:48ch;margin-top:12px;color:var(--grey-2);font-size:clamp(16px,1.4vw,20px);line-height:1.4;}
  .pr-bar{display:none;}
  .ab-armed .pr-steps{position:relative;height:clamp(200px,34vh,320px);}
  .ab-armed .pr-steps li{position:absolute;left:0;right:0;top:0;border-top:0;padding:0;will-change:transform,opacity;}
  .ab-armed .pr-bar{display:block;position:relative;height:1px;margin-top:18px;background:var(--line);}
  .ab-armed .pr-bar i{position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;}

  /* say hello, and the studio */
  .hi-links{list-style:none;}
  .hi-links li{border-bottom:1px solid var(--line);}
  .hi-links a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:24px;align-items:baseline;padding:clamp(14px,2.4vh,26px) 0;}
  .hi-links span{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-1);}
  .hi-links b{font-family:var(--f-display);font-weight:500;font-size:clamp(26px,4.6vw,72px);line-height:1;letter-spacing:-.035em;transition:transform .35s cubic-bezier(.2,.8,.2,1);overflow-wrap:anywhere;}
  @media(hover:hover){.hi-links a:hover b{transform:translateX(12px);}}
  .rd-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;margin-top:clamp(44px,7vw,84px);}
  .rd-grid > div{padding:14px 16px 0;border-left:1px solid var(--line);}
  .rd-grid > div:first-child{padding-left:0;border-left:0;}
  .rd-grid dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-1);}
  .rd-grid dd{margin-top:14px;font-family:var(--f-display);font-weight:500;font-size:clamp(20px,2vw,30px);letter-spacing:-.02em;line-height:1.05;}
  .rd-grid .rd-wide dd{font-size:clamp(48px,7.4vw,112px);letter-spacing:-.04em;line-height:.9;font-variant-numeric:tabular-nums;}

  html:not(.js) .rd-wide{display:none;}
  /* phones, upright or sideways */
  @media(max-width:768px){.nm-hint{bottom:calc(84px + env(safe-area-inset-bottom));}}
  @media(max-width:760px),(max-height:520px){
    .ab-back{left:16px;top:auto;bottom:calc(16px + env(safe-area-inset-bottom));}
    .ab-back .pg-back{width:46px;height:46px;min-height:0;padding:0;justify-content:center;font-size:0;gap:0;}
    .ab-back .pg-back i{font-size:15px;}
    /* phones: one half at a time. Development arrives, then the cut sweeps
       across the screen and leaves Instinct in the inverse colours behind it */
    .ab-armed .sc.hv{height:440vh;height:440svh;}
    .ab-armed .hv .sc-stage{display:block;}
    .ab-armed .hv-in{max-width:none;padding:clamp(70px,11vh,96px) 24px 0;}
    .ab-armed .hv-grid{position:static;display:block;margin-top:clamp(14px,2.6vh,24px);}
    .ab-armed .hv-col{padding:12px 0 0;}
    .ab-armed .hv-col + .hv-col{
      position:absolute;inset:0;z-index:2;margin:0;border:0;padding:clamp(70px,11vh,96px) 24px 0;
      background:var(--white);color:var(--black);--line:rgba(128,128,132,.4);clip-path:inset(0 100% 0 0);
    }
    .ab-armed .hv-col + .hv-col h3{font-size:clamp(34px,min(14vw,11vh),64px);letter-spacing:-.04em;}
    .ab-armed .hv-col + .hv-col h3 span,.ab-armed .hv-col + .hv-col li::before{color:inherit;opacity:.6;}
    .ab-armed .hv-col + .hv-col li p{color:inherit;}
    .ab-armed .hv-col li{padding:clamp(8px,1.9vh,20px) 0;}
    .ab-armed .hv-col li p{font-size:clamp(15px,2.4vh,21px);}
    .ab-armed .hv-cut{left:0;top:0;bottom:0;z-index:3;width:5px;margin-left:-5px;background:var(--accent);opacity:0;}
  }
  /* sideways phones: the tall scenes tighten up to clear the nav */
  @media(max-height:520px){
    .sc-count{display:none;}
    .fx-list li{font-size:clamp(22px,10vh,40px);}
    .hv .title{font-size:clamp(20px,7vh,30px);}
    .ab-armed .hv-in{padding-top:58px;}
    .ab-armed .hv-col + .hv-col{padding-top:58px;}
    .ab-armed .hv-col li{padding:4px 0;}
    .ab-armed .hv-col li p{font-size:14px;}
    .pr-in{padding-top:56px;}
    .pr-head{gap:12px;}
    .pr-approach{max-width:none;font-size:15px;}
    .pr-steps{margin-top:12px;}
    .ab-armed .pr-steps{height:150px;}
    .pr-steps span,.pr-steps b{font-size:32px;}
    .pr-steps p{margin-top:6px;font-size:14px;}
    .ab-armed .pr-bar{margin-top:4px;}
  }
  @media(max-width:760px){
    .nm-cap{top:calc(50% + 24vw);}
    .fx-list li{font-size:clamp(28px,8.8vw,46px);margin-bottom:.34em;line-height:1;}
    .hv-grid{grid-template-columns:1fr;border-top:0;}
    .hv-col{padding:18px 0 0;border-top:1px solid var(--white);}
    .hv-col + .hv-col{padding-left:0;margin-top:24px;}
    .hv-col li p{font-size:16px;}
    html:not(.ab-armed) .hv-cut{display:none;}
    .pr-in{padding:0 24px;}
    .pr-head,.hi-links a{grid-template-columns:1fr;gap:10px;}
    .pr-steps li{grid-template-columns:1fr;gap:8px;}
    .ab-armed .pr-steps{height:clamp(250px,40vh,340px);}
    .rd-grid{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px;}
    .rd-grid .rd-wide{grid-column:1 / -1;}
    .rd-grid > div:nth-child(2){padding-left:0;border-left:0;}
  }

  /* BACK: on the screens and operation pages, returns to the split */
  .pg-back{
    display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 20px;border:1px solid var(--white);border-radius:999px;
    font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
    transition:background-color .25s ease,color .25s ease;
  }
  .pg-back i{font-style:normal;transition:transform .35s cubic-bezier(.2,.8,.2,1);}
  .pg-back:hover{background:var(--white);color:var(--black);}
  .pg-back:hover i{transform:translateX(-5px);}
  .pg-back-top{margin:-44px 0 40px;}
  @media(max-width:900px){.pg-back-top{margin-top:-16px;margin-bottom:32px;}}

  /* NEXT: the end of the screens and operation pages */
  .pg-next{padding-top:0;}
  .pg-next-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:44px;}
  .pg-next-link{
    display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px 24px;padding-top:14px;border-top:1px solid var(--white);
  }
  .pg-next-k{grid-column:1 / -1;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-1);}
  .pg-next-link b{font-family:var(--f-display);font-weight:500;font-size:clamp(30px,5vw,72px);letter-spacing:-.035em;line-height:.98;text-transform:uppercase;}
  .pg-next-arrow{font-size:clamp(28px,4vw,56px);line-height:1;transition:transform .35s cubic-bezier(.2,.8,.2,1);}
  .pg-next-link:hover .pg-next-arrow{transform:translateX(8px);}