:root{
  --ink:#0E1210; --ink-2:#1A1F1C; --slate:#5A635E; --muted:#7C857F;
  --paper:#fff; --mist:#F4F5F3; --line:#E6E8E4; --line-2:#D7DAD4;
  --accent:#C3D53F;
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-full:999px;
  --sh-sm:0 1px 3px rgba(14,18,16,.06),0 1px 2px rgba(14,18,16,.04);
  --sh-md:0 8px 28px rgba(14,18,16,.10),0 2px 6px rgba(14,18,16,.05);
  --sh-lg:0 24px 70px rgba(14,18,16,.16),0 6px 18px rgba(14,18,16,.07);
  --sh-nav:0 10px 34px rgba(14,18,16,.16),0 2px 8px rgba(14,18,16,.08);
  --ease:cubic-bezier(.16,1,.3,1);
  --page:clamp(20px,5vw,64px); --maxw:1200px; --navh:72px;
  /* Vertical rhythm answers to the screen's height as well as its width.
     Every clamp on this page used to be driven by vw alone, which is why a
     wide-but-short laptop (1366x768 leaves 681px of viewport) was handed
     desktop-sized padding and display type, and every frame spilled over
     one screen. min(Nvw, Mvh) takes whichever axis is scarcer. */
  --sec-y:clamp(30px,min(6.5vw,6.2vh),96px);
  /* readable sans-serif fallback, shared by every family */
  --fallback:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --display:'Satoshi',var(--fallback);
  --sans:'General Sans',var(--fallback);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,figure,ul{margin:0}
em,i,cite,dfn,address,var{font-style:normal}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font-family:inherit;border:none;background:none;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
img{max-width:100%}
section[id],header[id]{scroll-margin-top:calc(var(--navh) + 8px)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--page)}
.em{font-family:var(--display);font-style:normal;font-weight:400;letter-spacing:-.022em}

/* ---------- shared bits ---------- */
.chip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 15px;border-radius:var(--r-full);
  background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-sm);
  font:500 12.5px/1 var(--sans);color:var(--slate)}
.chip i{font-style:normal;color:var(--muted);font-size:12px}
.pill{display:inline-flex;align-items:center;gap:14px;height:52px;padding:0 8px 0 26px;border-radius:var(--r-full);
  font:500 15px/1 var(--sans);letter-spacing:-.005em;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.pill .bdg{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:13px;transition:transform .3s var(--ease)}
.pill:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.pill:hover .bdg{transform:rotate(45deg)}
.pill-light{background:var(--paper);color:var(--ink);box-shadow:var(--sh-md)}
.pill-light .bdg{background:var(--ink);color:var(--paper)}

.shead{text-align:center;max-width:720px;margin:0 auto clamp(16px,min(3vw,3vh),32px)}
.shead h2{font:500 clamp(23px,min(3.5vw,3.7vh),43px)/1.12 var(--display);letter-spacing:-.032em;
  margin:clamp(7px,1.4vh,14px) 0 clamp(6px,1.2vh,12px)}
.shead p{color:var(--muted);font-size:clamp(13px,min(1.2vw,1.85vh),15px);line-height:1.55;
  max-width:56ch;margin:0 auto}
.sec{padding:var(--sec-y) 0}

.mk{display:inline-block;line-height:0;flex:none}
.mk svg{width:100%;height:100%;display:block}

/* ================= FLOATING NAV — constant across every frame ================= */
.topbar{position:fixed;top:14px;left:0;right:0;z-index:100;display:flex;justify-content:center;
  padding:0 12px;pointer-events:none}
/* frosted glass: translucent enough to pick up the photo behind it, opaque
   enough that ink text stays legible over white sections too */
.navpill{pointer-events:auto;position:relative;display:flex;align-items:center;
  gap:clamp(14px,2.4vw,34px);width:min(1160px,100%);padding:10px 10px 10px 20px;
  border-radius:var(--r-full);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.60));
  backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 10px 34px rgba(14,18,16,.18),0 2px 8px rgba(14,18,16,.10),
             inset 0 1px 0 rgba(255,255,255,.85)}
/* the gloss highlight across the top of the bar */
.navpill::before{content:"";position:absolute;left:0;right:0;top:0;height:52%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));
  border-radius:var(--r-full) var(--r-full) 40% 40%/var(--r-full) var(--r-full) 100% 100%}
.navpill > *{position:relative;z-index:1}
.navpill .brand{display:flex;align-items:center;gap:9px;color:var(--ink);
  font:600 15.5px/1 var(--sans);letter-spacing:.02em;text-transform:uppercase;flex:none}
.navpill .brand .mk{width:24px;height:24px;color:var(--ink)}
.navlinks{display:flex;align-items:center;gap:6px;margin-right:auto}
.navlinks a{display:block;padding:9px 14px;border-radius:var(--r-full);
  font:500 14px/1 var(--sans);color:#2C332E;transition:background .2s var(--ease),color .2s var(--ease)}
.navlinks a:hover{background:rgba(14,18,16,.06);color:var(--ink)}
.navcta{display:flex;align-items:center;gap:8px;flex:none}

.nav-solid{padding:11px 20px;border-radius:var(--r-full);background:var(--ink);color:#fff;
  font:500 13.5px/1 var(--sans);transition:transform .2s var(--ease)}
.nav-solid:hover{transform:translateY(-1px)}
.nav-ghost{padding:11px 16px;border-radius:var(--r-full);background:transparent;color:var(--ink);
  font:500 13.5px/1 var(--sans);transition:background .2s var(--ease)}
.nav-ghost:hover{background:rgba(14,18,16,.07)}
.navlinks .nav-login{display:none}
@media (max-width:600px){
  .nav-ghost{display:none}
  .navlinks .nav-login{display:block}
}
.navtoggle{display:none;width:40px;height:40px;flex:none;border-radius:50%;
  border:1px solid var(--line-2);background:var(--paper);place-items:center;gap:4px;flex-direction:column}
.navtoggle i{display:block;width:15px;height:1.6px;border-radius:2px;background:var(--ink);
  transition:transform .3s var(--ease),opacity .3s var(--ease)}
.navtoggle[aria-expanded="true"] i:first-child{transform:translateY(2.8px) rotate(45deg)}
.navtoggle[aria-expanded="true"] i:last-child{transform:translateY(-2.8px) rotate(-45deg)}
/* the phone menu fades and drops in as it opens (it starts at opacity 0) */
@keyframes navIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:1080px){
  .navtoggle{display:flex}
  .navpill{flex-wrap:wrap;justify-content:space-between;row-gap:0}
  .navlinks{order:9;flex-basis:100%;flex-direction:column;align-items:stretch;gap:2px;margin:0;
    display:none;opacity:0}
  .navlinks.open{display:flex;margin:10px 0 4px;animation:navIn .34s var(--ease) both}
  /* a full pill radius turns the opened (taller) bar into an oval that clips
     its own menu, so the open bar takes a card radius instead */
  .navpill:has(.navlinks.open){border-radius:26px}
  .navpill:has(.navlinks.open)::before{border-radius:26px 26px 0 0}
  .navlinks a{padding:12px 14px}
  .navcta{margin-left:auto}
}

/* ---- render-skipping -------------------------------------------------
   Sections below the fold are not laid out or painted until they are near
   the viewport. contain-intrinsic-size carries their measured height so the
   scrollbar and the nav anchors stay accurate; the `auto` keyword lets the
   browser remember the real size once a section has been rendered. */
#services{content-visibility:auto;contain-intrinsic-size:auto 745px}

/* #pricing{content-visibility:auto;contain-intrinsic-size:auto 730px} */
/* the bar is fixed and blurs live content behind it, so it re-composites on
   every scroll frame. Its own layer lets the compositor cache that work. */
.navpill{will-change:transform}

/* ================= 1 · HERO (frame 1) ================= */
/* The photograph splits on a diagonal, pale sky over dark rock, and the two
   words sit either side of it: RED on the sky, MARTEN on the ridge.

   Three motions, and none of them follow the pointer any more:
   · arrival — the photo settles out of a slight zoom and the letters rise;
   · ambient — two light shafts drift through the haze and a mist bank
     crosses the valley, while the photograph breathes very slowly;
   · scroll — the frame pulls back (--hp, 0→1, written by the recede
     script): it shrinks toward its lower edge and darkens, the photograph
     counter-zooms behind it, and the words drift out to their corners as if
     they sat a little in front of the glass. */
.hero{--word:clamp(80px,min(16.4vw,28vh),310px);position:relative;margin:10px;border-radius:var(--r-xl);overflow:hidden;
  display:flex;flex-direction:column;isolation:isolate;background:#1B232A;
  height:clamp(520px,calc(100vh - 20px),1180px);height:clamp(520px,calc(100svh - 20px),1180px);
  transform-origin:50% 45%;transform:scale(calc(1 - .13 * var(--p,0)));will-change:transform}
.hero-photo{position:absolute;inset:0;z-index:-4;overflow:hidden;transform-origin:50% 60%;
  transform:scale(calc(1 + .08 * var(--p,0)))}
.hero-photo::before{content:"";position:absolute;inset:0;
  background:url('assets/hero-ridge.jpg') 50% 50%/cover no-repeat;
  animation:heroReveal 2.2s cubic-bezier(.16,1,.3,1) both,
            heroBreath 34s ease-in-out 2.2s infinite alternate}
/* arrival: the photograph opens out of a small window in the dark frame */
@keyframes heroReveal{from{clip-path:inset(21% 25% 21% 25% round 44px);transform:scale(1.36)}
                      to{clip-path:inset(0 0 0 0 round 0);transform:scale(1.02)}}
@keyframes heroBreath{from{transform:scale(1.02)}to{transform:scale(1.06) translate3d(-.8%,-.6%,0)}}
/* light shafts, set at the same lean as the ones already in the photograph */
.hero-rays{position:absolute;inset:0;z-index:-3;pointer-events:none;overflow:hidden}
.hero-rays i{position:absolute;top:-20%;height:140%;left:12%;width:15%;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(236,246,255,.2) 50%,rgba(255,255,255,0));
  filter:blur(8px);animation:rayDrift 15s ease-in-out infinite alternate}
.hero-rays i:nth-child(2){left:28%;width:8%;animation-duration:21s;animation-delay:-7s}
@keyframes rayDrift{from{transform:rotate(28deg) translate3d(-34%,0,0);opacity:.3}
                    to{transform:rotate(28deg) translate3d(46%,0,0);opacity:1}}
.hero-mist{position:absolute;left:-22%;top:50%;width:92%;height:26%;z-index:-3;border-radius:50%;
  pointer-events:none;opacity:.24;filter:blur(26px);
  background:radial-gradient(closest-side,rgba(226,236,242,.95),rgba(226,236,242,0));
  animation:mistCross 40s ease-in-out infinite alternate}
@keyframes mistCross{from{transform:translate3d(-6%,0,0)}to{transform:translate3d(54%,-5%,0)}}
.hero-scrim{position:absolute;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(72% 64% at 0% 100%,rgba(5,8,11,.8),rgba(5,8,11,0) 70%),
  linear-gradient(180deg,rgba(5,8,11,0) 56%,rgba(5,8,11,.34) 100%)}
/* ---- frame 1 → frame 2 -----------------------------------------------
   The hero pins and sinks back; the next frame rises over it, growing from
   small to full size as it docks (--p, 0→1, written by the stack script).
   Only transform moves, so the whole hand-over stays on the compositor. */
.stack{position:relative}
/* the stack script fades the hero out over the climb and hides it before the
   next frame docks, so none of it shows around or above that frame */
.stack.is-live > .hero{position:sticky;top:10px;z-index:0}
.stack.is-docked > .hero{visibility:hidden}
.stack.is-live > .slept{z-index:2;transform-origin:50% 0;will-change:transform;
  transform:scale(calc(.78 + .22 * var(--p,0)));box-shadow:0 -30px 90px rgba(4,7,10,.42)}

/* the two words */
.hero-word{position:absolute;z-index:1;display:flex;overflow:hidden;pointer-events:none;
  user-select:none;white-space:nowrap;padding:.07em .03em .03em;
  font:500 var(--word)/.8 var(--display);letter-spacing:-.06em}
.hero-word > span{display:block;transform-origin:0 100%;
  animation:heroRise 1.45s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.8s + var(--i) * .075s)}
/* each letter swings up out of its mask and out of a blur */
@keyframes heroRise{from{transform:translate3d(0,112%,0) rotate(7deg);filter:blur(12px);opacity:0}
                    to{transform:none;filter:blur(0);opacity:1}}
.hero-word--red{left:clamp(14px,2.2vw,40px);top:max(86px,10.5vh);color:#7E2416;
  transform:translate3d(calc(-3% * var(--p,0)),calc(-12% * var(--p,0)),0)}
.hero-word--marten{right:clamp(14px,2.2vw,40px);bottom:clamp(4px,1.4vh,20px);color:#fff;
  text-shadow:0 10px 60px rgba(0,0,0,.3);
  transform:translate3d(calc(2% * var(--p,0)),calc(10% * var(--p,0)),0)}
.hero-dim{position:absolute;inset:0;z-index:3;pointer-events:none;background:#05070A;
  opacity:calc(var(--p,0) * .62)}

.hero-bg-fallback{position:absolute;inset:0;z-index:-5;
  background:linear-gradient(180deg,#EEF1F2 0%,#A9B9C4 26%,#5B6F7D 50%,#28323A 70%,#161B20 100%)}

.hero-body{position:absolute;z-index:2;left:clamp(18px,2.8vw,48px);bottom:calc(clamp(4px,1.4vh,20px) + var(--word) * .053);
  max-width:min(470px,38%);text-align:left}
.hero-body > *{animation:heroFade 1.1s var(--ease) both;animation-delay:1.35s}
@keyframes heroFade{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}

.hero h1{color:#fff;font:500 clamp(24px,min(2.8vw,4.6vh),44px)/1.08 var(--display);letter-spacing:-.035em;
  text-shadow:0 2px 30px rgba(0,0,0,.3)}
.hero h1 .em{display:block;font-size:1.02em;line-height:1.14;margin-top:2px}

.hero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start;margin-top:clamp(20px,3.4vh,32px)}

@media (prefers-reduced-motion:reduce){
  .hero-photo::before,.hero-rays i,.hero-mist,.hero-word > span,.hero-body > *{animation:none}
}
/* on a phone the words run nearly edge to edge, so the copy moves between them */
@media (max-width:760px){
  .hero-word{font-size:clamp(58px,22.5vw,150px)}
  .hero-word--red{top:84px}
  .hero-body{right:20px;left:20px;max-width:none;bottom:auto;top:50%;transform:translateY(-42%)}
  .hero-scrim{background:linear-gradient(180deg,rgba(5,8,11,0) 30%,rgba(5,8,11,.62) 62%,rgba(5,8,11,.4) 100%)}
}

/* ================= TRUST ================= */
.trust{padding:34px 0 8px}
.tlbl{text-align:center;font:500 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.tlogos{display:flex;flex-wrap:wrap;gap:12px 38px;justify-content:center;align-items:center}
.tlogos li{font:500 15px/1 var(--sans);letter-spacing:-.015em;color:#A9B0AA;transition:color .2s var(--ease)}
.tlogos li:hover{color:var(--slate)}

/* ================= 2 · SERVICES (bento) =================
   Mixed-weight grid: one tall panel, then alternating ink, mist and paper
   so the materials carry the rhythm. No motion anywhere in this section. */
.bento{display:grid;grid-template-columns:1.06fr 1fr;
  grid-template-rows:repeat(6,minmax(clamp(34px,min(4.2vw,5vh),58px),auto));
  gap:clamp(8px,1.1vh,14px);margin:8px 0 clamp(18px,min(3.4vw,3.4vh),44px)}
.bc{position:relative;border-radius:20px;overflow:hidden;display:flex;align-items:flex-end;
  min-height:clamp(112px,min(13vw,15.5vh),180px)}
.bc--a{grid-column:1;grid-row:1 / 4}
.bc--b{grid-column:2;grid-row:1 / 3}
.bc--c{grid-column:2;grid-row:3 / 5}
.bc--d{grid-column:1;grid-row:4 / 7}
.bc--e{grid-column:2;grid-row:5 / 7}

/* ---- the slow breath on the photo cards --------------------------------
   Each card drifts toward its own subject and back again on its own clock:
   the nib, the dial, the frond. The durations are deliberately unrelated —
   23s, 31s, 27s, 19s share no useful multiple, so no two cards ever swell
   together. That synchronisation is the thing that makes a grid of Ken
   Burns look like a screensaver. Negative delays scatter the starting
   phase as well, so the grid is already mid-breath on arrival.

   A sine-shaped ease, not the page's --ease: an ease-out would snap out and
   crawl back, which reads as a mechanism rather than as breathing. Only
   scale and translate move, so the whole thing lives on the compositor. */
.bc-art{position:absolute;inset:0;background-size:cover;background-position:50% 50%;
  background-repeat:no-repeat;transform-origin:var(--kb-o,50% 50%);
  animation:bcBreath var(--kb-dur,24s) cubic-bezier(.37,0,.63,1) var(--kb-in,0s)
    infinite alternate;
  animation-play-state:paused;will-change:transform}
.bento.is-live .bc-art{animation-play-state:running}
@keyframes bcBreath{
  from{transform:scale(1.015) translate3d(0,0,0)}
  to  {transform:scale(var(--kb-z,1.11))
       translate3d(var(--kb-x,0%),var(--kb-y,0%),0)}
}
/* the nib, low and right of centre */
.bc--a .bc-art{--kb-dur:23s;--kb-in:-4s; --kb-z:1.12;--kb-x:-1.8%;--kb-y:-1.2%;
  --kb-o:66% 70%;background-position:82% 50%}
/* the lit dial on the middle receiver */
.bc--b .bc-art{--kb-dur:31s;--kb-in:-11s;--kb-z:1.09;--kb-x:1.4%; --kb-y:-1.0%;
  --kb-o:46% 56%;background-position:50% 62%}
/* the frond — a tall photograph in a wide card, so it sits high and holds */
.bc--c .bc-art{--kb-dur:27s;--kb-in:-19s;--kb-z:1.14;--kb-x:-1.1%;--kb-y:1.5%;
  --kb-o:50% 58%;background-position:50% 64%}
.bc--e .bc-art{--kb-dur:19s;--kb-in:-7s; --kb-z:1.10;--kb-x:1.6%; --kb-y:1.1%;
  --kb-o:56% 44%;background-position:50% 46%}

/* Hovering settles the card: the drift holds where it is and the scrim
   lifts a little, so the photograph comes forward under the cursor. No
   sibling is touched — dimming the rest of the grid was worse than nothing. */
/* the radio photograph and the outreach illustration are the two bright
   images, on short cards, so the heading sits right on their lit middles —
   those cards carry a heavier scrim */
.bc--b .bc-veil,.bc--c .bc-veil{background:linear-gradient(180deg,rgba(8,10,9,.40) 0%,
  rgba(8,10,9,.64) 46%,rgba(8,10,9,.94) 100%)}

.bc.is-photo:hover .bc-art{animation-play-state:paused}
.bc.is-photo:hover .bc-veil{opacity:.86}

.bc-veil{position:absolute;inset:0;transition:opacity .55s cubic-bezier(.37,0,.63,1);
  background:linear-gradient(180deg,rgba(8,10,9,.10) 0%,rgba(8,10,9,.52) 52%,rgba(8,10,9,.92) 100%)}
.bc-in{position:relative;padding:clamp(13px,min(2.4vw,2.5vh),30px)}

.bc.is-mist{background:var(--mist);border:1px solid var(--line)}
.bc.is-paper{background:var(--paper);border:1px solid var(--line)}
.bc.is-ink{background:var(--ink)}
.bc.is-photo{background:var(--ink-2)}

.bc-lbl{display:inline-block;margin-bottom:12px;padding:4px 10px;border-radius:6px;
  font:500 9.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.bc h3{font-family:var(--display);font-style:normal;font-weight:500;letter-spacing:-.024em;
  font-size:clamp(17px,min(2.2vw,2.9vh),27px);line-height:1.14;margin-bottom:6px}
.bc p{font-size:clamp(12px,min(1.1vw,1.75vh),13.5px);line-height:1.48;max-width:34ch}
.bc-meta{display:block;margin-top:clamp(7px,min(1.2vw,1.5vh),14px);
  padding-top:clamp(6px,min(1vw,1.3vh),12px);font:500 10.5px/1.3 var(--sans)}

.bc.is-photo .bc-lbl,.bc.is-ink .bc-lbl{background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.24);color:rgba(255,255,255,.92)}
.bc.is-photo h3,.bc.is-ink h3{color:#fff}
.bc.is-photo p,.bc.is-ink p{color:rgba(255,255,255,.76)}
.bc.is-photo .bc-meta,.bc.is-ink .bc-meta{color:rgba(255,255,255,.58);
  border-top:1px solid rgba(255,255,255,.20)}

.bc.is-mist .bc-lbl,.bc.is-paper .bc-lbl,.bc.is-art .bc-lbl{background:rgba(14,18,16,.06);
  border:1px solid var(--line);color:var(--slate)}
.bc.is-mist h3,.bc.is-paper h3,.bc.is-art h3{color:var(--ink)}
.bc.is-mist p,.bc.is-paper p{color:var(--muted)}
.bc.is-art p{color:var(--slate)}
.bc.is-mist .bc-meta,.bc.is-paper .bc-meta,.bc.is-art .bc-meta{color:var(--muted);border-top:1px solid var(--line)}

/* an illustrated card: the art keeps its own cream paper. It runs full width
   in a clear band across the top (sized to the viewport, so the section still
   fits every laptop), and the type sits below it in ink on the same paper,
   never over the drawing. */
.bc.is-art{--art-paper:#FBF8EF;--art-h:clamp(40px,calc(13vh - 30px),120px);background:var(--art-paper)}
.bc.is-art .bc-art{background-size:100% auto;background-position:50% 0;--kb-o:50% 18%}
.bc.is-art .bc-veil{background:linear-gradient(to top,var(--art-paper) 0,var(--art-paper) calc(100% - var(--art-h) - 24px),
  color-mix(in srgb,var(--art-paper),transparent 100%) calc(100% - var(--art-h) + 4px))}
/* this one is a square drawing, so its band is taken from the middle */
.bc--d.is-art .bc-art{background-position:50% 50%}
.bc.is-art .bc-in{padding-top:calc(clamp(13px,min(2.4vw,2.5vh),30px) + var(--art-h))}
.bc.is-art:hover .bc-art{animation-play-state:paused}
.bc.is-art:hover .bc-veil{opacity:.9}

@media (min-width:901px) and (max-height:1150px){
  .bento{grid-template-columns:1.22fr 1fr 1fr;
    grid-template-rows:repeat(2,minmax(0,auto));gap:clamp(8px,1.1vh,14px)}
  .bc--a{grid-column:1;grid-row:1 / 3}
  .bc--b{grid-column:2;grid-row:1}
  .bc--c{grid-column:3;grid-row:1}
  .bc--d{grid-column:2;grid-row:2}
  .bc--e{grid-column:3;grid-row:2}
  .bc{min-height:clamp(96px,min(11vw,19vh),180px)}
  .bc p{max-width:30ch}
}
@media (max-width:900px){
  .bento{grid-template-columns:1fr;grid-template-rows:none;gap:12px}
  .bc,.bc--a,.bc--b,.bc--c,.bc--d,.bc--e{grid-column:auto;grid-row:auto;min-height:200px}
}

/* ================= 4 · RESULTS MOSAIC =================
   Gallery-style mosaic, main palette only. Tile artwork is placeholder
   gradient until the real images land; swap the inline background. */

/* DISABLED PRICING styles — commented out on request, not deleted */
/* ================= 5 · PRICING (auto-rotating plans) =================
   Four slides, one per tier. Each holds for 5s then cross-dissolves to the
   next and loops forever. The art keeps drifting the whole time so the hold
   never looks frozen. Hover, focus or a hidden tab pauses it. */
/* .planwrap{position:relative;border-radius:var(--r-xl);overflow:hidden;background:#0A1014;
  min-height:clamp(400px,min(52vw,64vh),640px);isolation:isolate}
.plan{position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity .9s var(--ease)}
.plan.is-on{opacity:1;pointer-events:auto}
.plan-art{position:absolute;inset:0;background-size:cover;background-position:50% 42%;
  background-repeat:no-repeat;transform:scale(1.06)}
.plan.is-on .plan-art{animation:planDrift 16s ease-in-out infinite alternate}
@keyframes planDrift{from{transform:scale(1.06) translate3d(0,0,0)}
                     to{transform:scale(1.14) translate3d(-1.2%,-1.4%,0)}}
.plan-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,12,16,.62) 0%,rgba(6,12,16,.18) 26%,
    rgba(6,12,16,.34) 56%,rgba(6,12,16,.82) 100%)}
.plan-head{position:absolute;left:clamp(20px,3vw,44px);top:clamp(22px,3vw,42px);z-index:2;color:#fff}
.plan-head h2{font:500 clamp(40px,6.6vw,86px)/.94 var(--display);letter-spacing:-.045em;
  text-shadow:0 2px 40px rgba(0,0,0,.42)}
.plan-head h2 em{display:block;font-style:normal;opacity:.72;font-size:.62em;letter-spacing:-.03em}
.plan-head p{margin-top:14px;max-width:30ch;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.76)} */

/* the glass bar across the bottom */
/* .plan-card{position:absolute;left:clamp(12px,1.6vw,20px);right:clamp(12px,1.6vw,20px);
  bottom:clamp(12px,1.6vw,20px);z-index:2;display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.25fr) minmax(0,1fr);gap:clamp(14px,2vw,26px);
  padding:clamp(16px,2vw,22px);border-radius:calc(var(--r-lg) + 2px);
  background:rgba(12,18,20,.52);backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 60px rgba(0,0,0,.34)} */
/* left: the annual add-on */
/* .addon{display:flex;flex-direction:column;padding:16px 18px;border-radius:var(--r-md);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.addon b{font:500 13.5px/1.3 var(--sans);color:#fff}
.addon p{margin-top:8px;font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.62)}
.addon-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:16px}
.addon-foot .delta{font:500 17px/1 var(--sans);color:#fff;letter-spacing:-.02em}
.tog{position:relative;width:58px;height:31px;border-radius:var(--r-full);flex:none;
  background:rgba(255,255,255,.20);border:1px solid rgba(255,255,255,.16);
  transition:background .35s var(--ease)}
.tog::after{content:"";position:absolute;top:3px;left:3px;width:23px;height:23px;border-radius:50%;
  background:#0A1014;transition:transform .38s var(--ease)}
.tog[aria-pressed="true"]{background:var(--accent);border-color:var(--accent)}
.tog[aria-pressed="true"]::after{transform:translateX(27px)} */
/* middle: price and the footer strip */
/* .plan-mid{display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-width:0}
.plan-amt{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;color:#fff}
.plan-amt b{font:400 clamp(34px,4.4vw,54px)/1 var(--sans);letter-spacing:-.04em}
.plan-amt small{font-size:13px;color:rgba(255,255,255,.62)}
.plan-foot{display:flex;align-items:center;gap:clamp(10px,2vw,22px);flex-wrap:wrap}
.plan-foot .k{font-size:12.5px;color:rgba(255,255,255,.58)}
.plan-foot .v{font:500 13.5px/1 var(--sans);color:#fff;margin-right:auto}
.plan-cta{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 6px 0 20px;
  border-radius:var(--r-full);background:var(--accent);color:#1C2208;
  font:500 13.5px/1 var(--sans);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.plan-cta i{width:32px;height:32px;border-radius:50%;background:#1C2208;color:var(--accent);
  display:grid;place-items:center;font-style:normal;font-size:12px;transition:transform .3s var(--ease)}
.plan-cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.34)}
.plan-cta:hover i{transform:rotate(45deg)} */
/* right: what you get */
/* .plan-feats{display:grid;align-content:center;gap:9px;min-width:0}
.plan-feats li{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;line-height:1.4;
  color:rgba(255,255,255,.86)}
.plan-feats i{flex:none;width:16px;height:16px;margin-top:1px;border-radius:50%;
  background:rgba(255,255,255,.18);color:#fff;display:grid;place-items:center;font-style:normal;font-size:9px} */

/* hold indicator: four bars, the live one filling across its 5 seconds */
/* .plan-nav{position:absolute;right:clamp(20px,3vw,44px);top:clamp(26px,3vw,46px);z-index:3;
  display:flex;gap:8px}
.plan-nav button{width:44px;height:4px;border-radius:var(--r-full);
  background:rgba(255,255,255,.26);overflow:hidden;padding:0}
.plan-nav button i{display:block;height:100%;width:100%;background:#fff;border-radius:inherit;
  transform:scaleX(0);transform-origin:left}
.plan-nav button[aria-current="true"] i{animation:planHold 5s linear forwards}
.planwrap.is-held .plan-nav button[aria-current="true"] i{animation-play-state:paused}
@keyframes planHold{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.pfine{max-width:640px;margin:22px auto 0;text-align:center;font-size:12.5px;line-height:1.6;color:var(--muted)}
@media (prefers-reduced-motion:reduce){
  .plan.is-on .plan-art{animation:none}
  .plan-nav button[aria-current="true"] i{animation:none;transform:scaleX(1)}
}
@media (max-width:1000px){
  .plan-card{grid-template-columns:1fr 1fr}
  .plan-feats{grid-column:1/-1}
}
@media (max-width:680px){
  .planwrap{min-height:720px}
  .plan-card{grid-template-columns:1fr}
  .plan-head h2{font-size:clamp(34px,11vw,48px)}
  .plan-nav button{width:30px}
} */
/* end PRICING styles */

/* ---- last frame: the forest, treated rather than shown -----------------
   The photo is dimmed hard and desaturated, then three fog banks drift
   across it at different speeds with a slow push-in behind them. */
.final{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  border-radius:var(--r-xl);margin:clamp(32px,6vw,88px) 10px 0;background:#080D0A;
  padding:clamp(44px,min(11vw,8.4vh),150px) clamp(24px,5vw,64px);text-align:center}
.final-photo{position:absolute;inset:-8%;z-index:-4;background-image:url('assets/last.jpg');
  background-size:cover;background-position:50% 46%;background-repeat:no-repeat;
  filter:brightness(.34) saturate(.55) contrast(1.08);
  animation:lastPush 46s ease-in-out infinite alternate}
@keyframes lastPush{from{transform:scale(1.04) translate3d(0,0,0)}
                    to{transform:scale(1.16) translate3d(-1.4%,-1.8%,0)}}
.fog{position:absolute;z-index:-3;pointer-events:none;border-radius:50%;
  filter:blur(26px);will-change:transform}
.fog.g1{left:-24%;top:8%;width:74%;height:52%;opacity:.26;
  background:radial-gradient(closest-side,rgba(226,238,232,.95),rgba(226,238,232,0));
  animation:fogA 42s ease-in-out infinite alternate}
.fog.g2{right:-20%;top:26%;width:66%;height:46%;opacity:.20;
  background:radial-gradient(closest-side,rgba(206,224,216,.9),rgba(206,224,216,0));
  animation:fogB 55s ease-in-out infinite alternate}
.fog.g3{left:16%;bottom:-16%;width:80%;height:44%;opacity:.18;
  background:radial-gradient(closest-side,rgba(236,244,239,.9),rgba(236,244,239,0));
  animation:fogA 34s ease-in-out infinite alternate-reverse}
/* translate only: scaling a blurred layer forces it to re-blur each frame */
@keyframes fogA{from{transform:translate3d(-8%,2%,0)}to{transform:translate3d(14%,-6%,0)}}
@keyframes fogB{from{transform:translate3d(10%,4%,0)}to{transform:translate3d(-12%,-4%,0)}}
/* the dim: a deep scrim plus a soft light falling from above the heading */
.final-dim{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(70% 52% at 50% 34%, rgba(226,240,232,.16), rgba(226,240,232,0) 70%),
    linear-gradient(180deg, rgba(6,10,8,.72) 0%, rgba(6,10,8,.44) 38%, rgba(6,10,8,.70) 100%),
    radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,0) 42%, rgba(4,7,5,.72) 100%)}
.final-glow{position:absolute;left:50%;top:-14%;width:min(760px,86%);height:60%;z-index:-1;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(58% 60% at 50% 40%, rgba(195,213,63,.16), rgba(195,213,63,0) 72%);
  animation:glowBreathe 9s ease-in-out infinite alternate}
@keyframes glowBreathe{from{opacity:.55}to{opacity:1}}
.final > *:not([class*="final-"]):not(.fog){position:relative;z-index:1}
.final-inner{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){
  .final-photo,.fog,.final-glow{animation:none}
}
.final h2{font:500 clamp(30px,4.6vw,54px)/1.14 var(--display);letter-spacing:-.032em;margin-bottom:16px}
.final p{color:rgba(255,255,255,.80);max-width:46ch;margin:0 auto 32px;font-size:15.5px;
  text-shadow:0 1px 18px rgba(0,0,0,.5)}
.final h2{text-shadow:0 2px 34px rgba(0,0,0,.45)}
.final-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.foot{padding:44px 0 56px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.foot .fbrand{display:flex;align-items:center;gap:9px;color:var(--ink);
  font:600 15px/1 var(--sans);letter-spacing:.02em;text-transform:uppercase}
.foot .fbrand .mk{width:22px;height:22px;color:var(--ink)}
.foot .sp{margin-left:auto}
.foot a:hover{color:var(--ink)}

/* ================= MARA (assistant overlay) =================
   Main palette: paper / mist / line / ink, with --accent as the one colour.
   The left panel is a calm listening indicator, not a decoded logo. */
.connect{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(10px,2vw,26px);
  background:rgba(14,18,16,.46);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  opacity:0;visibility:hidden;transition:opacity .42s var(--ease),visibility .42s}
.connect.is-open{opacity:1;visibility:visible}
.cpanel{position:relative;width:min(1080px,100%);max-height:calc(100dvh - 32px);overflow:auto;
  display:grid;grid-template-columns:.85fr 1fr;border-radius:var(--r-xl);background:var(--paper);
  border:1px solid var(--line);box-shadow:0 40px 120px rgba(10,16,12,.42);
  transform:translateY(26px) scale(.965);opacity:0;
  transition:transform .5s var(--ease),opacity .42s var(--ease)}
.connect.is-open .cpanel{transform:none;opacity:1}
.ctop{position:absolute;top:16px;left:18px;right:18px;z-index:3;display:flex;align-items:center;gap:10px}
.ctop .mk{width:24px;height:24px;color:var(--ink)}
.cback{margin-left:auto;padding:9px 18px;border-radius:var(--r-full);background:var(--paper);
  border:1px solid var(--line-2);font:500 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease)}
.cback.on{opacity:1;transform:none;pointer-events:auto}
.cback:hover{background:var(--mist);border-color:var(--slate)}
/* the four-dot mark is the close control. Resting it shows the dots; hover
   or focus turns the disc a quarter-turn and resolves them into a cross, so
   the affordance is explicit at the moment you reach for it. */
.cclose{position:relative;width:42px;height:42px;border-radius:50%;background:var(--ink);
  display:grid;place-items:center;flex:none;
  transition:transform .45s var(--ease),box-shadow .3s var(--ease)}
.cclose:hover,.cclose:focus-visible{transform:rotate(45deg);box-shadow:0 8px 22px rgba(14,18,16,.34)}
.cd{position:relative;width:18px;height:18px;
  transition:opacity .3s var(--ease),transform .45s var(--ease)}
.cd i{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;
  transition:transform .45s var(--ease)}
.cd i:nth-child(1){left:0;top:0}
.cd i:nth-child(2){right:0;top:0}
.cd i:nth-child(3){left:0;bottom:0}
.cd i:nth-child(4){right:0;bottom:0}
.cclose:hover .cd,.cclose:focus-visible .cd{opacity:0;transform:scale(.55)}
.cclose:hover .cd i,.cclose:focus-visible .cd i{transform:translate(0,0) scale(.4)}
.cx{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:15px;
  opacity:0;transform:rotate(-45deg) scale(.6);
  transition:opacity .3s var(--ease),transform .45s var(--ease)}
.cclose:hover .cx,.cclose:focus-visible .cx{opacity:1;transform:rotate(-45deg) scale(1)}

/* ---- left: the logo ---- */
.cart{position:relative;overflow:hidden;min-height:440px;display:grid;place-items:center;
  background:linear-gradient(158deg,#FBFCF9 0%,#F1F4EC 48%,#E6EBDD 100%)}
.orb{position:absolute;width:52%;aspect-ratio:1;
  background:radial-gradient(circle at 34% 28%,#FFFFFF 0%,#F4F7EC 34%,#DDE6C4 66%,#C3D53F 128%);
  box-shadow:0 30px 70px rgba(120,140,60,.20),inset 0 -18px 40px rgba(150,170,80,.14);
  animation:orbMorph 14s ease-in-out infinite}
@keyframes orbMorph{
  0%,100%{border-radius:54% 46% 43% 57%/56% 44% 56% 44%;transform:rotate(0deg) scale(1)}
  33%{border-radius:44% 56% 58% 42%/46% 58% 42% 54%;transform:rotate(4deg) scale(1.045)}
  66%{border-radius:60% 40% 50% 50%/38% 56% 44% 62%;transform:rotate(-3deg) scale(.985)}}
.pulse{position:absolute;width:52%;aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(120,140,60,.30);opacity:0;animation:pulseOut 6s ease-out infinite}
.pulse.p2{animation-delay:2s}
.pulse.p3{animation-delay:4s}
@keyframes pulseOut{0%{transform:scale(1);opacity:0}
  16%{opacity:.55}100%{transform:scale(1.9);opacity:0}}
.cmark{position:relative;width:19%;color:var(--ink);animation:markFloat 8s ease-in-out infinite}
.cmark svg{width:100%;height:auto;display:block}
@keyframes markFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media (prefers-reduced-motion:reduce){.orb,.pulse,.cmark{animation:none}}

/* ---- right: the steps ---- */
.cbody{position:relative;padding:clamp(64px,6vw,78px) clamp(26px,4vw,46px) clamp(30px,4vw,44px);
  display:flex;flex-direction:column;justify-content:center}
.cstep{position:absolute;left:clamp(26px,4vw,46px);right:clamp(26px,4vw,46px);
  opacity:0;transform:translateX(26px);pointer-events:none;
  transition:opacity .38s var(--ease),transform .45s var(--ease)}
.cstep.on{position:relative;left:auto;right:auto;opacity:1;transform:none;pointer-events:auto}
.cgreet{font:400 clamp(19px,2.2vw,25px)/1.34 var(--sans);letter-spacing:-.02em;color:var(--muted)}
.cdots{display:flex;gap:7px;margin:20px 0 26px}
.cdots i{width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.cdots i.on{background:var(--accent);width:22px;border-radius:var(--r-full)}
.cstep h2{font:500 clamp(24px,3vw,34px)/1.16 var(--sans);letter-spacing:-.03em;margin-bottom:10px}
.cstep .clead{font-size:13.5px;line-height:1.6;color:var(--muted);margin-bottom:24px;max-width:44ch}
.cbtns{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.cbtn{padding:14px 26px;border-radius:var(--r-full);background:var(--ink);color:#fff;
  font:500 13px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;
  transition:transform .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease)}
.cbtn:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.cbtn.key{background:var(--accent);color:#20260C}
.cbtn.key:hover{background:#B7C939}
.cbtn.ghost{background:var(--paper);color:var(--ink);border:1px solid var(--line-2)}
.cbtn.ghost:hover{border-color:var(--ink);background:var(--mist)}
.cfield{display:block;margin-bottom:14px}
.cfield span{display:block;margin-bottom:6px;font:500 11px/1 var(--sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate)}
.cfield input,.cfield select{width:100%;height:46px;padding:0 14px;border-radius:11px;
  border:1px solid var(--line-2);background:var(--paper);color:var(--ink);
  font:400 14px/1 var(--sans);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.cfield input:focus,.cfield select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(195,213,63,.30)}
.crow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cnote{margin-top:16px;font-size:11.5px;line-height:1.5;color:var(--muted)}
.cok{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  background:var(--mist);color:var(--ink);font-size:22px;margin-bottom:18px}

/* ---- the intro: MARA introduces itself, line by line, then hands over ---- */
.cintro .iname{display:block;font:500 clamp(30px,4vw,46px)/1.06 var(--sans);letter-spacing:-.035em;
  color:var(--ink);margin-bottom:14px}
.cintro .iline{display:block;overflow:hidden}
.cintro .iline b{display:block;font:400 clamp(16px,1.8vw,20px)/1.45 var(--sans);color:var(--muted);
  font-weight:400}
.cstep.on.cintro .iname,
.cstep.on.cintro .iline b{animation:riseIn .78s var(--ease) both}
.cstep.on.cintro .iname{animation-delay:.10s}
.cstep.on.cintro .iline:nth-of-type(1) b{animation-delay:.34s}
.cstep.on.cintro .iline:nth-of-type(2) b{animation-delay:.52s}
.cstep.on.cintro .icta{animation:riseIn .7s var(--ease) both;animation-delay:.86s}
@keyframes riseIn{from{opacity:0;transform:translateY(115%)}to{opacity:1;transform:translateY(0)}}
.iskip{margin-top:30px;display:flex;align-items:center;gap:12px}
.ibar{position:relative;flex:1;height:2px;border-radius:2px;background:var(--line);overflow:hidden}
.ibar i{position:absolute;inset:0;transform-origin:left;background:var(--accent);
  animation:introFill 7s linear both;animation-delay:.6s}
/* hovering to read holds the intro rather than yanking the panel forward */
.cstep.cintro:hover .ibar i{animation-play-state:paused}
@keyframes introFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .cstep.on.cintro .iname,.cstep.on.cintro .iline b,.cstep.on.cintro .icta,.ibar i{animation:none;opacity:1;transform:none}
}

@media (max-width:820px){
  .cpanel{grid-template-columns:1fr}
  .cart{min-height:210px;order:-1}
  .cbody{padding-top:26px}
  .ctop{position:static;padding:16px 18px 0}
}

@media (max-width:620px){.hero{margin:6px;min-height:auto;padding-bottom:30px}}

/* ================= ONE WORKFLOW =================
   An editorial timeline, not a flow chart: a numbered column with a single
   hairline running through it, and the night's tally set large beside it. */
/* the panel now carries the two-column layout; the container is just a box */

/* ================= BUILT FOR ================= */
.built{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,5vw,72px);align-items:start;margin-bottom:clamp(36px,5vw,60px)}
.built h2{font:500 clamp(30px,4.2vw,54px)/1.06 var(--display);letter-spacing:-.04em;max-width:14ch}
.built p{font-size:16px;line-height:1.65;color:var(--slate);max-width:52ch}
.cats{display:flex;flex-wrap:wrap;gap:10px 28px;padding-top:26px;border-top:1px solid var(--line)}
.cats li{font-size:13.5px;color:var(--muted);transition:color .2s var(--ease)}
.cats li:hover{color:var(--ink)}
@media (max-width:820px){.built{grid-template-columns:1fr}}

/* ================= WHAT HAPPENED WHILE YOU SLEPT =================
   The signature section. Full-bleed dark forest, a night's log set as an
   editorial timeline, and a closing line that lands the whole premise. */
.slept{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  padding:clamp(40px,min(11vw,8vh),160px) 0 clamp(34px,min(9vw,6.4vh),128px);margin:0 10px;
  border-radius:var(--r-xl);background:#070B09}
.slept-photo{position:absolute;inset:-5%;z-index:-3;
  background:url('assets/last.jpg') 50% 44%/cover no-repeat;
  filter:brightness(.34) saturate(.52) contrast(1.06);
  animation:sleptDrift 60s ease-in-out infinite alternate;will-change:transform}
@keyframes sleptDrift{from{transform:scale(1.05)}to{transform:scale(1.13) translate3d(-1.4%,-1.6%,0)}}
.slept-veil{position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(72% 54% at 50% 26%,rgba(226,240,232,.10),rgba(226,240,232,0) 70%),
    linear-gradient(180deg,rgba(4,8,6,.70) 0%,rgba(4,8,6,.40) 32%,rgba(4,8,6,.78) 100%)}
.slept-eyebrow{display:block;font:500 11px/1 var(--sans);letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:20px}
.slept h2{font:500 clamp(25px,min(4.6vw,5.4vh),58px)/1.06 var(--display);letter-spacing:-.04em;
  max-width:16ch;text-shadow:0 2px 36px rgba(0,0,0,.5)}

/* live: accent dot breathing, label lit */

@keyframes runBreath{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.62);opacity:.5}}

/* between cycles the log clears from the top down, so the reset reads as a
   sweep rather than six lights going out together. These have to out-specify
   the shorthands above, which reset transition-delay to zero. */

.slept-close{margin-top:clamp(18px,min(5vw,4vh),66px);
  font:500 clamp(20px,min(3.4vw,4vh),44px)/1.16 var(--display);letter-spacing:-.035em;
  color:rgba(255,255,255,.55)}
.slept-close .em{color:#fff}

@media (prefers-reduced-motion:reduce){
  .slept-photo{animation:none}
  
}

/* ================= PHILOSOPHY ================= */
.phil{text-align:center}
.phil h2{font:500 clamp(32px,5.4vw,72px)/1.02 var(--display);letter-spacing:-.045em;
  max-width:14ch;margin:0 auto}
.phil p{max-width:44ch;margin:clamp(26px,3.4vw,40px) auto 0;
  font-size:clamp(16px,1.7vw,19px);line-height:1.62;color:var(--slate)}
.phil-sign{font-family:var(--display);font-style:normal;font-weight:400;letter-spacing:-.022em;color:var(--ink)!important;
  font-size:clamp(19px,2.2vw,26px)!important;margin-top:clamp(20px,2.4vw,30px)!important}

/* ================= THE NIGHT SCENE =================
   The section is a single shot that plays as you scroll it: a dark forest at
   11:43 PM dissolving to dawn light by 06:32 AM, each entry lighting as its
   hour arrives. Scrubbed by the scroll position itself — no scroll listener,
   no JS, and the compositor does the work because only opacity moves.

   Where scroll-driven timelines are unsupported the scene still reads: the
   night frame holds and the entries keep their staggered reveal. */
/* Dawn is the SAME forest an hour later, not a different photograph. Any
   intermediate value therefore reads as light arriving in that place, which
   is both the better story and safe at every point in the blend. */
.slept-dawn{position:absolute;inset:-5%;z-index:-3;opacity:0;
  background:url('assets/last.jpg') 50% 44%/cover no-repeat;
  filter:brightness(.72) saturate(.86) sepia(.14) hue-rotate(-6deg);
  animation:sleptDrift 60s ease-in-out infinite alternate;will-change:transform}
.slept-warm{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(78% 52% at 50% 88%,rgba(255,214,166,.20),rgba(255,214,166,0) 70%)}

@supports (animation-timeline: view()) {
  /* the dissolve, scrubbed across the section's pass through the viewport */
  .slept-dawn{animation:dawnIn linear both;
    animation-timeline:view();animation-range:entry 40% exit 30%}
  .slept-warm{animation:dawnIn linear both;
    animation-timeline:view();animation-range:entry 55% exit 20%}
  @keyframes dawnIn{from{opacity:0}to{opacity:1}}

  /* the rows are no longer scrubbed: the run sequence drives them, so the
     scroll timeline is left to the dawn dissolve and the closing line. */

  /* the closing line is the last thing to arrive */
  .slept:not(.run-ready) .slept-close{opacity:0;transform:translateY(16px);
    animation:closeIn linear both;
    animation-timeline:view();animation-range:entry 88% cover 66%}
  @keyframes closeIn{to{opacity:1;transform:none}}
}

/* once the sequence is driving, the payoff line lands on the first run's last
   check — and stays. run-done comes and goes with every cycle, so the reveal
   hangs off run-seen, which is set once and never cleared. */
.slept.run-ready .slept-close{opacity:.26;transform:translateY(6px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.slept.run-seen .slept-close{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .bc-art{animation:none;transform:none}
  .slept-dawn,.slept-warm{animation:none;opacity:.55}
  
  /* has to match the specificity of the scroll-timeline rule above — a media
     query adds none of its own — and sits later, so the line is simply there */
  .slept:not(.run-ready) .slept-close,
  .slept.run-ready .slept-close{animation:none;opacity:1;transform:none}

}

/* ================= THE SYSTEM · what makes it autonomous, one card at a time =================
   Five tall illustrated cards, one per capability beyond the agents (planning,
   memory, learning, control, resilience). One stands open with its story;
   the others wait as slim strips with their names running up them. The
   hairline along the bottom of the open card is the timer: when it fills,
   the card narrows and the next one widens. Hover or click opens any card,
   and the timer holds while the pointer is over the row. */
.sys{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-xl);background:#080C0A;
  padding:clamp(16px,min(4vw,3.3vh),60px)}
.sys::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 100%,rgba(236,206,160,.07),transparent 72%)}
.sys-ghost{position:absolute;top:-.14em;right:2%;font:500 clamp(90px,17vw,250px)/1 var(--sans);
  letter-spacing:-.05em;color:rgba(255,255,255,.030);pointer-events:none;user-select:none}
.sys-head{position:relative;display:grid;grid-template-columns:1fr minmax(0,42%);gap:clamp(16px,min(4vw,3vh),60px);
  align-items:end;margin-bottom:clamp(16px,2.8vh,38px)}
.sys-chip{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 14px;
  border-radius:var(--r-full);border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);font:500 12px/1 var(--sans);color:rgba(255,255,255,.78)}
.sys-chip i{font-style:normal;font-size:9px;color:var(--accent)}
.sys-head h2{margin-top:14px;font:500 clamp(24px,min(3.6vw,4.4vh),46px)/1.08 var(--display);
  letter-spacing:-.035em;color:#fff}
.sys-head p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.56)}

/* each card is an art print on its own paper: --bg is the illustration's
   paper, --ink the type that reads on it, --ac the illustration's accent */
.fold{--open:7;--gap:clamp(8px,.8vw,12px);container-type:inline-size;display:flex;gap:var(--gap);
  height:clamp(300px,56vh,500px)}
.fold-card{--bg:#F4EFE4;--ink:#1A1A17;--ac:#C3D53F;position:relative;flex:1 1 0;min-width:0;overflow:hidden;
  isolation:isolate;cursor:pointer;outline:none;border-radius:clamp(14px,2vh,20px);background:var(--bg);color:var(--ink);
  box-shadow:0 24px 50px rgba(0,0,0,.42);
  transition:flex-grow .95s cubic-bezier(.72,0,.2,1),box-shadow .6s var(--ease)}
.fold-card.is-open{flex-grow:var(--open);box-shadow:0 34px 70px rgba(0,0,0,.55)}
.fold-card:focus-visible{box-shadow:0 0 0 2px var(--accent),0 24px 50px rgba(0,0,0,.42)}

/* the illustration fills a closed strip, and moves to the right of an open card */
.fold-art{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-2;overflow:hidden;
  transition:left .95s cubic-bezier(.72,0,.2,1)}
.fold-card.is-open .fold-art{left:44%}
.fold-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);
  transition:transform 1.4s var(--ease)}
.fold-card.is-open .fold-art img{transform:none;animation:foldBreath 16s ease-in-out 1.2s infinite alternate}
.fold-card:not(.is-open):hover .fold-art img{transform:scale(1.12)}
@keyframes foldBreath{to{transform:scale(1.035)}}
/* paper rising under a closed strip's title, so the name always reads */
.fold-scrim{position:absolute;left:0;right:0;bottom:0;height:58%;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,var(--bg) 16%,color-mix(in srgb,var(--bg) 72%,transparent) 46%,transparent);
  transition:opacity .6s var(--ease)}
.fold-card.is-open .fold-scrim{opacity:0}

.fold-n{position:absolute;left:clamp(12px,1.4vw,20px);top:clamp(12px,1.9vh,20px);
  font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--ink);opacity:.62;mix-blend-mode:normal}
.fold-card:not(.is-open) .fold-n{padding:5px 7px;margin:-5px -7px;border-radius:7px;
  background:color-mix(in srgb,var(--bg) 78%,transparent);opacity:.85}
.fold-tag{position:absolute;left:50%;bottom:clamp(16px,2.6vh,26px);transform:translateX(-50%) rotate(180deg);
  writing-mode:vertical-rl;white-space:nowrap;font:500 clamp(14px,2vh,17px)/1 var(--display);letter-spacing:-.01em;
  color:var(--ink);transition:opacity .5s var(--ease) .35s}
.fold-card.is-open .fold-tag{opacity:0;transition-delay:0s;transition-duration:.2s}
.fold-live{position:absolute;right:clamp(12px,1.4vw,20px);top:clamp(10px,1.6vh,17px);display:inline-flex;align-items:center;gap:7px;
  height:26px;padding:0 11px;border-radius:var(--r-full);background:color-mix(in srgb,var(--bg) 80%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);
  font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  opacity:0;transform:translateY(-4px);transition:opacity .35s var(--ease),transform .5s var(--ease)}
.fold-live i{width:6px;height:6px;border-radius:50%;background:var(--ac);animation:foldLive 2s ease-in-out infinite}
@keyframes foldLive{50%{opacity:.35}}
.fold-card.is-open .fold-live{opacity:1;transform:none;transition-delay:.55s}

/* the story sits on the paper to the left of the art; its width is fixed to
   the open card's, so nothing reflows while the card widens */
.fold-txt{position:absolute;left:clamp(18px,2vw,30px);top:clamp(46px,7.4vh,72px);bottom:clamp(16px,2.8vh,28px);
  width:calc((100cqw - 4 * var(--gap)) * var(--open) / (4 + var(--open)) * .44 - clamp(18px,2vw,30px) - 20px);
  display:flex;flex-direction:column;pointer-events:none}
.fold-txt > *{opacity:0;transform:translateY(14px);transition:opacity .25s ease,transform .25s ease}
.fold-card.is-open .fold-txt > *{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .9s var(--ease)}
.fold-card.is-open .fold-txt > :nth-child(1){transition-delay:.45s}
.fold-card.is-open .fold-txt > :nth-child(2){transition-delay:.53s}
.fold-card.is-open .fold-txt > :nth-child(3){transition-delay:.63s}
.fold-card.is-open .fold-txt > :nth-child(4){transition-delay:.75s}
.fold-k{display:block;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ink) 58%,transparent)}
.fold-txt h3{margin-top:clamp(8px,1.4vh,14px);font:500 clamp(22px,3.3vh,34px)/1.04 var(--display);letter-spacing:-.035em;color:var(--ink)}
.fold-txt p{margin-top:clamp(7px,1.2vh,12px);font:400 clamp(12.5px,1.65vh,14.5px)/1.5 var(--sans);
  color:color-mix(in srgb,var(--ink) 74%,transparent)}
.fold-figs{margin:auto 0 0;padding:clamp(8px,1.4vh,14px) 0 0;list-style:none}
.fold-figs li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:clamp(5px,1vh,9px) 0;
  border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}
.fold-figs b{font:500 clamp(18px,2.8vh,26px)/1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.fold-figs span{font:500 10px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-align:right;
  color:color-mix(in srgb,var(--ink) 58%,transparent)}

/* the timer: a hairline in the illustration's accent that fills while the card
   is open, and holds while the pointer is over the row or the frame is off screen */
.fold-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:color-mix(in srgb,var(--ink) 10%,transparent);
  opacity:0;transition:opacity .4s}
.fold-bar i{display:block;height:100%;background:var(--ac);transform-origin:0 50%;transform:scaleX(0)}
.fold.is-live .fold-card.is-open .fold-bar{opacity:1}
.fold-card.is-open .fold-bar i{animation:foldBar 6s linear forwards paused}
.fold.is-live:not(.is-held) .fold-card.is-open .fold-bar i{animation-play-state:running}
@keyframes foldBar{to{transform:scaleX(1)}}

/* arrival: the cards rise one after another, the first opening as it lands */
.fold.is-armed .fold-card{opacity:0;transform:translateY(34px)}
.fold.is-armed.is-in .fold-card{opacity:1;transform:none;
  transition:opacity .9s var(--ease) calc(var(--i) * 90ms),transform 1.1s var(--ease) calc(var(--i) * 90ms),flex-grow .95s cubic-bezier(.72,0,.2,1)}
.fold.is-armed:not(.is-in) .fold-txt > *,.fold.is-armed:not(.is-in) .fold-live{opacity:0;transform:translateY(14px)}
.fold-card:nth-child(1){--i:0}.fold-card:nth-child(2){--i:1}.fold-card:nth-child(3){--i:2}
.fold-card:nth-child(4){--i:3}.fold-card:nth-child(5){--i:4}

@media (prefers-reduced-motion:reduce){
  .fold-card.is-open .fold-art img,.fold-live i{animation:none}
  .fold-card,.fold-art,.fold-art img,.fold-txt > *,.fold-card.is-open .fold-txt > *{transition:none}
  .fold-bar{display:none}
}
@media (max-width:900px){
  .sys-head{grid-template-columns:1fr}
  .fold{--open:6}
}
/* on a phone the cards stack: a closed card is a short band with its name
   across, and the open one puts the art above its story */
@media (max-width:700px){
  .fold{flex-direction:column;height:auto;gap:8px}
  .fold-card{flex:none;height:62px;transition:height .9s cubic-bezier(.72,0,.2,1),box-shadow .6s var(--ease)}
  .fold-card.is-open{height:clamp(560px,152vw,620px)}
  .fold-art{transition:bottom .9s cubic-bezier(.72,0,.2,1)}
  .fold-card.is-open .fold-art{left:0;bottom:50%}
  .fold-scrim{top:0;height:auto;right:0;width:auto;background:linear-gradient(to right,var(--bg) 62%,color-mix(in srgb,var(--bg) 40%,transparent) 88%,transparent)}
  .fold-tag{left:52px;bottom:auto;top:50%;transform:translateY(-50%);writing-mode:horizontal-tb}
  .fold-n{top:50%;transform:translateY(-50%)}
  .fold-card:not(.is-open) .fold-n{background:none}
  .fold-card.is-open .fold-n{top:clamp(12px,1.9vh,20px);transform:none;padding:5px 7px;margin:-5px -7px;border-radius:7px;
    background:color-mix(in srgb,var(--bg) 78%,transparent)}
  .fold-txt{top:calc(50% + 18px);left:18px;right:18px;bottom:18px;width:auto}
  .fold.is-armed.is-in .fold-card{transition:opacity .9s var(--ease) calc(var(--i) * 90ms),transform 1.1s var(--ease) calc(var(--i) * 90ms),height .9s cubic-bezier(.72,0,.2,1)}
}

/* ================= INTEGRATIONS · the theatre =================
   One frame that holds still while the page scrolls past it and plays four
   scenes in order. The base styles below are the fallback — the scenes
   stacked as four frames — so the section reads with no JS, on a phone,
   and with reduced motion. .is-staged (added by JS on a laptop) pins the
   frame and stacks the scenes on top of each other; .has-gl hands the
   photographs to WebGL, which burns each scene into the next. */
.lg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.theatre{--frameH:clamp(540px,calc(100svh - var(--navh) - 28px),960px);--scene-len:76vh;margin:10px 10px 0}
.th-runway{position:relative}
.th-frame{position:relative}
.th-gl,.th-rail,.th-grain{display:none}
.th-scenes{display:grid;gap:10px}
.th-scene{position:relative;isolation:isolate;overflow:hidden;color:#fff;border-radius:var(--r-xl);
  background:#06080B;height:var(--frameH)}
.th-bg{position:absolute;inset:0;z-index:-3;background-size:cover;background-position:50% 50%;
  background-repeat:no-repeat}
.th-veil{position:absolute;inset:0;z-index:-2;pointer-events:none}
.th-flow{position:absolute;inset:0;z-index:-1;pointer-events:none}
.th-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* ---- the chips ---- */
.chip-bg{fill:rgba(9,11,15,.68);stroke:rgba(255,255,255,.26);stroke-width:1}
.chip-ring{fill:none;stroke-width:1.8}
.chip-burst{fill:none;stroke-width:1.4}
.chip-mark{fill:#fff}
.chip-tx{font:500 15px var(--sans);fill:#fff;letter-spacing:-.005em}
.flow-line{fill:none;stroke:rgba(255,255,255,.2);stroke-width:1.4;stroke-dasharray:1.5 9;stroke-linecap:round}
.th-scene--hub .chip-bg{fill:rgba(14,8,7,.62)}

/* ---- copy ---- */
.th-in{position:relative;height:100%;display:grid;gap:clamp(10px,1.6vh,22px);
  padding:clamp(20px,min(3vw,3.6vh),48px) clamp(20px,3.2vw,52px)}
.th-eyebrow{display:block;margin-bottom:clamp(9px,1.5vh,18px);
  font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.th-head h2{font:500 clamp(25px,min(3.8vw,5vh),58px)/1.02 var(--display);letter-spacing:-.04em;
  text-shadow:0 2px 30px rgba(0,0,0,.45)}
.th-line{display:block;overflow:hidden;padding:.02em 0 .08em;margin-bottom:-.06em}
.th-line > span{display:block}
.th-head p{margin-top:clamp(9px,1.5vh,16px);max-width:44ch;
  font-size:clamp(12.5px,min(1.1vw,1.85vh),15px);line-height:1.55;color:rgba(255,255,255,.76);
  text-shadow:0 1px 14px rgba(0,0,0,.5)}
.th-in h3{font:500 11px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.58);margin-bottom:clamp(6px,1.1vh,11px)}
.th-in h3 span{font-style:normal;color:rgba(255,255,255,.34);letter-spacing:.06em;
  text-transform:none;font-family:var(--sans);margin-left:6px}

/* ---- 01 · the hub ---- */
.th-scene--hub .th-veil{background:
  linear-gradient(180deg,rgba(4,5,8,.62) 0%,rgba(4,5,8,.12) 30%,rgba(4,5,8,.06) 52%,
    rgba(4,5,8,.66) 78%,rgba(4,5,8,.9) 100%)}
.th-scene--hub .th-in{grid-template-columns:minmax(0,1fr) minmax(0,400px);grid-template-rows:auto 1fr auto;
  grid-template-areas:"head lede" ". ." "cats cats"}
.th-scene--hub .th-head{grid-area:head}

.if-cats{grid-area:cats;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;
  list-style:none;margin:0;padding:0}
.if-cat{display:flex;flex-direction:column;gap:clamp(5px,.9vh,9px);width:100%;height:100%;text-align:left;
  padding:clamp(11px,1.6vh,18px) clamp(12px,1.2vw,16px);border-radius:16px;color:#fff;
  background:rgba(8,8,11,.66);border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 18px 36px rgba(0,0,0,.34);
  transition:transform .45s var(--ease),border-color .45s var(--ease),background .45s var(--ease),
    box-shadow .45s var(--ease)}
.if-cat:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.28)}
.if-cat.is-on{border-color:rgba(255,150,96,.62);background:rgba(44,16,8,.62);
  box-shadow:inset 0 1px 0 rgba(255,190,150,.16),0 0 0 1px rgba(255,120,64,.18),0 18px 40px rgba(120,36,8,.32)}
.if-cat-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.if-cat-top b{font:500 clamp(15px,min(1.3vw,2.2vh),19px)/1 var(--display);letter-spacing:-.02em}
.if-cat-top em{font:400 11px/1 var(--mono);font-style:normal;color:rgba(255,255,255,.5)}
.if-cat-blurb{font-size:clamp(11px,min(.85vw,1.6vh),12.5px);line-height:1.4;color:rgba(255,255,255,.62)}

.if-more{font:400 10.5px/1 var(--mono);font-style:normal;color:rgba(255,255,255,.5)}

/* ---- 02 · CRMs ---- */
.th-scene--crm .th-veil{background:
  linear-gradient(90deg,rgba(10,9,8,.84) 0%,rgba(10,9,8,.62) 28%,rgba(10,9,8,.14) 52%,rgba(10,9,8,0) 66%),
  linear-gradient(180deg,rgba(10,9,8,.34) 0%,rgba(10,9,8,0) 28%,rgba(10,9,8,0) 70%,rgba(10,9,8,.42) 100%)}
.th-scene--crm .th-in{grid-template-columns:minmax(0,540px) 1fr;grid-template-rows:auto 1fr}
.th-scene--crm .th-head{grid-column:1}

/* ---- 03 · tools & workspace ---- */
.th-scene--tools .th-veil{background:
  linear-gradient(180deg,rgba(6,8,10,.56) 0%,rgba(6,8,10,.34) 36%,rgba(6,8,10,.08) 55%,
    rgba(6,8,10,.4) 74%,rgba(6,8,10,.84) 100%)}
.th-scene--tools .th-in{grid-template-columns:minmax(0,1fr) minmax(0,500px);grid-template-rows:auto 1fr auto;
  grid-template-areas:"head google" ". ." "dock dock"}
.th-scene--tools .th-head{grid-area:head}

/* ---- 04 · models, agents & data ---- */
.th-scene--stream .th-veil{background:
  linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 50%,rgba(0,0,0,.66) 70%,
    rgba(0,0,0,.88) 100%)}
.th-scene--stream .th-in{grid-template-rows:auto 1fr auto}

.if-ask{display:flex;align-items:center;gap:12px;font-size:13px;color:rgba(255,255,255,.62)}
.if-askbtn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;
  border-radius:var(--r-full);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  color:#fff;font:500 13px/1 var(--sans);transition:background .3s var(--ease),transform .3s var(--ease)}
.if-askbtn:hover{background:rgba(255,255,255,.18);transform:translateY(-1px)}

/* ================= staged: one pinned frame ================= */
.theatre.is-staged .th-runway{height:calc(var(--frameH) + var(--scene-len) * 4)}
.theatre.is-staged .th-frame{position:sticky;top:calc(var(--navh) + 14px);height:var(--frameH);
  overflow:hidden;isolation:isolate;border-radius:var(--r-xl);background:#05070A;
  box-shadow:0 30px 80px rgba(6,10,14,.22)}
.theatre.is-staged .th-gl{display:block;position:absolute;inset:0;z-index:0;width:100%;height:100%;
  pointer-events:none}
.theatre.is-staged .th-scenes{position:absolute;inset:0;z-index:1;display:block}
.theatre.is-staged .th-scene{position:absolute;inset:0;height:auto;border-radius:0;background:none;
  visibility:hidden}
.theatre.is-staged .th-scene.is-active,.theatre.is-staged .th-scene.is-leaving{visibility:visible}
.theatre.is-staged.has-gl .th-bg{display:none}
/* no WebGL: the photographs cross over in CSS instead, settling out of a zoom */
.theatre.is-staged:not(.has-gl) .th-bg{opacity:0;transform:scale(1.08);
  transition:opacity 1.2s ease,transform 2s cubic-bezier(.16,1,.3,1)}
.theatre.is-staged:not(.has-gl) .th-scene.is-active .th-bg{opacity:1;transform:none}
.theatre.is-staged .th-veil{opacity:0;transition:opacity 1.1s ease}
.theatre.is-staged .th-scene.is-active .th-veil{opacity:1;transition-delay:.25s}
/* the logos arrive once the burn has passed */
.theatre.is-staged .th-flow{opacity:0;transition:opacity .45s ease}
.theatre.is-staged .th-scene.is-active .th-flow{opacity:1;transition:opacity 1s ease .95s}

/* ---- choreography: lines rise out of their masks, the rest follows ----
   Transitions rather than keyframes, so a scene reversed mid-way simply
   turns round instead of snapping. */
.theatre.is-staged .th-line > span{transform:translate3d(0,112%,0);
  transition:transform .7s cubic-bezier(.7,0,.84,0)}
.theatre.is-staged .th-scene.is-active .th-line > span{transform:none;
  transition:transform 1.25s cubic-bezier(.16,1,.3,1) calc(.5s + var(--d) * .1s)}
.theatre.is-staged .th-scene.is-leaving:not(.is-active) .th-line > span{transform:translate3d(0,-112%,0);
  transition:transform .6s cubic-bezier(.7,0,.84,0) calc(var(--d) * .05s)}
.theatre.is-staged :is(.th-eyebrow,.th-head p,.th-lede,.th-in h3,.if-ask){opacity:0;
  transform:translate3d(0,14px,0);transition:opacity .4s ease,transform .5s ease}
.theatre.is-staged .th-scene.is-active :is(.th-eyebrow,.th-head p,.th-lede,.th-in h3,.if-ask){opacity:1;transform:none;
  transition:opacity .9s ease .8s,transform 1.1s cubic-bezier(.16,1,.3,1) .8s}

.theatre.is-staged .if-cats li{opacity:0;transform:translate3d(0,26px,0) scale(.97);
  transition:opacity .3s ease,transform .35s ease}
.theatre.is-staged .th-scene.is-active .if-cats li{opacity:1;transform:none;
  transition:opacity .8s ease calc(.85s + var(--n,0) * .07s),transform 1.1s cubic-bezier(.16,1,.3,1) calc(.85s + var(--n,0) * .07s)}

/* ---- the chapter rail: four bars, each filling as its scene is scrolled ---- */
.theatre.is-staged .th-rail{display:grid;position:absolute;z-index:3;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;left:clamp(20px,3.2vw,52px);right:clamp(20px,3.2vw,52px);top:clamp(14px,2vh,22px)}
.th-rail button{display:grid;gap:9px;padding:0;text-align:left;color:rgba(255,255,255,.46);
  font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;transition:color .5s ease}
.th-rail button:hover{color:rgba(255,255,255,.8)}
.th-rail button.is-active{color:#fff}
.th-rail i{display:block;height:2px;border-radius:2px;background:rgba(255,255,255,.16);overflow:hidden}
.th-rail b{display:block;height:100%;background:#fff;transform-origin:left center;transform:scaleX(var(--f,0))}
.th-rail em{font-style:normal;color:rgba(255,255,255,.36);margin-right:4px}
.theatre.is-staged .th-in{padding-top:calc(clamp(14px,2vh,22px) + 36px)}
.theatre.is-staged .th-grain{display:block;position:absolute;inset:0;z-index:4;pointer-events:none;
  background:url('assets/grain.png');opacity:.045}

@media (max-width:1080px){
  .if-cats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .if-cat-blurb{display:none}
}
@media (max-width:900px){
  .th-scene{height:auto;min-height:640px}
  .th-scene .th-in{grid-template-columns:1fr;grid-template-areas:none;grid-template-rows:none;
    align-content:start;gap:18px}
  .th-scene .th-in > *{grid-area:auto;grid-column:auto}
  
  .if-cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  
  .th-scene .th-veil{background:linear-gradient(180deg,rgba(6,7,9,.72),rgba(6,7,9,.5) 40%,rgba(6,7,9,.82))}
  /* a portrait crop centres every path under the text: the veil lifts above
     the chips, so the flow is dim motion behind a crisp list */
  .th-scene .th-veil{z-index:-1}
  .th-scene .th-flow{z-index:-2}
}

/* ================= FRAME 2 · how Red Marten executes =================
   The run as an instrument laid over the forest: six concentric rings, one
   per agent, each in three arcs for its three steps. Arcs fill as the steps
   run (the live one in lime, with a bright tip), a ring that waits on another
   sits dotted until the hand-off, and the bezel lights round with the run as
   a whole. The markup is the finished run, so it reads before — and without —
   the script that replays it. */
.xrun{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  grid-template-areas:"copy dial" "data dial";grid-template-rows:auto 1fr;
  column-gap:clamp(24px,4.4vw,76px);row-gap:clamp(14px,2.6vh,28px);align-items:start}
.xrun-copy{grid-area:copy;min-width:0}
.xrun-data{grid-area:data;min-width:0;display:flex;flex-direction:column}
.xrun .slept-eyebrow{margin-bottom:clamp(12px,2vh,20px)}
.xrun-lead{margin-top:clamp(10px,1.8vh,18px);max-width:40ch;
  font:400 clamp(13.5px,1.8vh,15.5px)/1.6 var(--sans);color:rgba(255,255,255,.66)}

/* the tally: four figures on frosted glass */
.xrun-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0;
  border-radius:16px;overflow:hidden;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 22px 50px rgba(0,0,0,.28)}
.xrun-metrics > div{padding:clamp(10px,1.7vh,16px) clamp(12px,1.3vw,18px);background:rgba(9,13,11,.62);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.xrun-metrics dt{font:500 9.5px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.xrun-metrics dd{margin:clamp(5px,.9vh,8px) 0 0;font:500 clamp(24px,4.2vh,40px)/1 var(--display);letter-spacing:-.035em;
  color:#fff;font-variant-numeric:tabular-nums;transition:color .45s var(--ease),transform .45s var(--ease)}
.xrun-metrics dd.is-bump{color:var(--accent);transform:translateY(-2px)}

/* the latest three things the run did, newest on top */
.xrun-log{margin:clamp(12px,2.2vh,22px) 0 0;padding:0;list-style:none;display:grid;gap:7px;
  font:400 11.5px/1.45 var(--mono)}
.xrun-log li{display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px;color:rgba(255,255,255,.78);
  white-space:nowrap;transition:opacity .5s var(--ease)}
.xrun-log li span{overflow:hidden;text-overflow:ellipsis}
.xrun-log li b{font-weight:400;color:var(--accent)}
.xrun-log li:nth-child(2){opacity:.58}
.xrun-log li:nth-child(3){opacity:.3}
.xrun-log li.is-new{animation:xlogIn .6s var(--ease)}
@keyframes xlogIn{from{opacity:0;transform:translateY(-8px)}}
.xrun .slept-close{margin-top:clamp(16px,3.4vh,44px)}

/* ---- the dial */
.xd{grid-area:dial;position:relative;width:min(100%,64vh,640px);aspect-ratio:1;justify-self:center;align-self:center;
  container-type:inline-size}
.xd::before{content:"";position:absolute;inset:4%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(236,214,170,.14),rgba(236,214,170,.04) 62%,rgba(236,214,170,0));
  opacity:.55;transition:opacity 1.6s var(--ease),transform 1.6s var(--ease)}
.slept.is-complete .xd::before{opacity:1;transform:scale(1.04)}
.xd-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.xd-tick{stroke:rgba(255,255,255,.16);stroke-width:1.5;stroke-linecap:round;transition:stroke .5s var(--ease)}
.xd-tick.is-major{stroke:rgba(255,255,255,.34);stroke-width:2.2}
.xd-tick.is-lit{stroke:rgba(246,240,226,.9)}
.xd-tick.is-lit.is-major{stroke:var(--accent)}
.xd-ring{transform-box:view-box;transform-origin:300px 300px;transition:opacity .6s var(--ease)}
.xd-track{fill:none;stroke:rgba(255,255,255,.075);stroke-width:12;stroke-linecap:round;transition:stroke .6s var(--ease)}
.xd-fill{fill:none;stroke:rgba(246,240,226,.92);stroke-width:12;stroke-linecap:round;stroke-dasharray:100 100;
  transition:stroke .5s var(--ease)}
.xd-fill.is-live{stroke:var(--accent)}
.xd-fill.is-empty{opacity:0}
/* a ring waiting on another agent is only a dotted guide until its hand-off */
.xd-ring.is-wait .xd-track{stroke:rgba(255,255,255,.26);stroke-width:2;stroke-dasharray:.35 1.9}
.xd-tip{fill:#F4F8DC;opacity:0;transition:opacity .3s var(--ease)}
.xd-ring.is-live .xd-tip{opacity:1}
.xd-lab{font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;fill:rgba(255,255,255,.46);
  transition:fill .4s var(--ease)}
.xd-lab .xd-ok{fill:var(--accent);opacity:0;transition:opacity .4s var(--ease)}
.xd-ring.is-live .xd-lab{fill:#fff}
.xd-ring.is-done .xd-lab{fill:rgba(246,240,226,.82)}
.xd-ring.is-done .xd-ok{opacity:1}
.xd-spark{fill:var(--accent)}

/* the readout in the middle follows whichever step started last */
.xd-core{position:absolute;left:50%;top:50%;width:33%;transform:translate(-50%,-50%);display:grid;justify-items:center;
  gap:clamp(3px,.8cqw,6px);text-align:center;pointer-events:none}
.xd-pct{display:flex;align-items:flex-start;font:500 clamp(30px,11.5cqw,78px)/.9 var(--display);letter-spacing:-.055em;
  color:#fff;font-variant-numeric:tabular-nums}
.xd-pct i{font-style:normal;font-size:.4em;margin:.16em 0 0 .08em;color:rgba(255,255,255,.55)}
.xd-k{margin-top:clamp(4px,1cqw,8px);font:500 clamp(8.5px,1.65cqw,11px)/1.3 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);white-space:nowrap}
.xd-step{font:500 clamp(12px,2.9cqw,19px)/1.22 var(--display);letter-spacing:-.012em;color:rgba(255,255,255,.92)}
.xd-sub{font:400 clamp(9px,1.7cqw,11.5px)/1.3 var(--mono);color:rgba(255,255,255,.5)}
.xd-core .is-swap{animation:xswap .55s var(--ease)}
@keyframes xswap{from{opacity:0;transform:translateY(7px)}}

/* the run completes: one sweep of light round the dial */
.xd-sweep{position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;
  background:conic-gradient(from 0deg,rgba(255,246,222,0) 0deg,rgba(255,246,222,0) 290deg,rgba(255,246,222,.32) 350deg,rgba(255,246,222,0) 360deg);
  -webkit-mask:radial-gradient(closest-side,transparent 36%,#000 38%,#000 97%,transparent 100%);
          mask:radial-gradient(closest-side,transparent 36%,#000 38%,#000 97%,transparent 100%)}
.slept.is-complete .xd-sweep{animation:xsweep 2s var(--ease) 1}
@keyframes xsweep{0%{opacity:1;transform:rotate(0)}85%{opacity:1}100%{opacity:0;transform:rotate(360deg)}}
/* between runs the arcs wind back instead of vanishing */
.xd.is-unwind .xd-fill{transition:stroke-dashoffset .9s cubic-bezier(.6,0,.3,1),stroke .5s}

/* arrival, once: the ticks light round, the rings settle in from the centre */
.xd.is-armed .xd-tick{opacity:0}
.xd.is-armed .xd-ring{opacity:0;transform:scale(.9)}
.xd.is-armed.is-in .xd-tick{opacity:1;transition:opacity .5s var(--ease) calc(var(--i) * 9ms),stroke .5s}
.xd.is-armed.is-in .xd-ring{opacity:1;transform:none;
  transition:opacity .8s var(--ease) calc(var(--r) * 90ms + .2s),transform 1.1s var(--ease) calc(var(--r) * 90ms + .2s)}

@media (prefers-reduced-motion:reduce){
  .slept.is-complete .xd-sweep,.xd-core .is-swap,.xrun-log li.is-new{animation:none}
}
@media (max-width:900px){
  .xrun{grid-template-columns:1fr;grid-template-areas:"copy" "dial" "data";grid-template-rows:none}
  .xd{width:min(100%,460px)}
}

/* ================= INTEGRATIONS · scene design =================
   The scenes' furniture: frosted glass, logo walls that glow in each
   brand's colour as its logo reaches the focus point, a spotlight card for
   whichever CRM is arriving, Google Workspace as a dock that magnifies, a
   router card that shows each task going to a model, and an outlined
   chapter numeral drifting behind it all with the scroll (--t). */
.th-glass{background:linear-gradient(180deg,rgba(22,24,29,.62),rgba(10,12,15,.5));
  border:1px solid rgba(255,255,255,.15);border-radius:18px;
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 26px 60px rgba(0,0,0,.36)}
.theatre.is-staged .th-eyebrow{display:none}
.th-eyebrow i{display:inline-block;width:24px;height:1px;margin-right:10px;vertical-align:middle;
  background:currentColor;opacity:.7}
.th-line--soft > span{font-weight:400;color:rgba(255,255,255,.56)}
.th-num{position:absolute;z-index:0;right:clamp(14px,2.6vw,44px);bottom:clamp(-44px,-3vh,-14px);pointer-events:none;
  font:500 clamp(150px,min(24vw,42vh),400px)/.8 var(--display);letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.13);
  transform:translate3d(0,calc(var(--t,0) * -46px),0)}
.th-in{z-index:1}
.th-panel h3{display:flex;align-items:baseline;gap:4px}

/* ---- logo walls ---- */
.lt-wall{list-style:none;margin:0;padding:0;display:grid;gap:8px;
  grid-template-columns:repeat(var(--cols,5),minmax(0,1fr))}
.lt-wall--crm{--cols:5}
.lt-wall--tools{--cols:7}
.lt-wall--llm,.lt-wall--data{--cols:4}
.lt-wall--agent{--cols:3}
.lt{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-width:0;min-height:clamp(42px,6.2vh,58px);padding:7px 6px;border-radius:12px;isolation:isolate;
  background:rgba(12,14,18,.5);border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:border-color .5s ease,background-color .5s ease,box-shadow .5s ease}
.lt::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(90% 100% at 50% 0%,color-mix(in srgb,var(--ac) 42%,transparent),transparent 72%)}
.lt-m{display:grid;place-items:center;min-height:18px}
.lt-m .lg{width:18px;height:18px;fill:rgba(255,255,255,.86);transition:fill .5s ease}
.lt-m--word{font:600 clamp(11px,.95vw,12.5px)/1.1 var(--display);letter-spacing:-.01em;color:rgba(255,255,255,.86);
  text-align:center}
.lt-n{max-width:100%;font:500 10px/1.15 var(--sans);color:rgba(255,255,255,.52);text-align:center;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lt:hover{border-color:rgba(255,255,255,.26)}
.th-scene .lt-wall .lt.is-on{border-color:color-mix(in srgb,var(--ac) 75%,transparent);background:rgba(20,22,26,.72);
  box-shadow:0 12px 30px color-mix(in srgb,var(--ac) 28%,transparent),inset 0 1px 0 rgba(255,255,255,.14)}
.th-scene .lt-wall .lt.is-on::before{opacity:1}
.th-scene .lt-wall .lt.is-on .lt-m .lg{fill:var(--ac)}
.th-scene .lt-wall .lt.is-on .lt-n{color:#fff}

/* ---- 01 · hub ---- */
.th-scene--hub .th-in{grid-template-columns:minmax(0,1fr) minmax(0,440px);grid-template-rows:auto 1fr auto;
  grid-template-areas:"head stat" ". ." "cats cats"}
.th-stat{grid-area:stat;align-self:start;justify-self:end;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:16px;align-items:end;max-width:440px}
.th-stat b{font:500 clamp(60px,min(7.6vw,12.5vh),124px)/.78 var(--display);letter-spacing:-.065em;
  background:linear-gradient(180deg,#fff 30%,rgba(255,196,160,.62));-webkit-background-clip:text;background-clip:text;
  color:transparent;font-variant-numeric:tabular-nums}
.th-stat span{padding-bottom:4px;font-size:clamp(12px,min(1vw,1.8vh),13.5px);line-height:1.5;color:rgba(255,255,255,.72);
  text-shadow:0 1px 14px rgba(0,0,0,.6)}
.hub-mark path{fill:#1C0A04;opacity:.84}
.hub-halo{transform-box:fill-box;transform-origin:center;animation:hubHalo 3.4s ease-in-out infinite alternate}
@keyframes hubHalo{from{opacity:.35;transform:scale(.9)}to{opacity:.9;transform:scale(1.12)}}
.if-stack{display:flex;align-items:center;margin-top:auto;padding-top:6px}
.if-stack > i:not(.if-more){display:grid;place-items:center;width:26px;height:26px;margin-left:-7px;border-radius:50%;
  background:#15171B;border:1.5px solid color-mix(in srgb,var(--ac) 60%,#15171B);box-shadow:0 0 0 2px rgba(8,8,11,.92)}
.if-stack > i:first-child{margin-left:0}
.if-stack .lg{width:13px;height:13px;fill:#fff}
.if-stack .if-more{margin-left:9px}
.if-cat{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,10,13,.62)}

/* ---- 02 · CRMs ---- */
.th-scene--crm .th-in{grid-template-columns:minmax(0,560px) minmax(0,1fr) minmax(0,360px);grid-template-rows:auto 1fr auto;
  grid-template-areas:"head . feature" ". . feature" "panel . ."}
.th-scene--crm .th-head{grid-area:head}
.th-scene--crm .th-panel{grid-area:panel}

.tf-mark{display:grid;place-items:center}
.tf-mark .lg{width:clamp(30px,2.8vw,40px);height:clamp(30px,2.8vw,40px);fill:var(--ac)}
.tf-mark--word{font:600 clamp(22px,2.3vw,32px)/1 var(--display);letter-spacing:-.035em;color:#fff}

.tf-name{font:500 clamp(21px,2vw,29px)/1 var(--display);letter-spacing:-.03em;color:#fff}

@keyframes tfIn{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}

/* ---- 03 · tools & workspace ---- */
.th-scene--tools .th-in{grid-template-columns:minmax(0,1fr) minmax(0,580px);grid-template-rows:auto 1fr auto;
  grid-template-areas:"head dock" ". ." "panel panel"}
.th-scene--tools .th-head{grid-area:head}
.th-scene--tools .th-panel{grid-area:panel}
.th-dock{grid-area:dock;align-self:start;justify-self:end;width:100%;padding:clamp(12px,1.8vh,16px) clamp(14px,1.4vw,18px) 12px}
.dk-row{list-style:none;margin:clamp(18px,2.8vh,24px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(10,minmax(0,1fr));gap:clamp(4px,.6vw,9px);align-items:end}
.dk{display:grid;justify-items:center;gap:6px;min-width:0}
.dk-i{display:grid;place-items:center;width:100%;max-width:46px;aspect-ratio:1;border-radius:24%;
  background:linear-gradient(180deg,#FFFFFF,#E9ECEF);
  box-shadow:0 8px 18px rgba(0,0,0,.34),inset 0 -1px 0 rgba(0,0,0,.1),inset 0 1px 0 #fff;
  transform-origin:50% 100%;transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .5s ease}
.dk-i .lg{width:56%;height:56%}
.dk-n{max-width:100%;font:500 9.5px/1 var(--sans);color:rgba(255,255,255,.6);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;transition:color .4s ease}
/* the dock magnifies the app whose logo is passing, and eases its neighbours up */
.dk.is-on .dk-i{transform:translate3d(0,-6px,0) scale(1.22);
  box-shadow:0 16px 30px rgba(0,0,0,.42),0 0 0 2px color-mix(in srgb,var(--ac) 55%,transparent)}
.dk.is-on .dk-n{color:#fff}
.dk:has(+ .dk.is-on) .dk-i,.dk.is-on + .dk .dk-i{transform:translate3d(0,-4px,0) scale(1.1)}
.dk:hover .dk-i{transform:translate3d(0,-6px,0) scale(1.16)}

/* ---- 04 · models, agents & data ---- */
.th-scene--stream .th-in{grid-template-columns:minmax(0,1fr) minmax(0,380px);grid-template-rows:auto 1fr auto auto;
  grid-template-areas:"head router" ". ." "cols cols" "ask ask"}
.th-scene--stream .th-head{grid-area:head}
.th-scene--stream .if-ask{grid-area:ask}
.th-cols{grid-area:cols;display:grid;grid-template-columns:1.25fr .95fr 1.25fr;gap:clamp(12px,2vw,28px)}
.th-router{grid-area:router;align-self:start;display:grid;gap:8px;padding:clamp(14px,2vh,20px) clamp(16px,1.6vw,22px)}
.tr-row{display:grid;gap:7px}
.tr-row:last-child{grid-template-columns:1fr auto;align-items:end}
.tr-row:last-child .tr-k{grid-column:1 / -1}
.tr-k{font:500 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.tr-task{font:500 clamp(16px,1.45vw,21px)/1.15 var(--display);letter-spacing:-.02em;color:#fff}
.tr-wire{position:relative;height:clamp(20px,3.4vh,30px);margin-left:6px;border-left:1px dashed rgba(255,255,255,.3)}
.tr-wire i{position:absolute;left:-4px;top:0;width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 12px var(--accent);animation:trDot 1.3s cubic-bezier(.45,0,.55,1) infinite}
@keyframes trDot{0%{transform:translate3d(0,-2px,0);opacity:0}25%{opacity:1}100%{transform:translate3d(0,var(--wire,26px),0);opacity:0}}
.tr-to{display:flex;align-items:center;gap:11px;min-width:0}
.tr-to .tf-mark .lg{width:26px;height:26px}
.th-router .tf-mark--word{display:none}
.tr-to b{font:500 clamp(18px,1.6vw,24px)/1 var(--display);letter-spacing:-.03em;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-cat{padding:5px 9px;border-radius:var(--r-full);border:1px solid color-mix(in srgb,var(--ac) 50%,rgba(255,255,255,.2));
  font:500 9.5px/1 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--ac)}
.th-router{--ac:#E9E4DA}
.th-router.is-swap :is(.tr-task,.tr-to){animation:tfIn .55s cubic-bezier(.16,1,.3,1) both}
.th-router.is-swap .tr-to{animation-delay:.18s}

/* ---- staged choreography for the new furniture ---- */
.theatre.is-staged :is(.th-stat,.th-feature,.th-router,.th-dock){opacity:0;transform:translate3d(26px,0,0);
  transition:opacity .4s ease,transform .5s ease}
.theatre.is-staged .th-scene.is-active :is(.th-stat,.th-feature,.th-router,.th-dock){opacity:1;transform:none;
  transition:opacity .9s ease .7s,transform 1.25s cubic-bezier(.16,1,.3,1) .7s}
.theatre.is-staged .lt,.theatre.is-staged .dk{opacity:0;transform:translate3d(0,16px,0) scale(.96);
  transition:opacity .3s ease,transform .35s ease,border-color .5s ease,background-color .5s ease,box-shadow .5s ease}
.theatre.is-staged .th-scene.is-active :is(.lt,.dk){opacity:1;transform:none;
  transition:opacity .7s ease calc(.9s + var(--n,0) * .04s),transform 1s cubic-bezier(.16,1,.3,1) calc(.9s + var(--n,0) * .04s),
    border-color .5s ease,background-color .5s ease,box-shadow .5s ease}
.theatre.is-staged .th-num{opacity:0;transition:opacity .6s ease,transform 1.4s cubic-bezier(.16,1,.3,1)}
.theatre.is-staged .th-scene.is-active .th-num{opacity:1;transition:opacity 1.6s ease .4s,transform 1.4s cubic-bezier(.16,1,.3,1)}

@media (max-width:1180px){
  .th-scene--crm .th-in{grid-template-columns:minmax(0,1fr) minmax(0,340px);
    grid-template-areas:"head feature" ". feature" "panel panel"}
  .lt-wall--tools{--cols:7}
}
@media (max-width:900px){
  /* has to come after the per-scene grids above: same specificity, so the
     later rule wins — the phone reset must be the later one */
  .th-scene .th-in{grid-template-columns:1fr;grid-template-areas:none;grid-template-rows:none;align-content:start}
  .th-scene .th-in > *{grid-area:auto;grid-column:auto;grid-row:auto}
  .th-num{font-size:clamp(110px,34vw,180px);bottom:-14px}
  .th-stat{justify-self:start}
  .lt-wall--crm,.lt-wall--tools,.lt-wall--llm,.lt-wall--data{--cols:4}
  .th-cols{grid-template-columns:1fr}
  .dk-row{grid-template-columns:repeat(5,minmax(0,1fr));row-gap:12px}
  .th-dock,.th-router{justify-self:stretch}
}
@media (prefers-reduced-motion:reduce){
  .hub-halo,.tr-wire i{animation:none}
}

/* ================= INTEGRATIONS · 02 CRMs, the live pipeline =================
   No path in this scene. A pipeline board moves deals stage to stage as the
   agents work them, writing each move back to the CRM (↑) — and when a rep
   closes a deal in the CRM, the board reads it back (↓). The CRM it talks to
   rotates through all ten, lighting each one in the wall below. */
.th-scene--crm .th-in{grid-template-columns:minmax(0,440px) minmax(0,1fr);grid-template-rows:auto 1fr auto;
  grid-template-areas:"head board" ". board" "panel board";column-gap:clamp(20px,3vw,48px)}
.th-scene--crm .th-head{grid-area:head}
.th-scene--crm .th-panel{grid-area:panel}
.crm-board{grid-area:board;align-self:center;min-height:0;display:grid;grid-template-rows:auto auto auto;
  gap:clamp(8px,1.4vh,12px);padding:clamp(12px,1.8vh,18px)}
.cb-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:24px}
.cb-title{display:inline-flex;align-items:center;gap:8px;font:500 10px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.72)}
.cb-title i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(195,213,63,.8);
  animation:runBreath 1.4s ease-in-out infinite}
.cb-sync{display:inline-flex;align-items:center;gap:9px;min-width:0}
.cb-sync em{font:500 9.5px/1 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.cb-mark{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14)}
.cb-mark .lg{width:13px;height:13px;fill:var(--ac,#fff)}
.cb-mark.is-word{display:none}
.cb-crm{font:500 13px/1 var(--sans);color:#fff;white-space:nowrap}
.cb-sync.is-swap :is(.cb-mark,.cb-crm){animation:tfIn .5s cubic-bezier(.16,1,.3,1) both}

.cb-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(6px,.8vw,10px);
  height:clamp(214px,34vh,276px)}
.cb-col{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0;padding:clamp(8px,1.2vh,10px);
  border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}
.cb-col header{display:flex;align-items:baseline;justify-content:space-between;gap:6px;padding:0 2px 2px;
  font:500 9.5px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.cb-col header span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-n{font:500 11px/1 var(--mono);color:#fff}
.cb-col[data-stage="3"]{background:rgba(195,213,63,.05);border-color:rgba(195,213,63,.16)}
.cb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.cb-card{position:relative;display:grid;gap:4px;padding:clamp(7px,1.1vh,9px) 10px;border-radius:10px;
  background:rgba(16,18,22,.82);border:1px solid rgba(255,255,255,.1);box-shadow:0 6px 16px rgba(0,0,0,.26);
  transition:border-color .45s ease,box-shadow .45s ease}
.cb-co{font:500 clamp(11.5px,min(.95vw,1.7vh),12.5px)/1.15 var(--sans);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-meta{font:400 9.5px/1.2 var(--mono);color:rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-foot{display:flex;align-items:center;justify-content:space-between;gap:6px}
.cb-ag{font:500 8.5px/1 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:rgba(195,213,63,.85)}
.cb-ok{position:relative;width:13px;height:13px;border-radius:50%;background:var(--accent);opacity:0;transform:scale(0);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .3s ease}
.cb-ok::after{content:"";position:absolute;left:4.5px;top:2.4px;width:3px;height:6px;border:solid #0B0D10;
  border-width:0 1.4px 1.4px 0;transform:rotate(45deg)}
.cb-card.is-moving{z-index:2;border-color:rgba(195,213,63,.75);
  box-shadow:0 22px 44px rgba(0,0,0,.5),0 0 0 1px rgba(195,213,63,.4)}
.cb-card.is-synced .cb-ok{opacity:1;transform:none}
.cb-card.is-read.is-synced .cb-ok{background:#9EC2FF}
.cb-card.is-read.is-moving{border-color:rgba(158,194,255,.75);box-shadow:0 22px 44px rgba(0,0,0,.5),0 0 0 1px rgba(158,194,255,.4)}

.cb-toast{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;
  padding:clamp(7px,1.1vh,9px) 12px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.cb-arrow{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:rgba(195,213,63,.14);color:var(--accent);font:600 12px/1 var(--mono)}
.cb-toast.is-read .cb-arrow{background:rgba(158,194,255,.16);color:#9EC2FF}
.cb-msg{font-size:clamp(11.5px,min(.95vw,1.7vh),12.5px);line-height:1.35;color:rgba(255,255,255,.78);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-msg b{font-weight:500;color:#fff}
.cb-ms{font:400 10px/1 var(--mono);color:rgba(255,255,255,.45)}
.cb-toast.is-swap :is(.cb-arrow,.cb-msg,.cb-ms){animation:tfIn .5s cubic-bezier(.16,1,.3,1) both}

.theatre.is-staged .crm-board{opacity:0;transform:translate3d(30px,0,0);transition:opacity .4s ease,transform .5s ease}
.theatre.is-staged .th-scene.is-active .crm-board{opacity:1;transform:none;
  transition:opacity .9s ease .65s,transform 1.25s cubic-bezier(.16,1,.3,1) .65s}

@media (max-width:1180px){
  .th-scene--crm .th-in{grid-template-columns:minmax(0,380px) minmax(0,1fr)}
}
@media (max-width:900px){
  .th-scene--crm .th-in{grid-template-columns:1fr;grid-template-areas:none;grid-template-rows:none}
  .th-scene--crm .th-in > *{grid-area:auto}
  /* two rows of columns: each column sized for three cards, the most it
     ever holds, so the board still never changes height as deals move */
  .cb-cols{grid-template-columns:repeat(2,minmax(0,1fr));height:auto}
  .cb-col{min-height:256px}
  .cb-sync em{display:none}
}
@media (prefers-reduced-motion:reduce){.cb-title i{animation:none}}

/* 1280x720 leaves 633px of viewport — the shortest laptop still in common
   use. The two densest frames land about 1% over there, so they get one
   last trim rather than compressing every other screen to suit them. */
@media (min-width:901px) and (max-height:670px){
  :root{--sec-y:clamp(22px,5vh,96px)}
  .sys{padding:clamp(13px,2.7vh,60px)}
  .shead{margin-bottom:clamp(11px,2.2vh,32px)}
}