/* =================================================================
   MEHZ MALIK — shared stylesheet (index + case studies)
   ================================================================= */
:root{
  --accent:#FF8A3D;           /* warm amber (dark-mode default) */
  --accent-2:#FFD24D;         /* gold — "live/agentic" highlight */
  --accent-soft:rgba(255,138,61,.16);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --maxw:1320px;
  --gutter:clamp(20px,5vw,80px);
  --f-display:"Fraunces",Georgia,serif;
  --f-sans:"Space Grotesk",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
  --r:16px;
}
[data-theme="dark"]{
  --bg:#100C09;--bg-2:#191310;--fg:#F1EAE0;     /* warm charcoal */
  --muted:rgba(241,234,224,.58);--faint:rgba(241,234,224,.10);
  --hairline:rgba(241,234,224,.14);--card:rgba(255,255,255,.028);--glow:rgba(255,138,61,.5);
}
[data-theme="light"]{
  /* "Gallery White": neutral near-white canvas + layered white surfaces + near-black ink.
     Deliberately NOT cream/paper — personality comes from Fraunces + amber, not the background. */
  --bg:#FBFBFA;--bg-2:#F2F2F1;--fg:#0E0E0F;
  --muted:rgba(14,14,15,.60);--faint:rgba(14,14,15,.06);
  --hairline:rgba(14,14,15,.12);--card:rgba(14,14,15,.025);--glow:rgba(194,82,26,.22);
  /* bright amber fails contrast on white — deep burnt amber keeps AA for small text (~5.0:1 on #FBFBFA) */
  --accent:#B84B17;
  --accent-2:#7A5A12;
  --accent-soft:rgba(184,75,23,.10);
}

/* ===== GLASS + GRAIN (surface system) =====
   Glass is reserved for floating / layered surfaces: header, agent console, sticky rail, controls, UI mocks.
   Grain is one fixed, very low-opacity film layer over the whole page. Both are token-driven per theme. */
[data-theme="dark"]{
  --glass:rgba(255,255,255,.045);--glass-strong:rgba(255,255,255,.075);
  --glass-border:rgba(255,255,255,.12);--glass-hi:rgba(255,255,255,.11);
  --grain-opacity:.075;
}
[data-theme="light"]{
  --glass:rgba(255,255,255,.55);--glass-strong:rgba(255,255,255,.72);
  --glass-border:rgba(14,14,15,.10);--glass-hi:rgba(255,255,255,.95);
  --grain-opacity:.05;
}
.glass{background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);box-shadow:inset 0 1px 0 var(--glass-hi)}
body::after{content:"";position:fixed;inset:-50%;width:200%;height:200%;z-index:3000;pointer-events:none;opacity:var(--grain-opacity);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px}
@media (prefers-reduced-motion:reduce){body::after{opacity:calc(var(--grain-opacity) * .6)}}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{font-family:var(--f-sans);background:var(--bg);color:var(--fg);line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .6s var(--ease),color .6s var(--ease)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(80px,12vw,170px);position:relative}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent)}

/* PRELOADER — kinetic counter + curtain slide-up reveal */
#loader{position:fixed;inset:0;z-index:1200;background:var(--bg);overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,5vw,64px);
  transform:translateY(0);transition:transform .95s cubic-bezier(.76,0,.24,1);will-change:transform}
#loader.done{transform:translateY(-100%);pointer-events:none}
.loader-name{display:flex;flex-direction:column;line-height:.94}
.loader-name .lw{display:block;overflow:hidden;padding-bottom:.04em}
.loader-name b{display:block;font-family:var(--f-display);font-weight:330;font-size:clamp(2.8rem,11vw,9rem);
  letter-spacing:-.03em;transform:translateY(110%);animation:mmLwUp 1.1s cubic-bezier(.22,1,.36,1) forwards}
.loader-name .lw:nth-child(1) b{animation-delay:.12s}
.loader-name .lw:nth-child(2) b{animation-delay:.32s;color:var(--accent);font-style:italic}
@keyframes mmLwUp{to{transform:translateY(0)}}
.loader-foot{position:absolute;left:clamp(28px,5vw,64px);right:clamp(28px,5vw,64px);bottom:clamp(40px,7vw,72px);
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.loader-role{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);max-width:52%}
.loader-count{font-family:var(--f-display);font-weight:340;font-size:clamp(2.6rem,7vw,5.5rem);line-height:.9;letter-spacing:-.02em;color:var(--fg)}
.loader-count i{font-style:normal;color:var(--accent);font-size:.42em;margin-left:.08em;vertical-align:top}
.loader-bar{position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--faint)}
.loader-bar #loaderBar{display:block;height:100%;width:0;background:var(--accent)}
@media (prefers-reduced-motion:reduce){#loader{transition:none}.loader-name b{transform:none;animation:none}}

/* CURSOR */
.cursor{position:fixed;top:0;left:0;width:9px;height:9px;border-radius:50%;background:var(--accent);
  pointer-events:none;z-index:900;transform:translate(-50%,-50%);
  transition:width .25s,height .25s,background .25s,opacity .3s;mix-blend-mode:difference}
.cursor-ring{position:fixed;top:0;left:0;width:38px;height:38px;border:1px solid var(--muted);border-radius:50%;
  pointer-events:none;z-index:900;transform:translate(-50%,-50%);
  transition:width .3s var(--ease),height .3s var(--ease),border-color .3s,opacity .3s}
.cursor.hovering{width:0;height:0}
.cursor-ring.hovering{width:64px;height:64px;border-color:var(--accent);background:var(--accent-soft)}
@media (hover:none),(max-width:860px){.cursor,.cursor-ring{display:none}}

/* NAV */
header.nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;
  justify-content:space-between;padding:22px var(--gutter);
  transition:background .4s var(--ease),backdrop-filter .4s,padding .4s var(--ease),border-color .4s;
  border-bottom:1px solid transparent}
header.nav.scrolled{background:color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  padding-block:14px;border-color:var(--hairline)}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--f-display);font-weight:600;font-size:20px;letter-spacing:-.01em}
.brand-logo{width:52px;height:52px;object-fit:contain;flex:none;display:block}
/* logo asset is the dark version (for light bg); invert to white on the dark theme */
[data-theme="dark"] .brand-logo{filter:brightness(0) invert(1)}
/* tight phones: drop the wordmark (name is in the hero) + shrink the mark */
@media(max-width:520px){.brand span{display:none}.brand-logo{width:40px;height:40px}}
/* legacy fallback chip */
.brand-mark{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),#FFB877);color:#fff;
  font-family:var(--f-mono);font-size:15px;font-weight:500;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:14px;color:var(--muted);position:relative;transition:color .3s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1px;background:var(--accent);transition:width .35s var(--ease)}
.nav-links a:hover{color:var(--fg)}
.nav-links a:hover::after{width:100%}
.nav-cta{padding:9px 18px;border:1px solid var(--hairline);border-radius:100px;color:var(--fg)!important;
  transition:background .3s,border-color .3s,color .3s}
.nav-cta:hover{background:var(--fg);color:var(--bg)!important;border-color:var(--fg)}
.nav-cta::after{display:none}
.theme-toggle{width:38px;height:38px;border:1px solid var(--hairline);border-radius:50%;display:grid;place-items:center;
  transition:border-color .3s,transform .4s var(--ease)}
.theme-toggle:hover{border-color:var(--accent);transform:rotate(40deg)}
.theme-toggle svg{width:16px;height:16px;transition:transform .4s var(--ease)}
/* labelled theme toggle: icon + the mode you'll switch TO; pill shape instead of a bare circle */
.theme-toggle{width:auto;padding:0 14px 0 12px;border-radius:100px;display:inline-flex;align-items:center;gap:8px}
.theme-toggle:hover{transform:none}
.theme-toggle:hover svg{transform:rotate(40deg)}
.theme-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1}
/* both labels occupy the same grid cell; the hidden one reserves the width so the pill (and the header around it) never shifts between themes */
.theme-label{display:inline-grid;text-align:left}
.theme-label::before{content:"Light mode";visibility:hidden;grid-area:1/1}
.theme-label::after{content:"Light mode";grid-area:1/1}
[data-theme="light"] .theme-label::after{content:"Dark mode"}
[data-theme="dark"] .ico-moon{display:none}
[data-theme="light"] .ico-sun{display:none}
@media(max-width:520px){.theme-label{display:none}.theme-toggle{width:38px;padding:0;justify-content:center}}
.menu-btn{display:none}

/* HERO */
.hero{position:relative;min-height:min(100svh,920px);display:flex;align-items:center;overflow:hidden;padding-block:120px 90px}
#agentCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero-grad{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 80% 10%,transparent 40%,var(--bg) 80%),
             radial-gradient(70% 60% at 10% 100%,var(--accent-soft),transparent 60%)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-status{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:12.5px;color:var(--muted);
  border:1px solid var(--hairline);padding:7px 14px;border-radius:100px;margin-bottom:26px;
  background:color-mix(in srgb,var(--bg) 50%,transparent)}
.hero-status .dot{width:7px;height:7px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 0 0 var(--accent-2);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,210,77,.55)}70%{box-shadow:0 0 0 9px rgba(255,210,77,0)}100%{box-shadow:0 0 0 0 rgba(255,210,77,0)}}
.hero h1{font-family:var(--f-display);font-weight:350;font-size:clamp(2.6rem,7vw,6.6rem);line-height:.97;letter-spacing:-.03em;max-width:17ch}
.hero h1 em{font-style:italic;color:var(--accent);font-weight:400}
.hero-sub{margin-top:26px;max-width:620px}
.hero-sub p{font-size:clamp(1rem,1.4vw,1.12rem);color:var(--muted);max-width:52ch}
/* padding gives italic descenders (the g in "agentic") room below the baseline; the negative margin keeps line spacing unchanged */
.line-mask{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.line-mask>span{display:block;transform:translateY(130%);transition:transform 1s var(--ease)}
.in .line-mask>span,.line-mask.in>span{transform:none}

/* ===== AGENT CONSOLE ===== */
.agent-console{margin-top:38px;max-width:760px;border:1px solid var(--hairline);border-radius:20px;
  background:color-mix(in srgb,var(--bg-2) 70%,transparent);backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);box-shadow:0 30px 80px -30px rgba(0,0,0,.6),0 0 0 1px var(--accent-soft);
  overflow:hidden;transition:box-shadow .5s}
.agent-console:focus-within{box-shadow:0 30px 80px -28px rgba(0,0,0,.7),0 0 0 1px var(--accent)}
.agent-bar{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 22px}
.agent-bar .spark{width:20px;height:20px;flex:none;color:var(--accent)}
.agent-input{flex:1;background:none;border:none;outline:none;color:var(--fg);font-family:var(--f-sans);
  font-size:clamp(.98rem,1.5vw,1.1rem);min-width:0}
.agent-input::placeholder{color:var(--muted)}
.agent-send{width:46px;height:46px;flex:none;border-radius:13px;background:var(--accent);color:#fff;
  display:grid;place-items:center;transition:.3s var(--ease)}
.agent-send:hover{transform:scale(1.05);background:color-mix(in srgb,var(--accent) 86%,#000)}
.agent-send svg{width:20px;height:20px}
.agent-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 16px}
.agent-chip{font-family:var(--f-mono);font-size:12px;color:var(--muted);border:1px solid var(--hairline);
  padding:8px 13px;border-radius:100px;transition:.3s;white-space:nowrap}
.agent-chip:hover{color:var(--fg);border-color:var(--accent);background:var(--accent-soft)}
.agent-thread{max-height:0;opacity:0;overflow:hidden;border-top:1px solid transparent;
  transition:max-height .6s var(--ease),opacity .5s,border-color .4s}
.agent-thread.open{max-height:640px;opacity:1;overflow-y:auto;border-color:var(--hairline)}
.agent-thread-inner{padding:20px 22px 24px}
.agent-q{font-family:var(--f-mono);font-size:12.5px;color:var(--accent-2);margin-bottom:16px;display:flex;gap:8px}
.agent-q::before{content:"›";color:var(--accent)}
.agent-steps{display:grid;gap:9px;margin-bottom:18px}
.agent-step{display:flex;align-items:center;gap:11px;font-family:var(--f-mono);font-size:12.5px;color:var(--muted);
  opacity:0;transform:translateX(-6px);transition:.4s var(--ease)}
.agent-step.show{opacity:1;transform:none}
.agent-step .tick{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--accent);flex:none;position:relative}
.agent-step.done .tick{background:var(--accent)}
.agent-step.done .tick::after{content:"";position:absolute;left:4px;top:1.5px;width:4px;height:8px;
  border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.agent-step.run .tick{border-color:var(--accent-2);animation:spin 1s linear infinite;border-right-color:transparent}
@keyframes spin{to{transform:rotate(360deg)}}
.agent-answer{font-size:1.02rem;line-height:1.7;color:var(--fg)}
.agent-answer .caret{display:inline-block;width:8px;height:1.1em;background:var(--accent);
  vertical-align:-2px;margin-left:2px;animation:blink 1s steps(2) infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.agent-action{margin-top:18px;display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:13px;
  padding:11px 18px;border:1px solid var(--accent);border-radius:100px;color:var(--accent);transition:.3s var(--ease);
  opacity:0;transform:translateY(8px)}
.agent-action.show{opacity:1;transform:none}
.agent-action:hover{background:var(--accent);color:#fff}
.agent-action svg{width:15px;height:15px}

.hero-roles{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.role-chip{font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;padding:8px 15px;border:1px solid var(--hairline);
  border-radius:100px;color:var(--muted);transition:.3s}
.role-chip:hover{color:var(--fg);border-color:var(--accent)}

/* (marquee ticker removed 2026-09-11: dated pattern; the hero → work transition now relies on whitespace) */

/* SECTION HEAD */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:clamp(40px,6vw,80px)}
.sec-head h2{font-family:var(--f-display);font-weight:340;font-size:clamp(2.2rem,5.4vw,4.6rem);line-height:1;letter-spacing:-.025em;max-width:16ch}
.sec-head p{color:var(--muted);max-width:38ch;font-size:1.02rem}

/* WORK */
.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,2.6vw,40px)}
.work-card{position:relative;border:1px solid var(--hairline);border-radius:var(--r);overflow:hidden;background:var(--card);
  min-height:clamp(330px,40vw,560px);display:flex;flex-direction:column;justify-content:flex-end;
  transition:transform .6s var(--ease),border-color .5s;isolation:isolate}
.work-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.work-card.span-7{grid-column:span 7}.work-card.span-5{grid-column:span 5}
.work-card.span-6{grid-column:span 6}.work-card.span-12{grid-column:span 12;min-height:clamp(300px,32vw,460px)}
.work-thumb{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;transition:transform 1s var(--ease),filter .6s;filter:saturate(.9)}
.work-card:hover .work-thumb{transform:scale(1.05)}
.work-thumb.ph1{background:radial-gradient(120% 120% at 20% 20%,#2a1c10,#0d0c16),conic-gradient(from 200deg at 70% 30%,var(--accent),transparent 40%)}
.work-thumb.ph2{background:radial-gradient(120% 120% at 80% 20%,#2c1416,#0b0d12),conic-gradient(from 30deg at 30% 60%,#ff6b6b,transparent 45%)}
.work-thumb.ph3{background:radial-gradient(120% 120% at 50% 0%,#322012,#0e0c0b),conic-gradient(from 120deg at 60% 50%,var(--accent),transparent 42%)}
.work-thumb.ph4{background:radial-gradient(120% 120% at 30% 80%,#2a1409,#0b0a10),conic-gradient(from 280deg at 40% 30%,color-mix(in srgb,var(--accent) 86%,#000),transparent 42%)}
.work-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 18%,color-mix(in srgb,var(--bg) 55%,transparent) 48%,color-mix(in srgb,var(--bg) 92%,transparent) 78%,var(--bg) 100%)}
.work-meta{padding:clamp(22px,3vw,40px)}
.work-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.work-tags span{font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;padding:5px 11px;border:1px solid var(--hairline);
  border-radius:100px;color:var(--fg);background:color-mix(in srgb,var(--bg) 68%,transparent);backdrop-filter:blur(4px)}
.work-meta h3{font-family:var(--f-display);font-weight:380;font-size:clamp(1.5rem,2.8vw,2.4rem);line-height:1.05;letter-spacing:-.02em;margin-bottom:10px}
.work-meta p{color:var(--muted);max-width:44ch;font-size:.97rem}
.work-arrow{position:absolute;top:clamp(22px,3vw,36px);right:clamp(22px,3vw,36px);width:48px;height:48px;
  border:1px solid var(--hairline);border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--bg) 50%,transparent);transition:.4s var(--ease)}
.work-card:hover .work-arrow{background:var(--accent);border-color:var(--accent);transform:rotate(45deg)}
.work-arrow svg{width:18px;height:18px}
/* topic filter chips (shown once there are enough real case studies) */
.work-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(26px,4vw,46px)}
.work-filter{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--hairline);padding:9px 16px;border-radius:100px;background:none;cursor:pointer;transition:color .3s,border-color .3s,background .3s}
.work-filter:hover{color:var(--fg);border-color:var(--accent)}
.work-filter.active{background:var(--accent);border-color:var(--accent);color:#fff}
.work-card.is-hidden{display:none}
.work-card.is-solo{grid-column:span 12!important;min-height:clamp(300px,32vw,460px)}
/* "View all projects" — a quiet, centered control under the grid */
.work-more-wrap{display:flex;justify-content:center;margin-top:clamp(28px,4vw,48px)}
.work-more{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg);
  padding:14px 18px 14px 22px;border-radius:100px;border:1px solid var(--glass-border);background:var(--glass);cursor:pointer;
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:inset 0 1px 0 var(--glass-hi);transition:border-color .3s,transform .3s}
.work-more:hover{border-color:var(--accent);transform:translateY(-2px)}
.work-more .wm-count{font-size:11px;color:var(--accent);padding:4px 8px;border-radius:100px;background:var(--accent-soft)}
.work-more .wm-count:empty{display:none}
.work-more svg{width:16px;height:16px;transition:transform .4s var(--ease)}
.work-more.open svg{transform:rotate(180deg)}
.work-more[hidden]{display:none}
/* when a topic is active, re-tile remaining cards into a clean uniform grid */
.work-grid.is-filtering .work-card{grid-column:span 6!important}
@media(max-width:860px){.work-grid.is-filtering .work-card{grid-column:span 12!important}}

/* AGENTIC */
.agentic{background:var(--bg-2);border-block:1px solid var(--hairline);overflow:hidden}
.agentic-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
.agentic-copy h2{font-family:var(--f-display);font-weight:340;font-size:clamp(2rem,4.6vw,3.8rem);line-height:1.02;letter-spacing:-.02em;margin:18px 0 22px}
.agentic-copy h2 .hl{color:var(--accent);font-style:italic}
.agentic-copy p{color:var(--muted);font-size:1.06rem;max-width:50ch;margin-bottom:18px}
.principle-list{margin-top:34px;display:grid;gap:2px}
.principle{display:flex;gap:18px;padding:20px 0;border-top:1px solid var(--hairline);cursor:pointer;transition:.3s}
.principle:last-child{border-bottom:1px solid var(--hairline)}
.principle .num{font-family:var(--f-mono);font-size:12px;color:var(--accent)}
.principle .body h4{font-size:1.1rem;font-weight:500;margin-bottom:6px;transition:.3s}
.principle .body p{font-size:.95rem;margin:0;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .4s,margin .4s}
.principle.open .body p{max-height:120px;opacity:1;margin-top:8px}
.principle:hover .body h4{color:var(--accent)}
.agent-stage{position:relative;aspect-ratio:1/1;border:1px solid var(--hairline);border-radius:var(--r);
  background:radial-gradient(circle at 50% 50%,var(--accent-soft),transparent 60%),var(--bg);overflow:hidden}
/* the graph lives above the readout caption so no node is ever covered */
.agent-stage svg{position:absolute;left:0;right:0;top:10px;height:calc(100% - 104px);width:100%}
.agent-node{cursor:pointer}
.agent-node circle{transition:.4s var(--ease)}
.agent-node:hover circle.core{r:34;fill:var(--accent)}
.agent-node text{font-family:var(--f-mono);font-size:11px;fill:var(--fg);text-anchor:middle;pointer-events:none}
.agent-edge{stroke:var(--hairline);stroke-width:1.4;fill:none}
.agent-pulse{stroke:var(--accent);stroke-width:2;fill:none;stroke-dasharray:6 280;stroke-dashoffset:0;opacity:.9}
.agent-readout{position:absolute;left:18px;bottom:18px;right:18px;font-family:var(--f-mono);font-size:12px;color:var(--muted);
  background:color-mix(in srgb,var(--bg) 70%,transparent);border:1px solid var(--hairline);border-radius:10px;padding:12px 14px;backdrop-filter:blur(8px)}
.agent-readout b{color:var(--accent-2)}

/* LEADERSHIP */
.lead-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,6vw,80px);align-items:start}
.lead-copy h2{font-family:var(--f-display);font-weight:340;font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.04;letter-spacing:-.02em;margin:16px 0 22px}
.lead-copy p{color:var(--muted);font-size:1.05rem;max-width:48ch;margin-bottom:16px}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--r);overflow:hidden}
.metric{background:var(--bg);padding:clamp(24px,3vw,40px)}
.metric .num{font-family:var(--f-display);font-weight:380;font-size:clamp(2.4rem,5vw,4rem);line-height:1;letter-spacing:-.02em;color:var(--fg)}
.metric .num .sfx{color:var(--accent)}
.metric .lbl{color:var(--muted);font-size:.92rem;margin-top:10px}
/* number-free leadership proof cards (reuse the .metrics grid + .metric tile) */
.metrics--proof .metric{display:flex;flex-direction:column;justify-content:flex-start}
.metric .m-tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.metric .m-lead{font-family:var(--f-display);font-weight:380;font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.22;letter-spacing:-.01em;color:var(--fg);margin-top:14px}

/* PROCESS */
.process-list{display:grid;gap:0;border-top:1px solid var(--hairline)}
.step{display:grid;grid-template-columns:90px 1fr;gap:clamp(20px,4vw,60px);padding:clamp(28px,4vw,52px) 0;
  border-bottom:1px solid var(--hairline);align-items:start;transition:.4s}
.step:hover{padding-left:14px}
.step .idx{font-family:var(--f-mono);font-size:13px;color:var(--accent)}
.step-body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,50px);align-items:start}
.step-body h3{font-family:var(--f-display);font-weight:360;font-size:clamp(1.4rem,3vw,2.3rem);letter-spacing:-.02em;line-height:1.05}
.step-body p{color:var(--muted);font-size:1rem;max-width:46ch}
@media(max-width:760px){.step-body{grid-template-columns:1fr;gap:12px}}

/* POSTS */
.posts{display:grid;gap:0;border-top:1px solid var(--hairline)}
.post{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 4px;
  border-bottom:1px solid var(--hairline);position:relative;isolation:isolate}
.post::before{content:"";position:absolute;inset:6px -16px;border-radius:18px;background:var(--card);
  opacity:0;transition:opacity .35s var(--ease);z-index:-1;pointer-events:none}
.post:hover::before{opacity:1}
.post .l{display:flex;flex-direction:column;gap:6px}
.post .l p{color:var(--muted);font-size:.96rem;line-height:1.55;max-width:64ch;margin-top:2px}
.post-topics{font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;color:var(--muted);margin-top:8px}
.post .kind{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.post h3{font-family:var(--f-display);font-weight:360;font-size:clamp(1.2rem,2.4vw,1.8rem);letter-spacing:-.01em}
.post .meta{display:flex;align-items:center;gap:16px;color:var(--muted);font-size:.9rem;font-family:var(--f-mono);flex:none}
.post .meta .go{width:40px;height:40px;border:1px solid var(--hairline);border-radius:50%;display:grid;place-items:center;transition:.4s var(--ease)}
.post:hover .meta .go{background:var(--accent);border-color:var(--accent);transform:rotate(-45deg)}
.post .meta .go svg{width:15px;height:15px}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,80px);align-items:center}
.portrait{aspect-ratio:4/5;border-radius:var(--r);border:1px solid var(--hairline);overflow:hidden;position:relative;
  background:radial-gradient(120% 120% at 30% 10%,#2a1c10,#0c0b14)}
.portrait::after{content:"PORTRAIT";position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.2em;color:var(--muted)}
.portrait img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.portrait.has-photo::after{display:none}
.about-copy h2{font-family:var(--f-display);font-weight:330;font-size:clamp(1.7rem,3.6vw,3rem);line-height:1.15;letter-spacing:-.02em;margin:16px 0 26px}
.about-copy h2 em{font-style:italic;color:var(--accent)}
.about-copy p{color:var(--muted);font-size:1.05rem;margin-bottom:16px;max-width:54ch}
.about-meta{display:flex;flex-wrap:wrap;gap:30px 50px;margin-top:36px}
.about-meta .col span{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:10px}
.about-meta .col p{font-size:.98rem;color:var(--fg);margin:0;line-height:1.7}
.industries{margin-top:34px}
.industries-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:14px}
.industries-chips{display:flex;flex-wrap:wrap;gap:9px}
.industries-chips span{font-family:var(--f-mono);font-size:12px;letter-spacing:.03em;color:var(--fg);
  border:1px solid var(--hairline);padding:8px 14px;border-radius:100px;transition:border-color .3s,color .3s}
.industries-chips span:hover{border-color:var(--accent);color:var(--accent)}

/* ===== ABOUT PAGE (about.html) ===== */
.about-page{padding-top:clamp(104px,13vh,150px)}
.about-page .case-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:clamp(34px,5vw,56px);transition:color .3s}
.about-page .case-back svg{width:16px}
.about-page .case-back:hover{color:var(--accent)}
.nav-links a.active{color:var(--fg)}
.nav-links a.active::after{width:100%}
/* Areas of specialization — accent-outlined chips */
.spec .eyebrow{margin-bottom:clamp(22px,3vw,32px)}
.spec-chips{display:flex;flex-wrap:wrap;gap:12px}
.spec-chips span{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.04em;color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent);
  padding:11px 18px;border-radius:8px;transition:background .3s,border-color .3s}
.spec-chips span:hover{background:color-mix(in srgb,var(--accent) 16%,transparent);border-color:var(--accent)}
/* Capability pillars */
.caps{padding-top:clamp(40px,6vw,64px)}
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(36px,5vw,64px)}
.cap-num{font-family:var(--f-display);font-weight:380;font-size:clamp(3rem,5vw,4.4rem);line-height:.9;letter-spacing:-.02em;color:var(--accent);display:block}
.cap h3{font-family:var(--f-display);font-weight:560;font-size:clamp(1.25rem,1.9vw,1.55rem);line-height:1.18;letter-spacing:-.01em;margin:22px 0 16px}
.cap p{color:var(--muted);font-size:1.02rem;line-height:1.6;margin-bottom:22px}
.cap-tags{display:flex;flex-wrap:wrap;gap:8px}
.cap-tags span{font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  background:var(--bg-2);border:1px solid var(--hairline);padding:7px 11px;border-radius:6px}
@media(max-width:860px){.cap-grid{grid-template-columns:1fr;gap:clamp(40px,7vw,56px)}}
/* "More about me" link on the home-page About teaser */
.about-more{display:inline-flex;align-items:center;gap:9px;margin-top:34px;font-family:var(--f-mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);padding:13px 22px;border-radius:100px;transition:background .3s,border-color .3s}
.about-more svg{width:16px}
.about-more:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:var(--accent)}

/* CONTACT */
.contact{text-align:center;position:relative;overflow:hidden}
.contact-grad{position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 100%,var(--accent-soft),transparent 70%);z-index:0;pointer-events:none}
.contact .wrap{position:relative;z-index:1}
.contact h2{font-family:var(--f-display);font-weight:330;font-size:clamp(2.6rem,9vw,8rem);line-height:.95;letter-spacing:-.03em;margin-bottom:30px}
.contact h2 em{font-style:italic;color:var(--accent)}
.mail-btn{display:inline-flex;align-items:center;gap:14px;font-family:var(--f-mono);font-size:15px;
  padding:18px 32px;border:1px solid var(--hairline);border-radius:100px;transition:.4s var(--ease)}
.mail-btn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg);gap:20px}
.mail-btn svg{width:18px;height:18px}
.socials{display:flex;gap:30px;justify-content:center;margin-top:46px;flex-wrap:wrap}
.socials a{font-family:var(--f-mono);font-size:13px;color:var(--muted);letter-spacing:.05em;transition:.3s}
.socials a:hover{color:var(--accent)}

/* FOOTER */
footer{border-top:1px solid var(--hairline);padding:40px var(--gutter);display:flex;justify-content:space-between;
  align-items:center;gap:20px;flex-wrap:wrap;color:var(--muted);font-size:13px;font-family:var(--f-mono)}
footer .top{width:42px;height:42px;border:1px solid var(--hairline);border-radius:50%;display:grid;place-items:center;transition:.3s}
footer .top:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-3px)}

/* REVEAL */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal-d="1"]{transition-delay:.08s}[data-reveal-d="2"]{transition-delay:.16s}[data-reveal-d="3"]{transition-delay:.24s}

/* ===== CASE STUDY PAGE ===== */
.case-hero{padding:clamp(140px,18vh,220px) 0 clamp(20px,3vw,32px);position:relative;overflow:hidden}
.case-hero .wrap{position:relative;z-index:2}
.case-grad{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(70% 70% at 80% 0%,var(--accent-soft),transparent 60%)}
.case-back{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:13px;color:var(--muted);margin-bottom:34px;transition:.3s}
.case-back:hover{color:var(--accent);gap:13px}
.case-back svg{width:15px;height:15px}
.case-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.case-tags span{font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;padding:6px 12px;border:1px solid var(--hairline);border-radius:100px;color:var(--muted)}
.case-title{font-family:var(--f-display);font-weight:340;font-size:clamp(2.4rem,7vw,6rem);line-height:.98;letter-spacing:-.03em;max-width:18ch}
.case-lede{margin-top:28px;font-size:clamp(1.1rem,2vw,1.5rem);color:var(--muted);max-width:60ch;line-height:1.5;font-family:var(--f-display);font-weight:320}
.case-cover{aspect-ratio:16/9;border-radius:var(--r);border:1px solid var(--hairline);overflow:hidden;margin-top:clamp(40px,6vw,70px);
  background:radial-gradient(120% 120% at 20% 20%,#2a1c10,#0d0c16),conic-gradient(from 200deg at 70% 30%,var(--accent),transparent 40%)}
/* standalone gradient swatches (case covers / figures) */
.ph1{background:radial-gradient(120% 120% at 20% 20%,#2a1c10,#0d0c16),conic-gradient(from 200deg at 70% 30%,var(--accent),transparent 40%)!important}
.ph2{background:radial-gradient(120% 120% at 80% 20%,#2c1416,#0b0d12),conic-gradient(from 30deg at 30% 60%,#ff6b6b,transparent 45%)!important}
.ph3{background:radial-gradient(120% 120% at 50% 0%,#322012,#0e0c0b),conic-gradient(from 120deg at 60% 50%,var(--accent),transparent 42%)!important}
.ph4{background:radial-gradient(120% 120% at 30% 80%,#2a1409,#0b0a10),conic-gradient(from 280deg at 40% 30%,color-mix(in srgb,var(--accent) 86%,#000),transparent 42%)!important}
/* Entegra brand-nod aubergine (used for its work card + case cover) */
.ph-entegra{background:radial-gradient(120% 120% at 25% 15%,#4a2a5a,#170e20),conic-gradient(from 210deg at 72% 28%,#9a5fbe,transparent 44%)!important}
.ph-princess{background:radial-gradient(120% 120% at 28% 15%,#1e3a6b,#0a132e),conic-gradient(from 210deg at 72% 28%,#3a6bd6,transparent 44%)!important}
.ph-agent{background:radial-gradient(120% 120% at 28% 15%,#5b3fd6,#1a0f33),conic-gradient(from 210deg at 72% 28%,#8b6bff,transparent 44%)!important}
/* framed-screenshot thumbnail: a browser window floating on the project's brand color */
.work-thumb--framed{background:radial-gradient(130% 130% at 30% 16%,#5b3fd6,#160c2c);display:flex;justify-content:center;align-items:flex-start;padding:clamp(22px,3.5vw,44px) clamp(22px,3.5vw,44px) 0}
.wt-browser{width:100%;aspect-ratio:16/10;display:flex;flex-direction:column;border-radius:11px 11px 0 0;overflow:hidden;border:1px solid rgba(255,255,255,.18);box-shadow:0 26px 55px -18px rgba(0,0,0,.6);background:#fff}
.wt-bar{height:26px;background:#efedf3;display:flex;align-items:center;gap:6px;padding-left:13px}
.wt-bar span{width:8px;height:8px;border-radius:50%;background:#cdc7d6}
/* show the top of the screen at a legible scale; full-page exports are cropped, not squeezed */
.wt-browser img{display:block;width:100%;flex:1;min-height:0;object-fit:cover;object-position:top center}
/* image-on-brand-color thumbnails (Entegra, Princess) — classes (not inline styles) so the theme can retint them */
.work-thumb.wt-entegra{background:url('images/entegra-cover.png') center/cover no-repeat,radial-gradient(130% 130% at 30% 18%,#4d2f63,#221531)}
.work-thumb.wt-princess{background:#0a132e url('images/princess-cover.png') center/cover no-repeat}
/* Manpower.com: brand blue surface + the screens-on-grey cover */
.ph-manpower{background:radial-gradient(120% 120% at 28% 15%,#2f5a8f,#0f1f38),conic-gradient(from 210deg at 72% 28%,var(--accent),transparent 40%)!important}
[data-theme="light"] .ph-manpower{background:radial-gradient(120% 120% at 28% 15%,#D6E1EF,#EBF1F8),conic-gradient(from 210deg at 72% 28%,#F3D6C2,transparent 40%)!important}
.work-thumb.wt-manpower{background:#c9d3dc url('images/manpower-cover.webp') 40% 50%/cover no-repeat}
[data-theme="light"] .work-thumb.wt-manpower{background:#E6ECF2 url('images/manpower-cover.webp') 40% 50%/cover no-repeat}
/* Experis: deep navy brand surface + the three-device cover */
.ph-experis{background:radial-gradient(120% 120% at 28% 15%,#2a3f66,#0f1a30),conic-gradient(from 210deg at 72% 28%,var(--accent),transparent 40%)!important}
[data-theme="light"] .ph-experis{background:radial-gradient(120% 120% at 28% 15%,#D6DEEC,#EBEFF7),conic-gradient(from 210deg at 72% 28%,#F3D6C2,transparent 40%)!important}
.work-thumb.wt-experis{background:#d9dbde url('images/experis-cover.jpg') 50% 45%/cover no-repeat}
[data-theme="light"] .work-thumb.wt-experis{background:#E9EBEF url('images/experis-cover.jpg') 50% 45%/cover no-repeat}
/* Progress Residential: the phones-on-teal banner as the card image (falls back to the teal gradient) */
.work-thumb.wt-progress{background:url('images/progress-cover.jpg') 14% 50%/cover no-repeat,radial-gradient(130% 130% at 30% 16%,#134540,#06181a)}
/* LIGHT MODE — soften every brand surface to a pale tint of the same hue (gallery-white canvas, no deep blocks) */
[data-theme="light"] .ph-polaris{background:radial-gradient(120% 120% at 28% 15%,#D5E0EF,#EAF0F7),conic-gradient(from 210deg at 72% 28%,#B7CBE6,transparent 44%)!important}
[data-theme="light"] .ph-agent{background:radial-gradient(120% 120% at 28% 15%,#DCD3F7,#EFEBFB),conic-gradient(from 210deg at 72% 28%,#C9BDF5,transparent 44%)!important}
[data-theme="light"] .ph-entegra{background:radial-gradient(120% 120% at 25% 15%,#E1D3EA,#F1EAF5),conic-gradient(from 210deg at 72% 28%,#D1B5E0,transparent 44%)!important}
[data-theme="light"] .ph-princess{background:radial-gradient(120% 120% at 28% 15%,#D3DDF0,#E8EEF8),conic-gradient(from 210deg at 72% 28%,#B9CBE8,transparent 44%)!important}
[data-theme="light"] .work-thumb--framed{background:radial-gradient(130% 130% at 30% 16%,#DCD3F7,#EFEBFB)}
[data-theme="light"] .work-thumb--framed.polaris{background:radial-gradient(130% 130% at 30% 16%,#D5E0EF,#EAF0F7)}
[data-theme="light"] .work-thumb.wt-entegra{background:url('images/entegra-cover.png') center/cover no-repeat,radial-gradient(130% 130% at 30% 18%,#E1D3EA,#F1EAF5)}
[data-theme="light"] .work-thumb.wt-princess{background:#E8EEF8 url('images/princess-cover.png') center/cover no-repeat}
/* browser-window chrome needs a dark hairline + lighter shadow on pale surfaces */
[data-theme="light"] .wt-browser,[data-theme="light"] .cover-browser{border-color:rgba(14,14,15,.14);box-shadow:0 26px 55px -24px rgba(14,14,15,.28)}
[data-theme="light"] .case-cover-note{color:rgba(14,14,15,.6);border-color:rgba(14,14,15,.3)}
.case-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--r);overflow:hidden;margin-top:clamp(40px,6vw,64px)}
.case-fact{background:var(--bg);padding:clamp(20px,2.6vw,32px)}
.case-fact span{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:10px}
.case-fact p{font-size:1.02rem;color:var(--fg);line-height:1.5}
/* five or more facts: three roomy columns instead of six squeezed ones */
.case-facts:has(> :nth-child(5)){grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.case-facts,.case-facts:has(> :nth-child(5)){grid-template-columns:1fr 1fr}}
.case-body{max-width:760px;margin-inline:auto}
/* the case-study body section needs far less top padding than the generic .section,
   since the hero already provides spacing below the facts grid */
.case-content{padding-block:clamp(28px,3.5vw,48px) clamp(60px,9vw,110px)}
/* unified vertical rhythm: big gap before each section's text, no margin on the first */
.case-block{margin-top:clamp(54px,8vw,92px)}
.case-body>:first-child{margin-top:0}
/* media belongs to the text above it → moderate gap before, none after */
.case-body figure,.case-body .case-carousel,.case-highlights,.case-results{margin-top:clamp(20px,3vw,32px)}
.case-block .eyebrow{margin-bottom:20px}
.case-block h2{font-family:var(--f-display);font-weight:350;font-size:clamp(1.7rem,4vw,2.8rem);letter-spacing:-.02em;line-height:1.08;margin-bottom:22px}
.case-block p{color:var(--muted);font-size:1.1rem;line-height:1.75;margin-bottom:18px}
.case-block ul{list-style:none;margin:8px 0 18px;display:grid;gap:12px}
.case-block li{color:var(--muted);font-size:1.06rem;line-height:1.6;padding-left:26px;position:relative}
.case-block li::before{content:"→";position:absolute;left:0;color:var(--accent)}
.case-quote{font-family:var(--f-display);font-weight:330;font-style:italic;font-size:clamp(1.5rem,3.4vw,2.4rem);
  line-height:1.3;letter-spacing:-.01em;color:var(--fg);border-left:2px solid var(--accent);padding-left:28px;margin:clamp(54px,8vw,92px) 0 0}
.case-quote cite{display:block;font-style:normal;font-family:var(--f-mono);font-size:13px;letter-spacing:.04em;color:var(--accent);margin-top:18px}
.case-quote .eyebrow{font-style:normal;margin-bottom:22px}

/* ===== COLUMNS (e.g. experience objectives) ===== */
.case-columns{margin-top:clamp(54px,8vw,92px)}
.case-columns .eyebrow{margin-bottom:clamp(26px,4vw,40px)}
.case-columns h2{font-family:var(--f-display);font-weight:340;font-size:clamp(1.7rem,4vw,2.6rem);letter-spacing:-.02em;line-height:1.08;margin-bottom:16px}
.cols-intro{color:var(--muted);font-size:1.08rem;line-height:1.6;max-width:60ch;margin-bottom:8px}
.cols-grid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:clamp(26px,3.5vw,52px);margin-top:30px}
@media(max-width:980px){.cols-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.cols-grid{grid-template-columns:1fr}}
.col-num{font-family:var(--f-mono);font-size:12px;color:var(--accent);display:block;margin-bottom:16px}
.col-tag{display:inline-block;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--accent);color:#fff;padding:6px 12px;border-radius:6px;margin-bottom:16px}
.col-card h4{font-family:var(--f-display);font-weight:400;font-size:clamp(1.15rem,1.9vw,1.4rem);letter-spacing:-.01em;line-height:1.15;margin-bottom:11px}
.col-card p{color:var(--muted);font-size:.99rem;line-height:1.6}
.col-rule{display:block;width:34px;height:2px;background:var(--accent);margin-bottom:18px}

/* ===== REAL-TIME ENGAGEMENT (text + notification cards) ===== */
.case-notify{margin-top:clamp(54px,8vw,92px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:start}
@media(max-width:860px){.case-notify{grid-template-columns:1fr;gap:clamp(28px,5vw,44px)}}
.notify-text .eyebrow{margin-bottom:22px}
.notify-text h2{font-family:var(--f-display);font-weight:340;font-size:clamp(1.6rem,3.4vw,2.5rem);letter-spacing:-.02em;line-height:1.08;margin-bottom:22px}
.notify-text p{color:var(--muted);font-size:1.04rem;line-height:1.65;margin-bottom:16px;max-width:52ch}
.notify-cards{display:grid;gap:16px}
.notify-card{background:var(--card);border:1px solid var(--hairline);border-radius:12px;padding:18px 20px}
.notify-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:8px}
.notify-card.notify-teal .notify-label{color:#3aa99a}
.notify-card.notify-gold .notify-label{color:var(--accent)}
.notify-tier{opacity:.75}
.notify-card p{color:var(--muted);font-size:.97rem;line-height:1.5;margin:0}
/* result stat descriptions (strategic impact) */
.case-results .r .r-desc{color:var(--muted);font-size:.95rem;line-height:1.55;margin-top:12px}

/* ===== KEY APP MOMENTS (2-up feature cards w/ outcome tag) ===== */
.case-moments{margin-top:clamp(54px,8vw,92px)}
.case-moments .eyebrow{margin-bottom:clamp(22px,3vw,34px)}
.case-moments .cols-intro{margin-bottom:6px}
.moments-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,3.5vw,52px) clamp(36px,5vw,80px);margin-top:36px}
@media(max-width:760px){.moments-grid{grid-template-columns:1fr}}
.moment-card{border-top:1px solid var(--hairline);padding-top:26px}
.moment-top{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:18px}
.moment-num{font-family:var(--f-mono);font-size:12px;color:var(--accent)}
.moment-tag{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);padding:5px 10px;border-radius:5px;text-align:right}
.moment-card h4{font-family:var(--f-display);font-weight:400;font-size:clamp(1.2rem,2vw,1.5rem);letter-spacing:-.01em;margin-bottom:6px}
.moment-sub{display:block;font-family:var(--f-display);font-style:italic;font-size:1rem;color:var(--muted);margin-bottom:14px}
.moment-card p{color:var(--muted);font-size:.99rem;line-height:1.62}

/* ===== EXPERIENCE HIGHLIGHTS (alternating feature rows) ===== */
.case-highlights{display:grid;gap:clamp(44px,7vw,90px);width:min(1140px,94vw);margin-inline:calc(50% - min(570px,47vw))}
.hl-row{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,64px);align-items:center}
.hl-row.rev .hl-media{order:2}
.hl-media{border-radius:var(--r);border:1px solid var(--hairline);overflow:hidden;background:var(--bg-2);aspect-ratio:16/10;display:grid;place-items:center;padding:clamp(12px,2vw,30px);position:relative}
.hl-media img{width:100%;height:100%;object-fit:contain;display:block;cursor:zoom-in}
.hl-media.img-missing{background:radial-gradient(120% 120% at 25% 15%,#4a2a5a,#170e20),conic-gradient(from 210deg at 72% 28%,#9a5fbe,transparent 44%)}
.hl-media::after{content:"⤢  Enlarge";position:absolute;bottom:12px;right:12px;font-family:var(--f-mono);font-size:11px;color:#fff;background:rgba(0,0,0,.6);padding:6px 11px;border-radius:100px;opacity:0;transition:opacity .3s;pointer-events:none}
.hl-media:hover::after{opacity:1}
.hl-tag{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.hl-copy h3{font-family:var(--f-display);font-weight:360;font-size:clamp(1.4rem,2.6vw,2.1rem);letter-spacing:-.02em;line-height:1.12;margin:12px 0 14px}
.hl-copy p{color:var(--muted);font-size:1.04rem;line-height:1.65;margin-bottom:18px}
.hl-copy ul{list-style:none;display:grid;gap:10px}
.hl-copy li{color:var(--fg);font-size:.98rem;line-height:1.5;padding-left:24px;position:relative}
.hl-copy li::before{content:"→";position:absolute;left:0;color:var(--accent)}
@media(max-width:820px){
  .hl-row{grid-template-columns:1fr;gap:22px}
  .hl-row.rev .hl-media{order:0}
}
.case-figure{margin:0;border-radius:var(--r);border:1px solid var(--hairline);overflow:hidden;aspect-ratio:16/9;
  background:radial-gradient(120% 120% at 80% 20%,#2c1416,#0b0d12),conic-gradient(from 30deg at 30% 60%,#ff6b6b,transparent 45%)}
.case-figcap{font-family:var(--f-mono);font-size:12px;color:var(--muted);margin-top:16px;text-align:center}
/* figures/cover that carry a real screenshot or artifact */
.case-figure--img{display:grid;place-items:center;background:var(--bg-2);padding:clamp(10px,2vw,26px);aspect-ratio:auto}
.case-figure--img img{width:100%;height:auto;max-height:86vh;object-fit:contain;display:block}
/* break artifacts + carousel OUT of the 760px text column so they show large.
   Centered with margins (NOT transform) so it doesn't collide with the scroll-reveal transform. */
.case-body figure,.case-body .case-carousel,.case-body .case-columns,.case-body .case-moments,.case-body .case-notify{width:min(1140px,94vw);margin-inline:calc(50% - min(570px,47vw))}
/* click-to-zoom affordance */
.case-figure img,.cc-media img{cursor:zoom-in}
.case-figure--img,.cc-media{position:relative}
.case-figure--img::after,.cc-media::after{content:"⤢  Enlarge";position:absolute;bottom:14px;right:14px;font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;color:#fff;background:rgba(0,0,0,.6);padding:7px 12px;border-radius:100px;opacity:0;transition:opacity .3s;pointer-events:none;backdrop-filter:blur(4px)}
.case-figure--img:hover::after,.cc-media:hover::after{opacity:1}

/* ===== LIGHTBOX ===== */
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(8,6,4,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:5vh 6vw;cursor:zoom-out}
.lightbox.open{display:flex}
.lightbox .lb-img{max-width:92vw;max-height:90vh;object-fit:contain;border-radius:10px;box-shadow:0 40px 120px rgba(0,0,0,.7);cursor:default}
.lb-close,.lb-prev,.lb-next{position:fixed;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.35);color:#fff;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:.3s;z-index:1;line-height:1}
.lb-close{top:22px;right:26px;width:50px;height:50px;font-size:26px}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);width:56px;height:56px;font-size:30px}
.lb-prev{left:20px}.lb-next{right:20px}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:var(--accent);border-color:var(--accent);color:#fff}
@media(max-width:640px){.lb-prev,.lb-next{width:44px;height:44px;font-size:22px}.lb-close{width:44px;height:44px}}
.case-cover{position:relative;display:grid;place-items:center}
.case-cover-img{width:100%;height:100%;object-fit:contain;padding:clamp(16px,4vw,56px);display:block}
/* clean cover: a real mockup floats on the page — no card chrome, no crop, no padding */
.case-cover--clean{background:none;border:none;border-radius:0;overflow:visible;aspect-ratio:auto;display:block}
.case-cover--clean .case-cover-img{width:100%;height:auto;max-height:80vh;padding:0}
.case-cover--clean.img-missing{aspect-ratio:16/9;background:var(--bg-2);border:1px solid var(--hairline);border-radius:var(--r)}
/* when the image file is absent, fall back cleanly to the gradient */
.case-figure.img-missing,.case-cover.img-missing{background:var(--bg-2)}
.case-figure.img-missing{background:radial-gradient(120% 120% at 25% 15%,#4a2a5a,#170e20),conic-gradient(from 210deg at 72% 28%,#9a5fbe,transparent 44%)}
/* ===== CASE CAROUSEL ===== */
.case-carousel{margin-block:0}
.cc-viewport{overflow:hidden;border-radius:var(--r);border:1px solid var(--hairline);position:relative}
.cc-track{display:flex;transition:transform .6s var(--ease)}
.cc-slide{flex:0 0 100%;min-width:0}
/* the frame is fixed by aspect-ratio; the image is absolutely positioned inside it so its intrinsic
   size can never change the frame height (previously tall images grew the slide, so the viewport
   jumped between slides and depended on load order) */
.cc-media{--ccpad:clamp(14px,3vw,40px);aspect-ratio:16/9;background:var(--bg-2);position:relative;overflow:hidden}
.cc-media img{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:auto;height:auto;max-width:calc(100% - 2*var(--ccpad));max-height:calc(100% - 2*var(--ccpad));object-fit:contain;display:block}
.case-carousel.tall .cc-media{aspect-ratio:16/10}   /* mixed-aspect boards (flow maps, diagrams) */
.cc-media.img-missing{background:radial-gradient(120% 120% at 25% 15%,#4a2a5a,#170e20),conic-gradient(from 210deg at 72% 28%,#9a5fbe,transparent 44%)}
.cc-cap{padding:22px clamp(18px,3vw,34px) 26px;border-top:1px solid var(--hairline);background:var(--bg);min-height:120px}
.cc-cap .cc-num{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;color:var(--accent)}
.cc-cap h3{font-family:var(--f-display);font-weight:380;font-size:clamp(1.3rem,2.4vw,1.9rem);letter-spacing:-.02em;margin:8px 0 8px}
.cc-cap p{color:var(--muted);font-size:1.02rem;max-width:62ch;margin:0}
.cc-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:22px}
.cc-dots{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.cc-dot{width:8px;height:8px;border-radius:50%;background:var(--hairline);border:none;padding:0;cursor:pointer;transition:.35s var(--ease)}
.cc-dot.active{background:var(--accent);width:26px;border-radius:10px}
/* arrows overlay the image (centered on each edge) so you can navigate without scrolling away */
.cc-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:50px;height:50px;border-radius:50%;
  display:grid;place-items:center;transition:.3s var(--ease);
  background:color-mix(in srgb,var(--bg) 62%,transparent);border:1px solid var(--hairline);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cc-prev{left:16px}.cc-next{right:16px}
.cc-arrow:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.cc-arrow svg{width:18px;height:18px}
@media(max-width:560px){.cc-arrow{width:42px;height:42px}.cc-prev{left:8px}.cc-next{right:8px}}

.case-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:clamp(20px,3vw,40px);margin-top:30px}
.case-results .r{min-width:0}
/* numbers stay big; they may wrap at a space ("Fortune 500") but never mid-word */
.case-results .r .num{font-family:var(--f-display);font-weight:380;font-size:clamp(2rem,4vw,3rem);line-height:1;color:var(--accent);overflow-wrap:normal;word-break:keep-all}
/* word results ("Responsive", "Simplified") sit smaller than numeric ones so they never collide */
.case-results .r .num.word{font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.05;letter-spacing:-.02em}
.case-results .r .lbl{color:var(--muted);font-size:.95rem;margin-top:10px}
@media(max-width:680px){.case-results{grid-template-columns:1fr}}
/* ===== AI CASE-STUDY BLOCKS (Polaris) — diagrams + UI mocks, HTML/CSS only, token-driven ===== */
.case-kicker{margin-bottom:22px}
.case-cover-note{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);border:1px dashed rgba(255,255,255,.32);padding:10px 16px;border-radius:100px}
/* theme-aware cover: a case may supply coverImage (dark) + coverImageLight */
.case-cover .cover-light,.case-figure .cover-light{display:none}
[data-theme="light"] .case-cover .cover-light,[data-theme="light"] .case-figure .cover-light{display:block}
[data-theme="light"] .case-cover .cover-dark,[data-theme="light"] .case-figure .cover-dark{display:none}
/* framed in-body figure (same browser-window treatment as the framed cover) */
.case-figure--frame{aspect-ratio:auto;display:flex;align-items:flex-end;padding:clamp(20px,4vw,56px) clamp(20px,4vw,56px) 0;overflow:hidden;position:relative}
.case-figure--frame .cover-crop.tall{aspect-ratio:16/10}
.case-figure--frame img{cursor:zoom-in}
.case-figure--frame::after{content:"⤢  Enlarge";position:absolute;bottom:14px;right:14px;font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;color:#fff;background:rgba(0,0,0,.6);padding:7px 12px;border-radius:100px;opacity:0;transition:opacity .3s;pointer-events:none;backdrop-filter:blur(4px)}
.case-figure--frame:hover::after{opacity:1}
@media(max-width:640px){.case-figure--frame .cover-crop.tall{aspect-ratio:4/3.6}}
/* framed cover: full-page screenshot shown as a browser window floating on the brand surface */
.case-cover--frame{aspect-ratio:auto;display:flex;align-items:flex-end;padding:clamp(24px,4.5vw,64px) clamp(24px,4.5vw,64px) 0;overflow:hidden}
.cover-browser{width:100%;border-radius:12px 12px 0 0;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-bottom:0;box-shadow:0 30px 70px -24px rgba(0,0,0,.65);background:#fff}
.cover-crop{aspect-ratio:16/9.2;overflow:hidden;background:var(--bg-2)}
.cover-crop img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
@media(max-width:640px){.cover-crop{aspect-ratio:4/3.4}}
/* framed thumbnail on the Polaris slate surface */
.work-thumb--framed.polaris{background:radial-gradient(130% 130% at 30% 16%,#213a5c,#0a1120)}
/* Polaris brand surface: deep slate — enterprise AI, no neon */
.ph-polaris{background:radial-gradient(120% 120% at 28% 15%,#213a5c,#0a1120),conic-gradient(from 210deg at 72% 28%,#4a7fb8,transparent 44%)!important}
/* sticky section rail (only when a case defines `anchors`) */
.case-anchors{position:sticky;top:var(--nav-h,76px);z-index:50;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-block:1px solid var(--hairline)}
.case-anchors .wrap{display:flex;gap:28px;overflow-x:auto;padding-block:14px;scrollbar-width:none;white-space:nowrap}
.case-anchors .wrap::-webkit-scrollbar{display:none}
.case-anchors a{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);transition:color .3s;flex:none}
.case-anchors a:hover{color:var(--accent)}
.anchor-target{display:block;scroll-margin-top:calc(var(--nav-h,76px) + 72px)}
.case-body>.anchor-target:first-child+*{margin-top:0}
/* wide blocks break out of the 760px column exactly like figures do */
.case-body .case-statement,.case-body .case-compare,.case-body .case-flow,.case-body .case-chain,.case-body .case-stack,.case-body .case-ui2,.case-body .case-studio{width:min(1140px,94vw);margin-inline:calc(50% - min(570px,47vw));margin-top:clamp(54px,8vw,92px)}
.case-flow h2,.case-stack h2,.case-studio h2,.case-compare h2,.chain-copy h2,.ui2-copy h2{font-family:var(--f-display);font-weight:340;font-size:clamp(1.7rem,4vw,2.6rem);letter-spacing:-.02em;line-height:1.08;margin-bottom:16px}
.case-flow .eyebrow,.case-stack .eyebrow,.case-studio .eyebrow,.case-compare .eyebrow,.chain-copy .eyebrow,.ui2-copy .eyebrow,.case-statement .eyebrow{margin-bottom:22px}
.chain-copy p,.ui2-copy p{color:var(--muted);font-size:1.06rem;line-height:1.7;margin-bottom:16px;max-width:52ch}
/* large editorial statement */
.st-text{font-family:var(--f-display);font-weight:330;font-size:clamp(1.7rem,4.2vw,3.4rem);line-height:1.12;letter-spacing:-.025em;max-width:24ch}
.st-text em{font-style:italic;color:var(--accent)}
.case-statement.sm .st-text{font-size:clamp(1.4rem,3vw,2.3rem);max-width:30ch}
.st-sub{color:var(--muted);font-size:1.05rem;margin-top:18px;max-width:56ch}
/* before → after */
.cmp-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(20px,3vw,40px);align-items:stretch;margin-top:28px}
.cmp-side{border:1px solid var(--hairline);border-radius:var(--r);padding:clamp(22px,3vw,36px);background:var(--card)}
.cmp-side.after{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.cmp-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:14px}
.cmp-side.after .cmp-label{color:var(--accent)}
.cmp-side h4{font-family:var(--f-display);font-weight:400;font-size:clamp(1.2rem,2vw,1.5rem);letter-spacing:-.01em;line-height:1.15;margin-bottom:16px}
.cmp-side ul{list-style:none;display:grid;gap:10px}
.cmp-side li{color:var(--muted);font-size:.98rem;line-height:1.5;padding-left:22px;position:relative}
.cmp-side li::before{content:"—";position:absolute;left:0;color:var(--muted)}
.cmp-side.after li::before{content:"→";color:var(--accent)}
.cmp-arrow{align-self:center;font-family:var(--f-display);font-size:2rem;color:var(--accent)}
@media(max-width:820px){.cmp-grid{grid-template-columns:1fr}.cmp-arrow{transform:rotate(90deg);justify-self:center}}
/* horizontal flow (steps → steps), optional governance band + control chips */
.flow-steps{list-style:none;display:grid;grid-template-columns:repeat(var(--n,5),1fr);gap:10px;margin-top:30px}
.flow-step{position:relative;border:1px solid var(--hairline);border-radius:12px;padding:18px;background:var(--card);display:grid;gap:8px;align-content:start}
.flow-step::after{content:"→";position:absolute;right:-13px;top:50%;transform:translateY(-50%);color:var(--accent);font-family:var(--f-display);font-size:1.15rem;background:var(--bg);line-height:1;z-index:1}
.flow-step:last-child::after{display:none}
.flow-num{font-family:var(--f-mono);font-size:11px;color:var(--accent)}
.flow-step strong{font-family:var(--f-display);font-weight:420;font-size:clamp(1rem,1.3vw,1.15rem);letter-spacing:-.01em;line-height:1.2}
.flow-step span:not(.flow-num){color:var(--muted);font-size:.9rem;line-height:1.5}
.flow-band{margin-top:14px;border:1px dashed color-mix(in srgb,var(--accent) 55%,transparent);border-radius:10px;padding:12px 18px;display:flex;justify-content:center;text-align:center}
.flow-band span{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.flow-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.flow-chips span,.st-chips span,.stack-items span{font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:var(--bg-2);border:1px solid var(--hairline);padding:7px 11px;border-radius:6px}
.flow-note{color:var(--muted);font-size:.98rem;margin-top:18px;max-width:64ch}
.flow-steps.compact{margin-top:14px}
.flow-steps.compact .flow-step{padding:14px}
@media(max-width:980px){.flow-steps{grid-template-columns:1fr 1fr 1fr}.flow-step:nth-child(3n)::after{display:none}}
@media(max-width:620px){.flow-steps{grid-template-columns:1fr;gap:22px}.flow-step::after,.flow-step:nth-child(3n)::after{display:block;content:"↓";right:auto;left:50%;top:auto;bottom:-20px;transform:translateX(-50%)}.flow-step:last-child::after{display:none}}
/* vertical reasoning chain (what → why → confidence → action) */
.case-chain{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:start}
.chain-steps{list-style:none;display:grid}
.chain-steps li{position:relative;padding:18px 0 18px 34px;border-left:1px solid var(--hairline)}
.chain-steps li::before{content:"";position:absolute;left:-5px;top:26px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.chain-steps li:last-child{border-left-color:transparent}
.chain-q{display:block;font-family:var(--f-display);font-weight:400;font-size:clamp(1.15rem,1.9vw,1.5rem);letter-spacing:-.01em;line-height:1.2}
.chain-a{display:block;color:var(--muted);font-size:.96rem;margin-top:6px;line-height:1.5}
@media(max-width:820px){.case-chain{grid-template-columns:1fr}}
/* layered system model */
.stack{display:grid;margin-top:30px}
.stack-layer{border:1px solid var(--hairline);border-radius:12px;padding:18px clamp(18px,2.5vw,28px);display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:center;background:var(--card)}
.stack-layer.gov{border-color:color-mix(in srgb,var(--accent) 55%,transparent);border-style:dashed}
.stack-layer.core{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.stack-name{font-family:var(--f-display);font-weight:420;font-size:clamp(1.05rem,1.5vw,1.25rem);letter-spacing:-.01em}
.stack-layer.gov .stack-name{color:var(--accent)}
.stack-items{display:flex;flex-wrap:wrap;gap:8px}
.stack-items span{color:var(--fg);background:var(--bg)}
.stack-arrow{display:block;width:1px;height:26px;margin:0 auto;background:var(--accent);position:relative}
.stack-arrow::after{content:"";position:absolute;left:-4px;bottom:-1px;border:5px solid transparent;border-top:7px solid var(--accent);border-bottom:0}
@media(max-width:680px){.stack-layer{grid-template-columns:1fr;gap:12px}}
/* copy + UI mock, two-up */
.case-ui2{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(36px,5vw,80px);align-items:center}
.case-ui2.rev .ui-card{order:-1}
@media(max-width:860px){.case-ui2{grid-template-columns:1fr}.case-ui2.rev .ui-card{order:0}}
/* product-like UI card — restrained, no chrome theatrics */
.ui-card{border:1px solid var(--hairline);border-radius:14px;background:var(--bg-2);padding:clamp(20px,2.6vw,30px);display:grid;gap:18px;box-shadow:0 30px 70px -40px rgba(0,0,0,.6)}
.ui-head{display:flex;justify-content:space-between;align-items:center;gap:14px}
.ui-kicker{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ui-conf{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);padding:5px 10px;border-radius:100px;white-space:nowrap}
.ui-card h4{font-family:var(--f-display);font-weight:420;font-size:clamp(1.15rem,1.8vw,1.45rem);letter-spacing:-.01em;line-height:1.2}
.rec-k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px}
.rec-sec p,.rec-sec li,.conf-missing li{color:var(--fg);font-size:.95rem;line-height:1.5}
.rec-sec ul,.conf-missing ul{list-style:none;display:grid;gap:6px}
.rec-sec li,.conf-missing li{padding-left:16px;position:relative}
.rec-sec li::before,.conf-missing li::before{content:"·";position:absolute;left:2px;color:var(--accent)}
.rec-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:520px){.rec-2{grid-template-columns:1fr}}
.rec-fine{color:var(--muted)!important;font-size:.85rem!important;margin-top:8px}
.meter{height:6px;border-radius:100px;background:var(--faint);overflow:hidden}
.meter span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:100px}
.meter.big{height:10px}
.ui-actions{display:flex;flex-wrap:wrap;gap:10px;padding-top:14px;border-top:1px solid var(--hairline)}
.ui-btn{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.04em;padding:9px 14px;border-radius:8px;border:1px solid var(--hairline);color:var(--fg)}
.ui-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.ui-btn.ghost{color:var(--muted);border-style:dashed}
/* confidence / provenance panel */
.conf-score{display:grid;gap:10px}
.conf-label{font-family:var(--f-display);font-style:italic;color:var(--muted)}
.conf-rows{display:grid;border-top:1px solid var(--hairline)}
.conf-row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--hairline);font-size:.93rem}
.conf-row span{color:var(--muted)}
.conf-row strong{font-weight:500;text-align:right}
.conf-row.warn strong{color:var(--accent-2)}
.conf-row.miss strong{color:#e0705a}
.conf-missing li{color:var(--muted)}
/* creative studio workspace */
.studio{display:grid;grid-template-columns:260px 1fr;gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:14px;overflow:hidden;margin-top:30px}
.studio-rail{background:var(--bg-2);padding:clamp(18px,2.4vw,26px);display:grid;gap:22px;align-content:start}
.st-chips{display:flex;flex-wrap:wrap;gap:6px}
.st-chips span{text-transform:none;letter-spacing:.02em;font-size:11.5px;color:var(--fg)}
.st-chips.muted span{color:var(--muted)}
.st-prompt{font-family:var(--f-mono);font-size:12px;line-height:1.55;color:var(--fg);border:1px solid var(--hairline);border-radius:8px;padding:12px;background:var(--bg)}
.studio-grid{background:var(--bg);padding:clamp(18px,2.4vw,26px);display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.st-tile{border:1px solid var(--hairline);border-radius:10px;overflow:hidden;background:var(--bg-2)}
.st-art{aspect-ratio:4/3;position:relative;padding:10px;display:flex;justify-content:space-between;align-items:flex-start;gap:6px}
.st-art.a1{background:radial-gradient(120% 120% at 30% 20%,#2a4a7a,#0b1220)}
.st-art.a2{background:radial-gradient(120% 120% at 70% 30%,#5a3a1e,#150e08)}
.st-art.a3{background:radial-gradient(120% 120% at 40% 80%,#1f4a44,#081412)}
.st-art.a4{background:radial-gradient(120% 120% at 60% 20%,#4a2a5a,#150d1c)}
.st-state{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.45);padding:5px 8px;border-radius:100px;backdrop-filter:blur(4px)}
.st-state.ok{background:rgba(58,169,154,.8)}
.st-state.cd{background:color-mix(in srgb,var(--accent) 82%,transparent)}
.st-risk{font-family:var(--f-mono);font-size:10px;color:#fff;background:rgba(224,112,90,.9);padding:5px 8px;border-radius:100px;white-space:nowrap}
.st-meta{padding:12px 12px 14px;display:grid;gap:8px}
.st-meta strong{font-size:.92rem;font-weight:500}
.st-scores{display:flex;gap:10px;flex-wrap:wrap}
.st-scores span{font-family:var(--f-mono);font-size:10.5px;color:var(--muted)}
.st-scores b{color:var(--fg);font-weight:500}
.mat-label{margin-top:34px}
@media(max-width:980px){.studio-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.studio{grid-template-columns:1fr}}
@media(max-width:520px){.studio-grid{grid-template-columns:1fr}}

/* ===== PROGRESS RESIDENTIAL blocks (shift · board · sticky phones · loop flow) ===== */
.ph-progress{background:radial-gradient(120% 120% at 28% 15%,#134540,#06181a),conic-gradient(from 210deg at 72% 28%,#2b8f84,transparent 44%)!important}
[data-theme="light"] .ph-progress{background:radial-gradient(120% 120% at 28% 15%,#CFE6E1,#E9F4F1),conic-gradient(from 210deg at 72% 28%,#A9D3CB,transparent 44%)!important}
/* placeholder figure: a normal contained figure once its image loads; a 16:9 brand box with the label while missing */
.case-figure--ph{display:grid;place-items:center;position:relative}
.case-figure--ph img{position:relative;width:100%;height:auto;max-height:86vh;object-fit:contain}
.case-figure--ph.img-missing,.case-figure--ph:not(.case-figure--img){aspect-ratio:16/9}
/* placeholder labels stay visible until the real image has actually LOADED (lazy images below the fold
   haven't loaded yet, so "image present" is not enough) */
.case-figure--ph img.ok+.case-cover-note,.bd-img img.ok+.case-cover-note,.phone-screen img.ok+.phone-label{display:none}
.case-body .case-shift,.case-body .case-board,.case-body .case-phones{width:min(1140px,94vw);margin-inline:calc(50% - min(570px,47vw));margin-top:clamp(54px,8vw,92px)}
.case-shift h2,.case-board h2,.case-phones h2{font-family:var(--f-display);font-weight:340;font-size:clamp(1.7rem,4vw,2.6rem);letter-spacing:-.02em;line-height:1.08;margin-bottom:16px}
.case-shift .eyebrow,.case-board .eyebrow,.case-phones .eyebrow{margin-bottom:22px}
/* system-centered vs resident-centered */
.shift-grid{display:grid;grid-template-columns:1fr auto 1.15fr;gap:clamp(20px,3vw,40px);align-items:stretch;margin-top:28px}
.sh-panel{border:1px solid var(--hairline);border-radius:var(--r);padding:clamp(22px,3vw,34px);background:var(--card)}
.sh-panel.res{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 5%,transparent)}
.sh-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:14px}
.sh-panel.res .sh-label{color:var(--accent)}
.sh-panel h4{font-family:var(--f-display);font-weight:400;font-size:clamp(1.15rem,1.9vw,1.45rem);letter-spacing:-.01em;line-height:1.15;margin-bottom:18px}
.sh-opts{display:grid;gap:8px}
.sh-opt{border:1px solid var(--hairline);border-radius:10px;padding:12px 14px;font-size:.95rem;color:var(--muted);background:var(--bg)}
.sh-note{color:var(--muted);font-size:.9rem;margin-top:16px}
.sh-input{border:1px solid var(--hairline);border-radius:12px;padding:14px 16px;background:var(--bg);font-size:.98rem;color:var(--fg);display:flex;justify-content:space-between;align-items:center;gap:12px}
.sh-input::after{content:"→";color:var(--accent);flex:none}
.sh-utts{display:grid;gap:8px;margin-top:16px}
.sh-utt{font-family:var(--f-display);font-style:italic;font-size:clamp(1rem,1.5vw,1.2rem);color:var(--muted);line-height:1.3}
.sh-derive{margin-top:22px;border-top:1px solid var(--hairline);padding-top:20px}
.sh-derive .flow-chips{margin-top:4px}
@media(max-width:860px){.shift-grid{grid-template-columns:1fr}.shift-grid .cmp-arrow{transform:rotate(90deg);justify-self:center}}
/* research board */
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
.bd-tile{border:1px solid var(--hairline);border-radius:12px;padding:18px;background:var(--card);display:grid;gap:8px;align-content:start;min-height:120px}
.bd-tile.note{background:color-mix(in srgb,var(--accent) 6%,transparent);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.bd-tile.system{border-style:dashed}
.bd-tile.image{grid-column:span 2;grid-row:span 2;padding:0;overflow:hidden;gap:6px}
.bd-img{aspect-ratio:16/10;background:var(--bg-2);display:grid;place-items:center;position:relative}
.bd-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bd-tile.image .bd-label{padding:12px 18px 0}.bd-tile.image p{padding:0 18px 16px}
.bd-label{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.bd-tile p{color:var(--muted);font-size:.92rem;line-height:1.5;margin:0}
@media(max-width:980px){.board{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.board{grid-template-columns:1fr}.bd-tile.image{grid-column:span 1;grid-row:span 1}}
/* sticky phones */
.phones-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(36px,5vw,80px);margin-top:30px;align-items:start}
.phones-media{position:sticky;top:calc(var(--nav-h,76px) + 96px);display:flex;gap:16px;justify-content:center;align-items:flex-start}
.phone{width:min(240px,46%);aspect-ratio:9/19;border-radius:36px;border:1px solid var(--hairline);background:var(--bg-2);padding:10px;box-shadow:0 30px 70px -40px rgba(0,0,0,.6)}
.phone:nth-child(2){margin-top:56px}
.phone-screen{height:100%;border-radius:28px;overflow:hidden;display:grid;place-items:center;position:relative;background:var(--bg)}
.phone-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phone-label{position:relative;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75);border:1px dashed rgba(255,255,255,.35);padding:8px 12px;border-radius:14px;text-align:center;max-width:82%;line-height:1.5}
[data-theme="light"] .phone-label{color:rgba(14,14,15,.6);border-color:rgba(14,14,15,.3)}
.phones-items{display:grid;gap:clamp(28px,4vw,48px)}
.ph-item{border-top:1px solid var(--hairline);padding-top:22px}
.ph-item h4{font-family:var(--f-display);font-weight:400;font-size:clamp(1.15rem,1.9vw,1.45rem);letter-spacing:-.01em;margin:10px 0 8px}
.ph-item p{color:var(--muted);font-size:1rem;line-height:1.6}
@media(max-width:860px){.phones-grid{grid-template-columns:1fr}.phones-media{position:static}.phone{width:min(200px,44%)}}
/* banner cover with fallback: hide the banner box if its file is missing and reveal the phone-frame cover instead */
.cover-swap.no-img{display:none}
.cover-fallback{display:none}
.cover-swap.no-img+.cover-fallback{display:flex}
.case-cover--clean.rounded .case-cover-img{border-radius:var(--r)}
/* phone covers + phone thumbnails: mobile screens floating on the brand surface, cropped at the bottom */
.case-cover--phones{aspect-ratio:16/8.5;display:flex;justify-content:center;align-items:flex-start;gap:clamp(18px,3vw,44px);padding:clamp(28px,5vw,64px) clamp(28px,5vw,64px) 0;overflow:hidden}
.case-cover--phones .phone{width:min(300px,30%);aspect-ratio:9/18;border-radius:40px;padding:12px;flex:none}
.case-cover--phones .phone:nth-child(2){margin-top:clamp(28px,5vw,72px)}
.case-cover--phones .phone-screen img,.wt-phones .phone-screen img{object-position:top}
@media(max-width:640px){.case-cover--phones{aspect-ratio:4/3.6;gap:14px}.case-cover--phones .phone{width:min(200px,42%);border-radius:30px;padding:8px}}
.work-thumb.wt-phones{display:flex;justify-content:center;align-items:flex-start;gap:clamp(12px,2vw,24px);padding:clamp(22px,3.5vw,44px) clamp(22px,3.5vw,44px) 0}
.work-thumb.wt-phones .phone{width:min(200px,34%);aspect-ratio:9/18;border-radius:32px;padding:8px;flex:none}
.work-thumb.wt-phones .phone:nth-child(2){margin-top:9%}
/* phone strip: a horizontal, scroll-snapped flow of screens */
.case-body .case-strip{width:min(1140px,94vw);margin-inline:calc(50% - min(570px,47vw));margin-top:clamp(54px,8vw,92px)}
.case-strip h2{font-family:var(--f-display);font-weight:340;font-size:clamp(1.7rem,4vw,2.6rem);letter-spacing:-.02em;line-height:1.08;margin-bottom:16px}
.case-strip .eyebrow{margin-bottom:22px}
.strip-track{display:flex;gap:clamp(16px,2vw,28px);overflow-x:auto;padding:26px 4px 18px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--hairline) transparent;-webkit-overflow-scrolling:touch}
.strip-item{flex:0 0 clamp(190px,17vw,230px);scroll-snap-align:start;margin:0}
.strip-item .phone{width:100%;aspect-ratio:9/19;border-radius:32px;padding:8px}
.strip-item .phone-screen img,.case-cover--phones .phone-screen img{cursor:zoom-in}
.strip-item figcaption{margin-top:12px;display:grid;gap:4px}
.strip-item figcaption strong{font-family:var(--f-display);font-weight:420;font-size:1rem;letter-spacing:-.01em;line-height:1.2}
.strip-item figcaption span:not(.flow-num){color:var(--muted);font-size:.86rem;line-height:1.45}
/* flow loop variant: parallel, bidirectional */
.case-flow.loop .flow-step::after{content:"↔"}
.case-flow.loop .flow-step{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
@media(max-width:620px){.case-flow.loop .flow-step::after{content:"↕"}}

/* ===== AGENT LAYER: floating dock + side panel (every page) ===== */
.agent-dock{position:fixed;left:50%;bottom:22px;z-index:300;display:flex;align-items:center;gap:10px;width:min(620px,calc(100% - 32px));padding:7px 7px 7px 18px;border-radius:100px;
  background:var(--glass-strong);border:1px solid var(--glass-border);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 24px 60px -24px rgba(0,0,0,.6);
  transform:translate(-50%,28px);opacity:0;pointer-events:none;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s,box-shadow .3s}
.agent-dock.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
body.agent-open .agent-dock{transform:translate(-50%,28px);opacity:0;pointer-events:none}
.agent-dock:focus-within{box-shadow:inset 0 1px 0 var(--glass-hi),0 24px 60px -24px rgba(0,0,0,.6),0 0 0 1px var(--accent)}
.agent-dock .spark{width:18px;height:18px;color:var(--accent);flex:none}
.dock-input{flex:1;min-width:0;font-size:15px}
.dock-kbd{font-family:var(--f-mono);font-size:11px;color:var(--muted);border:1px solid var(--hairline);border-radius:6px;padding:3px 7px;flex:none}
.agent-dock .agent-send{width:40px;height:40px;border-radius:50%}

.agent-panel{position:fixed;top:0;right:0;height:100dvh;width:min(480px,100%);z-index:400;display:flex;flex-direction:column;
  background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%);
  border-left:1px solid var(--glass-border);box-shadow:inset 1px 0 0 var(--glass-hi),-30px 0 80px -40px rgba(0,0,0,.6);
  transform:translateX(104%);visibility:hidden;transition:transform .6s cubic-bezier(.76,0,.24,1),visibility 0s .6s}
body.agent-open .agent-panel{transform:none;visibility:visible;transition:transform .6s cubic-bezier(.76,0,.24,1)}
.ap-head{display:flex;align-items:center;gap:10px;padding:18px 16px 14px 22px;border-bottom:1px solid var(--hairline)}
.ap-title{display:flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg)}
.ap-title .spark{width:16px;height:16px;color:var(--accent)}
.ap-ctx{margin-left:auto;font-family:var(--f-mono);font-size:11px;color:var(--muted);border:1px solid var(--hairline);border-radius:100px;padding:4px 10px;white-space:nowrap;max-width:46%;overflow:hidden;text-overflow:ellipsis}
.ap-clear{font-family:var(--f-mono);font-size:11px;color:var(--muted);background:none;border:0;cursor:pointer;padding:6px}
.ap-clear:hover{color:var(--fg)}
.ap-close{width:34px;height:34px;flex:none;border-radius:50%;border:1px solid var(--hairline);background:none;color:var(--fg);display:grid;place-items:center;cursor:pointer}
.ap-close svg{width:16px;height:16px}
.ap-close:hover{border-color:var(--accent);color:var(--accent)}
.ap-thread{flex:1;overflow-y:auto;padding:22px 22px 8px;scroll-behavior:smooth}
.ap-intro{color:var(--muted);font-size:.95rem;line-height:1.65}
.ap-turn{padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--hairline)}
.ap-turn:last-child{border-bottom:0;margin-bottom:0}
.ap-turn .agent-steps.collapse{display:none}
.ap-chips{display:flex;gap:8px;overflow-x:auto;padding:10px 22px;scrollbar-width:none;border-top:1px solid var(--hairline)}
.ap-chips::-webkit-scrollbar{display:none}
.ap-chips .agent-chip{white-space:nowrap;flex:none}
.ap-bar{display:flex;align-items:center;gap:10px;padding:12px 14px calc(14px + env(safe-area-inset-bottom)) 22px;border-top:1px solid var(--hairline)}
.ap-bar .agent-input{flex:1;min-width:0}
.ap-bar .agent-send{width:42px;height:42px;border-radius:50%}
/* intent modes */
.ap-modes{display:flex;align-items:center;gap:6px;padding:10px 22px 12px;flex-wrap:wrap;border-bottom:1px solid var(--hairline);flex:none}
.ap-modes-label{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.ap-mode{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);border:1px solid var(--hairline);border-radius:100px;padding:5px 11px;background:none;cursor:pointer;transition:all .2s}
.ap-mode:hover{color:var(--fg);border-color:var(--accent)}
.ap-mode.on{color:var(--fg);border-color:var(--accent);background:var(--accent-soft)}
/* structured answers */
.agent-answer p{margin:0 0 10px}
.agent-answer p:last-child{margin-bottom:0}
.aa-label{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:16px 0 8px}
.aa-label:first-child{margin-top:0}
.agent-answer ul{list-style:none;padding:0;margin:0 0 10px;display:grid;gap:7px}
.agent-answer li{position:relative;padding-left:16px;font-size:.96rem;line-height:1.55}
.agent-answer li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.aa-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}
.aa-chip{font-size:12.5px;line-height:1;color:var(--fg);border:1px solid var(--hairline);border-radius:100px;padding:7px 11px;background:var(--card);opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.aa-chip.in{opacity:1;transform:none}
/* quiet nudge above the dock */
.agent-nudge{position:fixed;left:50%;bottom:86px;z-index:299;display:flex;align-items:center;gap:4px;padding:4px 6px 4px 4px;border-radius:100px;
  background:var(--glass-strong);border:1px solid var(--glass-border);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 18px 50px -20px rgba(0,0,0,.6);transform:translate(-50%,14px);opacity:0;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s;max-width:calc(100% - 32px)}
.agent-nudge.show{transform:translate(-50%,0);opacity:1}
.nudge-q{display:flex;align-items:center;gap:8px;border:0;background:none;color:var(--fg);font-family:var(--f-mono);font-size:12px;padding:7px 10px;cursor:pointer;text-align:left}
.nudge-q .spark{width:14px;height:14px;color:var(--accent);flex:none}
.nudge-q:hover span{color:var(--accent)}
.nudge-x{width:28px;height:28px;border-radius:50%;border:0;background:none;color:var(--muted);font-size:18px;cursor:pointer;flex:none}
.nudge-x:hover{color:var(--fg)}
body.agent-open .agent-nudge{opacity:0;pointer-events:none}
@media (max-width:640px){.dock-kbd{display:none}.agent-dock{bottom:14px;width:calc(100% - 24px)}.ap-ctx{display:none}.agent-nudge{bottom:78px}}
@media (prefers-reduced-motion:reduce){.agent-dock,.agent-panel{transition:none}}

/* ===== PASSWORD GATE (gate.html) — the portfolio seen through smooth frosted glass (ribs + ripple removed 2026-10-09: user wanted it smooth) ===== */
.gate-body{min-height:100dvh;display:grid;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr);overflow:hidden;position:relative;isolation:isolate}
.gate,.gate-top{min-width:0;max-width:100%}
.gate-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--bg)}
.gate-bg-img{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;object-position:50% 32%;display:block;
  filter:blur(26px) saturate(1.35) brightness(1.12);transform:scale(1.02);animation:gateDrift 28s ease-in-out infinite alternate}
@keyframes gateDrift{from{transform:scale(1.02) translateY(0)}to{transform:scale(1.06) translateY(-2.5%)}}
.gb-light{display:none}
[data-theme="light"] .gb-dark{display:none}
[data-theme="light"] .gb-light{display:block;filter:blur(26px) saturate(1.15)}
/* a dim veil so the type stays legible over the bright blobs */
.gate-veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 35%,transparent),color-mix(in srgb,var(--bg) 12%,transparent) 45%,color-mix(in srgb,var(--bg) 55%,transparent))}
/* unlock: the form and header lift away first, then the glass clears into the real homepage behind it */
.gate-top,main.gate{transition:opacity .45s var(--ease),transform .45s var(--ease)}
body.gate-open .gate-top,body.gate-open main.gate{opacity:0;transform:translateY(-14px);pointer-events:none}
body.gate-open .gate-bg-img{filter:blur(0) saturate(1);transition:filter .8s cubic-bezier(.76,0,.24,1) .1s;animation:gateImgOut .45s var(--ease) .75s forwards}
body.gate-open .gate-veil{opacity:0;transition:opacity .7s .1s}
/* the cleared still then dissolves into the page background so the homepage loader picks up on the same dark canvas */
@keyframes gateImgOut{to{opacity:0}}

.gate-top{display:flex;align-items:center;justify-content:space-between;padding:clamp(14px,2vw,22px) clamp(18px,4vw,48px)}
.gate-brand{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-display);font-size:1.15rem;letter-spacing:-.01em;color:var(--fg)}
.gate-brand .brand-logo{width:44px;height:44px}
.gate-status{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;color:var(--fg);padding:8px 14px;border-radius:100px;
  background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:inset 0 1px 0 var(--glass-hi)}
.gate-status i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
@media (max-width:520px){.gate-brand span{display:none}}

.gate{align-self:center;width:min(100%,760px);margin:0 auto;padding:clamp(24px,5vw,60px) clamp(18px,4vw,48px) clamp(60px,10vw,120px);animation:gateIn 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes gateIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.gate-eyebrow{display:block;margin-bottom:18px}
.gate-title{font-family:var(--f-display);font-weight:340;font-size:clamp(2.4rem,6.4vw,4.6rem);line-height:1;letter-spacing:-.03em;margin-bottom:22px}
.gate-line{display:block}
.gate-title em{font-style:italic;color:var(--accent);font-weight:400}
.gate-lede{color:var(--muted);font-size:clamp(1rem,1.4vw,1.12rem);line-height:1.6;max-width:44ch;margin-bottom:28px}

/* the password bar borrows the hero agent console's anatomy */
.gate-console{max-width:640px;border:1px solid var(--glass-border);border-radius:20px;background:var(--glass);
  backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 30px 80px -30px rgba(0,0,0,.55),0 0 0 1px var(--accent-soft);transition:box-shadow .3s}
.gate-console:focus-within{box-shadow:inset 0 1px 0 var(--glass-hi),0 30px 80px -30px rgba(0,0,0,.55),0 0 0 1px var(--accent)}
.gate-bar{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 20px}
.gate-bar .spark{width:20px;height:20px;flex:none;color:var(--accent)}
.gate-input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--fg);font-family:var(--f-sans);font-size:17px;height:46px}
.gate-input::placeholder{color:var(--muted)}
.gate-eye{width:38px;height:38px;flex:none;border-radius:10px;border:0;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.gate-eye:hover{color:var(--fg)}
.gate-eye svg{width:20px;height:20px}
.gate-eye .eye-off{display:none}
.gate-eye.on .eye-on{display:none}
.gate-eye.on .eye-off{display:block}
.gate-send .ico-arrow{display:none}
.gate-send .ico-lock{display:block}
.gate-console:focus-within .gate-send .ico-lock,.gate-console.busy .gate-send .ico-lock{display:none}
.gate-console:focus-within .gate-send .ico-arrow,.gate-console.busy .gate-send .ico-arrow{display:block}
.gate-console.busy .gate-send{opacity:.75;pointer-events:none}
.gate-steps{display:grid;gap:8px;padding:0 22px}
.gate-steps:not(:empty){padding-bottom:14px}
.gate-msg{min-height:20px;margin:0;padding:0 22px 14px;font-family:var(--f-mono);font-size:12.5px;color:var(--muted)}
.gate-msg:empty{padding-bottom:0;min-height:0}
.gate-msg.err{color:#E5533D}
.gate-msg.ok{color:var(--accent)}
.gate-msg.warn{color:var(--accent-2)}
.gate-console.shake{animation:gateShake .4s}
@keyframes gateShake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.gate-console.ok{box-shadow:inset 0 1px 0 var(--glass-hi),0 30px 80px -30px rgba(0,0,0,.55),0 0 0 1px var(--accent),0 0 60px -10px var(--glow)}

.gate-roles{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.gate-foot{margin-top:34px;font-size:.9rem;color:var(--muted)}
.gate-foot a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.gate-foot a:hover{color:var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.gate,.gate-console.shake,.gate-bg-img{animation:none}}

/* ===== GLASS APPLICATION (overrides; kept late in the cascade on purpose) ===== */
header.nav.scrolled{background:color-mix(in srgb,var(--bg) 60%,transparent);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border-bottom:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-hi)}
.agent-console{background:var(--glass);border-color:var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-hi),0 30px 80px -30px rgba(0,0,0,.55),0 0 0 1px var(--accent-soft)}
.hero-status,.theme-toggle,.about-more{background:var(--glass);border-color:var(--glass-border);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:inset 0 1px 0 var(--glass-hi)}
.case-anchors{background:color-mix(in srgb,var(--bg) 66%,transparent);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);box-shadow:inset 0 1px 0 var(--glass-hi)}
.ui-card{background:var(--glass);border-color:var(--glass-border);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:inset 0 1px 0 var(--glass-hi),0 30px 70px -40px rgba(0,0,0,.55)}
.cc-arrow{background:var(--glass-strong);border-color:var(--glass-border);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:inset 0 1px 0 var(--glass-hi)}
.lb-close,.lb-prev,.lb-next{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.st-state,.st-risk,.case-cover-note,.phone-label{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

.next-project{border-top:1px solid var(--hairline);padding-block:clamp(50px,8vw,110px);text-align:center}
.next-project span{font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.next-project a{display:block;font-family:var(--f-display);font-weight:340;font-size:clamp(2rem,7vw,5rem);letter-spacing:-.02em;
  margin-top:16px;transition:.4s var(--ease)}
.next-project a:hover{color:var(--accent);letter-spacing:0}

/* RESPONSIVE */
@media(max-width:1000px){
  .agentic-grid,.lead-grid,.about-grid{grid-template-columns:1fr}
  .agent-stage{max-width:480px;margin-inline:auto;width:100%}
  .about-grid .portrait{max-width:380px}
}
@media(max-width:860px){
  .nav-links{position:fixed;inset:0;background:var(--bg);flex-direction:column;justify-content:center;gap:34px;
    transform:translateX(100%);transition:transform .6s var(--ease);z-index:150}
  .nav-links.open{transform:none}
  .nav-links a{font-size:24px;font-family:var(--f-display)}
  .menu-btn{display:grid;z-index:200;width:42px;height:42px;border:1px solid var(--hairline);border-radius:50%;place-items:center}
  .menu-btn span{display:block;width:16px;height:1.5px;background:var(--fg);transition:.4s var(--ease);position:relative}
  .menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--fg);transition:.4s var(--ease)}
  .menu-btn span::before{top:-5px}.menu-btn span::after{top:5px}
  .menu-btn.open span{background:transparent}
  .menu-btn.open span::before{top:0;transform:rotate(45deg)}
  .menu-btn.open span::after{top:0;transform:rotate(-45deg)}
  .work-card.span-7,.work-card.span-5,.work-card.span-6{grid-column:span 12}
  .metrics{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){.step{grid-template-columns:1fr;gap:14px}}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
  .line-mask>span{transform:none}
}

/* =====================================================================
   CREATIVE LAYER v2 — personality + subtle motion (2026-09)
   All motion respects prefers-reduced-motion.
   ===================================================================== */

/* 1. Page-to-page view transitions (cross-document; progressive) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .32s cubic-bezier(.76,0,.24,1) both}
::view-transition-new(root){animation:vtIn .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-10px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(14px)}}
header.nav{view-transition-name:site-header}
::view-transition-group(site-header){animation-duration:.01s}

/* 2. Scroll progress — a hair of accent along the top edge */
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:260;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--accent),var(--accent-2));opacity:.9}

/* 3. Cursor label — the cursor speaks ("Open", "Ask", "View") */
.cursor-label{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--accent);padding:6px 10px;border-radius:100px;transform:translate(14px,14px) scale(.6);opacity:0;transition:opacity .2s,transform .3s var(--ease);white-space:nowrap}
.cursor-label.show{opacity:1;transform:translate(16px,16px) scale(1)}
@media (hover:none),(max-width:860px){.cursor-label{display:none}}

/* 4. Aurora — slow, theme-aware colour drift behind the hero (under the network canvas) */
/* sits above the hero gradient (which fades to the page colour) and below the copy */
.aurora{position:absolute;inset:-15%;z-index:1;pointer-events:none;filter:blur(56px);opacity:.9;mix-blend-mode:screen}
.aurora i{position:absolute;border-radius:50%;width:56vw;height:56vw;max-width:900px;max-height:900px;will-change:transform}
.aurora i:nth-child(1){left:2%;top:10%;background:radial-gradient(circle at 40% 40%,color-mix(in srgb,var(--accent) 42%,transparent),transparent 62%);animation:aur1 26s ease-in-out infinite alternate}
.aurora i:nth-child(2){right:0;top:-6%;background:radial-gradient(circle at 60% 40%,color-mix(in srgb,var(--accent-2) 30%,transparent),transparent 62%);animation:aur2 31s ease-in-out infinite alternate}
.aurora i:nth-child(3){left:34%;bottom:-16%;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--fg) 10%,transparent),transparent 62%);animation:aur3 37s ease-in-out infinite alternate}
@keyframes aur1{to{transform:translate(12vw,8vh) scale(1.15)}}
@keyframes aur2{to{transform:translate(-10vw,12vh) scale(.9)}}
@keyframes aur3{to{transform:translate(-8vw,-10vh) scale(1.1)}}
[data-theme="light"] .aurora{opacity:.55;mix-blend-mode:multiply;filter:blur(70px)}
[data-theme="light"] .aurora i:nth-child(1){background:radial-gradient(circle at 40% 40%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 62%)}
[data-theme="light"] .aurora i:nth-child(2){background:radial-gradient(circle at 60% 40%,color-mix(in srgb,var(--accent-2) 16%,transparent),transparent 62%)}
[data-theme="light"] .aurora i:nth-child(3){background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--fg) 6%,transparent),transparent 62%)}
.hero{isolation:isolate}
.hero>.wrap{position:relative;z-index:3}

/* 5. Type with personality — Fraunces' SOFT/WONK axes wake up on hover */
.hero h1 em,.contact h2 em,.about-copy h2 em{transition:font-variation-settings .6s var(--ease),color .3s}
.hero h1 em:hover,.contact h2 em:hover,.about-copy h2 em:hover{font-variation-settings:"SOFT" 100,"WONK" 1}

/* 6. Work cards — quiet 3D tilt that follows the pointer */
.work-card{transform-style:preserve-3d;--rx:0deg;--ry:0deg;--mx:50%;--my:50%}
.work-card.tilting{transition:transform .12s linear,border-color .5s}
.work-card:hover{transform:translateY(-6px) perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry))}
.work-card::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,255,255,.10),transparent 60%)}
.work-card:hover::before{opacity:1}
[data-theme="light"] .work-card::before{background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,255,255,.55),transparent 60%)}
.work-card>.work-arrow,.work-card>.work-meta{position:relative}

/* 7. "Now" strip — a living line in the About teaser */
.now-strip{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin-top:22px;padding-top:18px;border-top:1px solid var(--hairline);font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;color:var(--muted)}
.now-strip b{color:var(--fg);font-weight:500}
.now-strip .live{display:inline-flex;align-items:center;gap:8px}
.now-strip .live i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent-soft);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--accent-soft)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.now-strip .rot{display:inline-grid}
.now-strip .rot span{grid-area:1/1;opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s var(--ease);color:var(--fg)}
.now-strip .rot span.on{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .aurora i,.now-strip .live i{animation:none}
  .work-card:hover{transform:translateY(-6px)}
}

/* ===== ABOUT · AT A GLANCE — bento grid ===== */
.glance .eyebrow{margin-bottom:clamp(22px,3vw,32px)}
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(150px,auto);gap:14px}
.tile{position:relative;padding:clamp(20px,2.4vw,28px);border-radius:20px;background:var(--glass);border:1px solid var(--glass-border);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:inset 0 1px 0 var(--glass-hi);
  display:flex;flex-direction:column;gap:12px;min-width:0;transition:transform .5s var(--ease),border-color .4s;overflow:hidden}
.tile::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;background:radial-gradient(60% 50% at 80% 0%,var(--glow),transparent 70%)}
.tile:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.tile:hover::after{opacity:.6}
.tile-k{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tile-p{color:var(--muted);font-size:.92rem;line-height:1.55;margin-top:auto}
.stat-num{font-family:var(--f-display);font-weight:340;font-size:clamp(4rem,8vw,7.5rem);line-height:.9;letter-spacing:-.04em;color:var(--fg)}
.stat-num em{font-style:normal;color:var(--accent);font-variation-settings:"SOFT" 100,"WONK" 1}
.stat-num.sm{font-size:clamp(3rem,5vw,4.4rem)}
.stat-lbl{font-size:1rem;color:var(--fg);max-width:22ch}
.tile-chips{display:flex;flex-wrap:wrap;gap:6px}
.tile-chips span{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.02em;color:var(--fg);padding:6px 10px;border-radius:100px;border:1px solid var(--hairline);background:var(--card)}
.tile-chips.lg span{font-size:12.5px;padding:8px 13px}
.tool-rows{display:grid;gap:12px}
.tool-rows>div{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:start}
.tool-lbl{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);padding-top:7px}
.tile-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tile-list li{display:flex;gap:12px;align-items:baseline;font-family:var(--f-display);font-size:clamp(1.15rem,1.5vw,1.4rem);letter-spacing:-.01em}
.tile-list li b{font-family:var(--f-mono);font-weight:500;font-size:11px;color:var(--accent);letter-spacing:.1em}
.lead-row{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;color:var(--fg);font-size:.95rem;line-height:1.45}
.lead-num{font-family:var(--f-display);font-size:2.4rem;line-height:1;color:var(--accent);letter-spacing:-.03em}
.place-city{font-family:var(--f-display);font-size:clamp(2rem,3vw,2.8rem);letter-spacing:-.03em;line-height:1}
.place-time{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.place-time b{color:var(--fg);font-weight:500}
.place-time i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 2.4s ease-out infinite}
/* placement (6 columns) */
.t-stat{grid-column:span 2;grid-row:span 2}
.t-tools{grid-column:span 4}
.t-principles{grid-column:span 2}
.t-lead{grid-column:span 2}
.t-certs{grid-column:span 2}
.t-ind{grid-column:span 2}
.t-place{grid-column:span 2}
@media(max-width:960px){.bento{grid-template-columns:repeat(2,1fr)}.t-stat{grid-column:span 2;grid-row:span 1}.t-tools,.t-certs,.t-ind{grid-column:span 2}.t-principles,.t-lead,.t-place{grid-column:span 1}.tool-rows>div{grid-template-columns:1fr}.tool-lbl{padding-top:0}}
@media(max-width:560px){.bento{grid-template-columns:1fr}.bento .tile{grid-column:span 1!important}}
@media (prefers-reduced-motion:reduce){.place-time i{animation:none}}

/* ===== HARNESS FOR DESIGN (process teaser) ===== */
.harness-teaser{margin-top:clamp(28px,4vw,48px)}
.ht-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--r);overflow:hidden}
.ht{background:var(--bg);padding:clamp(22px,2.6vw,36px);display:flex;flex-direction:column;gap:12px;position:relative;isolation:isolate}
/* same hover recipe as .post: inset rounded fill, opacity-only transition */
.ht::before{content:"";position:absolute;inset:6px;border-radius:18px;background:var(--card);opacity:0;transition:opacity .35s var(--ease);z-index:-1;pointer-events:none}
.ht:hover::before{opacity:1}
.ht-n{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--accent)}
.ht h3{font-family:var(--f-display);font-weight:380;font-size:clamp(1.25rem,1.7vw,1.6rem);line-height:1.1;letter-spacing:-.015em}
.ht p{color:var(--muted);font-size:.93rem;line-height:1.6;margin-top:auto}
.ht-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:22px}
.ht-cta-k{font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;color:var(--muted)}
.ht-ask{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg);padding:14px 20px;border-radius:100px;border:1px solid var(--glass-border);background:var(--glass);cursor:pointer;
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:inset 0 1px 0 var(--glass-hi);transition:border-color .3s,transform .3s}
.ht-ask:hover{border-color:var(--accent);transform:translateY(-2px)}
.ht-ask svg{width:16px;height:16px}
.ht-ask .spark{color:var(--accent)}
@media(max-width:1000px){.ht-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ht-grid{grid-template-columns:1fr}}

/* ===== WORK · view switch ===== */
.work-tools{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:clamp(26px,4vw,46px)}
.work-tools .work-filters{margin-bottom:0;flex:1}
.work-view{display:inline-flex;gap:4px;padding:4px;border-radius:100px;border:1px solid var(--glass-border);background:var(--glass);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:inset 0 1px 0 var(--glass-hi);flex:none}
.wv{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px 14px;border-radius:100px;border:0;background:none;cursor:pointer;transition:color .3s,background .3s}
.wv svg{width:14px;height:14px}
.wv:hover{color:var(--fg)}
.wv.on{color:var(--fg);background:var(--accent-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}

/* ===== WORK · ORBIT (3D coverflow) ===== */
.orbit-ui{display:none}
.work-grid.mode-orbit{display:block;position:relative;height:clamp(520px,74vh,720px);perspective:1600px;perspective-origin:50% 42%;
  /* full-bleed stage: stretch to the viewport edges and clip there, so side cards still bleed past the
     content column but can never widen the page (mobile browsers zoom out otherwise) */
  margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);overflow-x:clip;overflow-y:visible}
.work-grid.mode-orbit .work-card{position:absolute;left:50%;top:0;width:min(760px,78%);height:calc(100% - 92px);min-height:0;margin:0;grid-column:auto!important;
  transform:translateX(-50%) translateX(calc(var(--o,0) * 58%)) translateZ(calc(var(--d,0) * -280px)) rotateY(calc(var(--o,0) * -34deg)) scale(calc(1 - var(--d,0) * .06));
  transform-origin:50% 50%;transition:transform 1s var(--ease),opacity .8s,filter .8s,border-color .5s;z-index:calc(10 - var(--d,0));opacity:calc(1 - var(--d,0) * .28);filter:brightness(calc(1 - var(--d,0) * .28));will-change:transform}
.work-grid.mode-orbit .work-card:hover{transform:translateX(-50%) translateX(calc(var(--o,0) * 58%)) translateZ(calc(var(--d,0) * -280px)) rotateY(calc(var(--o,0) * -34deg)) scale(calc(1 - var(--d,0) * .06))}
.work-grid.mode-orbit .work-card.far{opacity:0;pointer-events:none}
.work-grid.mode-orbit .work-card.is-hidden{display:none}
.work-grid.mode-orbit .work-card.is-solo{grid-column:auto!important;min-height:0}
.work-grid.mode-orbit .work-card:not(.active) .work-meta,.work-grid.mode-orbit .work-card:not(.active) .work-arrow{opacity:0;transition:opacity .4s}
.work-grid.mode-orbit .work-card.active .work-meta{opacity:1;transition:opacity .5s .35s}
.work-grid.mode-orbit .work-card::after{background:linear-gradient(180deg,transparent 30%,color-mix(in srgb,var(--bg) 60%,transparent) 55%,var(--bg) 100%)}
.work-grid.mode-orbit .work-card.active{border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 60px 120px -50px rgba(0,0,0,.8),0 0 0 1px var(--accent-soft)}
/* mirror-floor */
.work-grid.mode-orbit::after{content:"";position:absolute;left:0;right:0;bottom:60px;height:160px;pointer-events:none;background:radial-gradient(60% 100% at 50% 100%,var(--glow),transparent 70%);opacity:.35;filter:blur(30px)}
.work-grid.mode-orbit .orbit-ui{display:flex;align-items:center;justify-content:center;gap:18px;position:absolute;left:0;right:0;bottom:0;z-index:20}
.ob-prev,.ob-next{width:44px;height:44px;border-radius:50%;border:1px solid var(--glass-border);background:var(--glass);color:var(--fg);display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:inset 0 1px 0 var(--glass-hi);transition:border-color .3s,transform .3s}
.ob-prev:hover,.ob-next:hover{border-color:var(--accent);transform:translateY(-2px)}
.ob-prev svg,.ob-next svg{width:18px;height:18px}
.ob-dots{display:flex;gap:8px}
.ob-dots i{width:6px;height:6px;border-radius:50%;background:var(--hairline);transition:width .4s var(--ease),background .3s;cursor:pointer}
.ob-dots i.on{width:26px;background:var(--accent)}
@media(max-width:860px){.work-grid.mode-orbit{height:clamp(440px,70vh,560px);perspective:1000px}.work-grid.mode-orbit .work-card{width:86%;transform:translateX(-50%) translateX(calc(var(--o,0) * 70%)) translateZ(calc(var(--d,0) * -220px)) rotateY(calc(var(--o,0) * -28deg))}}

/* ===== WORK · STACK (scroll-driven stacking cards) ===== */
.work-grid.mode-stack{display:block}
.work-grid.mode-stack .work-card{position:sticky;top:calc(var(--nav-h,80px) + 24px + var(--i,0) * 12px);height:min(72vh,680px);min-height:0;margin-bottom:28vh;grid-column:auto!important;
  transform:scale(var(--s,1));transform-origin:50% 0;transition:border-color .5s;box-shadow:0 -30px 80px -40px rgba(0,0,0,.7);background:var(--bg)}
.work-grid.mode-stack .work-card:hover{transform:scale(var(--s,1))}
.work-grid.mode-stack .work-card:last-child{margin-bottom:0}
.work-grid.mode-stack .work-card.is-hidden{display:none}
.work-grid.mode-stack .work-card.is-solo{grid-column:auto!important;min-height:0}
.work-grid.mode-stack .work-meta{padding:clamp(28px,4vw,56px)}
.work-grid.mode-stack .work-meta h3{font-size:clamp(2rem,4.6vw,4rem)}
.work-grid.mode-stack .work-meta p{max-width:56ch;font-size:1.05rem}
.work-grid.mode-stack .work-thumb{transform:scale(1.02)}
.work-grid.mode-stack .work-card .stack-idx{position:absolute;top:clamp(22px,3vw,36px);left:clamp(22px,3vw,40px);font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--fg);padding:8px 12px;border-radius:100px;background:color-mix(in srgb,var(--bg) 68%,transparent);border:1px solid var(--hairline);backdrop-filter:blur(6px);z-index:2}
.stack-idx{display:none}
.work-grid.mode-stack .stack-idx{display:inline-block}
@media (prefers-reduced-motion:reduce){.work-grid.mode-orbit .work-card{transition:none}}

/* ===== ABOUT · PERIODIC TABLE OF SKILLS ===== */
.pt-legend{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(20px,3vw,32px) 0 18px}
.pt-key{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted);padding:8px 13px;border-radius:100px;border:1px solid var(--glass-border);background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);cursor:pointer;transition:color .3s,border-color .3s}
.pt-key i{width:9px;height:9px;border-radius:50%;background:var(--fc)}
.pt-key:hover,.pt-key.on{color:var(--fg);border-color:var(--fc)}
.ptable{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.pt-el{position:relative;aspect-ratio:1/1;padding:10px 11px;border-radius:12px;border:1px solid var(--glass-border);background:var(--glass);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:inset 0 1px 0 var(--glass-hi);display:flex;flex-direction:column;overflow:hidden;transition:transform .45s var(--ease),border-color .35s,opacity .35s,box-shadow .45s;cursor:default}
.pt-el::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 70% at 50% 110%,color-mix(in srgb,var(--fc) 32%,transparent),transparent 70%);opacity:.55;transition:opacity .4s}
.pt-el::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--fc);opacity:.8}
.pt-n{font-family:var(--f-mono);font-size:10px;color:var(--muted);letter-spacing:.08em;position:relative}
.pt-s{font-family:var(--f-display);font-weight:400;font-size:clamp(1.7rem,2.4vw,2.3rem);line-height:1;letter-spacing:-.02em;color:var(--fg);margin-top:auto;position:relative}
.pt-name{font-family:var(--f-sans);font-size:11.5px;line-height:1.25;color:var(--muted);margin-top:6px;position:relative}
.pt-el:hover{transform:translateY(-4px);border-color:var(--fc);box-shadow:inset 0 1px 0 var(--glass-hi),0 20px 40px -24px var(--fc)}
.pt-el:hover::before{opacity:1}
.ptable[data-focus] .pt-el,.ptable[data-lock]:not([data-lock=""]) .pt-el{opacity:.22}
.ptable[data-focus="ux"] .pt-el[data-f="ux"],.ptable[data-focus="st"] .pt-el[data-f="st"],.ptable[data-focus="re"] .pt-el[data-f="re"],.ptable[data-focus="ai"] .pt-el[data-f="ai"],.ptable[data-focus="ld"] .pt-el[data-f="ld"],.ptable[data-focus="tl"] .pt-el[data-f="tl"],
.ptable[data-lock="ux"] .pt-el[data-f="ux"],.ptable[data-lock="st"] .pt-el[data-f="st"],.ptable[data-lock="re"] .pt-el[data-f="re"],.ptable[data-lock="ai"] .pt-el[data-f="ai"],.ptable[data-lock="ld"] .pt-el[data-f="ld"],.ptable[data-lock="tl"] .pt-el[data-f="tl"]{opacity:1;border-color:var(--fc)}
@media(max-width:600px){.ptable{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}.pt-s{font-size:1.5rem}.pt-name{font-size:10.5px}}

/* ===== MESH GRADIENT CANVAS — a slow, theme-aware colour field behind every page ===== */
.mesh-bg{position:fixed;inset:-12%;z-index:-2;pointer-events:none;filter:blur(90px) saturate(120%);opacity:.75}
.mesh-bg i{position:absolute;border-radius:50%;width:52vmax;height:52vmax;mix-blend-mode:screen;will-change:transform}
.mesh-bg i:nth-child(1){left:-8%;top:-10%;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--accent) 34%,transparent),transparent 62%);animation:mesh1 38s ease-in-out infinite alternate}
.mesh-bg i:nth-child(2){right:-14%;top:12%;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--accent-2) 22%,transparent),transparent 62%);animation:mesh2 46s ease-in-out infinite alternate}
.mesh-bg i:nth-child(3){left:22%;bottom:-24%;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,#2DBF9A 16%,transparent),transparent 62%);animation:mesh3 52s ease-in-out infinite alternate}
.mesh-bg i:nth-child(4){right:18%;bottom:-10%;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--fg) 7%,transparent),transparent 62%);animation:mesh1 60s ease-in-out infinite alternate-reverse}
@keyframes mesh1{to{transform:translate(14vw,10vh) scale(1.18)}}
@keyframes mesh2{to{transform:translate(-12vw,16vh) scale(.92)}}
@keyframes mesh3{to{transform:translate(10vw,-14vh) scale(1.1)}}
[data-theme="light"] .mesh-bg{mix-blend-mode:normal;opacity:.55;filter:blur(100px)}
[data-theme="light"] .mesh-bg i{mix-blend-mode:multiply}
[data-theme="light"] .mesh-bg i:nth-child(1){background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 62%)}
[data-theme="light"] .mesh-bg i:nth-child(2){background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--accent-2) 14%,transparent),transparent 62%)}
[data-theme="light"] .mesh-bg i:nth-child(3){background:radial-gradient(circle at 50% 50%,rgba(45,191,154,.12),transparent 62%)}
[data-theme="light"] .mesh-bg i:nth-child(4){background:radial-gradient(circle at 50% 50%,rgba(14,14,15,.05),transparent 62%)}
body{background-color:var(--bg)}
.hero .aurora{display:none}  /* the mesh canvas replaces the hero-only aurora */
.gate-body .mesh-bg{display:none}
@media (prefers-reduced-motion:reduce){.mesh-bg i{animation:none}}

/* ===== GLASS — only on surfaces that were already standalone cards; ruled grids and lists keep their own styling ===== */
.work-card{background:var(--glass);border-color:var(--glass-border);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}

/* ===== ORBIT GLASS — frosted depth-of-field: side cards sit behind a blurred glass veil, the active card carries its copy on a frosted panel ===== */
.work-grid.mode-orbit .work-card{filter:none;opacity:calc(1 - var(--d,0) * .14);box-shadow:0 40px 90px -50px rgba(0,0,0,.7),inset 0 1px 0 var(--glass-hi)}
.work-grid.mode-orbit .work-card.far{opacity:0}
.work-grid.mode-orbit .work-thumb{filter:saturate(.85)}
.work-grid.mode-orbit .work-card:not(.active) .work-thumb{filter:saturate(.55)}
/* veil: translucent glass + backdrop blur over the thumbnail; fades out when the card comes to the front */
.work-grid.mode-orbit .work-card::after{background:var(--glass-strong);backdrop-filter:blur(16px) saturate(120%);-webkit-backdrop-filter:blur(16px) saturate(120%);opacity:1;transition:opacity .9s var(--ease)}
.work-grid.mode-orbit .work-card.active::after{opacity:0}
/* frosted copy panel on the front card */
.work-grid.mode-orbit .work-meta{margin:clamp(14px,2vw,22px);padding:clamp(20px,2.4vw,32px);border-radius:calc(var(--r) - 4px);
  background:var(--glass-strong);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-hi),0 20px 50px -30px rgba(0,0,0,.6);
  backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%)}
.work-grid.mode-orbit .work-tags span{background:var(--glass);border-color:var(--glass-border)}
.work-grid.mode-orbit .work-arrow{background:var(--glass);border-color:var(--glass-border);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:inset 0 1px 0 var(--glass-hi)}
/* controls gathered into one floating glass pill */
.work-grid.mode-orbit .orbit-ui{left:50%;right:auto;transform:translateX(-50%);gap:10px;padding:6px 10px;border-radius:100px;
  background:var(--glass);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-hi),0 18px 40px -24px rgba(0,0,0,.6);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}
.work-grid.mode-orbit .ob-prev,.work-grid.mode-orbit .ob-next{width:38px;height:38px;border-color:transparent;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;transition:background .3s,color .3s}
.work-grid.mode-orbit .ob-prev:hover,.work-grid.mode-orbit .ob-next:hover{background:var(--card);border-color:transparent;transform:none;color:var(--accent)}
.work-grid.mode-orbit .ob-dots{padding:0 6px}
.work-grid.mode-orbit .ob-dots i{background:color-mix(in srgb,var(--fg) 28%,transparent)}
.work-grid.mode-orbit .ob-dots i.on{background:var(--accent)}
@media (prefers-reduced-motion:reduce){.work-grid.mode-orbit .work-card::after{transition:none}}

/* ===== LOADER SCROLL LOCK — the page must not scroll (mouse or touch) while the loader is up ===== */
html.is-loading,html.is-loading body{overflow:hidden;height:100%;overscroll-behavior:none}
#loader{touch-action:none;overscroll-behavior:contain}