/* ============================================================
   eSora Studio v5 — design system (ported from v4, pure white)
   ============================================================ */
:root{
  --white:#FFFFFF; --gray:#F6F7F8;
  --ink:#0B0B0C; --ink2:#4A4A4F; --muted:#8A8A92;
  --hair:rgba(10,10,12,.08); --hair2:rgba(10,10,12,.14);
  --acc:#F04E23; --acc2:#D63F16; --acctint:rgba(240,78,35,.07);
  --ok:#1E8E5A; --violet:#7A5CFF; --coral:#FF7A59;
  --disp:'Clash Display',Inter,system-ui,sans-serif;
  --serif:'Gambetta',Georgia,'Times New Roman',serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --gut:clamp(20px,5vw,64px);
  --max:1320px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html.lenis{height:auto;scroll-behavior:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
body{background:var(--white);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--acc);color:#fff}
img,svg{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
section{position:relative}
.pad{padding-top:clamp(88px,10vw,140px);padding-bottom:clamp(88px,10vw,140px)}
.band{background:var(--gray)}
/* ---------- scroll thread ---------- */
#thread{position:fixed;top:0;left:0;right:0;height:2px;z-index:1200;pointer-events:none}
#thread i{display:block;height:100%;background:var(--acc);transform:scaleX(0);transform-origin:0 50%;will-change:transform}
/* ---------- type ---------- */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--acc)}
.eyebrow em{font-style:normal;color:var(--acc)}
/* v11: Gambetta 500 is reserved for page-hero H1s and the black finale statement
   ONLY. Section H2s are clean sans — Inter 600, -0.02em. Clash Display 600 stays
   for H3s, wordmark, buttons, numerals, labels */
h1{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;line-height:1.04}
h2{font-family:var(--body);font-weight:600;letter-spacing:-.02em;line-height:1.04}
h3{font-family:var(--disp);font-weight:600;letter-spacing:-.03em;line-height:.96}
h2{font-size:clamp(2.4rem,5vw,4.4rem);margin:18px 0 0}
.intro{font-size:clamp(16px,1.35vw,18px);color:var(--ink2);max-width:620px;margin-top:22px}
.sec-head{margin-bottom:clamp(44px,6vw,72px)}
.acc-word{color:var(--acc)}
/* accent words: Clash Display in signal orange + hand-drawn swoosh (draws in once) */
.acc-sw{position:relative;display:inline-block;color:var(--acc);font-style:normal;letter-spacing:-.02em}
.rl>i.acc-sw{display:inline-block}
.acc-sw .swoosh{position:absolute;left:-2%;bottom:.01em;width:104%;height:.16em;overflow:visible;pointer-events:none}
.acc-sw .swoosh path{fill:none;stroke:var(--acc);stroke-width:3px;stroke-linecap:round}
/* v11: headline accent word — signal orange, NO italic inside sans section H2s
   (the mixed serif/italic clash ends); italic survives only inside Gambetta
   page-hero H1s and the black finale statement. Swoosh survives only on the
   home hero "creative". */
.acc-it{color:var(--acc);letter-spacing:-.01em}
h1 .acc-it,#finale .acc-it{font-style:italic}
.rl>i.acc-it{display:inline-block;padding-right:.07em}
/* mask-rise reveal */
.rl{display:block;overflow:hidden}
.rl>i{display:block;transform:translateY(110%);font-style:inherit;padding-bottom:.12em;margin-bottom:-.12em}
.no-anim .rl>i{transform:none}
.rv{opacity:0;transform:translateY(24px)}
.no-anim .rv{opacity:1;transform:none}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:500;font-size:15px;letter-spacing:-.01em;word-spacing:.14em;white-space:nowrap;padding:15px 28px;border-radius:999px;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);will-change:transform;min-height:48px}
.btn .ar{transition:transform .35s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--acc)}
.btn-ghost{border:1px solid var(--hair2);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink);background:var(--gray)}
.btn-acc{background:var(--acc);color:#fff}
.btn-acc:hover{background:var(--acc2)}
.btn-wo{border:1px solid rgba(255,255,255,.32);color:#fff}
.btn-wo:hover{background:#fff;color:var(--ink)}
.btn-wg{border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.72)}
.btn-wg:hover{border-color:rgba(255,255,255,.5);color:#fff}
/* ---------- NAV ---------- */
#nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:900;width:min(1200px,calc(100% - 32px));height:58px;display:flex;align-items:center;gap:14px;padding:0 10px 0 16px;border-radius:999px;background:rgba(255,255,255,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--hair);transition:background .4s,border-color .4s,height .4s var(--ease)}
#nav.scrolled{height:50px}
#nav .wordmark{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:600;font-size:18px;letter-spacing:-.02em;word-spacing:.14em;white-space:nowrap;transition:color .4s}
#nav .wordmark .mark{width:26px;height:26px;flex:none}
#nav .wordmark sup{font-size:.48em;font-weight:600;letter-spacing:0}
#nav .links{display:flex;gap:4px;margin-left:auto}
#nav .links a{font-size:13.5px;font-weight:500;color:var(--ink2);padding:9px 13px;border-radius:999px;transition:color .3s,background .3s;position:relative}
#nav .links a:hover{color:var(--ink)}
#nav .links a.active{color:var(--acc)}
#nav .links a.active::after{content:"";position:absolute;left:50%;bottom:3px;width:4px;height:4px;border-radius:50%;background:var(--acc);transform:translateX(-50%)}
#nav .slots{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap;margin-left:8px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(30,142,90,.15);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(30,142,90,.15)}50%{box-shadow:0 0 0 6px rgba(30,142,90,.05)}}
#nav .btn{padding:11px 20px;font-size:13.5px;min-height:40px;margin-left:8px}
#nav .btn .ar{font-style:normal}
#nav.dark{background:rgba(11,11,12,.6);border-color:rgba(255,255,255,.12)}
#nav.dark .wordmark,#nav.dark .links a{color:rgba(255,255,255,.85)}
#nav.dark .links a:hover{color:#fff}
#nav.dark .links a.active{color:var(--acc)}
#nav.dark .slots{color:rgba(255,255,255,.5)}
#nav.dark .btn-ink{background:#fff;color:var(--ink)}
#nav.dark .btn-ink:hover{background:var(--acc);color:#fff}
#burger{display:none;width:44px;height:44px;margin-left:auto;position:relative;border-radius:50%}
#burger span{position:absolute;left:11px;width:22px;height:1.6px;background:var(--ink);transition:transform .4s var(--ease),top .4s var(--ease),background .4s}
#burger span:nth-child(1){top:17px}
#burger span:nth-child(2){top:26px}
#nav.dark #burger span{background:#fff}
#burger.open span:nth-child(1){top:21px;transform:rotate(45deg)}
#burger.open span:nth-child(2){top:21px;transform:rotate(-45deg)}
/* mobile overlay menu */
#menu{position:fixed;inset:0;z-index:880;background:var(--white);display:flex;flex-direction:column;justify-content:center;padding:0 var(--gut);opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s}
#menu.open{opacity:1;visibility:visible}
#menu .menu-mark{position:absolute;top:26px;left:var(--gut);width:34px;height:34px}
#menu a.mlink{font-family:var(--disp);font-weight:600;font-size:clamp(2.4rem,9vw,4rem);letter-spacing:-.03em;line-height:1.22;display:flex;align-items:baseline;gap:16px;opacity:0;transform:translateY(30px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s}
#menu.open a.mlink{opacity:1;transform:none}
#menu a.mlink:hover{color:var(--acc)}
#menu a.mlink i{font-family:var(--mono);font-style:normal;font-size:12px;color:var(--muted)}
#menu .mfoot{margin-top:48px;display:flex;gap:14px;flex-wrap:wrap;opacity:0;transition:opacity .5s .3s}
#menu.open .mfoot{opacity:1}
/* ---------- HERO (home) ---------- */
#hero{min-height:100svh;display:flex;align-items:center;padding-top:120px;padding-bottom:60px;overflow:hidden;background:var(--white)}
#hero .wrap{position:relative;width:100%}
.hero-grid{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);align-items:center;gap:0}
@media(min-width:1620px){.hero-grid{grid-template-columns:minmax(0,60fr) minmax(0,40fr)}}
.hero-type{position:relative;z-index:3}
.hero-eyebrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,40px)}
.hero-eyebrow .live{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hero-eyebrow .live .dot{width:8px;height:8px}
/* v13 A — hero world-clock chip: bigger mono clock, expands into a live 6-office strip */
.wclock{display:inline-flex;align-items:center;position:relative}
.wclock-chip{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:14.5px;letter-spacing:.02em;color:var(--ink);padding:10px 16px;border:1px solid var(--hair2);border-radius:999px;background:rgba(255,255,255,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:border-color .3s,box-shadow .3s;min-height:44px}
.wclock-chip:hover{border-color:rgba(240,78,35,.45);box-shadow:0 8px 22px -12px rgba(240,78,35,.35)}
.wclock.open .wclock-chip{border-color:rgba(240,78,35,.45);border-radius:999px 999px 0 0;border-bottom-color:transparent}
.wclock-chip .wc-home{font-weight:500}
.wclock-chip .wc-sep{color:var(--muted)}
.wclock-chip .wc-time{font-weight:500;font-variant-numeric:tabular-nums;min-width:8ch}
.wclock-chip .dot{width:8px;height:8px;flex:none}
.wc-chev{width:9px;height:6px;transition:transform .35s var(--ease)}
.wc-chev path{fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wclock.open .wc-chev{transform:rotate(180deg)}
.wclock-strip{position:absolute;top:calc(100% - 1px);left:0;z-index:5;display:flex;align-items:stretch;background:#fff;border:1px solid rgba(240,78,35,.45);border-radius:0 16px 16px 16px;box-shadow:0 24px 48px -22px rgba(11,11,12,.28);padding:6px 4px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;white-space:nowrap}
.wclock.open .wclock-strip{opacity:1;visibility:visible;transform:none}
.wc-item{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12.5px;letter-spacing:.01em;color:var(--ink2);padding:7px 13px;opacity:0;transform:translateY(5px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.wc-item+.wc-item{border-left:1px solid var(--hair)}
.wc-item b{font-weight:500;color:var(--muted)}
.wc-item i{font-style:normal;font-weight:500;font-variant-numeric:tabular-nums}
.wc-item.wc-first b{color:var(--acc)}
.wc-item.wc-first i{color:var(--acc)}
.wclock.open .wc-item{opacity:1;transform:none}
.wclock.open .wc-item:nth-child(1){transition-delay:.03s}
.wclock.open .wc-item:nth-child(2){transition-delay:.08s}
.wclock.open .wc-item:nth-child(3){transition-delay:.13s}
.wclock.open .wc-item:nth-child(4){transition-delay:.18s}
.wclock.open .wc-item:nth-child(5){transition-delay:.23s}
.wclock.open .wc-item:nth-child(6){transition-delay:.28s}
@media(max-width:640px){
  .wclock-strip{flex-wrap:wrap;white-space:normal;max-width:min(340px,calc(100vw - 40px))}
  .wc-item:nth-child(4){border-left:0}
}
@media(prefers-reduced-motion:reduce){
  .wclock-strip,.wc-item,.wc-chev{transition:none}
  .wclock.open .wc-item{transition-delay:0s}
}
#hero h1{font-size:clamp(3rem,6.9vw,6.1rem);font-weight:500}
h1 .rl>i{white-space:nowrap}
.hero-sub{font-size:clamp(16px,1.5vw,19px);color:var(--ink2);max-width:560px;margin-top:clamp(22px,3vw,34px)}
.hero-ctas{display:flex;gap:14px;margin-top:clamp(26px,3.4vw,40px);flex-wrap:wrap}
/* the living mark */
.mark-zone{position:relative;z-index:2;height:min(66vmin,680px);margin-left:0}
#markWrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
#markCanvas{width:100%;height:100%;display:block;cursor:crosshair;touch-action:pan-y}
#markFallback{display:none;width:min(54vmin,500px);height:auto;animation:floaty 7.5s ease-in-out infinite}
body.mark-static #markCanvas{display:none}
body.mark-static #markFallback{display:block}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-14px) rotate(1.4deg)}}
.mark-hint{position:absolute;bottom:2%;left:50%;transform:translateX(-50%);font-family:var(--body);font-size:13px;letter-spacing:0;color:var(--muted);white-space:nowrap}
.mark-hint em{font-style:normal;color:var(--acc)}
/* ---------- ORIGINS — ROOTED IN CANADA (studio, v9) ---------- */
#origins{background:var(--white)}
#canadaStage{position:relative;margin-top:clamp(36px,4.6vw,58px);height:clamp(300px,42vh,480px);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);display:flex;align-items:center;justify-content:center;overflow:hidden}
#canadaCanvas{width:100%;height:100%;display:block;cursor:crosshair;touch-action:pan-y}
#canadaFallback{display:none;width:min(38vmin,300px);height:auto}
#canadaStage.static #canadaCanvas{display:none}
#canadaStage.static #canadaFallback{display:block}
.canada-hint{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap;pointer-events:none}
@media(max-width:860px){
  #canadaStage{height:clamp(260px,40vh,380px)}
}
.scroll-cue{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.scroll-cue .line{width:1px;height:44px;background:var(--hair2);position:relative;overflow:hidden}
.scroll-cue .line::after{content:"";position:absolute;left:0;top:-50%;width:100%;height:50%;background:var(--acc);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{top:-50%}100%{top:110%}}
/* ---------- PRACTICE STRIP ---------- */
#practice{background:var(--white)}
.pr-list{border-top:1px solid var(--hair)}
.pr-link{display:flex;align-items:baseline;gap:clamp(14px,3vw,34px);padding:clamp(14px,2vw,22px) 4px;border-bottom:1px solid var(--hair);font-family:var(--disp);font-weight:600;font-size:clamp(1.7rem,4.4vw,3.4rem);letter-spacing:-.03em;line-height:1;transition:color .3s,padding-left .4s var(--ease)}
.pr-link i{font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.12em;color:var(--muted);font-weight:400}
.pr-link em{font-family:var(--disp);font-style:normal;font-weight:500;color:var(--acc);opacity:0;max-width:0;overflow:hidden;transition:opacity .35s,max-width .45s var(--ease);font-size:.5em;letter-spacing:-.01em;white-space:nowrap}
.pr-link:hover{color:var(--acc);padding-left:16px}
.pr-link:hover em{opacity:1;max-width:300px}
.pr-promise{margin-top:clamp(30px,4vw,48px);font-size:clamp(15px,1.3vw,17px);color:var(--ink2);max-width:560px}
.pr-promise b{color:var(--ink);font-weight:600}
/* ---------- WORK ---------- */
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,28px)}
.wcard{position:relative;background:linear-gradient(180deg,#fff, var(--gray));border:1px solid var(--hair);border-radius:22px;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;display:flex;flex-direction:column;text-align:left;width:100%}
.wcard:hover{transform:translateY(-6px);box-shadow:0 30px 70px -34px rgba(11,11,12,.22);border-color:var(--hair2)}
.wcard.tilting{transition:box-shadow .5s var(--ease),border-color .4s}
.wcard.tilting:hover{transform:none}
.wcard .art{aspect-ratio:16/10;overflow:hidden;position:relative}
.wcard .art .artpar{width:100%;height:112%;will-change:transform}
.wcard .art .artfloat{width:100%;height:100%;will-change:transform;transition:transform .9s var(--ease)}
.wcard:hover .art .artfloat{transform:translate(var(--px,0px),var(--py,0px)) scale(1.07)}
.wcard .art svg{width:100%;height:100%}
.wcard .art img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
/* featured cards: ambient 20s drift loop */
.wcard.feat .art svg{animation:artDrift 20s ease-in-out infinite alternate}
@keyframes artDrift{0%{transform:translate(-7px,-4px) scale(1.04)}50%{transform:translate(5px,6px) scale(1.065)}100%{transform:translate(8px,-5px) scale(1.08)}}
/* cursor cue tag (JS-driven, fine pointers only) */
.case-tag{position:absolute;top:0;left:0;z-index:6;pointer-events:none;display:inline-flex;align-items:center;gap:7px;background:var(--ink);color:#fff;font-family:var(--disp);font-weight:500;font-size:12.5px;letter-spacing:-.01em;padding:8px 14px;border-radius:999px;white-space:nowrap;box-shadow:0 12px 26px -12px rgba(11,11,12,.45);opacity:0;transition:opacity .25s var(--ease);will-change:transform}
.case-tag .ar{color:var(--coral);font-style:normal}
.wcard.tag-on .case-tag{opacity:1}
.wcard .meta{padding:clamp(18px,2.2vw,26px);display:flex;flex-direction:column;gap:8px;flex:1}
.wcard h3{font-size:clamp(1.35rem,2vw,1.75rem);letter-spacing:-.02em;line-height:1.05}
.wcard .tags{font-size:13px;color:var(--muted)}
.wcard .flag{position:absolute;top:14px;left:14px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);border:1px solid var(--hair);padding:6px 12px;border-radius:999px;display:flex;align-items:center;gap:7px;color:var(--ink2);z-index:2}
.wcard .flag .dot{width:6px;height:6px;animation:none}
.wcard .go{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:500;font-size:14px;margin-top:auto;padding-top:10px;color:var(--ink)}
.wcard .go .ar{transition:transform .35s var(--ease);color:var(--acc)}
.wcard:hover .go .ar{transform:translateX(6px)}
.wcard.feat{grid-column:1/-1}
.wcard.feat .art{aspect-ratio:16/9}
.wcard.feat h3{font-size:clamp(1.7rem,2.6vw,2.3rem)}
/* ---------- PROCESS v11 WAVE C — scroll-driven journey ----------
   Sans only in this section (Inter). Orange is reserved for progress,
   the active stage, and actions. No serif, no italic, no mono. */
.pj,.pj h2,.pj h3{font-family:var(--body)}
.pj-head{max-width:900px;margin-bottom:clamp(48px,6vw,84px)}
.pj-title{font-weight:500;font-size:clamp(44px,6.4vw,72px);letter-spacing:-.03em;line-height:1;margin:0}
.pj-state{font-weight:500;font-size:clamp(28px,3.6vw,46px);letter-spacing:-.025em;line-height:1.08;margin-top:clamp(18px,2.4vw,28px)}
.pj-sub{font-size:clamp(18px,1.5vw,20px);line-height:1.5;color:var(--ink2);max-width:620px;margin-top:clamp(16px,2vw,22px)}
.pj-grid{display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);gap:clamp(40px,5vw,84px);align-items:start}
/* LEFT — sticky preview panel */
.pj-left{position:sticky;top:104px}
.pj-panel{position:relative;background:var(--white);border:1px solid var(--hair);border-radius:24px;padding:clamp(22px,2.4vw,32px);box-shadow:0 34px 80px -48px rgba(11,11,12,.22);overflow:hidden;min-height:480px;display:flex;flex-direction:column}
.pj-dots{display:flex;align-items:center;flex-wrap:wrap;gap:2px}
.pj-dot{position:relative;display:inline-flex;align-items:center;padding:6px 7px;border-radius:8px;font-weight:500;font-size:15px;letter-spacing:.02em;color:var(--muted);transition:color .35s,background .35s}
.pj-dot:hover{color:var(--ink);background:var(--gray)}
.pj-dot .n{transition:color .35s}
.pj-dot.on{color:var(--acc)}
.pj-dot.done{color:var(--ink2)}
.pj-dot .ck{width:9px;height:9px;margin-left:3px;transform:translateY(-4px);opacity:0;transition:opacity .35s,transform .35s var(--ease)}
.pj-dot .ck path{stroke:var(--acc);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pj-dot.done .ck{opacity:1;transform:translateY(-4px) scale(1)}
.pj-sep{color:var(--hair2);font-size:13px;user-select:none}
.pj-cur{display:flex;align-items:baseline;gap:10px;margin-top:clamp(16px,2vw,22px)}
.pj-cur-num{font-weight:500;font-size:15px;color:var(--acc);letter-spacing:.02em}
.pj-cur-of{font-weight:500;font-size:15px;color:var(--muted);letter-spacing:.02em}
.pj-cur-name{font-weight:500;font-size:clamp(24px,2.4vw,30px);letter-spacing:-.02em;line-height:1.1;margin-left:6px;transition:opacity .3s}
.pj-visual{margin-top:clamp(18px,2.2vw,26px);background:var(--gray);border:1px solid var(--hair);border-radius:16px;overflow:hidden}
.pj-visual svg{width:100%;height:auto;display:block}
.pj-visual .v-l{opacity:0;transition:opacity .7s var(--ease)}
.pj-visual[data-stage="1"] .v-dots,.pj-visual[data-stage="1"] .v-links,
.pj-visual[data-stage="2"] .v-frames,
.pj-visual[data-stage="3"] .v-screens,.pj-visual[data-stage="4"] .v-screens,
.pj-visual[data-stage="4"] .v-live,
.pj-visual[data-stage="5"] .v-blocks,.pj-visual[data-stage="6"] .v-blocks,
.pj-visual[data-stage="6"] .v-rise{opacity:1}
/* screen content bars fill in when the screens appear */
.pj-visual .v-screens .bar{transform:scaleX(0);transform-origin:left center;transition:transform .7s var(--ease)}
.pj-visual[data-stage="3"] .v-screens .bar,.pj-visual[data-stage="4"] .v-screens .bar{transform:scaleX(1)}
.pj-visual[data-stage="3"] .v-screens .bar:nth-of-type(2),.pj-visual[data-stage="4"] .v-screens .bar:nth-of-type(2){transition-delay:.08s}
.pj-visual[data-stage="3"] .v-screens .bar:nth-of-type(3),.pj-visual[data-stage="4"] .v-screens .bar:nth-of-type(3){transition-delay:.16s}
.pj-visual[data-stage="3"] .v-screens .bar:nth-of-type(4),.pj-visual[data-stage="4"] .v-screens .bar:nth-of-type(4){transition-delay:.24s}
/* RIGHT — chapters + progress rail */
.pj-right{position:relative;padding-left:clamp(28px,3vw,44px)}
.pj-line{position:absolute;left:0;top:12px;bottom:12px;width:2px;background:var(--hair);border-radius:2px;overflow:hidden}
.pj-line i{display:block;width:100%;height:100%;background:var(--acc);transform:scaleY(0);transform-origin:0 0}
.pj-ch{min-height:90vh;display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,3vw,44px) 0;scroll-margin-top:96px}
.pj-ch-head{display:flex;align-items:baseline;gap:clamp(14px,1.8vw,22px);margin-bottom:clamp(20px,2.4vw,30px)}
.pj-ch-num{font-weight:500;font-size:clamp(15px,1.3vw,17px);letter-spacing:.04em;color:var(--muted);transition:color .4s}
.pj-ch.on .pj-ch-num{color:var(--acc)}
.pj-ch-name{font-weight:600;font-size:clamp(1.7rem,2.8vw,2.4rem);letter-spacing:-.025em;line-height:1.05;margin:0;color:var(--ink);opacity:.32;transition:opacity .5s var(--ease)}
.pj-ch.on .pj-ch-name{opacity:1}
.pj-block{max-width:600px}
.pj-block+.pj-block{margin-top:clamp(18px,2vw,24px)}
.pj-lab{font-weight:500;font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;gap:10px}
.pj-lab::before{content:"";width:14px;height:1px;background:var(--hair2)}
.pj-block>p:not(.pj-lab){font-size:18px;line-height:1.55;color:var(--ink2)}
.pj-recv{list-style:none;border-top:1px solid var(--hair)}
.pj-recv li{font-size:18px;line-height:1.5;color:var(--ink2);padding:10px 0;border-bottom:1px solid var(--hair)}
.pj-recv li b{font-weight:600;color:var(--ink)}
.pj-sample-link{display:inline-flex;align-items:center;gap:8px;margin-top:clamp(22px,2.4vw,28px);font-weight:600;font-size:15.5px;color:var(--acc)}
.pj-sample-link .ar{font-style:normal;transition:transform .35s var(--ease)}
.pj-sample-link:hover .ar{transform:translateX(5px)}
/* sample deliverable — stylized mini artifact (left panel swap + mobile inline) */
.pj-sample{display:flex;flex-direction:column;gap:18px}
.pj-sample[hidden]{display:none}
.pj-back{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--acc)}
.pj-back:hover{text-decoration:underline;text-underline-offset:4px}
.pj-doc{background:var(--white);border:1px solid var(--hair);border-radius:16px;padding:clamp(20px,2vw,26px);box-shadow:0 22px 50px -34px rgba(11,11,12,.25)}
.pj-doc-k{font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pj-doc-t{font-weight:600;font-size:clamp(19px,1.8vw,22px);letter-spacing:-.02em;margin-top:8px}
.pj-doc-rule{display:block;height:1px;background:var(--hair2);margin:16px 0 14px}
.pj-doc-line{display:block;height:6px;border-radius:3px;background:rgba(11,11,12,.12);margin-top:9px}
.pj-doc-line.strong{background:rgba(11,11,12,.32);height:7px}
.pj-doc-sec{font-weight:600;font-size:13.5px;color:var(--ink);margin-top:18px}
.pj-doc-sig{display:flex;align-items:center;gap:8px;margin-top:20px;padding-top:14px;border-top:1px solid var(--hair);font-weight:500;font-size:12.5px;color:var(--muted)}
.pj-doc-sig svg{width:11px;height:11px;flex:none}
.pj-doc-sig path{stroke:var(--acc);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pj-doc-screen{border:1px solid var(--hair2);border-radius:12px;overflow:hidden;margin-top:14px}
.pj-doc-screen .bar-top{display:flex;gap:5px;padding:9px 12px;border-bottom:1px solid var(--hair);background:var(--gray)}
.pj-doc-screen .bar-top i{width:8px;height:8px;border-radius:50%;background:rgba(11,11,12,.18)}
.pj-doc-screen .scr-body{padding:16px 14px 18px}
.pj-doc-btn{display:block;width:86px;height:20px;border-radius:10px;background:var(--ink);margin-top:14px}
.pj-doc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:16px}
.pj-doc-grid i{display:block;height:34px;border-radius:8px;background:rgba(11,11,12,.07);border:1px solid rgba(11,11,12,.16)}
.pj-doc-grid i.solid{background:var(--ink);border-color:var(--ink)}
.pj-msample{margin-top:16px}
.pj-msample[hidden]{display:none}
/* mobile: static per-stage visual inside each chapter */
.pj-mvisual{display:none}
@media(max-width:899px){
  .pj-grid{grid-template-columns:1fr}
  .pj-left{display:none}
  .pj-ch{min-height:0;padding:clamp(30px,7vw,44px) 0}
  .pj-mvisual{display:block;margin-top:clamp(20px,4vw,28px);background:var(--gray);border:1px solid var(--hair);border-radius:16px;overflow:hidden;max-width:520px}
  .pj-mvisual svg{width:100%;height:auto;display:block}
}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:12.5px;padding:7px 13px;border:1px solid var(--hair2);border-radius:999px;color:var(--ink2);background:var(--white);transition:border-color .3s,color .3s}
.chip:hover{border-color:var(--acc);color:var(--acc)}
/* ---------- LABS ---------- */
.labs-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(18px,3vw,32px);align-items:stretch}
.lab-card{background:var(--white);border:1px solid var(--hair);border-radius:22px;padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;gap:12px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.lab-card:hover{transform:translateY(-4px);box-shadow:0 26px 60px -32px rgba(11,11,12,.18)}
.lab-card .eyebrow{margin-bottom:4px}
.lab-card .lab-mark{width:46px;height:46px;margin-bottom:6px}
.lab-card h3{font-size:clamp(1.7rem,2.6vw,2.3rem);letter-spacing:-.02em}
.lab-card .role{font-family:var(--disp);font-weight:500;font-size:19px;letter-spacing:-.01em;color:var(--acc)}
.lab-card p{font-size:14.5px;color:var(--ink2)}
.lab-card .chips{margin-top:auto;padding-top:10px}
.labs-arrow{align-self:center;width:clamp(60px,7vw,110px)}
.labs-arrow path{stroke:var(--acc);stroke-width:1.6;fill:none}
.labs-quote{text-align:center;margin-top:clamp(48px,6vw,72px);font-family:var(--disp);font-weight:500;letter-spacing:-.015em;font-size:clamp(19px,2.2vw,24px);color:var(--ink2);max-width:760px;margin-left:auto;margin-right:auto;line-height:1.35}
.labs-quote b{color:var(--acc);font-weight:500}
/* ---------- SERVICES ---------- */
.svc-row{border-top:1px solid var(--hair)}
.svc-row:last-child{border-bottom:1px solid var(--hair)}
.svc-head{width:100%;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:clamp(14px,2.4vw,30px);padding:clamp(16px,2.2vw,24px) clamp(8px,1.4vw,18px);text-align:left;border-radius:14px;transition:background .35s;min-height:60px}
.svc-head:hover{background:var(--gray)}
.svc-row.open .svc-head{background:var(--gray)}
.svc-head .idx{font-family:var(--body);font-weight:500;font-size:12px;color:var(--muted);letter-spacing:.08em;width:30px}
.svc-row.open .svc-head .idx,.svc-head:hover .idx{color:var(--acc)}
.svc-head .name{font-family:var(--disp);font-weight:600;font-size:clamp(1.3rem,2.4vw,1.9rem);letter-spacing:-.02em;line-height:1.05}
.svc-head .desc{font-size:13px;color:var(--muted);max-width:280px;text-align:right}
.svc-body{height:0;overflow:hidden}
.svc-inner{padding:4px clamp(8px,1.4vw,18px) clamp(22px,2.6vw,30px);display:flex;flex-wrap:wrap;gap:8px;margin-left:clamp(30px,4vw,60px)}
/* ---------- CONFIGURATOR ---------- */
.cfg-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,56px);align-items:start}
.cfg-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cfg-card{position:relative;background:var(--white);border:1px solid var(--hair);border-radius:16px;padding:18px 16px 16px;min-height:96px;display:flex;flex-direction:column;gap:6px;text-align:left;transition:border-color .3s,background .3s,transform .3s var(--ease),box-shadow .3s}
.cfg-card:hover{border-color:var(--hair2);transform:translateY(-2px)}
.cfg-card .t{font-family:var(--disp);font-weight:600;font-size:14.5px;letter-spacing:-.01em;line-height:1.15;padding-right:22px}
.cfg-card .s{font-size:11.5px;color:var(--muted);line-height:1.4}
.cfg-card .ck{position:absolute;top:12px;right:12px;width:20px;height:20px;border:1.5px solid var(--hair2);border-radius:50%;transition:background .3s,border-color .3s}
.cfg-card .ck svg{position:absolute;inset:0;margin:auto;width:10px;height:10px}
.cfg-card .ck path{stroke:#fff;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .35s var(--ease) .05s}
.cfg-card.sel{border-color:var(--acc);background:var(--acctint);box-shadow:0 10px 26px -16px rgba(240,78,35,.4)}
.cfg-card.sel .ck{background:var(--acc);border-color:var(--acc)}
.cfg-card.sel .ck path{stroke-dashoffset:0}
.cfg-sum{position:sticky;top:120px;background:var(--white);border:1px solid var(--hair);border-radius:22px;padding:clamp(24px,2.6vw,34px);box-shadow:0 30px 70px -44px rgba(11,11,12,.25)}
.cfg-sum .eyebrow{margin-bottom:16px}
.cfg-sum .pkg{font-family:var(--disp);font-weight:600;font-size:clamp(1.6rem,2.4vw,2.1rem);letter-spacing:-.02em;line-height:1.05;min-height:1.1em}
.cfg-sum .pkg.empty{color:var(--muted)}
.cfg-sum .cnt{font-size:13px;color:var(--muted);margin-top:8px}
.cfg-sum .cnt b{color:var(--acc);font-weight:600}
.cfg-sum .rows{margin:20px 0;border-top:1px solid var(--hair)}
.cfg-sum .row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--hair);font-size:14px}
.cfg-sum .row .k{color:var(--muted);font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;align-self:center}
.cfg-sum .row .v{font-weight:500;font-family:var(--disp);letter-spacing:-.01em}
.cfg-sum .row .v.empty{color:var(--muted);font-weight:400}
.cfg-sum .btn{width:100%;justify-content:center}
#cfgCta.off{opacity:.35;pointer-events:none}
/* v10: "Your package" panel — descriptor, included chips, what-happens-next */
.cfg-sum .pkg-desc{font-size:14px;color:var(--ink2);line-height:1.5;margin-top:8px}
.cfg-sum .sum-inc{margin-top:18px}
.cfg-sum .sum-lab{font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.cfg-sum .sum-none{color:var(--muted);font-size:12.5px}
.cfg-sum .rows{margin:18px 0 0}
.cfg-sum .sum-next{margin:18px 0 20px}
.cfg-sum .sum-next-t{font-size:13.5px;color:var(--ink2);line-height:1.55}
/* v10: "How it works" — quiet 3-step strip above the configurator question */
.hiw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:clamp(34px,4.5vw,52px);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.hiw-step{padding:clamp(18px,2.2vw,26px) clamp(18px,2.4vw,28px);display:flex;flex-direction:column;gap:8px}
.hiw-step+.hiw-step{border-left:1px solid var(--hair)}
.hiw-n{font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.08em;color:var(--acc)}
.hiw-step p{font-size:15.5px;line-height:1.5;color:var(--ink2)}
.hiw-step p b{font-weight:600;color:var(--ink)}
/* ---------- STUDIO ---------- */
.stg-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:clamp(36px,5vw,56px)}
.stg{background:var(--white);border:1px solid var(--hair);border-radius:16px;padding:18px 16px;transition:border-color .3s,transform .4s var(--ease)}
.stg:hover{border-color:var(--acc);transform:translateY(-3px)}
.stg .n{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--acc)}
.stg .t{font-family:var(--disp);font-weight:600;font-size:16px;letter-spacing:-.01em;margin-top:8px}
.stg .d{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.45}

/* ---------- INDUSTRIES ---------- */
.ind-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ind-card{background:var(--white);border:1px solid var(--hair);border-radius:20px;padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;gap:12px;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .35s}
.ind-card:hover{transform:translateY(-5px);box-shadow:0 26px 60px -34px rgba(11,11,12,.2);border-color:var(--hair2)}
.ind-card .glyph{width:44px;height:44px;color:var(--ink)}
.ind-card .glyph path,.ind-card .glyph circle,.ind-card .glyph line,.ind-card .glyph rect,.ind-card .glyph polyline{stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ind-card h3{font-size:19px;letter-spacing:-.02em}
.ind-card p{font-size:13px;color:var(--ink2);line-height:1.55}
.ind-card .chips{margin-top:auto;padding-top:8px}
.ind-card .chips .chip{font-size:11px;padding:5px 10px}

/* ============================================================
   v13 E — INDUSTRY EXPLORER (replaces the 8 static icon cards)
   Left: editorial typography-led rows. Right: sticky live stage
   playing a distinct hand-rolled micro-visual per industry.
   ============================================================ */
.indx{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,5vw,84px);align-items:start}
.indx-list{border-top:1px solid var(--hair2)}
.ind-row{border-bottom:1px solid var(--hair2)}
.ind-head{display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:16px;width:100%;text-align:left;padding:20px 6px;position:relative}
.ind-ix{grid-row:1/3;align-self:start;padding-top:10px;font-family:var(--mono);font-size:12px;color:var(--muted);transition:color .3s}
.ind-nm{grid-column:2;font-family:var(--body);font-weight:600;font-size:clamp(28px,2.6vw,34px);letter-spacing:-.02em;line-height:1.08;color:var(--ink);transition:color .3s}
.ind-ln{grid-column:2;font-size:14px;color:var(--muted);margin-top:6px;line-height:1.45;max-width:44ch}
.ind-plus{grid-row:1/3;grid-column:3;align-self:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--hair2);position:relative;display:none}
.ind-plus::before,.ind-plus::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink2);transition:transform .35s var(--ease)}
.ind-plus::before{width:12px;height:1.5px;margin:-.75px 0 0 -6px}
.ind-plus::after{width:1.5px;height:12px;margin:-6px 0 0 -.75px}
.ind-row.open .ind-plus::after{transform:rotate(90deg)}
.ind-prog{position:absolute;left:0;right:0;bottom:-1px;height:2px}
.ind-prog i{display:block;height:100%;background:var(--acc);transform:scaleX(0);transform-origin:0 50%}
.ind-head.ticking .ind-prog i{animation:indProg 4.5s linear forwards}
.ind-row.locked .ind-prog i{transform:scaleX(1)}
@keyframes indProg{to{transform:scaleX(1)}}
.ind-head:hover .ind-nm,.ind-head:focus-visible .ind-nm{color:var(--acc)}
.ind-row.on .ind-nm{color:var(--acc)}
.ind-row.on .ind-ix{color:var(--acc)}
/* sticky live stage */
.indx-stage{position:sticky;top:104px;height:min(520px,74vh);background:#fff;border:1px solid var(--hair);border-radius:24px;overflow:hidden;box-shadow:0 40px 90px -52px rgba(11,11,12,.3)}
.ind-vis{position:absolute;inset:0;display:flex;flex-direction:column;padding:clamp(18px,2.2vw,28px);opacity:0;transform:translateY(14px) scale(.985);transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s;pointer-events:none;visibility:hidden}
.ind-vis.on{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.mv-area{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.mv{width:100%;max-width:440px;height:auto;max-height:100%}
.mv-foot{margin-top:14px}
.mv-desc{font-size:14px;color:var(--ink2);line-height:1.5;max-width:46ch}
.mv-chips-h{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:12px 0 8px}
.ind-vis .chips{display:flex;flex-wrap:wrap;gap:8px}
.ind-vis .chip{font-size:11.5px;padding:6px 12px}
/* ---- 1 · Healthcare AI: vital-sign trace drawing + evidence layers stacking ---- */
.mv-health .mv-grid line{stroke:rgba(11,11,12,.09);stroke-width:1;stroke-dasharray:3 6}
.mv-health .mv-ekg{stroke:var(--acc);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0;animation:ekgDraw 4.6s linear infinite}
@keyframes ekgDraw{0%{stroke-dashoffset:100;opacity:1}52%{stroke-dashoffset:0;opacity:1}82%{opacity:1}92%{opacity:0}92.1%{stroke-dashoffset:100;opacity:0}100%{stroke-dashoffset:100;opacity:1}}
.mv-health .mv-ekgdot{fill:var(--acc);animation:ekgDot 4.6s linear infinite}
@keyframes ekgDot{0%,50%{opacity:0}55%,80%{opacity:1}90%,100%{opacity:0}}
.mv-health .mv-ev .ev{opacity:1;transform:none;animation:evStack 4.6s var(--ease) infinite backwards}
.mv-health .mv-ev .ev rect{fill:#fff;stroke:var(--hair2)}
.mv-health .mv-ev .ev line{stroke:rgba(11,11,12,.3);stroke-width:3;stroke-linecap:round}
.mv-health .mv-ev .ev circle{fill:var(--ok)}
.mv-health .mv-ev .ev:nth-child(2){animation-delay:.5s}
.mv-health .mv-ev .ev:nth-child(3){animation-delay:1s}
@keyframes evStack{0%{opacity:0;transform:translateY(16px)}9%,84%{opacity:1;transform:none}94%,100%{opacity:0;transform:none}}
/* ---- 2 · Semiconductor: wafer map whose cells light up with yield data ---- */
.mv-wafer .wcell{opacity:1;animation:waferCell 5s ease-in-out infinite}
@keyframes waferCell{0%,100%{opacity:1}50%{opacity:.22}}
.mv-wafer .mv-scan{stroke:rgba(240,78,35,.65);stroke-width:1.6;stroke-linecap:round;transform-origin:150px 150px;animation:waferScan 6s linear infinite}
@keyframes waferScan{to{transform:rotate(360deg)}}
/* ---- 3 · Defense & Aerospace: HUD radar ring with a slow sweeping reticle ---- */
.mv-radar{position:relative;width:min(300px,100%);aspect-ratio:1;max-width:100%}
.mv-radar svg{position:absolute;inset:0;width:100%;height:100%}
.mv-radar svg circle,.mv-radar svg line{stroke:rgba(11,11,12,.24);stroke-width:1.2}
.mv-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg at 50% 50%,rgba(240,78,35,.5) 0deg,rgba(240,78,35,.12) 42deg,transparent 78deg);animation:radarSweep 6.5s linear infinite}
@keyframes radarSweep{to{transform:rotate(360deg)}}
.mv-blip{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px rgba(240,78,35,.18);opacity:1;animation:blipPing 6.5s ease-out infinite}
.mv-blip.b1{left:64%;top:30%}
.mv-blip.b2{left:34%;top:58%;animation-delay:2.2s}
.mv-blip.b3{left:58%;top:71%;animation-delay:4.1s}
@keyframes blipPing{0%,100%{opacity:1}18%{opacity:.15}36%{opacity:.9}70%{opacity:.25}}
/* ---- 4 · Enterprise SaaS: dashboard blocks that reorganize into order ---- */
.mv-dash{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:400px}
.mv-dash .db{height:76px;border-radius:13px;background:var(--gray);border:1px solid var(--hair);padding:12px;display:flex;flex-direction:column;gap:7px;justify-content:center;transform:none;opacity:1;animation:dbOrder 7s var(--ease) infinite}
.mv-dash .db b{display:block;height:7px;border-radius:4px;background:rgba(11,11,12,.14)}
.mv-dash .db b:first-child{width:52%;background:rgba(11,11,12,.3)}
.mv-dash .db.hot{background:var(--acctint);border-color:rgba(240,78,35,.35)}
.mv-dash .db.hot b{background:rgba(240,78,35,.3)}
.mv-dash .db.hot b:first-child{background:var(--acc)}
.mv-dash .d2{animation-delay:.12s}.mv-dash .d3{animation-delay:.24s}.mv-dash .d4{animation-delay:.36s}.mv-dash .d5{animation-delay:.48s}.mv-dash .d6{animation-delay:.6s}
@keyframes dbOrder{0%,14%{transform:var(--sc);opacity:.5}36%,86%{transform:none;opacity:1}100%{transform:var(--sc);opacity:.5}}
/* ---- 5 · Education & Kids: playful path, bouncing progress dot, stars ---- */
.mv-edu .mv-path{stroke:rgba(11,11,12,.3);stroke-width:2.4;stroke-dasharray:1 9;stroke-linecap:round}
.mv-edu .mv-dot{fill:var(--acc);animation:eduBob .6s ease-in-out infinite}
@keyframes eduBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.mv-edu .mv-star path{fill:#F2B84B;stroke:rgba(11,11,12,.15);stroke-width:1}
.mv-edu .mv-star{opacity:1;transform-box:fill-box;transform-origin:center;animation:starPop 4.8s var(--ease) infinite backwards}
.mv-edu .mv-star.st2{animation-delay:1.65s}
.mv-edu .mv-star.st3{animation-delay:3.3s}
@keyframes starPop{0%{opacity:0;transform:scale(.2) rotate(-30deg)}6%{opacity:1;transform:scale(1.25) rotate(6deg)}10%,86%{opacity:1;transform:scale(1) rotate(0)}95%,100%{opacity:0;transform:scale(.2)}}
/* ---- 6 · Venture & Investor: ascending line chart drawing to a marker ---- */
.mv-vent .mv-grid line{stroke:rgba(11,11,12,.08);stroke-width:1}
.mv-vent .mv-bars rect{fill:rgba(11,11,12,.14);transform-box:fill-box;transform-origin:50% 100%;transform:none;animation:barRise 5.2s var(--ease) infinite}
.mv-vent .mv-bars rect.hot{fill:rgba(240,78,35,.3)}
.mv-vent .mv-bars rect:nth-child(2){animation-delay:.12s}.mv-vent .mv-bars rect:nth-child(3){animation-delay:.24s}.mv-vent .mv-bars rect:nth-child(4){animation-delay:.36s}.mv-vent .mv-bars rect:nth-child(5){animation-delay:.48s}
@keyframes barRise{0%{transform:scaleY(.06)}14%,100%{transform:scaleY(1)}}
.mv-vent .mv-line{stroke:var(--acc);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0;animation:ventDraw 5.2s linear infinite}
@keyframes ventDraw{0%,12%{stroke-dashoffset:100;opacity:1}58%{stroke-dashoffset:0;opacity:1}86%{opacity:1}93%{opacity:0}93.1%{stroke-dashoffset:100;opacity:0}100%{stroke-dashoffset:100;opacity:1}}
.mv-vent .mv-mark{fill:var(--acc)}
.mv-vent .mv-markring{fill:none;stroke:var(--acc);stroke-width:1.6;transform-box:fill-box;transform-origin:center;animation:markPulse 5.2s ease-out infinite}
@keyframes markPulse{0%,58%{opacity:0;transform:scale(.4)}64%{opacity:1}84%{opacity:0;transform:scale(2.4)}100%{opacity:0;transform:scale(.4)}}
/* ---- 7 · Creative Technology: generative particle swirl (canvas, JS-driven) ---- */
.mv-swirl{width:100%;height:290px;border-radius:14px}
/* ---- 8 · Product Launch: countdown arc completing with a soft burst ---- */
.mv-launch{max-width:300px}
.mv-launch .mv-track{stroke:rgba(11,11,12,.1);stroke-width:5}
.mv-launch .mv-ticks line{stroke:rgba(11,11,12,.28);stroke-width:2;stroke-linecap:round;animation:tickLit 4.6s linear infinite}
.mv-launch .mv-ticks line:nth-child(2){animation-delay:.3s}.mv-launch .mv-ticks line:nth-child(3){animation-delay:.6s}.mv-launch .mv-ticks line:nth-child(4){animation-delay:.9s}.mv-launch .mv-ticks line:nth-child(5){animation-delay:1.2s}.mv-launch .mv-ticks line:nth-child(6){animation-delay:1.5s}.mv-launch .mv-ticks line:nth-child(7){animation-delay:1.8s}.mv-launch .mv-ticks line:nth-child(8){animation-delay:2.1s}.mv-launch .mv-ticks line:nth-child(9){animation-delay:2.4s}.mv-launch .mv-ticks line:nth-child(10){animation-delay:2.7s}.mv-launch .mv-ticks line:nth-child(11){animation-delay:3s}.mv-launch .mv-ticks line:nth-child(12){animation-delay:3.3s}
@keyframes tickLit{0%{stroke:rgba(11,11,12,.28)}10%,74%{stroke:var(--acc)}86%,100%{stroke:rgba(11,11,12,.28)}}
.mv-launch .mv-arc{stroke:var(--acc);stroke-width:5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;animation:arcFill 4.6s var(--ease) infinite}
@keyframes arcFill{0%{stroke-dashoffset:100}72%,86%{stroke-dashoffset:0}93%{opacity:1}96%{opacity:0;stroke-dashoffset:0}96.1%{stroke-dashoffset:100;opacity:0}100%{stroke-dashoffset:100;opacity:1}}
.mv-launch .mv-burst line{stroke:var(--coral);stroke-width:2.4;stroke-linecap:round}
.mv-launch .mv-burst{opacity:0;transform-box:fill-box;transform-origin:center;animation:launchBurst 4.6s ease-out infinite}
@keyframes launchBurst{0%,70%{opacity:0;transform:scale(.55)}76%{opacity:1;transform:scale(1)}90%,100%{opacity:0;transform:scale(1.45)}}
.mv-launch .mv-tminus{font-family:var(--mono);font-size:17px;font-weight:500;letter-spacing:.08em;fill:var(--ink)}
/* mobile: stacked — each row expands its visual inline on tap */
@media(max-width:860px){
  .indx{display:block}
  .indx-stage{display:none}
  .ind-plus{display:block}
  .ind-head{padding:18px 2px}
  .ind-mstage{padding:4px 0 24px}
  .ind-mstage .ind-vis{position:relative;inset:auto;opacity:1;transform:none;visibility:visible;pointer-events:auto;background:#fff;border:1px solid var(--hair);border-radius:18px;min-height:320px;transition:none}
  .mv-swirl{height:230px}
}
/* reduced motion: static first frame per industry, no auto-advance, no loops.
   Base styles ARE the completed frame; keyframes merely re-draw from hidden. */
@media(prefers-reduced-motion:reduce){
  .ind-vis{transition:none}
  .ind-vis .mv,.ind-vis .mv *,.ind-head.ticking .ind-prog i{animation:none!important}
  .mv-health .mv-ev .ev,.mv-edu .mv-star,.mv-launch .mv-burst{opacity:1;transform:none}
  .mv-edu .mv-star{opacity:1}
  .mv-health .mv-ekgdot{opacity:1}
  .mv-launch .mv-burst{opacity:.8}
}
/* ---------- WHY ---------- */
.why-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,56px) clamp(32px,5vw,72px)}
.why-block{position:relative;padding-top:10px}
.why-block .ghost{position:absolute;top:-34px;left:-8px;font-family:var(--disp);font-weight:600;font-size:clamp(4.6rem,7vw,7rem);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(10,10,12,.1);pointer-events:none;line-height:1}
.why-block h3{font-size:clamp(1.4rem,2.2vw,1.8rem);letter-spacing:-.02em;line-height:1.1;position:relative}
.why-block p{font-size:14.5px;color:var(--ink2);margin-top:14px;position:relative}
.why-block .proof{margin-top:16px;border-left:2px solid var(--acc);padding:4px 0 4px 16px;font-size:13px;color:var(--ink2);font-style:normal}
.why-block .proof b{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);display:block;margin-bottom:4px;font-weight:500}
/* ---------- INTAKE side rail (facts / what happens next) ---------- */
.intake-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,5vw,72px);align-items:start}
.fact{display:flex;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--hair);font-size:14px}
.fact .k{font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);align-self:center}
.fact .v{font-weight:500;text-align:right;font-family:var(--disp);letter-spacing:-.01em}
.fact .v a{border-bottom:1px solid var(--hair2);transition:color .3s,border-color .3s}
.fact .v a:hover{color:var(--acc);border-color:var(--acc)}
.next-h{font-family:var(--body);font-weight:500;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:34px 0 6px}
.next-step{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--hair)}
.next-step .n{font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.08em;color:var(--acc);padding-top:2px;flex:none}
.next-step p{font-size:13.5px;color:var(--ink2)}
.next-step p b{color:var(--ink);font-weight:600}
.quiet{margin-top:24px;display:flex;gap:22px;flex-wrap:wrap}
.quiet a{font-size:13px;color:var(--muted);border-bottom:1px solid var(--hair2);padding-bottom:2px;transition:color .3s,border-color .3s}
.quiet a:hover{color:var(--acc);border-color:var(--acc)}
/* ---------- PROJECT-BRIEF WIZARD (3 steps) ---------- */
.wiz{background:var(--white);border:1px solid var(--hair);border-radius:24px;padding:clamp(24px,3vw,40px);box-shadow:0 40px 90px -50px rgba(11,11,12,.28)}
.wiz-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}
.wiz-top .st-lbl{font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.wiz-top .st-lbl b{color:var(--acc);font-weight:500}
.wiz-bar{height:3px;background:var(--gray);border-radius:99px;overflow:hidden;margin-bottom:clamp(24px,3vw,36px)}
.wiz-bar i{display:block;height:100%;width:0;background:var(--acc);border-radius:99px;transition:width .6s var(--ease)}
.wiz-step{display:none}
.wiz-step.cur{display:block}
.wiz-step.cur.fwd{animation:stepFwd .55s var(--ease)}
.wiz-step.cur.back{animation:stepBack .55s var(--ease)}
@keyframes stepFwd{from{opacity:0;transform:translateX(46px)}to{opacity:1;transform:none}}
@keyframes stepBack{from{opacity:0;transform:translateX(-46px)}to{opacity:1;transform:none}}
.wiz-q{font-family:var(--disp);font-weight:600;font-size:clamp(1.4rem,2.4vw,1.9rem);letter-spacing:-.02em;line-height:1.1;margin-bottom:22px}
.wiz-sub-lab{font-family:var(--body);font-weight:500;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:18px 0 10px}
.wiz-sub-lab:first-of-type{margin-top:0}
.wiz-opts{display:flex;flex-wrap:wrap;gap:10px}
.wopt{font-size:14px;font-weight:500;padding:13px 22px;border-radius:999px;border:1px solid var(--hair2);color:var(--ink2);background:var(--white);transition:all .25s;min-height:48px}
.wopt:hover{border-color:var(--ink);color:var(--ink)}
.wopt.sel{background:var(--ink);border-color:var(--ink);color:#fff}
.wopt.sel:hover{background:var(--acc);border-color:var(--acc)}
.wiz textarea,.wiz input{width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--white);border:1px solid var(--hair2);border-radius:14px;padding:15px 18px;transition:border-color .3s;resize:vertical}
.wiz textarea{min-height:110px}
.wiz textarea:focus,.wiz input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 4px rgba(240,78,35,.14)}
.wiz input.shake{animation:shake .42s var(--ease);border-color:var(--acc)}
/* v7 wow: need-card pop + orange ring draw, pill bounce, submit spinner morph */
.need-card.sel{animation:cardPop .45s var(--ease)}
@keyframes cardPop{0%{transform:scale(.96)}55%{transform:scale(1.02)}100%{transform:scale(1)}}
.need-card.sel::after{content:"";position:absolute;inset:-1px;border:1.5px solid var(--acc);border-radius:16px;pointer-events:none;animation:ringDraw .5s var(--ease)}
@keyframes ringDraw{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
.wopt.sel{animation:pillBounce .42s var(--ease)}
@keyframes pillBounce{0%{transform:scale(.94)}55%{transform:scale(1.06)}100%{transform:scale(1)}}
.js-next .spin{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.done-mark{position:relative;width:180px;height:180px;margin:0 auto 22px}
.done-mark>svg{width:180px;height:180px;margin:0;display:block}
.leaf-burst{position:absolute;inset:0;pointer-events:none}
.leaf-burst .leaf{position:absolute;left:50%;top:50%;margin:-7px 0 0 -7px;display:block;will-change:transform,opacity}
.leaf-burst .leaf svg{width:100%;height:100%;fill:currentColor;display:block}
.wiz-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wiz-fields .full{grid-column:1/-1}
.wiz-err{font-size:12.5px;color:var(--acc2);margin-top:12px;min-height:18px;opacity:0;transition:opacity .3s}
.wiz-err.show{opacity:1}
.wiz-nav{display:flex;gap:12px;margin-top:22px;align-items:center}
.wiz-nav .sp{flex:1}
.btn[disabled]{opacity:.35;pointer-events:none}
.wiz-note{font-size:12px;color:var(--muted);margin-top:16px}
.wiz-done{text-align:center;padding:clamp(20px,4vw,44px) 0;display:none}
.wiz-done.show{display:block}
/* v20 success identity — TRUE eSora mark stroke-draw (ink ring, terracotta "e")
   + authentic maple-leaf companion arc in signal orange, one soft breath, then copy */
.wiz-done .id-svg{width:180px;height:180px;margin:0 auto 22px}
.id-breath{transform-box:view-box;transform-origin:center}
.id-breath.id-breathing{animation:idBreath .85s var(--ease) 1}
@keyframes idBreath{0%,100%{transform:scale(1)}42%{transform:scale(1.02)}}
.id-e{transform-box:fill-box;transform-origin:center}
/* copy holds until the composition settles (.id-settled); without the staged
   identity (or reduced-motion, which settles instantly) nothing is withheld */
.wiz-done.id-staged .js-mark~*{transition:opacity .55s var(--ease),transform .55s var(--ease)}
.wiz-done.id-staged:not(.id-settled) .js-mark~*{opacity:0;transform:translateY(14px)}
.wiz-done h3{font-size:clamp(1.6rem,2.6vw,2.1rem);letter-spacing:-.02em;margin-bottom:14px}
.wiz-done p{font-size:15px;color:var(--ink2);max-width:520px;margin:0 auto 26px}
/* v13 B: success panel — two visitor-chosen actions (mailto only fires from
   the explicit click; copy puts the composed brief on the clipboard) */
.wiz-done .done-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.wiz-done .done-actions .btn{padding:13px 24px;font-size:14px;min-height:46px}
.wiz-done .done-actions .btn .ar{font-style:normal}
/* v13 B: subtle orange ring pulse on Continue the moment a step becomes valid */
.js-next.valid-pulse:not([disabled]){animation:validRing .9s var(--ease)}
@keyframes validRing{from{box-shadow:0 0 0 0 rgba(240,78,35,.5)}to{box-shadow:0 0 0 16px rgba(240,78,35,0)}}
@media(prefers-reduced-motion:reduce){.js-next.valid-pulse{animation:none!important}}
.wiz-done .done-alt{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;align-items:center;margin-bottom:22px}
/* v11: "What happens next" — 3 quiet micro-steps inside the success panel */
.wiz-done .done-next{margin:0 auto 24px;max-width:520px}
.wiz-done .done-next-h{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.wiz-done .done-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:0}
.wiz-done .done-steps li{border:1px solid var(--hair);border-radius:12px;padding:10px 12px;text-align:left;font-size:12.5px;color:var(--ink2);line-height:1.35}
.wiz-done .done-steps i{display:block;font-style:normal;font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--acc);margin-bottom:4px}
.wiz-done .done-steps b{font-weight:600;color:var(--ink)}
@media(max-width:560px){.wiz-done .done-steps{grid-template-columns:1fr}}
.wiz-done .reset{font-size:13.5px;color:var(--muted);border-bottom:1px solid var(--hair2);transition:color .3s,border-color .3s,opacity .55s var(--ease),transform .55s var(--ease);padding-bottom:2px}
.wiz-done .reset:hover{color:var(--acc);border-color:var(--acc)}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-8px)}45%{transform:translateX(7px)}70%{transform:translateX(-4px)}}
.wiz.shake{animation:shake .42s var(--ease)}
/* needs multi-select cards w/ icons */
.need-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.need-card{position:relative;background:var(--white);border:1px solid var(--hair);border-radius:16px;padding:16px 14px 14px;min-height:92px;display:flex;flex-direction:column;gap:8px;text-align:left;transition:border-color .3s,background .3s,transform .3s var(--ease),box-shadow .3s}
.need-card:hover{border-color:var(--hair2);transform:translateY(-2px)}
.need-card .ic{width:26px;height:26px;color:var(--ink2);transition:color .3s}
.need-card .ic *{stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.need-card .t{font-family:var(--disp);font-weight:600;font-size:13.5px;letter-spacing:-.01em;line-height:1.15;padding-right:20px}
.need-card .ck{position:absolute;top:11px;right:11px;width:18px;height:18px;border:1.5px solid var(--hair2);border-radius:50%;transition:background .3s,border-color .3s}
.need-card .ck svg{position:absolute;inset:0;margin:auto;width:9px;height:9px}
.need-card .ck path{stroke:#fff;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .35s var(--ease) .05s}
.need-card.sel{border-color:var(--acc);background:var(--acctint);box-shadow:0 10px 24px -16px rgba(240,78,35,.4)}
.need-card.sel .ic{color:var(--acc)}
.need-card.sel .ck{background:var(--acc);border-color:var(--acc)}
.need-card.sel .ck path{stroke-dashoffset:0}
/* live package chip under step 1 */
.pkg-chip{display:inline-flex;align-items:center;gap:9px;margin-top:18px;padding:10px 18px;border-radius:999px;background:var(--ink);color:#fff;font-family:var(--disp);font-weight:500;font-size:13.5px;letter-spacing:-.01em;transition:opacity .3s}
.pkg-chip .cdot{width:7px;height:7px;border-radius:50%;background:var(--coral);flex:none}
.pkg-chip em{font-style:normal;color:var(--coral)}
.pkg-chip.mut{background:var(--gray);color:var(--muted)}
/* configurator prefill banner */
.cfg-banner{display:flex;align-items:center;gap:10px;background:var(--acctint);border:1px solid rgba(240,78,35,.3);border-radius:14px;padding:12px 16px;font-size:13.5px;color:var(--ink2);margin-bottom:20px}
.cfg-banner svg{width:16px;height:16px;flex:none}
.cfg-banner svg path{stroke:var(--acc);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cfg-banner b{color:var(--ink);font-weight:600}
.cfg-banner .clear{margin-left:auto;font-size:12px;color:var(--muted);border-bottom:1px solid var(--hair2);transition:color .3s,border-color .3s;flex:none}
.cfg-banner .clear:hover{color:var(--acc);border-color:var(--acc)}
.cfg-banner[hidden]{display:none!important}
/* ---------- FINALE + FOOTER (the black period) ---------- */
#finale{background:var(--ink);color:#fff}
#finale .cta-zone{text-align:center;padding:clamp(110px,14vw,190px) 0 clamp(90px,11vw,150px)}
#finale .finale-mark{width:clamp(88px,10vw,128px);height:auto;margin:0 auto clamp(28px,4vw,44px);animation:floaty 8s ease-in-out infinite}
#finale .eyebrow{justify-content:center;color:rgba(255,255,255,.45)}
#finale h2{font-family:var(--serif);font-weight:500;color:#fff;font-size:clamp(3rem,8vw,7.4rem);margin-top:22px}
#finale .sub{color:rgba(255,255,255,.62);font-size:clamp(15px,1.4vw,18px);max-width:620px;margin:26px auto 0}
#finale .ctas{display:flex;gap:14px;justify-content:center;margin-top:clamp(30px,4vw,44px);flex-wrap:wrap}
#finale footer{border-top:1px solid rgba(255,255,255,.1);padding-top:clamp(48px,6vw,72px);position:relative;overflow:hidden}
.f-cols{display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,44px);padding-bottom:clamp(40px,5vw,60px)}
.f-brand .wordmark{display:flex;align-items:center;gap:12px;font-family:var(--disp);font-weight:600;font-size:22px;letter-spacing:-.02em;word-spacing:.14em;color:#fff}
.f-brand .wordmark img{width:30px;height:30px}
.f-brand .wordmark sup{font-size:.48em;font-weight:600;letter-spacing:0}
.f-brand .flabs{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-top:18px}
.f-brand p{font-size:13px;color:rgba(255,255,255,.5);margin-top:14px;max-width:260px}
.f-brand .fclock{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.65);margin-top:20px;display:flex;align-items:center;gap:9px}
.f-brand .fclock .dot{width:6px;height:6px;animation:none}
.f-brand .fmail{display:block;font-size:13px;color:rgba(255,255,255,.6);margin-top:10px;transition:color .3s}
.f-brand .fmail b{color:rgba(255,255,255,.4);font-weight:400;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;display:block;margin-top:14px}
.f-brand .fmail:hover{color:var(--acc)}
.f-col .fh{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:16px}
.f-col a{display:block;font-size:13.5px;color:rgba(255,255,255,.66);padding:5px 0;transition:color .3s,padding-left .3s}
.f-col a:hover{color:var(--acc);padding-left:6px}
.f-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;border-top:1px solid rgba(255,255,255,.1);padding-top:20px;font-size:12px;color:rgba(255,255,255,.42)}
.f-legal{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;padding:14px 0 26px;font-size:12px;color:rgba(255,255,255,.42)}
.f-legal .fmark{width:18px;height:18px;flex:none}
.f-legal a{color:rgba(255,255,255,.42);transition:color .3s}
.f-legal a:hover{color:#fff}
.f-legal .sp{flex:1}
.f-offices{color:rgba(255,255,255,.42);display:inline-flex;align-items:center;flex-wrap:wrap;gap:0 4px}
.leaf-btn{position:relative;display:inline-flex;align-items:center;gap:6px;padding:3px 6px;margin:-3px -2px;border-radius:8px;font-weight:600;color:rgba(255,255,255,.62);transition:color .3s,transform .3s var(--ease)}
.leaf-btn .hq{color:inherit;transition:color .3s}
/* v11 hover: the authentic leaf springs in (scale .6→1, rotate -8°→0, back.out
   overshoot) and the "Toronto HQ" text goes orange */
.leaf-btn .leaf-ic{width:14px;height:14px;fill:var(--acc);flex:none;transform:scale(.6) rotate(-8deg);transition:transform .55s cubic-bezier(.34,1.56,.64,1),fill .3s}
.leaf-btn:hover,.leaf-btn:focus-visible{color:var(--acc)}
.leaf-btn:hover .leaf-ic,.leaf-btn:focus-visible .leaf-ic{transform:scale(1) rotate(0deg)}
.leaf-btn:active .leaf-ic{transform:rotate(10deg) scale(.94)}
/* v11: one soft orange pulse ring behind the text, fired on click from core.js */
.hq-pulse{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border:2px solid rgba(240,78,35,.55);border-radius:50%;pointer-events:none;z-index:-1;animation:hqPulse 1.1s var(--ease) forwards}
@keyframes hqPulse{from{transform:scale(.35);opacity:.7}to{transform:scale(1.9);opacity:0}}
/* ---------- OFFICES STRIP (studio.html) ---------- */
.office-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(22px,3vw,32px)}
.ochip{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:500;font-size:14.5px;letter-spacing:-.01em;color:var(--ink2);padding:11px 20px;border:1px solid var(--hair2);border-radius:999px;background:var(--white);transition:border-color .3s,color .3s,transform .3s var(--ease)}
.ochip:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px)}
.ochip.leaf-btn{border-color:rgba(240,78,35,.4);color:var(--ink2);font-weight:600;padding:8px 18px}
.ochip.leaf-btn:hover{border-color:var(--acc);color:var(--acc)}
.ochip.leaf-btn .leaf-ic{width:15px;height:15px}
.labs-line{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:clamp(26px,3.4vw,38px)}
/* ---------- MAPLE LEAF RAIN ---------- */
.leaf-rain{position:fixed;inset:0;z-index:2000;pointer-events:none;overflow:hidden;perspective:600px}
.leaf-rain .leaf{position:absolute;top:0;left:0;display:block;will-change:transform,opacity}
.leaf-rain .leaf svg{width:100%;height:100%;fill:currentColor;display:block}
.f-ghost{font-family:var(--disp);font-weight:600;font-size:clamp(4.2rem,12.5vw,13rem);letter-spacing:-.045em;line-height:.78;text-align:center;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.16);white-space:nowrap;transform:translateY(28%);user-select:none;pointer-events:none}
/* ---------- CASE OVERLAY (work.html only) ---------- */
#caseOv{position:fixed;inset:0;z-index:960;background:var(--white);display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s}
#caseOv.open{opacity:1;visibility:visible}
.co-bar{flex:none;height:64px;display:flex;align-items:center;gap:14px;padding:0 var(--gut);border-bottom:1px solid var(--hair);background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:2}
.co-brand{display:flex;align-items:center;gap:11px;font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.co-brand img{width:24px;height:24px}
.co-bar .sp{flex:1}
.co-pn{display:flex;align-items:center;gap:8px}
.co-pn button{font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);border:1px solid var(--hair2);border-radius:999px;padding:9px 15px;min-height:36px;transition:all .3s;white-space:nowrap}
.co-pn button:hover{border-color:var(--ink);color:var(--ink)}
#coX{width:42px;height:42px;border-radius:50%;border:1px solid var(--hair2);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--ink2);transition:all .3s;flex:none}
#coX:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.co-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* ---------- overlay header (v14 C): world-color band + copy/visual grid + process strip ---------- */
.co-head{position:relative;border-bottom:1px solid var(--hair);background:var(--white)}
.co-band{display:block;height:6px;width:100%}
.co-head-in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(30px,4.4vw,68px);align-items:center;padding-top:clamp(30px,4vw,46px);padding-bottom:clamp(28px,3.8vw,48px)}
.co-kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.co-title{font-size:clamp(2.1rem,4.4vw,3.35rem);letter-spacing:-.03em;margin-top:14px}
.co-tags{font-size:14px;color:var(--muted);margin-top:14px}
.co-meta{display:flex;flex-wrap:wrap;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin-top:clamp(28px,3.6vw,42px)}
.co-meta .m{flex:1 1 170px;padding:18px 22px 18px 0;border-left:1px solid var(--hair)}
.co-meta .m:first-child{border-left:0;padding-left:0}
.co-meta .m--wide{flex:2.1 1 250px}
.co-meta .k{font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.co-meta .v{font-family:var(--disp);font-weight:500;font-size:15.5px;letter-spacing:-.01em;margin-top:6px}
/* v22 — services read as a clean spec list, one per line, never a
   mid-phrase wrap with stranded separators */
.co-meta .v .ms{display:block;padding:1.5px 0}
/* per-entry banner visual — meaningful artifact per category, never a gradient blob */
.co-visual{margin:0;position:relative;border:1px solid var(--hair);border-radius:18px;overflow:hidden;background:#FBFBFA;height:clamp(230px,26vw,320px);display:flex}
.co-visual>div,.co-visual>svg{width:100%;height:calc(100% + 30px);margin-top:-15px;will-change:transform}
.co-visual svg{display:block}
.cv-tag{position:absolute;left:12px;top:12px;z-index:3;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);background:rgba(255,255,255,.9);border:1px solid var(--hair2);border-radius:999px;padding:5px 11px}
.co-pstrip{border-top:1px solid var(--hair);background:var(--gray)}
.co-pstrip-in{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:11px 0;font-size:12px;color:var(--muted)}
.co-ps-lab{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-right:4px}
.co-ps{font-weight:500;color:var(--ink2)}
.co-pstrip-in i{font-style:normal;color:var(--muted)}
/* public cases — the stylized product screen fills the frame */
.cv-scr{width:100%;height:100%}
.cv-scr .gu-scr{height:100%}
/* confidential — schematic system artifacts, tinted per entry */
.cv-sys{position:relative;width:100%;height:100%;padding:34px 22px 20px;display:flex;background:
  linear-gradient(rgba(10,10,12,.045) 1px,transparent 1px) 0 0/100% 26px,
  linear-gradient(90deg,rgba(10,10,12,.045) 1px,transparent 1px) 0 0/26px 100%,#FCFCFB}
.cs-dash{flex:1;display:flex;gap:12px}
.cs-side{width:44px;flex:none;border:1px solid var(--hair2);border-radius:10px;background:#fff;padding:9px 8px;display:flex;flex-direction:column;gap:7px}
.cs-side i{display:block;height:7px;border-radius:4px;background:var(--hair2)}
.cs-side i:first-child{background:var(--fa)}
.cs-main{flex:1;display:flex;flex-direction:column;gap:10px}
.cs-bar{display:block;height:16px;border-radius:8px;border:1px solid var(--hair2);background:#fff}
.cs-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cs-cards i{display:block;height:34px;border:1px solid var(--hair2);border-radius:8px;background:#fff}
.cs-cards i:nth-child(2){border-color:var(--fa);background:color-mix(in srgb,var(--fa) 9%,#fff)}
.cs-chart{flex:1;display:flex;align-items:flex-end;gap:7px;border:1px solid var(--hair2);border-radius:10px;background:#fff;padding:10px 12px}
.cs-chart em{flex:1;height:var(--h);border-radius:3px 3px 0 0;background:color-mix(in srgb,var(--fa) 26%,#fff)}
.cs-chart em:nth-child(4){background:var(--fa)}
.cs-pipe{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cs-pcol{border:1px solid var(--hair2);border-radius:10px;background:#fff;padding:9px;display:flex;flex-direction:column;gap:7px}
.cs-ph{display:block;height:8px;width:60%;border-radius:4px;background:var(--fa);opacity:.85}
.cs-pcol i{display:block;height:22px;border:1px solid var(--hair);border-radius:6px;background:var(--gray)}
.cs-pcol i.s{background:color-mix(in srgb,var(--fa) 12%,#fff);border-color:color-mix(in srgb,var(--fa) 40%,#fff)}
.cs-doc{flex:1;max-width:270px;margin:0 auto;border:1px solid var(--hair2);border-radius:10px;background:#fff;padding:18px 20px;display:flex;flex-direction:column;gap:9px}
.cs-dh{display:block;height:11px;width:64%;border-radius:5px;background:var(--ink)}
.cs-dh.s{width:40%;background:var(--fa)}
.cs-dl{display:block;height:7px;border-radius:4px;background:var(--hair2)}
.cs-dl.s{width:74%}
.cs-fig{display:flex;align-items:center;justify-content:center;height:64px;border:1px dashed color-mix(in srgb,var(--fa) 55%,#fff);border-radius:8px;background:color-mix(in srgb,var(--fa) 6%,#fff)}
.cs-fig i{width:34px;height:34px;border-radius:50%;background:var(--fa);opacity:.8}
.cs-sw{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:min-content;gap:10px;align-content:center}
.cs-sw-i{display:block;height:56px;border-radius:10px;border:1px solid var(--hair2)}
.cs-sw-i.a{background:var(--fa)}
.cs-sw-i.b{background:var(--fb)}
.cs-sw-i.c{background:var(--fc)}
.cs-sw-i.n{background:var(--ink)}
.cs-sw-l{display:block;height:7px;border-radius:4px;background:var(--hair2)}
.cs-sw-l.s{width:70%}
.cs-type{grid-column:span 2;font-family:var(--disp);font-weight:600;font-size:44px;letter-spacing:-.03em;color:var(--ink);display:flex;align-items:center}
.cs-dots{grid-column:span 2;display:flex;align-items:center;gap:8px}
.cs-dots i{width:12px;height:12px;border-radius:50%;background:var(--hair2)}
.cs-dots i:nth-child(1){background:var(--fa)}
.cs-dots i:nth-child(2){background:var(--fb)}
/* experiments — a frame of the toy's own visual language */
.cv-toy{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#FBFBFA}
.cv-toy svg{width:100%;height:100%}
.cv-dirs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;padding:34px 16px 16px;align-items:center}
.cv-type{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;padding-top:20px}
.cv-aa{font-family:'Instrument Sans',Inter,sans-serif;font-weight:720;font-size:110px;line-height:1;letter-spacing:-.03em;color:var(--ink);font-variation-settings:"wght" 720,"wdth" 88}
.cv-axes{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* eSora Labs — identity construction specimen (public case) */
/* v16 — eSora Labs case banner: the REAL guidelines board, full-bleed,
   lightbox-openable, captioned (parallax overscan inherited from .co-visual) */
/* v24 — the header visual is a figure: image area + a caption strip BELOW
   it, so the caption never covers the screen's own content */
.cv-real{position:relative;width:100%;height:calc(100% + 30px);margin-top:-15px;will-change:transform;background:var(--gray);display:flex;flex-direction:column}
.cv-real-btn{flex:1;min-height:0;display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;position:relative;overflow:hidden}
.cv-real-btn img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.cv-real--fit{display:block;background:#F3F1EC}
.cv-real--fit .cv-real-btn{display:flex;align-items:center;justify-content:center;padding:clamp(12px,1.8vw,22px);overflow:hidden}
.cv-real--fit .cv-real-btn img{position:static;inset:auto;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;object-position:center;border-radius:10px;box-shadow:0 24px 54px -30px rgba(11,11,12,.35)}
.cv-real--rani{background:#1B62D8}
.cv-real-cap{flex:none;margin:0;padding:10px 14px;max-width:100%;background:var(--white);border-top:1px solid var(--hair);font-size:12px;font-weight:500;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
@media(max-width:900px){
  .co-head-in{grid-template-columns:1fr;gap:24px}
  .co-visual{height:auto;min-height:210px}
}
.co-chapters{padding:clamp(28px,3.6vw,44px) 0 0;display:grid;gap:clamp(30px,4vw,44px);max-width:1080px}
.co-ch{max-width:860px}
.co-ch--gal{max-width:none}
.co-ch .lab{font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);margin-bottom:12px}
.co-ch p{font-size:clamp(15.5px,1.35vw,17.5px);color:var(--ink2);line-height:1.7;max-width:680px}
.co-ch .chips{margin-top:18px}
.co-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,28px)}
.co-stat{border-top:2px solid var(--ink);padding-top:16px}
/* truthful fact rows (Scope / Delivered / Status) — staggered fade-in, no count-up */
.co-fact .k{font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.co-fact .v{font-family:var(--disp);font-weight:500;font-size:clamp(1.02rem,1.5vw,1.28rem);line-height:1.35;margin-top:8px}
.co-fact{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s var(--ease)}
.co-fact.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.co-fact{opacity:1;transform:none;transition:none}}
.co-proc{margin-top:clamp(44px,6vw,68px)}
.co-proc>.lab,.co-galwrap>.lab{font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.co-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.co-step{border:1px solid var(--hair);border-radius:14px;padding:13px 12px;text-align:left;transition:all .3s;min-height:64px}
.co-step i{display:block;font-style:normal;font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.08em;color:var(--acc);margin-bottom:5px}
.co-step .sn{font-family:var(--disp);font-weight:600;font-size:13.5px;letter-spacing:-.01em}
.co-step:hover{border-color:var(--ink)}
.co-step.on{border-color:var(--acc);background:var(--acctint);box-shadow:0 10px 24px -16px rgba(240,78,35,.4)}
.co-stepout{margin-top:18px;border-left:2px solid var(--acc);padding:4px 0 4px 16px;font-size:15px;color:var(--ink2);min-height:52px;max-width:680px;transition:opacity .25s}
.co-stepout.fade{opacity:0}
.co-galwrap{margin-top:clamp(44px,6vw,68px)}
.co-gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.co-gal figure{aspect-ratio:4/3;overflow:hidden;border-radius:16px;border:1px solid var(--hair);background:var(--gray)}
.co-gal svg{width:100%;height:100%;transition:transform .8s var(--ease)}
.co-gal figure:hover svg{transform:scale(1.07)}
/* gallery frame 1 — stylized product-UI screen (same language as the on-page demos), tinted per project */
.co-gal figure.ui{background:#fff}
.gu-scr{position:relative;height:100%;display:flex;flex-direction:column;text-align:left;-webkit-user-select:none;user-select:none}
.gu-dark{background:#101C3A;color:#E7EDF7}
.gu-dark .gu-top{display:flex;align-items:center;gap:6px;padding:11px 13px;border-bottom:1px solid rgba(231,237,247,.1);font-size:10.5px;color:rgba(231,237,247,.55)}
.gu-dark .gu-top i{width:7px;height:7px;border-radius:50%;background:rgba(231,237,247,.2)}
.gu-dark .gu-top span{margin-left:6px}
.gu-body{display:flex;flex:1;min-height:0}
.gu-side{width:46px;border-right:1px solid rgba(231,237,247,.1);padding:11px 9px;display:flex;flex-direction:column;gap:8px}
.gu-side i{display:block;height:6px;border-radius:3px;background:rgba(231,237,247,.16)}
.gu-side i:first-child{background:var(--fa)}
.gu-main{flex:1;padding:11px;display:flex;flex-direction:column;gap:7px}
.gu-row{display:flex;align-items:center;gap:8px;background:rgba(231,237,247,.06);border:1px solid rgba(231,237,247,.09);border-radius:7px;padding:7px 10px}
.gu-row b{display:block;flex:1;height:6px;border-radius:3px;background:rgba(231,237,247,.2)}
.gu-row em{font-style:normal;font-size:9px;font-weight:500;letter-spacing:.06em;color:rgba(231,237,247,.5);text-transform:uppercase}
.gu-row.ok{border-color:color-mix(in srgb,var(--fa) 40%,transparent);background:color-mix(in srgb,var(--fa) 9%,transparent)}
.gu-row.ok em{color:var(--fa)}
.gu-light{background:#FDFEFE;color:#12302C}
.gu-light .gu-top{display:flex;align-items:center;gap:8px;padding:12px 14px;font-size:11px;font-weight:500}
.gu-dot{width:14px;height:14px;border-radius:50%;background:var(--fa);flex:none}
.gu-pill{margin-left:auto;font-size:8.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--fa);border:1px solid color-mix(in srgb,var(--fa) 42%,transparent);padding:3px 8px;border-radius:999px}
.gu-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;flex:1;padding:2px 12px 12px;min-height:0}
.gu-col{background:#F2F7F6;border:1px solid rgba(18,48,44,.09);border-radius:8px;padding:7px;display:flex;flex-direction:column;gap:6px}
.gu-col span{font-size:7.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#5E7673}
.gu-col i{display:block;flex:1;min-height:14px;border-radius:5px;background:#fff;border:1px solid color-mix(in srgb,var(--fa) 26%,transparent)}
.gu-col i:first-of-type{background:color-mix(in srgb,var(--fa) 10%,#fff)}
.gu-paper{background:#F6F0E3;color:#2A1D10}
.gu-paper .gu-top{display:flex;align-items:center;gap:8px;padding:12px 14px;font-size:11px;font-weight:500;border-bottom:1px solid rgba(42,29,16,.12)}
.gu-brand{flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:0 16px}
.gu-wm{font-weight:600;font-size:26px;letter-spacing:-.03em}
.gu-wm b{color:var(--fa)}
.gu-rule{height:2px;width:38%;background:var(--fa);border-radius:2px}
.gu-ty{display:flex;flex-direction:column;gap:6px}
.gu-ty i{display:block;height:5px;border-radius:3px;background:rgba(42,29,16,.2);width:var(--w)}
.gu-sws{display:flex;gap:6px;margin-top:2px}
.gu-sws i{width:20px;height:20px;border-radius:6px;border:1px solid rgba(42,29,16,.14)}
.gu-sws i:nth-child(1){background:var(--fa)}
.gu-sws i:nth-child(2){background:var(--fb)}
.gu-sws i:nth-child(3){background:#2A1D10}
.gu-sws i:nth-child(4){background:#F6F0E3}
.co-foot{margin-top:clamp(48px,6vw,72px);border-top:1px solid var(--hair);padding:clamp(28px,4vw,40px) 0 clamp(56px,7vw,88px);display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.co-next{display:flex;align-items:center;gap:14px;border:1px solid var(--hair2);border-radius:18px;padding:12px 18px 12px 12px;margin-left:auto;text-align:left;transition:all .3s;max-width:100%}
.co-next:hover{border-color:var(--ink);transform:translateY(-2px)}
.co-next .th{width:76px;height:56px;border-radius:10px;overflow:hidden;flex:none;background:var(--gray)}
.co-next .th svg{width:100%;height:100%}
.co-next .k{display:block;font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.co-next .t{display:block;font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:-.01em;margin-top:3px;line-height:1.15}
.co-next .ar{color:var(--acc);font-size:18px;flex:none;margin-left:4px}
/* ---------- PAGE HERO (subpages) ---------- */
.page-hero{padding-top:clamp(150px,17vw,215px);padding-bottom:clamp(34px,4.5vw,58px)}
.page-hero h1{font-size:clamp(2.7rem,6vw,5.2rem);letter-spacing:-.03em;margin:20px 0 0;max-width:1000px}
.page-hero .intro{margin-top:24px}
/* ---------- HOME TEASERS ---------- */
.tease-more{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:500;font-size:15px;color:var(--ink);border-bottom:1.5px solid var(--acc);padding-bottom:4px;margin-top:clamp(30px,4vw,44px);transition:color .3s}
.tease-more .ar{color:var(--acc);transition:transform .35s var(--ease)}
.tease-more:hover{color:var(--acc)}
.tease-more:hover .ar{transform:translateX(5px)}
.tease-line{font-size:clamp(15px,1.3vw,17px);color:var(--ink2);max-width:560px;margin-top:clamp(26px,3.4vw,38px)}
/* ---------- CONTACT — path cards ---------- */
.path-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(36px,4.6vw,56px)}
.path-card{position:relative;background:var(--white);border:1px solid var(--hair);border-radius:22px;padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:10px;text-align:left;min-height:210px;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .35s,background .35s;width:100%}
.path-card:hover{transform:translateY(-5px);box-shadow:0 28px 64px -34px rgba(11,11,12,.2);border-color:var(--hair2)}
.path-card.primary{background:var(--acctint);border-color:rgba(240,78,35,.35)}
.path-card.primary:hover{border-color:var(--acc);box-shadow:0 28px 64px -30px rgba(240,78,35,.35)}
.path-card .pk{font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
.path-card.primary .pk{color:var(--acc)}
.path-card h3{font-size:clamp(1.35rem,2vw,1.7rem);letter-spacing:-.02em}
.path-card .pd{font-size:13.5px;color:var(--ink2);line-height:1.55}
.path-card .big{font-family:var(--disp);font-weight:600;font-size:clamp(1.15rem,1.7vw,1.45rem);letter-spacing:-.02em;word-break:break-all;line-height:1.2}
.path-card .pgo{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:500;font-size:14px;margin-top:auto;padding-top:12px;color:var(--ink)}
button.pgo{background:none;border:0;padding-left:0;padding-right:0;cursor:pointer;text-align:left}
.path-card .pgo .ar{color:var(--acc);transition:transform .35s var(--ease);font-style:normal}
.path-card:hover .pgo .ar{transform:translateX(5px)}
.path-card .copy-hint{position:absolute;top:18px;right:18px;font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);background:#fff;border:1px solid rgba(240,78,35,.35);border-radius:999px;padding:6px 12px;opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s var(--ease);pointer-events:none}
.path-card:hover .copy-hint{opacity:1;transform:none}
/* ---------- TOAST ---------- */
#toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,18px);background:var(--ink);color:#fff;padding:13px 24px;border-radius:999px;font-family:var(--disp);font-weight:500;font-size:13.5px;letter-spacing:-.01em;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s;z-index:1300;pointer-events:none;box-shadow:0 18px 40px -16px rgba(11,11,12,.4)}
#toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
/* ---------- RESPONSIVE ---------- */
@media(max-width:1100px){
  .ind-grid{grid-template-columns:repeat(2,1fr)}
  .stg-grid{grid-template-columns:repeat(3,1fr)}
  .cfg-cards{grid-template-columns:repeat(2,1fr)}
  .need-grid{grid-template-columns:repeat(3,1fr)}
  .path-grid{grid-template-columns:1fr}
  .path-card{min-height:0}
  #nav .links{display:none}
  .f-cols{grid-template-columns:repeat(2,1fr)}
  .co-steps{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:20px}
  .mark-zone{height:min(72vmin,380px);margin:0}
  .mark-hint{position:static;transform:none;text-align:center;margin-top:6px}
  #markWrap{position:static;flex-direction:column;height:100%}
  #markCanvas{flex:1;min-height:0}
  #hero{padding-top:110px;min-height:0;padding-bottom:80px}
  .scroll-cue{display:none}
  .cfg-grid,.intake-grid{grid-template-columns:1fr}
  .intake-grid .wiz{order:-1}
  .cfg-sum{position:static}
  .work-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .labs-grid{grid-template-columns:1fr}
  .labs-arrow{transform:rotate(90deg);margin:0 auto}
  #burger{display:block}
  #nav .slots,#nav .btn{display:none}
  .svc-head .desc{display:none}
  .wiz-fields{grid-template-columns:1fr}
  .co-meta .m{flex-basis:150px;padding-left:0;border-left:0}
  .co-gal{grid-template-columns:1fr}
  .co-next{margin-left:0;width:100%}
}
@media(max-width:560px){
  .stg-grid{grid-template-columns:repeat(2,1fr)}
  .ind-grid{grid-template-columns:1fr}
  .cfg-cards{grid-template-columns:repeat(2,1fr)}
  .cfg-card{min-height:110px}
  .need-grid{grid-template-columns:repeat(2,1fr)}
  .f-cols{grid-template-columns:1fr}
  .co-stats{grid-template-columns:1fr;gap:20px}
  .co-steps{grid-template-columns:repeat(2,1fr)}
  .co-brand span{display:none}
}
/* ---------- CONTACT — centered wizard (v7) ---------- */
.quote-center{max-width:760px;margin:0 auto}
.quote-note{text-align:center;font-size:13px;color:var(--muted);margin-top:22px}
.quote-note a{color:var(--ink2);border-bottom:1px solid var(--hair2);transition:color .3s,border-color .3s}
.quote-note a:hover{color:var(--acc);border-color:var(--acc)}
/* ---------- SERVICES v11 WAVE B — "BUILD YOUR PROJECT" guided journey ---------- */
/* Three unmistakable states: closed (white hairline) / open (full-width, NEUTRAL
   ink-60% border — never orange) / selected (2px orange frame + ✓ Selected badge). */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bld-title{font-family:var(--body);font-weight:600;font-size:clamp(44px,4.6vw,56px);letter-spacing:-.03em;line-height:1.02;max-width:900px}
.bld-intro{font-size:18px;line-height:1.6;max-width:640px}
.journey{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-top:clamp(26px,3vw,36px)}
.journey .jstep{font-size:13px;font-weight:500;color:var(--ink2);border:1px solid var(--hair2);border-radius:999px;padding:8px 16px;white-space:nowrap;background:var(--white)}
.journey .jar{color:var(--acc);font-size:13px}
.svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.svc-card{position:relative;background:var(--white);border:1px solid var(--hair);border-radius:22px;padding:clamp(24px,2.8vw,34px);display:flex;flex-direction:column;gap:10px;cursor:pointer;scroll-margin-top:96px;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .35s}
.svc-card:hover{transform:translateY(-4px);box-shadow:0 28px 64px -34px rgba(11,11,12,.18);border-color:var(--hair2)}
.svc-card.open{grid-column:1/-1;border-color:rgba(11,11,12,.6);cursor:default}
.svc-card.open:hover{transform:none;box-shadow:0 28px 64px -34px rgba(11,11,12,.14)}
.svc-card.sel{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc),0 18px 48px -30px rgba(240,78,35,.35)}
.svc-card .num{position:absolute;top:20px;right:24px;font-family:var(--body);font-weight:500;font-size:13px;letter-spacing:.1em;color:var(--ink);opacity:.2;user-select:none;pointer-events:none}
.svc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.svc-card .nm{font-family:var(--body);font-weight:600;font-size:clamp(30px,2.8vw,38px);letter-spacing:-.02em;line-height:1.05;flex:1;min-width:0;padding-right:40px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.svc-tog{text-align:left;cursor:pointer;font:inherit;letter-spacing:inherit;line-height:inherit}
.svc-badge{display:inline-flex;align-items:center;background:var(--acc);color:#fff;font-size:12px;font-weight:600;letter-spacing:.02em;padding:5px 13px;border-radius:999px;line-height:1.5}
.svc-badge[hidden]{display:none}
.svc-close{flex:none;margin-top:10px;font-size:14px;font-weight:500;color:var(--ink2);border-bottom:1.5px solid var(--hair2);padding-bottom:3px;transition:color .3s,border-color .3s;white-space:nowrap}
.svc-close:hover{color:var(--ink);border-color:var(--ink)}
.svc-close[hidden]{display:none}
.svc-card .desc{font-size:18px;color:var(--ink);line-height:1.5;max-width:56ch}
.svc-card .prev{font-size:15px;color:var(--muted);line-height:1.5}
.svc-card .best{font-size:15px;color:var(--ink2);line-height:1.5}
.svc-card .best b{font-weight:600;color:var(--ink)}
.svc-more{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--acc);margin-top:2px}
.svc-more .ar{font-style:normal;transition:transform .35s var(--ease)}
.svc-card:hover .svc-more .ar{transform:translateX(5px)}
.svc-card.open .svc-teaser{display:none}
.svc-x{overflow:hidden}
.svc-x[hidden]{display:none}
.svc-xin{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,72px);padding-top:clamp(20px,2.4vw,30px);margin-top:clamp(14px,1.8vw,20px);border-top:1px solid var(--hair)}
.svc-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.svc-col .lab{display:flex;align-items:center;gap:10px;font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:18px}
.svc-col .lab::before{content:"";width:16px;height:1px;background:var(--acc)}
.svc-col .lab:first-child{margin-top:0}
.svc-col .val{font-size:15.5px;color:var(--ink2);line-height:1.55}
.svc-col .val.big{font-size:17px;color:var(--ink)}
.recv{list-style:none;display:flex;flex-direction:column}
.recv li{display:flex;align-items:baseline;gap:10px;font-size:15px;color:var(--ink2);line-height:1.5;padding:7px 0;border-bottom:1px solid var(--hair)}
.recv li:last-child{border-bottom:0}
.recv li svg{width:12px;height:12px;flex:none;transform:translateY(1px)}
.recv li path{stroke:var(--acc);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.how{font-size:15px;color:var(--ink);line-height:1.7}
.how i{font-style:normal;color:var(--acc);padding:0 2px}
.svc-pick{margin-top:22px;align-self:flex-start}
/* sticky selection bar — services page only, replaces the old floating pill's role */
#svcBar{position:fixed;left:50%;bottom:22px;z-index:1300;display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:#fff;font-size:14.5px;font-weight:500;padding:14px 24px;border-radius:999px;box-shadow:0 26px 64px -18px rgba(11,11,12,.55);white-space:nowrap;transform:translate(-50%,calc(100% + 46px));visibility:hidden;transition:transform .55s var(--ease),visibility 0s linear .55s}
#svcBar.show{transform:translate(-50%,0);visibility:visible;transition:transform .55s var(--ease)}
#svcBar .n b{font-weight:600}
#svcBar .sep{opacity:.4}
#svcBar .go{display:inline-flex;align-items:center;gap:7px;color:var(--coral);font-weight:600;transition:color .3s}
#svcBar .go .ar{font-style:normal;transition:transform .35s var(--ease)}
#svcBar:hover .go{color:#fff}
#svcBar:hover .go .ar{transform:translateX(4px)}
/* ---------- PROJECT MODAL (site-wide) ---------- */
#quoteModal{position:fixed;inset:0;z-index:1500;display:flex;align-items:center;justify-content:center;padding:clamp(10px,3vw,40px)}
#quoteModal[hidden]{display:none}
#quoteModal .qm-backdrop{position:absolute;inset:0;background:rgba(11,11,12,.44);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .45s var(--ease)}
#quoteModal.open .qm-backdrop{opacity:1}
#quoteModal .qm-sheet{position:relative;width:min(760px,100%);max-height:calc(100svh - 32px);overflow-y:auto;overscroll-behavior:contain;background:var(--white);border-radius:28px;padding:clamp(24px,4vw,46px);box-shadow:0 60px 140px -40px rgba(11,11,12,.55);opacity:0;transform:translateY(60px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
#quoteModal.open .qm-sheet{opacity:1;transform:none}
#quoteModal .qm-x{position:absolute;top:16px;right:16px;width:42px;height:42px;border-radius:50%;border:1px solid var(--hair2);display:flex;align-items:center;justify-content:center;background:var(--white);transition:all .3s;z-index:2}
#quoteModal .qm-x svg{width:12px;height:12px}
#quoteModal .qm-x path{stroke:var(--ink2);stroke-width:1.8;stroke-linecap:round}
#quoteModal .qm-x:hover{background:var(--ink);border-color:var(--ink)}
#quoteModal .qm-x:hover path{stroke:#fff}
#quoteModal .qm-eyebrow{margin-bottom:14px}
#quoteModal .qm-title{font-size:clamp(1.8rem,3.4vw,2.6rem);letter-spacing:-.03em;margin:0 0 26px;padding-right:48px}
#quoteModal .wiz{border:0;box-shadow:none;padding:0;border-radius:0;background:transparent}
@media(max-width:900px){
  .svc-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .svc-xin{grid-template-columns:1fr}
}
@media(max-width:560px){
  #quoteModal{padding:8px}
  #quoteModal .qm-sheet{border-radius:20px;max-height:calc(100svh - 16px)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  #markFallback{animation:none}
  #finale .finale-mark{animation:none}
  .wcard.feat .art svg{animation:none}
  .wcard:hover .art .artfloat{transform:none}
  /* process journey: no scrub, no living loops — everything static + visible */
  .pj-visual .v-l{transition:none}
  .pj-visual .v-screens .bar{transition:none}
  .pj-line i{transition:none}
  .pj-ch-name{transition:none}
}

/* ============================================================
   v7 WAVE 2 — LEGAL CENTRE + CONSENT SYSTEM
   Restrained legal layout, real cookie controls, print styles.
   ============================================================ */
/* ---------- standalone footer for legal pages (same chrome, no finale band) ---------- */
.site-footer{background:var(--ink);color:#fff;padding-top:clamp(56px,7vw,88px);position:relative;overflow:hidden}
.site-footer .f-offices .hq{color:var(--acc);font-weight:600;padding:0 4px}
/* ---------- legal page scaffold ---------- */
.legal-main{padding-top:clamp(118px,13vw,168px)}
.legal-hero{padding-bottom:clamp(28px,3.6vw,46px)}
.legal-hero h1{font-size:clamp(2.5rem,5.2vw,4rem);margin-top:20px;letter-spacing:-.03em;line-height:1}
.legal-hero .intro{max-width:660px}
.legal-meta-line{display:flex;flex-wrap:wrap;gap:8px 24px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted);margin-top:30px;border-top:1px solid var(--hair);padding-top:18px}
.legal-meta-line b{color:var(--ink2);font-weight:500}
.legal-grid{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:clamp(40px,5.5vw,96px);padding-bottom:clamp(72px,9vw,120px)}
.legal-grid>.legal-side,.legal-grid>.legal-doc{min-width:0}
.legal-jump select{min-width:0}
/* ---------- TOC ---------- */
.legal-toc{position:sticky;top:104px;align-self:start}
.legal-toc .toc-h{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.legal-toc a{display:block;font-size:13px;line-height:1.4;color:var(--ink2);padding:6px 0 6px 14px;border-left:1px solid var(--hair);transition:color .25s,border-color .25s}
.legal-toc a:hover{color:var(--ink)}
.legal-toc a.cur{color:var(--acc);border-left-color:var(--acc)}
.legal-jump{display:none;margin-bottom:30px}
.legal-jump label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.legal-jump select{width:100%;font:inherit;font-size:14.5px;color:var(--ink);background:var(--white);border:1px solid var(--hair2);border-radius:12px;padding:13px 16px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%234A4A4F' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.legal-jump select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 4px rgba(240,78,35,.14)}
/* ---------- legal document typography ---------- */
.legal-doc{max-width:68ch}
.legal-doc>section{padding:clamp(26px,3vw,36px) 0;border-top:1px solid var(--hair);scroll-margin-top:96px}
.legal-doc>section:first-of-type{border-top:0;padding-top:4px}
.legal-doc h2{font-family:var(--disp);font-weight:600;font-size:clamp(1.3rem,1.9vw,1.62rem);letter-spacing:-.02em;line-height:1.15;margin-bottom:16px}
.legal-doc h2 .sn{color:var(--acc);margin-right:10px}
.legal-doc h3{font-family:var(--body);font-weight:600;font-size:16px;letter-spacing:-.01em;line-height:1.4;margin:24px 0 8px;color:var(--ink)}
.legal-doc p,.legal-doc li{font-size:17px;line-height:1.75;color:var(--ink2)}
.legal-doc p+p{margin-top:14px}
.legal-doc ul,.legal-doc ol{margin:14px 0;padding-left:24px}
.legal-doc li{margin:7px 0}
.legal-doc li::marker{color:var(--acc)}
/* v14 A4 — :not(.btn) keeps pill buttons' own colors (white label on ink/orange);
   previously this rule out-specified .btn-ink/.btn-acc and made their labels invisible */
.legal-doc a:not(.btn){color:var(--ink);border-bottom:1px solid var(--hair2);transition:color .25s,border-color .25s}
.legal-doc a:not(.btn):hover{color:var(--acc);border-color:var(--acc)}
.legal-doc strong,.legal-doc b{color:var(--ink)}
.legal-doc .tblwrap{overflow-x:auto;margin:20px 0}
.legal-doc table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.6}
.legal-doc th{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;text-align:left;color:var(--muted);padding:10px 14px 10px 0;border-bottom:1.5px solid var(--ink);white-space:nowrap}
.legal-doc td{padding:13px 14px 13px 0;border-bottom:1px solid var(--hair);vertical-align:top;color:var(--ink2)}
.legal-doc td:first-child{color:var(--ink);font-weight:500}
.legal-note{border-left:2px solid var(--acc);background:var(--acctint);padding:16px 20px;border-radius:0 14px 14px 0;margin:20px 0;font-size:15px;line-height:1.65;color:var(--ink2)}
.legal-note b{color:var(--ink)}
.legal-review{border:1.5px dashed rgba(240,78,35,.55);border-radius:16px;padding:18px 22px;margin:22px 0;background:#fff}
.legal-review .rv-tag{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);border:1px solid rgba(240,78,35,.4);border-radius:999px;padding:5px 12px;margin-bottom:10px}
/* ---------- related policies strip ---------- */
.legal-related{margin-top:clamp(40px,5vw,60px);border-top:1px solid var(--hair);padding-top:30px}
.legal-related .rel-h{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.rel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rel-card{display:flex;flex-direction:column;gap:6px;border:1px solid var(--hair);border-radius:16px;padding:18px 20px;transition:border-color .3s,transform .3s var(--ease)}
.rel-card:hover{border-color:var(--ink);transform:translateY(-2px)}
.rel-card b{font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:-.01em}
.rel-card span{font-size:12.5px;color:var(--muted);line-height:1.5}
/* ---------- legal hub (legal.html) ---------- */
.legal-hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(30px,4vw,44px)}
.hub-card{display:flex;flex-direction:column;gap:8px;border:1px solid var(--hair);border-radius:20px;padding:clamp(20px,2.4vw,28px);background:var(--white);transition:border-color .3s,transform .35s var(--ease),box-shadow .35s var(--ease)}
.hub-card:hover{border-color:rgba(240,78,35,.5);transform:translateY(-3px);box-shadow:0 22px 50px -30px rgba(11,11,12,.16)}
.hub-card .hc-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--acc)}
.hub-card b{font-family:var(--disp);font-weight:600;font-size:19px;letter-spacing:-.02em}
.hub-card span{font-size:13.5px;color:var(--ink2);line-height:1.55}
.hub-card .hc-go{font-family:var(--disp);font-weight:500;font-size:13.5px;margin-top:auto;padding-top:12px;color:var(--ink)}
.hub-card .hc-go .ar{color:var(--acc)}
.legal-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(26px,3.4vw,38px)}
/* ---------- privacy request form ---------- */
.pr-form{display:grid;gap:14px;margin-top:22px}
.pr-form .fld label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.pr-form input,.pr-form select,.pr-form textarea{width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--white);border:1px solid var(--hair2);border-radius:14px;padding:14px 17px;transition:border-color .3s}
.pr-form textarea{min-height:130px;resize:vertical}
.pr-form input:focus,.pr-form select:focus,.pr-form textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 4px rgba(240,78,35,.14)}
.pr-form .fld-err{font-size:13px;color:var(--acc2);margin-top:6px;display:none}
.pr-form .fld.bad input,.pr-form .fld.bad select,.pr-form .fld.bad textarea{border-color:var(--acc)}
.pr-form .fld.bad .fld-err{display:block}
.pr-success{border:1px solid var(--hair);border-left:3px solid var(--ok);border-radius:16px;padding:22px 24px;margin-top:22px;background:#fff}
.pr-success .pr-ref{font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--ink);background:var(--gray);border-radius:8px;padding:6px 12px;display:inline-block;margin:10px 0}
.pr-success p{font-size:15px;color:var(--ink2);line-height:1.65}
/* ============================================================
   CONSENT SYSTEM (banner + preferences modal)
   ============================================================ */
#csBanner{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:1600;width:min(880px,calc(100% - 32px));background:var(--white);border:1px solid var(--hair2);border-radius:20px;box-shadow:0 30px 80px -28px rgba(11,11,12,.32);padding:20px 22px;display:flex;align-items:center;gap:18px 22px;flex-wrap:wrap}
#csBanner[hidden]{display:none}
/* while the quote modal is open, defer the consent banner so it never
   covers the modal sheet (banner z-index 1600 > modal 1500). #quoteModal
   is appended by core.js before consent.js builds #csBanner, so the
   banner is always a later sibling; it returns as soon as the modal is
   fully hidden again. */
#quoteModal:not([hidden]) ~ #csBanner{display:none}
#csBanner .cs-txt{flex:1 1 340px}
#csBanner .cs-k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px;margin-bottom:6px}
#csBanner .cs-k::before{content:"";width:16px;height:1px;background:var(--acc)}
#csBanner p{font-size:13.5px;line-height:1.55;color:var(--ink2)}
#csBanner p a{color:var(--ink);border-bottom:1px solid var(--hair2)}
#csBanner p a:hover{color:var(--acc);border-color:var(--acc)}
#csBanner .cs-btns{display:flex;gap:10px;flex-wrap:wrap}
.cs-btn{font-family:var(--disp);font-weight:500;font-size:14px;letter-spacing:-.01em;padding:12px 22px;border-radius:999px;min-height:46px;border:1.5px solid var(--ink);transition:background .3s,color .3s,border-color .3s}
.cs-btn.accept{background:var(--ink);color:#fff}
.cs-btn.accept:hover{background:var(--acc);border-color:var(--acc)}
.cs-btn.reject,.cs-btn.manage{background:var(--white);color:var(--ink)}
.cs-btn.reject:hover,.cs-btn.manage:hover{background:var(--gray)}
#csBanner.cs-gpc .cs-btns .cs-btn.accept{display:none}
/* ---------- preferences modal ---------- */
#csModal{position:fixed;inset:0;z-index:1700;display:flex;align-items:center;justify-content:center;padding:clamp(10px,3vw,40px)}
#csModal[hidden]{display:none}
#csModal .cs-backdrop{position:absolute;inset:0;background:rgba(11,11,12,.44);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#csModal .cs-sheet{position:relative;width:min(620px,100%);max-height:calc(100svh - 32px);overflow-y:auto;overscroll-behavior:contain;background:var(--white);border-radius:24px;padding:clamp(24px,3.6vw,40px);box-shadow:0 60px 140px -40px rgba(11,11,12,.55)}
#csModal .cs-title{font-family:var(--disp);font-weight:600;font-size:clamp(1.5rem,2.6vw,1.9rem);letter-spacing:-.02em;margin:10px 0 8px}
#csModal .cs-sub{font-size:14px;color:var(--ink2);line-height:1.6;margin-bottom:22px}
#csModal .cs-sub a{color:var(--ink);border-bottom:1px solid var(--hair2)}
.cs-cat{border-top:1px solid var(--hair);padding:18px 0;display:grid;grid-template-columns:1fr auto;gap:6px 18px;align-items:start}
.cs-cat .cc-name{font-family:var(--disp);font-weight:600;font-size:16px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.cs-cat .cc-lock{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);border:1px solid var(--hair2);border-radius:999px;padding:3px 10px}
.cs-cat .cc-desc{grid-column:1/-1;font-size:13.5px;line-height:1.6;color:var(--ink2)}
.cs-cat .cc-honest{font-size:12.5px;color:var(--muted);margin-top:6px;display:block}
/* switch */
.cs-sw{position:relative;display:inline-block;width:52px;height:30px;flex:none}
.cs-sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.cs-sw .tr{position:absolute;inset:0;border-radius:999px;background:var(--hair2);transition:background .3s;pointer-events:none}
.cs-sw .tr::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(11,11,12,.25);transition:transform .3s var(--ease)}
.cs-sw input:checked+.tr{background:var(--ok)}
.cs-sw input:checked+.tr::after{transform:translateX(22px)}
.cs-sw input:focus-visible+.tr{outline:2px solid var(--acc);outline-offset:3px}
.cs-sw.locked .tr{background:var(--ink)}
.cs-sw.locked .tr::after{transform:translateX(22px)}
.cs-foot{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.cs-foot .cs-btn{flex:1;justify-content:center;text-align:center;min-width:150px}
.cs-note{font-size:12px;color:var(--muted);line-height:1.55;margin-top:16px}
@media(max-width:900px){
  .legal-grid{grid-template-columns:1fr}
  .legal-toc{display:none}
  .legal-jump{display:block}
  .legal-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .legal-hub-grid{grid-template-columns:1fr}
  .rel-grid{grid-template-columns:1fr}
  #csBanner{bottom:10px;width:calc(100% - 20px);padding:18px}
  #csBanner .cs-btns{width:100%}
  #csBanner .cs-btn{flex:1;text-align:center;justify-content:center}
  .cs-foot .cs-btn{min-width:0}
}
/* ============================================================
   PRINT — legal pages read clean on paper/PDF
   ============================================================ */
@media print{
  #nav,#menu,#burger,#thread,#csBanner,#csModal,#toast,
  .legal-side,.legal-related,.legal-actions,
  .site-footer .f-cols,.site-footer .f-meta,.site-footer .f-ghost,
  #finale .cta-zone,.scroll-cue,.hero-ctas,.leaf-rain{display:none!important}
  body{background:#fff;color:#000;font-size:11.5pt}
  .legal-main{padding-top:0}
  .legal-grid{display:block;padding-bottom:0}
  .legal-doc{max-width:none}
  .legal-doc p,.legal-doc li{font-size:11.5pt;line-height:1.6;color:#000}
  .legal-doc h2{font-size:15pt;break-after:avoid}
  .legal-doc>section{break-inside:avoid;padding:14pt 0}
  .legal-doc a{color:#000;border-bottom:0}
  .legal-note,.legal-review{background:#fff;border:1pt solid #999;border-radius:0}
  .site-footer{background:#fff;color:#000;padding:16pt 0;border-top:1pt solid #000}
  .site-footer .f-legal{color:#000}
  .site-footer .f-legal a{color:#000}
  #finale{background:#fff;color:#000}
  #finale footer{border-top:1pt solid #000}
  .f-legal,.f-legal a,.f-meta{color:#000!important}
  #hero{min-height:0;padding:40pt 0}
  .rv,.rl>i{opacity:1!important;transform:none!important}
}

/* ============================================================
   MOBILE HERO FIT (<=860px) — first-impression fix.
   Tightens the hero's vertical rhythm (smaller H1 clamp, tighter
   sub/CTA margins) and caps the mark canvas at
   ~52vh so the TOP of the living mark is visible inside the first
   viewport at phone sizes. Desktop (>860px) is untouched.
   ============================================================ */
@media(max-width:860px){
  #hero{padding-top:96px;padding-bottom:48px}
  .hero-eyebrow{margin-bottom:14px;gap:10px}
  #hero h1{font-size:clamp(2.35rem,10.4vw,3rem)}
  .hero-sub{margin-top:14px}
  .hero-ctas{margin-top:18px;gap:10px}
  .hero-ctas .btn{padding:12px 20px;min-height:44px}
  .hero-grid{gap:16px}
  /* cap the living-mark canvas so its top clears the fold */
  .mark-zone{height:min(52vh,340px)}
}

/* ============================================================
   v8 — GUIDED SERVICES + CONFIGURATOR (Gambetta editorial pass)
   ============================================================ */
/* guidance line under the services intro, anchors to the configurator */
.svc-guide{margin-top:clamp(24px,3vw,34px)}
.svc-guide a{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:500;font-size:clamp(16px,1.5vw,19px);letter-spacing:-.01em;color:var(--ink);border-bottom:1px solid var(--hair2);padding-bottom:5px;transition:color .3s,border-color .3s}
.svc-guide a:hover{color:var(--acc);border-color:var(--acc)}
.svc-guide .ar{color:var(--acc);font-style:normal;transition:transform .35s var(--ease)}
.svc-guide a:hover .ar{transform:translateX(4px)}
/* ---------- configurator: guided mode (mode A) ---------- */
.cfg-main{min-width:0}
.cfg-q{font-family:var(--body);font-weight:600;font-size:clamp(1.9rem,3.2vw,2.7rem);letter-spacing:-.02em;line-height:1.06}
.cfg-qsub{font-size:14.5px;color:var(--muted);margin-top:10px;max-width:520px}
.gopt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(22px,2.6vw,30px)}
.gopt{position:relative;background:var(--white);border:1px solid var(--hair);border-radius:18px;padding:20px 20px 18px;display:flex;flex-direction:column;gap:8px;text-align:left;min-height:118px;transition:border-color .3s,background .3s,transform .35s var(--ease),box-shadow .35s}
.gopt:hover{border-color:var(--hair2);transform:translateY(-3px)}
.gopt .gic{width:28px;height:28px;color:var(--ink2);transition:color .3s}
.gopt .gic *{stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.gopt .t{font-family:var(--disp);font-weight:600;font-size:17px;letter-spacing:-.015em;line-height:1.15;padding-right:30px}
.gopt .s{font-size:13px;color:var(--muted);line-height:1.45}
.gopt .ck{position:absolute;top:14px;right:14px;width:22px;height:22px;border:1.5px solid var(--hair2);border-radius:50%;background:var(--white);transition:background .3s,border-color .3s}
.gopt .ck svg{position:absolute;inset:0;margin:auto;width:11px;height:11px}
.gopt .ck path{stroke:#fff;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .35s var(--ease) .05s}
.gopt.sel{border-color:var(--acc);background:var(--acctint);box-shadow:0 12px 28px -16px rgba(240,78,35,.4);animation:cardPop .45s var(--ease)}
.gopt.sel::after{content:"";position:absolute;inset:-1px;border:1.5px solid var(--acc);border-radius:18px;pointer-events:none;animation:ringDraw .5s var(--ease)}
.gopt.sel .gic{color:var(--acc)}
.gopt.sel .ck{background:var(--acc);border-color:var(--acc)}
.gopt.sel .ck path{stroke-dashoffset:0}
/* v10: selected option reveals its bundle inline ("includes:" + small chips) */
.gopt .gopt-inc{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px;padding-top:10px;border-top:1px dashed var(--hair2)}
.gopt .gopt-inc[hidden]{display:none}
.gopt.sel .gopt-inc{border-top-color:rgba(240,78,35,.28)}
.gopt .gi-lab{font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.gopt .gchip{font-size:11px;padding:4px 9px;pointer-events:none}
.gopt.sel .gchip{border-color:rgba(240,78,35,.35);color:var(--ink);background:var(--white)}
/* "Included in your package" chip row */
.cfg-inc{margin-top:clamp(24px,3vw,32px);border-top:1px solid var(--hair);padding-top:18px;min-height:86px}
.cfg-inc-lab{display:flex;align-items:center;gap:10px;font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.cfg-inc-lab::before{content:"";width:16px;height:1px;background:var(--acc)}
.cfg-inc-n{color:var(--acc);letter-spacing:.06em}
.bchip{animation:chipIn .45s var(--ease) both}
@keyframes chipIn{from{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:none}}
/* escapes: mode B + talk-to-us */
.cfg-esc{display:flex;gap:12px 28px;flex-wrap:wrap;margin-top:clamp(22px,2.6vw,30px)}
.cfg-modeb,.cfg-talk{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:500;font-size:14px;letter-spacing:-.01em;color:var(--ink2);border-bottom:1.5px solid var(--hair2);padding-bottom:3px;transition:color .3s,border-color .3s}
.cfg-modeb:hover,.cfg-talk:hover{color:var(--acc);border-color:var(--acc)}
.cfg-modeb .ar,.cfg-talk .ar{color:var(--acc);font-style:normal;transition:transform .35s var(--ease)}
.cfg-modeb:hover .ar,.cfg-talk:hover .ar{transform:translateX(4px)}
.cfg-modeb[aria-expanded="true"]{color:var(--acc);border-color:var(--acc)}
.cfg-modeb[aria-expanded="true"] .ar{transform:rotate(90deg)}
/* classic grid lives inside the guided column now; hidden until mode B */
.cfg-cards{margin-top:clamp(20px,2.4vw,28px)}
.cfg-cards[hidden]{display:none}
#cfgCta.off{opacity:.35;pointer-events:none}
@media(max-width:1100px){
  .gopt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .cfg-main{order:0}
}
@media(max-width:760px){
  .hiw{grid-template-columns:1fr}
  .hiw-step+.hiw-step{border-left:0;border-top:1px solid var(--hair)}
}
@media(max-width:560px){
  .gopt-grid{grid-template-columns:1fr}
  .gopt{min-height:0}
  .svc-card .nm{font-size:26px;padding-right:34px}
  .svc-top{flex-wrap:wrap}
  #svcBar{font-size:12.5px;padding:12px 16px;gap:8px;max-width:calc(100vw - 20px)}
  .journey .jstep{white-space:normal}
}
@media(prefers-reduced-motion:reduce){
  .bchip{animation:none}
  .gopt.sel{animation:none}
  .gopt.sel::after{animation:none}
}

/* ============================================================
   v11 WAVE D — studio.html cinematic rebuild
   D1 ORIGIN (Geist only — no serif/italic/mono) +
   D2 COMPLEXITY (Satoshi only, the one charcoal chapter #141312).
   Pinned desktop sequences; `.static` = mobile / reduced-motion /
   no-GSAP fallback: scenes stack vertically, every message kept.
   ============================================================ */
/* ---------- D1 · ORIGIN STORY ---------- */
#origin{--obg:#FAF7F2;background:var(--obg);font-family:'Geist',Inter,system-ui,sans-serif;color:var(--ink);overflow:hidden}
#origin h2,#origin button,#origin a,#origin p,#origin span,#origin i{font-family:'Geist',Inter,system-ui,sans-serif;font-style:normal}
.org-pin{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.org-kicker{position:absolute;top:88px;left:var(--gut);right:var(--gut);z-index:8;display:flex;align-items:center;gap:16px;font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--muted)}
.org-prog{flex:1;height:1px;background:var(--hair2);position:relative}
.org-prog i{position:absolute;inset:0;background:var(--acc);transform:scaleX(0);transform-origin:0 50%}
/* stage */
.org-stage{position:absolute;inset:0 0 0 12vw;display:flex;align-items:center;justify-content:center;pointer-events:none}
.org-grid{position:absolute;width:min(88vmin,880px);height:min(88vmin,880px);left:50%;top:50%;transform:translate(-50%,-50%)}
.org-grid .gl{stroke:rgba(11,11,12,.3);stroke-width:1.2;stroke-dasharray:100;stroke-dashoffset:100}
.org-grid .gn circle{fill:rgba(11,11,12,.45);opacity:0}
.org-grid .gt path{stroke:rgba(11,11,12,.25);stroke-width:1;stroke-dasharray:100;stroke-dashoffset:100;fill:none}
.org-core{position:relative;width:min(30vmin,300px);will-change:transform}
.org-mark{width:100%;height:auto;overflow:visible}
/* v16 TRUE MARK — solid 2025 state: the officially-traced paths filled in
   site ink (#0B0B0C) + brand terracotta (#BF6A30); evenodd clears the ring */
.org-mark .om-ring{fill:var(--ink)}
.org-mark .om-e{fill:#BF6A30}
/* the 2001 proto-mark: the SAME traced paths stroke-only (blueprint wireframe,
   thin stroke, no fill — stroke-width 10 in the 1000-grid = 2 on stage),
   construction points on the traced contours, faint blueprint hairlines */
.om-wire .om-hl{stroke:rgba(76,96,118,.34);stroke-width:.9;stroke-dasharray:100;stroke-dashoffset:100;fill:none}
.om-wire .om-ring-w{fill:none;stroke:#4C6076;stroke-width:10;stroke-dasharray:1000;stroke-dashoffset:1000}
.om-wire .om-e-w{fill:none;stroke:#4C6076;stroke-width:10;stroke-dasharray:1000;stroke-dashoffset:1000}
.om-wire .om-pts circle{fill:#4C6076;opacity:0}
/* crisp, subtle orange ring-glow (replaces the old beige smear behind the mark) */
.org-mark .om-glow{fill:none;stroke:var(--acc);stroke-width:1.4;opacity:0}
#origin.static .om-wire{display:none}
#origin.static .org-mark .om-e{fill-opacity:1}
#origin.static .org-mark .om-glow{opacity:.32}
.org-tag{position:absolute;left:50%;bottom:-44px;transform:translateX(-50%);white-space:nowrap;font-size:13px;font-weight:500;letter-spacing:.14em;color:var(--ink2)}
.org-tag .ot{display:inline-block}
.org-tag .ot-studio{position:absolute;left:50%;transform:translateX(-50%);opacity:0;color:var(--acc)}
/* scene 3 — elements emerging from the freed core
   (variants carry the .org-emerge prefix so they beat the .oe base) */
.org-emerge{position:absolute;left:50%;top:50%;width:0;height:0}
.org-emerge .oe{position:absolute;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--hair2);border-radius:14px;box-shadow:0 18px 40px -22px rgba(11,11,12,.28);font-size:15px;font-weight:500;color:var(--ink);opacity:0;transform:scale(0)}
.org-emerge .oe-type{width:58px;height:58px;font-size:22px;letter-spacing:-.02em}
/* colour chip: a real mini palette (brand oranges + ink + paper), never an empty square */
.org-emerge .oe-sw{width:58px;height:58px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;align-items:stretch;justify-items:stretch;gap:5px;padding:10px;background:#fff;border:1px solid var(--hair2)}
.org-emerge .oe-sw b{display:block;border-radius:5px}
.org-emerge .oe-sw b:nth-child(1){background:var(--acc)}
.org-emerge .oe-sw b:nth-child(2){background:var(--coral)}
.org-emerge .oe-sw b:nth-child(3){background:var(--ink)}
.org-emerge .oe-sw b:nth-child(4){background:#F4F2EE;border:1px solid var(--hair2)}
.org-emerge .oe-btn{padding:13px 20px;border-radius:999px;background:var(--ink);color:#fff;border:0;font-size:13.5px}
.org-emerge .oe-btn span{color:var(--coral)}
.org-emerge .oe-cur{width:52px;height:52px;border-radius:50%}
.org-emerge .oe-cur svg{width:20px;height:20px;fill:var(--acc)}
.org-emerge .oe-br{width:58px;height:58px;font-size:15px;letter-spacing:.02em}
.org-emerge .oe-dot{width:16px;height:16px;border-radius:50%;background:var(--coral);border:0}
/* scenes */
.org-scenes{position:absolute;inset:0;z-index:6;pointer-events:none}
.org-scene{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 var(--gut);opacity:0;pointer-events:none;max-width:100%}
.org-scene>*{max-width:640px}
#origin[data-os="s5"] .org-scene[data-s="5"],
#origin[data-os="s6"] .org-scene[data-s="6"]{pointer-events:auto}
.o-lab{font-size:13px;font-weight:500;letter-spacing:.06em;color:var(--muted);margin-bottom:20px}
.o-h{font-size:clamp(3rem,7.4vw,6.875rem);font-weight:500;line-height:.95;letter-spacing:-.035em;margin:0}
.o-p{font-size:clamp(1.25rem,1.6vw,1.375rem);line-height:1.45;color:var(--ink2);margin-top:26px}
.o-acc{color:var(--acc)}
.o-exp b{font-weight:500;color:var(--ink)}
.org-words{display:flex;flex-wrap:wrap;gap:6px clamp(18px,2.6vw,34px);margin-top:clamp(26px,3.4vw,42px)}
.ow{font-size:clamp(1.35rem,2.6vw,2.1rem);font-weight:500;letter-spacing:-.02em;color:var(--ink2);padding:6px 2px;border-bottom:2px solid transparent;transition:color .3s,border-color .3s}
.ow:hover,.ow.on{color:var(--acc);border-bottom-color:var(--acc)}
/* capability living previews (scene 5) */
.org-prev{position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);width:min(320px,28vw);min-height:190px;border:1px solid var(--hair2);border-radius:20px;background:rgba(255,255,255,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .4s var(--ease);pointer-events:none}
#origin .org-prev[data-w="brand"],#origin .org-prev[data-w="product"],#origin .org-prev[data-w="web"],#origin .org-prev[data-w="motion"],#origin .org-prev[data-w="ai"]{opacity:1}
.opv{display:none;align-items:center;justify-content:center;gap:10px;width:100%;padding:26px}
.org-prev[data-w="brand"] .opv-brand,.org-prev[data-w="product"] .opv-product,.org-prev[data-w="web"] .opv-web,.org-prev[data-w="motion"] .opv-motion,.org-prev[data-w="ai"] .opv-ai{display:flex}
.opv-wm{font-size:30px;font-weight:500;letter-spacing:-.03em}
.opv-wm sup{font-size:.4em}
.opv-sw{width:26px;height:26px;border-radius:8px;animation:opvHue 3.2s ease-in-out infinite}
.opv-sw.s1{background:var(--acc)}
.opv-sw.s2{background:var(--ink);animation-delay:.4s}
.opv-sw.s3{background:#F4F2EE;border:1px solid var(--hair2);animation-delay:.8s}
@keyframes opvHue{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.opv-card{display:flex;flex-direction:column;gap:9px;width:100%;background:#fff;border:1px solid var(--hair);border-radius:14px;padding:18px}
.opv-card b{font-size:15px;font-weight:500}
.opv-bar{display:block;height:7px;border-radius:4px;background:rgba(11,11,12,.12);overflow:hidden;position:relative}
.opv-bar::after{content:"";position:absolute;inset:0;background:var(--acc);border-radius:4px;transform-origin:0 50%;animation:opvFill 2.6s var(--ease) infinite}
.opv-bar.w60::after{animation-delay:.35s}
@keyframes opvFill{0%{transform:scaleX(.1)}55%,100%{transform:scaleX(.85)}}
.opv-pill{align-self:flex-start;background:var(--acctint);color:var(--acc);font-size:11.5px;font-weight:500;padding:4px 11px;border-radius:999px;font-style:normal}
.opv-browser{display:flex;flex-direction:column;width:100%;border:1px solid var(--hair2);border-radius:12px;overflow:hidden;background:#fff}
.opv-chrome{display:flex;gap:5px;padding:8px 10px;border-bottom:1px solid var(--hair);background:var(--gray)}
.opv-chrome b{width:8px;height:8px;border-radius:50%;background:rgba(11,11,12,.2)}
.opv-page{display:flex;flex-direction:column;gap:8px;padding:14px}
.opv-page b{height:9px;border-radius:5px;background:rgba(11,11,12,.14)}
.opv-page b:first-child{width:72%;background:var(--acc);animation:opvGrow 2.8s var(--ease) infinite}
@keyframes opvGrow{0%,100%{transform:scaleX(.6)}50%{transform:scaleX(1)}}
.opv-motion svg,.opv-ai svg{width:100%;height:auto;overflow:visible}
.opv-wave{fill:none;stroke:var(--acc);stroke-width:3;stroke-linecap:round;stroke-dasharray:100;animation:opvDash 2.2s linear infinite}
@keyframes opvDash{from{stroke-dashoffset:200}to{stroke-dashoffset:0}}
.opv-net{fill:none;stroke:rgba(11,11,12,.25);stroke-width:1.4}
.opv-ai circle{fill:var(--ink)}
.opv-ai .opv-pulse{fill:var(--acc);animation:opvNode 2.4s var(--ease) infinite}
@keyframes opvNode{0%{cx:20px;cy:44px}33%{cx:52px;cy:18px}66%{cx:88px;cy:40px}100%{cx:122px;cy:16px}}
/* stage reacts differently per capability word (on .org-mark/.om-ring —
   GSAP never inlines those, so hover states never fight the scrub) */
.org-stage[data-w="brand"] .om-ring{fill:var(--acc)}
.org-stage[data-w="product"] .org-mark{filter:drop-shadow(0 0 30px rgba(240,78,35,.55))}
.org-stage[data-w="web"] .om-ring{fill:var(--coral)}
.org-stage[data-w="web"] .org-mark{transform:scale(1.04)}
.org-stage[data-w="motion"] .om-ringwrap{animation:orgSpin 5s linear infinite}
.org-stage[data-w="ai"] .org-mark{filter:drop-shadow(0 0 30px rgba(240,78,35,.55))}
.om-ring,.om-e{transition:fill .5s}
.org-mark{transition:transform .5s var(--ease),filter .5s}
/* the true ring is 180°-symmetric, so a full turn reads as continuous motion */
.om-ringwrap{transform-origin:100px 100px}
@keyframes orgSpin{to{transform:rotate(360deg)}}
/* finale */
.org-fin{justify-content:flex-end;padding-bottom:4.5vh;align-items:center;text-align:center}
.org-fin>*{max-width:860px}
.o-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:clamp(28px,3.6vw,42px)}
.o-quiet{margin-top:clamp(34px,4.4vw,54px);font-size:15px;line-height:1.5;color:var(--muted);max-width:560px}
.o-quiet b{color:var(--acc);font-weight:500}
/* D1 static (mobile / reduced-motion / no-GSAP): vertical story */
#origin.static{overflow:visible}
#origin.static .org-pin{min-height:0;display:block;padding:clamp(64px,9vw,96px) 0}
#origin.static .org-kicker{position:static;margin:0 var(--gut) 34px}
#origin.static .org-prog i{transform:scaleX(1)}
#origin.static .org-stage{position:relative;inset:auto;height:min(64vw,420px);pointer-events:none;margin-bottom:10px;overflow:hidden}
#origin.static .org-emerge{display:none}
#origin.static .org-grid .gl,#origin.static .org-grid .gt path{stroke-dashoffset:0}
#origin.static .org-grid .gn circle{opacity:1}
#origin.static .org-tag .ot-labs{display:none}
#origin.static .org-tag .ot-studio{position:static;transform:none;opacity:1}
#origin.static .org-emerge .oe{opacity:1;transform:scale(1)}
#origin.static .org-scenes{position:static;pointer-events:auto}
#origin.static .org-scene{position:static;opacity:1;pointer-events:auto;padding:clamp(40px,7vw,64px) var(--gut) 0}
#origin.static .org-scene>*{max-width:100%}
#origin.static .org-prev{position:static;transform:none;width:100%;max-width:460px;margin-top:24px}
@media(max-width:860px){
  .o-h{font-size:clamp(2.5rem,10.5vw,3.6rem)}
  .org-prev{width:min(300px,80vw)}
}

/* emerge chip positions (around the freed core) — placed clear of the
   .org-tag text band under the core (tag spans ~±145px, just below the mark) */
.org-emerge .oe-type{left:-236px;top:-150px}
.org-emerge .oe-sw{left:176px;top:-168px}
.org-emerge .oe-btn{left:-272px;top:66px}
.org-emerge .oe-cur{left:206px;top:44px}
.org-emerge .oe-br{left:-120px;top:256px}
.org-emerge .oe-dot{left:196px;top:120px}
@media(min-width:861px) and (max-width:1360px){
  .org-emerge .oe-type{left:-208px;top:-140px}
  .org-emerge .oe-sw{left:150px;top:-150px}
  .org-emerge .oe-btn{left:-230px;top:58px}
  .org-emerge .oe-cur{left:164px;top:40px}
  .org-emerge .oe-dot{left:158px;top:206px}
}
/* v11 review fix (P1): below ~1600px the pinned stage used to be centred in
   the whole viewport minus 12vw, so the grid ring + mark overlapped the left
   copy column at 1280–1440. Reserve the left column for copy (gut + 44vw),
   shrink + contain the stage inside what remains, and park the scene-5
   preview at bottom-right so it can never sit on the core. 1920px layout
   (verified clean) is untouched. */
@media(min-width:861px) and (max-width:1600px){
  .org-stage{left:calc(var(--gut) + 44vw)}
  .org-grid{width:min(88vmin,880px,94%);height:min(88vmin,880px,94%)}
  .org-core{width:min(30vmin,300px,38%)}
  .org-scene>*{max-width:min(640px,44vw)}
  .org-fin>*{max-width:min(860px,92vw)}
  .org-prev{top:auto;bottom:9vh;transform:none}
}
/* ---------- D2 · COMPLEXITY STORY (charcoal #141312) ---------- */
#complexity{background:#141312;color:#F4F2EE;font-family:'Satoshi',Inter,system-ui,sans-serif;overflow:hidden}
#complexity h2,#complexity button,#complexity a,#complexity p,#complexity span,#complexity b,#complexity label,#complexity i{font-family:'Satoshi',Inter,system-ui,sans-serif;font-style:normal}
.cx-pin{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.cx-kicker{position:absolute;top:88px;left:var(--gut);right:var(--gut);z-index:8;display:flex;align-items:center;gap:16px;font-size:13px;font-weight:500;letter-spacing:.08em;color:rgba(244,242,238,.42)}
.cx-prog{flex:1;height:1px;background:rgba(244,242,238,.14);position:relative}
.cx-prog i{position:absolute;inset:0;background:var(--acc);transform:scaleX(0);transform-origin:0 50%}
/* the living core */
.cx-core{position:absolute;left:50%;top:50%;width:min(34vmin,340px);margin:calc(min(34vmin,340px)/-2) 0 0 calc(min(34vmin,340px)/-2);opacity:0;will-change:transform;pointer-events:none;z-index:1}
.cx-mark{width:100%;height:auto;overflow:visible}
/* v16 TRUE MARK — on the dark chapter the traced ink ring renders in
   paper-white (#F5F4F0), the "e" stays brand terracotta (#BF6A30) */
.cx-mark .cm-ring{fill:#F5F4F0}
.cx-mark .cm-e{fill:#BF6A30}
/* scenes */
.cx-scenes{position:absolute;inset:0;z-index:5}
.cx-scene{position:absolute;inset:0;display:flex;align-items:center;padding:0 var(--gut);opacity:0;pointer-events:none}
.cx-copy{position:relative;z-index:6;max-width:620px}
.cx-h{font-size:clamp(3rem,7.8vw,7.5rem);font-weight:500;line-height:.92;letter-spacing:-.035em;margin:0;color:#F4F2EE}
.cx-acc{color:var(--acc)}
.cx-p{font-size:clamp(1.25rem,1.55vw,1.375rem);line-height:1.5;color:rgba(244,242,238,.66);max-width:620px;margin-top:26px}
#complexity[data-cx="s4"] .cx-scene[data-s="4"],
#complexity[data-cx="s5"] .cx-scene[data-s="5"],
#complexity[data-cx="s6"] .cx-scene[data-s="6"]{pointer-events:auto}
/* interactive layers live inside .cx-vis (pe:none) — re-enable ONLY while
   their scene is the active one, so hidden scenes never eat pointer events */
#complexity[data-cx="s4"] .cx-cmp,
#complexity[data-cx="s5"] .cx-prod{pointer-events:auto}
/* SCENE 1 — fragments floating without order, cursor-influenced */
.cx-vis{position:absolute;inset:0;pointer-events:none}
.cx-field{--mx:0;--my:0}
.fr{position:absolute;left:var(--x);top:var(--y);display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border:1px solid rgba(244,242,238,.16);border-radius:11px;background:rgba(255,255,255,.03);font-size:14px;font-weight:400;letter-spacing:.01em;color:rgba(244,242,238,.55);white-space:nowrap;transform:translate(calc(var(--mx,0)*var(--d,1)*22px),calc(var(--my,0)*var(--d,1)*18px)) rotate(var(--r,0deg))}
.fr b{color:rgba(244,242,238,.85);font-weight:500}
.fr.keep{border-color:rgba(240,78,35,.4);color:rgba(244,242,238,.8)}
.fr.box{width:52px;height:38px;padding:7px}
.fr.box i{display:block;width:100%;height:5px;border-radius:3px;background:rgba(244,242,238,.22)}
.fr.ruler{width:96px;height:10px;padding:0;border:0;background:repeating-linear-gradient(90deg,rgba(244,242,238,.3) 0 1px,transparent 1px 12px)}
.fr.scrib{width:120px;height:50px;padding:0;border:0;background:none}
.fr.scrib path{fill:none;stroke:rgba(244,242,238,.4);stroke-width:2;stroke-linecap:round}
/* SCENE 1 v13 D — the fragments are ~14 parts of ONE recognizable product
   (nav bar, headline lines, button, chart card, image card, form field,
   toggle, table row, price chip, …) scattered/rotated, cursor-reactive drift */
.fr.part{background:#1B1A18;border:1px solid rgba(244,242,238,.18);border-radius:12px;box-shadow:0 18px 34px -20px rgba(0,0,0,.6);font-style:normal}
.p-nav{display:inline-flex;align-items:center;gap:8px;width:150px;height:30px;padding:0 12px;border-radius:999px}
.p-nav .lg{width:14px;height:14px;border-radius:50%;background:var(--acc);flex:none}
.p-nav .nl{display:block;width:22px;height:5px;border-radius:3px;background:rgba(244,242,238,.3)}
.p-h1,.p-sub,.p-foot{padding:0;border:0;background:none;box-shadow:none}
.p-h1 i{display:block;height:14px;border-radius:7px;background:rgba(244,242,238,.85)}
.p-h1.a i{width:150px}.p-h1.b i{width:104px}
.p-sub i{display:block;width:96px;height:8px;border-radius:4px;background:rgba(244,242,238,.35)}
.p-btn{display:inline-flex;align-items:center;gap:7px;background:var(--acc);color:#fff;font-size:12.5px;font-weight:500;padding:9px 16px;border-radius:999px;border:0;white-space:nowrap}
.p-btn b{color:#FFD9CB;font-weight:500}
.p-chart{display:flex;align-items:flex-end;gap:6px;width:96px;height:66px;padding:10px 12px}
.p-chart i{display:block;flex:1;border-radius:3px 3px 0 0;background:rgba(244,242,238,.3)}
.p-chart i:nth-child(1){height:35%}.p-chart i:nth-child(2){height:60%}.p-chart i:nth-child(3){height:45%}
.p-chart i:nth-child(4){height:85%;background:var(--acc)}
.p-img{display:block;width:92px;height:66px;padding:0;overflow:hidden;position:relative}
.p-img i{position:absolute;inset:0;background:linear-gradient(135deg,#3A3630,#242320)}
.p-img i::after{content:"";position:absolute;left:12%;bottom:0;width:76%;height:64%;background:rgba(240,78,35,.55);clip-path:polygon(0 100%,38% 18%,62% 62%,80% 34%,100% 100%)}
.p-img::before{content:"";position:absolute;top:12%;right:14%;width:10px;height:10px;border-radius:50%;background:rgba(244,242,238,.6);z-index:1}
.p-field{display:flex;flex-direction:column;gap:5px;width:128px;padding:9px 11px}
.p-field i{display:block;height:5px;width:44%;border-radius:3px;background:rgba(244,242,238,.3)}
.p-field b{display:block;height:16px;border-radius:6px;border:1px solid rgba(244,242,238,.28);background:#141312}
.p-tog{display:block;width:46px;height:26px;border-radius:999px;background:var(--acc);position:relative;padding:0;border:0}
.p-tog i{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:#F4F2EE}
.p-trow{display:flex;align-items:center;gap:8px;width:140px;height:32px;padding:0 11px}
.p-trow i{display:block;height:6px;border-radius:3px;background:rgba(244,242,238,.28)}
.p-trow i:nth-child(1){width:26%}.p-trow i:nth-child(2){width:38%}.p-trow i:nth-child(3){width:16%;background:rgba(240,78,35,.7)}
.p-price{font-size:12px;font-weight:500;color:var(--acc);border:1px solid rgba(240,78,35,.5);background:rgba(240,78,35,.12);padding:7px 12px;border-radius:999px;white-space:nowrap}
.p-price b{color:inherit;font-weight:500;opacity:.7}
.p-metric{font-size:13px;font-weight:500;color:rgba(244,242,238,.8);padding:8px 13px;white-space:nowrap}
.p-metric b{color:var(--acc);font-weight:500;margin-right:5px}
.p-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px}
.p-tabs i{display:block;width:34px;height:16px;border-radius:999px;background:rgba(244,242,238,.14)}
.p-tabs i:first-child{background:var(--acc)}
.p-foot i{display:block;width:110px;height:5px;border-radius:3px;background:rgba(244,242,238,.22)}
.fr.dust{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:none}
.fr.dust i{width:6px;height:6px;border-radius:50%;background:rgba(244,242,238,.3)}
/* SCENE 2 v13 D — the same parts glide + SNAP into a coherent interface;
   as the layout locks, one orange pulse travels through it (power-on) */
.cx-uiwrap{inset:0;display:flex;align-items:center;justify-content:flex-end;padding-right:var(--gut)}
.cxs-ui{position:relative;width:min(620px,52vw);background:#1B1A18;border:1px solid rgba(244,242,238,.14);border-radius:20px;padding:clamp(16px,1.9vw,24px);display:flex;flex-direction:column;gap:12px;box-shadow:0 44px 90px -46px rgba(0,0,0,.7);overflow:hidden}
.cxs-ui .pi{display:block}
.cxs-ui .p-nav{display:flex;width:100%;height:34px;background:#141312}
/* keep the inner-flex parts' own display modes (the .pi block rule above must
   not flatten them — e.g. chart bars are a flex row of columns) */
.cxs-ui .p-chart{display:flex}
.cxs-ui .p-tabs{display:inline-flex}
.cxs-ui .p-field{display:flex}
.cxs-ui .p-trow{display:flex}
.cxs-ui .p-btn{display:inline-flex}
.cxs-ui .p-price{display:inline-flex;align-items:center}
.cxs-ui .p-metric{display:inline-flex;align-items:baseline}
.cxs-ui .p-chart{justify-content:center;gap:8px}
.cxs-ui .p-chart i{flex:0 0 13%}
.cxs-ui .p-h1.a i{width:72%;height:16px}
.cxs-ui .p-h1.b i{width:48%;height:16px}
.cxs-ui .p-sub i{width:56%}
.cxs-ui .urow{display:flex;gap:12px;align-items:center}
.cxs-ui .urow-cards{align-items:stretch}
.cxs-ui .p-chart{flex:1.4;width:auto;height:88px}
.cxs-ui .p-img{flex:1;width:auto;height:88px}
.cxs-ui .p-field{flex:1;width:auto}
.cxs-ui .p-trow{width:100%}
.cxs-ui .p-foot i{width:38%}
.cxs-ui .p-btn{font-size:13px}
.cxs-power{position:absolute;top:0;bottom:0;left:0;width:100%;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(240,78,35,.16) 43%,rgba(240,78,35,.5) 50%,rgba(240,78,35,.16) 57%,transparent 70%);transform:translateX(-110%)}
/* SCENE 3 — structure (grey until voice arrives) */
.cx-struct{inset:0;display:flex;align-items:center;justify-content:flex-end;padding-right:var(--gut);filter:grayscale(1) brightness(.75);transition:filter .9s var(--ease)}
#complexity[data-cx="s4"] .cx-struct,#complexity[data-cx="s5"] .cx-struct,#complexity[data-cx="s6"] .cx-struct{filter:none}
.cx-struct>div{position:absolute;right:var(--gut)}
.cxs-ia{top:16%;display:flex;flex-direction:column;align-items:center;width:min(300px,30vw)}
.ia{display:inline-block;padding:10px 18px;border:1px solid rgba(244,242,238,.25);border-radius:12px;background:#1B1A18;font-size:14px;font-weight:500;color:rgba(244,242,238,.85)}
.ia.b{border-color:var(--acc);color:var(--acc)}
.cxs-ia svg{width:100%;height:64px}
.cxs-ia svg path{stroke:rgba(244,242,238,.35);stroke-width:1.4}
.ia-row{display:flex;gap:14px}
.cxs-frames{top:40%;display:flex;gap:16px}
.wf{display:flex;flex-direction:column;gap:8px;width:min(190px,18vw);padding:14px;border:1px solid rgba(244,242,238,.2);border-radius:14px;background:#1B1A18}
.wf-top{display:block;width:44%;height:10px;border-radius:5px;background:var(--acc)}
.wf-bar{display:block;height:7px;border-radius:4px;background:rgba(244,242,238,.28)}
.wf-bar.w60{width:60%}.wf-bar.w40{width:40%}
.wf-block{display:block;height:44px;border-radius:8px;background:rgba(244,242,238,.12);border:1px dashed rgba(244,242,238,.25)}
.cxs-brand{bottom:14%;display:flex;align-items:center;gap:10px}
.bs{width:30px;height:30px;border-radius:9px}
.bs.s1{background:var(--acc)}.bs.s2{background:#F4F2EE}.bs.s3{background:rgba(244,242,238,.35)}
.ba{font-size:30px;font-weight:500;letter-spacing:-.02em;color:#F4F2EE;font-style:normal;margin-left:6px}
/* SCENE 4 — draggable before/after compare */
.cx-cmpwrap{inset:0;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;padding-right:var(--gut)}
.cx-cmp{position:relative;width:min(600px,50vw);aspect-ratio:16/10.5;border-radius:20px;overflow:hidden;border:1px solid rgba(244,242,238,.14);box-shadow:0 44px 90px -46px rgba(0,0,0,.7);cursor:ew-resize;touch-action:none}
.cmp-layer{position:absolute;inset:0}
.cmp-before{clip-path:inset(0 calc(100% - var(--split)) 0 0);z-index:2}
.cmp-ui{position:absolute;inset:0;background:#F6F4F0;color:var(--ink);padding:clamp(16px,2.2vw,26px);display:flex;flex-direction:column;gap:12px}
.cmp-ui.raw{background:#1B1A18;color:rgba(244,242,238,.75)}
.cu-top{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500}
.cu-dot{width:22px;height:22px;border-radius:50%;background:var(--acc);flex:none}
.raw .cu-dot{background:rgba(244,242,238,.3)}
.cu-pill{margin-left:auto;font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;background:var(--acc);color:#fff;padding:4px 10px;border-radius:999px}
.raw .cu-pill{background:transparent;border:1px solid rgba(244,242,238,.3);color:rgba(244,242,238,.5)}
.cu-hero{font-size:clamp(1.15rem,1.9vw,1.6rem);font-weight:500;letter-spacing:-.02em;line-height:1.05}
.cu-hero b{color:var(--acc);font-weight:500}
.raw .cu-hero{color:rgba(244,242,238,.45)}
.cu-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cu-cards i{display:flex;flex-direction:column;gap:3px;background:#fff;border:1px solid var(--hair);border-radius:12px;padding:12px;font-style:normal}
.cu-cards b{font-size:17px;font-weight:500;letter-spacing:-.01em}
.cu-cards span{font-size:10.5px;color:var(--muted)}
.raw .cu-cards i{background:#141312;border:1px dashed rgba(244,242,238,.22)}
.raw .cu-cards b{color:rgba(244,242,238,.4)}
.raw .cu-cards span{color:rgba(244,242,238,.3)}
.cu-cta{align-self:flex-start;background:var(--acc);color:#fff;font-size:13px;font-weight:500;padding:11px 20px;border-radius:999px;margin-top:auto}
.cu-cta span{color:#FFD9CB}
.raw .cu-cta{background:transparent;border:1px solid rgba(244,242,238,.3);color:rgba(244,242,238,.5)}
.cmp-handle{position:absolute;top:0;bottom:0;left:var(--split);width:46px;margin-left:-23px;z-index:3;cursor:ew-resize;touch-action:none;display:flex;align-items:center;justify-content:center}
.cmp-handle i{width:2px;height:100%;background:#fff;box-shadow:0 0 0 1px rgba(11,11,12,.15);position:relative}
.cmp-handle i::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--acc);box-shadow:0 8px 20px -6px rgba(240,78,35,.6)}
.cmp-handle i::before{content:"\2039 \203A";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;color:#fff;font-size:11px;font-weight:700;letter-spacing:.05em;white-space:nowrap}
.cmp-cap{display:flex;justify-content:space-between;width:min(600px,50vw);margin-top:14px;font-size:11px;font-weight:500;letter-spacing:.12em;color:rgba(244,242,238,.4)}
.cmp-cap span:nth-child(2){color:var(--acc)}
/* SCENE 5 — the finished, usable product (working microinteractions) */
.cx-prodwrap{inset:0;display:flex;align-items:center;justify-content:flex-end;padding-right:var(--gut)}
.cx-prod{width:min(600px,50vw);background:#1D1C1A;border:1px solid rgba(244,242,238,.13);border-radius:22px;padding:clamp(18px,2.2vw,26px);box-shadow:0 50px 110px -50px rgba(0,0,0,.75);transition:max-width .5s var(--ease)}
.cx-prod.mini{max-width:340px}
.xp-top{display:flex;align-items:center;gap:11px;font-size:15.5px;font-weight:500;letter-spacing:-.01em}
.xp-mark{width:26px;height:26px;flex:none}
.xp-badge{font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--acc);border:1px solid rgba(240,78,35,.45);border-radius:999px;padding:4px 10px}
.xp-view{margin-left:auto;font-size:12.5px;font-weight:500;color:rgba(244,242,238,.7);border:1px solid rgba(244,242,238,.22);border-radius:999px;padding:8px 15px;min-height:36px;transition:all .3s}
.xp-view:hover{border-color:var(--acc);color:var(--acc)}
.xp-view[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:#fff}
.xp-tabs{display:flex;gap:6px;margin-top:18px;border-bottom:1px solid rgba(244,242,238,.12);padding-bottom:0}
.xp-tabs button{font-size:14px;font-weight:500;color:rgba(244,242,238,.55);padding:10px 16px;border-bottom:2px solid transparent;margin-bottom:-1px;min-height:40px;transition:color .3s,border-color .3s}
.xp-tabs button:hover{color:#F4F2EE}
.xp-tabs button[aria-selected="true"]{color:var(--acc);border-bottom-color:var(--acc)}
.xp-pane{padding-top:16px}
.xp-pane[hidden]{display:none}
.xp-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.cx-prod.mini .xp-metrics{grid-template-columns:1fr}
.xp-metrics i{display:flex;flex-direction:column;gap:3px;background:#242320;border:1px solid rgba(244,242,238,.1);border-radius:13px;padding:13px 14px;font-style:normal}
.xp-metrics b{font-size:19px;font-weight:500;letter-spacing:-.01em;color:#F4F2EE}
.xp-metrics span{font-size:10.5px;color:rgba(244,242,238,.45)}
.xp-row{display:flex;align-items:center;gap:12px;padding:12px 2px;border-top:1px solid rgba(244,242,238,.08);font-size:13.5px}
.xp-row p{color:rgba(244,242,238,.7);line-height:1.4}
.xp-row b{color:#F4F2EE;font-weight:500}
.xp-ic{width:9px;height:9px;border-radius:50%;background:var(--acc);flex:none}
.xp-ic.a{background:rgba(244,242,238,.35)}
.xp-ok{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--acc);border:1px solid rgba(240,78,35,.45);background:rgba(240,78,35,.1);padding:3px 9px;border-radius:999px;font-style:normal}
.xp-foot{display:flex;align-items:center;gap:14px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(244,242,238,.12);flex-wrap:wrap}
.xp-sw{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;font-weight:500;color:rgba(244,242,238,.75);cursor:pointer;user-select:none}
.xp-sw input{position:absolute;opacity:0;width:44px;height:26px;margin:0;cursor:pointer}
.xp-sw .tr{position:relative;width:44px;height:26px;border-radius:999px;background:rgba(244,242,238,.18);transition:background .3s;flex:none}
.xp-sw .tr::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#F4F2EE;transition:transform .3s var(--ease)}
.xp-sw input:checked+.tr{background:var(--acc)}
.xp-sw input:checked+.tr::after{transform:translateX(18px)}
.xp-sw input:focus-visible+.tr{outline:2px solid var(--acc);outline-offset:3px}
.xp-syncst{color:var(--acc)}
.xp-deploy{margin-left:auto;display:inline-flex;align-items:center;gap:8px;background:var(--acc);color:#fff;font-size:14px;font-weight:500;padding:12px 22px;border-radius:999px;min-height:44px;transition:background .3s,transform .2s var(--ease)}
.xp-deploy:hover{background:var(--acc2)}
.xp-deploy:active{transform:scale(.96)}
.xp-deploy.done{background:#F4F2EE;color:#141312;pointer-events:none}
.xp-deploy .ar{font-style:normal;transition:transform .3s var(--ease)}
.xp-deploy:hover .ar{transform:translateX(3px)}
/* FINALE */
.cx-fin{justify-content:center;align-items:flex-end;padding-bottom:4.5vh;text-align:center}
.cx-fincopy{max-width:900px;margin:0 auto}
.cx-fin .cx-p{margin-left:auto;margin-right:auto}
.cx-words{display:flex;justify-content:center;flex-wrap:wrap;gap:6px clamp(16px,2.4vw,30px);margin-top:clamp(24px,3vw,36px)}
.cw{font-size:clamp(1.2rem,2.2vw,1.8rem);font-weight:500;letter-spacing:-.02em;color:rgba(244,242,238,.6);padding:6px 2px;border-bottom:2px solid transparent;transition:color .3s,border-color .3s}
.cw:hover,.cw.on{color:var(--acc);border-bottom-color:var(--acc)}
.cx-wprev{display:flex;align-items:center;justify-content:center;min-height:64px;margin-top:16px}
.cwp{display:none;align-items:center;gap:8px}
.cx-wprev[data-w="brand"] .cwp-brand,.cx-wprev[data-w="product"] .cwp-product,.cx-wprev[data-w="web"] .cwp-web,.cx-wprev[data-w="motion"] .cwp-motion,.cx-wprev[data-w="ai"] .cwp-ai{display:inline-flex}
.cwp-brand i{width:22px;height:22px;border-radius:7px;animation:opvHue 3s ease-in-out infinite}
.cwp-brand i:nth-child(1){background:var(--acc)}
.cwp-brand i:nth-child(2){background:#F4F2EE;animation-delay:.35s}
.cwp-brand i:nth-child(3){background:rgba(244,242,238,.45);animation-delay:.7s}
.cwp-tog{position:relative;width:46px;height:26px;border-radius:999px;background:rgba(244,242,238,.2);animation:cwpTog 2.4s var(--ease) infinite}
.cwp-tog::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#F4F2EE;animation:cwpKnob 2.4s var(--ease) infinite}
@keyframes cwpTog{0%,40%{background:rgba(244,242,238,.2)}60%,100%{background:var(--acc)}}
@keyframes cwpKnob{0%,40%{transform:none}60%,100%{transform:translateX(20px)}}
.cwp-link{font-size:15px;font-weight:500;color:#F4F2EE;border-bottom:1.5px solid var(--acc);padding-bottom:3px;font-style:normal;transition:color .3s}
.cwp-link b{color:var(--acc);display:inline-block;animation:cwpArr 1.6s var(--ease) infinite}
@keyframes cwpArr{0%,100%{transform:none}50%{transform:translateX(5px)}}
.cwp-motion svg{width:130px;height:auto;overflow:visible}
.cwp-motion path{fill:none;stroke:var(--acc);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:100;animation:opvDash 2.2s linear infinite}
.cwp-d{width:9px;height:9px;border-radius:50%;background:var(--acc);animation:cwpDot 1.4s ease-in-out infinite}
.cwp-d:nth-child(2){animation-delay:.18s}
.cwp-d:nth-child(3){animation-delay:.36s}
@keyframes cwpDot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-8px);opacity:1}}
.cx-ctas{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:clamp(24px,3vw,34px)}
/* v11 review fixes:
   1. statement clearance — below 1600px the S2/S3 core used to sit at the
      viewport centre, crossing the statement text ("inside" at 1440). The core
      now parks right of the copy column (copy narrowed to min(560px,46vw)) and
      glides there on a CSS transition as data-cx changes. 1920px is untouched.
   2. finale contrast scrim — the converged core runs at FULL STRENGTH behind
      the finale copy; a soft charcoal scrim keeps the orange headline AA. */
@media(min-width:861px) and (max-width:1600px){
  .cx-core{transition:left .8s var(--ease)}
  .cx-scene[data-s="2"] .cx-copy,.cx-scene[data-s="3"] .cx-copy{max-width:min(560px,46vw)}
  #complexity:not(.static)[data-cx="s2"] .cx-core{left:calc(var(--gut) + min(560px,46vw) + 40px + min(12.3vmin,123px))}
  #complexity:not(.static)[data-cx="s3"] .cx-core{left:calc(var(--gut) + min(560px,46vw) + 40px + min(8.5vmin,85px))}
}
.cx-fin .cx-copy{isolation:isolate}
/* NOTE: px radii, not % — Chromium mis-renders % stops on %-sized ellipses */
.cx-fin .cx-copy::before{content:"";position:absolute;inset:-46px -70px;z-index:-1;pointer-events:none;background:radial-gradient(620px 470px at 50% 46%,rgba(20,19,18,.97) 0%,rgba(20,19,18,.93) 45%,rgba(20,19,18,.5) 65%,rgba(20,19,18,0) 82%)}
/* short viewports: keep the (bottom-anchored) finale copy clear of the fixed
   nav pill — slightly tighter headline scale + rhythm below ~880px height */
@media(min-width:861px) and (max-height:880px){
  .cx-fin .cx-h{font-size:clamp(3rem,6.4vw,5.4rem)}
  .cx-fin .cx-copy>*+*{margin-top:clamp(16px,2.4vw,26px)}
  .cx-wprev{min-height:52px}
}
/* ---------- v17 — CREATIVE LEADERSHIP: editorial H1, secondary founder
   profile panel (sophisticated monochrome portrait — no initials circle, no
   photo), two horizontal scroll-snap experience rails, exactly two CTAs.
   Inter only, restrained motion. ---------- */
.lead-sec{position:relative;background:var(--white);padding-top:clamp(96px,12vw,160px);padding-bottom:clamp(96px,12vw,160px)}
.anchor-sentinel{position:absolute;top:-72px;left:0;width:1px;height:1px}
.ld-h{font-family:var(--body);font-weight:600;font-size:clamp(40px,5.6vw,80px);letter-spacing:-.035em;line-height:1.02;margin:clamp(22px,2.6vw,30px) 0 0}
.ld-h2{color:var(--acc);letter-spacing:-.035em}
.ld-intro{margin-top:clamp(24px,3vw,34px);font-size:20px;line-height:1.55;color:var(--ink2);max-width:720px}
/* founder profile panel — hairline, white, 2/3 copy + 1/3 visual */
.ld-panel{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(40px,5vw,72px);align-items:stretch;margin-top:clamp(56px,7vw,88px);padding-top:clamp(36px,4vw,52px);border-top:1px solid var(--hair2);max-width:1180px}
.ld-name{font-family:var(--body);font-weight:600;font-size:30px;letter-spacing:-.02em;line-height:1.1;margin:0}
.ld-nlink{position:relative;display:inline-block;color:var(--ink);transition:color .45s var(--ease)}
.ld-nul{position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--acc);transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--ease)}
.ld-nlink:hover,.ld-nlink:focus-visible{color:var(--acc)}
.ld-nlink:hover .ld-nul,.ld-nlink:focus-visible .ld-nul{transform:scaleX(1)}
.ld-roles{margin-top:14px;font-size:15.5px;line-height:1.55;color:var(--muted)}
.ld-p{margin-top:clamp(20px,2.4vw,26px);font-size:17px;line-height:1.6;color:var(--ink2);max-width:600px}
/* v19a — the monochrome portrait panel is superseded by the #livingLegacy
   slot (obsidian; v19b fills it). The two experience rails and their chapter
   markers are superseded by the Legacy collection on work.html. */
#livingLegacy{position:relative;overflow:hidden;min-height:560px;border-radius:6px;background:#0F0F11}
.ld-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(56px,7vw,84px)}
@media (max-width:900px){
  .ld-panel{grid-template-columns:1fr}
  #livingLegacy{min-height:480px;order:-1}
}
@media (max-width:720px){
  .ld-h{font-size:clamp(34px,9.4vw,46px)}
}
/* scene-1 fragments: desktop positions respect the headline exclusion zone
   (parts never cover the statement words); on the static mobile stack the
   field sits in its own block below the copy, so the spread needs no remap */
/* D2 static (mobile / reduced-motion / no-GSAP): vertical story */
#complexity.static{overflow:visible}
#complexity.static .cx-pin{min-height:0;display:block;padding:clamp(64px,9vw,96px) 0}
#complexity.static .cx-kicker{position:static;margin:0 var(--gut) 34px}
#complexity.static .cx-prog i{transform:scaleX(1)}
#complexity.static .cx-core{position:relative;left:auto;top:auto;margin:0 auto 20px;width:min(52vw,240px);opacity:1}
#complexity.static .cx-scenes{position:static}
#complexity.static .cx-scene{position:static;opacity:1;pointer-events:auto;flex-direction:column;align-items:flex-start;padding:clamp(40px,7vw,60px) var(--gut) 0}
#complexity.static .cx-vis{position:relative;inset:auto;order:2;width:100%;height:300px;margin-top:26px;pointer-events:auto}
/* v13 D: scene 2's assembled interface needs its natural height when stacked */
#complexity.static .cx-scene[data-s="2"] .cx-vis{height:auto}
#complexity.static .cx-uiwrap{position:relative;inset:auto;padding:0;justify-content:flex-start}
#complexity.static .cxs-ui{width:100%;max-width:600px}
#complexity.static .fr{transform:rotate(var(--r,0deg))}
#complexity.static .cx-struct{position:relative;height:auto;padding:0;flex-direction:column;align-items:flex-start;gap:22px}
#complexity.static .cx-struct>div{position:static}
#complexity.static .cx-cmpwrap,#complexity.static .cx-prodwrap{position:relative;height:auto;padding:0;align-items:flex-start;justify-content:flex-start}
#complexity.static .cx-cmp,#complexity.static .cmp-cap{width:100%;max-width:600px}
#complexity.static .cx-cmp,#complexity.static .cx-prod{pointer-events:auto}
#complexity.static .cx-prod{width:100%;max-width:600px}
#complexity.static .cx-fin{align-items:flex-start;text-align:left}
#complexity.static .cx-fincopy{margin:0}
#complexity.static .cx-fin .cx-p{margin-left:0;margin-right:0}
#complexity.static .cx-words{justify-content:flex-start}
#complexity.static .cx-ctas{justify-content:flex-start}
@media(max-width:860px){
  .cx-h{font-size:clamp(2.4rem,10vw,3.4rem)}
  .org-kicker,.cx-kicker{top:auto}
  .cx-struct{justify-content:center}
  .cxs-ia,.cxs-frames,.cxs-brand{position:static}
}
/* reduced motion: kill the ambient loops inside both stories (static frames stay) */
@media(prefers-reduced-motion:reduce){
  .opv-sw,.opv-bar::after,.opv-page b,.opv-wave,.opv-ai .opv-pulse,.cwp-brand i,.cwp-tog,.cwp-tog::after,.cwp-link b,.cwp-motion path,.cwp-d,.cx-links .lkp,.org-stage[data-w="motion"] .om-ringwrap{animation:none!important}
  .cx-links .lkp{stroke-dashoffset:14}
}

/* ============================================================
   v12 — WORK PAGE COMPLETE REBUILD (client directive)
   Instrument Sans Variable for page content + case overlay only
   (nav / finale / footer keep the shared chrome). No serif, no
   italic, no mono on this page's content. eSora orange is reserved
   for navigation, focus, and actions — each project owns its world.
   ============================================================ */
body[data-page="work"] main,body[data-page="work"] #caseOv{font-family:'Instrument Sans',Inter,system-ui,sans-serif}
body[data-page="work"] main h1,body[data-page="work"] main h2,body[data-page="work"] main h3,
body[data-page="work"] #caseOv h2,body[data-page="work"] #caseOv h3,
body[data-page="work"] #caseOv .co-title,body[data-page="work"] #caseOv .co-brand,
body[data-page="work"] #caseOv .co-meta .v,body[data-page="work"] #caseOv .co-fact .v,
body[data-page="work"] #caseOv .co-step .sn,body[data-page="work"] #caseOv .co-next .t,
body[data-page="work"] #caseOv .co-kicker{font-family:'Instrument Sans',Inter,system-ui,sans-serif;font-style:normal}
/* one typographic voice on this page: finale statement drops the serif/italic accent, buttons join Instrument Sans */
body[data-page="work"] .btn{font-family:'Instrument Sans',Inter,system-ui,sans-serif}
body[data-page="work"] #finale h2{font-family:'Instrument Sans',Inter,system-ui,sans-serif;font-style:normal;letter-spacing:-.033em}
body[data-page="work"] #finale h2 .acc-it{font-style:normal}
/* no italics anywhere on this page (incl. decorative <i> shapes) */
body[data-page="work"] i{font-style:normal}
/* ---------- labels (13px, medium, sans — never mono) ---------- */
.wk-lab{font-weight:500;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px}
.wk-lab::before{content:"";width:22px;height:1px;background:var(--hair2)}
.wk-sec-intro{font-size:clamp(18px,1.5vw,20px);line-height:1.5;color:var(--ink2);max-width:600px;margin-top:22px}
.wk-h2{font-weight:500;letter-spacing:-.03em}
/* ---------- HERO ---------- */
/* ================= v21 — THE STATEMENT WALL (work hero) ================= */
.wk-hero{position:relative;min-height:100svh;padding-top:clamp(120px,12.5vw,164px);overflow:hidden;display:flex;flex-direction:column}
.wk-h1{font-weight:450;font-size:clamp(3.2rem,7.4vw,6.5rem);line-height:.95;letter-spacing:-.033em;max-width:15ch;margin-top:clamp(24px,3vw,36px)}
.wk-sub{font-size:clamp(18px,1.6vw,20px);line-height:1.5;color:var(--ink2);max-width:560px;margin-top:clamp(24px,3vw,32px)}
/* kinetic word reveal — masked lines (JS animates .ww up; no-JS = visible) */
.wk-h1 .wl{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.09em;margin-bottom:-.09em}
.wk-h1 .ww{display:inline-block;will-change:transform}
/* the living word — real work fills the letterforms, crossfading
   (classes are .wfw-*: the bare .wf name already belongs to the studio
   page's dark feature cards — do not reuse it) */
.wfw{position:relative;display:inline-block}
.wfw-lyr{display:inline-block;background-size:cover;background-position:center 22%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:wfPan 18s ease-in-out infinite alternate}
.wfw-b{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;transition:opacity 1s ease}
.wfw-b.on{opacity:1}
@keyframes wfPan{from{background-position:center 12%}to{background-position:center 64%}}
@supports not ((-webkit-background-clip:text)){.wfw-lyr{color:var(--ink);animation:none}}
/* the perspective gallery wall — a gently tilted plane, cinematic not extreme */
.wk-wall{position:relative;flex:1;min-height:46svh;margin-top:clamp(16px,2.6vw,36px);perspective:1800px;perspective-origin:50% 30%;cursor:grab;touch-action:pan-y}
.wk-wall:active{cursor:grabbing}
.wk-wall-plane{position:absolute;left:50%;top:-14svh;width:min(1760px,138vw);transform:translateX(-50%) rotateX(22deg);transform-origin:50% 50%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.7vw,26px);will-change:transform}
.wk-wallcol{position:relative;height:150svh;overflow:hidden}
.wk-wallcol-track{display:flex;flex-direction:column;gap:clamp(14px,1.7vw,26px);will-change:transform}
.wk-cell{position:relative;display:block;width:100%;padding:0;border:1px solid var(--hair);background:var(--gray);border-radius:16px;overflow:hidden;aspect-ratio:16/11;cursor:pointer;box-shadow:0 34px 64px -36px rgba(11,11,12,.4);transition:border-color .3s,box-shadow .3s;text-align:left}
.wk-cell:hover,.wk-cell:focus-visible{border-color:var(--fa,var(--acc));box-shadow:0 40px 72px -34px rgba(11,11,12,.5)}
.wk-cell:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wk-cell img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
/* soft depth cue — the far end of the wall dissolves into the page */
.wk-wall-fade{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,0) 72%,rgba(255,255,255,.96) 100%)}
.wk-wall-note{position:absolute;left:0;right:0;bottom:16px;z-index:3;text-align:center;font-size:13px;color:var(--muted);pointer-events:none}
@media (max-width:820px){
  .wk-wall{min-height:52svh}
  .wk-wall-plane{width:230vw;top:-6svh}
  .wk-wall-note{display:none}
}
@media (prefers-reduced-motion:reduce){
  .wfw-lyr{animation:none}
  .wfw-b{display:none}
  .wk-wall{cursor:auto}
  .wk-wall-plane{position:static;transform:none;width:100%;max-width:1100px;margin:0 auto}
  .wk-wall{display:block;perspective:none;padding:0 var(--gut)}
  .wk-wallcol{height:auto;min-height:0;overflow:visible}
  .wk-wallcol-track{transform:none!important}
  .wk-wallcol-track .wk-cell[data-dup]{display:none}
  .wk-wall-fade{display:none}
  .wk-wall-note{position:static;margin-top:20px}
}
.frg{flex:none;width:188px;text-align:left}
.fg-art{display:block;height:118px;border-radius:14px;border:1px solid var(--hair);background:linear-gradient(165deg,rgba(255,255,255,.9),var(--gray));overflow:hidden;position:relative;transition:border-color .3s,transform .4s var(--ease)}
.frg:hover .fg-art,.frg:focus-visible .fg-art{border-color:var(--fa);transform:translateY(-3px)}
/* v16 — every frame is a REAL image (object-fit cover) + project-name chip */
.fg-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.fg-nm{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);background:rgba(255,255,255,.94);border:1px solid var(--hair);border-radius:999px;padding:4px 10px;font-size:11px;font-weight:500;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 6px 16px -10px rgba(11,11,12,.4)}
.frg:hover .fg-nm,.frg:focus-visible .fg-nm{color:var(--ink);border-color:var(--fa)}
.wk-reel-note{margin-top:18px;font-size:13px;color:var(--muted);padding:0 var(--gut);text-align:center}
/* ---------- SELECTED CASE STUDIES — one world per viewport ---------- */
.wk-world{min-height:100svh;display:flex;align-items:center;padding:clamp(76px,9vw,120px) 0;scroll-margin-top:0}
.wk-world-grid{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);gap:clamp(40px,5vw,84px);align-items:center;width:100%}
.wk-world-grid--flip .wk-world-copy{order:2}
.wk-world-grid--flip .wk-demo{order:1}
.wk-world-kick{font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.wk-world-name{font-weight:500;font-size:clamp(52px,4.8vw,64px);letter-spacing:-.03em;line-height:1;margin-top:18px}
.wk-world-trans{font-weight:450;font-size:clamp(24px,2.2vw,30px);line-height:1.3;letter-spacing:-.015em;margin-top:clamp(20px,2.4vw,28px);max-width:24ch}
.wk-facts{margin-top:clamp(28px,3.4vw,40px)}
.wk-fact{display:grid;grid-template-columns:minmax(110px,150px) 1fr;gap:8px 18px;padding:15px 0}
.wk-fact dt{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.wk-fact dd{font-size:16.5px;line-height:1.5;margin:0}
.wk-explore{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(28px,3.4vw,38px);background:var(--acc);color:#fff;font-weight:500;font-size:16px;letter-spacing:-.01em;padding:16px 30px;border-radius:999px;min-height:52px;transition:background .3s,transform .3s var(--ease)}
.wk-explore:hover{background:var(--acc2)}
.wk-explore .ar{transition:transform .35s var(--ease)}
.wk-explore:hover .ar{transform:translateX(5px)}
/* CTO.ai — dark developer-platform world (deep navy + electric cyan) */
.wk-world--dark{background:#0A1022;color:#E7EDF7}
.wk-world--dark .wk-world-kick{color:rgba(231,237,247,.5)}
.wk-world--dark .wk-world-trans{color:#F2F6FF}
.wk-world--dark .wk-fact{border-top:1px solid rgba(231,237,247,.12)}
.wk-world--dark .wk-fact dt{color:rgba(231,237,247,.48)}
.wk-world--dark .wk-fact dd{color:rgba(231,237,247,.82)}
/* PediaDesk — light clinical world (soft clinical white + calm teal) */
.wk-world--light{background:#F2F7F6;color:var(--ink)}
.wk-world--light .wk-world-kick{color:#5E7673}
.wk-world--light .wk-world-trans{color:#12302C}
.wk-world--light .wk-fact{border-top:1px solid rgba(18,48,44,.12)}
.wk-world--light .wk-fact dt{color:#5E7673}
.wk-world--light .wk-fact dd{color:#28423E}
/* eSora Labs — warm paper world (ivory + ink + terracotta — the parent-brand palette, not signal orange) */
.wk-world--paper{background:#F6F0E3;color:#2A1D10}
.wk-world--paper .wk-world-kick{color:#A08C72}
.wk-world--paper .wk-world-trans{color:#3B2A16}
.wk-world--paper .wk-fact{border-top:1px solid rgba(42,29,16,.14)}
.wk-world--paper .wk-fact dt{color:#A08C72}
.wk-world--paper .wk-fact dd{color:#4A3826}
.wk-world--paper .wk-explore{background:#BF6A30}
.wk-world--paper .wk-explore:hover{background:#A5571F}
/* ---------- CTO.ai layer-separation demo ---------- */
/* dragging either demo must never highlight text */
.ld-stage,.ld-stage *,.ba-stage,.ba-stage *{-webkit-user-select:none;user-select:none}
.ld-stage{position:relative;height:clamp(340px,38vw,440px);cursor:grab;touch-action:pan-y;perspective:1100px}
.ld-stage:active{cursor:grabbing}
.ld-layer{position:absolute;inset:0;margin:auto;width:min(400px,86%);height:230px;border-radius:18px;will-change:transform}
.ld-sys{z-index:1;background:#0D1730;border:1px solid rgba(110,231,255,.22);padding:20px}
.ld-comp{z-index:2;pointer-events:none;background:#101C3A;border:1px solid rgba(231,237,247,.14);overflow:hidden}
.ld-ui{z-index:3;background:#101C3A;border:1px solid rgba(231,237,247,.14);box-shadow:0 40px 80px -30px rgba(3,7,18,.8);overflow:hidden}
.ld-tag{position:absolute;top:-28px;left:2px;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#6EE7FF;opacity:var(--sep,0);transition:opacity .2s}
.ld-sys .ld-tag{color:#8FB8FF}
.ld-comp .ld-tag{left:auto;right:2px;color:#6EE7FF}
.ld-ui .ld-tag{top:11px;left:auto;right:14px}
/* design-system layer: tokens */
.ld-tokens{display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start;height:100%;padding-top:8px}
.ld-sw{width:34px;height:34px;border-radius:9px;background:var(--c);border:1px solid rgba(231,237,247,.16)}
.ld-type{display:block;width:100%;height:9px;border-radius:5px;background:rgba(231,237,247,.22);width:var(--w)}
.ld-space{width:100%;height:12px;border-radius:6px;background:repeating-linear-gradient(90deg,rgba(110,231,255,.35) 0 2px,transparent 2px 14px)}
.ld-space.s2{background:repeating-linear-gradient(90deg,rgba(110,231,255,.22) 0 2px,transparent 2px 22px)}
.ld-space.s3{background:repeating-linear-gradient(90deg,rgba(110,231,255,.14) 0 2px,transparent 2px 34px)}
/* components layer: floating parts, visible as the stack separates */
.ld-cmp{position:absolute;opacity:var(--sep,0);transition:opacity .2s;background:#15234A;border:1px solid rgba(110,231,255,.3);color:#DCE8FF;font-size:12px;font-weight:500;border-radius:999px;padding:9px 15px}
.ld-cmp b{color:#6EE7FF;font-weight:500}
.ld-cmp-btn{left:-26px;top:18px;background:#16305C;border-color:rgba(110,231,255,.5)}
.ld-cmp-pill{right:-30px;top:64px}
.ld-cmp-card{left:-38px;bottom:26px;border-radius:13px;padding:12px;display:flex;flex-direction:column;gap:7px;width:150px}
.ld-cmp-card i{display:block;height:7px;border-radius:4px;background:rgba(231,237,247,.3);width:var(--w,86%)}
.ld-cmp-tog{right:-22px;bottom:44px;width:58px;height:30px;padding:3px;border-radius:999px}
.ld-cmp-tog i{display:block;width:22px;height:22px;border-radius:50%;background:#6EE7FF;margin-left:auto}
/* interface layer: the product screen */
.ld-scr{display:flex;flex-direction:column;height:100%}
.ld-scr-top{display:flex;align-items:center;gap:6px;padding:12px 14px;border-bottom:1px solid rgba(231,237,247,.1);font-size:11.5px;color:rgba(231,237,247,.55)}
.ld-scr-top i{width:8px;height:8px;border-radius:50%;background:rgba(231,237,247,.2)}
.ld-scr-top span{margin-left:8px}
.ld-scr-body{display:flex;flex:1;min-height:0}
.ld-scr-side{width:64px;border-right:1px solid rgba(231,237,247,.1);padding:14px 12px;display:flex;flex-direction:column;gap:10px}
.ld-scr-side i{display:block;height:8px;border-radius:4px;background:rgba(231,237,247,.16)}
.ld-scr-side i:first-child{background:#6EE7FF}
.ld-scr-main{flex:1;padding:14px;display:flex;flex-direction:column;gap:9px}
.ld-row{display:flex;align-items:center;gap:10px;background:rgba(231,237,247,.06);border:1px solid rgba(231,237,247,.09);border-radius:9px;padding:9px 12px}
.ld-row b{display:block;flex:1;height:7px;border-radius:4px;background:rgba(231,237,247,.2)}
.ld-row em{font-style:normal;font-size:10.5px;font-weight:500;letter-spacing:.06em;color:rgba(231,237,247,.5);text-transform:uppercase}
.ld-row.ok{border-color:rgba(110,231,255,.4);background:rgba(110,231,255,.08)}
.ld-row.ok em{color:#6EE7FF}
.ld-ctl{margin-top:14px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ld-hint{font-size:13px;color:rgba(231,237,247,.5);margin:0}
.ld-toggle{display:none;font-size:13.5px;font-weight:500;color:#6EE7FF;border:1px solid rgba(110,231,255,.4);border-radius:999px;padding:10px 18px;min-height:44px}
.ld-toggle[aria-pressed="true"]{background:rgba(110,231,255,.12)}
/* ---------- PediaDesk before/after demo ---------- */
.ba-stage{position:relative;aspect-ratio:16/11.5;border-radius:20px;overflow:hidden;border:1px solid rgba(18,48,44,.14);background:#fff;cursor:ew-resize;touch-action:none;box-shadow:0 40px 80px -44px rgba(18,48,44,.3)}
.ba-pane{position:absolute;inset:0}
.ba-before{z-index:2;clip-path:inset(0 calc(100% - var(--split)) 0 0);background:#EBEDEF}
.ba-after{background:#FDFEFE}
.ba-real{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.ba-chaos{position:absolute;inset:0}
.ba-frag{position:absolute;left:var(--x);top:var(--y);transform:rotate(var(--r));background:#fff;border:1px solid #D8DBE0;border-radius:8px;padding:8px 12px;font-size:12px;color:#83868C;box-shadow:0 6px 14px -8px rgba(11,11,12,.25);white-space:nowrap}
.ba-ui{position:absolute;inset:0;padding:clamp(14px,2vw,22px);display:flex;flex-direction:column;gap:14px}
.ba-ui-top{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;color:#12302C}
.ba-dot{width:20px;height:20px;border-radius:50%;background:#0E9F8A;flex:none}
.ba-ui-pill{margin-left:auto;font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#0E9F8A;border:1px solid rgba(14,159,138,.4);padding:4px 10px;border-radius:999px}
.ba-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;flex:1}
.ba-col{background:#F2F7F6;border:1px solid rgba(18,48,44,.09);border-radius:11px;padding:10px;display:flex;flex-direction:column;gap:8px}
.ba-col-h{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#5E7673}
.ba-col i{display:block;height:26px;border-radius:7px;background:#fff;border:1px solid rgba(14,159,138,.25)}
.ba-col i:first-of-type{background:rgba(14,159,138,.1)}
.ba-note{font-size:12px;color:#5E7673;margin:0}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--split);width:46px;margin-left:-23px;z-index:3;cursor:ew-resize;touch-action:none;display:flex;align-items:center;justify-content:center}
.ba-handle i{width:2px;height:100%;background:#fff;box-shadow:0 0 0 1px rgba(18,48,44,.18);position:relative}
.ba-handle i::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:#0E9F8A;box-shadow:0 8px 20px -6px rgba(14,159,138,.55)}
.ba-handle i::before{content:"\2039 \203A";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;color:#fff;font-size:11px;font-weight:700;letter-spacing:.05em;white-space:nowrap}
.ba-caps{display:flex;justify-content:space-between;margin-top:13px;font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#7A8B88}
.ba-caps span:last-child{color:#0E9F8A}
.ba-hint{margin-top:8px;font-size:13px;color:#7A8B88}
/* ---------- eSora Labs living wordmark specimen (grid → wordmark → symbol) ---------- */
.ts-stage,.ts-stage *{-webkit-user-select:none;user-select:none}
.ts-stage{position:relative;aspect-ratio:2/1;max-height:430px;border-radius:20px;overflow:hidden;border:1px solid rgba(42,29,16,.16);background:radial-gradient(120% 90% at 22% 0%,#FBF6EA 0%,#F3ECDA 100%);cursor:ew-resize;touch-action:pan-y;box-shadow:0 40px 80px -44px rgba(42,29,16,.35)}
.ts-grid{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.ts-g-lines path{fill:none;stroke:rgba(191,106,48,.55);stroke-width:1.4}
.ts-g-lines circle{fill:none;stroke:rgba(42,29,16,.35);stroke-width:1.2}
.ts-word{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-weight:600;font-size:clamp(34px,4.6vw,58px);letter-spacing:-.03em;color:#2A1D10;white-space:nowrap;opacity:0}
.ts-word b{font-weight:600;color:#BF6A30}
.ts-mark{position:absolute;left:50%;top:50%;width:clamp(96px,10vw,140px);height:auto;opacity:0}
.ts-mark .ts-ring{stroke:#BF6A30;stroke-width:7;fill:none}
.ts-mark .ts-e{stroke:#2A1D10;stroke-width:6;stroke-linecap:round;fill:none}
.ts-phase{position:absolute;left:16px;bottom:13px;font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#A08C72}
.ts-ctl{margin-top:16px}
.ts-range{width:100%;appearance:none;-webkit-appearance:none;height:34px;background:transparent;cursor:ew-resize;touch-action:pan-x}
.ts-range::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(90deg,#BF6A30,#D89A63)}
.ts-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#2A1D10;margin-top:-9.5px;box-shadow:0 4px 12px -4px rgba(42,29,16,.5)}
.ts-range::-moz-range-track{height:3px;border-radius:2px;background:linear-gradient(90deg,#BF6A30,#D89A63)}
.ts-range::-moz-range-thumb{width:22px;height:22px;border:none;border-radius:50%;background:#2A1D10}
.ts-caps{display:flex;justify-content:space-between;margin-top:4px;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#A08C72}
.ts-hint{margin-top:10px;font-size:13px;color:#A08C72}
/* ---------- CONFIDENTIAL ENGAGEMENTS ---------- */
.cf-rows{border-top:1px solid var(--hair)}
.cf-row{border-bottom:1px solid var(--hair)}
.cf-head{width:100%;display:grid;grid-template-columns:52px minmax(0,1fr) auto 40px;gap:clamp(14px,2.4vw,28px);align-items:center;padding:clamp(20px,2.4vw,26px) 6px;text-align:left;border-radius:14px;transition:background .3s}
.cf-head:hover{background:rgba(255,255,255,.65)}
.cf-i{font-size:13px;font-weight:500;color:var(--muted)}
.cf-t{display:block;font-weight:500;font-size:clamp(1.25rem,2.2vw,1.75rem);letter-spacing:-.02em;line-height:1.1}
.cf-one{display:block;font-size:14.5px;color:var(--ink2);margin-top:6px;line-height:1.45}
.cf-meta{text-align:right}
.cf-sector{display:block;font-size:12.5px;font-weight:500;color:var(--ink2)}
.cf-plus{position:relative;width:34px;height:34px;border:1px solid var(--hair2);border-radius:50%;flex:none;transition:transform .4s var(--ease),border-color .3s}
.cf-plus::before,.cf-plus::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink2);transition:background .3s}
.cf-plus::before{width:12px;height:1.5px;margin:-.75px 0 0 -6px}
.cf-plus::after{width:1.5px;height:12px;margin:-6px 0 0 -.75px}
.cf-row.open .cf-plus{transform:rotate(45deg);border-color:var(--ink)}
.cf-body{padding:2px 6px clamp(26px,3vw,38px)}
.cf-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,48px);margin-left:clamp(0px,5vw,80px)}
.cf-lab{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.cf-cols p:not(.cf-lab){font-size:16px;line-height:1.55;color:var(--ink2)}
.cf-foot{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:clamp(22px,2.6vw,30px);margin-left:clamp(0px,5vw,80px)}
.cf-nda{font-size:13px;color:var(--muted);margin:0}
.cf-open{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--acc)}
.cf-open .ar{transition:transform .35s var(--ease)}
.cf-open:hover .ar{transform:translateX(5px)}
/* ---------- STUDIO EXPERIMENTS ---------- */
.xp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,28px)}
.xp-card{position:relative;background:var(--white);border:1px solid var(--hair);border-radius:22px;padding:clamp(24px,2.8vw,34px);display:flex;flex-direction:column;gap:12px;cursor:pointer;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .35s}
.xp-card:hover{transform:translateY(-4px);box-shadow:0 28px 64px -34px rgba(11,11,12,.18);border-color:var(--hair2)}
.xp-flag{align-self:flex-start;font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--ink2);border:1px solid var(--hair2);background:var(--gray);padding:5px 12px;border-radius:999px}
.xp-card h3{font-weight:500;font-size:clamp(1.4rem,2.1vw,1.8rem);letter-spacing:-.02em}
.xp-card>p{font-size:15.5px;color:var(--ink2);line-height:1.55;margin:0}
.xp-toy{position:relative;border:1px solid var(--hair);border-radius:14px;overflow:hidden;background:#FBFBFA;cursor:default}
.xp-toy canvas{width:100%;height:auto;display:block}
.xp-hint{position:absolute;bottom:8px;left:12px;font-size:11.5px;color:var(--muted);pointer-events:none}
.xp-toy--flat{padding:22px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-height:180px}
.xp-toy--flat svg{width:min(240px,80%);height:auto}
#toyMotion .tm-ring{stroke:#FF7A59;stroke-width:5;fill:none}
#toyMotion .tm-e{stroke:#FF7A59;stroke-width:4;stroke-linecap:round;fill:none}
#toyMotion .tm-l{font-family:'Instrument Sans',Inter,sans-serif;font-size:34px;font-weight:500;letter-spacing:-.02em;fill:var(--ink);opacity:0}
#toyMotion.play .tm-l{animation:tmUp .5s var(--ease) both}
#toyMotion.play .tm-l:nth-of-type(2){animation-delay:.09s}
#toyMotion.play .tm-l:nth-of-type(3){animation-delay:.18s}
#toyMotion.play .tm-l:nth-of-type(4){animation-delay:.27s}
#toyMotion.play .tm-l:nth-of-type(5){animation-delay:.36s}
@keyframes tmUp{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.xp-replay{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--acc);min-height:40px}
.xp-replay .ar{transition:transform .35s var(--ease)}
.xp-replay:hover .ar{transform:rotate(40deg)}
.ta-prompt{font-size:14px;color:var(--ink2);margin:0;border-left:2px solid var(--hair2);padding-left:14px}
.ta-chips{display:flex;flex-wrap:wrap;gap:8px;min-height:34px}
.ta-chip{display:inline-block;background:var(--white);border:1px solid var(--hair2);border-radius:999px;padding:8px 14px;font-size:13px;color:var(--ink2);animation:chipIn .5s var(--ease) both}
/* AI-Assisted Workflow — direction cards (v14 C) */
.ta-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;min-height:150px}
.ta-dir{display:flex;flex-direction:column;gap:8px;border:1px solid var(--hair);border-radius:12px;background:var(--white);padding:12px;animation:taIn .6s var(--ease) both}
@keyframes taIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ta-idx{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.ta-nm{font-weight:600;font-size:13.5px;letter-spacing:-.01em;color:var(--ink)}
.ta-why{font-style:normal;font-size:11.5px;line-height:1.5;color:var(--ink2)}
.tv{display:flex;flex-direction:column;gap:5px;height:64px;border-radius:8px;padding:8px;border:1px solid var(--hair)}
.tv i{display:block}
.tv-ed{background:#FDFDFC}.tv-ed .tv-h1{height:9px;width:55%;border-radius:4px;background:var(--ink)}
.tv-ed .tv-l{height:5px;width:88%;border-radius:3px;background:var(--hair2)}.tv-ed .tv-l.s{width:64%}
.tv-ed .tv-a{height:7px;width:34%;border-radius:4px;background:var(--acc);margin-top:auto}
.tv-dk{background:#101828;border-color:#101828}.tv-dk .tv-bar{height:6px;width:40%;border-radius:3px;background:#5B8DEF}
.tv-dk .tv-r{height:7px;border-radius:3px;background:rgba(231,237,247,.22)}.tv-dk .tv-r.ok{background:#5B8DEF}
.tv-wm{background:#F6F0E3;border-color:#E7DCC8}.tv-wm .tv-mast{height:8px;width:48%;border-radius:4px;background:#7A3E14}
.tv-wm .tv-col{display:flex;flex-direction:column;gap:4px}.tv-wm .tv-col b{height:4px;border-radius:2px;background:rgba(42,29,16,.3)}
.tv-wm .tv-col.s b{width:72%}
/* Generative Identity Field — clear control */
.tf-clear{position:absolute;top:10px;right:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);border:1px solid var(--hair2);background:rgba(255,255,255,.92);border-radius:999px;padding:7px 14px;opacity:0;pointer-events:none;transition:opacity .3s,border-color .3s}
.tf-clear.vis{opacity:1;pointer-events:auto}
.tf-clear:hover{border-color:var(--ink);color:var(--ink)}
/* Living Type Lab — axis meters (v14 C polish) */
.tl-meter{display:flex;flex-direction:column;gap:7px;width:min(280px,100%)}
.tl-mm{display:flex;align-items:center;gap:9px}
.tl-mm i{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);width:34px;flex:none}
.tl-mm em{font-style:normal;font-family:var(--mono);font-size:9.5px;color:var(--muted);flex:none}
.tl-track{flex:1;height:2px;background:var(--hair);border-radius:2px;position:relative;display:block}
.tl-track b{position:absolute;left:0;top:0;bottom:0;width:50%;background:var(--acc);border-radius:2px;transition:width .18s linear}
.tl-ctl{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.tl-note{font-size:12px;color:var(--muted)}
/* Motion Identity — replay progress hairline (v14 C) */
.tm-prog{display:block;width:min(240px,80%);height:2px;background:var(--acc);transform:scaleX(0);transform-origin:left center;border-radius:2px;margin-top:-4px}
.xp-open{margin-top:auto;padding-top:12px;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--ink)}
.xp-open .ar{color:var(--acc);transition:transform .35s var(--ease)}
.xp-open:hover .ar{transform:translateX(5px)}
/* Living Type Lab — variable-font toy */
#toyType{cursor:crosshair;padding-bottom:40px}
.tl-head{margin:0;font-weight:550;font-size:clamp(30px,3.4vw,42px);letter-spacing:-.03em;line-height:1.08;color:var(--ink);transform-origin:left center;-webkit-user-select:none;user-select:none}
.tl-axes{margin:0;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* Generative Identity Field canvas */
#toyField canvas{cursor:pointer;touch-action:manipulation}
/* ---------- OVERLAY v2 ---------- */
body[data-page="work"] .co-kicker{color:var(--muted);font-weight:500;font-size:12px;letter-spacing:.12em}
body[data-page="work"] .co-title{font-weight:500}
body[data-page="work"] .co-ch .lab{color:var(--acc);font-size:13px}
body[data-page="work"] .co-stepout{border-left-color:var(--hair2)}
body[data-page="work"] .co-meta .v,body[data-page="work"] .co-fact .v{font-weight:500}
.co-end{margin-top:clamp(48px,6vw,72px);border-top:1px solid var(--hair);padding-top:clamp(36px,5vw,56px);text-align:center}
.co-end h3{font-weight:500;font-size:clamp(1.9rem,3.4vw,2.8rem);letter-spacing:-.025em;line-height:1.1}
.co-end .btn{margin-top:clamp(20px,2.6vw,28px)}
.co-nda{margin-top:clamp(28px,3.6vw,40px);border-left:2px solid var(--hair2);padding:4px 0 4px 16px;font-size:14px;color:var(--muted);max-width:560px}
.co-try{display:inline-flex;align-items:center;gap:9px;margin-top:18px;font-weight:600;font-size:15.5px;color:var(--acc);border:1px solid rgba(240,78,35,.4);border-radius:999px;padding:13px 24px;min-height:48px;transition:background .3s}
.co-try:hover{background:var(--acctint)}
.co-try .ar{transition:transform .35s var(--ease)}
.co-try:hover .ar{transform:translateY(4px)}
.co-foot{margin-top:clamp(36px,5vw,52px)}
.co-foot .co-next{margin-left:auto}
/* ---------- responsive ---------- */
@media(hover:none),(pointer:coarse){
  .ld-toggle{display:inline-flex}
  .ld-hint{display:none}
}
@media(max-width:900px){
  .wk-world{min-height:0;padding:clamp(56px,10vw,84px) 0}
  .wk-world-grid,.wk-world-grid--flip{grid-template-columns:1fr;gap:clamp(30px,7vw,44px)}
  .wk-world-grid--flip .wk-world-copy{order:1}
  .wk-world-grid--flip .wk-demo{order:2}
  .ld-stage{height:clamp(300px,78vw,380px)}
  .ld-layer{height:200px}
  .ld-cmp-btn{left:-6px}.ld-cmp-pill{right:-6px}.ld-cmp-card{left:-8px}.ld-cmp-tog{right:-4px}
  .cf-head{grid-template-columns:36px minmax(0,1fr) 34px;grid-template-rows:auto auto}
  .cf-meta{grid-column:2/3;text-align:left;margin-top:2px}
  .cf-sector{display:inline}
  .cf-plus{grid-row:1/3;grid-column:3/4}
  .cf-cols{grid-template-columns:1fr;margin-left:0}
  .cf-foot{margin-left:0}
  .xp-grid{grid-template-columns:1fr}
  .ba-cols{gap:6px}
  .ba-col i{height:20px}
}
@media(max-width:560px){
  .wk-h1{font-size:clamp(2.6rem,11.4vw,3.4rem)}
  .wk-world-name{font-size:clamp(2.6rem,11vw,3.2rem)}
  .wk-fact{grid-template-columns:1fr;gap:4px}
  .frg{width:158px}
  .fg-art{height:100px}
}
@media(prefers-reduced-motion:reduce){
  .ta-chip{animation:none}
  #toyMotion .tm-l{opacity:1;animation:none}
  .ld-layer,.ld-tag,.ld-cmp{transition:none}
}

/* ================= v19a — COLLECTION SWITCHER (work.html) =================
   Sticky pills: Work · Legacy · Lab. Scroll-spy + click-scroll in cases.js. */
.wk-cols{position:sticky;top:86px;z-index:820;display:flex;justify-content:center;padding:12px 0;margin-top:clamp(-34px,-2.6vw,-20px)}
.wk-cols-in{display:inline-flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--hair);border-radius:999px;padding:5px;box-shadow:0 26px 56px -22px rgba(11,11,12,.42),0 2px 8px -3px rgba(11,11,12,.14)}
.wk-col{display:inline-flex;align-items:center;min-height:38px;padding:9px 24px;border-radius:999px;font-weight:500;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);text-decoration:none;transition:color .3s,background .3s var(--ease)}
.wk-col:hover{color:var(--ink)}
.wk-col.on{background:var(--ink);color:#fff}
.wk-col:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media (max-width:560px){.wk-cols{top:78px}.wk-col{padding:8px 17px;font-size:11.5px;min-height:34px}}

/* ================= v19a — LEGACY: Selected Experience (work.html #legacy) ================= */
#cases,#legacy,#lab{scroll-margin-top:196px}
#legacy{border-top:1px solid var(--hair)}
#legacy .ev-grid{margin-top:clamp(26px,3.4vw,40px)}
/* ---- 19 brand cards: the AUTHENTIC logo, always sharp and full colour ---- */
.lg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(30px,4vw,46px)}
.lg-card{position:relative;display:flex;flex-direction:column;min-height:238px;text-align:left;background:var(--white);border:1px solid var(--hair);border-radius:20px;overflow:hidden;cursor:pointer;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .35s}
.lg-card:hover,.lg-card:focus-visible{transform:translateY(-5px);border-color:var(--bc);box-shadow:0 0 0 1px var(--bc),0 30px 58px -24px var(--bg)}
.lg-card:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.lg-stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:148px;padding:28px 26px}
.lg-logo{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;transition:transform .5s var(--ease)}
.lg-logo img{max-width:190px;max-height:64px;display:block}
@media (max-width:640px){.lg-logo img{max-width:150px}}
.lg-card:hover .lg-logo,.lg-card:focus-visible .lg-logo{transform:translateY(-4px) scale(1.04)}
.lg-name{padding:0 24px 22px;font-weight:600;font-size:19px;letter-spacing:-.02em;color:var(--ink)}
/* hover reveal: description + discipline + story link (no layout shift) */
.lg-info{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;gap:7px;padding:46px 24px 20px;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.97) 34%);opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.lg-card:hover .lg-info,.lg-card:focus-visible .lg-info,.lg-card:focus-within .lg-info{opacity:1;transform:none}
.lg-i-name{font-weight:600;font-size:20px;letter-spacing:-.02em;color:var(--ink)}
.lg-desc{font-size:14.5px;line-height:1.5;color:var(--ink2)}
.lg-disc{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lg-cta{margin-top:5px;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;color:var(--ink)}
.lg-cta .ar{color:var(--bc);transition:transform .35s var(--ease)}
.lg-card:hover .lg-cta .ar,.lg-card:focus-visible .lg-cta .ar{transform:translateX(5px)}
@media (hover:none),(pointer:coarse){
  .lg-info{position:static;opacity:1;transform:none;background:none;padding:2px 24px 22px}
  .lg-name{display:none}
}
@media (max-width:1000px){.lg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.lg-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .lg-card,.lg-logo,.lg-info{transition:none}
  .lg-card:hover,.lg-card:focus-visible{transform:none}
}

/* ================= v19a — LEGACY overlay banner: brand field + real logo ================= */
.cv-era{background:var(--bc);border-radius:20px;min-height:clamp(200px,24vw,280px);display:flex;align-items:center;justify-content:center;padding:clamp(24px,3.4vw,38px)}
.cv-era-logo{display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.96);border-radius:16px;padding:clamp(18px,2.4vw,26px) clamp(26px,3.2vw,40px);box-shadow:0 26px 56px -24px rgba(11,11,12,.5)}
.cv-era-logo img{max-width:240px;max-height:88px;display:block}
.co-next-era{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:64px;padding:10px}
.co-next-era img{max-width:74%;max-height:36px;background:rgba(255,255,255,.95);border-radius:8px;padding:5px 10px}
/* the studio's closing principle inside every Legacy story */
.co-ch .co-principle{margin-top:18px;border-left:2px solid var(--acc);padding:4px 0 4px 16px;font-weight:600;color:var(--ink)}

/* ================= v14 A4 — privacy-controls pill: white Inter 600 on orange, AA ================= */
.legal-actions .btn{font-family:var(--body);font-weight:600}
.legal-actions .btn-acc{background:#D63F16;color:#fff}
.legal-actions .btn-acc:hover{background:#B2340E;color:#fff}
.legal-actions .btn-acc:active{background:#9A2C0C;color:#fff}
.legal-actions .btn-acc:focus-visible{outline:3px solid #B2340E;outline-offset:3px}
.legal-actions .btn-acc .ar{color:#fff}

/* ============================================================
   v14 WAVE B — CAREERS (careers.html)
   ============================================================ */
/* ---- hero: fun + premium, Inter 600 H1 (not the serif page-hero) ---- */
.cr-hero{padding-bottom:clamp(48px,6vw,84px)}
.cr-hero h1{font-family:var(--body);font-weight:600;font-size:clamp(56px,7.4vw,88px);line-height:1.02;letter-spacing:-.035em;max-width:1050px}
.cr-hero h1 .cr-acc{position:relative;display:inline-block;font-style:normal}
.cr-sub{font-size:20px;line-height:1.55;color:var(--ink2);max-width:680px;margin-top:26px}
/* confetti dots layer (positions set in JS, fixed to page coords) */
.cr-confetti{position:absolute;inset:0 auto auto 0;width:0;height:0;z-index:60;pointer-events:none}
.cr-confetti i{position:absolute;left:0;top:0;display:block;border-radius:2px;will-change:transform,opacity}
/* role ticker */
.cr-ticker{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:34px;font-size:15px}
.cr-ticker-lab{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:8px}
.cr-ticker-lab::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(30,142,90,.15)}
.cr-ticker-role{font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--ink);min-height:1.4em}
.cr-ticker-caret{width:9px;height:1.15em;background:var(--acc);align-self:center;animation:cr-caret 1.1s steps(2) infinite}
@keyframes cr-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
/* facts strip */
.cr-facts{list-style:none;display:flex;flex-wrap:wrap;margin-top:40px;padding:0;border-top:1px solid var(--hair)}
.cr-facts li{flex:1 1 200px;padding:20px 22px 4px 0;font-size:14.5px;color:var(--ink2);line-height:1.5;border-right:1px solid var(--hair);margin-right:22px}
.cr-facts li:last-child{border-right:0;margin-right:0}
.cr-facts b{font-weight:600;color:var(--ink)}
/* ---- culture cards ---- */
.cr-culture{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cr-ccard{background:var(--white);border:1px solid var(--hair);border-radius:20px;padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:14px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.cr-ccard:hover{transform:translateY(-5px);box-shadow:0 26px 48px -20px rgba(11,11,12,.16)}
.cr-cnum{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--acc)}
.cr-ccard h3{font-size:clamp(22px,2vw,26px);letter-spacing:-.02em;line-height:1.05}
.cr-ccard p{font-size:15px;line-height:1.6;color:var(--ink2)}
/* ---- discipline chips ---- */
.cr-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:14px}
.cr-chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-weight:500;font-size:13.5px;padding:9px 16px;border:1px solid var(--hair2);border-radius:999px;color:var(--ink2);transition:all .3s var(--ease);min-height:40px}
.cr-chip i{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.cr-chip:hover{border-color:var(--ink);color:var(--ink)}
.cr-chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.cr-chip.on i{color:rgba(255,255,255,.6)}
.cr-count{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
/* ---- role rows ---- */
.cr-list{border-top:1px solid var(--hair)}
.cr-row{border-bottom:1px solid var(--hair)}
.cr-row[hidden]{display:none}
.cr-head{display:grid;grid-template-columns:44px minmax(0,1.4fr) minmax(0,2fr) 30px;align-items:center;gap:18px;width:100%;text-align:left;padding:22px 6px;border-radius:8px;transition:background .3s}
.cr-head:hover{background:var(--gray)}
.cr-ix{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted)}
.cr-title{font-weight:600;font-size:clamp(24px,2.1vw,28px);letter-spacing:-.02em;line-height:1.1}
.cr-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;justify-self:end;text-align:right}
.cr-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);border:1px solid rgba(240,78,35,.35);border-radius:999px;padding:4px 10px}
.cr-m{font-size:12.5px;color:var(--muted);white-space:nowrap}
.cr-loc{white-space:normal;max-width:230px}
.cr-sr{font-weight:500;color:var(--ink2)}
.cr-chev{width:14px;height:14px;justify-self:end;transition:transform .45s var(--ease)}
.cr-chev path{fill:none;stroke:var(--ink2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cr-row.open .cr-chev{transform:rotate(180deg)}
.cr-row.open .cr-title{color:var(--acc)}
.cr-detail{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.cr-row.open .cr-detail{grid-template-rows:1fr}
.cr-detail-in{overflow:hidden;min-height:0}
.cr-cols{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:clamp(20px,3vw,40px);padding:10px 6px 6px 62px}
.cr-lab{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:10px}
.cr-block p{font-size:15px;line-height:1.6;color:var(--ink2)}
.cr-block ul{list-style:none}
.cr-block li{position:relative;font-size:14.5px;line-height:1.55;color:var(--ink2);padding-left:18px;margin-bottom:8px}
.cr-block li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:1.5px;background:var(--acc)}
.cr-apply{margin:6px 6px 26px 62px;padding:12px 24px;font-size:14px;min-height:46px}
/* ---- open application row ---- */
.cr-openapp{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-top:clamp(40px,5vw,60px);background:var(--gray);border:1px solid var(--hair);border-radius:22px;padding:clamp(24px,3.4vw,40px)}
.cr-openapp h3{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.02em;margin-bottom:8px}
.cr-openapp p{font-size:15px;line-height:1.6;color:var(--ink2);max-width:560px}
/* ---- how we hire ---- */
.cr-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0;padding:0;counter-reset:step}
.cr-steps li{background:var(--white);border:1px solid var(--hair);border-radius:20px;padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;gap:12px}
.cr-steps i{font-style:normal;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--acc)}
.cr-steps h3{font-size:clamp(20px,1.8vw,24px);letter-spacing:-.02em}
.cr-steps p{font-size:14.5px;line-height:1.55;color:var(--ink2)}
/* ---- application modal (reuses #quoteModal sheet/backdrop/x language) ---- */
#applyModal{position:fixed;inset:0;z-index:1500;display:flex;align-items:center;justify-content:center;padding:clamp(10px,3vw,40px)}
#applyModal[hidden]{display:none}
#applyModal .qm-backdrop{position:absolute;inset:0;background:rgba(11,11,12,.44);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .45s var(--ease)}
#applyModal.open .qm-backdrop{opacity:1}
#applyModal .qm-sheet{position:relative;width:min(680px,100%);max-height:calc(100svh - 32px);overflow-y:auto;overscroll-behavior:contain;background:var(--white);border-radius:28px;padding:clamp(24px,4vw,46px);box-shadow:0 60px 140px -40px rgba(11,11,12,.55);opacity:0;transform:translateY(60px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
#applyModal.open .qm-sheet{opacity:1;transform:none}
#applyModal .qm-x{position:absolute;top:16px;right:16px;width:42px;height:42px;border-radius:50%;border:1px solid var(--hair2);display:flex;align-items:center;justify-content:center;background:var(--white);transition:all .3s;z-index:2}
#applyModal .qm-x svg{width:12px;height:12px}
#applyModal .qm-x path{stroke:var(--ink2);stroke-width:1.8;stroke-linecap:round}
#applyModal .qm-x:hover{background:var(--ink);border-color:var(--ink)}
#applyModal .qm-x:hover path{stroke:#fff}
#applyModal .qm-title{font-size:clamp(1.7rem,3vw,2.3rem);margin:12px 0 22px}
.am-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.am-fields input,.am-note{width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--white);border:1px solid var(--hair2);border-radius:14px;padding:15px 18px;transition:border-color .3s}
.am-fields input:focus,.am-note:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 4px rgba(240,78,35,.14)}
.am-fields input.shake{animation:am-shake .45s var(--ease);border-color:var(--acc)}
.am-note{min-height:96px;resize:vertical;margin-top:14px}
/* resume drop-zone */
.am-drop{border:1.5px dashed var(--hair2);border-radius:16px;padding:18px;text-align:center;transition:border-color .3s,background .3s}
.am-drop.over{border-color:var(--acc);background:var(--acctint)}
.am-drop.has{border-style:solid;border-color:var(--ok)}
.am-drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.am-drop-btn{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;padding:6px;border-radius:12px}
.am-drop-btn svg{width:26px;height:26px}
.am-drop-btn svg path{fill:none;stroke:var(--acc);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.am-drop-txt{font-weight:600;font-size:15.5px;letter-spacing:-.01em}
.am-drop-sub{font-size:12.5px;color:var(--muted)}
.am-drop-file{margin-top:12px;font-size:13.5px;font-weight:500;color:var(--ok)}
.am-drop-note{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.am-drop-note b{color:var(--ink2);font-weight:600}
.am-actions{margin-top:18px;display:flex;justify-content:flex-end}
.am-actions .btn .ar{font-style:normal}
.js-am-submit.sending{opacity:.75;pointer-events:none}
.js-am-submit .spin{width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:am-spin .7s linear infinite;display:inline-block}
@keyframes am-spin{to{transform:rotate(360deg)}}
/* validation shake (matches wizard language) */
@keyframes am-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.am-form .shake,.am-drop.shake{animation:am-shake .45s var(--ease)}
/* .wiz-err base (opacity toggle) comes from the shared wizard styles above */
/* ---- careers responsive ---- */
@media (max-width:1000px){
  .cr-cols{grid-template-columns:1fr;padding-left:6px}
  .cr-apply{margin-left:6px}
  .cr-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cr-culture{grid-template-columns:1fr;max-width:640px}
}
@media (max-width:820px){
  .cr-hero h1{font-size:clamp(40px,11vw,56px)}
  .cr-head{grid-template-columns:34px minmax(0,1fr) 26px;gap:10px;padding:18px 4px}
  .cr-ix{grid-column:1;grid-row:1}
  .cr-title{grid-column:2;grid-row:1}
  .cr-meta{grid-column:2/4;grid-row:2;justify-self:start;text-align:left;margin-top:6px}
  .cr-chev{grid-column:3;grid-row:1}
  .cr-title{font-size:clamp(20px,5.6vw,24px)}
  .cr-loc{max-width:none}
  .cr-facts li{flex:1 1 46%;border-right:0;padding-right:0;margin-right:0}
  .am-fields{grid-template-columns:1fr}
  .cr-openapp{flex-direction:column;align-items:flex-start}
}
@media (max-width:520px){
  .cr-steps{grid-template-columns:1fr}
  .cr-ticker-role{font-size:15.5px}
}
/* ---- reduced motion ---- */
@media(prefers-reduced-motion:reduce){
  .cr-ticker-caret{animation:none;opacity:1}
  .cr-detail{transition:none}
  .cr-ccard,.cr-head,.cr-chev{transition:none}
  .cr-ccard:hover{transform:none}
  #applyModal .qm-backdrop,#applyModal .qm-sheet{transition:none}
  .am-form .shake,.am-drop.shake{animation:none}
  .js-am-submit .spin{animation:none}
}

/* ============================================================
   FULL BRANDING & PRODUCT PROJECTS (work.html) — real delivered images
   ============================================================ */
/* skeleton shimmer — shared by evidence thumbs, gallery figures, lightbox */
.skel{background:linear-gradient(100deg,var(--gray) 42%,#EDEDEF 50%,var(--gray) 58%);background-size:220% 100%;animation:skel-shimmer 1.5s linear infinite}
.skel.on{animation:none;background:var(--gray)}
@keyframes skel-shimmer{to{background-position:-220% 0}}
/* ---- section grid: 8 cards, 2-col → 1 ---- */
#evidence{border-top:1px solid var(--hair)}
.ev-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:clamp(36px,5vw,56px)}
.ev-card{display:flex;flex-direction:column;text-align:left;background:var(--white);border:1px solid var(--hair);border-radius:20px;overflow:hidden;cursor:pointer;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.ev-card:hover,.ev-card:focus-visible{transform:translateY(-6px);box-shadow:0 30px 56px -20px rgba(11,11,12,.18)}
.ev-card:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.ev-thumb{display:block;width:100%;overflow:hidden;position:relative}
.ev-thumb img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease,transform .8s var(--ease)}
.ev-thumb.on img{opacity:1}
.ev-card:hover .ev-thumb img,.ev-card:focus-visible .ev-thumb img{transform:scale(1.04)}
.ev-body{display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2.4vw,28px);flex:1}
.ev-chip{align-self:flex-start;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);border:1px solid rgba(240,78,35,.35);border-radius:999px;padding:5px 11px}
.ev-name{font-weight:600;font-size:clamp(20px,1.9vw,24px);letter-spacing:-.02em;line-height:1.12;color:var(--ink)}
.ev-scope{font-size:14.5px;line-height:1.6;color:var(--ink2)}
.ev-cta{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--ink)}
.ev-cta .ar{color:var(--acc);transition:transform .35s var(--ease)}
.ev-card:hover .ev-cta .ar,.ev-card:focus-visible .ev-cta .ar{transform:translateX(5px)}
@media (max-width:760px){.ev-grid{grid-template-columns:1fr}}
/* ---- overlay header: the real image, framed like the other case visuals ---- */
.cv-photo{background:var(--gray)}
.cv-photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.cv-photo--fit{display:flex;align-items:center;justify-content:center;background:#F3F1EC;padding:clamp(12px,1.8vw,22px)}
.cv-photo--fit img{width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;object-position:center;border-radius:10px;box-shadow:0 24px 54px -30px rgba(11,11,12,.35)}
/* next-card thumb for evidence entries */
.co-next-ev{width:100%;height:100%;object-fit:cover;display:block}
/* ---- in-chapter gallery: grouped chips + real-image grid ---- */
.evg{margin-top:22px}
.evg-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.evg-chip{display:inline-flex;align-items:center;font-weight:500;font-size:12.5px;padding:8px 14px;min-height:36px;border:1px solid var(--hair2);border-radius:999px;color:var(--ink2);background:var(--white);transition:all .3s var(--ease)}
.evg-chip i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--muted);margin-left:8px}
.evg-chip:hover{border-color:var(--ink);color:var(--ink)}
.evg-chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.evg-chip.on i{color:rgba(255,255,255,.6)}
.evg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.evg-grid--board{grid-template-columns:1fr}
.evg-fig{position:relative;display:block;width:100%;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--hair);border-radius:14px;cursor:zoom-in;padding:0}
.evg-grid--board .evg-fig{aspect-ratio:auto}
.evg-fig[hidden]{display:none}
.evg-fig img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease,transform .6s var(--ease)}
.evg-fig.on img{opacity:1}
.evg-fig:hover img,.evg-fig:focus-visible img{transform:scale(1.05)}
.evg-fig:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.evg-grid--board .evg-fig{cursor:zoom-in}
.evg-cap{position:absolute;left:8px;bottom:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;background:rgba(11,11,12,.72);color:#fff;border-radius:999px;padding:4px 9px;opacity:0;transition:opacity .3s;pointer-events:none}
.evg-fig:hover .evg-cap,.evg-fig:focus-visible .evg-cap{opacity:1}
.evg-note{margin-top:10px;font-size:12.5px;color:var(--muted)}
@media (max-width:640px){.evg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
/* ---- lightbox: full-screen real-image viewer ---- */
#lb{position:fixed;inset:0;z-index:1400;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
#lb.open{opacity:1;visibility:visible}
.lb-back{position:absolute;inset:0;background:rgba(11,11,12,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.lb-stage{position:relative;z-index:1;margin:0;max-width:min(1100px,92vw);display:flex;flex-direction:column;align-items:center;gap:12px}
#lbImg{max-width:100%;max-height:calc(88vh - 56px);width:auto;height:auto;border-radius:12px;background:#fff;box-shadow:0 40px 120px -30px rgba(0,0,0,.6);opacity:0;transition:opacity .3s ease}
#lbImg.on{opacity:1}
.lb-cap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;color:rgba(255,255,255,.88);font-size:13px;text-align:center}
.lb-count{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;color:rgba(255,255,255,.62)}
.lb-x{position:absolute;top:18px;right:var(--gut);z-index:2;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.32);color:#fff;font-size:15px;display:flex;align-items:center;justify-content:center;transition:background .3s}
.lb-x:hover{background:rgba(255,255,255,.26)}
.lb-ar{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.32);color:#fff;font-size:17px;display:flex;align-items:center;justify-content:center;transition:background .3s}
.lb-ar:hover{background:rgba(255,255,255,.26)}
.lb-prev{left:var(--gut)}
.lb-next{right:var(--gut)}
.lb-ar[hidden]{display:none}
.lb-x:focus-visible,.lb-ar:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:640px){
  .lb-ar{width:40px;height:40px;font-size:15px}
  .lb-prev{left:10px}.lb-next{right:10px}
  .lb-x{top:12px;right:12px}
}
@media (prefers-reduced-motion:reduce){
  .skel{animation:none}
  .ev-card,.ev-thumb img,.evg-fig img,.evg-chip{transition:none}
  .ev-card:hover,.ev-card:focus-visible{transform:none}
  #lb,#lbImg{transition:none}
}


/* ============================================================
   v18 — ELITE CASE TEMPLATE: real screen galleries + credits
   ============================================================ */
/* CTO.ai layer demo — the middle + top layers are REAL screens now */
.ld-img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:17px}
.ld-ui .ld-tag{z-index:2;text-shadow:0 1px 8px rgba(3,7,18,.65)}
.ld-comp .ld-tag{color:#6EE7FF}
/* organized per-screen gallery: natural size (explicit w/h, never upscaled
   past the 460px masters), 3-up → 2-up → 1-up, tiny captions */
.scg{margin-top:20px}
.scg-grid{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px)}
.scg-grid.scg--sm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.scg-fig{display:flex;flex-direction:column;gap:8px;min-width:0}
/* v23 — ONE LONG, ONE SHORT: tall screens anchor an asymmetric duo with
   shorts stacked beside them, alternating sides each row */
.scg-duo{display:grid;grid-template-columns:46fr 54fr;gap:clamp(14px,1.8vw,22px);align-items:start}
.scg-duo.flip .scg-tall{order:2}
.scg-shorts{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px)}
.scg-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
@media(max-width:820px){.scg-duo{grid-template-columns:1fr}.scg-duo.flip .scg-tall{order:0}}
.scg-btn{position:relative;display:block;width:100%;padding:0;border:1px solid var(--hair);border-radius:12px;overflow:hidden;background:var(--gray);cursor:zoom-in;transition:border-color .35s,box-shadow .35s}
.scg-btn img{display:block;width:100%;height:auto;opacity:0;transition:opacity .5s ease,transform .9s var(--ease)}
.scg-btn.on img{opacity:1}
.scg-btn:hover img,.scg-btn:focus-visible img{transform:scale(1.03)}
.scg-btn::after{content:"View full size";position:absolute;right:10px;bottom:10px;z-index:2;background:rgba(11,11,12,.74);color:#fff;font-family:var(--body);font-weight:500;font-size:11px;letter-spacing:.03em;padding:7px 12px;border-radius:999px;opacity:0;transform:translateY(5px);transition:opacity .3s ease,transform .3s var(--ease);pointer-events:none}
.scg-btn:hover::after,.scg-btn:focus-visible::after{opacity:1;transform:none}
.scg-btn:hover,.scg-btn:focus-visible{border-color:var(--ink);box-shadow:0 18px 38px -20px rgba(11,11,12,.35)}
.scg-btn:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.scg-cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.scg-chip{position:absolute;top:10px;left:10px;z-index:2;background:var(--acc);color:#fff;font-family:var(--body);font-weight:500;font-size:11.5px;letter-spacing:.02em;border-radius:999px;padding:6px 12px;box-shadow:0 8px 18px -10px rgba(240,78,35,.7)}
@media(max-width:900px){.scg-grid.scg--sm{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.scg-grid.scg--sm{grid-template-columns:1fr}.scg-pair{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.scg-btn img,.scg-btn::after{transition:none}}
/* quiet note inside a chapter (e.g. anonymized system view) */
.co-note{margin-top:14px;font-size:13.5px;color:var(--muted)}
/* two-tier CREDITS block */
.co-credits{border-top:1px solid var(--hair);padding-top:clamp(22px,3vw,30px)}
.co-credit-lead{font-size:clamp(15.5px,1.35vw,17.5px);color:var(--ink2);line-height:1.7;max-width:680px}
.co-credit-line{margin-top:10px;font-weight:600;font-size:15px;color:var(--ink);letter-spacing:-.01em}
.co-credit-nda{margin-top:16px;border-left:2px solid var(--hair2);padding:4px 0 4px 16px;font-size:14px;color:var(--muted);max-width:560px}

/* ============================================================
   v19c — EXPERIENCE LAB trio (L1 product scenes · L2 motion
   personalities · L3 generative identity). Dark full-bleed
   stages inside the case overlay; hand-rolled canvas/CSS only.
   ============================================================ */
.co-ch--demo{max-width:none;margin-left:calc(var(--gut)*-1);margin-right:calc(var(--gut)*-1)}
#caseOv .co-visual[hidden]{display:none}
.l1-scene[data-scene="1"] .l19-hint,.l1-scene[data-scene="2"] .l19-hint{left:auto;right:20px;transform:none}
.l19{background:#0C0C0E;color:#F5F4F0;border-radius:22px;overflow:hidden;position:relative;margin-bottom:clamp(40px,5vw,64px)}
.l19 button{color:inherit}
.l19 :focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.l19 .l19-lab{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,244,240,.5);padding:0 clamp(16px,3vw,32px);margin:0 0 14px}
.l19 .l19-hint{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,244,240,.55);display:flex;align-items:center;gap:8px;pointer-events:none}
.l19-hint::before{content:"";width:16px;height:1px;background:var(--acc)}
/* ---------- shared pill buttons on dark ---------- */
.l19 .pill{font-family:var(--body);font-weight:500;font-size:13px;letter-spacing:.02em;color:rgba(245,244,240,.82);border:1px solid rgba(245,244,240,.22);border-radius:999px;padding:9px 18px;min-height:40px;background:rgba(255,255,255,.04);transition:border-color .25s,background .25s,color .25s}
.l19 .pill:hover{border-color:rgba(245,244,240,.5)}
.l19 .pill.on,.l19 .pill[aria-pressed="true"],.l19 .pill[aria-selected="true"]{background:var(--acc);border-color:var(--acc);color:#fff}
.l19 .pill[disabled]{opacity:.35;cursor:not-allowed}

/* ==================== L1 — product scenes ==================== */
.l1-stage{position:relative;height:min(78vh,780px);min-height:520px;background:
  radial-gradient(120% 90% at 50% 0%,#17171B 0%,#0C0C0E 62%);outline:none}
/* opacity + pointer-events only — a visibility:visible child would override the
   closed overlay's inherited visibility:hidden and keep intercepting clicks */
.l1-scene{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .5s ease}
.l1-scene.on{opacity:1;pointer-events:auto}
.l1-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}
.l1-canvas:active{cursor:grabbing}
/* scene chrome */
.l1-tabs{position:absolute;top:18px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:6;background:rgba(12,12,14,.55);backdrop-filter:blur(8px);border:1px solid rgba(245,244,240,.14);border-radius:999px;padding:5px}
.l1-tab{font-size:12.5px;font-weight:500;letter-spacing:.03em;color:rgba(245,244,240,.7);border-radius:999px;padding:8px 16px;min-height:36px;transition:background .25s,color .25s}
.l1-tab[aria-selected="true"]{background:#F5F4F0;color:#0B0B0C}
.l1-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:44px;height:44px;border-radius:50%;border:1px solid rgba(245,244,240,.22);background:rgba(12,12,14,.55);backdrop-filter:blur(8px);font-size:17px;display:flex;align-items:center;justify-content:center;transition:border-color .25s,background .25s}
.l1-arrow:hover{border-color:var(--acc);background:rgba(240,78,35,.16)}
.l1-prev{left:16px}.l1-next{right:16px}
.l1-scene .l19-hint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:5}
/* hotspots */
.l1-hot{position:absolute;left:var(--x);top:var(--y);z-index:5;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(240,78,35,.92);color:#fff;font-size:19px;font-weight:500;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px rgba(240,78,35,.22);transition:transform .3s var(--ease),box-shadow .3s}
.l1-hot:hover,.l1-hot[aria-expanded="true"]{transform:scale(1.14);box-shadow:0 0 0 9px rgba(240,78,35,.18)}
.l1-hot span{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);font-size:11.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:rgba(245,244,240,.85);background:rgba(12,12,14,.72);border:1px solid rgba(245,244,240,.16);border-radius:6px;padding:4px 9px;white-space:nowrap;pointer-events:none}
.l1-hotcard{position:absolute;z-index:7;right:clamp(14px,4vw,40px);bottom:clamp(64px,9vh,92px);width:min(300px,78vw);background:rgba(16,16,20,.92);backdrop-filter:blur(10px);border:1px solid rgba(245,244,240,.16);border-radius:16px;padding:18px 20px;box-shadow:0 24px 60px -20px rgba(0,0,0,.6)}
.l1-hotcard h4{font-family:var(--disp);font-size:17px;font-weight:600;letter-spacing:-.01em;margin:0 0 8px;color:#F5F4F0}
.l19 .l1-hotcard p{font-size:13.5px;line-height:1.6;color:rgba(245,244,240,.72);margin:0}
.l1-hotcard .l1-hc-x{position:absolute;top:8px;right:10px;font-size:14px;color:rgba(245,244,240,.6);padding:6px}
/* configurator */
.l1-config{position:absolute;left:clamp(14px,4vw,40px);bottom:clamp(18px,4vh,34px);z-index:6;display:flex;flex-direction:column;gap:10px;background:rgba(12,12,14,.55);backdrop-filter:blur(8px);border:1px solid rgba(245,244,240,.14);border-radius:14px;padding:12px 16px}
.l1-cfg-row{display:flex;align-items:center;gap:10px}
.l1-cfg-lab{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,244,240,.5);width:52px}
.l1-sw{width:26px;height:26px;border-radius:50%;border:2px solid rgba(245,244,240,.25);background:var(--c);transition:transform .25s var(--ease),border-color .25s}
.l1-sw:hover{transform:scale(1.15)}
.l1-sw[aria-pressed="true"]{border-color:#F5F4F0;transform:scale(1.15);box-shadow:0 0 0 3px rgba(245,244,240,.18)}
.l1-sw--cap{border-radius:8px}
/* device */
.l1-devwrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;perspective:1100px;touch-action:none}
.l1-stack{position:relative;width:min(300px,58vw);height:min(200px,38vw);transform:rotateX(56deg) rotateZ(-36deg);transform-style:preserve-3d}
.l1-layer{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.l1-part{position:absolute;inset:0;border-radius:18px;border:1px solid rgba(245,244,240,.28)}
.l1-p-shell{background:linear-gradient(135deg,rgba(245,244,240,.14),rgba(245,244,240,.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 40px rgba(240,78,35,.06)}
.l1-p-shield{background:rgba(38,38,44,.92);background-image:repeating-linear-gradient(0deg,rgba(245,244,240,.05) 0 1px,transparent 1px 12px),repeating-linear-gradient(90deg,rgba(245,244,240,.05) 0 1px,transparent 1px 12px)}
.l1-p-board{background:rgba(24,52,44,.94)}
.l1-p-board::before{content:"";position:absolute;left:12%;top:20%;width:30%;height:34%;background:rgba(245,244,240,.14);border-radius:4px;box-shadow:120px 26px 0 -4px rgba(240,78,35,.75),60px 62px 0 -6px rgba(245,244,240,.2),130px -20px 0 -7px rgba(245,244,240,.16)}
.l1-p-board::after{content:"";position:absolute;inset:8%;border:1px dashed rgba(245,244,240,.22);border-radius:10px}
.l1-p-cell{background:linear-gradient(135deg,#2E2E34,#1B1B20)}
.l1-p-cell::before{content:"";position:absolute;left:14%;top:26%;width:56%;height:48%;border-radius:10px;background:linear-gradient(90deg,rgba(240,78,35,.85),rgba(240,78,35,.35))}
.l1-p-core{background:rgba(16,16,20,.96);display:flex;align-items:center;justify-content:center}
.l1-p-core::before{content:"";width:34%;height:52%;border-radius:8px;background:linear-gradient(135deg,#F04E23,#8E2B10);box-shadow:0 0 34px rgba(240,78,35,.5)}
.l1-lname{position:absolute;right:calc(100% + 18px);top:50%;transform:translateY(-50%) rotateZ(36deg) rotateX(-56deg);transform-origin:right center;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(245,244,240,.85);white-space:nowrap;opacity:0;transition:opacity .35s;background:rgba(12,12,14,.7);border:1px solid rgba(245,244,240,.16);border-radius:6px;padding:5px 10px}
.l1-devwrap.ex .l1-lname{opacity:1}
.l1-devbar{position:absolute;left:50%;bottom:clamp(18px,4vh,34px);transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
.l1-xrange{width:min(200px,40vw);accent-color:var(--acc);height:40px}
/* platform journey */
.l1-journey{position:absolute;inset:0;overflow:hidden;touch-action:none}
.l1-track{position:absolute;top:50%;left:50%;transform:translate(-50%,-54%);width:min(1120px,92%);height:min(58%,440px)}
.l1-pathsvg{position:absolute;left:0;top:50%;width:100%;height:6px;transform:translateY(-50%)}
.l1-pathsvg path{fill:none;stroke:rgba(245,244,240,.14);stroke-width:2}
.l1-pathsvg .l1-pathfill{stroke:var(--acc);stroke-dasharray:100;stroke-dashoffset:100}
.l1-frames{position:absolute;inset:0;display:flex}
.l1-frame{flex:0 0 25%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:0 12px;opacity:.28;transform:scale(.9);transition:opacity .5s,transform .5s var(--ease)}
.l1-frame.act{opacity:1;transform:none}
.l1-frame h4{font-family:var(--disp);font-size:clamp(15px,1.6vw,19px);font-weight:600;letter-spacing:.01em;margin:0;color:#F5F4F0}
.l1-frame .l1-fnum{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--acc)}
.l19 .l1-frame p{font-size:12.5px;line-height:1.55;color:rgba(245,244,240,.6);text-align:center;max-width:210px;margin:0}
.l1-mock{width:min(100%,216px);height:118px;border:1px solid rgba(245,244,240,.18);border-radius:12px;background:rgba(255,255,255,.035);position:relative;overflow:hidden}
.l1-frame.act .l1-mock{border-color:rgba(240,78,35,.55);box-shadow:0 12px 40px -18px rgba(240,78,35,.45)}
.l1-m-data i{position:absolute;bottom:12%;width:9%;background:linear-gradient(180deg,rgba(240,78,35,.9),rgba(240,78,35,.25));border-radius:3px 3px 0 0}
.l1-m-signal i{position:absolute;left:0;right:0;top:50%;height:2px}
.l1-mock svg{position:absolute;inset:0;width:100%;height:100%}
.l1-prog{position:absolute;left:50%;bottom:clamp(18px,4vh,34px);transform:translateX(-50%);z-index:6;width:min(280px,60vw);display:flex;align-items:center;gap:12px}
.l1-prog .l1-xrange{flex:1}
.l1-progout{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:rgba(245,244,240,.65);text-transform:uppercase;white-space:nowrap}
/* reduced-motion L1: journey shows all four frames statically */
.l1.rm .l1-frame{opacity:1;transform:none}
.l1.rm .l1-pathsvg .l1-pathfill{stroke-dashoffset:0}

/* ==================== L2 — motion personalities ==================== */
.l2{padding-bottom:clamp(24px,3vw,36px)}
.l2-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:clamp(16px,2.4vw,26px) clamp(16px,3vw,32px);border-bottom:1px solid rgba(245,244,240,.1)}
.l2-personas{display:flex;gap:8px;flex-wrap:wrap}
.l2-ctl{display:flex;gap:8px;flex-wrap:wrap}
.l2-stage{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;padding:clamp(18px,2.6vw,28px) clamp(16px,3vw,32px)}
.l2-surf{position:relative;border:1px solid rgba(245,244,240,.14);border-radius:16px;background:rgba(255,255,255,.03);min-height:200px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.l2-surf--mark{grid-column:span 2;min-height:260px}
.l2-surf--type{grid-column:span 4;min-height:260px}
.l2-surf--page,.l2-surf--ui,.l2-surf--end{grid-column:span 2}
.l2-sname{position:absolute;top:10px;left:14px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,244,240,.45);z-index:3}
/* per-personality motion tokens (defaults = composed) — data-p works at any level (root, compare columns) */
.l2,.l2 [data-p]{--dur:1.5s;--ease:cubic-bezier(.16,1,.3,1);--st:.14s;--tx:0px;--ty:18px;--sc0:1;--rest:1}
.l2[data-p="decisive"],.l2 [data-p="decisive"]{--dur:.48s;--ease:cubic-bezier(.85,0,.15,1);--st:.035s;--tx:-22px;--ty:0px;--sc0:1}
.l2[data-p="expressive"],.l2 [data-p="expressive"]{--dur:.95s;--ease:cubic-bezier(.34,1.56,.64,1);--st:.09s;--tx:0px;--ty:26px;--sc0:1.12}
@keyframes l2rise{from{opacity:0;transform:translate(var(--tx),var(--ty)) scale(var(--sc0))}to{opacity:1;transform:none}}
@keyframes l2draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes l2fill{from{opacity:0}to{opacity:1}}
@keyframes l2wipeX{from{transform:translateX(-102%)}to{transform:translateX(102%)}}
@keyframes l2wipeY{from{transform:translateY(102%)}to{transform:translateY(-102%)}}
@keyframes l2card{from{opacity:0;transform:translateY(26%) scale(.55)}to{opacity:1;transform:none}}
.l2 .anim{opacity:0}
.l2 .run .anim{animation:l2rise var(--dur) var(--ease) both;animation-delay:calc(var(--i,0)*var(--st))}
.l2 .run .anim--draw{opacity:1;stroke-dasharray:100;stroke-dashoffset:100;animation:l2draw calc(var(--dur)*1.15) var(--ease) both;animation-delay:calc(var(--i,0)*var(--st))}
.l2 .run .anim--fill{animation:l2fill calc(var(--dur)*.8) var(--ease) both;animation-delay:calc(var(--i,0)*var(--st) + var(--dur)*.4)}
.l2 .run .anim--wipe{opacity:1;animation:l2wipeY calc(var(--dur)*1.05) var(--ease) both;animation-delay:calc(var(--i,0)*var(--st))}
.l2[data-p="decisive"] .run .anim--wipe,.l2 [data-p="decisive"] .run .anim--wipe{animation-name:l2wipeX}
.l2 .run .anim--card{animation:l2card calc(var(--dur)*.9) var(--ease) both;animation-delay:calc(var(--i,0)*var(--st) + var(--dur)*.5)}
.l2.paused .run .anim,.l2.paused .run .anim--draw,.l2.paused .run .anim--fill,.l2.paused .run .anim--wipe,.l2.paused .run .anim--card{animation-play-state:paused}
/* surface 1 — traced mark + wordmark */
.l2-marksvg{width:min(150px,44%);height:auto}
.l2-marksvg .l2-mk-ink,.l2-marksvg .l2-mk-or{fill:none;stroke-width:14}
.l2-marksvg .l2-mk-ink{stroke:#F5F4F0}
.l2-marksvg .l2-mk-or{stroke:var(--acc)}
.l2-marksvg .l2-mk-inkf{fill:#F5F4F0;fill-rule:evenodd;stroke:none}
.l2-marksvg .l2-mk-orf{fill:var(--acc);stroke:none}
.l2-markwrap{display:flex;align-items:center;gap:clamp(14px,2vw,22px)}
.l2-word{font-family:var(--disp);font-weight:600;font-size:clamp(30px,4vw,44px);letter-spacing:-.03em;display:flex}
.l2-word i{font-style:normal;display:inline-block}
/* surface 2 — typography statement */
.l19 .l2-type{font-family:var(--serif);font-weight:500;font-size:clamp(24px,3.4vw,42px);letter-spacing:-.02em;line-height:1.15;text-align:center;max-width:88%;color:#F2F0EA}
.l2-type i{font-style:normal;display:inline-block;margin-right:.26em}
.l2-type i.acc{color:var(--acc)}
/* surface 3 — page transition */
.l2-pagebox{position:relative;width:76%;height:64%;border-radius:10px;overflow:hidden;border:1px solid rgba(245,244,240,.16)}
.l2-pg{position:absolute;inset:0;padding:10%}
.l2-pg-a{background:#1A1A1F}
.l2-pg-b{background:#F5F4F0}
.l2-pg i{display:block;height:8px;border-radius:4px;margin-bottom:8px;background:rgba(245,244,240,.3)}
.l2-pg-b i{background:rgba(11,11,12,.22)}
.l2-pg i.w60{width:60%}.l2-pg i.w80{width:80%}.l2-pg i.w40{width:40%;background:var(--acc)}
.l2-wipe{position:absolute;inset:-2%;background:var(--acc);transform:translateY(102%)}
/* surface 4 — interface interaction */
.l2-uibox{position:relative;width:78%;height:66%;display:flex;align-items:flex-end;justify-content:center}
.l2-btn{font-family:var(--body);font-weight:600;font-size:12.5px;background:var(--acc);color:#fff;border-radius:999px;padding:9px 18px;white-space:nowrap}
.l2-ucard{position:absolute;left:8%;right:8%;bottom:34%;height:56%;border-radius:12px;background:#F5F4F0;padding:10%;display:flex;flex-direction:column;gap:7px}
.l2-ucard i{display:block;height:7px;border-radius:4px;background:rgba(11,11,12,.2)}
.l2-ucard i:first-child{width:44%;background:var(--acc)}
.l2-ucard i:nth-child(2){width:82%}.l2-ucard i:nth-child(3){width:64%}
/* surface 5 — campaign end-frame */
.l2-endbox{position:absolute;inset:0;background:linear-gradient(135deg,#241109,#0C0C0E 60%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.l2-endbox .l2-eline{font-family:var(--disp);font-weight:600;font-size:clamp(15px,1.8vw,20px);letter-spacing:-.01em}
.l2-endbox .l2-elock{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(245,244,240,.6)}
.l2-endbox .l2-elock b{width:9px;height:9px;border-radius:50%;background:var(--acc)}
/* compare mode */
.l2-cmp{display:none;grid-template-columns:1fr 1fr;gap:14px;padding:clamp(18px,2.6vw,28px) clamp(16px,3vw,32px)}
.l2.cmp-on .l2-cmp{display:grid}
.l2.cmp-on .l2-stage{display:none}
.l2-cmpcol{border:1px solid rgba(245,244,240,.16);border-radius:16px;overflow:hidden}
.l2-cmpcol>header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(245,244,240,.12);font-family:var(--disp);font-weight:600;font-size:15px}
.l2-cmpcol select{background:#1A1A1F;color:#F5F4F0;border:1px solid rgba(245,244,240,.24);border-radius:8px;font:500 12.5px var(--body);padding:6px 10px}
.l2-cmpcol .l2-cmpbody{display:grid;gap:10px;padding:14px}
.l2-cmpcol .l2-surf{min-height:120px}
.l2-cmpcol .l2-surf--mark,.l2-cmpcol .l2-surf--type,.l2-cmpcol .l2-surf--page,.l2-cmpcol .l2-surf--ui,.l2-cmpcol .l2-surf--end{grid-column:auto}
.l2-cmpcol .l2-type{font-size:19px}
.l2-cmpcol .l2-word{font-size:24px}
.l2-cmpcol .l2-marksvg{width:76px}
/* applications strip */
.l2-apps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;padding:0 clamp(16px,3vw,32px);margin-bottom:clamp(18px,2.6vw,28px)}
.l2-app{border:1px solid rgba(245,244,240,.14);border-radius:14px;background:rgba(255,255,255,.03);min-height:150px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:16px 12px 26px}
.l2-app .l2-sname{top:auto;bottom:8px;left:12px}
.l2-app .l2-ain{width:100%;display:flex;flex-direction:column;gap:8px}
.l2-app .l2-ain i{display:block;height:7px;border-radius:4px;background:rgba(245,244,240,.28)}
.l2-app .l2-ain i.acc{background:var(--acc)}
.l2-ain--site i:nth-child(1){width:34%;height:9px}.l2-ain--site i:nth-child(2){width:78%}.l2-ain--site i:nth-child(3){width:58%}.l2-ain--site i:nth-child(4){width:26%;background:var(--acc)}
.l2-ain--mob{align-items:center}.l2-ain--mob i{width:72%}
.l2-ain--soc i:nth-child(1){width:52%;height:10px}.l2-ain--soc i:nth-child(2){width:88%}.l2-ain--soc i:nth-child(3){width:40%;background:var(--acc)}
.l2-ain--slide i:nth-child(1){width:60%;height:9px}.l2-ain--slide i:nth-child(2){width:80%}.l2-ain--slide i:nth-child(3){width:70%}.l2-ain--slide i:nth-child(4){width:30%;background:var(--acc)}
.l2-ain--film{align-items:center;text-align:center}
.l2-ain--film b{width:34px;height:34px;border-radius:50%;border:2px solid var(--acc);margin:0 auto}
.l2-ain--film i{width:56%;margin:0 auto}
/* spec panel */
.l2-spec-t{margin:0 clamp(16px,3vw,32px);font-weight:600;font-size:14px;color:var(--acc);border:1px solid rgba(240,78,35,.4);border-radius:999px;padding:12px 22px;min-height:46px;transition:background .3s}
.l2-spec-t:hover{background:rgba(240,78,35,.12)}
.l2-spec{margin:16px clamp(16px,3vw,32px) 0;border:1px solid rgba(245,244,240,.14);border-radius:14px;overflow:hidden}
.l2-spec table{width:100%;border-collapse:collapse;font-size:13px}
.l2-spec th,.l2-spec td{padding:11px 16px;text-align:left;border-bottom:1px solid rgba(245,244,240,.09);color:rgba(245,244,240,.78)}
.l2-spec th{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,244,240,.45);font-weight:500;width:190px}
.l2-spec tr:last-child th,.l2-spec tr:last-child td{border-bottom:0}
/* reduced-motion L2: everything at rest state, no animation */
.l2.rm .anim,.l2.rm .run .anim,.l2.rm .run .anim--draw,.l2.rm .run .anim--fill,.l2.rm .run .anim--card{animation:none!important;opacity:1;transform:none;stroke-dashoffset:0}
.l2.rm .anim--wipe,.l2.rm .run .anim--wipe{animation:none!important;transform:translateY(102%);opacity:1}
.l2.rm .l2-pg-b{opacity:1}

/* ==================== L3 — generative identity ==================== */
.l3{padding:clamp(18px,2.6vw,28px) clamp(16px,3vw,32px) clamp(24px,3vw,36px)}
.l3-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(18px,2.6vw,30px);margin-bottom:clamp(24px,3vw,36px)}
.l3-stage-wrap{position:relative;border:1px solid rgba(245,244,240,.16);border-radius:18px;overflow:hidden;background:#101013;aspect-ratio:1;max-height:min(72vh,640px)}
.l3-stage-wrap canvas{width:100%;height:100%;display:block}
.l3-dna-chip{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgba(245,244,240,.6);background:rgba(12,12,14,.7);border:1px solid rgba(245,244,240,.16);border-radius:999px;padding:6px 12px}
.l3-reject{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:max-content;max-width:88%;font-size:12.5px;color:#FFB49E;background:rgba(142,43,16,.28);border:1px solid rgba(240,78,35,.5);border-radius:10px;padding:9px 16px;text-align:center}
.l3-controls{display:flex;flex-direction:column;gap:16px;min-width:0}
.l3-ctl-group{display:flex;flex-direction:column;gap:10px}
.l19 .l3-ctl-title{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:rgba(245,244,240,.5);margin:0}
.l3-slider{display:grid;grid-template-columns:86px 1fr 34px;align-items:center;gap:12px;font-size:13px;color:rgba(245,244,240,.85)}
.l3-slider output{font-family:var(--mono);font-size:11.5px;color:rgba(245,244,240,.6);text-align:right}
.l3-slider input[type="range"]{width:100%;accent-color:var(--acc);height:34px}
.l3-btn{font-weight:600;font-size:14px;background:var(--acc);color:#fff;border-radius:999px;padding:13px 24px;min-height:48px;transition:background .3s,transform .3s var(--ease)}
.l3-btn:hover{background:var(--acc2)}
.l3-btn--ghost{background:transparent;border:1px solid rgba(245,244,240,.28);color:rgba(245,244,240,.85)}
.l3-btn--ghost:hover{background:rgba(255,255,255,.06)}
.l3-btn[disabled]{opacity:.38;cursor:not-allowed}
.l3-btn-row{display:flex;gap:10px;flex-wrap:wrap}
.l3-record{border:1px solid rgba(245,244,240,.14);border-radius:14px;padding:14px 16px;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;font-size:12.5px}
.l3-record .rk{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(245,244,240,.42);display:block}
.l3-record .rv2{color:rgba(245,244,240,.85);font-weight:500}
.l3-record .rv2.seed{font-family:var(--mono);color:var(--coral)}
.l3-status{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:2px 10px;border:1px solid}
.l3-status[data-s="Draft"]{color:#C9CDD6;border-color:rgba(201,205,214,.4)}
.l3-status[data-s="Reviewed"]{color:#8ACBE4;border-color:rgba(138,203,228,.45)}
.l3-status[data-s="Approved"]{color:#7FC4A4;border-color:rgba(127,196,164,.5)}
.l3-status[data-s="Retired"]{color:#8A8A92;border-color:rgba(138,138,146,.4)}
.l3-repro{display:flex;gap:10px}
.l3-repro input{flex:1;min-width:0;background:rgba(255,255,255,.05);border:1px solid rgba(245,244,240,.2);border-radius:10px;color:#F5F4F0;font:500 13px var(--mono);padding:11px 14px}
.l3-repro input::placeholder{color:rgba(245,244,240,.35)}
.l3-rail{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.l3-rail .st{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(245,244,240,.4);border:1px solid rgba(245,244,240,.14);border-radius:999px;padding:6px 12px}
.l3-rail .st.on{color:#0B0B0C;background:#F5F4F0;border-color:#F5F4F0}
.l3-rail i{color:rgba(245,244,240,.3);font-style:normal}
.l3-export{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.l3-export-note{font-size:11.5px;color:rgba(245,244,240,.45)}
.l3-family{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:clamp(24px,3vw,36px)}
.l3-fam{position:relative;border:1px solid rgba(245,244,240,.14);border-radius:12px;overflow:hidden;background:#101013;aspect-ratio:1;cursor:pointer;padding:0;transition:border-color .25s,transform .3s var(--ease)}
.l3-fam:hover{border-color:rgba(245,244,240,.4);transform:translateY(-3px)}
.l3-fam.on{border-color:var(--acc);box-shadow:0 0 0 2px rgba(240,78,35,.4)}
.l3-fam canvas{width:100%;height:100%;display:block}
.l3-fam em{position:absolute;left:6px;bottom:5px;font-family:var(--mono);font-style:normal;font-size:8.5px;letter-spacing:.06em;color:rgba(245,244,240,.55)}
.l3-mocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.l3-mock{position:relative;border:1px solid rgba(245,244,240,.14);border-radius:14px;overflow:hidden;background:#101013;aspect-ratio:4/3}
.l3-mock canvas{width:100%;height:100%;display:block}
.l3-mock .l3-mk-t{position:absolute;top:10px;left:12px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgba(245,244,240,.55);z-index:2}
.l3-mock .l3-apply{position:absolute;right:10px;bottom:10px;z-index:2;font-size:11.5px;font-weight:600;color:#F5F4F0;background:rgba(12,12,14,.72);border:1px solid rgba(245,244,240,.3);border-radius:999px;padding:7px 14px;transition:background .25s,border-color .25s}
.l3-mock .l3-apply:hover{border-color:var(--acc)}
.l3-mock .l3-apply.done{background:var(--acc);border-color:var(--acc)}
.l3-mock .l3-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:rgba(245,244,240,.4);text-align:center;padding:20px}
.l3-mock .l3-empty[hidden]{display:none}

/* ==================== v19c responsive ==================== */
@media (max-width:900px){
  .l2-surf--mark{grid-column:span 3}.l2-surf--type{grid-column:span 3}
  .l2-surf--page,.l2-surf--ui,.l2-surf--end{grid-column:span 2}
  .l2-apps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .l3-top{grid-template-columns:1fr}
  .l3-stage-wrap{max-height:none}
  .l3-family{grid-template-columns:repeat(4,minmax(0,1fr))}
  .l3-mocks{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .l1-stage{min-height:480px;height:72vh}
  .l1-tabs{top:10px;padding:4px}
  .l1-tab{padding:7px 11px;font-size:11.5px;min-height:34px}
  .l1-arrow{width:38px;height:38px}
  .l1-prev{left:8px}.l1-next{right:8px}
  .l1-hotcard{right:12px;left:12px;width:auto;bottom:78px}
  .l1-config{left:12px;right:12px;flex-direction:row;flex-wrap:wrap;gap:8px 14px;bottom:10px;padding:10px 12px}
  .l1-lname{display:none}
  .l1-track{width:96%;height:64%}
  .l1-frame{padding:0 6px}
  .l19 .l1-frame p{display:none}
  .l2-stage{grid-template-columns:1fr;gap:12px}
  .l2-surf--mark,.l2-surf--type,.l2-surf--page,.l2-surf--ui,.l2-surf--end{grid-column:auto;min-height:190px}
  .l2-cmp{grid-template-columns:1fr}
  .l2-apps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .l3-family{grid-template-columns:repeat(3,minmax(0,1fr))}
  .l3-mocks{grid-template-columns:1fr}
  .l3-record{grid-template-columns:1fr}
  .l3-slider{grid-template-columns:74px 1fr 30px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .l1-scene{transition:none}
  .l1-frame{transition:none}
  .l2 .anim,.l2 .run .anim,.l2 .run .anim--draw,.l2 .run .anim--fill,.l2 .run .anim--card{animation:none!important;opacity:1;transform:none;stroke-dashoffset:0}
  .l2 .run .anim--wipe{animation:none!important;transform:translateY(102%)}
}

/* ==================== Lab card teasers (v19c) ==================== */
.xp-teaser{position:relative;border:1px solid var(--hair);border-radius:14px;overflow:hidden;background:#0C0C0E;min-height:150px;display:flex;align-items:center;justify-content:center;gap:14px}
.xp-teaser .xp-hint{position:absolute;bottom:10px;left:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(245,244,240,.6)}
.xp-teaser svg{display:block}
.xp-teaser--l2{gap:10px}
.xp-teaser--l2 .xt-bar{width:12px;border-radius:6px;background:var(--coral)}
.xp-teaser--l2 .xt-bar:nth-child(2){background:var(--acc)}
.xp-teaser--l2 .xt-bar:nth-child(3){background:#FFB49E}
.xp-teaser--l3{gap:0}

/* ================= v19b — A LIVING LEGACY =================
   One copper line traces twenty years of work through twenty hand-placed
   nodes across four discipline arcs, converges, and stroke-draws the TRUE
   eSora mark (window.__markPaths). Obsidian stage: restrained film grain,
   one soft glass sheen, one warm copper bloom top-right. Resting state =
   commissioned artwork: full copper network + mark, nodes as ember dots.
   Palette strictly obsidian / warm graphite / soft ivory / copper orange
   (+ one brand colour per revealed project, on the path only). ---------- */
#livingLegacy{
  --copper:#C97E46; --copper2:#E4A266; --ll-ivory:#F5F4F0; --ll-graphite:#7A7A82;
  --bc:var(--copper); /* revealed project's brand colour (path re-light) */
  position:relative;overflow:hidden;min-height:560px;border-radius:6px;
  background:#0D0D10;isolation:isolate;user-select:none;-webkit-user-select:none;
  touch-action:pan-y; /* vertical scroll stays free; horizontal drags scrub the trace */
}
/* restrained film grain */
#livingLegacy::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* one soft glass sheen */
#livingLegacy::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(115deg,transparent 26%,rgba(245,244,240,.05) 44%,rgba(245,244,240,.015) 52%,transparent 66%),
             linear-gradient(180deg,rgba(245,244,240,.03),transparent 18%);
}
/* warm copper light bloom, top-right (behind the sheen, above the art) */
.ll-bloom{
  position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(42% 34% at 82% 10%,rgba(226,133,64,.30),rgba(226,133,64,.07) 52%,transparent 74%);
}
.ll-concept{
  position:absolute;z-index:5;top:18px;left:20px;margin:0;pointer-events:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;line-height:1.7;
  color:var(--ll-graphite);text-transform:uppercase;max-width:62%;
}
.ll-concept em{font-style:normal;color:rgba(245,244,240,.82)}
.ll-svg{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block}
/* 4 discipline arcs — faint graphite with tiny labels */
.ll-arc path{fill:none;stroke:rgba(122,122,130,.34);stroke-width:1;stroke-dasharray:100;stroke-dashoffset:0}
.ll-arc text{font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;fill:rgba(122,122,130,.6)}
/* the single copper trace */
.ll-trace{
  fill:none;stroke:var(--copper);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:1000;stroke-dashoffset:0;
  filter:drop-shadow(0 0 5px rgba(228,162,102,.35));
  transition:opacity .5s var(--ease);
}
/* per-segment brand re-light overlays (hidden until a node opens) */
.ll-seg{fill:none;stroke:transparent;stroke-width:2.6;stroke-linecap:round;opacity:0;transition:opacity .45s var(--ease),stroke .45s var(--ease)}
#livingLegacy.ll-focus .ll-trace{opacity:.16}
#livingLegacy.ll-focus .ll-seg.on{stroke:var(--bc);opacity:1;filter:drop-shadow(0 0 6px rgba(255,255,255,.06))}
#livingLegacy.ll-focus .ll-dot{opacity:.18}
#livingLegacy.ll-focus .ll-dot.on{opacity:1}
#livingLegacy.ll-focus .ll-arc{opacity:.35}
.ll-arc{transition:opacity .45s var(--ease)}
/* the traced eSora mark — TRUE geometry; stroke-draw then solid rest */
.ll-mstroke{stroke:var(--copper2);stroke-width:16;stroke-dasharray:1000;stroke-dashoffset:0;transition:opacity .4s linear}
.ll-mfill-ring{fill:var(--ll-ivory)}
.ll-mfill-e{fill:#BF6A30}
.ll-mfill{transition:opacity .4s linear}
/* faint ember glow behind the mark at rest */
.ll-ember{fill:rgba(228,150,84,.16);filter:blur(22px);opacity:.9}
#livingLegacy.ll-rest .ll-ember{opacity:1;animation:llEmber 5.2s ease-in-out infinite alternate}
@keyframes llEmber{from{opacity:.55}to{opacity:1}}
/* project nodes — small ember dots at rest */
.ll-dot{fill:var(--copper2);filter:drop-shadow(0 0 4px rgba(228,162,102,.8));transition:opacity .45s var(--ease)}
#livingLegacy.ll-rest .ll-dot{animation:llDot 4.6s ease-in-out infinite alternate}
#livingLegacy.ll-rest .ll-dot:nth-of-type(2n){animation-delay:-1.6s}
#livingLegacy.ll-rest .ll-dot:nth-of-type(3n){animation-delay:-2.9s}
@keyframes llDot{from{opacity:.55}to{opacity:1}}
/* focusable node hit-areas (JS) */
.ll-nodes{position:absolute;inset:0;z-index:6;pointer-events:none}
.ll-node{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;cursor:pointer;pointer-events:auto}
.ll-node::after{
  content:"";position:absolute;inset:9px;border-radius:50%;
  border:1px solid rgba(228,162,102,0);transition:border-color .35s var(--ease),inset .35s var(--ease);
}
.ll-node:hover::after,.ll-node:focus-visible::after,.ll-node.on::after{border-color:rgba(228,162,102,.75);inset:5px}
.ll-node:focus-visible{outline:2px solid var(--copper2);outline-offset:2px}
/* the soft glass card a node blossoms into */
.ll-card{
  position:absolute;z-index:7;width:212px;padding:16px 16px 14px;border-radius:10px;
  background:rgba(20,20,24,.62);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(245,244,240,.14);box-shadow:0 18px 44px rgba(0,0,0,.5),inset 0 1px 0 rgba(245,244,240,.08);
  opacity:0;transform:translateY(6px) scale(.96);transform-origin:var(--oo,50% 100%);
  transition:opacity .4s var(--ease),transform .45s var(--ease);pointer-events:none;
}
.ll-card.open{opacity:1;transform:none;pointer-events:auto}
.ll-card .ll-c-logo{display:flex;align-items:center;justify-content:center;min-height:56px;margin-bottom:10px;padding:9px 12px;border-radius:7px;background:rgba(245,244,240,.96);box-shadow:inset 0 0 0 1px rgba(11,11,12,.06)}
.ll-card .ll-c-logo img{filter:drop-shadow(0 1px 6px rgba(0,0,0,.35))}
.ll-card .ll-c-name{display:block;font-weight:600;font-size:15px;letter-spacing:-.01em;color:var(--ll-ivory);line-height:1.2}
.ll-card .ll-c-cat{display:block;margin-top:3px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--bc,#C97E46)}
.ll-card .ll-c-desc{display:block;margin-top:8px;font-size:12.5px;line-height:1.5;color:rgba(245,244,240,.66)}
/* hint bottom-left, fades in after the opening */
.ll-hint{
  position:absolute;z-index:5;left:20px;bottom:16px;margin:0;pointer-events:none;
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:rgba(122,122,130,.85);
  opacity:0;transition:opacity 1.1s var(--ease);
}
.ll-hint::before{content:"";display:inline-block;width:26px;height:1px;background:rgba(201,126,70,.7);margin-right:8px;vertical-align:middle}
#livingLegacy.ll-done .ll-hint{opacity:1}
/* controls bottom-right */
.ll-ctrl{position:absolute;z-index:5;right:14px;bottom:12px;display:flex;gap:6px}
.ll-btn{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(245,244,240,.72);padding:7px 12px;border-radius:99px;
  border:1px solid rgba(245,244,240,.16);background:rgba(20,20,24,.4);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.ll-btn:hover,.ll-btn:focus-visible{color:var(--copper2);border-color:rgba(228,162,102,.55)}
/* bottom-centre signature + CTA */
.ll-cta{
  position:absolute;z-index:5;left:50%;bottom:36px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:5px;pointer-events:none;white-space:nowrap;
}
.ll-cta-line{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--ll-ivory);opacity:.92}
.ll-cta-link{
  pointer-events:auto;font-size:12.5px;font-weight:500;color:var(--copper2);
  transition:color .35s var(--ease);
}
.ll-cta-link span{display:inline-block;transition:transform .4s var(--ease)}
.ll-cta-link:hover,.ll-cta-link:focus-visible{color:#F0BE8E}
.ll-cta-link:hover span{transform:translateX(4px)}
/* quiet collapsible index of the twenty projects (under the panel) */
.ll-list{display:none;margin-top:18px;max-width:1180px}
.ll-list summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.ll-list summary::-webkit-details-marker{display:none}
.ll-list summary::before{content:"";width:7px;height:7px;border-right:1.5px solid var(--acc);border-bottom:1.5px solid var(--acc);transform:rotate(-45deg);transition:transform .35s var(--ease)}
.ll-list[open] summary::before{transform:rotate(45deg)}
.ll-list summary:hover{color:var(--ink)}
.ll-list ul{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2px 28px}
.ll-list li{display:flex;align-items:center;gap:14px;padding:11px 4px;border-top:1px solid var(--hair)}
.ll-li-logo{flex:0 0 64px;display:flex;align-items:center}
.ll-li-logo img{max-width:64px;height:auto}
.ll-li-txt{display:flex;flex-direction:column;min-width:0}
.ll-li-txt b{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.ll-li-txt i{font-style:normal;font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.ll-li-txt span{font-size:12px;color:var(--ink2);margin-top:3px}
.ll-li-arc{margin-left:auto;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);opacity:.8}
/* reduced-motion / no-GSAP: quiet list is offered; artwork is the static full render */
.no-anim .ll-list{display:block}
.no-anim .ll-hint,.no-anim .ll-ctrl{display:none}
.no-anim .ll-card,.no-anim .ll-node::after{transition:none}
.no-anim #livingLegacy.ll-rest .ll-ember,.no-anim #livingLegacy.ll-rest .ll-dot{animation:none}
@media (max-width:720px){.ll-list{display:block}}
@media (max-width:900px){
  .ll-card{width:196px}
  .ll-cta-line{font-size:9.5px;letter-spacing:.18em}
}
@media (max-width:420px){
  .ll-concept{max-width:78%;font-size:9px}
  .ll-cta{left:auto;right:14px;transform:none;align-items:flex-end;bottom:40px}
  .ll-cta-line{font-size:9px;letter-spacing:.14em}
  .ll-hint{bottom:12px}
}

/* ==================== v21 — LAB SECOND TRIO ==================== */
/* shared */
.l21-lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,244,240,.55);margin:0 0 10px}
.l21 .l19-hint{position:absolute;bottom:14px;right:20px;left:auto}
.p9 .l19-hint{top:12px;bottom:auto;right:16px} /* keep the floor clear for the pile */
/* ---------- E7 — Your Word, Engineered ---------- */
.pt{padding:0}
.pt-bar{display:flex;align-items:flex-end;gap:16px 22px;flex-wrap:wrap;padding:20px 22px 18px;border-bottom:1px solid rgba(245,244,240,.09)}
.pt-field{display:flex;flex-direction:column;gap:8px}
.pt-lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,244,240,.55)}
.pt-field input{background:#141416;border:1px solid rgba(245,244,240,.16);border-radius:12px;color:#F5F4F0;font-family:var(--disp);font-weight:500;font-size:17px;letter-spacing:-.01em;padding:12px 16px;min-width:230px;outline:none;transition:border-color .25s}
.pt-field input:focus-visible{border-color:var(--acc)}
.pt-presets{display:flex;gap:8px;flex-wrap:wrap}
.pt-pre{background:transparent;border:1px solid rgba(245,244,240,.18);color:rgba(245,244,240,.75);border-radius:999px;padding:9px 16px;font-size:13px;font-weight:500;cursor:pointer;min-height:38px;transition:border-color .25s,color .25s,background .25s}
.pt-pre:hover{border-color:rgba(245,244,240,.4);color:#F5F4F0}
.pt-pre.on{background:var(--acc);border-color:var(--acc);color:#fff}
.pt-count{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:rgba(245,244,240,.45)}
.pt-canvas{display:block;width:100%;height:clamp(360px,52vh,540px);cursor:crosshair;touch-action:pan-y}
@media (max-width:640px){.pt-field input{min-width:0;width:100%}.pt-field{width:100%}.pt-count{margin-left:0}}
/* ---------- E8 — The Palette Engine ---------- */
.pe{padding:0 0 22px}
.pe-top{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:22px;padding:22px 22px 20px}
.pe-inputs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pe-in{display:flex;flex-direction:column;gap:8px;background:#141416;border:1px solid rgba(245,244,240,.12);border-radius:14px;padding:12px;cursor:pointer}
.pe-in input{width:100%;height:46px;border:0;border-radius:9px;background:none;padding:0;cursor:pointer}
.pe-in input::-webkit-color-swatch-wrapper{padding:0}
.pe-in input::-webkit-color-swatch{border:0;border-radius:9px}
.pe-in input::-moz-color-swatch{border:0;border-radius:9px}
.pe-in span{font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:rgba(245,244,240,.6)}
.pe-in b{font-family:var(--mono);font-size:12px;font-weight:500;color:#F5F4F0}
.pe-presets{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.pe-pre{background:transparent;border:1px solid rgba(245,244,240,.18);color:rgba(245,244,240,.75);border-radius:999px;padding:8px 15px;font-size:12.5px;font-weight:500;cursor:pointer;min-height:36px;transition:border-color .25s,color .25s,background .25s}
.pe-pre:hover{border-color:rgba(245,244,240,.4);color:#F5F4F0}
.pe-pre.on{background:#F5F4F0;border-color:#F5F4F0;color:#0C0C0E}
.pe-note{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:rgba(245,244,240,.5)}
/* the live re-skinned UI */
.pe-ui{background:var(--pe-bg,#FAF9F7);border-radius:18px;padding:clamp(20px,2.6vw,30px);display:flex;flex-direction:column;align-items:flex-start;gap:13px;border:1px solid rgba(11,11,12,.07);transition:background .4s ease}
.pe-badge{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--pe-acc-soft,rgba(191,106,48,.14));color:var(--pe-acc,#BF6A30);border-radius:999px;padding:6px 12px}
.pe-ui h3{margin:0;font-family:var(--disp);font-weight:500;font-size:clamp(1.35rem,2.2vw,1.8rem);letter-spacing:-.025em;line-height:1.08;color:var(--pe-ink,#0B0B0C);transition:color .4s ease}
.pe-ui p{margin:0;font-size:14px;line-height:1.55;color:color-mix(in srgb,var(--pe-ink,#0B0B0C) 66%,transparent);max-width:44ch}
.pe-ui-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.pe-btn{border:0;border-radius:999px;padding:12px 22px;font-family:var(--disp);font-weight:500;font-size:14px;cursor:pointer;min-height:46px;background:var(--pe-acc,#BF6A30);color:var(--pe-acc-ink,#fff);transition:background .4s ease,color .4s ease,transform .25s var(--ease)}
.pe-btn:hover{transform:translateY(-2px)}
.pe-btn--ghost{background:transparent;color:var(--pe-ink,#0B0B0C);border:1px solid color-mix(in srgb,var(--pe-ink,#0B0B0C) 20%,transparent)}
/* ramps */
.pe-ramps{padding:0 22px}
.pe-strip{display:flex;gap:5px;margin-bottom:16px}
.pe-sw{position:relative;flex:1;height:54px;border-radius:9px;display:block}
.pe-sw i{position:absolute;left:6px;bottom:5px;font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:rgba(255,255,255,.75);text-shadow:0 1px 3px rgba(0,0,0,.35)}
.pe-sw:nth-child(n+6) i{color:rgba(11,11,12,.55);text-shadow:none}
/* pairings */
.pe-pairs{padding:4px 22px 0}
.pe-pair-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.pe-pair{background:#141416;border:1px solid rgba(245,244,240,.11);border-radius:13px;padding:10px;display:flex;flex-direction:column;gap:9px}
.pe-aa{display:flex;align-items:center;justify-content:center;height:52px;border-radius:8px;font-family:var(--disp);font-weight:600;font-size:19px;letter-spacing:-.01em}
.pe-pair-b b{display:block;font-size:12px;font-weight:600;color:#F5F4F0;letter-spacing:-.01em}
.pe-ratio{font-family:var(--mono);font-size:10.5px;color:rgba(245,244,240,.5)}
.pe-verdict{align-self:flex-start;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:4px 9px}
.pe-verdict.ok3{background:rgba(52,199,123,.16);color:#34C77B}
.pe-verdict.ok2{background:rgba(110,190,255,.16);color:#6EBEFF}
.pe-verdict.ok1{background:rgba(255,196,79,.16);color:#FFC44F}
.pe-verdict.bad{background:rgba(255,96,96,.16);color:#FF7070}
@media (max-width:900px){.pe-top{grid-template-columns:1fr}.pe-pair-grid{grid-template-columns:repeat(2,1fr)}}
/* ---------- E9 — Interfaces with Mass ---------- */
.p9{padding:0}
.p9-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 22px;border-bottom:1px solid rgba(245,244,240,.09)}
.p9-bar .l21-lab{margin:0 auto 0 0}
.p9-ctl{display:flex;gap:8px;flex-wrap:wrap}
.p9-g{background:transparent;border:1px solid rgba(245,244,240,.18);color:rgba(245,244,240,.75);border-radius:999px;padding:9px 16px;font-size:13px;font-weight:500;cursor:pointer;min-height:38px;transition:border-color .25s,color .25s,background .25s}
.p9-g:hover{border-color:rgba(245,244,240,.4);color:#F5F4F0}
.p9-g.on{background:#F5F4F0;border-color:#F5F4F0;color:#0C0C0E}
.p9-reset{background:transparent;border:0;color:rgba(245,244,240,.6);font-size:13px;font-weight:500;cursor:pointer;padding:9px 8px;min-height:38px}
.p9-reset:hover{color:#F5F4F0}
.p9-stage{position:relative;height:clamp(430px,56vh,620px);overflow:hidden}
.p9-frag{position:absolute;left:0;top:0;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;will-change:transform;z-index:1}
.p9-frag.held{cursor:grabbing;z-index:6;filter:drop-shadow(0 22px 30px rgba(0,0,0,.45))}
.p9-frag:focus-visible{outline:2px solid var(--acc);outline-offset:4px;border-radius:14px}
.p9-frag.pop{animation:p9pop .5s var(--ease)}
@keyframes p9pop{35%{scale:1.14}}
.p9-card{background:#FDFCFB;border-radius:14px;padding:12px 16px;box-shadow:0 14px 30px -14px rgba(0,0,0,.5);min-width:150px}
.p9-card b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:#0B0B0C}
.p9-card span{font-size:12px;color:#6B6B72}
.p9-note{border-left:3px solid var(--coral)}
.p9-btn{display:inline-block;background:#0B0B0C;color:#fff;border-radius:999px;padding:12px 20px;font-size:13.5px;font-weight:500;box-shadow:0 14px 30px -14px rgba(0,0,0,.55)}
.p9-chip{display:inline-flex;align-items:center;gap:8px;background:#FDFCFB;border-radius:999px;padding:9px 15px;font-size:12.5px;font-weight:500;color:#0B0B0C;box-shadow:0 12px 26px -14px rgba(0,0,0,.5)}
.p9-chip i{width:8px;height:8px;border-radius:50%;background:#34C77B}
.p9-tog{display:inline-block;width:48px;height:28px;border-radius:999px;background:var(--acc);position:relative;box-shadow:0 12px 26px -14px rgba(240,78,35,.7)}
.p9-tog i{position:absolute;right:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff}
.p9-avs{display:inline-flex}
.p9-avs i{width:30px;height:30px;border-radius:50%;border:2.5px solid #0C0C0E;margin-left:-9px}
.p9-avs i:first-child{margin-left:0;background:linear-gradient(135deg,#FF9A66,#B43816)}
.p9-avs i:nth-child(2){background:linear-gradient(135deg,#6EBEFF,#2E4E8E)}
.p9-avs i:nth-child(3){background:linear-gradient(135deg,#E8D27E,#8A6A2E)}
.p9-bar{display:inline-block;width:170px;height:10px;border-radius:999px;background:rgba(245,244,240,.14);position:relative;overflow:hidden}
.p9-bar i{position:absolute;left:0;top:0;bottom:0;width:62%;border-radius:999px;background:linear-gradient(90deg,var(--coral),var(--acc))}
.p9-search{display:inline-flex;align-items:center;gap:9px;background:#FDFCFB;border-radius:12px;padding:11px 15px;font-size:13px;color:#83868C;box-shadow:0 12px 26px -14px rgba(0,0,0,.5)}
.p9-search svg{width:14px;height:14px}
.p9-rate{font-size:15px;letter-spacing:2px}
.p9-rate i{font-style:normal;color:rgba(245,244,240,.25)}
.p9-rate i.on{color:#FFB44F}
.p9-pill{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#F5F4F0;border:1px solid rgba(245,244,240,.3);border-radius:999px;padding:8px 13px}
/* ---------- card teasers ---------- */
.xp-teaser--pe,.xp-teaser--p9{flex-direction:column;gap:12px;padding:26px 20px 40px}
.pe-tease{display:flex;flex-direction:column;gap:10px;align-items:center}
.pe-tease-strip{width:min(230px,80%);height:14px;border-radius:7px;background:linear-gradient(90deg,#2A1508,#7A3E14,#BF6A30,#D89A63,#F5E3D0,#FBFBFA);animation:peHue 9s ease-in-out infinite alternate}
.pe-tease-row{display:flex;gap:6px}
.pe-tease-chip,.pe-tease-bad{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.06em;border-radius:999px;padding:4px 8px}
.pe-tease-chip.ok2{background:rgba(110,190,255,.16);color:#6EBEFF}
.pe-tease-chip.ok3{background:rgba(52,199,123,.16);color:#34C77B}
.pe-tease-bad{background:rgba(255,96,96,.14);color:#FF7070}
@keyframes peHue{to{filter:hue-rotate(70deg)}}
.p9-tease{display:flex;gap:10px;align-items:center;justify-content:center}
.p9-tease-frag{display:inline-flex;align-items:center;gap:7px;background:#FDFCFB;color:#0B0B0C;border-radius:999px;padding:9px 15px;font-size:12px;font-weight:600;box-shadow:0 14px 26px -14px rgba(0,0,0,.55);animation:p9tease 4.4s var(--ease) infinite alternate}
.p9-tease-frag.b{animation-delay:.5s}
.p9-tease-frag.c{animation-delay:1s;color:#FFB44F}
.p9-tease-frag i{font-style:normal}
.p9-tease-frag .dot{width:7px;height:7px;border-radius:50%;background:#34C77B}
@keyframes p9tease{from{transform:translateY(-5px) rotate(-2deg)}to{transform:translateY(5px) rotate(2deg)}}
@media(prefers-reduced-motion:reduce){
  .pe-tease-strip,.p9-tease-frag{animation:none}
  .p9-frag{cursor:default}
}

/* ==================== v24 — THE ATLAS ROW (offices) ====================
   Six illustrated city chips: each landmark stroke-draws on hover/focus,
   every chip ticks its real local time. Toronto keeps the maple-leaf
   rain (.leaf-btn → core.js leafRain). */
.ochip.at{gap:11px;padding:10px 18px 10px 12px;cursor:default;align-items:center}
.ochip.at.leaf-btn{padding:8px 18px 8px 12px;cursor:pointer}
.at-ill{width:30px;height:30px;flex:none;display:block;transition:transform .5s var(--ease)}
.at-ill svg{width:100%;height:100%;display:block}
/* the landmark sits faint by default — always visible — and comes alive
   (full strength + a small turn) on hover/focus */
.at-ill path,.at-ill circle{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.32;transition:opacity .4s ease}
.ochip.at:hover .at-ill,.ochip.at:focus-visible .at-ill{transform:scale(1.14) rotate(-3deg)}
.ochip.at:hover .at-ill path,.ochip.at:hover .at-ill circle,
.ochip.at:focus-visible .at-ill path,.ochip.at:focus-visible .at-ill circle{opacity:1}
.at-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;text-align:left}
.at-txt .hq{font-family:var(--disp);font-weight:500;font-size:14.5px;letter-spacing:-.01em;color:inherit}
.at-time{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--muted);margin-top:2px;transition:color .3s;font-variant-numeric:tabular-nums}
.ochip.at:hover .at-time,.ochip.at:focus-visible .at-time{color:var(--ink)}
.ochip.at:hover,.ochip.at:focus-visible{border-color:var(--ink);color:var(--ink);transform:translateY(-3px);box-shadow:0 14px 28px -18px rgba(11,11,12,.3)}
.ochip.at.leaf-btn:hover,.ochip.at.leaf-btn:focus-visible{border-color:var(--acc);color:var(--acc)}
.ochip.at.leaf-btn:hover .at-time,.ochip.at.leaf-btn:focus-visible .at-time{color:var(--acc)}
@media (prefers-reduced-motion:reduce){
  .at-ill,.at-ill path,.at-ill circle{transition:none}
  .at-ill path,.at-ill circle{opacity:.9}
  .ochip.at:hover .at-ill{transform:none}
  .ochip.at:hover,.ochip.at:focus-visible{transform:none;box-shadow:none}
}

/* v29 — active nav indicator: small rust dot, consistent baseline (eSora Gives rebrand) */
#nav .links a{position:relative}
#nav .links a.active::after{content:"";position:absolute;left:50%;bottom:-7px;width:4px;height:4px;border-radius:50%;background:#B6481B;transform:translateX(-50%)}