/* Humanate Creative, the Capital pass (2026-10-05). Loaded after styles.css by index.html only.
   1. Type from the Humanate Capital journey: StackSans Notch Extralight titles, Helvetica Neue for everything else, caps in HN Medium at .2em.
   2. The hero: the Capital ticker slides along the foot of the film (the old strip is hidden), hairline chips, no line under the bar.
   3. The collective (#creatives): four full-height scenes stepped one per scroll (capital.js).
   4. The intro (intro.js): CREATIVE then TRANSFORMATION in the lockup's squared lettering (Rajdhani).
   5. The chat's brief card.
   The accent gradient, kept light (periwinkle #8FA2FF, lilac #B493FF, orchid pink #E7A2FF, pink-white) carries every accent; rims are .5px hairlines throughout. */

@font-face{font-family:"Stack";src:url(fonts/StackSansNotch-Extralight.woff2) format("woff2");font-weight:100 250;font-display:swap}
@font-face{font-family:"Stack";src:url(fonts/StackSansNotch-Light.woff2) format("woff2");font-weight:251 400;font-display:swap}
@font-face{font-family:"Logo";src:url(fonts/rajdhani-300.woff2) format("woff2");font-weight:300;font-display:block}
@font-face{font-family:"Logo";src:url(fonts/rajdhani-500.woff2) format("woff2");font-weight:500;font-display:block}

:root{
  --font:"Helvetica Neue HC","Helvetica Neue",Helvetica,Arial,sans-serif;
  --title:"Stack","Helvetica Neue HC","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:var(--title);
  --cr:#A893FF; --cr-hi:#F0CCFF; --cr-rgb:168,147,255;
  --cr-grad:linear-gradient(90deg,#8FA2FF 0%,#B493FF 34%,#E7A2FF 68%,#FFF1FF 100%);   /* the user's light-ribbon reference, lifted to its lighter side on request */
  --cv-ink:#F4F2F7; --cv-mute:rgba(244,242,247,.62); --cv-faint:rgba(244,242,247,.38); --cv-line:rgba(244,242,247,.14);
  --cv-glass:rgba(244,242,247,.04); --cv-ease:cubic-bezier(.22,1,.36,1);
  --hair:inset 0 0 0 .5px rgba(244,242,247,.22);
}
/* ---------- 1. type, page wide (his word 2026-10-14: the chat, the launcher and "Something on your mind?" are in the site's faces too) ---------- */
.dispB,.secT h2,.edition h2,.intro-statement,.craft-word,.world-word,.proof b{font-family:var(--title);font-weight:200;letter-spacing:-.02em}
.edition h2 em,.intro-statement em,.dispB em{font-family:var(--title);font-style:normal;font-weight:200;letter-spacing:-.02em}
.gchips .ui-btn,.gplace,.conversation-prompt,.addr,.rd-count{font-family:var(--font)}
.gplace,.conversation-prompt{font-weight:300}
.eyebrow{font-family:var(--font);font-weight:500;letter-spacing:.2em}
.cr-line,.intro-aside p,.stage-lede,.conversation-heading p{font-weight:300}
.dispB em{background-image:var(--catch-band),var(--cr-grad);background-size:260% 100%,100% 100%;-webkit-text-stroke:0}
.edition h2 em{background-image:var(--cr-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ---------- 2. the hero ---------- */
.gchips .ui-btn::before{padding:.75px;opacity:.75}
.hero #gfoot:empty{display:none}
.hero-wrap .strip{display:none}
.hero .ticker{position:absolute;left:0;right:0;bottom:0;z-index:5;height:72px;display:flex;align-items:center;overflow:hidden;
  border-top:.5px solid rgba(244,242,247,.14);background:rgba(6,6,8,.5);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tk-track{display:flex;width:max-content;animation:tk 80s linear infinite}
.ticker:hover .tk-track{animation-play-state:paused}
@keyframes tk{to{transform:translateX(-50%)}}
.tk-set{display:flex;align-items:center;flex:none}
.tk{display:inline-flex;align-items:baseline;gap:12px;padding:0 28px;white-space:nowrap}
.tk-dot{align-self:center;width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#8FA2FF,#E7A2FF);box-shadow:0 0 0 4px rgba(var(--cr-rgb),.14);flex:none}
.tk b{font-family:var(--title);font-weight:200;font-size:clamp(22px,2.1vw,32px);letter-spacing:-.02em;line-height:1;padding-bottom:.08em;
  background:var(--cr-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.tk span{font-size:14px;color:var(--cv-mute)}
.tk-say b{background:none;-webkit-text-fill-color:currentColor;color:var(--cv-ink);font-size:clamp(18px,1.6vw,24px)}
@media (max-width:700px){ .hero .ticker{height:56px} .tk{padding:0 18px;gap:9px} .tk b{font-size:21px} .tk-say b{font-size:17px} .tk span{font-size:12.5px} }
@media (prefers-reduced-motion:reduce){ .tk-track{animation:none} }

/* ---------- 3. the collective ---------- */
.cv{position:relative;color:var(--cv-ink)}
.cv-scene{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(96px,13svh,130px) 0 clamp(80px,11svh,110px)}
.cv-scene+.cv-scene{border-top:.5px solid var(--cv-line)}
.cv-scene[data-scene="0"]::before{content:"";position:absolute;left:50%;top:0;width:min(1100px,120vw);aspect-ratio:1;transform:translate(-50%,-30%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--cr-rgb),.09),rgba(var(--cr-rgb),.025) 55%,transparent 75%)}
.cv-wrap{position:relative;width:100%;max-width:1280px;margin-inline:auto;padding-inline:40px}
.cv-caps{font-family:var(--font);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;line-height:1.2;color:var(--cv-faint)}
.cv-title{font-family:var(--title);font-weight:200;font-size:clamp(38px,min(5.2vw,8svh),84px);line-height:1.02;letter-spacing:-.025em;text-wrap:balance}
.cv-sub{font-family:var(--title);font-weight:200;font-size:clamp(30px,min(3.6vw,6.2svh),56px);line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
.cv-title em,.cv-sub em,.fit-card h3 em{font-style:normal;background-image:var(--cr-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.cv-title em{display:block;width:fit-content}
html.cv-js .cv-in{opacity:0}

/* scene 1 */
.cv-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:clamp(32px,6vw,100px);align-items:end}
.cv-head .cv-caps{grid-column:1/-1;margin-bottom:22px}
.cv-lede p{font-size:clamp(16px,1.25vw,19px);line-height:1.5;font-weight:300;max-width:40ch}
.cv-lede p+p{margin-top:14px}
.cv-mute{color:var(--cv-mute)}
.cv-stats{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(36px,6svh,72px);border-top:.5px solid var(--cv-line)}
.cv-stats li{padding:22px 24px 0 0}
.cv-stats li+li{padding-left:24px;border-left:.5px solid var(--cv-line)}
.cv-stats b{display:block;font-family:var(--title);font-weight:200;font-size:clamp(40px,min(4.6vw,7.4svh),76px);line-height:1;letter-spacing:-.03em;
  background-image:var(--cr-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-variant-numeric:tabular-nums}
.cv-stats span{display:block;margin-top:10px;font-size:13.5px;color:var(--cv-mute);max-width:26ch}
.cv-logos{margin-top:clamp(28px,5svh,56px);border-block:.5px solid var(--cv-line)}
.cv-logos .rows{margin:0}
.cv-logos .marquee{padding-left:0}

/* the next cue and the rail */
.cv-next{position:absolute;left:50%;bottom:clamp(18px,3svh,30px);transform:translateX(-50%);display:inline-flex;flex-direction:column;align-items:center;gap:6px;
  border:0;background:none;cursor:pointer;color:var(--cv-faint);font:400 12px/1 var(--font);letter-spacing:.04em;transition:color .3s}
.cv-next svg{width:18px;height:18px;animation:cv-bob 2.4s var(--cv-ease) infinite}
.cv-next:hover,.cv-next:focus-visible{color:var(--cv-ink)}
@keyframes cv-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.cv-rail{position:fixed;right:22px;top:50%;z-index:40;transform:translateY(-50%);display:flex;flex-direction:column;gap:4px;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.cv-rail.show{opacity:1;visibility:visible}
.cv-rail button{display:flex;flex-direction:row-reverse;align-items:center;gap:12px;height:26px;border:0;background:none;cursor:pointer;color:var(--cv-faint);font:400 12px/1 var(--font)}
.cv-rail i{width:6px;height:6px;border-radius:50%;background:rgba(244,242,247,.28);transition:transform .4s var(--cv-ease),background .4s}
.cv-rail span{opacity:0;transform:translateX(6px);transition:opacity .35s,transform .35s var(--cv-ease)}
.cv-rail button.on i{background:var(--cr-hi);transform:scale(1.5);box-shadow:0 0 10px rgba(var(--cr-rgb),.8)}
.cv-rail button.on span,.cv-rail:hover span{opacity:1;transform:none}
.cv-rail button.on span{color:var(--cv-ink)}

/* scene 2: how it works */
.cx-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:clamp(32px,6vw,100px);align-items:end}
.cx-head .cv-caps{grid-column:1/-1;margin-bottom:20px}
.cx-lede{font-size:clamp(16px,1.2vw,18px);line-height:1.5;font-weight:300;color:var(--cv-mute);max-width:42ch}
.cx-body{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,64px);margin-top:clamp(28px,5svh,56px);align-items:start}
.cx-pick{position:relative;display:flex;flex-direction:column}
.cx-q{font:500 11px/1.2 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--cv-faint);margin-bottom:12px}
.cx-plug{position:absolute;left:0;top:0;width:2px;height:0;border-radius:2px;background:linear-gradient(180deg,#fff,var(--cr));box-shadow:0 0 14px rgba(var(--cr-rgb),.9),0 0 2px #fff;z-index:2}
.cx-opt{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:baseline;gap:6px;width:100%;padding:clamp(9px,1.5svh,14px) 12px clamp(9px,1.5svh,14px) 18px;
  border:0;border-top:.5px solid var(--cv-line);background:none;text-align:left;cursor:pointer;color:var(--cv-mute);transition:color .35s,background .5s}
.cx-opt:last-child{border-bottom:.5px solid var(--cv-line)}
.cx-n{font:300 12px/1 var(--font);letter-spacing:.06em;color:var(--cv-faint);font-variant-numeric:tabular-nums}
.cx-t{font-family:var(--title);font-weight:300;font-size:clamp(17px,1.45vw,21px);line-height:1.15;letter-spacing:-.01em}
.cx-t small{display:block;margin-top:5px;font:300 12.5px/1.3 var(--font);letter-spacing:0;color:var(--cv-faint);transition:color .35s}
.cx-opt:hover{color:var(--cv-ink)}
.cx-opt[aria-checked="true"]{color:var(--cv-ink);background:linear-gradient(90deg,rgba(var(--cr-rgb),.11),rgba(var(--cr-rgb),0) 75%)}
.cx-opt[aria-checked="true"] .cx-t{background-image:var(--cr-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cx-opt[aria-checked="true"] .cx-t small{-webkit-text-fill-color:var(--cv-mute)}
.cx-opt[aria-checked="true"] .cx-n{color:var(--cr-hi)}

.cx-pocket{position:relative;padding:clamp(20px,2.2vw,30px);border-radius:24px;background:var(--cv-glass);box-shadow:var(--hair);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.cx-pool{display:grid;grid-template-columns:repeat(25,minmax(0,1fr));gap:clamp(6px,.9vw,12px);align-items:center;justify-items:center}
.cx-pool i{display:block;width:100%;max-width:10px;aspect-ratio:1;border-radius:50%;background:rgba(244,242,247,.16);transition:background .5s,box-shadow .5s}
.cx-pool i.on{background:rgba(var(--cr-rgb),.55)}
.cx-pool i.cur{background:var(--cr-grad);box-shadow:0 0 12px rgba(var(--cr-rgb),.9)}
.cx-pool-cap{margin-top:16px;font-size:13.5px;color:var(--cv-mute)}
.cx-pool-cap b{font-weight:400;color:var(--cv-ink)}
.cx-phases{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(16px,3svh,26px);padding-top:clamp(16px,3svh,24px);border-top:.5px solid var(--cv-line)}
.cx-ph{cursor:pointer;opacity:.42;transition:opacity .5s}
.cx-ph.cur{opacity:1}
.cx-ph:hover{opacity:.8}
.cx-ph-h{display:flex;align-items:baseline;gap:8px;font:500 11px/1.2 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--cv-ink)}
.cx-ph-h small{font:300 12px/1.2 var(--font);letter-spacing:0;text-transform:none;color:var(--cv-faint)}
.cx-ph-bar{display:block;height:1.5px;margin:10px 0 12px;border-radius:2px;background:rgba(244,242,247,.12);overflow:hidden}
.cx-ph-bar b{display:block;height:100%;width:100%;background:var(--cr-grad);transform-origin:0 50%;transform:scaleX(0)}
.cx-ph.done .cx-ph-bar b{transform:scaleX(1)}
.cx-role{display:flex;align-items:center;gap:9px;padding:4px 0;font-size:14px;line-height:1.3;color:var(--cv-ink)}
.cx-role::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--cr-grad)}
.cx-how{margin-top:clamp(14px,2.6svh,22px);font-size:13.5px;line-height:1.5;color:var(--cv-mute);max-width:56ch}
.cx-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:clamp(14px,2.6svh,22px)}
.cx-note{font-size:12px;color:var(--cv-faint)}

/* one call to action, everywhere in the section */
.cv-cta{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border:0;border-radius:999px;cursor:pointer;color:var(--cv-ink);font:400 14.5px/1 var(--font);
  background:rgba(244,242,247,.06);box-shadow:inset 0 0 0 .5px rgba(244,242,247,.34),inset 0 1px 0 rgba(255,255,255,.08);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:background .4s,box-shadow .4s}
.cv-cta svg{width:17px;height:17px;transition:transform .4s var(--cv-ease)}
.cv-cta:hover{background:rgba(var(--cr-rgb),.14);box-shadow:inset 0 0 0 .5px rgba(var(--cr-rgb),.8),0 0 30px -8px rgba(var(--cr-rgb),.6)}
.cv-cta:hover svg{transform:translateX(3px)}

/* scene 3: the reels, sized so stage and tabs fit one screen */
.rl{--rlw:min(100%,calc((100svh - 340px) * 1.7778))}
.rl-top{text-align:center}
.rl-top .cv-caps{margin-bottom:18px}
.rl-stage,.rl-tabs,.rl-note{width:var(--rlw);margin-inline:auto}
.rl-stage{position:relative;margin-top:clamp(20px,3.6svh,40px);aspect-ratio:16/9;border-radius:clamp(14px,1.6vw,22px);overflow:hidden;background:#0b0b0d;box-shadow:var(--hair),0 50px 100px -60px rgba(var(--cr-rgb),.4)}
.rl-film{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .9s var(--cv-ease)}
.rl-film.on{opacity:1}
.rl-film video{width:100%;height:100%;object-fit:cover;display:block}
.rl-play{position:absolute;right:14px;bottom:14px;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;color:#fff;
  background:rgba(12,12,14,.42);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.4)}
.rl-play svg{width:14px;height:14px}
.rl-play .i-play,.rl-stage.paused .rl-play .i-pause{display:none}
.rl-stage.paused .rl-play .i-play{display:inline}
.rl-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,24px);margin-top:16px}
.rl-tab{appearance:none;border:0;background:none;padding:0;cursor:pointer;text-align:left;color:var(--cv-ink);display:grid;gap:6px}
.rl-tab i{display:block;height:1.5px;border-radius:2px;background:rgba(244,242,247,.14);overflow:hidden;margin-bottom:6px}
.rl-tab i b{display:block;height:100%;width:100%;background:var(--cr-grad);transform-origin:0 50%;transform:scaleX(0)}
.rl-role{font-family:var(--title);font-weight:300;font-size:clamp(16px,1.5vw,22px);letter-spacing:-.01em;line-height:1.1;color:var(--cv-faint);transition:color .5s}
.rl-what{font-size:12.5px;color:var(--cv-faint)}
.rl-tab.on .rl-role{background-image:var(--cr-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;width:fit-content}
.rl-tab.on .rl-what{color:var(--cv-mute)}
.rl-tab:hover .rl-role{color:var(--cv-mute)}
.rl-note{margin-top:14px;font-size:12px;color:var(--cv-faint)}

/* scene 4: who it is for */
.fit-top .cv-caps{margin-bottom:18px}
.fit-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(24px,4.4svh,48px)}
.fit-card{position:relative;display:flex;flex-direction:column;padding:clamp(22px,2.2vw,32px);border-radius:22px;background:var(--cv-glass);box-shadow:var(--hair);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:background .5s var(--cv-ease),box-shadow .5s var(--cv-ease)}
.fit-card:hover{background:rgba(var(--cr-rgb),.06);box-shadow:inset 0 0 0 .5px rgba(var(--cr-rgb),.7)}
.fit-n{font:300 12px/1 var(--font);letter-spacing:.06em;color:var(--cv-faint)}
.fit-card h3{margin-top:clamp(28px,6svh,64px);font-family:var(--title);font-weight:200;font-size:clamp(24px,min(2.2vw,4svh),34px);line-height:1.1;letter-spacing:-.02em}
.fit-card h3 em{display:block;width:fit-content}
.fit-card p{margin-top:14px;font-size:15px;line-height:1.55;font-weight:300;color:var(--cv-mute)}
.fit-card ul{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:auto;padding-top:20px}
.fit-card li{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--cv-ink)}
.fit-card li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--cr-grad)}
.fit-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:clamp(18px,3.4svh,30px)}
.fit-not{font-size:15px;line-height:1.5;color:var(--cv-mute);max-width:52ch}

@media (max-width:1000px){
  .cv-head,.cx-head{grid-template-columns:1fr;row-gap:18px}
  .cx-body{grid-template-columns:1fr}
  .fit-cards{grid-template-columns:1fr}
  .fit-card h3{margin-top:22px}
}
@media (max-width:900px){ .cv-rail{display:none} }
@media (max-width:700px){
  .cv-wrap{padding-inline:20px}
  .cv-scene{padding:96px 0 84px}
  .cv-stats li,.cv-stats li+li{padding:16px 8px 0 0}
  .cv-stats li+li{padding-left:10px}
  .cv-stats b{font-size:clamp(28px,8.4vw,40px)}
  .cv-stats span{font-size:12px}
  /* the challenges become a swipeable row of cards on a phone */
  .cx-pick{flex-direction:row;overflow-x:auto;gap:8px;margin-inline:-20px;padding:0 20px 4px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .cx-pick::-webkit-scrollbar{display:none}
  .cx-q,.cx-plug{display:none}
  .cx-opt,.cx-opt:last-child{flex:0 0 74%;scroll-snap-align:start;grid-template-columns:1fr;gap:10px;padding:16px;border:0;border-radius:16px;box-shadow:var(--hair);background:var(--cv-glass)}
  .cx-opt[aria-checked="true"]{box-shadow:inset 0 0 0 .5px rgba(var(--cr-rgb),.85);background:rgba(var(--cr-rgb),.09)}
  .cx-pool{grid-template-columns:repeat(10,minmax(0,1fr))}
  .cx-phases{grid-template-columns:1fr;gap:12px}
  .cx-ph-bar{margin:8px 0}
  .cx-role{display:inline-flex;margin-right:14px}
  .rl{--rlw:100%}
  .rl-top{text-align:left}
  .rl-what{display:none}
  .rl-role{font-size:14px}
  .cv-cta{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  html.cv-js .cv-in{opacity:1}
  .cv-next svg{animation:none}
}

/* ---------- 6. frozen glass (the user, 2026-10-05: "frozen glass on cards ... like the chat bar inner fill") ----------
   The hero bar's own recipe: a violet bloom from the top left, a white sheen falling down the face, a lit top edge, a hairline rim, a deep
   blur that saturates whatever sits behind. Glass needs something behind it, so each glass scene carries a soft ribbon of the accent light. */
:root{
  --frost-bg:radial-gradient(120% 140% at 28% 0%,rgba(var(--cr-rgb),.16),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.03) 46%,rgba(255,255,255,.05));
  --frost-sh:inset 0 1px 0 rgba(255,255,255,.34),inset 0 12px 26px -14px rgba(255,255,255,.16),inset 0 0 0 .5px rgba(255,255,255,.16),0 30px 70px -30px rgba(0,0,0,.8);
}
.cx-pocket,.fit-card,.cv-cta{background:var(--frost-bg);box-shadow:var(--frost-sh);-webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8)}
.fit-card:hover{background:radial-gradient(120% 140% at 28% 0%,rgba(var(--cr-rgb),.26),transparent 62%),linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.04) 46%,rgba(255,255,255,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 12px 26px -14px rgba(255,255,255,.18),inset 0 0 0 .5px rgba(var(--cr-rgb),.75),0 30px 70px -30px rgba(0,0,0,.8)}
.cv-cta:hover{background:radial-gradient(120% 160% at 28% 0%,rgba(var(--cr-rgb),.34),transparent 62%),linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 .5px rgba(var(--cr-rgb),.8),0 0 30px -8px rgba(var(--cr-rgb),.7)}
@media (max-width:700px){ .cx-opt,.cx-opt:last-child{background:var(--frost-bg);box-shadow:var(--frost-sh);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6)}
  .cx-opt[aria-checked="true"]{background:radial-gradient(120% 140% at 28% 0%,rgba(var(--cr-rgb),.3),transparent 62%),linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 .5px rgba(var(--cr-rgb),.85)} }

/* the light behind the glass: a soft ribbon of blue, violet and magenta, drifting slowly */
.cv-scene[data-scene="1"]::before,#fit.cv-scene::before{content:"";position:absolute;z-index:0;pointer-events:none;width:min(1100px,110vw);height:420px;filter:blur(70px);opacity:.55;
  background:radial-gradient(40% 50% at 25% 60%,rgba(143,162,255,.5),transparent 70%),radial-gradient(35% 45% at 55% 45%,rgba(180,147,255,.55),transparent 70%),radial-gradient(30% 40% at 80% 35%,rgba(231,162,255,.45),transparent 70%);
  animation:cv-drift 18s ease-in-out infinite alternate}
.cv-scene[data-scene="1"]::before{right:-14%;top:42%;transform:rotate(-14deg)}
#fit.cv-scene::before{left:-10%;top:40%;transform:rotate(10deg)}
.cv-scene>.cv-wrap{z-index:1}
@keyframes cv-drift{to{translate:4% -6%;opacity:.42}}
@media (prefers-reduced-motion:reduce){ .cv-scene::before{animation:none} }
.cv{overflow-x:clip}
/* ---------- 7. how it works, simplified (the user: "simpler and clean to understand in 3 seconds") ----------
   One question, one answer: pick a challenge, see the three people who plug in. Three steps underneath say how it runs. */
.cx-body{display:flex;flex-direction:column;align-items:center;gap:clamp(16px,3svh,26px);max-width:880px;margin:clamp(28px,5svh,52px) auto 0}
.cx-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.cx-chip{height:40px;padding:0 18px;border:0;border-radius:999px;cursor:pointer;color:var(--cv-mute);font:400 14.5px/1 var(--font);
  background:var(--frost-bg);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.18),inset 0 1px 0 rgba(255,255,255,.18);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  transition:color .3s,box-shadow .4s,background .4s}
.cx-chip:hover{color:var(--cv-ink)}
.cx-chip[aria-checked="true"]{color:#fff;background:radial-gradient(120% 160% at 30% 0%,rgba(var(--cr-rgb),.42),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  box-shadow:inset 0 0 0 .5px rgba(var(--cr-rgb),.9),inset 0 1px 0 rgba(255,255,255,.4),0 0 24px -8px rgba(var(--cr-rgb),.8)}
.cx-card{width:100%;padding:clamp(20px,3svh,32px) clamp(20px,3vw,36px);border-radius:24px;background:var(--frost-bg);box-shadow:var(--frost-sh);-webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8);text-align:center}
.cx-for{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:12px}
.cx-for b{font-family:var(--title);font-weight:300;font-size:clamp(24px,min(2.6vw,4.4svh),36px);letter-spacing:-.015em;line-height:1.1;
  background:var(--cr-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cx-team{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(16px,2.6svh,24px)}
.cx-team li{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 10px;border-radius:16px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.1)}
.cx-av{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;font:400 14px/1 var(--font);letter-spacing:.04em;color:#fff;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.35),transparent 55%),var(--cr-grad);box-shadow:0 0 22px -4px rgba(var(--cr-rgb),.8)}
.cx-team b{font-weight:400;font-size:15px;color:var(--cv-ink)}
.cx-steps{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:10px 28px;font-size:14px;color:var(--cv-mute)}
.cx-steps li{display:flex;align-items:center;gap:10px}
.cx-steps i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font:400 11px/1 var(--font);font-style:normal;color:var(--cv-ink);box-shadow:inset 0 0 0 .5px rgba(var(--cr-rgb),.8)}
.cx-foot{justify-content:center;margin-top:0}
@media (max-width:700px){
  .cx-chips{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;width:calc(100% + 40px);margin-inline:-20px;padding:2px 20px 4px;scrollbar-width:none}
  .cx-chips::-webkit-scrollbar{display:none}
  .cx-chip{flex:none}
  .cx-team{grid-template-columns:1fr;gap:8px}
  .cx-team li{flex-direction:row;padding:10px 12px}
  .cx-av{width:36px;height:36px;font-size:12px}
  .cx-steps{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ---------- 8. how it works, the hub (supersedes 7's chips and line-up) ----------
   Your marketing team at the centre covers the everyday; six specialist problems sit around it, dim. "+ The collective" plugs a specialist
   into each. One picture, two states, read in seconds. */
.cx-body{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:clamp(28px,5vw,80px);max-width:none;margin:clamp(24px,4svh,48px) 0 0}
.cx-side{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,3svh,28px)}
.cx-seg{position:relative;display:inline-flex;padding:4px;border-radius:999px;background:var(--frost-bg);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.18),inset 0 1px 0 rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6)}
.cx-seg button{position:relative;z-index:1;height:40px;padding:0 18px;border:0;border-radius:999px;background:none;cursor:pointer;font:400 14px/1 var(--font);color:var(--cv-mute);transition:color .35s}
.cx-seg button[aria-selected="true"]{color:#fff}
.cx-pill{position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:999px;
  background:radial-gradient(120% 160% at 30% 0%,rgba(var(--cr-rgb),.42),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  box-shadow:inset 0 0 0 .5px rgba(var(--cr-rgb),.9),inset 0 1px 0 rgba(255,255,255,.4)}
.cx-seg[data-mode="team"] .cx-pill{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));box-shadow:inset 0 0 0 .5px rgba(255,255,255,.4)}
.cx-say{display:grid;font-family:var(--title);font-weight:300;font-size:clamp(20px,min(1.9vw,3.4svh),28px);line-height:1.25;letter-spacing:-.01em;max-width:24ch}
.cx-say span{grid-area:1/1;transition:opacity .5s var(--cv-ease),transform .6s var(--cv-ease)}
.cx-body[data-mode="plus"] .cx-say [data-for="team"],.cx-body[data-mode="team"] .cx-say [data-for="plus"]{opacity:0;transform:translateY(8px)}
.cx-steps{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:12px}
.cx-foot{justify-content:flex-start}

.cx-map{position:relative;width:100%;max-width:min(560px,62svh);aspect-ratio:1;justify-self:center;container-type:inline-size}
.cx-map::before{content:"";position:absolute;inset:16%;border-radius:50%;border:.5px dashed rgba(244,242,247,.16)}
.cx-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cx-wires line{stroke-width:1;vector-effect:non-scaling-stroke}
.cx-core,.cx-need,.cx-mind{position:absolute;left:50%;top:50%;translate:-50% -50%;white-space:nowrap}
.cx-core{width:30%;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;z-index:3;
  background:var(--frost-bg),rgba(10,10,14,.5);box-shadow:var(--frost-sh);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);transition:box-shadow .8s}
.cx-core b{font-family:var(--title);font-weight:300;font-size:clamp(15px,4.4cqi,22px);letter-spacing:-.01em;color:var(--cv-ink)}
.cx-core small{font:500 clamp(8.5px,2cqi,10.5px)/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--cv-faint)}
.cx-map[data-mode="team"] .cx-core{box-shadow:var(--frost-sh),0 0 0 14px rgba(255,255,255,.035),0 0 0 30px rgba(255,255,255,.02)}
.cx-need{z-index:2;padding:7px 12px;border-radius:999px;font:400 clamp(10.5px,2.5cqi,13.5px)/1 var(--font);color:var(--cv-ink);
  background:var(--frost-bg),rgba(10,10,14,.6);box-shadow:inset 0 0 0 .5px rgba(var(--cr-rgb),.7),inset 0 1px 0 rgba(255,255,255,.2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:color .6s,box-shadow .6s,opacity .6s}
.cx-map[data-mode="team"] .cx-need{color:var(--cv-faint);box-shadow:inset 0 0 0 .5px rgba(244,242,247,.14)}
.cx-mind{z-index:4;display:grid;place-items:center;width:clamp(28px,7.4cqi,38px);aspect-ratio:1;border-radius:50%;font:500 clamp(9px,2.2cqi,11px)/1 var(--font);letter-spacing:.04em;color:#fff;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.4),transparent 55%),var(--cr-grad);box-shadow:0 0 22px -4px rgba(var(--cr-rgb),.9);opacity:0}

@media (max-width:1000px){
  .cx-body{grid-template-columns:1fr}
  .cx-map{order:-1;max-width:min(460px,100%)}
}
.cx-map{max-width:min(520px,54svh)} .cx-body{margin-top:clamp(16px,3svh,36px)}

/* ---------- 9. Google Material Symbols (Outlined), self-hosted subset, at weight 200 / grade -25 so the strokes sit with Stack Extralight,
   as on the Capital page. Icons in use: rocket_launch, pie_chart, lightbulb (who it’s for), chat_bubble, electrical_services, tune (the steps), groups, task_alt, sports_esports (the stats).
   A new icon must be added to the subset (fonts.googleapis.com ...&icon_names=) or its name shows as text. ---------- */
@font-face{font-family:"Material Symbols Outlined";src:url(fonts/MaterialSymbolsOutlined-cv.woff2) format("woff2");font-weight:100 700;font-display:block}
.ms{font-family:"Material Symbols Outlined";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;
  -webkit-font-feature-settings:"liga";font-feature-settings:"liga";-webkit-font-smoothing:antialiased;font-variation-settings:"FILL" 0,"wght" 200,"GRAD" -25,"opsz" 24;user-select:none}
.fit-n{display:flex;align-items:center;justify-content:space-between}
.fit-n .ms{font-size:34px;font-variation-settings:"FILL" 0,"wght" 200,"GRAD" -25,"opsz" 40;
  background:var(--cr-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fit-n i{font-style:normal;font:300 12px/1 var(--font);letter-spacing:.06em;color:var(--cv-faint)}
.cx-steps li{gap:12px}
.cx-steps i.ms{width:38px;height:38px;border-radius:50%;font-family:"Material Symbols Outlined";font-size:20px;font-weight:normal;display:grid;place-items:center;color:var(--cv-ink);
  background:var(--frost-bg);box-shadow:inset 0 0 0 .5px rgba(var(--cr-rgb),.6),inset 0 1px 0 rgba(255,255,255,.2)}
.cx-steps em{font-style:normal;margin-right:10px;font-size:12px;letter-spacing:.06em;color:var(--cv-faint)}

/* the hero film sits a touch further back (the user, 2026-10-06: "slightly less opacity") */
.hero .room{opacity:.72}

/* ---------- 10. how it works, the creative map (supersedes 7 and 8). Chart only: a question mark arrives on one angle and eats into the
   brand; the specialist for that angle fires in, clears it, and the map grows on that side. Five angles, in turn, on a loop. ---------- */

/* liquid glass: a clear, saturated blur with a lit top lip, a soft under-reflection and a hairline rim */
.lg{position:relative;isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.05) 46%,rgba(255,255,255,.02) 54%,rgba(255,255,255,.09) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(1.9) brightness(1.08);backdrop-filter:blur(14px) saturate(1.9) brightness(1.08);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -1px 1px rgba(255,255,255,.14),inset 0 0 0 .5px rgba(255,255,255,.26),0 10px 26px -10px rgba(0,0,0,.7)}
.lg::after{content:"";position:absolute;left:12%;right:12%;top:1px;height:42%;border-radius:999px 999px 50% 50%/999px 999px 100% 100%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0));z-index:-1}

.cx-body{display:flex;justify-content:center;margin-top:clamp(8px,2svh,24px)}
.cx-map{position:relative;width:100%;max-width:min(620px,60svh);aspect-ratio:1;container-type:inline-size}
.cx-map::before{content:none}
.cx-radar{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cx-grid polygon{fill:none;stroke:rgba(244,242,247,.1);stroke-width:.22}
.cx-grid polygon:last-child{stroke:rgba(244,242,247,.16);stroke-dasharray:.8 1.2}
.cx-grid line{stroke:rgba(244,242,247,.1);stroke-width:.22}
.cx-shape{fill:url(#cxFill);stroke:url(#cxEdge);stroke-width:.45;stroke-linejoin:round;filter:url(#cxGlow);transition:fill .6s,stroke .6s}
.cx-map.sick .cx-shape{fill:rgba(255,77,122,.16);stroke:rgba(255,120,150,.8)}
.cx-fx .trail{stroke:#FF4D7A;stroke-width:.5;stroke-linecap:round;stroke-dasharray:.6 1.1;opacity:.8;filter:url(#cxGlow)}
.cx-fx .beam{stroke:url(#cxEdge);stroke-width:.7;stroke-linecap:round;filter:url(#cxGlow)}
.cx-fx .comet{fill:#fff;filter:url(#cxGlow)}
.cx-fx .spark{filter:url(#cxGlow)}
.cx-fx .ring{fill:none;stroke:url(#cxEdge);stroke-width:.4}
.cx-fx .sick-halo{fill:url(#cxSick)}

.cx-core{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:3;width:19%;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;
  background:var(--frost-bg),rgba(10,10,14,.55);box-shadow:var(--frost-sh),0 0 40px -6px rgba(var(--cr-rgb),.55);-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);transition:box-shadow .5s}
.cx-core img{width:46%;height:auto}
.cx-core span{font:500 clamp(7px,1.7cqi,9.5px)/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--cv-mute)}
.cx-map.sick .cx-core{box-shadow:var(--frost-sh),0 0 46px -2px rgba(255,77,122,.75)}
.cx-map.sick .cx-core img{filter:hue-rotate(115deg) saturate(1.4)}

.cx-axis{position:absolute;translate:-50% -50%;z-index:4;padding:7px 13px;border-radius:999px;white-space:nowrap;font:400 clamp(10.5px,2.4cqi,13.5px)/1 var(--font);color:var(--cv-ink);transition:color .4s,box-shadow .4s}
.cx-axis.hit{color:#FFD0DC;box-shadow:inset 0 1px 1px rgba(255,255,255,.5),inset 0 0 0 .5px rgba(255,90,130,.9),0 0 22px -4px rgba(255,77,122,.8)}
.cx-axis.won{box-shadow:inset 0 1px 1px rgba(255,255,255,.6),inset 0 0 0 .5px rgba(var(--cr-rgb),.95),0 0 24px -4px rgba(var(--cr-rgb),.9)}
.cx-who{position:absolute;translate:-50% -50%;z-index:5;display:inline-flex;align-items:center;gap:6px;padding:6px 11px 6px 7px;border-radius:999px;white-space:nowrap;
  font:400 clamp(10px,2.2cqi,12.5px)/1 var(--font);color:#fff;opacity:0}
.cx-who::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--cr-grad);box-shadow:0 0 10px rgba(var(--cr-rgb),.9)}
.cx-qm{position:absolute;left:50%;top:50%;translate:-50% -55%;z-index:6;font-family:var(--title);font-weight:300;font-size:clamp(34px,10.5cqi,60px);line-height:1;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,#FFC2D1,#FF4D7A);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 10px rgba(255,77,122,.85))}
.cx-live{position:absolute;left:50%;bottom:-5%;translate:-50% 0;z-index:6;display:inline-flex;align-items:center;gap:10px;max-width:96%;padding:10px 16px;border-radius:999px;
  font:400 clamp(12px,2.6cqi,14.5px)/1.3 var(--font);color:var(--cv-ink);white-space:nowrap}
.cx-live i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--cr-grad);box-shadow:0 0 10px rgba(var(--cr-rgb),.9);transition:background .4s,box-shadow .4s}
.cx-live.bad i{background:#FF4D7A;box-shadow:0 0 12px rgba(255,77,122,.95)}
.cx-live span{overflow:hidden;text-overflow:ellipsis}
.cx-seg.lg::after,.cx-live.lg::after{left:6%;right:6%}
@media (max-width:700px){ .cx-map{max-width:100%} .cx-live{white-space:normal;text-align:left;bottom:-12%} }
.cx-map{max-width:min(560px,52svh)} @media (max-width:700px){ .cx-map{max-width:100%} }

/* ---------- 11. the scanner cycle (supersedes the fills in 10): plain text tags, the Humanate icon alone at the centre, a sweep that never stops,
   and a four-word cycle under the chart: Scan, De-risk, Solve, Sharpen ---------- */
.cx-axis{padding:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;font:500 clamp(9.5px,2.2cqi,11.5px)/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--cv-mute)}
.cx-axis::after{content:none}
.cx-axis.hit{color:#FF7A9B;box-shadow:none;text-shadow:0 0 14px rgba(255,77,122,.8)}
.cx-axis.won{color:transparent;box-shadow:none;background:var(--cr-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cx-core{width:13%;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;filter:drop-shadow(0 0 18px rgba(var(--cr-rgb),.75))}
.cx-core img{width:100%}
.cx-map.sick .cx-core{box-shadow:none;filter:drop-shadow(0 0 20px rgba(255,77,122,.9))}
.cx-scan .cx-sweep{fill:url(#cxSweep)}
.cx-scan .cx-scanline{stroke:#F3D9FF;stroke-width:.35;stroke-linecap:round;opacity:.8;filter:url(#cxGlow)}
.cx-who{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;font:400 clamp(10px,2.3cqi,12.5px)/1 var(--font);text-shadow:0 1px 8px rgba(0,0,0,.9)}
.cx-who::after{content:none}
.cx-live{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;bottom:-4%;font:400 clamp(12.5px,2.7cqi,15px)/1.3 var(--font)}
.cx-live::after{content:none}
.cx-cycle{position:absolute;left:50%;bottom:-11%;translate:-50% 0;list-style:none;display:flex;align-items:center;gap:clamp(10px,3cqi,22px);margin:0;padding:0;white-space:nowrap;
  font:500 clamp(9px,2cqi,10.5px)/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--cv-faint)}
.cx-cycle li{display:flex;align-items:center;gap:clamp(10px,3cqi,22px);transition:color .4s}
.cx-cycle li+li::before{content:"";width:clamp(12px,4cqi,28px);height:.5px;background:rgba(244,242,247,.22)}
.cx-cycle li.on{color:var(--cv-ink);text-shadow:0 0 12px rgba(var(--cr-rgb),.9)}
.cx-cycle li[data-p="risk"].on{color:#FF7A9B;text-shadow:0 0 12px rgba(255,77,122,.8)}
.cx-body{margin-bottom:clamp(36px,6svh,64px)}

/* ---------- 12. the hexagon scanner (supersedes 10 and 11). No filled shape: it implied scores nobody has measured. The centre is the
   Humanate icon, recoloured by phase, with the phase word under it; the outer hexagon carries each angle's status; labels are light caps. ---------- */
.cx-map{max-width:min(560px,54svh)}
.cx-grid polygon{fill:none;stroke:rgba(244,242,247,.08);stroke-width:.22}
.cx-grid polygon:last-child{stroke:none}
.cx-grid line{stroke:rgba(244,242,247,.08);stroke-width:.22}
.cx-status polyline{fill:none;stroke:rgba(244,242,247,.24);stroke-width:.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .5s,opacity .5s}
.cx-status polyline.risk{stroke:#FF4D7A;filter:url(#cxGlow);animation:cx-pulse 1s ease-in-out infinite}
.cx-status polyline.solve{stroke:#8FA2FF;filter:url(#cxGlow)}
.cx-status polyline.won{stroke:url(#cxEdge);filter:url(#cxGlow);stroke-width:.9}
@keyframes cx-pulse{50%{opacity:.45}}
.cx-scan .cx-sweep{fill:url(#cxSweep)}
.cx-scan .cx-scanline{stroke:#F3D9FF;stroke-width:.3;opacity:.75}

.cx-core{width:24%;aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;gap:10%;background:none;box-shadow:none;filter:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.cx-core img{width:50%;height:auto;transition:filter .6s var(--cv-ease)}
.cx-phase{font:300 clamp(9px,2.1cqi,11.5px)/1 var(--font);letter-spacing:.24em;text-transform:uppercase;color:var(--cv-ink);transition:color .5s;white-space:nowrap}
.cx-core[data-p="scan"] img{filter:drop-shadow(0 0 14px rgba(var(--cr-rgb),.7))}
.cx-core[data-p="risk"] img{filter:hue-rotate(115deg) saturate(1.6) drop-shadow(0 0 16px rgba(255,77,122,.9))}
.cx-core[data-p="risk"] .cx-phase{color:#FF8CA8}
.cx-core[data-p="solve"] img{filter:hue-rotate(-38deg) saturate(1.3) drop-shadow(0 0 16px rgba(143,162,255,.95))}
.cx-core[data-p="solve"] .cx-phase{color:#AFC0FF}
.cx-core[data-p="sharp"] img{filter:saturate(.5) brightness(1.45) drop-shadow(0 0 18px rgba(231,162,255,.95))}
.cx-core[data-p="sharp"] .cx-phase{color:#F6D6FF}
.cx-map.sick .cx-core{filter:none;box-shadow:none}

.cx-axis{font:300 clamp(9.5px,2.2cqi,11.5px)/1 var(--font);letter-spacing:.22em;color:var(--cv-mute);text-shadow:none}
.cx-axis.hit{color:#FF8CA8;text-shadow:0 0 12px rgba(255,77,122,.7)}
.cx-axis.solve{color:#AFC0FF}
.cx-who{font:300 clamp(10px,2.3cqi,12.5px)/1 var(--font)}
.cx-live{bottom:-7%;font:300 clamp(13px,2.8cqi,15.5px)/1.35 var(--font);color:var(--cv-ink);text-align:center;white-space:normal;width:max-content;max-width:100%}
.cx-live.bad{color:#FFB3C5}
.cx-live i{display:none}
.cx-body{margin-bottom:clamp(30px,5svh,56px)}
@media (max-width:700px){ .cx-live{bottom:-12%} }

/* hairlines throughout the chart (the user, 2026-10-06: "make the lines thinner") */
.cx-grid polygon,.cx-grid line{stroke-width:.12}
.cx-status polyline{stroke-width:.38}
.cx-status polyline.won{stroke-width:.5}
.cx-scan .cx-scanline{stroke-width:.16}
.cx-fx .trail{stroke-width:.3}
.cx-fx .beam{stroke-width:.38}
.cx-fx .ring{stroke-width:.25}

/* ---------- 13. the castle: cornerstones and walls. Each corner carries a cornerstone (a small diamond); a wall (shield arc) rises just outside
   it when its specialist sets it; outside assumptions arrive as soft, blurred quotes and break on the wall. ---------- */
.cx-stone{fill:#0b0b0e;stroke:rgba(244,242,247,.4);stroke-width:.25;transform-box:fill-box;transform-origin:center;transition:fill .5s,stroke .5s}
.cx-stone.risk{stroke:#FF4D7A;filter:url(#cxGlow)}
.cx-stone.set{fill:#8FA2FF;stroke:#DCE4FF;filter:url(#cxGlow)}
.cx-stone.won{fill:url(#cxEdge);stroke:#FFF1FF;filter:url(#cxGlow)}
.cx-status polyline.set{stroke:#8FA2FF;filter:url(#cxGlow)}
.cx-shield{fill:none;stroke:#AFC0FF;stroke-width:.5;stroke-linecap:round;filter:url(#cxGlow)}
.cx-shield.won{stroke:url(#cxEdge)}
.cx-bub{position:absolute;translate:-50% -50%;z-index:6;white-space:nowrap;pointer-events:none;opacity:0;
  font:300 italic clamp(11px,2.5cqi,14px)/1 var(--font);color:#FFC6D3;text-shadow:0 0 14px rgba(255,77,122,.7)}
.cx-map{overflow:visible}

/* the centre is the client's brand, the castle being guarded (the user: "instead of our logo it would be your brand") */
.cx-core{gap:6%}
.cx-castle{font-size:clamp(26px,7.5cqi,42px);font-variation-settings:"FILL" 0,"wght" 200,"GRAD" -25,"opsz" 40;color:#D9CCFF;transition:color .5s,text-shadow .5s;text-shadow:0 0 16px rgba(var(--cr-rgb),.8)}
.cx-yb{font-family:var(--title);font-weight:300;font-size:clamp(12px,3.2cqi,17px);letter-spacing:-.01em;color:var(--cv-ink);white-space:nowrap}
.cx-core[data-p="risk"] .cx-castle{color:#AFC0FF;text-shadow:0 0 16px rgba(143,162,255,.9)}
.cx-core[data-p="risk"] .cx-phase{color:#AFC0FF}
.cx-core[data-p="solve"] .cx-castle{color:#FFFFFF;text-shadow:0 0 18px rgba(255,255,255,.8)}
.cx-core[data-p="solve"] .cx-phase{color:#FFFFFF}
.cx-core[data-p="sharp"] .cx-castle{color:#F6D6FF;text-shadow:0 0 18px rgba(231,162,255,.95)}
.cx-core .cx-castle{font-family:"Material Symbols Outlined";font-weight:normal;letter-spacing:normal;text-transform:none;line-height:1}
.cx-core .cx-yb{font-family:var(--title);font-weight:300;text-transform:none;letter-spacing:-.01em}

/* ---------- 14. light (the user: "so simple and light, not a heavy diagram"): Your brand at the centre and nothing else there, no sweep,
   no floating name tags, two faint rings, hairline corners, and no glow filters except a soft one on a held corner. ---------- */
.cx-scan,.cx-who,.cx-castle,.cx-phase{display:none!important}
.cx-grid polygon:nth-child(2){display:none}
.cx-grid polygon,.cx-grid line{stroke:rgba(244,242,247,.07)}
.cx-core .cx-yb{font-size:clamp(14px,3.6cqi,19px);color:var(--cv-ink);transition:color .5s,text-shadow .5s}
.cx-core[data-p="risk"] .cx-yb{color:#C9D3FF}
.cx-core[data-p="sharp"] .cx-yb{text-shadow:0 0 18px rgba(var(--cr-rgb),.7)}
.cx-status polyline,.cx-status polyline.risk,.cx-status polyline.set,.cx-status polyline.won,.cx-shield,.cx-stone,.cx-stone.risk,.cx-stone.set{filter:none}
.cx-status polyline{stroke:rgba(244,242,247,.2)}
.cx-status polyline.won,.cx-stone.won{filter:drop-shadow(0 0 1.2px rgba(var(--cr-rgb),.9))}
.cx-shield{stroke-width:.35;opacity:.9}
.cx-stone{stroke-width:.2}
.cx-bub{text-shadow:none;color:#FFB8C9}
.cx-shield{display:none}

/* ---------- 15. scene 2 layout: words on the left (title top, the short note bottom left), the chart on the right ---------- */
#cx > .cv-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(32px,5vw,80px);align-items:stretch;min-height:min(640px,70svh)}
#cx .cx-head{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding-block:clamp(8px,2svh,24px) clamp(40px,8svh,80px)}
#cx .cx-head .cv-caps{margin-bottom:20px}
#cx .cx-head .cv-sub{font-size:clamp(32px,min(3.8vw,6.6svh),60px)}
#cx .cx-lede{margin-top:auto;font-size:15px;max-width:34ch}
#cx .cx-body{margin:0;align-self:center;justify-content:flex-end}
#cx .cx-map{max-width:min(600px,62svh)}
@media (max-width:1000px){
  #cx > .cv-wrap{grid-template-columns:minmax(0,1fr);min-height:0}   /* minmax(0,…): a plain 1fr grew to the logo marquee's 8,763 px and pushed the ring off-screen on his iPhone (2026-10-08) */
  #cx .cx-head{padding:0}
  #cx .cx-lede{margin-top:18px}
  #cx .cx-body{justify-content:center;margin-top:24px}
}
.cx-status polyline.risk{stroke-width:.6;filter:drop-shadow(0 0 1.4px rgba(255,77,122,.95))} .cx-stone.risk{fill:#FF4D7A}
@media (max-width:1000px){ #cx.cv-scene{padding-bottom:150px} #cx .cx-live{bottom:-16%;font-size:13px} }

/* ---------- 16. one place to look (the user: "hard to see and watch at the same time"): while a corner is in play everything else dims,
   the comment arrives sharp, and the centre names the step under "Your brand" ---------- */
.cx-axis,.cx-stone,.cx-status polyline{transition:opacity .5s,color .4s,stroke .5s,fill .5s}
.cx-map.focus .cx-axis:not(.act),.cx-map.focus .cx-stone:not(.act),.cx-map.focus .cx-status polyline:not(.act){opacity:.28}
.cx-map.focus .cx-axis.act{font-weight:400;letter-spacing:.24em}
.cx-core .cx-state{min-height:1.2em;margin-top:6px;font:300 clamp(10px,2.4cqi,12.5px)/1.2 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--cv-mute);white-space:nowrap}
.cx-core .cx-state.bad{color:#FF8CA8}
.cx-core .cx-state.fix{color:#AFC0FF}
.cx-core .cx-state.won{color:#F2D4FF;text-shadow:0 0 12px rgba(var(--cr-rgb),.8)}
.cx-bub{font-size:clamp(12.5px,2.9cqi,16px);font-style:italic;color:#FFD0DC;background:rgba(10,8,12,.55);padding:6px 10px;border-radius:8px}
/* held corners read white into blue, not the lilac gradient (the user: easier to read) */
.cx-axis.won{background:linear-gradient(90deg,#FFFFFF 0%,#C9D6FF 55%,#8FA2FF 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.cx-core .cx-state.won{color:#DCE4FF;text-shadow:0 0 12px rgba(143,162,255,.7)}
/* the caption under the chart is gone from view (the user, 2026-10-06); it stays for screen readers, since it is the chart's narration */
#cx .cx-live{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;padding:0!important;margin:-1px!important}
@media (max-width:1000px){ #cx.cv-scene{padding-bottom:100px} }

/* ---------- 17. resilience: repaired hits circulate round the brand on a faint orbit; the count sits under "Your brand" ---------- */
.cx-orbit-path{fill:none;stroke:rgba(244,242,247,.06);stroke-width:.12;stroke-dasharray:.4 1.2}
.cx-orb{fill:#DCE4FF;filter:drop-shadow(0 0 1.2px rgba(143,162,255,.95))}
.cx-core .cx-state.count{color:#C9D6FF}

/* ---------- 18. before and after: a light marker above the chart's left shoulder names which half of the story is playing ---------- */
.cx-ba{position:absolute;left:0;top:2%;z-index:6;display:flex;gap:16px;font:300 clamp(10px,2.3cqi,12px)/1 var(--font);letter-spacing:.22em;text-transform:uppercase;color:var(--cv-faint)}
.cx-ba span{position:relative;padding-bottom:7px;transition:color .4s}
.cx-ba span::after{content:"";position:absolute;left:0;right:.22em;bottom:0;height:.5px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--cv-ease)}
.cx-ba span.on{color:var(--cv-ink)}
.cx-ba span.on::after{transform:scaleX(1)}
.cx-ba span[data-s="before"].on{color:#FF8CA8}
.cx-ba span[data-s="after"].on{color:#C9D6FF}

/* ---------- 19. the ring (supersedes the hexagon): one thin circle round "Your brand", six quiet labels, red risks, white-blue repairs ---------- */
.cx-ringmap .cx-ring{fill:none;stroke:rgba(244,242,247,.22);stroke-width:.25}
.cx-ringmap .cx-ring-on{fill:none;stroke:url(#cxWB);stroke-width:.45;opacity:0;transition:opacity 1.2s var(--cv-ease);filter:drop-shadow(0 0 1.4px rgba(143,162,255,.9))}
.cx-ringmap .cx-ring-on.on{opacity:1}
.cx-mark{fill:none;stroke:#FF4D7A;stroke-width:.9;stroke-linecap:round;filter:drop-shadow(0 0 1.2px rgba(255,77,122,.9));transition:stroke .5s,filter .5s}
.cx-mark.fix{stroke:#AFC0FF;filter:drop-shadow(0 0 1.2px rgba(143,162,255,.9))}
.cx-mark.won{stroke:url(#cxWB);filter:drop-shadow(0 0 1.4px rgba(201,214,255,.95))}
.cx-flash{fill:none;stroke:#FFFFFF;stroke-width:.9;stroke-linecap:round;filter:drop-shadow(0 0 1.6px rgba(201,214,255,1))}
.cx-ball{fill:#FF4D7A;filter:drop-shadow(0 0 1.6px rgba(255,77,122,.95))}
.cx-orb{fill:#DCE4FF;filter:drop-shadow(0 0 1.2px rgba(143,162,255,.95))}
.cx-ringmap .cx-axis{font-size:clamp(9px,2cqi,11px);color:var(--cv-faint)}
.cx-ringmap .cx-axis.hit{color:#FF8CA8;text-shadow:none}
.cx-ringmap .cx-core{width:34%}
.cx-ringmap .cx-core .cx-yb{font-size:clamp(15px,4cqi,21px)}

/* ---------- 20. the rotation of people (supersedes the ring's labels and before/after) ---------- */
.cx-people .cx-ring{fill:none;stroke:rgba(244,242,247,.22);stroke-width:.25}
.cx-people .cx-track{fill:none;stroke:rgba(244,242,247,.07);stroke-width:.15;stroke-dasharray:.5 1.2}
.cx-faces{position:absolute;inset:0;z-index:5;pointer-events:none}
.cx-face{position:absolute;left:50%;top:50%;translate:-50% -50%;width:11%;aspect-ratio:1;padding:0;border:0;border-radius:50%;cursor:pointer;pointer-events:auto;background:#111;
  box-shadow:0 0 0 1px rgba(244,242,247,.22),0 8px 20px -8px rgba(0,0,0,.8);transition:box-shadow .4s,scale .4s var(--cv-ease)}
.cx-face img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;filter:saturate(.55) brightness(.9);transition:filter .4s}
.cx-face:hover img,.cx-face.job img,.cx-face.in img{filter:none}
.cx-face:hover,.cx-face:focus-visible{scale:1.12;outline:0;box-shadow:0 0 0 1px rgba(201,214,255,.9),0 0 18px -2px rgba(143,162,255,.8)}
.cx-face.job{box-shadow:0 0 0 1px rgba(201,214,255,.95),0 0 20px -2px rgba(143,162,255,.9);z-index:2}
.cx-face.in{scale:1.25;z-index:3;box-shadow:0 0 0 1px #fff,0 0 26px 0 rgba(143,162,255,.9)}
.cx-role{position:absolute;left:50%;top:calc(100% + 6px);translate:-50% 0;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .3s;
  font:300 clamp(9.5px,2.1cqi,11.5px)/1 var(--font);letter-spacing:.06em;color:var(--cv-ink);text-shadow:0 1px 8px rgba(0,0,0,.95)}
.cx-face:hover .cx-role,.cx-face:focus-visible .cx-role,.cx-face.job .cx-role,.cx-face.in .cx-role{opacity:1}
.cx-face.in .cx-role{scale:.8}
.cx-people .cx-core{width:36%}
.cx-people .cx-core .cx-yb{font-size:clamp(15px,4cqi,21px)}
#cx .cx-credit{margin-top:10px;font-size:11.5px;color:var(--cv-faint)}
@media (max-width:700px){ .cx-face{width:13%} }
.cx-face .cx-role{display:block;padding:0;gap:0}
.cx-face .cx-role::before{content:none}
.cx-face.job .cx-role{opacity:0}
.cx-face.job:hover .cx-role{opacity:1}
.cx-face.in{scale:1.12} @media (max-width:1000px){ #cx.cv-scene{padding-bottom:120px} }
/* the rest of the rotation steps back while a specialist is in on a problem (the user, 2026-10-06) */
.cx-face{transition:box-shadow .4s,scale .4s var(--cv-ease),opacity .45s var(--cv-ease)}
.cx-people.busy .cx-face:not(.job):not(.in){opacity:.22}
.cx-people.busy .cx-face:not(.job):not(.in):hover{opacity:1}

/* the specialist's speech bubble (replaces the status line under "Your brand") */
.cx-people .cx-state{display:none}
.cx-say{position:absolute;left:50%;bottom:calc(100% + 10px);translate:-50% 0;z-index:4;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:8px 11px;border-radius:12px;white-space:nowrap;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05));-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.45),inset 0 0 0 .5px rgba(255,255,255,.28),0 10px 24px -10px rgba(0,0,0,.8);transform-origin:50% 100%}
.cx-say::after{content:"";position:absolute;left:50%;top:100%;width:9px;height:9px;translate:-50% -50%;rotate:45deg;background:rgba(40,40,52,.85);box-shadow:inset -.5px -.5px 0 rgba(255,255,255,.25)}
.cx-say em{font:300 10.5px/1 var(--font);font-style:normal;letter-spacing:.06em;color:var(--cv-mute)}
.cx-say i{font:400 13.5px/1.1 var(--font);font-style:normal;color:#fff}
.cx-face.in .cx-say{scale:.9}
.cx-face.job .cx-role,.cx-face.in .cx-role{opacity:0}
/* bubbles: solid dark glass so nothing behind bleeds through; the role reads clearly; a plugged-in specialist's bubble opens below them */
.cx-say{background:linear-gradient(180deg,rgba(40,40,52,.96),rgba(18,18,24,.96));-webkit-backdrop-filter:none;backdrop-filter:none;z-index:8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 .5px rgba(255,255,255,.22),0 12px 28px -10px rgba(0,0,0,.9)}
.cx-say::after{background:#1A1A22;box-shadow:inset -.5px -.5px 0 rgba(255,255,255,.22)}
.cx-say em{font-size:11px;color:#C9D6FF;letter-spacing:.04em}
.cx-face.job,.cx-face.in{z-index:6}
.cx-face.in .cx-say{bottom:auto;top:calc(100% + 10px);transform-origin:50% 0}
.cx-face.in .cx-say::after{top:auto;bottom:100%;translate:-50% 50%;box-shadow:inset .5px .5px 0 rgba(255,255,255,.22)}

/* growth rings: kept fixes stay on the edge; a sealed layer is a fine glowing ring inside the expanded brand */
.cx-mark.kept{stroke:url(#cxWB);stroke-width:.7;filter:drop-shadow(0 0 1px rgba(201,214,255,.8))}
.cx-layer{fill:none;stroke:url(#cxWB);stroke-width:.3;opacity:.55;filter:drop-shadow(0 0 1px rgba(143,162,255,.8))}
.cx-grow{fill:none;stroke:#C9D6FF;stroke-width:.3}
.cx-people .cx-core{transition:scale .9s var(--cv-ease)}

/* the logo slider sits bottom left of "How it works", fading out to the right toward the people */
#cx .cx-logos{margin-top:auto;width:100%;border:0}
#cx .cx-logos .marquee{padding:10px 0;-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 45%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,#000 45%,transparent 100%)}
#cx .cx-logos .set{gap:56px;padding-right:56px}
#cx .cx-credit{margin-top:14px}
@media (max-width:1000px){ #cx .cx-logos{margin-top:22px} }
#cx .cx-logos .marquee{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 45%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 45%,transparent 100%)}
#cx .cx-logos-cap{font:300 14px/1.4 var(--font);color:var(--cv-mute);margin-bottom:6px}

/* scene 1: a film window in place of the two paragraphs, with the people behind it as an avatar stack */
.cv-shot{position:relative;margin:0;aspect-ratio:16/10;border-radius:20px;overflow:hidden;background:#0b0b0d;box-shadow:var(--hair),0 40px 90px -50px rgba(var(--cr-rgb),.5)}
.cv-shot video{width:100%;height:100%;object-fit:cover;display:block}
.cv-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.65));pointer-events:none}
.cv-shot-cap{position:absolute;left:14px;bottom:14px;z-index:1;display:flex;align-items:center;gap:12px;padding:6px 14px 6px 6px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05));-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4),inset 0 0 0 .5px rgba(255,255,255,.26);font:300 13px/1 var(--font);color:#fff}
.cv-stack{display:flex;align-items:center}
.cv-stack img{width:26px;height:26px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px #15151b}
.cv-stack img+img{margin-left:-8px}
.cv-stack b{display:grid;place-items:center;width:26px;height:26px;margin-left:-8px;border-radius:50%;background:#1d1d26;box-shadow:0 0 0 1.5px #15151b;font:400 10px/1 var(--font);color:#DCE4FF}
/* larger supporting text (the user, 2026-10-06) */
.cv-stats span{font-size:clamp(15px,1.15vw,17px);max-width:28ch;margin-top:12px}
.cv-shot-cap{font-size:15px;padding:7px 16px 7px 7px;gap:14px}
.cv-stack img,.cv-stack b{width:30px;height:30px}
.cv-stack b{font-size:11px}
#cx .cx-logos-cap{font-size:clamp(16px,1.25vw,19px);margin-bottom:10px}
.cv-next{font-size:13.5px}
/* the rail no longer prints its label over the content; it shows on hover */
.cv-rail button.on span{opacity:0;transform:translateX(6px)}
.cv-rail:hover button span{opacity:1;transform:none}

/* the stat numbers: extra light (Helvetica Neue UltraLight, the lightest real cut on the site) and rolled in like an odometer */
.cv-stats b{font-family:"Helvetica Neue HC","Helvetica Neue",sans-serif;font-weight:100;letter-spacing:-.04em;background:none;-webkit-text-fill-color:currentColor;display:flex;line-height:1}
.cv-stats .roll{display:inline-block;height:1em;overflow:hidden;line-height:1}
.cv-stats .roll-strip{display:flex;flex-direction:column}
.cv-stats .roll-strip span{height:1em;line-height:1}
.cv-stats .roll-fix{display:inline-block;line-height:1}
/* the label rule (.cv-stats span) must not reach the digits */
.cv-stats b span{font-size:inherit;margin:0;max-width:none;color:inherit}
.cv-stats b .roll,.cv-stats b .roll-fix{display:inline-block}
.cv-stats b .roll-strip{display:flex}
.cv-stats b .roll-strip span{display:block}
.cv-stats b > span{color:var(--c,inherit)}
.fit-foot{justify-content:flex-end}

/* ---------- fit cards: a picture behind each glass (the user, 2026-10-06: "place images behind them so the frozen glass looks good") ----------
   The site's own work sits under each card; the card's backdrop blur turns it into coloured frost. The image is a sibling, not a child,
   so the glass can blur it. A dark wash low on the face keeps the copy legible. */
.fit-cell{position:relative;display:flex;border-radius:22px;isolation:isolate;overflow:hidden}
.fit-cell .fit-card{flex:1;z-index:1}
.fit-art{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;border-radius:22px;opacity:.9;pointer-events:none;
  transform:scale(1.06);transition:opacity .6s var(--cv-ease),transform .9s var(--cv-ease)}
.fit-cell .fit-card{background:radial-gradient(120% 140% at 28% 0%,rgba(var(--cr-rgb),.14),transparent 60%),
  linear-gradient(180deg,rgba(255,255,255,.08),rgba(10,10,14,.28) 42%,rgba(10,10,14,.62));
  -webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7)}
.fit-cell .fit-card:hover{background:radial-gradient(120% 140% at 28% 0%,rgba(var(--cr-rgb),.24),transparent 62%),
  linear-gradient(180deg,rgba(255,255,255,.1),rgba(10,10,14,.24) 42%,rgba(10,10,14,.58))}
.fit-cell:hover .fit-art{opacity:1;transform:scale(1.1)}
.fit-cell .fit-card p{color:rgba(244,242,247,.78)}

/* ---------- services: the title rides in the pinned panel with the six worlds (the user, 2026-10-06: "the title for this section place in
   the same section as the scroll"). The head moved into .stage-pin above the list, so it holds with the stage instead of scrolling away first;
   sizes are height-aware so head + six words fit one viewport. ---------- */
.stage-side{display:flex;flex-direction:column;min-width:0}
.stage-head-in{max-width:none;margin-bottom:clamp(18px,3.4svh,40px)}
.stage-head-in .eyebrow{margin-bottom:clamp(10px,1.6svh,18px)}
.stage-head-in h2{font-size:clamp(28px,min(2.8vw,4.8svh),46px);line-height:1.06}
.stage-head-in .stage-lede{margin-top:clamp(10px,1.6svh,16px);font-size:clamp(13.5px,1.7svh,15.5px);max-width:46ch}
.stage-side .world-word{font-size:clamp(30px,min(3.6vw,5.4svh),58px)}
@media (max-height:760px){ .stage-head-in .stage-lede{display:none} }
@media (max-width:640px){
  .stage-side{display:contents}
  .stage-head-in{order:-2;margin-bottom:0}
  .stage-head-in .stage-lede{display:none}
  .stage-side .world-word{font-size:clamp(24px,7.4svw,32px)}
}

/* fit cards, frost pass two (the user, 2026-10-06: "more frozen glass with the image behind it so text is visible"): a milkier pane with a
   deeper blur and a fine grain, so the picture reads as colour through ice, and a darker fall behind the copy so it stays legible. */
.fit-cell .fit-card{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.07) 34%,rgba(14,12,20,.42) 64%,rgba(10,10,14,.7));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 14px 30px -16px rgba(255,255,255,.28),inset 0 0 0 .5px rgba(255,255,255,.26),0 30px 70px -30px rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(34px) saturate(1.9) brightness(1.05);backdrop-filter:blur(34px) saturate(1.9) brightness(1.05)}
.fit-cell .fit-card:hover{background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.09) 34%,rgba(14,12,20,.4) 64%,rgba(10,10,14,.68))}
.fit-cell .fit-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.fit-art{opacity:1}
.fit-cell .fit-card h3,.fit-cell .fit-card p,.fit-cell .fit-card li{text-shadow:0 1px 14px rgba(0,0,0,.45)}
.fit-cell .fit-card p{color:rgba(244,242,247,.86)}

/* ---------- header gradient (the user, 2026-10-06, a six-stop swatch: "this colour is better as the linear gradient ... on the header
   text"): Alice Blue through periwinkle to deep lilac, on the gradient words of every heading. The rest of the accent (--cr-grad on dots,
   meters, stats, the ticker) is untouched. ---------- */
:root{--hd-grad:linear-gradient(90deg,#E6F2FF 0%,#CCDCFF 20%,#B3BEFF 40%,#9A99F2 60%,#8B79D9 80%,#805EBF 100%)}
.edition h1 em,.edition h2 em,.cv-title em,.cv-sub em,.fit-card h3 em{background-image:var(--hd-grad)}

/* fit cards, frost pass three (the user, 2026-10-06: "darker opacity so text is more clear"): the same frost and grain over a deeper smoked
   tint, and the picture behind turned down, so the colour still glows through but the copy sits on dark glass. */
.fit-cell .fit-card{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02) 22%),
  linear-gradient(180deg,rgba(10,9,16,.42),rgba(10,9,16,.58) 40%,rgba(8,8,12,.8))}
.fit-cell .fit-card:hover{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03) 22%),
  linear-gradient(180deg,rgba(10,9,16,.36),rgba(10,9,16,.52) 40%,rgba(8,8,12,.76))}
.fit-art{opacity:1}
.fit-cell:hover .fit-art{opacity:1}
.fit-cell .fit-card p{color:rgba(244,242,247,.9)}
/* the picture must stay at opacity 1: below 1 Chromium composites it apart and the card's backdrop blur stops reaching it (the sharp lily).
   So the dimming is done in the glass: the backdrop is blurred AND darkened. */
.fit-cell .fit-card{-webkit-backdrop-filter:blur(34px) saturate(1.7) brightness(.78);backdrop-filter:blur(34px) saturate(1.7) brightness(.78)}
.fit-cell:hover .fit-card{-webkit-backdrop-filter:blur(34px) saturate(1.8) brightness(.9);backdrop-filter:blur(34px) saturate(1.8) brightness(.9)}

/* services, second move (the user, 2026-10-06: "remove this text and place the text header above the image to the right"): the lede is
   gone and the eyebrow + title sit in .stage-view over the film; the six worlds hold the left column alone. On phones the film column
   already leads, so the head lands above the film there too. */
.stage-view .stage-head-in{margin-bottom:clamp(16px,2.6svh,28px)}
.stage-side .world-word{font-size:clamp(38px,min(4.2vw,6.4svh),64px)}
@media (max-width:640px){
  .stage-head-in{order:0}
  .stage-side .world-word{font-size:32px}
}

/* ---------- the Services title, larger and two weights (the user, 2026-10-06: "make this text larger and blend with extra light font
   version so it shows character"): "Six services." in Stack Light, "One collective." in Stack Extralight on its own line. ---------- */
.stage-head-in h2{font-family:var(--title);font-weight:300;font-size:clamp(38px,min(3.9vw,6.6svh),64px);line-height:1.02;letter-spacing:-.03em}
.stage-head-in h2 em{display:block;width:fit-content;font-weight:200;font-style:normal}

/* services, third move (the user, 2026-10-06: "remove this ... just have small text saying service pathways, to the left above the text"):
   the big title is gone; a small caps kicker (the section's h2, so the landmark keeps its name) sits over the six worlds. */
.edition h2.stage-kicker,.stage-kicker{margin:0 0 clamp(14px,2.4svh,26px);font:500 11px/1.2 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--cv-faint,rgba(244,242,247,.45))}
@media (max-width:640px){ .stage-kicker{order:-2;margin-bottom:0} }

/* ---------- the collective's numbers (the user, 2026-10-06: "make this text white with a google icon ... on the same line"): white digits,
   a Material Symbols icon (groups / task_alt / sports_esports, in the subset) inline before each number, and each label held to one line. */
.cv-stats .st-top{display:flex;align-items:center;gap:clamp(10px,1vw,16px)}
.cv-stats .st-top .ms{display:inline-block;margin:0;max-width:none;flex:none;font-size:clamp(26px,min(2.6vw,4.4svh),42px);color:#F4F2F7;
  font-variation-settings:"FILL" 0,"wght" 200,"GRAD" -25,"opsz" 40}
.cv-stats b,.cv-stats b > span,.cv-stats b span{color:#F4F2F7;--c:#F4F2F7;-webkit-text-fill-color:#F4F2F7;background:none}
.cv-stats li > span{white-space:nowrap;max-width:none;color:rgba(244,242,247,.72)}
@media (max-width:640px){ .cv-stats li > span{white-space:normal} .cv-stats .st-top{gap:6px} .cv-stats .st-top .ms{font-size:22px} }

/* ---------- the hero title, larger (the user, 2026-10-06: "make this larger too"): about a third up on desktop, a touch on phones ---------- */
.dispB{font-size:clamp(40px,calc(988 * var(--fx) / 12.4),76px)}
@media (max-width:640px){ .dispB{font-size:clamp(34px,9.8vw,42px)} }
/* phones: the title on two lines like the desktop (the user, 2026-10-27: "make this 2 lines also like desktop on the mobile"). The longer
   line, "for creative transformation.", is ~11.7 of its font size wide, so the size follows the screen and keeps ~10 px clear each side. */
@media (max-width:640px){ #heroTitle{font-size:clamp(22px,calc((100vw - 48px) / 11.8),42px)} #heroTitle em{white-space:nowrap} }
/* phones: three columns are ~120 px, so the icon sits over its number there (inline from 641 px up) */
@media (max-width:640px){ .cv-stats .st-top{flex-direction:column;align-items:flex-start;gap:8px} .cv-stats b{font-size:clamp(26px,7.6vw,34px)} }
/* phones: every label on two lines (the user, 2026-10-26: the 55bn line ran to four while the other two take two). The longest label gets
   the widest column and the labels scale with the screen, so all three break into two lines from 360 px to 640 px. */
@media (max-width:640px){ .cv-stats{grid-template-columns:minmax(0,1fr) minmax(0,1.17fr) minmax(0,1.34fr)} .cv-stats li:last-child{padding-right:0}
  .cv-stats li > span{font-size:clamp(11.5px,calc((100vw - 76px) * .041),15px)} }

/* fit card titles on two lines at most (the user, 2026-10-06: "place this on max 2 lines"): the card is a size container, the title scales
   with the card's own width, and the gradient line never wraps ("opening a new chapter." broke over two lines on narrower windows). */
.fit-card{container-type:inline-size}
.fit-card h3{font-size:clamp(20px,min(8cqi,4.4svh),34px)}
.fit-card h3 em{white-space:nowrap}

/* ---------- the service words, no blur on the scroll (the user, 2026-10-06: "remove the blur effect too on the text scroll"): the wave's
   flare and ghost copies of each letter (and their lilac drop-shadow glow), the bloom on the catch and the glow on hover are off for the
   six words, so a word simply turns from the waiting grey to the chrome as the scroll reads it. The other headings keep their sweep. */
.world-word .ch.lit::before,.world-word .ch.lit::after{content:none!important}
.world-word .ww.catch{animation:catch-band 1.3s cubic-bezier(.3,.7,.2,1) both}
.world-word:hover .ww,.world-word:focus-visible .ww{filter:none}

/* ---------- all-caps labels, light (the user, 2026-10-06: "make this text light not bold for all caps headers"): every small caps header
   (the scene labels, eyebrows, Service pathways, the brief's label) in Helvetica Neue Light; a point larger and a shade brighter so the thinner
   strokes hold. "The collective" label now reads "About". */
.cv-caps,.eyebrow,.edition h2.stage-kicker,.stage-kicker,.cx-ph-h,.brief-rows::before{font-family:var(--font);font-weight:300;font-size:12px;letter-spacing:.22em;color:rgba(244,242,247,.6)}
/* Helvetica Light still read heavy at 12 px with this tracking, so the caps labels wear the title face's Extralight (Stack), a touch larger */
.cv-caps,.eyebrow,.edition h2.stage-kicker,.stage-kicker,.cx-ph-h,.brief-rows::before{font-family:var(--title);font-weight:200;font-size:13px;letter-spacing:.24em;color:rgba(244,242,247,.72)}

/* ---------- the theatre, embedded after "Who it's for" (the user, 2026-10-06). The section is as tall as the theatre's document (set by
   capital.js from theatre-embed.js) and holds the frame sticky for a viewport, so scrolling this page scrolls the theatre through its acts
   with all of its own effects. ---------- */
.theatre-embed{position:relative;height:400vh;background:#000}
.te-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.te-stick iframe{display:block;width:100%;height:100%;border:0;background:#000}

/* ---------- Services follows the collective directly (the user, 2026-10-06: "a lot of empty space on the service pathways section, it
   should scroll neatly to that section"): no top padding or rule above the pin, and capital.js lands one wheel gesture from How it works
   exactly on its top, so the pinned panel fills the screen at once. ---------- */
#work.stage-section{padding-top:0;border-top:0}
#work .stage-anchor{scroll-margin-top:-110px}   /* site pass L2: cancels html{scroll-padding-top:110px} (Lenis and the native jump add the two), so Services lands with #work at 0, where the pin locks */

/* "Work with us if you're..." smaller (the user, 2026-10-06: "this is too big"): inside .edition it had taken the edition h2 (Avant Garde
   up to 76 px). It wears the collective's heading again, Stack Extralight, a size down. */
.edition #who h2.cv-sub{font-family:var(--title);font-weight:200;font-size:clamp(28px,min(3vw,5.2svh),46px);line-height:1.06;letter-spacing:-.02em}

/* fit cards, liquid pass (the user, 2026-10-06: "reduce the colour image sharpness a bit so it looks a similar liquid glass"): the grain
   goes and the picture melts further into the pane (a deeper blur), and the face takes the dock's liquid-glass light: a bright lip on the
   top edge, a soft sheen falling from it, a thin light rim. */
.fit-cell .fit-card::before{content:none}
.fit-cell .fit-card{-webkit-backdrop-filter:blur(56px) saturate(1.6) brightness(.8);backdrop-filter:blur(56px) saturate(1.6) brightness(.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 18px 34px -20px rgba(255,255,255,.32),inset 0 0 0 .5px rgba(255,255,255,.28),inset 0 -24px 40px -30px rgba(var(--cr-rgb),.35),0 30px 70px -30px rgba(0,0,0,.8)}
.fit-cell:hover .fit-card{-webkit-backdrop-filter:blur(56px) saturate(1.7) brightness(.9);backdrop-filter:blur(56px) saturate(1.7) brightness(.9)}
.fit-art{transform:scale(1.15)}
.fit-cell:hover .fit-art{transform:scale(1.2)}

/* the header links, quieter (the user, 2026-10-06: "make the labels here low opacity"): The Theatre / Services / Studio / Let's Chat sit at
   half strength and come up to full on hover or focus; the divider between each pair dims with them. */
.tab.bar .tab-nav a{color:rgba(247,248,250,.5);transition:color .25s ease}
.tab.bar .tab-nav a:hover,.tab.bar .tab-nav a:focus-visible{color:#F7F8FA}
@media (min-width:641px){ .tab.bar .tab-side a:first-child::after{opacity:.35} }

/* fit cards, title and text (the user, 2026-10-06: "only two lines of text max and give clean spacing between both"): the copy is cut to
   two lines, the line count is held at two as a guard, and one even 16 px gap sits between the two-line title and the two-line text. */
.fit-card h3{margin-bottom:0}
.fit-cell .fit-card p{margin-top:16px;font-size:15px;line-height:1.5;text-wrap:pretty;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}

/* ---------- 2026-10-06, later round ---------- */
/* the hero's second line on the new header gradient ("this colour gradient isn't updated"): Alice Blue to deep lilac under the moving
   catch band, as every other heading's gradient words */
.dispB em{background-image:var(--catch-band),var(--hd-grad)}

/* the header links spread symmetrically ("spread these out on both sides in the best positioning"): each pair centred in its own half of
   the bar, either side of the notch, with an even gap, so The Theatre / Services mirror Studio / Let's Chat about the logo */
@media (min-width:1024px){
  .tab.bar .tab-l,.tab.bar .tab-r{justify-content:center;padding-inline:0;gap:clamp(24px,3vw,48px)}
  .tab.bar .tab-side a:first-child::after{right:calc(clamp(24px,3vw,48px) / -2 - 1px)}
}

/* the chat bar, subtly smaller (same request): 52 px tall at rest (was 58), 40 px buttons (was 44), 14.5 px text; the textarea grows to four
   lines (app.js autosize) and only then shows a thin scrollbar. Touch screens keep 16 px text in the stage so iOS does not zoom the page. */
#hero .gbar{min-height:calc(52 * var(--hs,1));padding:calc(5 * var(--hs,1)) calc(5 * var(--hs,1)) calc(5 * var(--hs,1)) calc(20 * var(--hs,1));border-radius:calc(26 * var(--hs,1))}
#hero .gbar textarea{font-size:calc(14.5 * var(--hs,1));line-height:1.45;min-height:calc(40 * var(--hs,1));padding:calc(10 * var(--hs,1)) 0;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:rgba(244,242,247,.3) transparent}
#hero .gbar textarea::-webkit-scrollbar{width:4px}
#hero .gbar textarea::-webkit-scrollbar-thumb{background:rgba(244,242,247,.3);border-radius:2px}
#hero .gbar .ui-btn.icon{width:calc(40 * var(--hs,1));height:calc(40 * var(--hs,1))}
#hero .gbar .ui-btn.icon svg{width:calc(17 * var(--hs,1));height:calc(17 * var(--hs,1))}
#hero .gbar{align-items:flex-end}
/* phones (his iPhone, 2026-10-08: "chatbox dimension is cutoff"): --hs lives on .stage from 641 px up only, so below it the sizes above fell
   back to a unitless 1 and were dropped: the bar collapsed to 25 px, the buttons to 2 px. 1px here gives the bar 52 / 40 / 17 px; the textarea
   holds 16 px so iOS does not zoom the page on focus. */
@media (max-width:640px){
  #hero .chat{--hs:1px}
  #hero .gbar textarea{font-size:16px}
}


/* the hero's logo pill: a touch bigger than Ammar's (46 px lockup, 236 x 72), well under the live site's (50 px, 307 x 84); the scrolled bar keeps the live site's own notch */
@media (min-width:641px){
  .tab-lockup{height:calc(46 * var(--hs,1))}
  .tab.bar{--w0:calc(236 * var(--hs,1));--h0:calc(72 * var(--hs,1))}
  .tab.bar .tab-lockup{height:calc(46 * var(--hs,1) + (40px - 46 * var(--hs,1)) * var(--p,1))}
}

/* the lounge heading stays as on the live site: no gradient on the second line */
#conversationTitle em{background-image:none;-webkit-text-fill-color:inherit;color:inherit}

/* ---------- HIS NOTE 2026-10-14 ("make it like this", his picture of the hero rail): no borders on the starters or the paperclip, a cleaner
   bar and button. The three starters are plain words with thin dividers; the bar is a quieter glass with a thin light edge (no lilac rim, no
   glow); the paperclip is a bare icon; the send is a soft grey disc with a dark arrow. The bar and its buttons live in styles.css (every chat
   bar on every page, his "all needs to be same"); on the stage the chips stay buttons, they are answers there. */
#hero .gchips{gap:0;align-items:center}
#hero .gchips .ui-btn,#hero .gchips .ui-btn:hover,#hero .gchips .ui-btn:not(.go):hover,#hero .gchips .ui-btn.pressed:not(:disabled),#hero .gchips .ui-btn:not(:disabled):active{
  background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;filter:none}
#hero .gchips .ui-btn{padding:0 calc(18 * var(--hs,1px));border-radius:0;font-size:calc(15 * var(--hs,1px));font-weight:400;color:rgba(255,255,255,.9);text-shadow:0 1px 10px rgba(0,0,0,.35)}
#hero .gchips .ui-btn:hover{color:#fff;text-shadow:0 0 12px rgba(255,255,255,.35)}
#hero .gchips .ui-btn.pressed:not(:disabled),#hero .gchips .ui-btn:not(:disabled):active{color:rgba(255,255,255,.6);text-shadow:none}
#hero .gchips .ui-btn::before,#hero .gchips .ui-btn::after{display:none}
#hero .gchips .ui-btn+.ui-btn::before{display:block;inset:auto;left:0;top:50%;width:1px;height:calc(15 * var(--hs,1px));padding:0;border-radius:0;opacity:1;
  transform:translateY(-50%);background:rgba(255,255,255,.3);-webkit-mask:none;mask:none}
@media (max-width:640px){ #hero .gchips .ui-btn{padding:0 12px;font-size:13.5px} #hero .gchips .ui-btn+.ui-btn::before{height:13px} }


/* HIS NOTE 2026-10-14 on the hero ticker ("a lot of the text here different sizes, should be the same"): the numbers, the lines and the labels
   all at the lines' size, in the one title face. HIS SECOND NOTE the same night ("why some of colours different ... should all be the same"):
   one colour too, the lines' ink; the numbers' chrome and the labels' mute are gone (the grey and the gradient read as smaller).
   HIS THIRD ("why is it so big, SMALLER SIZE"): 16 px, 14 px on phones. HIS FOURTH ("big spaces between words, after the 6 or 50+"):
   the 12 px gap was between every piece, dot, number and label alike; now the dot keeps its 12 px (9 on phones) and the number sits a
   word space (.25em) from its label, one phrase. */
.tk b,.tk-say b,.tk span{font-family:var(--title);font-weight:200;font-size:16px;letter-spacing:-.02em;line-height:1;
  background:none;-webkit-text-fill-color:currentColor;color:var(--cv-ink)}
.tk{gap:0}.tk-dot{margin-right:12px}.tk b+span{margin-left:.25em}
@media (max-width:700px){ .tk b,.tk-say b,.tk span{font-size:14px} .tk{gap:0}.tk-dot{margin-right:9px} }

/* THE TICKER LEAVES BEFORE THE BAR (site pass S2): a flick of the trackpad left the hero's ticker resting under the bar at 720 px, its line
   printed across the nav words and CREATIVE. It fades out on the scroll itself, no script, as the hero's foot rises from 220 px to 110 px below
   the top (its line ends clear of the bar). The timeline is the hero's (the ticker's own view() would track the hero, which clips and never
   scrolls), with no inset (the page's 110 px scroll padding would shift it). Only where scroll timelines exist: without the guard a browser
   that knows animation but not animation-timeline would run the fade once and leave the ticker hidden. */
@supports (animation-timeline:view()){
  .hero{view-timeline:--hero block;view-timeline-inset:0px}
  .hero .ticker{animation:tk-out linear both;animation-timeline:--hero;animation-range:cover calc(100% - 220px) cover calc(100% - 110px)}
  @keyframes tk-out{to{opacity:0}}
}