/* =====================================================================
   1. TOKENS — dark mode (the only mode defined for now)
   ===================================================================== */
:root{
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);

  /* surfaces */
  --bg-void:#08080A;        /* page base */
  --bg-surface:#121215;     /* cards, rails */
  --bg-raised:#1C1C21;      /* hover state, nested cards */
  --hairline:rgba(255,255,255,0.08);

  /* accent — a pointing device, ~1 moment per viewport */
  --accent:#ED1A6D;         /* display type, fills, active states */
  --accent-lift:#FF5C93;    /* accent for ANY text under 18px */
  --accent-glow:rgba(237,26,109,0.18); /* radial washes, focus rings */
  --on-accent:#08080A;      /* text on an accent fill. Always. Never white. */

  /* ink */
  --ink:#F4F2F1;
  --ink-muted:#9A9699;
  --ink-faint:#5E5A5D;

  /* families */
  --font-display:'Inter Tight','Helvetica Neue',Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* type scale */
  --fs-hero:clamp(4rem,12vw,14rem);
  --fs-section:clamp(2.5rem,6vw,6rem);
  --fs-title:clamp(1.75rem,2.6vw,2.5rem);   /* added: card-level display */
  --fs-body:1.05rem;
  --fs-meta:0.75rem;

  /* radii */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-pill:999px;

  /* motion (mirrored from MOTION in JS — JS is the source of truth) */
  --ease:cubic-bezier(0.22,1,0.36,1);
  --dur-fast:0.3s; --dur-base:0.6s; --dur-slow:1.1s;
  --stagger-children:0.06s; --stagger-siblings:0.12s;
  --reveal-distance:24px;

  /* layout */
  --gutter:clamp(20px,4vw,64px);

  /* scrims + fixed-on-accent ink (theme-aware) */
  --scrim-menu:rgba(8,8,10,0.97);
  --scrim-bar:rgba(18,18,21,0.86);
  --scrim-top:rgba(8,8,10,0.72);
  --scrim-chip:rgba(8,8,10,0.45);
  --cursor-ring:rgba(255,255,255,0.28);
  --accent-on-dark:#FF5C93;
  --drop:rgba(0,0,0,0.6);
}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--bg-void);color:var(--ink)}
body{font-family:var(--font-display);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--accent);color:var(--on-accent)}
h1,h2,h3,p{margin:0}

/* =====================================================================
   2. TYPE
   ===================================================================== */
.t-hero,.t-section,.t-title{font-family:var(--font-display);letter-spacing:-0.04em;line-height:0.9;color:var(--ink);text-wrap:balance;margin:0}
.t-hero{font-size:var(--fs-hero);font-weight:800}
.t-section{font-size:var(--fs-section);font-weight:700}
.t-title{font-size:var(--fs-title);font-weight:700;line-height:0.95}
.t-body{font-size:var(--fs-body);font-weight:400;line-height:1.6;color:var(--ink-muted);max-width:56ch}
.t-meta{font-family:var(--font-mono);font-size:var(--fs-meta);font-weight:400;text-transform:uppercase;letter-spacing:0.12em;line-height:1.4;color:var(--ink-faint)}
.t-accent{color:var(--accent)}            /* display sizes only (>=18px). Audited. */
.on-accent{background:var(--accent);color:var(--on-accent);font-weight:600;font-size:max(1rem,16px)}

/* reveal: hidden until motion runs. Reduced motion = instantly visible. */
[data-reveal]{opacity:0}
[data-rm="true"] [data-reveal]{opacity:1!important;transform:none!important}
[data-rm="true"] *,[data-rm="true"] *::before,[data-rm="true"] *::after{transition-duration:0.001s!important;animation:none!important}
html[data-rm="true"]{scroll-behavior:auto}

/* =====================================================================
   3. PRIMITIVES
   ===================================================================== */

/* ---- Button ---- */
.btn{
  --btn-py:0.8rem; --btn-px:1.35rem;
  --edge:0 0 0 0 transparent; --halo:0 0 0 0 transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:0.6em;
  padding:var(--btn-py) var(--btn-px);border:0;border-radius:var(--r-pill);
  font:600 1rem/1 var(--font-display);letter-spacing:-0.01em;white-space:nowrap;
  text-decoration:none;cursor:pointer;position:relative;outline:0;
  box-shadow:var(--edge),var(--halo);
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),filter var(--dur-fast) var(--ease);
  -webkit-tap-highlight-color:transparent;will-change:transform;
}
.btn--lg{--btn-py:1.05rem;--btn-px:1.9rem;font-size:1.125rem}
.btn__icon{flex:none;transition:transform var(--dur-fast) var(--ease)}
.btn:hover .btn__icon,.btn[data-state="hover"] .btn__icon{transform:translate(2px,-2px)}

.btn--primary{background:var(--accent);color:var(--on-accent)}
a.btn--primary:hover,a.btn--primary:focus-visible{color:var(--on-accent)}
.btn--primary:hover,.btn--primary[data-state="hover"]{filter:brightness(1.1);--halo:0 0 56px 0 var(--accent-glow)}
.btn--secondary{background:var(--bg-surface);color:var(--ink);--edge:inset 0 0 0 1px var(--hairline)}
.btn--secondary:hover,.btn--secondary[data-state="hover"]{background:var(--bg-raised)}
.btn--ghost{background:transparent;color:var(--ink-muted)}
.btn--ghost:hover,.btn--ghost[data-state="hover"]{background:var(--bg-surface);color:var(--ink)}

.btn:active,.btn[data-state="pressed"]{filter:brightness(0.9)}
.btn--secondary:active,.btn--secondary[data-state="pressed"]{background:var(--bg-void)}
.btn--ghost:active,.btn--ghost[data-state="pressed"]{background:var(--bg-raised);filter:none}
.btn:focus-visible,.btn[data-state="focus"]{outline:2px solid var(--accent-lift);outline-offset:3px;--halo:0 0 0 8px var(--accent-glow)}

.btn:disabled,.btn[data-state="disabled"]{
  background:var(--bg-surface);color:var(--ink-faint);--edge:inset 0 0 0 1px var(--hairline);--halo:0 0 0 0 transparent;
  filter:none;cursor:not-allowed;pointer-events:none}
.btn--ghost:disabled,.btn--ghost[data-state="disabled"]{background:transparent;--edge:0 0 0 0 transparent}

/* ---- Chip ---- */
.chip{
  display:inline-flex;align-items:center;gap:0.65em;padding:0.55rem 0.9rem;border:0;border-radius:var(--r-pill);
  background:transparent;color:var(--ink-muted);box-shadow:inset 0 0 0 1px var(--hairline);
  font:500 var(--fs-meta)/1 var(--font-mono);text-transform:uppercase;letter-spacing:0.12em;white-space:nowrap;outline:0;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.chip__dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
button.chip{cursor:pointer}
.chip[data-interactive]:hover,.chip[data-state="hover"]{background:var(--bg-surface);color:var(--ink)}
.chip[aria-pressed="true"],.chip[data-state="selected"]{background:var(--bg-raised);color:var(--ink)}
.chip:focus-visible,.chip[data-state="focus"]{box-shadow:inset 0 0 0 1px var(--hairline),0 0 0 4px var(--accent-glow);outline:2px solid var(--accent-lift);outline-offset:2px}
.chip--signal{color:var(--accent-lift);background:var(--accent-glow)}   /* text <18px => accent-lift */
.chip:disabled,.chip[data-state="disabled"]{color:var(--ink-faint);background:transparent;cursor:not-allowed;pointer-events:none}

/* ---- Card ---- */
.card{
  --mx:50%;--my:0%;
  position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:1.25rem;
  padding:1.5rem;border-radius:var(--r-lg);background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--hairline);
  color:inherit;text-decoration:none;text-align:left;font:inherit;border:0;outline:0;
  transition:background var(--dur-base) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.card--nested{background:var(--bg-raised);border-radius:var(--r-md);padding:1.25rem}
.card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx) var(--my),var(--accent-glow),transparent 65%);
  transition:opacity var(--dur-base) var(--ease)}
.card[data-interactive]{cursor:pointer}
.card[data-interactive]:hover,.card[data-state="hover"]{background:var(--bg-raised)}
.card--nested[data-interactive]:hover,.card--nested[data-state="hover"]{background:var(--bg-raised)}
.card[data-interactive]:hover::before,.card[data-state="hover"]::before{opacity:1}
.card:focus-visible,.card[data-state="focus"]{outline:2px solid var(--accent-lift);outline-offset:3px;box-shadow:inset 0 0 0 1px var(--hairline),0 0 0 8px var(--accent-glow)}
.card__head{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.card__cta{color:var(--ink-faint);transition:color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);display:inline-flex}
.card:hover .card__cta,.card[data-state="hover"] .card__cta{color:var(--ink);transform:translate(2px,-2px)}
.card__media{aspect-ratio:16/10;border-radius:var(--r-md);background:var(--bg-void);box-shadow:inset 0 0 0 1px var(--hairline);overflow:hidden}
.card__body{display:flex;flex-direction:column;gap:0.75rem}
.card__foot{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:auto}

/* ---- SectionHeading ---- */
.sh{display:grid;gap:clamp(1.25rem,2.4vw,2.25rem)}
.sh__meta{display:flex;align-items:center;gap:1rem}
.sh__rule{flex:1;height:1px;background:var(--hairline)}
.sh__title{padding-bottom:0.08em}
.sh__desc{max-width:52ch}
.sh__title em{font-style:normal;color:var(--accent)}  /* <em> in a heading = the one accent word */

/* =====================================================================
   SYSTEM ADDITIONS (hero pass)
   ===================================================================== */
:root{
  --fs-wordmark:clamp(8rem,45vw,44rem);   /* see note: 22vw cannot bleed a 4-letter word */
  --fs-headline:clamp(2.25rem,5vw,5.5rem);
  --wm-top:-0.02em; --wm-pad:0px;
}
.btn--ghost.btn--outlined{--edge:inset 0 0 0 1px var(--hairline);color:var(--ink)}
.btn--ghost.btn--outlined:hover,.btn--ghost.btn--outlined[data-state="hover"]{background:var(--bg-surface)}
.wrap{max-width:1600px;margin:0 auto;padding:0 var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{position:sticky;top:0;z-index:0;height:100svh;min-height:560px;overflow:hidden;background:var(--bg-void)}
.layer{position:absolute;inset:0;pointer-events:none;will-change:transform}
.l-wm{z-index:1}.l-glow{z-index:2}.l-pt{z-index:3}.l-hl{z-index:4}.l-st{z-index:5}.l-ch{z-index:5}

/* 1 — wordmark */
.wm{display:flex;justify-content:center;padding-top:var(--wm-pad)}
.wm__word{margin-top:var(--wm-top);font-family:var(--font-display);font-weight:800;font-size:var(--fs-wordmark);
  line-height:0.9;letter-spacing:-0.04em;color:var(--accent);white-space:nowrap;user-select:none}

/* glow */
.glow{position:absolute;--g:min(110vw,95svh);width:var(--g);height:var(--g);
  left:calc(50% - var(--g)/2);top:calc(40% - var(--g)/2);
  background:radial-gradient(closest-side,var(--accent-glow),transparent)}

/* 2 — portrait (bottom-anchored, near-full-height; head rises into the wordmark) */
.l-pt{display:flex;align-items:flex-end;justify-content:center}
.portrait{height:125svh;max-width:100%;aspect-ratio:1021/1200}
.portrait svg,.portrait img{display:block;width:100%;height:100%}
.portrait img{object-fit:contain;object-position:50% 100%}
.portrait svg{object-fit:contain;object-position:50% 100%}

/* 3 — headline */
.hl{position:absolute;left:max(30vw,var(--gutter));bottom:9svh;display:grid;justify-items:start;gap:clamp(1.25rem,2.4vw,2.25rem);pointer-events:auto}
.hl__title{font-size:var(--fs-headline);white-space:nowrap}
.hl__line{display:block;padding:0.06em 0 0.16em;margin:-0.06em 0 -0.16em}   /* room for descenders inside the mask */
.hl__line em{font-style:normal;color:var(--accent)}
.hl__cta{display:flex;flex-wrap:wrap;gap:0.75rem}

/* 4 — floating stat cards */
.stats{position:absolute;left:var(--gutter);bottom:9svh;display:grid;justify-items:start}
.stat{width:clamp(9.5rem,15vw,15rem);padding:1.1rem 1.25rem 1.25rem;gap:0.4rem}
.stat--a{rotate:-3deg;position:relative;z-index:1}
.stat--b{rotate:2deg;position:relative;z-index:2;margin-left:clamp(1.5rem,3.5vw,3.5rem);margin-top:-1rem}
.facts{rotate:2deg;position:relative;z-index:2;width:clamp(13rem,20vw,18rem);margin-left:clamp(1.5rem,3.5vw,3.5rem);margin-top:-1rem}
.facts__head{color:var(--ink);display:block}
.facts__list{list-style:none;margin:0.35rem 0 0;padding:0;display:grid;gap:0.5rem}
.facts__list li{display:flex;align-items:center;gap:0.6rem;font:500 0.95rem/1.3 var(--font-display);color:var(--ink)}
.facts__ico{flex:none;display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:var(--r-sm,8px);
  background:var(--bg-raised);box-shadow:inset 0 0 0 1px var(--hairline);color:var(--ink-muted)}
.facts:hover .facts__ico{color:var(--accent-lift)}
.facts__ico,.facts__ico svg{transition:color var(--dur-fast,0.3s) var(--ease,cubic-bezier(0.22,1,0.36,1))}
.stat .card__body{gap:0.35rem}
.stat__num{display:block;font:800 clamp(3rem,5.4vw,5.25rem)/0.9 var(--font-display);letter-spacing:-0.04em;color:var(--accent);padding-bottom:0.06em}
.stat .t-meta{color:var(--ink-muted);display:block}

/* 5 — right-edge chips */
.chips{position:absolute;right:var(--gutter);top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:0.6rem}
.hero-chip{background:var(--bg-surface)}
.hero-chip svg{flex:none}

/* intro states — hidden until motion runs; reduced motion = shown instantly */
.hero [data-in]{opacity:0}
.hero [data-in="mask"]{opacity:1;clip-path:inset(100% 0 0 0)}
[data-rm="true"] .hero [data-in]{opacity:1!important;clip-path:none!important;transform:none!important;filter:none!important}
[data-rm="true"] .layer{transform:none!important}

/* section below rises over the hero */
.next{position:relative;z-index:1;min-height:110svh;padding:clamp(4rem,9vw,9rem) 0;background:var(--bg-surface);
  border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:inset 0 1px 0 var(--hairline)}

/* review dock (delete when approved) */
.dock{position:fixed;z-index:50;right:var(--gutter);top:calc(env(safe-area-inset-top,0px) + 1rem);display:flex;gap:0.5rem}
.dock .chip{background:var(--bg-surface)}

@media (max-width:820px){
  :root{--fs-wordmark:clamp(8rem,78vw,44rem);--fs-headline:clamp(2rem,8.6vw,3.5rem);--wm-pad:9svh}
  .hl{left:var(--gutter);right:var(--gutter);bottom:14svh}
  .hl__title{white-space:normal}
  .stats{top:30svh;bottom:auto}
  .stat{width:8.75rem}
  .facts{width:12.5rem}
  .facts__list li{font-size:0.85rem;gap:0.5rem}
  .facts__ico{width:1.5rem;height:1.5rem}
  .stat__num{font-size:2.75rem}
  .chips{top:auto;left:0;right:0;bottom:2.5svh;padding:0 var(--gutter);flex-direction:row;justify-content:flex-start;align-items:center;overflow-x:auto;scrollbar-width:none;pointer-events:auto}
  .portrait{height:86svh}
}

/* =====================================================================
   NAVIGATION SYSTEM + CURSOR (global)
   ===================================================================== */
html{scroll-padding-top:0}
.next{padding:0;min-height:0}
.blk{min-height:80svh;padding:clamp(4rem,9vw,8rem) 0;box-shadow:0 -1px 0 var(--hairline)}
.blk:first-child{box-shadow:none}
.blk .sh + *{margin-top:clamp(2.5rem,5vw,4rem)}
@media (min-width:1100px){.next .wrap{padding-left:calc(16px + 248px + clamp(24px,3vw,48px))}}

/* paths: IC / Design manager */
.paths{min-height:100svh;display:flex;align-items:center}
.paths__hint{margin-top:clamp(1.5rem,3vw,2.5rem);color:var(--ink-faint)}
.paths .wrap{width:100%}
.paths__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto)}
.path{box-sizing:border-box;display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;justify-items:start;align-content:start;flex-direction:column;align-items:flex-start;padding:clamp(2rem,6vw,6rem) clamp(1.5rem,4vw,4.5rem) clamp(2rem,6vw,6rem) 0;transition:color var(--dur-fast,0.3s) var(--ease)}
.path + .path{box-shadow:inset 1px 0 0 var(--hairline);padding-left:clamp(1.5rem,4vw,4.5rem);padding-right:0}
.path__mark{position:relative;display:block;width:clamp(5.5rem,11vw,10rem);aspect-ratio:1;color:var(--ink-faint);transition:color 0.3s var(--ease)}
.path__mark svg{display:block;width:100%;height:100%}
.path__dot{position:absolute;right:-0.9rem;bottom:0.35rem;width:clamp(0.9rem,1.6vw,1.4rem);aspect-ratio:1;background:var(--accent);transition:background 0.3s var(--ease)}
.path__title{margin-top:clamp(1.25rem,2.5vw,2rem);font:800 clamp(2.25rem,4.6vw,4.75rem)/0.95 var(--font-display);letter-spacing:-0.04em;color:var(--ink);text-wrap:balance}
.path__body{margin-top:1.25rem;max-width:44ch;font-size:1.05rem;line-height:1.6;color:var(--ink-muted);text-wrap:pretty}
.path__cta{margin-top:clamp(1.75rem,3vw,2.5rem);display:flex;align-self:end}
.path:hover .path__mark,.path[data-on="true"] .path__mark{color:var(--ink-faint)}
.path:hover .path__dot,.path[data-on="true"] .path__dot{background:var(--accent)}
@media (min-width:1100px){.next .paths .wrap{padding-left:var(--gutter)}}
@media (max-width:767px){
  .paths__grid{grid-template-columns:1fr;grid-template-rows:none}
  .path{grid-row:auto;grid-template-rows:none}
  .path{padding:2.5rem 0}
  .path + .path{box-shadow:inset 0 1px 0 var(--hairline);padding-left:0}
}

/* chapter-based case content */
.cshero__headline{max-width:24ch;font:700 clamp(1.5rem,2.6vw,2.25rem)/1.1 var(--font-display);letter-spacing:-0.03em;color:var(--ink);text-wrap:balance}
.cssplit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,5vw,5rem);align-items:start}
.cssplit > .csfig{margin-top:0}
.cssplit--center{align-items:center}

.cssplit__imgs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:1rem;align-items:end}
.cssplit__imgs > .csfig{margin-top:0}
.csdec--sm{align-items:center}
.csdec--sm > .csfig{max-width:var(--sm,50%);justify-self:center}
@media (max-width:760px){.csdec--sm > .csfig{max-width:100%}}
.csfig{margin:clamp(2rem,4vw,3rem) 0 0;display:grid;gap:0.9rem}
.csfig img{display:block;width:100%;height:auto;border-radius:14px;background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--hairline)}
.csfig figcaption{max-width:72ch;font-size:0.9rem;line-height:1.5;color:var(--ink-faint);text-wrap:pretty}
.csblock{margin-top:clamp(2.5rem,5vw,4rem)}
.csh3{margin:0 0 1rem;font:700 clamp(1.35rem,2vw,1.75rem)/1.1 var(--font-display);letter-spacing:-0.03em;color:var(--ink);text-wrap:balance}
.csgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1rem}
.csgrid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.csgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.csgrid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.csgrid--3{grid-template-columns:1fr}}
.cscard,.csqmap__c{position:relative;overflow:hidden}
.cscard::after,.csqmap__c::after{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--accent);pointer-events:none;z-index:1}
.cscard--hl{background:var(--bg-raised);box-shadow:inset 0 0 0 1px var(--accent),0 0 0 6px var(--accent-glow)}
.cscard--hl .cscard__foot{color:var(--accent-lift)}
.csquote{min-height:0}
.csquotes{display:flex;flex-wrap:wrap;justify-content:center}
.csquotes .csquote{flex:0 1 300px;min-height:0;padding:1.25rem 1.5rem;gap:.6rem;justify-content:center;align-items:center;text-align:center}
.csquotes .csquote .csev__text{text-wrap:balance}
.cscard__foot{font-weight:600;color:var(--ink)}
.cslist{margin:0.75rem 0 0;padding-left:1.1rem;display:grid;gap:0.4rem}
.cswhy{margin-top:1.25rem;max-width:60ch;padding-top:1.25rem;box-shadow:0 -1px 0 var(--hairline);font-size:1.05rem;line-height:1.6;color:var(--ink)}
.csdec{margin-top:clamp(3rem,6vw,5rem)}
.csdec:first-of-type{margin-top:0}
.cscallout{padding:clamp(1.5rem,4vw,3rem);border-radius:22px;background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--hairline)}
.cscallout .cssec__head{margin-bottom:1.5rem}
.cstable{margin-top:clamp(2rem,4vw,3rem);overflow-x:auto;border-radius:14px;box-shadow:inset 0 0 0 1px var(--hairline)}
.cstable:focus-visible{outline:2px solid var(--accent-lift);outline-offset:3px}
.cstable table{width:100%;min-width:560px;border-collapse:collapse;font-size:1rem;line-height:1.5}
.cstable th{text-align:left;padding:0.9rem 1.1rem;font:400 var(--fs-meta)/1 var(--font-mono);text-transform:uppercase;letter-spacing:0.12em;color:var(--ink-faint);background:var(--bg-surface)}
.cstable td{padding:0.9rem 1.1rem;color:var(--ink-muted);box-shadow:0 -1px 0 var(--hairline);vertical-align:top}
.cstable td:first-child{color:var(--ink);font-weight:600}
.cstable td:last-child{white-space:nowrap}
.cslearned{margin:0;padding:0;list-style:none;display:grid;gap:1.5rem;max-width:64ch;counter-reset:l}
.cslearned li{font-size:1.15rem;line-height:1.6;color:var(--ink-muted);padding-top:1.5rem;box-shadow:0 -1px 0 var(--hairline)}
.cslearned li:first-child{padding-top:0;box-shadow:none}
.cslearned strong{color:var(--ink);font-weight:600}
.csdemo{display:grid;gap:1.25rem}
.csdemo__bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem 2rem}
.csdemo__bar p{margin:0;max-width:56ch}
.csdemo__frame{border-radius:22px;overflow:hidden;background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--hairline);padding:clamp(0.5rem,1.2vw,1rem)}
.csdemo__frame img{display:block;width:100%;height:auto;border-radius:14px}
.csdemo__frame img[hidden]{display:none}
.csdemo__cap{margin:0;font-size:0.9rem;line-height:1.5;color:var(--ink-faint)}
@media (max-width:820px){.cssplit{grid-template-columns:1fr}}

/* shared bits */
.rail-root{visibility:hidden}
.rail-root[data-on="true"]{visibility:visible}
[data-rail-card]{opacity:0}
.icon-btn{display:inline-grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:var(--ink-muted);
  box-shadow:inset 0 0 0 1px var(--hairline);cursor:pointer;text-decoration:none;outline:0;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.icon-btn:hover{background:var(--bg-raised);color:var(--ink)}
.icon-btn:focus-visible{outline:2px solid var(--accent-lift);outline-offset:2px}
.mark{display:inline-flex;align-items:center;padding:0.42rem 0.85rem;border-radius:var(--r-pill);font-family:var(--font-display);
  letter-spacing:-0.02em;line-height:1;text-decoration:none;outline:0}
.mark:focus-visible{outline:2px solid var(--accent-lift);outline-offset:3px}
.iconrow{display:flex;gap:0.4rem}

/* ---- desktop rail ---- */
.rail{position:fixed;z-index:40;top:0;bottom:0;left:max(16px,env(safe-area-inset-left,0px));width:248px;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:16px 0;pointer-events:none}
.rail .card{pointer-events:auto;padding:0.625rem;gap:0.5rem;border-radius:var(--r-md)}
.rail .card .card__body{gap:0}
.rail .card .t-body{color:inherit;max-width:none;font-size:inherit!important}
.rail-mark{display:flex;align-items:center;justify-content:space-between;gap:0.5rem}
.rail-stats{display:grid;grid-template-columns:1fr 1fr;gap:0}
.rail-stats > div{display:grid;gap:0.35rem;padding:0.25rem 0.5rem}
.rail-stats > div + div{box-shadow:inset 1px 0 0 var(--hairline);padding-left:0.85rem}
.rail-stats b{font:800 2rem/0.9 var(--font-display);letter-spacing:-0.04em;color:var(--accent);padding-bottom:0.05em}
.rail-stats .t-meta{color:var(--ink-muted)}
@media (max-height:660px){.rail-stats-card{display:none}}

/* ---- nav list (rail / bar / menu) ---- */
.nav{position:relative;display:grid;gap:2px}
.nav__pill{position:absolute;left:0;top:0;z-index:0;width:0;height:0;border-radius:var(--r-pill);background:var(--accent);pointer-events:none}
.nav__row{position:relative;z-index:1;display:flex;align-items:center;gap:0.65rem;height:36px;padding:0 0.8rem;border-radius:var(--r-pill);
  font:600 1rem/1 var(--font-display);letter-spacing:-0.01em;color:var(--ink-muted);text-decoration:none;outline:0;
  transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.nav__row svg{flex:none}
.nav__row:not([aria-current="true"]):hover{background:var(--bg-raised);color:var(--ink)}
.nav__row[aria-current="true"]{color:var(--on-accent)}
.nav__row:focus-visible{outline:2px solid var(--accent-lift);outline-offset:2px}
.nav--bar{display:flex}
.nav--bar .nav__row{width:44px;height:44px;padding:0;justify-content:center}
.nav--menu{gap:4px}
.nav--menu .nav__row{height:auto;padding:0.6rem 1.1rem;gap:1rem;font-size:clamp(1.75rem,8vw,2.75rem);font-weight:700;letter-spacing:-0.04em}

/* ---- email copy ---- */
.copy{display:flex;align-items:center;gap:0.4rem;padding:0.25rem 0.25rem 0.25rem 0.65rem;border-radius:var(--r-sm);background:var(--bg-raised);box-shadow:inset 0 0 0 1px var(--hairline)}
.copy input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:400 0.7rem/1 var(--font-mono);letter-spacing:0;outline:0;text-overflow:ellipsis;padding:0}
.copy .icon-btn{width:30px;height:30px;flex:none;box-shadow:none}
.copy .icon-btn:hover{background:var(--bg-surface)}

/* ---- bottom bar (640–1099) ---- */
.barwrap{position:fixed;z-index:40;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);display:flex;justify-content:center;pointer-events:none}
.bar-nav{pointer-events:auto;padding:6px;border-radius:var(--r-pill);background:var(--scrim-bar);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px var(--hairline)}

/* ---- FAB + full-screen menu (<640) ---- */
.fabwrap{position:fixed;z-index:70;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 16px);pointer-events:none}
.fab{pointer-events:auto;display:grid;place-items:center;width:56px;height:56px;border:0;border-radius:50%;background:var(--accent);color:var(--on-accent);cursor:pointer;outline:0;box-shadow:0 0 40px 0 var(--accent-glow)}
.fab:focus-visible{outline:2px solid var(--accent-lift);outline-offset:3px}
.menu{position:fixed;inset:0;z-index:60;visibility:hidden;overflow:auto;background:var(--scrim-menu);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  padding:calc(env(safe-area-inset-top,0px) + 1.25rem) var(--gutter) calc(env(safe-area-inset-bottom,0px) + 6.5rem);display:flex;flex-direction:column;gap:2rem}
.menu__foot{margin-top:auto;display:grid;gap:0.75rem}

/* ---- placeholder content for tracking / cursor states ---- */
.drag{display:flex;gap:1rem;overflow-x:auto;scrollbar-width:none;user-select:none;-webkit-user-select:none;margin-right:calc(-1 * var(--gutter));padding-right:var(--gutter)}
.drag::-webkit-scrollbar{display:none}
.drag .card{flex:0 0 min(78vw,320px);min-height:220px}

/* ---- cursor ---- */
.cursor{--hairline-strong:var(--cursor-ring);position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:0;transition:opacity var(--dur-fast) var(--ease)}
.cursor__dotwrap,.cursor__ringwrap{position:absolute;left:0;top:0;will-change:transform}
.cursor__dot{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.cursor__ring{position:absolute;left:-20px;top:-20px;width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--hairline-strong)}
.cursor__fill{position:absolute;left:-40px;top:-40px;width:80px;height:80px;border-radius:50%;background:var(--accent);color:var(--on-accent);
  display:grid;place-items:center;font:600 1rem/1 var(--font-mono);letter-spacing:0.06em}
.cursor__beam{position:absolute;left:-1px;top:-14px;width:2px;height:28px;border-radius:1px;background:var(--ink)}
html.has-cursor,html.has-cursor *{cursor:none!important}

/* =====================================================================
   ABOUT — the journey
   ===================================================================== */
.sh__kicker{color:var(--ink-muted);margin-bottom:calc(-1 * clamp(0.6rem,1.2vw,1.1rem))}
.about .sh + .journey{margin-top:0}

.journey{position:relative;container-type:inline-size;padding:140px 0}
.journey__svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.journey__svg path{fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
.journey__base{stroke:var(--hairline)}
.journey__accent{stroke:var(--accent)}
.jnode{position:absolute;left:0;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  border:1px solid var(--ink-faint);background:var(--bg-surface);pointer-events:none;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.jnode.is-on{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-glow)}

.jrow{display:flex;pointer-events:none}
.jrow + .jrow{margin-top:-60px}                 /* adjacent rows overlap vertically, on opposite sides */
.jrow--L{justify-content:flex-start}
.jrow--R{justify-content:flex-end}
.jrow .card{pointer-events:auto;width:clamp(260px,32%,380px);opacity:0}
.jyear{display:block;font:500 3rem/1 var(--font-mono);letter-spacing:-0.04em;color:var(--accent);font-variant-numeric:tabular-nums}
.jbody{margin:0}
.jbody.is-clamped{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jextra{margin:0.75rem 0 0}
.jbtn{padding:0.55rem 1rem;gap:0.6rem}
.jpm{flex:none}
.jpm path{stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.jpm .v{transform-origin:7px 7px;transition:transform var(--dur-fast) var(--ease)}
.jbtn[aria-expanded="true"] .jpm .v{transform:scaleY(0)}

@container (max-width:619px){
  .jrow--L,.jrow--R{justify-content:flex-end}
  .jrow .card{width:calc(100% - 56px)}
  .jrow + .jrow{margin-top:24px}
}

/* =====================================================================
   WORK INDEX
   ===================================================================== */
.chip--on-accent{background:var(--bg-void);color:var(--ink);box-shadow:none}          /* chips on an accent fill: solid void pill, never small text on accent */
.btn--ghost.btn--inverse{background:var(--bg-void);color:var(--ink)}
.btn--ghost.btn--inverse:hover,.btn--ghost.btn--inverse[data-state="hover"]{background:var(--bg-raised);color:var(--ink)}

.wlist{position:relative;box-shadow:inset 0 1px 0 var(--hairline)}
.wrow{position:relative;display:block;height:140px;color:inherit;text-decoration:none;outline:0;clip-path:inset(100% 0 0 0)}
.wrow::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hairline)}
.wrow.is-active{z-index:2}
.wrow:focus-visible{outline:2px solid var(--accent-lift);outline-offset:-2px}
.wrow__base{position:relative;height:100%}
.wrow__fill{position:absolute;inset:0;z-index:1;background:var(--accent);color:var(--on-accent);clip-path:inset(0 100% 0 0);pointer-events:none}
.wrow__c{display:grid;grid-template-columns:3.5rem minmax(0,15rem) minmax(0,1fr);align-items:center;column-gap:clamp(1rem,2vw,2rem);height:100%;padding:0 clamp(0.75rem,1.5vw,1.5rem)}
.wrow__num{font:600 1rem/1 var(--font-mono);letter-spacing:0.12em;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.wrow__tags{display:flex;flex-wrap:wrap;gap:0.4rem}
.wrow__title{margin:0;font:700 clamp(2rem,4vw,3.5rem)/0.9 var(--font-display);letter-spacing:-0.04em;color:var(--ink);text-wrap:balance;padding-bottom:0.06em}
.wrow__tags,.wrow__title{transition:opacity var(--dur-base) var(--ease)}
.wrow__fill .wrow__num,.wrow__fill .wrow__title{color:var(--on-accent)}
/* the list pays attention: everything but the hovered row drops to 0.4 — numerals stay */
.wlist.has-active .wrow:not(.is-active) .wrow__tags,
.wlist.has-active .wrow:not(.is-active) .wrow__title{opacity:0.4}
.wrow__tstatic,.wrow__cta{display:none}

.wthumb{position:absolute;left:0;top:0;z-index:3;pointer-events:none;will-change:transform;transform:translate3d(-9999px,0,0)}
.wthumb__in{position:relative;width:360px;height:240px;border-radius:var(--r-md);overflow:hidden;background:var(--bg-raised);box-shadow:inset 0 0 0 1px var(--hairline);opacity:0}
.wstripes{position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 14px,var(--hairline) 14px 15px)}
.wthumb__in .t-meta,.wrow__tstatic .t-meta{position:absolute;left:0.9rem;bottom:0.8rem}

/* case-study transition target (placeholder page) */
.case{position:fixed;inset:0;z-index:90;overflow:auto;background:var(--bg-void)}
.case__hero{min-height:100svh;background:var(--accent);color:var(--on-accent);display:flex;flex-direction:column;justify-content:space-between;gap:2rem;
  padding:calc(env(safe-area-inset-top,0px) + 1.5rem) var(--gutter) calc(env(safe-area-inset-bottom,0px) + 3rem)}
.case__top{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.case__idx{font:600 1rem/1 var(--font-mono);letter-spacing:0.12em;color:var(--on-accent)}
.case__main{display:grid;gap:1.5rem}
.case__title{margin:0;font:800 clamp(3rem,10vw,10rem)/0.9 var(--font-display);letter-spacing:-0.04em;color:var(--on-accent);text-wrap:balance;padding-bottom:0.06em}
.case__body{padding-top:clamp(3rem,8vw,8rem);padding-bottom:clamp(4rem,10vw,10rem);min-height:60svh}

/* cursor over accent surfaces */
.cursor.is-inv .cursor__dot{background:var(--on-accent)}
.cursor.is-inv .cursor__ring{box-shadow:inset 0 0 0 1px rgba(8,8,10,0.55)}
.cursor.is-inv .cursor__fill{background:var(--on-accent);color:var(--accent-on-dark)}
.cursor.is-inv .cursor__beam{background:var(--on-accent)}

[data-rm="true"] .wrow{clip-path:none!important}

/* < 768px: no cursor-following thumbnail; static thumb above the title; tap to expand */
@media (max-width:767px){
  .wrow{height:auto}
  .wrow__base{height:auto}
  .wrow__c{display:flex;flex-direction:column;align-items:flex-start;gap:0.9rem;height:auto;padding:1.25rem 0.75rem 1.5rem}
  .wthumb{display:none}
  .wrow__tstatic{display:block;position:relative;width:100%;aspect-ratio:3/2;border-radius:var(--r-md);overflow:hidden;background:var(--bg-raised);box-shadow:inset 0 0 0 1px var(--hairline)}
  .wrow__cta{display:block;margin-top:0.25rem}
}

/* =====================================================================
   WHAT I BRING — bento
   ===================================================================== */
.bento-wrap{container-type:inline-size}
.bento{position:relative;display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(clamp(210px,24cqi,270px),auto)}
.bento .tile{opacity:0;min-width:0;padding:1.5rem;gap:1rem;
  box-shadow:inset 0 0 0 1px var(--hairline),0 0 0 0 transparent;
  transition:translate var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),filter var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.bento .tile:hover{translate:0 -4px;
  box-shadow:inset 0 0 0 1px rgba(237,26,109,0.4),0 14px 44px -8px var(--accent-glow)}       /* border → accent @ 40%, accent-glow shadow */
.bento .tile .card__head{justify-content:flex-start}
.bento .tile .t-body{font-size:1.02rem!important;line-height:1.55;max-width:36ch}
.tile__icon{display:inline-grid;color:var(--ink-muted);transition:rotate var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.bento .tile:hover .tile__icon{rotate:8deg;color:var(--ink)}

.tile--lead .t-title{font-size:clamp(2.5rem,5vw,5rem)}
.bento .tile--lead .t-body{font-size:1.15rem!important;max-width:42ch}
.tile__stat{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.tile__num{font:800 clamp(4rem,8vw,7rem)/0.85 var(--font-display);letter-spacing:-0.04em;color:var(--accent);padding-bottom:0.06em}
.tile__stat .t-meta{color:var(--ink-muted)}

/* the one solid accent fill in the section — darkens on hover instead of glowing */
.bento .tile--accent{background:var(--accent);box-shadow:none}
.bento .tile--accent:hover{filter:brightness(0.9);box-shadow:0 16px 40px -14px rgba(0,0,0,0.6)}
.tile--accent .t-title,.tile--accent .tile__icon,.bento .tile--accent:hover .tile__icon{color:var(--on-accent)}
.tile--accent .t-title{font-size:clamp(2rem,3.6vw,3.5rem)}
.bento .tile--accent .t-body{color:var(--on-accent);font-weight:600;font-size:1.125rem!important}   /* text on accent: void, 16px+, semibold */

[data-rm="true"] .bento .tile{opacity:1!important;transform:none!important}
[data-rm="true"] .bento .tile:hover{translate:none}
[data-rm="true"] .bento .tile:hover .tile__icon{rotate:none}

@container (max-width:559px){ .bento{grid-template-columns:1fr} }
@container (min-width:560px){
  .tile--lead,.tile--agent,.tile--proto{grid-column:span 2}
}
@container (min-width:820px){
  .bento{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tile--lead  {grid-column:1 / 3;grid-row:1 / 3}     /* 2x2 */
  .tile--agent {grid-column:3 / 5;grid-row:1}         /* 2x1 */
  .tile--sys   {grid-column:3;grid-row:2}             /* 1x1 */
  .tile--ux    {grid-column:4;grid-row:2}             /* 1x1 */
  .tile--proto {grid-column:1 / 3;grid-row:3}         /* 2x1 */
  .tile--a11y  {grid-column:3 / 5;grid-row:3}         /* 2x1 */
}

/* =====================================================================
   RECOGNITION — draggable rail
   ===================================================================== */
.rec{--rec-card:380px;--rec-gap:24px}
.rec__viewport{overflow:hidden;margin:0 calc(-1 * var(--gutter))}
.rec__track{display:flex;gap:var(--rec-gap);padding:1.5rem var(--gutter) 2rem;will-change:transform;cursor:grab;touch-action:pan-y}
.rec__track.is-drag{cursor:grabbing}
.rec__card{flex:0 0 var(--rec-card);max-width:calc(100vw - 2 * var(--gutter));position:relative;overflow:hidden;min-height:280px;
  padding:1.75rem;gap:0.9rem;opacity:0.55;scale:0.97;transition:opacity var(--dur-base) var(--ease),scale var(--dur-base) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.rec__card.is-focus{opacity:1;scale:1}
.rec__track:not(.is-drag) .rec__card:focus-visible{outline:2px solid var(--accent-lift);outline-offset:3px}
.rec__wm{position:absolute;right:-0.5rem;bottom:-2.5rem;z-index:0;font:800 12rem/0.8 var(--font-display);letter-spacing:-0.05em;
  color:var(--ink);opacity:0.06;pointer-events:none;user-select:none}
.rec__cat{position:relative;z-index:1;font:500 var(--fs-meta)/1 var(--font-mono);text-transform:uppercase;letter-spacing:0.12em;color:var(--accent-lift)}
.rec__title{position:relative;z-index:1;font:700 1.75rem/0.95 var(--font-display);letter-spacing:-0.04em;color:var(--ink);text-wrap:balance;margin-top:auto}
.rec__meta{position:relative;z-index:1;font:400 var(--fs-meta)/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:0.1em;color:var(--ink-faint)}
.rec__body{position:relative;z-index:1;font-size:1rem;line-height:1.55;color:var(--ink-muted);max-width:32ch}

.rec__prog{position:relative;height:2px;margin:0 auto;background:var(--hairline);border-radius:2px;overflow:hidden}
.rec__bar{position:absolute;left:0;top:0;height:100%;width:30%;background:var(--accent);border-radius:2px;transform-origin:left center}
.rec__hint{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1rem}

@media (hover:none),(max-width:767px){
  .rec__viewport{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .rec__viewport::-webkit-scrollbar{display:none}
  .rec__track{cursor:default;transform:none!important;touch-action:pan-x}
  .rec__card{scroll-snap-align:center;opacity:1;scale:1}
  .rec__prog,.rec__hint .rec__count{display:none}
}
[data-rm="true"] .rec__card{transition:none}

/* =====================================================================
   CASE STUDY (reusable)
   ===================================================================== */
.cs{position:fixed;inset:0;z-index:90;overflow-x:hidden;overflow-y:auto;background:transparent;-webkit-overflow-scrolling:touch}
.cs__bg{position:fixed;inset:0;z-index:-1;background:var(--bg-void)}
.cs__flip{position:fixed;margin:0;z-index:120;pointer-events:none;transform-origin:top left;color:var(--ink);
  font:800 clamp(3rem,9vw,9rem)/0.9 var(--font-display);letter-spacing:-0.04em}
.cs [data-cs-item]{will-change:opacity,transform}

/* hero */
.cshero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;gap:2rem;overflow:hidden;
  padding:calc(env(safe-area-inset-top,0px) + 1.25rem) var(--gutter) clamp(3rem,7vw,6rem)}
.cshero__glow{position:absolute;z-index:0;left:50%;top:38%;width:130vmax;height:130vmax;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,var(--accent-glow),transparent 70%);opacity:0.9}
.cshero__top,.cshero__main{position:relative;z-index:1}
.cshero__top{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.cshero__main{display:grid;gap:clamp(1.25rem,2.5vw,2rem);max-width:22ch}
.cshero__title{margin:0;font:800 clamp(3rem,9vw,9rem)/0.9 var(--font-display);letter-spacing:-0.04em;color:var(--ink);text-wrap:balance;padding-bottom:0.06em}
.cshero__meta{display:flex;flex-wrap:wrap;gap:1.25rem 2.5rem}
.cshero__meta div{display:grid;gap:0.3rem}
.cshero__meta dt{font:400 var(--fs-meta)/1 var(--font-mono);text-transform:uppercase;letter-spacing:0.12em;color:var(--ink-faint)}
.cshero__meta dd{margin:0;font:600 1rem/1.2 var(--font-display);color:var(--ink)}
.cshero__premise{max-width:34ch;font-size:1.15rem;line-height:1.5;color:var(--ink-muted)}
.cshero__scroll{position:relative;z-index:1;justify-self:start;order:4}
/* hero device visual (same scene + tilt as the work card) */
.cshero__visual{position:relative;z-index:1;order:3;height:clamp(300px,52svh,520px);border-radius:22px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--hairline)}
.cshero__visual .pwc__orbs{zoom:1.6}
.cshero__visual .pwc__dev{height:66%;max-width:84%}
.cshero__visual:hover .pwc__dev{transform:translate(-50%,-50%) rotateY(0) rotateX(0) rotateZ(0) scale(1.04)}
.cshero__visual:hover .pwc__glare{opacity:.4}
.cshero__visual:hover .pwc__orbs{transform:translate3d(-8px,4px,0) scale(1.04)}
@media (min-width:1100px){
  .cshero--visual .cshero__main{max-width:min(22ch,46vw)}
  .cshero--visual .cshero__title{font-size:clamp(3rem,6.5vw,7rem)}
  .cshero__visual{position:absolute;inset:0;z-index:0;width:auto;height:auto;margin:0;border-radius:0;box-shadow:none}
  .cshero__visual::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--bg-void) 0%,color-mix(in oklab,var(--bg-void) 70%,transparent) 38%,transparent 62%)}
  .cshero__visual .pwc__scene{perspective:1400px}
  .cshero__visual .pwc__dev{left:72%;top:40%;height:auto;width:min(40vw,640px);max-width:none;z-index:1}
}

/* sticky subnav — sliding fill like the rail */
.cssub{position:sticky;top:0;z-index:30;display:flex;justify-content:center;padding:0.75rem var(--gutter);
  background:var(--scrim-top);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--hairline);
  translate:0 -120%;transition:translate var(--dur-base) var(--ease)}
.cssub.is-on{translate:0 0}
.cssub__nav{position:relative;display:flex;gap:2px;padding:4px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--hairline);max-width:100%;overflow:auto;scrollbar-width:none}
.cssub__nav::-webkit-scrollbar{display:none}
.cssub__pill{position:absolute;left:0;top:4px;z-index:0;height:calc(100% - 8px);border-radius:var(--r-pill);background:var(--accent);width:0}
.cssub__row{position:relative;z-index:1;white-space:nowrap;padding:0.5rem 1.1rem;border-radius:var(--r-pill);background:none;border:0;cursor:pointer;
  font:600 0.95rem/1 var(--font-display);letter-spacing:-0.01em;color:var(--ink-muted);outline:0;transition:color var(--dur-fast) var(--ease)}
.cssub__row[aria-current="true"]{color:var(--on-accent)}
.cssub__row:focus-visible{outline:2px solid var(--accent-lift);outline-offset:2px}

.cssec{padding:clamp(4rem,9vw,8rem) var(--gutter);max-width:1400px;margin:0 auto;scroll-margin-top:70px}
.cssec__head{margin:0 0 clamp(2rem,4vw,3.5rem)}
.cslabel{font:400 var(--fs-meta)/1 var(--font-mono);text-transform:uppercase;letter-spacing:0.12em;color:var(--ink-faint)}
.csh2{margin:0.6rem 0 0;font:700 clamp(2rem,5vw,3.5rem)/0.95 var(--font-display);letter-spacing:-0.04em;color:var(--ink);padding-bottom:0.06em}

/* problem: narrative + pull stat */
.csprob{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.csprob__body{display:grid;gap:1.25rem;font-size:1.1rem;line-height:1.6;color:var(--ink-muted);max-width:60ch}
.cspull{position:sticky;top:90px;display:grid;gap:0.75rem;padding-left:1.5rem;box-shadow:inset 1px 0 0 var(--hairline)}
.cspull__v{font:800 clamp(3.5rem,7vw,6rem)/0.85 var(--font-display);letter-spacing:-0.04em;color:var(--accent);padding-bottom:0.06em}
.cspull__k{font-size:1rem;line-height:1.4;color:var(--ink-muted)}
@media (max-width:820px){.csprob{grid-template-columns:1fr}.cspull{position:static;padding:1.25rem 0 0;box-shadow:inset 0 1px 0 var(--hairline)}}

/* research: horizontal evidence strip (drag physics) */
.csev__vp{overflow-x:auto;overflow-y:hidden;margin:0 calc(-1 * var(--gutter));scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.csev__vp::-webkit-scrollbar{display:none}
.csev__track{display:flex;gap:20px;padding:0.5rem var(--gutter) 1.5rem;cursor:grab}
.csev__vp.is-dragging{cursor:grabbing}
.csev__vp.is-dragging .csev__track{cursor:grabbing}
.csev__card{scroll-snap-align:start}
.csev__card{flex:0 0 clamp(260px,26vw,340px);max-width:calc(100vw - 2 * var(--gutter));min-height:200px;padding:1.5rem;gap:1rem;justify-content:space-between}
.csev__kind{font:500 var(--fs-meta)/1 var(--font-mono);text-transform:uppercase;letter-spacing:0.12em;color:var(--accent-lift)}
.csev__text{font-size:1.05rem;line-height:1.5;color:var(--ink)}
.csev__q .csev__text{font-weight:600}
.csev__src{font:400 var(--fs-meta)/1.3 var(--font-mono);text-transform:uppercase;letter-spacing:0.1em;color:var(--ink-faint)}
@media (hover:none),(max-width:767px){ .csev__track{cursor:default} }

/* design: pinned cross-fade sequence */
.cspin{position:relative}
.cspin__stage{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(240px,0.8fr) 1.4fr;gap:clamp(1.5rem,4vw,4rem);
  align-items:center;padding:0 var(--gutter);max-width:1400px;margin:0 auto}
.cspin__captions{position:relative}
.csstep{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:1rem;opacity:0;transition:opacity var(--dur-fast) var(--ease)}
.csstep.is-on{opacity:1}
.csstep__n{font:500 var(--fs-meta)/1 var(--font-mono);letter-spacing:0.12em;color:var(--accent-lift)}
.csstep__t{font:700 clamp(1.5rem,2.6vw,2.25rem)/1 var(--font-display);letter-spacing:-0.04em;color:var(--ink)}
.csstep__d{font-size:1.05rem;line-height:1.55;color:var(--ink-muted);max-width:38ch}
.cspin__screens{position:relative;aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;box-shadow:inset 0 0 0 1px var(--hairline)}
.csscreen{position:absolute;inset:0;opacity:0;display:flex;align-items:flex-end;padding:1.25rem;
  background:repeating-linear-gradient(var(--a,135deg),transparent 0 16px,var(--hairline) 16px 17px),var(--bg-surface)}
.csscreen .t-meta{color:var(--ink-faint)}
.csprogress{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--hairline)}
.csprogress i{display:block;height:100%;width:0;background:var(--accent);transform-origin:left}
.csdot{display:flex;gap:0.4rem;margin-top:0.5rem}
.csdot i{width:6px;height:6px;border-radius:50%;background:var(--ink-faint);transition:background var(--dur-fast) var(--ease)}
.csdot i.is-on{background:var(--accent)}
/* stacked degrade */
.csstack{display:grid;gap:clamp(2rem,5vw,4rem)}
.csstack__item{display:grid;gap:1.25rem}
.csstack .cspin__screens{position:relative}
.csstack .csscreen{position:relative;opacity:1}

/* before / after */
.csba{position:relative;container-type:inline-size;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;box-shadow:inset 0 0 0 1px var(--hairline);
  touch-action:pan-y;user-select:none;-webkit-user-select:none}
.csba__panel{position:absolute;inset:0;width:100cqi;display:flex;align-items:flex-end;padding:1.25rem}
.csba__after{background:repeating-linear-gradient(135deg,transparent 0 16px,var(--hairline) 16px 17px),var(--bg-surface)}
.csba__before{width:var(--split,50%);overflow:hidden;z-index:1;box-shadow:inset -1px 0 0 var(--hairline)}
.csba__before .csba__panel{background:repeating-linear-gradient(45deg,transparent 0 16px,rgba(237,26,109,0.16) 16px 17px),var(--bg-raised)}
.csba__lab{position:absolute;top:1rem;font:500 var(--fs-meta)/1 var(--font-mono);text-transform:uppercase;letter-spacing:0.12em;color:var(--ink-faint);z-index:2}
.csba__lab--b{left:1rem}.csba__lab--a{right:1rem}
.csba__handle{position:absolute;top:0;bottom:0;left:var(--split,50%);width:2px;background:var(--accent);transform:translateX(-1px);z-index:3;cursor:ew-resize}
.csba__knob{position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%);border-radius:50%;background:var(--accent);color:var(--on-accent);
  display:grid;place-items:center;box-shadow:0 6px 20px -4px rgba(0,0,0,0.6)}
.csba__handle:focus-visible{outline:none}
.csba__handle:focus-visible .csba__knob{outline:2px solid var(--ink);outline-offset:3px}

/* outcome */
.csout{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3rem)}
.csout__n{font:800 clamp(3.5rem,9vw,8rem)/0.85 var(--font-display);letter-spacing:-0.04em;color:var(--accent);font-variant-numeric:tabular-nums;padding-bottom:0.06em}
.csout__c{margin-top:0.5rem;font-size:1.05rem;line-height:1.4;color:var(--ink-muted);max-width:22ch}
@media (max-width:820px){.csout{grid-template-columns:1fr;gap:2.5rem}}
.csout--stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.csout--stats .csout__n{font-size:clamp(2.75rem,5.5vw,5rem)}
@media (max-width:820px){.csout--stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.5rem}}
.csgrid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.csgrid--2{grid-template-columns:1fr}}
.csstudy__dl{display:grid;grid-template-columns:auto 1fr;gap:0.6rem 1rem;margin:0}
.csstudy__dl dt{font:500 0.75rem/1.6 var(--font-mono);text-transform:uppercase;letter-spacing:0.12em;color:var(--ink-faint)}
.csstudy__dl dd{margin:0;color:var(--ink-muted);line-height:1.5}
.cspull{margin:clamp(1rem,3vw,2rem) 0 0;display:grid;gap:0.75rem}
.cspull p{margin:0;font:700 clamp(2rem,4.5vw,3.75rem)/1.02 var(--font-display);letter-spacing:-0.03em;color:var(--ink);max-width:22ch;text-wrap:balance}
.cspull cite{font-style:normal;color:var(--ink-faint)}

/* reflection */
.csref{max-width:60ch;font-size:1.2rem;line-height:1.65;color:var(--ink)}

/* next project row (behaves like a work row) */
.csnext{margin-top:clamp(3rem,7vw,6rem);box-shadow:inset 0 1px 0 var(--hairline)}
.csnext__eyebrow{padding:clamp(2rem,4vw,3rem) var(--gutter) 0;max-width:1400px;margin:0 auto}
.csend{margin-top:clamp(3rem,7vw,6rem);padding-top:1px;padding-bottom:clamp(3rem,6vw,5rem);box-shadow:inset 0 1px 0 var(--hairline)}
.csend__next{display:grid;gap:0.5rem;padding-top:clamp(2rem,4vw,3rem)}
.csend__next > .cslabel{padding:0 var(--gutter);max-width:1400px;width:100%;margin:0 auto;box-sizing:border-box}
.csend__actions{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;max-width:1400px;margin:clamp(3.5rem,7vw,6rem) auto 0;padding:0 var(--gutter);box-sizing:border-box}
.csend__actions .btn--lg{white-space:normal;text-align:left}
@media (max-width:640px){.csend__actions{flex-direction:column-reverse;align-items:stretch}.csend__actions .btn{width:100%}}

/* =====================================================================
   CONTACT / FOOTER — closing section
   ===================================================================== */
.contactf{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-void)}
.contactf__glow{position:absolute;z-index:0;width:120vmax;height:120vmax;left:50%;top:46%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,var(--accent-glow),transparent 68%);opacity:0.85;animation:cglow 20s ease-in-out infinite}
@keyframes cglow{
  0%{transform:translate(calc(-50% - 8vw),calc(-50% - 5vh)) scale(1)}
  50%{transform:translate(calc(-50% + 8vw),calc(-50% + 5vh)) scale(1.12)}
  100%{transform:translate(calc(-50% - 8vw),calc(-50% - 5vh)) scale(1)}
}
[data-rm="true"] .contactf__glow{animation:none}
.contactf__main{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:center;gap:clamp(2rem,5vw,3.5rem);
  padding:clamp(4rem,10vw,8rem) var(--gutter) clamp(3rem,6vw,5rem);max-width:1500px;margin:0 auto;width:100%}
.contactf__h{margin:0;font:800 clamp(4rem,11vw,12rem)/0.9 var(--font-display);letter-spacing:-0.04em;color:var(--ink);text-wrap:balance;padding-bottom:0.06em}
.contactf__h em{font-style:normal;color:var(--accent)}
.contactf__links{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.maillink{position:relative;display:inline-block;max-width:100%;text-decoration:none;color:var(--ink);
  font:700 clamp(1.5rem,4.5vw,3.25rem)/1 var(--font-display);letter-spacing:-0.03em;word-break:break-word;outline:0}
.maillink__u{position:absolute;left:0;right:0;bottom:-0.08em;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform var(--dur-base) var(--ease)}
.maillink:hover .maillink__u,.maillink:focus-visible .maillink__u{transform:scaleX(1)}
.maillink:focus-visible{outline:2px solid var(--accent-lift);outline-offset:4px;border-radius:2px}
.linklink{display:inline-flex;align-items:center;gap:0.5rem;color:var(--ink-muted);text-decoration:none;
  font:600 1.05rem/1 var(--font-display);outline:0}
.linklink .maillink__u{background:var(--accent-lift)}
.linklink:hover{color:var(--ink)}
.linklink:focus-visible{outline:2px solid var(--accent-lift);outline-offset:3px;border-radius:4px}
.contactf__foot{position:relative;z-index:1;box-shadow:inset 0 1px 0 var(--hairline)}
.contactf__footin{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:1.25rem var(--gutter) calc(env(safe-area-inset-bottom,0px) + 1.25rem);max-width:1500px;margin:0 auto}
.contactf__sig{font:400 var(--fs-meta)/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:0.12em;color:var(--ink-faint)}
.totop{display:inline-flex;align-items:center;gap:0.5rem;background:none;border:0;cursor:pointer;color:var(--ink-muted);
  font:600 var(--fs-meta)/1 var(--font-mono);text-transform:uppercase;letter-spacing:0.12em;padding:0.5rem 0.25rem;border-radius:var(--r-sm);outline:0}
.totop:hover{color:var(--ink)}
.totop:focus-visible{outline:2px solid var(--accent-lift);outline-offset:2px}
/* keep the closing section clear of the fixed rail / floating bar */
@media (min-width:1100px){ .contactf__main,.contactf__footin{padding-left:calc(var(--gutter) + 248px + clamp(24px,3vw,48px))} }
@media (min-width:640px) and (max-width:1099px){ .contactf__foot{padding-bottom:76px} }


/* =====================================================================
   POLISH — a11y + reflow + contrast
   ===================================================================== */
/* skip link */
.skip{position:fixed;left:50%;top:-60px;transform:translateX(-50%);z-index:200;padding:0.7rem 1.2rem;border-radius:0 0 var(--r-md) var(--r-md);
  background:var(--accent);color:var(--on-accent);font:600 1rem/1 var(--font-display);text-decoration:none;transition:top var(--dur-fast) var(--ease)}
.skip:focus-visible{top:0;outline:2px solid var(--accent-lift);outline-offset:2px}

/* uniform focus rings: 2px accent-lift, 2px offset — full-bleed rows keep a contained inset ring */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,[role="button"]:focus-visible,[role="tab"]:focus-visible,[role="slider"]:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent-lift);outline-offset:2px}
.wrow:focus-visible,.rec__card:focus-visible{outline:2px solid var(--accent-lift);outline-offset:-2px}
.csba__handle:focus-visible{outline:none}
.csba__handle:focus-visible .csba__knob{outline:2px solid var(--accent-lift);outline-offset:3px}

/* a visible, non-hover affordance for the drag rails (keyboard + touch) */
.dragaff{display:inline-flex;align-items:center;gap:0.5rem;margin-top:0.9rem;color:var(--ink-faint);
  font:400 var(--fs-meta)/1 var(--font-mono);text-transform:uppercase;letter-spacing:0.12em}
.dragaff svg{color:var(--accent-lift)}

/* prefers-contrast: strengthen hairlines + muted/faint ink */
@media (prefers-contrast:more){
  :root{--hairline:rgba(255,255,255,0.22);--ink-muted:#B9B6B8;--ink-faint:#8C888B}
  .cursor{--hairline-strong:rgba(255,255,255,0.5)}
  .wrow__fill .chip,.chip--on-accent{box-shadow:inset 0 0 0 1px rgba(8,8,10,0.5)}
}

/* reflow safety net: nothing forces a horizontal scrollbar */
html{max-width:100%!important;height:auto!important;min-height:100%!important;overflow:visible!important}
body{max-width:100%!important;height:auto!important;min-height:100%!important;overflow:visible!important}
#dc-root,.sc-host,.sc-host-x{height:auto!important;min-height:0!important;overflow:visible!important}
img,svg,video{max-width:100%}

/* =====================================================================
   SELECTED WORK — pinned horizontal band
   ===================================================================== */
.pw{position:relative;background:var(--bg-surface);box-shadow:inset 0 1px 0 var(--hairline),inset 0 -1px 0 var(--hairline)}
.pw__pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(1.75rem,3.5vw,3rem);overflow:hidden}
.pw__head{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(2rem,6vw,6rem);
  width:100%;max-width:1600px;margin:0 auto;padding:0 var(--gutter)}
.pw__lead{display:flex;flex-direction:column;gap:1.25rem;align-items:flex-start}
.pw__kick{display:inline-flex;align-items:center;padding:0.55rem 0.9rem;border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1px var(--hairline);color:var(--ink-muted)}
.pw__h{font-size:clamp(2.25rem,4.4vw,4rem)}
.pw__p{text-align:right;max-width:34ch;margin-bottom:0.35rem}
.pw__vp{overflow:hidden}
.pw__rail{display:flex;gap:24px;padding:0 var(--gutter);align-items:stretch}
.pw__rail[data-cursor="drag"]{cursor:grab}
.pw__rail[data-dragging]{cursor:grabbing}
.pw__bar{position:relative;height:2px;width:100%;max-width:1600px;margin:0 auto;
  background:var(--hairline);border-radius:var(--r-pill)}
.pw__bar i{display:block;height:100%;background:var(--accent);border-radius:var(--r-pill);
  transform:scaleX(0);transform-origin:0 50%}

.pwc{flex:0 0 420px;height:520px;position:relative;display:block;border-radius:20px;background:var(--bg-raised);
  box-shadow:inset 0 0 0 1px var(--hairline);overflow:hidden;text-decoration:none;color:inherit;outline:0;
  transition:box-shadow var(--dur-fast) var(--ease);-webkit-tap-highlight-color:transparent}
.pwc:hover{box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--accent) 40%,transparent)}
.pwc:focus-visible{outline:2px solid var(--accent-lift);outline-offset:3px}
.pwc__in{display:block;height:100%}
.pwc__lift{display:flex;flex-direction:column;height:100%;transition:transform var(--dur-fast) var(--ease)}
.pwc:hover .pwc__lift{transform:translateY(-6px)}
.pwc__media{position:relative;flex:0 0 66%;overflow:hidden;background:var(--bg-surface)}
.pwc__img{position:absolute;inset:0 -12%;
  background-image:repeating-linear-gradient(135deg,var(--hairline) 0 1px,transparent 1px 12px);
  background-color:var(--bg-surface)}
.pwc__scrim{position:absolute;inset:auto 0 0 0;height:62%;background:linear-gradient(to top,var(--bg-raised),transparent)}
.pwc__top{position:absolute;top:1.1rem;left:1.1rem;right:1.1rem;display:flex;justify-content:space-between;
  align-items:flex-start;gap:0.6rem;z-index:2}
.pwc__n{display:inline-flex;padding:0.35rem 0.6rem;border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1px var(--hairline);background:var(--scrim-chip);color:var(--ink)}
.pwc__tags{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:0.4rem;min-width:0;overflow:hidden;margin-left:auto}
.pwc__tag{white-space:nowrap;flex-shrink:0}
.pwc__tag{display:inline-flex;padding:0.35rem 0.6rem;border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1px var(--hairline);background:var(--scrim-chip);color:var(--ink-muted)}
.pwc__body{display:flex;flex-direction:column;gap:0.5rem;padding:1.35rem 1.5rem 1.5rem;padding-right:4.5rem;flex:1}
.pwc__t{font-family:var(--font-display);font-size:1.5rem;font-weight:700;letter-spacing:-0.03em;line-height:1.1;color:var(--ink)}
.pwc__d{font-size:0.95rem;line-height:1.5;color:var(--ink-muted)}
.pwc__go{position:absolute;right:1.25rem;bottom:1.25rem;width:40px;height:40px;border-radius:50%;
  background:var(--accent);color:var(--on-accent);display:grid;place-items:center;
  transition:transform var(--dur-fast) var(--ease)}
.pwc:hover .pwc__go{transform:rotate(-45deg) scale(1.08)}

/* ---- card scene: 3D backdrop + tilted tablet that straightens on hover ---- */
.pwc__scene{position:absolute;inset:0;perspective:1000px;perspective-origin:50% 40%;overflow:hidden;
  background:radial-gradient(120% 90% at 70% 30%,color-mix(in oklab,var(--sc,var(--accent)) 22%,var(--bg-void)) 0%,var(--bg-void) 70%)}
.pwc__floor{position:absolute;left:-40%;right:-40%;bottom:-30%;height:90%;transform:rotateX(74deg);transform-origin:50% 100%;
  background-image:linear-gradient(var(--hairline) 1px,transparent 1px),linear-gradient(90deg,var(--hairline) 1px,transparent 1px);
  background-size:36px 36px;-webkit-mask-image:linear-gradient(to top,#000 10%,transparent 85%);mask-image:linear-gradient(to top,#000 10%,transparent 85%)}
.pwc__bgimg{position:absolute;inset:-6%;background-size:cover;background-position:center;transition:transform 1.1s var(--ease)}
.pwc__orbs{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.1s var(--ease)}
.pwc__orb{position:absolute;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,color-mix(in oklab,var(--accent-lift) 55%,#fff) 0%,var(--accent) 22%,color-mix(in oklab,var(--accent) 45%,var(--bg-void)) 62%,var(--bg-void) 100%);
  animation:pwcFloat 7s var(--ease) infinite alternate}
.pwc__orb--0{width:170px;height:170px;right:-40px;top:14px}
.pwc__orb--1{width:92px;height:92px;left:-22px;top:40px;filter:blur(2px);animation-delay:-2s}
.pwc__orb--2{width:46px;height:46px;left:34%;top:18px;filter:blur(3px);opacity:.7;animation-delay:-4s}
.pwc__orb--3{width:120px;height:120px;left:12%;bottom:-36px;animation-delay:-1s;
  background:radial-gradient(circle at 32% 28%,#fff 0%,#8a8589 18%,#2a282b 60%,var(--bg-void) 100%)}
.pwc__orb--4{width:30px;height:30px;right:26%;bottom:34px;animation-delay:-3s;
  background:radial-gradient(circle at 32% 28%,#fff 0%,#8a8589 25%,#1c1c21 100%)}
.pwc__orb--5{width:64px;height:64px;right:10%;bottom:-12px;filter:blur(4px);opacity:.6;animation-delay:-5s}
@keyframes pwcFloat{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-10px,0)}}
.pwc__dev{position:absolute;left:50%;top:54%;height:68%;width:auto;max-width:80%;aspect-ratio:4/3;margin:0;padding:7px;border-radius:18px;box-sizing:border-box;
  background:#0b0b0e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 0 0 3px #1a1a1f,0 30px 60px -20px rgba(0,0,0,.8);
  transform:translate(-50%,-44%) rotateY(-24deg) rotateX(12deg) rotateZ(-6deg);transform-style:preserve-3d;
  transition:transform 0.6s var(--ease)}
.pwc__screen{display:block;width:100%;height:100%;background-repeat:no-repeat;border-radius:12px;background-color:var(--bg-surface);background-size:cover;background-position:top center;
  background-image:repeating-linear-gradient(135deg,var(--hairline) 0 1px,transparent 1px 12px)}
.pwc__glare{position:absolute;inset:7px;border-radius:12px;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.14) 0%,transparent 38%);transition:opacity 0.6s var(--ease)}
.pwc:hover .pwc__dev,.pwc:focus-visible .pwc__dev{transform:translate(-50%,-50%) rotateY(0) rotateX(0) rotateZ(0) scale(1.04)}
.pwc:hover .pwc__glare{opacity:.4}
.pwc__phone{position:absolute;left:76%;top:58%;height:62%;aspect-ratio:9/19.5;padding:5px;border-radius:20px;box-sizing:border-box;z-index:2;
  background:#0b0b0e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 0 0 3px #1a1a1f,0 24px 44px -14px rgba(0,0,0,.85);
  transform:translate(-50%,-44%) rotateY(-18deg) rotateX(10deg) rotateZ(4deg);transition:transform 0.6s var(--ease)}
.pwc__pscreen{border-radius:15px;background-size:100% auto;background-position:center top;background-color:#fff}
.pwc__pglare{inset:5px;border-radius:15px}
.pwc:hover .pwc__phone,.pwc:focus-visible .pwc__phone{transform:translate(-40%,-50%) rotateY(0) rotateX(0) rotateZ(0) scale(1.04)}
[data-rm="true"] .pwc__phone{transition:none}
.cshero__visual .pwc__phone{display:none}
.pwc:hover .pwc__orbs{transform:translate3d(-8px,4px,0) scale(1.04)}
.pwc:hover .pwc__bgimg{transform:scale(1.04)}
[data-rm="true"] .pwc__orb{animation:none}
/* math scene */
.pwc[style*="--sc"] .pwc__floor{background-image:linear-gradient(color-mix(in oklab,var(--sc) 30%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklab,var(--sc) 30%,transparent) 1px,transparent 1px)}
.pwc__glyph{position:absolute;font:800 1rem/1 var(--font-display);letter-spacing:-0.04em;color:color-mix(in oklab,var(--sc) 70%,#fff);
  text-shadow:1px 1px 0 color-mix(in oklab,var(--sc) 70%,#000),2px 2px 0 color-mix(in oklab,var(--sc) 60%,#000),3px 3px 0 color-mix(in oklab,var(--sc) 50%,#000),4px 4px 0 color-mix(in oklab,var(--sc) 40%,#000),5px 5px 0 color-mix(in oklab,var(--sc) 30%,#000),6px 6px 0 color-mix(in oklab,var(--sc) 20%,#000),10px 14px 18px rgba(0,0,0,.6);
  animation:pwcFloat 7s var(--ease) infinite alternate}
.pwc__glyph--0{font-size:120px;right:-6px;top:-18px;rotate:12deg}
.pwc__glyph--1{font-size:77px;left:-8px;top:10px;filter:blur(1.5px);animation-delay:-2s}
.pwc__glyph--2{font-size:96px;left:8%;bottom:-40px;animation-delay:-4s}
.pwc__glyph--3{font-size:43px;right:16%;bottom:10px;animation-delay:-1s}
.pwc__glyph--4{font-size:32px;left:40%;top:8px;filter:blur(3px);opacity:.6;animation-delay:-3s}
.pwc__glyph--5{font-size:38px;right:3%;bottom:-6px;filter:blur(2.5px);opacity:.55;animation-delay:-5s}
.pwc__cube{position:absolute;left:26%;top:20px;width:44px;height:44px;scale:.8;transform-style:preserve-3d;animation:pwcSpin 18s linear infinite}
.pwc__face{position:absolute;inset:0;box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--sc) 80%,transparent);background:color-mix(in oklab,var(--sc) 10%,transparent)}
.pwc__face--f{transform:translateZ(22px)}.pwc__face--b{transform:rotateY(180deg) translateZ(22px)}
.pwc__face--l{transform:rotateY(-90deg) translateZ(22px)}.pwc__face--r{transform:rotateY(90deg) translateZ(22px)}
.pwc__face--t{transform:rotateX(90deg) translateZ(22px)}.pwc__face--d{transform:rotateX(-90deg) translateZ(22px)}
@keyframes pwcSpin{from{transform:rotateX(-20deg) rotateY(0)}to{transform:rotateX(-20deg) rotateY(360deg)}}
[data-rm="true"] .pwc__glyph,[data-rm="true"] .pwc__cube{animation:none}
@media (prefers-reduced-motion:reduce){.pwc__glyph,.pwc__cube{animation:none}}
[data-rm="true"] .pwc__dev,[data-rm="true"] .pwc__orbs{transition:none}
@media (prefers-reduced-motion:reduce){.pwc__orb{animation:none}}
html[data-theme="light"] .pwc__scene{background:radial-gradient(120% 90% at 70% 30%,color-mix(in oklab,var(--accent) 16%,#fff) 0%,var(--bg-surface) 70%)}

/* ---- below 1100px: no pin, native snap rail ---- */
@media (max-width:1099px){
  .pw__pin{position:static;height:auto;padding:var(--section-y) 0;overflow:visible}
  .pw__head{flex-direction:column;align-items:flex-start;gap:1.25rem}
  .pw__p{text-align:left}
  .pw__vp{overflow:visible}
  .pw__rail{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    transform:none!important;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter)}
  .pw__rail::-webkit-scrollbar{display:none}
  .pwc{flex:0 0 85vw;height:auto;min-height:60svh;scroll-snap-align:start;transform:none!important;opacity:1!important}
  .pwc__img{transform:none!important}
  .pw__bar{display:none}
}

/* ---- reduced motion: vertical stack, no pin ---- */
[data-rm="true"] .pw__pin{position:static;height:auto;padding:var(--section-y) 0;overflow:visible}
[data-rm="true"] .pw__vp{overflow:visible}
[data-rm="true"] .pw__rail{flex-direction:column;overflow:visible;transform:none!important;align-items:stretch}
[data-rm="true"] .pwc{flex:0 0 auto;width:100%;max-width:560px;height:auto;min-height:0;transform:none!important;opacity:1!important}
[data-rm="true"] .pwc__media{flex:0 0 260px}
[data-rm="true"] .pwc__img{transform:none!important}
[data-rm="true"] .pw__bar{display:none}

/* keep the pinned work band clear of the fixed rail nav */
@media (min-width:1100px){
  .pw{--pw-nav:calc(var(--gutter) + 248px + clamp(24px,3vw,48px))}
  .pw__head,.pw__bar{padding-left:var(--pw-nav)}
  .pw__rail{padding-left:max(var(--pw-nav),50vw)}
  /* hackathon list: rows start to the right of the fixed rail nav */
  #hackathon .wrow__c{padding-left:calc(16px + 248px + clamp(24px,3vw,48px))}
}

/* ---- block-based case content (journeys) ---- */
.csb + .csb{margin-top:clamp(2rem,4vw,3rem)}
.csb > div > .csfig,.csb > .csfig{margin-top:0}
.csb > .csdec:not(.cssplit) > .csfig{margin-top:clamp(2rem,4vw,3rem)}
.csnarrow{max-width:640px}
.csmeta{margin:0;color:var(--ink-faint)}
.csfigs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1.25rem}
.csfigs--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr))}
.csfigs .csfig{margin:0}
.csfigs--2 .csfig{align-content:start}
.csfigs--2 .csfig img{aspect-ratio:16/10;object-fit:cover;object-position:left top}
.csfigs--fit .csfig img{aspect-ratio:9/4;object-fit:contain;object-position:center;background:#fff}
.cscmp{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:1rem;align-items:stretch}
.cscmp__c{display:grid;gap:0.6rem;align-content:start;padding:1.5rem;border-radius:22px;background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--hairline)}
.cscmp__c p{margin:0;font:600 1.15rem/1.35 var(--font-display);letter-spacing:-0.01em;color:var(--ink-muted)}
.cscmp__c.is-ours{background:var(--bg-raised)}
.cscmp__c.is-ours p{color:var(--ink)}
.cscmp__arrow{align-self:center;font:400 1.5rem/1 var(--font-mono);color:var(--ink-faint)}
@media (max-width:640px){.cscmp{grid-template-columns:1fr}.cscmp__arrow{justify-self:center;rotate:90deg}}
.csgal{display:grid;gap:1rem}
.csgal__bar{display:flex;align-items:center;gap:1rem 1.5rem}
.csgal__count{flex:none;font:400 var(--fs-meta)/1 var(--font-mono);letter-spacing:0.12em;color:var(--ink-faint)}
.csgal__count b{font-weight:500;color:var(--ink)}
.csgal__prog{flex:1;height:2px;border-radius:2px;background:var(--hairline);overflow:hidden}
.csgal__prog i{display:block;height:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(.04)}
.csgal__btns{display:flex;gap:0.5rem;flex:none}
.csgal__btn{display:grid;place-items:center;width:56px;height:56px;border:0;border-radius:50%;cursor:pointer;background:var(--ink);color:var(--bg-void);
  font:500 1.35rem/1 var(--font-mono);transition:filter var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.csgal__btn:hover:not(:disabled){filter:brightness(1.1)}
.csgal__btn:active:not(:disabled){transform:scale(0.97);filter:brightness(0.9)}
.csgal__btn:disabled{opacity:.25;cursor:default}
.csgal__btn:focus-visible,.csgal__vp:focus-visible,.csphone__frame:focus-visible{outline:2px solid var(--accent-lift);outline-offset:3px}
.csgal__vp{scroll-padding-inline:var(--gutter);scroll-snap-type:none}
.csgal__track{display:flex;gap:20px;padding:0.25rem var(--gutter) 0.5rem;cursor:grab}
.csgal__slide{flex:0 0 clamp(260px,52vw,680px);margin:0;display:grid;gap:0.9rem;align-content:start;scroll-snap-align:start}
.csgal__img{height:clamp(300px,42vw,520px);overflow:hidden;border-radius:22px;background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--hairline)}
.csgal__img img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top;user-select:none}
.csgal__slide figcaption{font-size:0.9rem;line-height:1.5;color:var(--ink-faint);max-width:56ch}
.cspref{display:grid;gap:1.1rem;padding:1.5rem;border-radius:22px;background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--hairline)}
.cspref__legend{display:flex;flex-wrap:wrap;gap:0.5rem 1.25rem;font:400 var(--fs-meta)/1 var(--font-mono);text-transform:uppercase;letter-spacing:0.12em;color:var(--ink-faint)}
.cspref__legend span{display:inline-flex;align-items:center;gap:0.5rem}
.cspref__legend i{width:10px;height:10px;border-radius:3px;background:var(--bg-raised);box-shadow:inset 0 0 0 1px var(--hairline)}
.cspref__legend i.is-most{background:var(--accent);box-shadow:none}
.cspref__row{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:1rem;align-items:center}
.cspref__row b{font:700 1.05rem/1 var(--font-display);color:var(--ink)}
.cspref__bars{display:grid;gap:6px}
.cspref__bar{position:relative;height:26px;width:max(var(--v),2.75rem);border-radius:6px;background:var(--bg-raised);box-shadow:inset 0 0 0 1px var(--hairline);display:flex;align-items:center;justify-content:flex-end;padding:0 0.5rem;box-sizing:border-box}
.cspref__bar span{font:500 0.75rem/1 var(--font-mono);color:var(--ink-muted)}
.cspref__bar.is-most{background:var(--accent);box-shadow:none}
.cspref__bar.is-most span{color:var(--on-accent)}
.csquad{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:1rem}
.csquad__y,.csquad__x{font:400 1rem/1 var(--font-display);color:var(--ink-muted)}
.csquad__y b,.csquad__x b{font-weight:700;color:var(--ink)}
.csquad__y{writing-mode:vertical-rl;rotate:180deg;align-self:center}
.csquad__x{grid-column:2;justify-self:center}
.csquad__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;border-radius:22px;overflow:hidden;background:#D5D6E6;box-shadow:0 0 0 1.5px #14143A}
.csquad__q{display:grid;gap:0.75rem;align-content:start;padding:clamp(1.25rem,2.5vw,1.75rem);min-height:140px}
.csquad__q:nth-child(1){background:#FDEBE0}
.csquad__q:nth-child(2){background:#D7ECE6}
.csquad__q:nth-child(3){background:#F8E4E6}
.csquad__q:nth-child(4){background:#E6E3F8}
.csquad__q b{font:700 clamp(1.15rem,1.8vw,1.4rem)/1.2 var(--font-display);letter-spacing:-0.02em;color:#14143A}
.csquad__q span{font-size:1rem;line-height:1.6;color:#545470}
.csweek{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.csweek__d{display:grid;gap:0.6rem;align-content:start;justify-items:start;padding:1rem;border-radius:14px;background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--hairline)}
.csweek__d .chip{max-width:100%;white-space:normal;text-align:left}
@media (max-width:1000px){.csweek{grid-template-columns:1fr}.csweek__d{grid-auto-flow:column;justify-content:start;align-items:center}}
.csphones{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:clamp(1rem,3vw,2.5rem);justify-items:center}
.csphone{margin:0;display:grid;gap:0.9rem;justify-items:center;width:100%;max-width:300px}
.csphone__frame{width:100%;aspect-ratio:9/18.5;max-height:600px;overflow-y:auto;scrollbar-width:none;padding:8px;box-sizing:border-box;border-radius:32px;background:#0b0b0e;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 0 0 3px #1a1a1f}
.csphone__frame::-webkit-scrollbar{display:none}
.csphone__frame img{display:block;width:100%;height:auto;min-height:100%;object-fit:cover;object-position:top;border-radius:24px}
.csphone figcaption{color:var(--ink-faint)}
.csphones__wrap{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
.csphones__bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem 2rem}
.csphones__legend{display:flex;flex-wrap:wrap;gap:0.75rem 1.5rem;font:400 var(--fs-meta)/1 var(--font-mono);text-transform:uppercase;letter-spacing:0.12em;color:var(--ink-faint)}
.csphones__legend span{display:inline-flex;align-items:center;gap:0.6rem}
.csphones__badge{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#E0306E;color:#fff;font:700 0.7rem/1 var(--font-display);font-style:normal;letter-spacing:0}
.csphones__rl{display:inline-grid;place-items:center;padding:0.2rem 0.35rem;border-radius:4px;background:#E5484D;color:#fff;font:700 0.7rem/1 var(--font-display);font-style:normal;letter-spacing:0}
/* journey chooser */
.csjr__intro{margin:1.25rem 0 0;max-width:56ch}
.csjr__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:1rem}
.csjc{display:flex;flex-direction:column;text-align:left;padding:0;border:0;cursor:pointer;overflow:hidden;border-radius:22px;background:var(--bg-surface);color:inherit;font:inherit;
  box-shadow:inset 0 0 0 1px var(--hairline);transition:background-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);outline:0}
.csjc:hover{background:var(--bg-raised)}
.csjc[aria-pressed="true"]{background:var(--bg-raised);box-shadow:inset 0 0 0 1px var(--ink-faint)}
.csjc:focus-visible{outline:2px solid var(--accent-lift);outline-offset:3px}
.csjc__img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--bg-void);box-shadow:0 1px 0 var(--hairline)}
.csjc__img img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.csjc__body{display:grid;gap:0.6rem;padding:1.5rem}
.csjc__k{display:inline-flex;align-items:center;gap:0.5rem;color:var(--ink-faint)}
.csjc__k i{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.csjc__t{font:700 clamp(1.35rem,2vw,1.75rem)/1.1 var(--font-display);letter-spacing:-0.03em;color:var(--ink);text-wrap:balance}
.csjc__d{font-size:1rem;line-height:1.55;color:var(--ink-muted)}
.csjr__swap{display:grid;gap:1.25rem;justify-items:start}
.csjr__swap .csh2{margin:0;max-width:20ch}
.cssub{gap:0.5rem}
.cssub__jr{display:flex;align-items:center;gap:2px;padding:4px;border-radius:var(--r-pill);background:var(--bg-raised);box-shadow:inset 0 0 0 1px var(--ink-faint);flex:none}
.cssub__jrk{padding:0 0.6rem 0 0.75rem;font:400 var(--fs-meta)/1 var(--font-mono);text-transform:uppercase;letter-spacing:0.12em;color:var(--ink-faint)}
.cssub__jrb[aria-pressed="true"]{background:var(--ink)!important;color:var(--bg-void)!important}
.cssub__jrb:hover:not([aria-pressed="true"]){color:var(--ink)}
.csjc__rec{margin-left:auto;padding:0.3rem 0.6rem;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font-weight:500}
.csjc__k{width:100%}
.csjr__lock{margin:1.5rem 0 0;color:var(--ink-faint)}
.csjr__swap{padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(3rem,6vw,5rem)}
.csjr__swapd{margin:0;max-width:56ch}
.csjr__swap .btn--primary:not(:hover):not(:focus-visible){background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--accent)}
.csaside--tag{padding-top:clamp(2rem,4vw,3rem);box-shadow:0 -1px 0 var(--hairline)}
.csaside__tag{display:inline-flex;margin-bottom:1rem;padding:0.35rem 0.6rem;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--hairline);color:var(--ink-muted)}
@media (max-width:760px){.cssub{flex-wrap:wrap}.cssub__nav{flex:1 1 100%}.cssub__jrk{display:none}}
.cssub__jrb{padding:0.55rem 1.1rem;border:0;border-radius:var(--r-pill);background:none;cursor:pointer;font:600 0.95rem/1 var(--font-display);color:var(--ink-muted);outline:0;transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.cssub__jrb[aria-pressed="true"]{background:var(--bg-raised);color:var(--ink)}
.cssub__jrb:focus-visible{outline:2px solid var(--accent-lift);outline-offset:2px}
.csqmap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.csqmap__c{display:flex;flex-direction:column;gap:.6rem;padding:1.5rem;border-radius:22px;background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--hairline)}
.csqmap__c b{font:700 clamp(1.05rem,1.4vw,1.3rem)/1.3 var(--font-display);letter-spacing:-0.01em;color:var(--ink);text-wrap:pretty}
.csqmap__c span{font-weight:600;color:#32CA7A;line-height:1.45}
.csstick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;padding:clamp(1.25rem,3vw,2.5rem);border-radius:22px;background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--hairline)}
.csstick__n{margin:0;min-height:8.5rem;padding:1.25rem 1.4rem;font:600 1.05rem/1.4 var(--font-display);color:#1d2a20;rotate:var(--r);box-shadow:0 10px 18px -10px rgba(0,0,0,.6);text-wrap:pretty}
.csstick__n--a{background:#FFE58A}
.csstick__n--b{background:#C8F0D8}
.csjour{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.csjour li{position:relative;display:flex;flex-direction:column;gap:.5rem;padding-right:1.25rem}
.csjour li::before{content:"";position:absolute;left:0;right:0;top:20px;height:2px;background:rgba(255,255,255,.18)}
.csjour__dot{position:relative;z-index:1;display:grid;place-items:center;width:42px;height:42px;margin-bottom:1.25rem;border-radius:50%;background:var(--accent);color:var(--on-accent);font:700 1rem/1 var(--font-display)}
.csjour b{font:700 1.2rem/1.2 var(--font-display);color:var(--ink)}
.csjour__d{color:var(--ink-muted);line-height:1.55}
@media (max-width:820px){.csqmap{grid-template-columns:1fr}.csstick{grid-template-columns:1fr 1fr}.csjour{grid-template-columns:1fr;gap:1.5rem}.csjour li{padding:0 0 0 3.75rem;min-height:42px}.csjour li::before{left:20px;right:auto;top:0;bottom:-1.5rem;width:3px;height:auto}.csjour li:last-child::before{display:none}.csjour__dot{position:absolute;left:0;top:0;margin:0}}
@media (max-width:520px){.csstick{grid-template-columns:1fr}}
.csbrand{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.csbrand__c{display:flex;flex-direction:column;gap:.9rem;padding:1.5rem;border-radius:22px;background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--hairline)}
.csbrand__c .csh3{margin:.35rem 0 0}
.csbrand__p{margin:0;color:var(--ink-muted);line-height:1.6;text-wrap:pretty}
.csbrand__tile{display:grid;place-items:center;height:9rem;border-radius:14px;background:#fff;overflow:hidden}
.csbrand__tile img{width:68%;max-width:240px;height:auto}
.csbrand__motif{background:linear-gradient(135deg,transparent 78%,#E3F6EC 78%) top right/100% 100% no-repeat,linear-gradient(-45deg,transparent 82%,#E3F6EC 82%) bottom left/100% 100% no-repeat,#fff;background:#fff;position:relative}
.csbrand__motif::before,.csbrand__motif::after{content:"";position:absolute;width:42%;aspect-ratio:1;background:#E3F6EC}
.csbrand__motif::before{top:0;right:0;clip-path:polygon(0 0,100% 0,100% 100%)}
.csbrand__motif::after{bottom:0;left:0;width:24%;clip-path:polygon(0 0,100% 100%,0 100%)}
.csbrand__sw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;height:9rem}
.csbrand__sw span{display:flex;align-items:flex-end;padding:.8rem;border-radius:14px;font:600 .9rem/1 var(--font-display);box-shadow:inset 0 0 0 1px var(--hairline)}
@media (max-width:900px){.csbrand{grid-template-columns:1fr}}
.csswatch{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.csswatch li{display:flex;flex-direction:column;gap:.6rem}
.csswatch span{display:block;aspect-ratio:2/1;border-radius:14px;box-shadow:inset 0 0 0 1px var(--hairline)}
.csswatch b{color:var(--ink-muted);font-weight:500}
/* tutor scene: quiz answer card + AI sparkles */
.pwc__quiz{position:absolute;left:18%;top:16px;display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:14px;rotate:-7deg;scale:.8;transform-origin:top left;
  background:color-mix(in oklab,var(--sc) 18%,var(--bg-void));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--sc) 45%,transparent),10px 14px 22px rgba(0,0,0,.6);
  animation:pwcFloat 6s var(--ease) infinite alternate}
.pwc__opt{display:flex;align-items:center;gap:8px;width:120px;padding:5px 8px;border-radius:999px;background:color-mix(in oklab,var(--sc) 10%,var(--bg-void));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--sc) 25%,transparent)}
.pwc__opt b{font:700 11px/1 var(--font-mono);color:color-mix(in oklab,var(--sc) 70%,#fff)}
.pwc__opt i{flex:1;height:5px;border-radius:3px;background:color-mix(in oklab,var(--sc) 30%,transparent)}
.pwc__opt em{font-style:normal;font:800 12px/1 var(--font-display);color:var(--bg-void)}
.pwc__opt.is-on{background:color-mix(in oklab,var(--sc) 85%,#fff)}
.pwc__opt.is-on b,.pwc__opt.is-on em{color:var(--bg-void)}
.pwc__opt.is-on i{background:color-mix(in oklab,var(--sc) 40%,#000)}
.pwc__spark.pwc__glyph--0{font-size:88px;right:-4px;top:-10px}
.pwc__spark.pwc__glyph--1{font-size:48px;left:-6px;top:30px}
.pwc__spark.pwc__glyph--2{font-size:67px;left:6%;bottom:-18px}
.pwc__spark.pwc__glyph--3{font-size:29px;right:18%;bottom:14px}
.pwc__spark.pwc__glyph--4{font-size:22px;left:58%;top:10px}
[data-rm="true"] .pwc__quiz{animation:none}
@media (prefers-reduced-motion:reduce){.pwc__quiz{animation:none}}
/* legacy chat bubbles */
.pwc__bubble{position:absolute;display:flex;gap:6px;align-items:center;padding:10px 14px;border-radius:16px 16px 16px 4px;
  background:color-mix(in oklab,var(--sc) 85%,#fff);box-shadow:3px 3px 0 color-mix(in oklab,var(--sc) 55%,#000),6px 6px 0 color-mix(in oklab,var(--sc) 30%,#000),10px 14px 18px rgba(0,0,0,.6);
  animation:pwcFloat 6s var(--ease) infinite alternate}
.pwc__bubble i{width:7px;height:7px;border-radius:50%;background:color-mix(in oklab,var(--sc) 30%,#000)}
.pwc__bubble--0{left:24%;top:18px;rotate:-6deg}
.pwc__bubble--1{right:24%;bottom:18%;rotate:8deg;scale:.8;border-radius:16px 16px 4px 16px;filter:blur(1px);opacity:.8;animation-delay:-3s}
[data-rm="true"] .pwc__bubble{animation:none}
@media (prefers-reduced-motion:reduce){.pwc__bubble{animation:none}}

/* =====================================================================
   LIGHT MODE — same ramp, inverted. Set html[data-theme="light"].
   ===================================================================== */
html[data-theme="light"]{
  color-scheme:light;
  --bg-void:#F2F0EE;
  --bg-surface:#FBFAF9;
  --bg-raised:#FFFFFF;
  --hairline:rgba(8,8,10,0.12);
  --accent-lift:#C4074F;          /* accent text under 18px needs to darken on light */
  --accent-glow:rgba(237,26,109,0.14);
  --ink:#141416;
  --ink-muted:#575356;
  --ink-faint:#6E6A6D;
  --scrim-menu:rgba(242,240,238,0.97);
  --scrim-bar:rgba(251,250,249,0.86);
  --scrim-top:rgba(242,240,238,0.78);
  --scrim-chip:rgba(251,250,249,0.6);
  --cursor-ring:rgba(8,8,10,0.28);
  --drop:rgba(8,8,10,0.18);
}
html[data-theme="light"] .pwc__n,html[data-theme="light"] .pwc__tag{color:var(--ink)}
html[data-theme="light"] .bento .tile--accent:hover{box-shadow:0 16px 40px -14px var(--drop)}
html[data-theme="light"] .csba__knob{box-shadow:0 6px 20px -4px var(--drop)}
@media (prefers-contrast:more){
  html[data-theme="light"]{--hairline:rgba(8,8,10,0.28);--ink-muted:#3E3A3D;--ink-faint:#524E51}
  html[data-theme="light"] .cursor{--hairline-strong:rgba(8,8,10,0.5)}
}

/* cross-fade only while switching, so nothing animates during normal use */
html.is-theming,html.is-theming body,html.is-theming .card,html.is-theming .chip,
html.is-theming .btn,html.is-theming .pwc,html.is-theming .pw,html.is-theming .nav__row,
html.is-theming .bar-nav,html.is-theming .menu,html.is-theming .tt{
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}

/* theme toggle */
.tt{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:3px;border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1px var(--hairline)}
.rail-mark + .tt,.menu__foot .tt{margin-top:0.75rem}
.tt__pill{position:absolute;left:3px;top:3px;width:calc(50% - 3px);height:calc(100% - 6px);border-radius:var(--r-pill);
  background:var(--accent);transition:transform var(--dur-fast) var(--ease)}
.tt[data-on="light"] .tt__pill{transform:translateX(calc(100% + 2px))}
.tt__b{position:relative;z-index:1;display:block;width:100%;background:none;border:0;cursor:pointer;
  padding:0.4rem 0.3rem;border-radius:var(--r-pill);outline:0}
.tt__b:not([data-on]){color:var(--ink-muted)}
.tt__b:not([data-on]):hover{color:var(--ink)}
.tt__b[data-on],.tt__b[data-on]:hover{color:var(--on-accent);font-weight:500}
.tt__b:focus-visible{outline:2px solid var(--accent-lift);outline-offset:2px}
.bar-nav-row{pointer-events:auto;display:flex;align-items:center;gap:8px}
.bar-nav-row > [data-rail-card]{flex:none}
.bar-nav-row .tt{flex:none;width:148px;background:var(--scrim-bar);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:5px}

/* quote wall */
.cswall{columns:3 280px;column-gap:clamp(1rem,2vw,1.5rem)}
.cswall__q{break-inside:avoid;margin:0 0 clamp(1rem,2vw,1.5rem);position:relative;display:grid;gap:1.25rem;padding:clamp(1.5rem,2.5vw,2rem);border-radius:22px;background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--hairline);overflow:hidden;transition:background var(--dur-fast) var(--ease)}
.cswall__q:hover{background:var(--bg-raised)}
.cswall__mark{position:absolute;right:0.9rem;top:-1.6rem;font:800 9rem/1 var(--font-display);color:var(--ink);opacity:0.06;pointer-events:none}
.cswall__q blockquote{margin:0;font:600 clamp(1.15rem,1.6vw,1.4rem)/1.3 var(--font-display);letter-spacing:-0.015em;color:var(--ink);text-wrap:pretty;position:relative}
.cswall__q--1 blockquote,.cswall__q--3 blockquote{font-weight:500;color:var(--ink-muted)}
.cswall__q figcaption{display:grid;gap:0.35rem;padding-top:1rem;box-shadow:0 -1px 0 var(--hairline)}
.cswall__q figcaption span:first-child{font-size:0.95rem;color:var(--ink)}
.cswall__q figcaption .t-meta{color:var(--ink-faint)}
.cswall__q--lead{background:var(--accent)}
.cswall__q--lead:hover{background:var(--accent)}
.cswall__q--lead .cswall__mark{color:var(--on-accent);opacity:0.14}
.cswall__q--lead blockquote{font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.12;letter-spacing:-0.025em;color:var(--on-accent);font-weight:700}
.cswall__q--lead figcaption{box-shadow:0 -1px 0 rgba(8,8,10,0.2)}
.cswall__q--lead figcaption span:first-child,.cswall__q--lead figcaption .t-meta{color:var(--on-accent)}

/* reports scene: bar chart + donut */
.pwc__chart{position:absolute;left:16%;top:14px;width:120px;height:78px;display:flex;align-items:flex-end;gap:6px;padding:10px;border-radius:14px;rotate:-6deg;scale:.8;transform-origin:top left;
  background:color-mix(in oklab,var(--sc) 16%,var(--bg-void));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--sc) 45%,transparent),10px 14px 22px rgba(0,0,0,.6);animation:pwcFloat 6s var(--ease) infinite alternate}
.pwc__chart i{flex:1;border-radius:4px 4px 2px 2px;background:color-mix(in oklab,var(--sc) 40%,var(--bg-void))}
.pwc__chart i.is-on{background:color-mix(in oklab,var(--sc) 85%,#fff)}
.pwc__donut{position:absolute;right:6%;top:18px;width:62px;height:62px;border-radius:50%;scale:.8;
  background:conic-gradient(color-mix(in oklab,var(--sc) 85%,#fff) 0 68%,color-mix(in oklab,var(--sc) 25%,var(--bg-void)) 68% 100%);
  -webkit-mask:radial-gradient(circle,transparent 45%,#000 46%);mask:radial-gradient(circle,transparent 45%,#000 46%);animation:pwcFloat 7s var(--ease) infinite alternate;animation-delay:-3s}
.pwc__rg.pwc__glyph--0{font-size:72px;left:-6px;top:auto;bottom:-14px;right:auto;rotate:-8deg}
.pwc__rg.pwc__glyph--1{font-size:52px;right:24%;top:6px;left:auto;filter:none;opacity:.9}
.pwc__rg.pwc__glyph--2{font-size:40px;right:4%;bottom:6px;left:auto;top:auto}
.pwc__rg.pwc__glyph--3{display:none}
.pwc__rg.pwc__glyph--4{font-size:26px;left:48%;top:4px;filter:blur(2px);opacity:.55}
/* claims scene: stacked claim forms */
.pwc__form{position:absolute;left:18%;top:12px;width:92px;height:112px;display:flex;flex-direction:column;gap:7px;padding:12px 11px;box-sizing:border-box;border-radius:10px;rotate:-8deg;scale:.8;transform-origin:top left;
  background:color-mix(in oklab,var(--sc) 16%,var(--bg-void));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--sc) 45%,transparent),10px 14px 22px rgba(0,0,0,.6);animation:pwcFloat 6s var(--ease) infinite alternate}
.pwc__form--back{left:calc(18% - 18px);top:22px;rotate:-18deg;opacity:.6;animation-delay:-2s}
.pwc__form b{display:block;width:60%;height:7px;border-radius:3px;background:color-mix(in oklab,var(--sc) 85%,#fff)}
.pwc__form i{display:block;height:5px;border-radius:3px;background:color-mix(in oklab,var(--sc) 30%,transparent)}
.pwc__form i:nth-of-type(2){width:80%}.pwc__form i:nth-of-type(3){width:55%}
.pwc__form em{position:absolute;right:-10px;bottom:-10px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:800 15px/1 var(--font-display);font-style:normal;color:var(--bg-void);background:color-mix(in oklab,var(--sc) 85%,#fff)}
.pwc__cg.pwc__glyph--0{font-size:88px;right:-2px;top:-14px;rotate:0deg}
.pwc__cg.pwc__glyph--1{font-size:48px;right:26%;top:10px;left:auto;filter:none;opacity:.9}
.pwc__cg.pwc__glyph--2{font-size:56px;left:4%;bottom:-16px}
.pwc__cg.pwc__glyph--3{font-size:30px;right:16%;bottom:12px}
.pwc__cg.pwc__glyph--4{display:none}
[data-rm="true"] .pwc__chart,[data-rm="true"] .pwc__donut,[data-rm="true"] .pwc__form{animation:none}
@media (prefers-reduced-motion:reduce){.pwc__chart,.pwc__donut,.pwc__form{animation:none}}

.cscallout--vivid{position:relative;overflow:hidden;padding:clamp(1.75rem,4vw,3rem);border-radius:22px;
  background:radial-gradient(120% 140% at 100% 0%,color-mix(in oklab,#1FE0A8 26%,transparent) 0%,transparent 55%),radial-gradient(90% 120% at 0% 100%,var(--accent-glow) 0%,transparent 60%),var(--bg-raised);
  box-shadow:inset 0 0 0 1px color-mix(in oklab,#1FE0A8 45%,transparent)}
.cscallout--vivid .csh3{font-size:clamp(1.75rem,3.2vw,2.75rem)}
.cscallout__k{display:block;margin-bottom:0.9rem;color:#1FE0A8}
.cscallout__chips{display:flex;flex-wrap:wrap;gap:0.6rem;margin-top:1.5rem}
.cscallout__chip{display:inline-flex;padding:0.55rem 0.9rem;border-radius:var(--r-pill);background:var(--bg-void);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hairline)}
.cscallout__chip:first-child{box-shadow:inset 0 0 0 1px #1FE0A8}
.cscallout__chip:last-child{box-shadow:inset 0 0 0 1px var(--accent-lift)}

.wthumb__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:inherit}
.csout--row{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:clamp(0.75rem,1.6vw,1.5rem)}
.csout--row .csout__n{font-size:clamp(1.5rem,2.6vw,2.5rem)}
.csout--row .csout__c{font-size:0.95rem}
@media (max-width:767px){.csout--row{grid-template-columns:1fr 1fr!important}}

#about .sh__desc{max-width:34ch;font:500 clamp(1.25rem,1.9vw,1.6rem)/1.4 var(--font-display);letter-spacing:-0.01em;color:var(--ink);text-wrap:balance}

.pwc__lock{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;display:flex;align-items:center;gap:.5rem;padding:.55rem .9rem;border-radius:999px;background:var(--bg-void);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hairline);white-space:nowrap}
.lockx{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:var(--gutter);background:color-mix(in oklab,var(--bg-void) 82%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.lockx__card{position:relative;width:min(440px,100%);display:flex;flex-direction:column;align-items:flex-start;gap:1rem;padding:2rem;border-radius:22px;background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--hairline)}
.lockx__card .btn{align-self:stretch;justify-content:center}
.lockx__x{position:absolute;top:1rem;right:1rem;width:40px;height:40px;border-radius:999px;border:0;background:transparent;color:var(--ink-muted);font-size:1.5rem;line-height:1;cursor:pointer;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.lockx__x:hover{background:var(--bg-raised);color:var(--ink)}
.lockx__icon{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;background:var(--bg-raised);color:var(--accent-lift)}
.lockx__t{font-family:var(--font-display);font-size:2rem;font-weight:700;letter-spacing:-0.03em;line-height:1.05;margin:0;color:var(--ink)}
.lockx__p{margin:0}
.lockx__field{display:flex;flex-direction:column;gap:.5rem;align-self:stretch}
.lockx__field input{font:inherit;font-size:1rem;color:var(--ink);background:var(--bg-void);border:0;border-radius:14px;padding:.85rem 1rem;box-shadow:inset 0 0 0 1px var(--hairline);outline:0}
.lockx__field input:focus-visible{outline:2px solid var(--accent-lift);outline-offset:3px}
.lockx__err{min-height:1.3em;margin:-.5rem 0 0;font-size:.9rem;color:var(--accent-lift)}
.csfig video{display:block;width:100%;height:auto;border-radius:14px;background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--hairline)}
.cshero[data-slug="ai-native"] .cshero__main{max-width:calc(34ch + 120px)}
@media (min-width:1100px){.cshero--visual[data-slug="ai-native"] .cshero__main{max-width:min(calc(34ch + 120px),calc(58vw + 120px))}}
.csfigs--eq .csfig{align-content:start}
.csfigs--eq .csfig img{aspect-ratio:900/756;object-fit:contain;object-position:center top;background:#fff}
.cslev{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 1.5rem}
.cslev__c{display:grid;align-content:start;gap:0.6rem;padding-top:1.25rem;box-shadow:inset 0 1px 0 var(--hairline)}
.cslev__c.is-hl{box-shadow:inset 0 2px 0 var(--accent)}
.cslev__f{color:var(--ink-faint)}
.cslev__c.is-hl .cslev__f{color:var(--accent-lift)}
.cslev__t{font:700 clamp(1.75rem,3vw,2.5rem)/1 var(--font-display);letter-spacing:-0.04em;color:var(--ink)}
.cslev__d{margin:0;font-size:0.95rem;line-height:1.5;color:var(--ink-muted);max-width:28ch}
@media (max-width:860px){.cslev{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.5rem}}
@media (max-width:480px){.cslev{grid-template-columns:minmax(0,1fr)}}
.squad{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(2rem,5vw,5rem);align-items:center;margin-top:var(--section-gap)}
.squad__txt{display:grid;gap:1.5rem;justify-items:start}
.squad__txt .t-body{margin:0;max-width:44ch}
.squad__vals{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0.5rem}
.squad__fig{display:block;border-radius:22px;overflow:hidden;background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--hairline);outline:0}
.squad__fig:focus-visible{outline:2px solid var(--accent-lift);outline-offset:3px}
.squad__fig img{display:block;width:100%;height:auto}
.cschips{flex-wrap:wrap;gap:0.5rem}
@media (max-width:860px){.squad{grid-template-columns:minmax(0,1fr)}}
.csgrid--q .card__body h3{font-size:1.1rem;line-height:1.4;font-weight:600;letter-spacing:-0.01em;text-wrap:pretty}
.csout__of{font-size:0.5em;font-weight:500;color:var(--ink-faint);letter-spacing:0;margin-left:0.05em}
.cspart{max-width:1400px;margin:clamp(3rem,6vw,5rem) auto 0;padding:clamp(2rem,4vw,3rem) var(--gutter) 0;display:grid;gap:0.75rem;box-shadow:0 -1px 0 var(--hairline)}
.cspart__k{color:var(--accent-lift)}
.cspart__t{font:700 clamp(1.75rem,3.2vw,2.75rem)/1.05 var(--font-display);letter-spacing:-0.03em;color:var(--ink-muted)}
.cspart + .cssec{padding-top:clamp(2rem,4vw,3rem)}