:root{
  --bg:#08070d;--ink:#f4f2ee;--muted:rgba(244,242,238,.5);--line:rgba(244,242,238,.12);
  --serif:"Bricolage Grotesque","Inter",sans-serif;--sans:"Inter",-apple-system,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);--pad:clamp(18px,3vw,40px);--violet:#7b6cff;
  /* data-viz accent palette */
  --acc-violet:#7b6cff;--acc-red:#ad3b35;--acc-coral:#f1573c;--acc-blue:#5e8bee;--acc-teal:#46b3a4;--acc-lime:#d9f56a;--acc-track:#d6d6d4;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
@media(hover:hover) and (pointer:fine){body{cursor:none}}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.ser{font-family:var(--serif);font-weight:700}

/* NAV */
header{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;justify-content:space-between;padding:16px var(--pad);font-size:.82rem}
header .brand{font-family:var(--serif);font-weight:700;font-size:1.35rem;letter-spacing:-.01em;white-space:nowrap;display:inline-flex;align-items:center}
header .brand img{display:block;height:22px;width:auto}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:4px;width:40px;height:36px;border:1px solid var(--line);border-radius:9px;background:rgba(18,16,28,.4);cursor:pointer}
.hamburger span{display:block;height:1.5px;width:18px;margin:0 auto;background:var(--ink);transition:.3s var(--ease)}
.hamburger.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:88;background:rgba(8,7,13,.97);backdrop-filter:blur(12px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;padding:0 var(--pad);transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.mobile-menu.open{transform:none;opacity:1;pointer-events:auto}
.mobile-menu a{font-family:var(--serif);font-weight:800;font-size:clamp(2rem,9vw,3.4rem);letter-spacing:-.02em;color:rgba(244,242,238,.85);padding:6px 0}
.mobile-menu a.active{color:var(--violet)}
.topnav{display:flex;gap:5px}
.topnav a{padding:7px 14px;border-radius:999px;font-size:.8rem;font-weight:500;color:var(--muted);background:rgba(18,16,28,.4);backdrop-filter:blur(10px);border:1px solid rgba(244,242,238,.05);transition:.3s var(--ease)}
.topnav a:hover,.topnav a.active{color:var(--ink);background:rgba(74,66,120,.5);border-color:rgba(123,108,255,.4)}
header .right{display:flex;align-items:center;gap:9px;color:var(--muted)}
header .right .clock{font-variant-numeric:tabular-nums;margin-right:4px}
header .right a{border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.78rem;font-weight:500;color:var(--muted);background:rgba(18,16,28,.4);transition:.3s var(--ease)}
header .right a:hover{color:var(--ink);background:rgba(74,66,120,.5);border-color:rgba(123,108,255,.4)}
.topline{position:fixed;top:0;left:0;right:0;height:1px;background:var(--line);z-index:89}
@media(max-width:680px){
  header{background:rgba(20,18,30,.55);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border-bottom:1px solid rgba(244,242,238,.08);box-shadow:0 8px 30px rgba(0,0,0,.35)}
  .topnav{display:none}
  header .right{display:none}
  .hamburger{display:flex;order:-1}
  header .brand{position:absolute;left:50%;transform:translateX(-50%)}
}
/* show full H (letterboxed) whenever the viewport is portrait, on pure black */
@media(orientation:portrait){.hero #bgvid{object-fit:contain}.hero #aurora{display:none}.hero{background:#131313}}

/* HERO */
.hero{position:relative;height:100vh;min-height:640px;overflow:hidden}
#aurora{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
#bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
#bgvid+.hero-logo{display:none}
.hero-inner{position:relative;z-index:5;height:100%}
.hero-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(62vh,60vw);aspect-ratio:1/1;z-index:2;pointer-events:none;background:linear-gradient(125deg,#15102b 0%,#6a5cf0 26%,#cabfff 47%,#2a2150 65%,#7b6cff 100%);background-size:280% 280%;-webkit-mask:url("images/00-home/LOGO%20black_.png") center/contain no-repeat;mask:url("images/00-home/LOGO%20black_.png") center/contain no-repeat;animation:logoflow 10s ease-in-out infinite;filter:drop-shadow(0 0 70px rgba(123,108,255,.45));transition:opacity .7s var(--ease)}
@keyframes logoflow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero-title{position:absolute;left:0;right:0;bottom:15vh;text-align:center;z-index:6;pointer-events:none}
.hero-title h1{font-family:var(--serif);font-weight:800;line-height:1;letter-spacing:-.02em;margin:0 auto}
.hero-title h1.tag{font-size:clamp(1.4rem,2.5vw,2.5rem);max-width:42ch;line-height:1.2}
@media(max-width:760px){.hero-title{left:var(--pad);text-align:left}.hero-title h1.tag{max-width:none}}

/* sticky side nav (scroll-spy) */
.sidenav{position:fixed;left:var(--pad);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:5px;z-index:80}
.navpill{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;font-family:var(--sans);font-size:.8rem;font-weight:500;letter-spacing:.01em;color:rgba(244,242,238,.55);cursor:pointer;background:rgba(18,16,28,.4);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);border:1px solid rgba(244,242,238,.06);width:max-content;transition:color .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.navpill:hover{color:#fff;border-color:rgba(123,108,255,.5);transform:translateX(4px)}
.navpill.on{color:#fff;border-color:var(--violet)}
.navpill .dot{display:none}

/* project sections */
.proj{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(30px,5vw,80px);padding:13vh var(--pad) 13vh calc(var(--pad) + 170px);border-top:1px solid var(--line);position:relative}
.proj:nth-child(even){background:rgba(255,255,255,.018)}
.proj-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.proj.has-bg::after{content:"";position:absolute;inset:0;background:rgba(8,7,13,.66);z-index:1}
#sec-r365-ee-deductions .proj-bg{filter:brightness(.62) saturate(.92)}
.proj.has-bg .proj-text,.proj.has-bg .proj-media{position:relative;z-index:2}
.proj-eyebrow{font-family:var(--sans);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.proj h2{font-family:var(--serif);font-weight:800;font-size:clamp(2.4rem,5vw,4.6rem);line-height:.95;letter-spacing:-.02em;margin-bottom:18px}
.proj p{color:rgba(244,242,238,.7);font-size:1.02rem;line-height:1.55;max-width:46ch;margin-bottom:18px}
.proj-deliver{color:var(--muted);font-size:.84rem;line-height:1.85;margin-bottom:28px}
.proj-media{overflow:hidden;border-radius:14px;background:#15131d}
.proj-media img{width:100%;display:block;transition:transform 1.1s var(--ease)}
.proj:hover .proj-media img{transform:scale(1.04)}
.proj .cta{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(244,242,238,.4);border-radius:999px;padding:12px 24px;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;transition:.3s var(--ease)}
.proj .cta:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
@media(max-width:860px){.sidenav{display:none}.proj{grid-template-columns:1fr;padding:14vh var(--pad);gap:24px}}

/* PAGE intro */
.pagehead{padding:clamp(120px,18vh,200px) var(--pad) clamp(30px,5vh,60px)}
.pagehead h1{font-family:var(--serif);font-weight:800;font-size:clamp(2.6rem,7vw,6rem);line-height:.95;letter-spacing:-.02em;max-width:18ch}
.pagehead h1 .em{font-style:normal}
.pagehead p{margin-top:20px;max-width:46ch;color:var(--muted);font-size:1rem;line-height:1.55}

/* SERVICES */
.svc{border-top:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;padding:clamp(40px,8vh,90px) var(--pad);border-bottom:1px solid var(--line);position:relative;transition:background .5s var(--ease)}
.svc-row:nth-child(odd){background:rgba(255,255,255,.015)}
.svc-row h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.02;letter-spacing:-.015em;max-width:14ch}
.svc-row p{justify-self:end;max-width:42ch;color:var(--muted);font-size:.96rem;line-height:1.55}
@media(max-width:760px){.svc-row{grid-template-columns:1fr;gap:14px}.svc-row p{justify-self:start}}

/* WORK */
.work{padding:0 var(--pad) 0}
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding-bottom:18px;font-size:.78rem}
.filters .lbl{color:var(--muted);margin-right:6px}
.filters .chip{border:1px solid var(--line);border-radius:999px;padding:7px 15px;cursor:pointer;transition:.3s var(--ease)}
.filters .chip:hover,.filters .chip.on{background:var(--ink);color:var(--bg)}
.wrow{border-bottom:1px solid var(--line);cursor:pointer;margin:0 calc(var(--pad)*-1);padding:0 var(--pad);transition:background .35s var(--ease),opacity .4s var(--ease)}
.wrow:hover{background:rgba(255,255,255,.045)}
.wtop{display:grid;grid-template-columns:0.9fr 1.5fr 2.4fr 1.2fr auto;align-items:start;gap:30px;padding:30px 0}
.wrow .wname{font-weight:600;font-size:1.05rem;transition:color .3s var(--ease)}
.wrow .wdesc{color:var(--muted);font-size:.94rem;line-height:1.5}
.wrow .wdeliver{color:var(--muted);font-size:.86rem;line-height:1.8}
.wrow .wcase{font-size:.84rem;text-decoration:underline;text-underline-offset:4px;white-space:nowrap;opacity:.6;transition:opacity .3s var(--ease)}
.wexpand{grid-column:3;max-height:0;overflow:hidden;border-radius:12px;transition:max-height .55s var(--ease)}
.wexpand .wimg{display:block;width:100%;height:auto;border-radius:12px;background:#15131d;opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .55s var(--ease)}
.wrow:hover .wexpand{max-height:520px}
.wrow:hover .wexpand .wimg{opacity:1;transform:none}
.wrow:hover .wcase{opacity:1}
.wrow:hover .wname{color:#fff}
.work.faded .wrow:not(.match){opacity:.25}
@media(max-width:860px){
  .wrow{margin:0;padding:26px 0}
  .wrow:hover{background:none}
  .wtop{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:0}
  .wexpand{grid-column:auto;max-height:none;overflow:visible;order:1;margin:16px 0 0;width:100%}
  .wexpand .wimg{opacity:1;transform:none}
  .wrow .wcase{display:inline-block;opacity:.85;margin-top:10px}
}

/* ABOUT (Me) */
.about{display:grid;grid-template-columns:auto minmax(0,440px);justify-content:center;align-items:center;gap:clamp(36px,5vw,80px);padding:clamp(120px,18vh,190px) var(--pad) clamp(60px,10vh,120px)}
.about-portrait img{width:100%;max-width:520px;filter:grayscale(1);border-radius:6px}
.about-copy h1{font-family:var(--serif);font-weight:800;font-size:clamp(2.4rem,5vw,4rem);letter-spacing:-.02em;margin-bottom:22px}
.about-copy p{color:rgba(244,242,238,.72);font-size:1.05rem;line-height:1.65;margin-bottom:16px;max-width:48ch}
.about-meta{display:flex;gap:60px;margin-top:30px;flex-wrap:wrap}
.about-meta h4{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.about-meta li{list-style:none;font-size:.96rem;line-height:1.9}
.about-cta{display:inline-flex;align-items:center;gap:8px;margin-top:34px;border:1px solid rgba(244,242,238,.4);border-radius:999px;padding:13px 26px;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;transition:.3s var(--ease)}
.about-cta:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
@media(max-width:820px){.about{grid-template-columns:1fr;gap:30px}.about-portrait img{max-width:360px}}

/* CASE STUDY (dark) */
.cs-hero{max-width:1100px;margin:0 auto;padding:clamp(120px,18vh,200px) var(--pad) 0}
.cs-hero .eyebrow{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.cs-hero h1{font-family:var(--serif);font-weight:800;font-size:clamp(2.6rem,8vw,6.5rem);line-height:.92;letter-spacing:-.02em}
.cs-hero .sub{margin-top:20px;font-family:var(--serif);font-weight:400;font-size:clamp(1.2rem,2vw,1.8rem);line-height:1.2;color:rgba(244,242,238,.82);max-width:30ch}
.cs-hero .lede{margin-top:22px;font-size:1.05rem;line-height:1.6;color:rgba(244,242,238,.6);max-width:62ch}
.cs-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1100px;margin:clamp(40px,7vh,70px) auto 0;padding:24px var(--pad);border-bottom:1px solid var(--line)}
.cs-meta .k{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.cs-meta .v{font-size:.96rem}
.cs-fig{max-width:1100px;margin:clamp(30px,5vh,50px) auto;padding:0 var(--pad)}
.cs-fig img{width:100%;border-radius:12px;background:#15131d}
.cs-sec{max-width:1100px;margin:0 auto;padding:clamp(50px,9vh,100px) var(--pad);border-top:1px solid var(--line)}
.cs-sec .lbl{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:26px;display:flex;gap:10px}
.cs-sec .lbl b{color:var(--ink);font-weight:600}
.cs-sec h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.02;letter-spacing:-.015em;margin-bottom:22px;max-width:22ch}
.cs-sec p{color:rgba(244,242,238,.72);font-size:1.05rem;line-height:1.6;max-width:62ch;margin-bottom:16px}
.cs-sub{font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:.78rem;color:var(--muted);margin:30px 0 4px}
.cs-li{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:20px 0;border-top:1px solid var(--line)}
.cs-lis>.cs-li:first-child,.cs-lis>.cs-li--lab:first-child{border-top:none}
.cs-li .n{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.cs-li h4{font-size:1.05rem;margin-bottom:6px}
.cs-li p{font-size:.96rem;margin:0;color:rgba(244,242,238,.6)}
.cs-shots{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:26px}
.cs-shots.full{grid-template-columns:1fr}
.cs-shots img{width:100%;border-radius:10px;background:transparent}
.cs-callout{padding:0;margin:30px 0 8px;max-width:none;border:none}
.cs-callout .cs-qmark{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:5.5rem;line-height:1;color:var(--violet);height:.5em;overflow:hidden;margin-bottom:18px}
.cs-callout .cs-quote{font-family:var(--serif);font-style:italic;font-weight:700;font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.1;letter-spacing:-.015em;color:var(--ink);max-width:26ch;margin:0 0 34px;border:none;padding:0}
.cs-callout .cs-qdesc{font-family:var(--sans);font-weight:400;font-size:1.02rem;line-height:1.65;color:rgba(244,242,238,.55);max-width:92ch;margin:0}
/* highlighted example card */
.cs-example{border:1px solid var(--line);border-left:3px solid var(--violet);border-radius:14px;padding:clamp(26px,4vw,42px);margin:30px 0;background:rgba(123,108,255,.05);max-width:none}
.cs-example .cl{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--violet);margin-bottom:18px}
.cs-example .lead{font-family:var(--serif);font-weight:700;font-size:clamp(1.25rem,2vw,1.7rem);line-height:1.15;letter-spacing:-.01em;color:var(--ink);margin-bottom:18px;max-width:30ch}
.cs-example p{font-size:1rem;line-height:1.6;color:rgba(244,242,238,.62);max-width:60ch;margin:0}
.cs-example .em{font-style:italic;color:rgba(244,242,238,.82);border-top:1px solid var(--line);margin-top:22px;padding-top:22px;max-width:58ch}
.cs-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:26px 0}
.cs-stat{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.022);padding:30px 24px}
.cs-stat .n{font-family:var(--serif);font-weight:800;font-size:clamp(2rem,4vw,3.2rem);line-height:1;color:var(--violet)}
.cs-stat .sl{color:rgba(244,242,238,.6);font-size:.92rem;margin-top:14px;line-height:1.5}
.cs-next{max-width:1100px;margin:0 auto;padding:clamp(34px,6vh,64px) var(--pad);border-top:1px solid var(--line);display:flex;justify-content:flex-end}
.cs-next-btn{display:inline-flex;align-items:center;gap:14px;padding:13px 22px;background:transparent;border:1px solid var(--line);border-radius:999px;cursor:pointer;color:var(--ink);font:inherit;transition:background .3s var(--ease),border-color .3s var(--ease)}
.cs-next-btn .nlbl{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cs-next-btn .nt{font-family:var(--serif);font-weight:700;font-size:1.05rem;letter-spacing:-.01em}
.cs-next-btn .narr{font-size:1.05rem;color:var(--muted);transition:transform .3s var(--ease),color .3s}
.cs-next-btn:hover{background:rgba(255,255,255,.05);border-color:rgba(244,242,238,.25)}
.cs-next-btn:hover .nt,.cs-next-btn:hover .narr{color:var(--ink)}
.cs-next-btn:hover .narr{transform:translateX(4px)}
/* hero brand logo */
.cs-hero .cs-brand{height:68px;width:auto;display:block;margin-bottom:24px;opacity:.95}
/* label rows — stacked (label eyebrow on top, body below) */
.cs-li--lab{display:block;padding:22px 0;border-top:1px solid var(--line)}
.cs-li--lab .lab{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.cs-li--lab .bd h4{font-size:1.12rem;margin-bottom:0;max-width:62ch}
.cs-li--lab .bd .more p{font-size:.96rem;margin:8px 0 0;color:rgba(244,242,238,.6);max-width:62ch}
.cs-li-shot{margin-top:16px;max-width:560px}
.cs-li-shot{max-width:620px}
.cs-li-shot img{width:100%;height:auto;display:block;border-radius:10px;background:transparent}
.cs-li-shot--wide{max-width:100%}
.cs-li-shot--wide img{border-radius:0}
@media(max-width:760px){
 .cs-li-shot--wide{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:10px;padding:10px;scrollbar-width:thin}
 .cs-li-shot--wide img{min-width:680px}
}
/* hover-to-reveal rows (Brief · why it matters) */
.cs-lis--expand .cs-li--lab{cursor:pointer;border-radius:10px;padding:22px 16px;margin:0 -16px;transition:background .3s var(--ease)}
.cs-lis--expand .cs-li--lab .more{max-height:0;overflow:hidden;opacity:0;transition:max-height .55s var(--ease),opacity .4s var(--ease)}
.cs-lis--expand .cs-li--lab:hover{background:rgba(255,255,255,.045)}
.cs-lis--expand .cs-li--lab:hover .more{max-height:160px;opacity:1}
/* collapsible flow rows — title only, reveal detail + image on hover/tap */
.cs-fl{border-top:1px solid var(--line);cursor:pointer;border-radius:14px;padding:0 18px;margin:0 -18px;transition:background .3s var(--ease),border-color .3s var(--ease)}
.cs-lis--flow>.cs-fl:first-child{border-top:none}
.cs-fl-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 0}
.cs-fl-t{font-size:1.12rem;font-weight:600;letter-spacing:-.01em}
.cs-fl-ico{position:relative;width:15px;height:15px;flex:none;opacity:.55;transition:opacity .3s}
.cs-fl-ico::before,.cs-fl-ico::after{content:"";position:absolute;background:var(--ink);transition:transform .35s var(--ease)}
.cs-fl-ico::before{top:6.5px;left:0;width:15px;height:2px}
.cs-fl-ico::after{top:0;left:6.5px;width:2px;height:15px}
.cs-fl-detail{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .5s var(--ease),opacity .45s var(--ease)}
.cs-fl-in{overflow:hidden;min-height:0}
.cs-fl-pad{padding:2px 0 26px}
.cs-fl-pad h4{font-size:1.02rem;font-weight:500;margin:0;max-width:64ch;color:rgba(244,242,238,.82);line-height:1.5}
.cs-fl-pad>p{font-size:.96rem;margin:0;color:rgba(244,242,238,.6);max-width:64ch;line-height:1.5}
.cs-fl-pad .cs-li-shot{margin:18px 0 0}
.cs-fl.open{background:rgba(255,255,255,.045);border-top-color:transparent}
.cs-fl.open .cs-fl-detail{grid-template-rows:1fr;opacity:1}
.cs-fl.open .cs-fl-ico{opacity:1}
.cs-fl.open .cs-fl-ico::after{transform:rotate(90deg)}
/* hover-reveal only on real pointer devices; touch uses tap-toggle */
@media (hover:hover){
 .cs-fl:hover{background:rgba(255,255,255,.045);border-top-color:transparent}
 .cs-fl:hover .cs-fl-detail{grid-template-rows:1fr;opacity:1}
 .cs-fl:hover .cs-fl-ico{opacity:1}
 .cs-fl:hover .cs-fl-ico::after{transform:rotate(90deg)}
}
/* outcome highlight cards */
.cs-ocards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.cs-ocard{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.022);padding:26px 24px}
.cs-ocard .cl{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.cs-ocard .ot{font-family:var(--sans);font-weight:600;font-size:1.1rem;letter-spacing:-.01em;line-height:1.3;margin-bottom:10px}
.cs-ocard p{font-size:.92rem;line-height:1.5;color:rgba(244,242,238,.6);margin:0}
@media(max-width:860px){.cs-ocards{grid-template-columns:1fr;gap:14px}}
/* WIP tag */
.wip-badge{display:inline-block;margin-left:14px;padding:3px 10px;border:1px solid var(--line);border-radius:999px;font-family:var(--sans);font-weight:600;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);vertical-align:middle}
.wrow--wip{cursor:default}
.wrow--wip .wcase{opacity:.45}
.proj--wip{cursor:default}
.cta--wip{opacity:.5;cursor:default;pointer-events:none}
/* goals & okrs grouped lists */
.cs-sub--gap{margin-top:54px}
.cs-goals{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px;align-items:stretch}
.cs-goal{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.022);padding:26px 24px}
.cs-goal-h{font-family:var(--sans);font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);font-weight:600;margin-bottom:18px;line-height:1.4}
.cs-goal-l{margin:0;padding:0;list-style:none;counter-reset:g}
.cs-goal-l li{counter-increment:g;position:relative;padding-left:30px;font-size:.95rem;line-height:1.5;color:rgba(244,242,238,.7);margin-bottom:11px}
.cs-goal-l li:last-child{margin-bottom:0}
.cs-goal-l li::before{content:counter(g,decimal-leading-zero);position:absolute;left:0;top:.05em;font-family:var(--sans);font-size:.72rem;font-weight:600;color:var(--muted)}
.cs-hl{color:var(--violet);font-weight:600}
@media(max-width:860px){.cs-goals{grid-template-columns:1fr;gap:14px}}
/* left scroll-progress ticks */
.cs-ticks{position:fixed;left:18px;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;gap:9px;z-index:85;pointer-events:none}
.cs-ticks i{width:14px;height:2px;background:rgba(244,242,238,.28);border-radius:2px;transition:width .35s var(--ease),background .35s var(--ease)}
.cs-ticks i.on{width:34px;background:var(--ink)}
@media(max-width:980px){.cs-ticks{display:none}}
@media(max-width:760px){.cs-meta{grid-template-columns:1fr 1fr}.cs-shots{grid-template-columns:1fr}}

/* anchored preview image */
#preview{position:fixed;left:50%;top:50%;width:clamp(260px,26vw,360px);aspect-ratio:3/2;border-radius:10px;background-size:cover;background-position:center;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.92);transition:opacity .55s var(--ease),transform .7s var(--ease);z-index:60;box-shadow:0 40px 100px rgba(0,0,0,.6)}
#preview.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* custom ring cursor */
#cursor{position:fixed;left:0;top:0;width:30px;height:30px;border:1px solid rgba(244,242,238,.55);border-radius:50%;pointer-events:none;z-index:95;transform:translate(-50%,-50%);display:grid;place-items:center;transition:width .35s var(--ease),height .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease),opacity .3s}
#cursor::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--ink);transition:.3s var(--ease)}
#cursor.big{width:62px;height:62px;background:rgba(123,108,255,.14);border-color:rgba(123,108,255,.55)}
#cursor.big::after{width:0;height:0}
@media(hover:none),(pointer:coarse){#cursor,#preview{display:none}}

/* reveal */
.rv{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}

footer{padding:clamp(60px,12vh,140px) var(--pad) 50px;border-top:1px solid var(--line);margin-top:90px;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:30px}
footer .big{font-family:var(--serif);font-weight:800;font-size:clamp(2rem,6vw,4.5rem);line-height:.95;letter-spacing:-.02em}
footer .foot-cp{color:var(--muted);font-size:.8rem;letter-spacing:.02em}