/* David Friedman portfolio. Geist, silver and ink, cobalt lead accent plus pastel pops (coral, butter, mint, sky, pink), grain and sticker shapes.
   Radius system: pill = interactive, 28px shell / 22px core = containers, 20px = media.
   Themes follow the system (light and dark). */
@font-face{font-family:"Geist";src:url(assets/fonts/geist.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(assets/fonts/geist-mono.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap}

:root{
  color-scheme:light dark;
  --bg:#f1f2f4; --surface:#fafafb; --shell:rgba(12,13,16,.045); --ink:#0c0d10; --on-ink:#f1f2f4;
  --mute:#555a63; --line:rgba(12,13,16,.1); --accent:#2447ff; --on-accent:#fff; --tint:rgba(36,71,255,.08);
  --glass:rgba(250,250,251,.74); --hi:rgba(255,255,255,.7); --shadow:0 34px 60px -34px rgba(24,36,90,.28);
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"Geist Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.32,.72,0,1);
  --pad:clamp(20px,5vw,72px); --max:1320px;
  --r-shell:28px; --r-core:22px; --bez:6px;
  --z-nav:100; --z-lb:200; --z-skip:300;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0b0c0f; --surface:#14161b; --shell:rgba(236,238,242,.05); --ink:#eceef2; --on-ink:#0b0c0f;
    --mute:#9aa1ad; --line:rgba(236,238,242,.11); --accent:#8ea6ff; --on-accent:#0b0c0f; --tint:rgba(142,166,255,.11);
    --glass:rgba(20,22,27,.72); --hi:rgba(255,255,255,.08); --shadow:0 34px 60px -34px rgba(0,0,0,.7);
  }
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
h1,h2,h3{font-weight:560;letter-spacing:-.03em;line-height:1.04;text-wrap:balance}
p{text-wrap:pretty}
.soft{color:var(--mute)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
::selection{background:var(--accent);color:var(--on-accent)}
.skip{position:fixed;left:16px;top:-80px;z-index:var(--z-skip);background:var(--ink);color:var(--on-ink);padding:10px 18px;border-radius:999px;transition:top .3s var(--ease)}
.skip:focus{top:16px}
.ico{width:1em;height:1em;display:block;flex:none}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.band{padding-block:clamp(64px,9vw,140px)}
.band--end{padding-bottom:clamp(40px,5vw,72px)}

/* double bezel: outer shell + inner core */
.shell{padding:var(--bez);background:var(--shell);border-radius:var(--r-shell);box-shadow:inset 0 0 0 1px var(--line)}
.core{background:var(--surface);border-radius:var(--r-core);overflow:hidden;box-shadow:inset 0 1px 1px var(--hi)}
.core>img{width:100%;height:100%;object-fit:cover}

/* nav: floating glass pill */
.nav{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:var(--z-nav);display:flex;align-items:center;gap:clamp(10px,2.4vw,28px);padding:7px 8px 7px 7px;border-radius:999px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line),var(--shadow);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);max-width:calc(100% - 24px);white-space:nowrap}
.nav__logo{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--on-ink);font-weight:600;font-size:.82rem;letter-spacing:-.02em}
.nav__links{display:flex;gap:2px;font-size:.92rem;font-weight:500}
.nav__links a{padding:10px clamp(10px,1.6vw,18px);border-radius:999px;color:var(--mute);transition:color .4s var(--ease),background .4s var(--ease)}
.nav__links a:hover,.nav__links a[aria-current]{color:var(--ink);background:var(--shell)}

/* buttons: pill with nested icon circle */
.btn{display:inline-flex;align-items:center;gap:16px;border-radius:999px;font-weight:540;font-size:.98rem;letter-spacing:-.01em;white-space:nowrap;transition:transform .5s var(--ease),background .4s var(--ease),color .4s var(--ease);will-change:transform}
.btn:active{transform:scale(.98)}
.btn--solid{background:var(--ink);color:var(--on-ink);padding:7px 7px 7px 24px}
.btn--ghost{background:var(--shell);color:var(--ink);padding:15px 26px;box-shadow:inset 0 0 0 1px var(--line)}
.btn--ghost:hover{background:var(--line)}
.btn__ico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:1.15rem;transition:transform .5s var(--ease)}
.btn__ico--sm{width:30px;height:30px;font-size:.95rem}
.btn__ico--lg{width:clamp(48px,6vw,72px);height:clamp(48px,6vw,72px);font-size:clamp(1.3rem,2.6vw,2rem)}
.btn:hover .btn__ico{transform:translate(2px,-1px) scale(1.06)}

/* type scale */
.h-xl{font-size:clamp(2.2rem,5.6vw,5rem);letter-spacing:-.04em;line-height:1}
.h-big{font-size:clamp(2.1rem,4.8vw,4.2rem);letter-spacing:-.04em}
.h-mid{font-size:clamp(1.8rem,3.4vw,3rem);letter-spacing:-.035em}
.h-sec{font-size:clamp(1.3rem,2vw,1.7rem);letter-spacing:-.025em;margin-bottom:clamp(20px,3vw,36px)}
.eyebrow{display:inline-block;width:max-content;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--mute);background:var(--shell);padding:6px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);margin-bottom:18px}
.section-lede{max-width:62ch;color:var(--mute);font-size:clamp(1rem,1.2vw,1.12rem)}
.sec-head{display:grid;gap:0;justify-items:start;margin-bottom:clamp(36px,5vw,72px)}
.sec-head .section-lede{margin-top:20px}

/* hero */
.hero{min-height:100dvh;display:grid;grid-template-columns:minmax(0,7.4fr) minmax(0,4.6fr);gap:clamp(28px,5vw,88px);align-items:center;padding-top:104px;padding-bottom:clamp(36px,5vh,56px)}
.hero h1{font-size:clamp(2.3rem,4.5vw,4.4rem);letter-spacing:-.045em;line-height:1}
.hero__lede{margin-top:clamp(20px,3vh,30px);max-width:34ch;font-size:clamp(1.05rem,1.45vw,1.28rem);color:var(--mute);line-height:1.5}
.hero__cta{margin-top:clamp(26px,4vh,40px);display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero__visual{position:relative;justify-self:end;width:min(100%,calc(66dvh * .8));padding-bottom:clamp(40px,7vw,84px)}
.hero__portrait .core{aspect-ratio:4/5}
.hero__portrait img{object-position:58% 28%}
.hero__float{position:absolute;left:-14%;bottom:0;width:62%;transform:rotate(-2.5deg);box-shadow:inset 0 0 0 1px var(--line),var(--shadow);background:var(--glass)}
.hero__float .core{aspect-ratio:16/10}
.hero__float img{object-position:top}

/* projects grid: asymmetric, offset columns */
.pgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(36px,5vw,72px) clamp(20px,3vw,44px);align-items:start}
.pcard{display:grid;gap:20px;align-content:start}
.pgrid .pcard:nth-child(4n+1){grid-column:1/8}
.pgrid .pcard:nth-child(4n+2){grid-column:8/13;margin-top:clamp(48px,9vw,140px)}
.pgrid .pcard:nth-child(4n+3){grid-column:1/6}
.pgrid .pcard:nth-child(4n+4){grid-column:6/13;margin-top:clamp(48px,9vw,140px)}
.pcard .shell{transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.pcard .core{aspect-ratio:16/10}
.pcard .core img{object-position:top;transition:transform 1s var(--ease)}
.pcard:hover .shell{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--line),var(--shadow)}
.pcard:hover .core img{transform:scale(1.035)}
.pcard__meta{display:grid;gap:6px;padding-inline:8px}
.pcard h3{font-size:clamp(1.5rem,2.3vw,2.1rem);letter-spacing:-.035em}
.pcard__kind{font-size:.88rem;color:var(--mute)}
.pcard__sum{max-width:46ch;margin-top:6px}
.pcard__go{display:inline-flex;align-items:center;gap:12px;margin-top:10px;font-weight:540;font-size:.95rem;width:max-content}
.pcard:hover .btn__ico{transform:translate(2px,-1px) scale(1.06)}
.more{margin-top:clamp(48px,6vw,88px);display:flex}
.art{aspect-ratio:16/10;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:clamp(20px,3vw,40px);background:radial-gradient(120% 120% at 90% 0,var(--tint),transparent 60%),var(--surface)}
.art b{font-size:clamp(1.6rem,3.4vw,3rem);letter-spacing:-.04em;font-weight:560}
.art span{color:var(--mute)}

/* approach bento */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.b--7{grid-column:span 7}.b--5{grid-column:span 5}.b--6{grid-column:span 6}
.shell.b{display:flex}
.b .core{width:100%}
.cell{padding:clamp(24px,3vw,40px);display:grid;gap:14px;align-content:start;height:100%}
.cell h3{font-size:clamp(1.4rem,2.1vw,1.9rem)}
.cell p{color:var(--mute);max-width:56ch;font-size:.98rem}
.cell--tint{background:linear-gradient(160deg,var(--tint),transparent 70%),var(--surface)}
.cell--ink{background:var(--ink);color:var(--on-ink)}
.cell--ink p,.cell--ink .outs li{color:color-mix(in oklab,var(--on-ink) 72%,transparent)}
.cell--ink .outs li{background:color-mix(in oklab,var(--on-ink) 10%,transparent)}
.cell--media{padding:0;gap:0;grid-template-rows:auto 1fr}
.cell__txt{padding:clamp(24px,3vw,40px);display:grid;gap:14px;align-content:start}
.cell__img{margin:0 clamp(14px,1.6vw,20px) clamp(14px,1.6vw,20px);border-radius:20px;overflow:hidden;min-height:200px;position:relative}
.cell__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.outs{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.outs li{font-size:.8rem;padding:6px 12px;border-radius:999px;background:var(--shell);color:var(--mute)}

/* client management: sticky split */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,7vw,120px);align-items:start}
.split__head{position:sticky;top:110px;display:grid;gap:20px}
.stack{display:grid}
.stack li{padding-block:clamp(24px,3vw,40px)}
.stack li+li{box-shadow:inset 0 1px 0 var(--line)}
.stack li:first-child{padding-top:6px}
.stack__k{font-size:.88rem;color:var(--accent);font-weight:540;margin-bottom:8px}
.stack h3{font-size:clamp(1.4rem,2.2vw,2rem);margin-bottom:10px}
.stack p:not(.stack__k){color:var(--mute);max-width:52ch}

/* AI panel */
.shell--ink{background:var(--shell)}
.panel{background:var(--ink);color:var(--on-ink);padding:clamp(28px,5vw,72px);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);position:relative;isolation:isolate}
.panel::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 90% at 100% 0,color-mix(in oklab,var(--accent) 34%,transparent),transparent 62%);opacity:.7}
.panel__head{display:grid;gap:20px;align-content:start}
.panel__head .soft{color:color-mix(in oklab,var(--on-ink) 58%,transparent)}
.panel__head p{color:color-mix(in oklab,var(--on-ink) 76%,transparent);max-width:54ch}
.panel__list{display:grid;gap:clamp(20px,2.4vw,30px);align-content:center}
.panel__list li{padding-left:clamp(16px,2vw,24px);box-shadow:inset 2px 0 0 color-mix(in oklab,var(--on-ink) 22%,transparent)}
.panel__list h3{font-size:1.25rem;margin-bottom:6px}
.panel__list p{color:color-mix(in oklab,var(--on-ink) 72%,transparent);font-size:.98rem}

/* principles: typographic list */
.prin li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,4vw,64px);padding-block:clamp(22px,3vw,38px);align-items:baseline}
.prin li+li{box-shadow:inset 0 1px 0 var(--line)}
.prin h3{font-size:clamp(1.7rem,3.4vw,3rem);letter-spacing:-.04em}
.prin p{color:var(--mute);max-width:52ch}

/* about */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,104px);align-items:center}
.about__img .core{aspect-ratio:4/5}
.about__img img{object-position:58% 28%}
.about__copy{display:grid;gap:20px;justify-items:start;max-width:60ch}
.about__copy>p:not(.eyebrow){color:var(--mute)}
.about__copy .eyebrow{margin-bottom:0}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.pills li{font-size:.85rem;font-weight:500;padding:8px 14px;border-radius:999px;background:var(--shell);box-shadow:inset 0 0 0 1px var(--line)}

/* experience */
.exp li{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,3fr) minmax(0,4fr);gap:clamp(16px,3vw,48px);padding-block:clamp(22px,3vw,36px);align-items:baseline}
.exp li+li{box-shadow:inset 0 1px 0 var(--line)}
.exp__when{font-family:var(--mono);font-size:.82rem;color:var(--mute)}
.exp h3{font-size:clamp(1.3rem,2vw,1.7rem)}
.exp div p{color:var(--mute);font-size:.95rem;margin-top:4px}
.exp li>p{color:var(--mute);max-width:56ch}

/* contact */
.cta{padding:clamp(32px,6vw,96px);display:grid;gap:clamp(28px,4vw,48px);justify-items:start;background:radial-gradient(70% 120% at 100% 100%,var(--tint),transparent 62%),var(--surface)}
.cta__row{display:flex;gap:20px 28px;flex-wrap:wrap;align-items:center}
.cta__row p{color:var(--mute);font-size:.95rem;max-width:34ch}

.foot{display:flex;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;align-items:center;max-width:var(--max);margin-inline:auto;padding:clamp(24px,3vw,36px) var(--pad) clamp(28px,4vw,48px);color:var(--mute);font-size:.88rem}
.foot nav{display:flex;gap:6px}
.foot a{padding:8px 14px;border-radius:999px;transition:color .3s,background .3s}
.foot a:hover{color:var(--ink);background:var(--shell)}

/* project page */
.proj{padding-top:0}
.ph{display:grid;gap:18px;justify-items:start;padding-top:clamp(112px,16vh,160px);padding-bottom:clamp(28px,4vw,52px)}
.back{display:inline-flex;align-items:center;gap:10px;padding:9px 16px 9px 12px;border-radius:999px;background:var(--shell);box-shadow:inset 0 0 0 1px var(--line);font-size:.88rem;font-weight:500;color:var(--mute);transition:color .3s,background .3s}
.back:hover{color:var(--ink);background:var(--line)}
.ph h1{font-size:clamp(2.6rem,7.4vw,6.6rem);letter-spacing:-.05em;line-height:.96;margin-top:10px}
.ph__kind{color:var(--accent);font-weight:540}
.ph__sum{max-width:48ch;font-size:clamp(1.1rem,1.6vw,1.35rem);color:var(--mute);line-height:1.5}
.ph__cta{margin-top:10px}
.pshot{padding-bottom:clamp(36px,5vw,64px)}
.pshot .core{aspect-ratio:16/9}
.pshot .core img{object-position:top}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:24px 32px;padding-block:clamp(22px,3vw,34px);box-shadow:inset 0 1px 0 var(--line)}
.facts dt{font-size:.84rem;color:var(--mute);margin-bottom:4px}
.facts dd{font-weight:540}
.pcols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,100px)}
.lead{font-size:clamp(1.05rem,1.45vw,1.28rem);line-height:1.55;max-width:50ch}
.did li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(16px,4vw,64px);padding-block:clamp(22px,3vw,36px);align-items:baseline}
.did li+li{box-shadow:inset 0 1px 0 var(--line)}
.did h3{font-size:clamp(1.3rem,2.2vw,1.9rem)}
.did p{color:var(--mute);max-width:56ch}
.gal{display:grid;gap:clamp(14px,2vw,28px)}
.gal figure{margin:0;overflow:hidden;border-radius:20px;box-shadow:0 0 0 1px var(--line);background:var(--surface)}
.gal img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;transition:transform 1s var(--ease)}
.gal figure:hover img{transform:scale(1.025)}
.gal--live{grid-template-columns:minmax(0,3fr) minmax(0,1fr);align-items:start}
.gal__desk{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,28px)}
.gal figure.phone{padding:8px;background:var(--ink);border-radius:36px;box-shadow:var(--shadow)}
.phone__in{border-radius:28px;overflow:hidden}
.gal--proj{grid-template-columns:repeat(2,minmax(0,1fr))}
.gal--proj figure:nth-child(3n+1){grid-column:1/-1}
.pquote{max-width:78ch}
.pquote p{font-size:clamp(1.15rem,1.9vw,1.55rem);line-height:1.4;letter-spacing:-.02em;font-weight:480}
.pquote footer{margin-top:16px;color:var(--mute);font-size:.9rem}
.results{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,2vw,24px)}
.results li{padding:clamp(22px,3vw,36px);border-radius:var(--r-shell);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 1px var(--hi)}
.results li:first-child{background:linear-gradient(160deg,var(--tint),transparent 75%),var(--surface)}
.results b{display:block;font-size:clamp(2.2rem,4.6vw,4rem);letter-spacing:-.05em;line-height:1;font-weight:560;color:var(--accent)}
.results span{display:block;color:var(--mute);margin-top:12px;max-width:30ch;font-size:.95rem}
.outnote{font-size:.85rem;color:var(--mute);max-width:70ch;margin-top:20px}
.pnext{display:grid;gap:14px;padding-top:clamp(24px,3vw,40px);box-shadow:inset 0 1px 0 var(--line)}
.pnext__lbl{color:var(--mute);font-size:.95rem}
.pnext__row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.pnext__name{font-size:clamp(2.2rem,6.4vw,5.6rem);font-weight:560;letter-spacing:-.05em;line-height:1}
.pnext:hover .btn__ico{transform:translate(3px,-2px) scale(1.06)}

/* projects page */
.phead{padding-top:clamp(120px,17vh,170px);padding-bottom:clamp(36px,5vw,64px);display:grid;gap:20px;justify-items:start}
.phead .h-big{font-size:clamp(2.4rem,6.6vw,6rem);letter-spacing:-.05em;line-height:.98}
.inprog li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:20px;padding-block:20px;align-items:baseline}
.inprog li+li{box-shadow:inset 0 1px 0 var(--line)}
.inprog li span:first-child{font-size:1.2rem;font-weight:540;letter-spacing:-.02em}
.inprog li span:nth-child(2){color:var(--mute)}
.inprog em{font-style:normal;font-size:.82rem;padding:6px 12px;border-radius:999px;background:var(--shell);color:var(--mute)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:var(--z-lb);display:grid;place-items:center;padding:24px;background:rgba(8,9,12,.86);cursor:zoom-out}
.lb img{max-width:min(1500px,100%);max-height:100%;width:auto;border-radius:16px;box-shadow:0 40px 80px rgba(0,0,0,.5)}

/* reveal */
.js [data-r]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.js [data-r].in{opacity:1;transform:none}
.js .pcard[data-r].in{transition:opacity 1s var(--ease),transform 1s var(--ease)}

/* responsive */
@media (max-width:1000px){
  .hero{grid-template-columns:1fr;min-height:0;padding-top:104px;gap:36px}
  .hero__visual{justify-self:start;width:min(100%,460px);padding-bottom:56px}
  .hero__float{left:auto;right:-4%;transform:none;width:58%}
  .pgrid{grid-template-columns:1fr}
  .pgrid .pcard:nth-child(n){grid-column:1;margin-top:0}
  .bento{grid-template-columns:1fr}
  .bento .b{grid-column:auto}
  .split,.panel,.about,.pcols{grid-template-columns:1fr}
  .split__head{position:static}
  .about__img{max-width:460px}
  .prin li,.did li{grid-template-columns:1fr;gap:10px}
  .exp li{grid-template-columns:1fr;gap:6px}
  .results{grid-template-columns:1fr}
  .gal--live{grid-template-columns:1fr}
  .gal figure.phone{max-width:280px}
  .inprog li{grid-template-columns:1fr;gap:4px}
}
@media (max-width:640px){
  body{font-size:16px}
  .nav{top:12px;gap:4px;padding:5px 6px 5px 5px}
  .nav__logo{width:36px;height:36px}
  .nav__links{font-size:.84rem}
  .nav__links a{padding:10px 9px}
  .gal__desk,.gal--proj{grid-template-columns:1fr}
  .gal--proj figure:nth-child(n){grid-column:auto}
  .foot{flex-direction:column;align-items:flex-start}
}
@media (max-width:360px){
  .nav__links a{padding:10px 7px;font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .js [data-r]{opacity:1;transform:none}
}
@media (prefers-reduced-transparency:reduce){
  .nav{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ===== playful layer: colour, texture, stickers ===== */
:root{--c-coral:#ff7a59; --c-butter:#ffd84d; --c-mint:#7ee0b8; --c-sky:#9ccbff; --c-pink:#ffb4d2; --on-pop:#0c0d10; --on-pop-2:rgba(12,13,16,.74);
  --grain-o:.07; --dot:rgba(12,13,16,.16)}
@media (prefers-color-scheme:dark){:root{--c-coral:#ff8a6b; --c-butter:#ffd95a; --c-mint:#74dbb0; --c-sky:#8fbdf5; --c-pink:#f7a6c8; --grain-o:.1; --dot:rgba(236,238,242,.16)}}

/* grain: fixed, non-interactive, below the nav */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:var(--grain-o);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* sparkle + blob primitives */
.spark{position:absolute;display:block;background:var(--c-coral);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);pointer-events:none;transition:transform .9s var(--ease)}
.blob{position:absolute;display:block;border-radius:50%;pointer-events:none}

/* nav + buttons */
.nav__logo{background:var(--accent);color:var(--on-accent);transition:transform .6s var(--ease)}
.nav__logo:hover{transform:rotate(-12deg) scale(1.06)}
.btn:hover{transform:translateY(-2px) rotate(-1deg)}
.btn:hover .btn__ico{transform:translate(2px,-1px) rotate(14deg) scale(1.08)}
.btn--solid .btn__ico{background:var(--c-butter);color:var(--on-pop)}
.btn--ghost{background:var(--c-butter);color:var(--on-pop);box-shadow:none}
.btn--ghost:hover{background:var(--c-coral)}

/* headings: cobalt second half, marker highlight */
.h-big .soft,.h-mid .soft{color:var(--accent)}
.mark{display:inline-block;padding:.02em .2em .1em;border-radius:.26em;background:var(--c-butter);color:var(--on-pop);transform:rotate(-1.6deg);box-shadow:0 .07em 0 rgba(12,13,16,.14)}
.mark--ink{background:var(--ink);color:var(--on-ink)}
.eyebrow{background:var(--c-mint);color:var(--on-pop);box-shadow:none;transform:rotate(-2deg)}

/* hero: dot grid, colour block behind portrait, spinning sticker */
.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0 calc(var(--pad) * -1);z-index:-1;background-image:radial-gradient(var(--dot) 1.2px,transparent 1.4px);background-size:26px 26px;-webkit-mask-image:radial-gradient(70% 70% at 78% 40%,#000,transparent 75%);mask-image:radial-gradient(70% 70% at 78% 40%,#000,transparent 75%)}
.hero__portrait{position:relative;transform:rotate(1.4deg)}
.hero__portrait::before{content:"";position:absolute;inset:6% -7% -6% 9%;z-index:-1;border-radius:var(--r-shell);background:var(--c-coral);transform:rotate(-4deg)}
.hero__visual{isolation:isolate}
.hero__lede{color:var(--mute)}
.badge{position:absolute;z-index:3;top:-4%;left:-9%;width:clamp(96px,10vw,132px);animation:spin 26s linear infinite}
.badge__bg{fill:var(--c-butter)}
.badge__t{font-family:var(--mono);font-size:10.4px;font-weight:600;fill:var(--on-pop);letter-spacing:.04em}
.badge__star{fill:var(--on-pop)}
@keyframes spin{to{transform:rotate(360deg)}}
.spark--a{width:clamp(30px,3.4vw,48px);aspect-ratio:1;right:-5%;top:16%;background:var(--c-butter);z-index:3}
.spark--b{width:clamp(16px,1.8vw,26px);aspect-ratio:1;right:6%;top:2%;background:var(--accent);z-index:3}
.hero__visual:hover .spark--a{transform:rotate(45deg) scale(1.15)}

/* project cards: tinted shell in each project's colour, sector sticker */
.pcard__vis{position:relative}
.pcard .shell{background:color-mix(in oklab,var(--pc) 42%,transparent)}
.pcard__chip{position:absolute;left:14px;top:-12px;z-index:2;padding:6px 14px;border-radius:999px;background:var(--pc);color:var(--on-pop);font-size:.78rem;font-weight:560;letter-spacing:-.005em;transform:rotate(-3deg);box-shadow:0 6px 14px -8px rgba(12,13,16,.45);transition:transform .6s var(--ease)}
.pcard:hover .pcard__chip{transform:rotate(2deg) translateY(-3px)}
.pcard:nth-child(even) .pcard__chip{left:auto;right:14px;transform:rotate(3deg)}
.pcard:nth-child(even):hover .pcard__chip{transform:rotate(-2deg) translateY(-3px)}
.pcard:hover .shell{transform:translateY(-8px) rotate(-.6deg)}
.pcard:nth-child(even):hover .shell{transform:translateY(-8px) rotate(.6deg)}
.pcard__go .btn__ico{background:var(--pc);color:var(--on-pop)}

/* bento: pastel cells with sparkle corner */
.cell{position:relative;isolation:isolate}
.cell::after{content:"";position:absolute;right:clamp(16px,2vw,26px);top:clamp(16px,2vw,26px);width:22px;height:22px;background:currentColor;opacity:.9;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);transition:transform .9s var(--ease)}
.b:hover .cell::after{transform:rotate(90deg) scale(1.2)}
.cell--butter,.cell--sky,.cell--mint,.cell--coral,.cell--pink{color:var(--on-pop)}
.cell--butter{background:var(--c-butter)}.cell--sky{background:var(--c-sky)}.cell--mint{background:var(--c-mint)}.cell--coral{background:var(--c-coral)}.cell--pink{background:var(--c-pink)}
.cell--butter p,.cell--sky p,.cell--mint p,.cell--coral p,.cell--pink p{color:var(--on-pop-2)}
.cell--butter .outs li,.cell--sky .outs li,.cell--mint .outs li,.cell--coral .outs li,.cell--pink .outs li{background:rgba(255,255,255,.55);color:var(--on-pop)}
.cell--ink{color:var(--on-ink)}
.cell--ink .outs li{background:var(--c-coral);color:var(--on-pop)}
.b--7:nth-child(odd) .core,.b--5:nth-child(even) .core{transform:none}
.bento .shell{transition:transform .7s var(--ease)}
.bento .shell:hover{transform:rotate(-.5deg) translateY(-4px)}
.bento .shell:nth-child(even):hover{transform:rotate(.5deg) translateY(-4px)}

/* clients stack: colour dots */
.stack__k{display:flex;align-items:center;gap:10px;color:var(--ink)}
.stack__k::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--c-coral)}
.stack li:nth-child(2) .stack__k::before{background:var(--c-butter)}
.stack li:nth-child(3) .stack__k::before{background:var(--c-mint)}

/* AI panel: cobalt with dots */
.panel{background:#2447ff;color:#fff;overflow:hidden}
.panel::before{background:radial-gradient(rgba(255,255,255,.22) 1.2px,transparent 1.5px) 0 0/22px 22px;opacity:1;-webkit-mask-image:radial-gradient(80% 90% at 100% 0,#000,transparent 70%);mask-image:radial-gradient(80% 90% at 100% 0,#000,transparent 70%)}
.panel__head .soft{color:var(--c-butter)}
.panel__head p,.panel__list p{color:rgba(255,255,255,.84)}
.panel__list li{box-shadow:inset 3px 0 0 var(--c-butter)}
.panel__list li:nth-child(2){box-shadow:inset 3px 0 0 var(--c-coral)}
.panel__list li:nth-child(3){box-shadow:inset 3px 0 0 var(--c-mint)}
.spark--c{width:54px;aspect-ratio:1;right:6%;bottom:9%;background:var(--c-butter);z-index:0}
.blob--c{width:clamp(110px,13vw,180px);aspect-ratio:1;right:-5%;top:-16%;background:var(--c-coral);opacity:.9;z-index:-1}
.panel__head,.panel__list{position:relative;z-index:1}

/* principles: coloured blobs */
.prin h3{display:flex;align-items:center;gap:.4em}
.prin h3::before{content:"";flex:none;width:.52em;height:.52em;border-radius:50%;background:var(--c-coral);transition:transform .7s var(--ease)}
.prin li:nth-child(2) h3::before{background:var(--c-sky);border-radius:30% 70% 60% 40%}
.prin li:nth-child(3) h3::before{background:var(--c-mint);border-radius:18%}
.prin li:hover h3::before{transform:rotate(90deg) scale(1.2)}

/* about: colour block, sticker pills */
.about__img{position:relative;isolation:isolate}
.about__img .shell{transform:rotate(-1.4deg)}
.blob--m{inset:8% 8% -6% -7%;border-radius:var(--r-shell);background:var(--c-mint);transform:rotate(4deg);z-index:-1}
.pills li{border:0;box-shadow:none;color:var(--on-pop);transition:transform .5s var(--ease)}
.pills li:nth-child(5n+1){background:var(--c-butter);transform:rotate(-2deg)}
.pills li:nth-child(5n+2){background:var(--c-sky);transform:rotate(1.5deg)}
.pills li:nth-child(5n+3){background:var(--c-pink);transform:rotate(-1deg)}
.pills li:nth-child(5n+4){background:var(--c-mint);transform:rotate(2deg)}
.pills li:nth-child(5n){background:var(--c-coral);transform:rotate(-1.5deg)}
.pills li:hover{transform:rotate(0) translateY(-3px) scale(1.06)}
.exp__when{justify-self:start;padding:5px 12px;border-radius:999px;background:var(--c-sky);color:var(--on-pop);font-weight:500}

/* contact: butter panel, shapes */
.shell--cta{background:color-mix(in oklab,var(--c-butter) 45%,transparent)}
.cta{background:var(--c-butter);color:var(--on-pop);position:relative;isolation:isolate;overflow:hidden}
.cta .btn--solid{background:var(--on-pop);color:#fff}
.cta .btn__ico{background:var(--c-coral);color:var(--on-pop)}
.cta__row p{color:var(--on-pop-2)}
.blob--k{width:clamp(160px,24vw,340px);aspect-ratio:1;right:-5%;bottom:-24%;background:var(--c-coral);z-index:-1}
.spark--d{width:clamp(44px,6vw,84px);aspect-ratio:1;right:18%;top:14%;background:var(--accent);z-index:-1}
.spark--e{width:clamp(20px,2.4vw,34px);aspect-ratio:1;right:34%;bottom:16%;background:var(--on-pop);z-index:-1}
.cta:hover .spark--d{transform:rotate(90deg) scale(1.1)}

/* project pages: each project's colour */
.ph{position:relative;isolation:isolate}
.ph::before{content:"";position:absolute;right:var(--pad);top:clamp(96px,15vh,150px);width:clamp(96px,14vw,190px);aspect-ratio:1;border-radius:50%;background:var(--pc,var(--c-butter));z-index:-1;box-shadow:inset 0 0 0 clamp(10px,1.4vw,18px) color-mix(in oklab,var(--pc,var(--c-butter)) 55%,#fff 45%)}
.ph::after{content:"";position:absolute;right:calc(var(--pad) + clamp(100px,15vw,200px));top:clamp(200px,30vh,310px);width:clamp(28px,4vw,56px);aspect-ratio:1;background:var(--accent);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);z-index:-1}
.ph__kind{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--pc,var(--c-butter));color:var(--on-pop);transform:rotate(-1.5deg)}
.pshot .shell{background:color-mix(in oklab,var(--pc,var(--c-butter)) 42%,transparent)}
.results li:first-child{background:var(--pc,var(--c-butter));color:var(--on-pop)}
.results li:first-child b,.results li:first-child span{color:var(--on-pop)}
.results li:nth-child(2){background:var(--c-mint);color:var(--on-pop)}
.results li:nth-child(3){background:var(--c-sky);color:var(--on-pop)}
.results li:nth-child(2) b,.results li:nth-child(3) b,.results li:nth-child(2) span,.results li:nth-child(3) span{color:var(--on-pop)}
.facts dd{font-weight:560}
.pnext:hover .pnext__name{color:var(--accent)}
.did li::before{display:none}
.inprog em{background:var(--c-butter);color:var(--on-pop)}

@media (max-width:1000px){
  .badge{left:auto;right:-2%;top:-6%}
  .hero__portrait::before{inset:5% -4% -4% 6%}
  .ph::before{opacity:.7}
}
@media (prefers-reduced-motion:reduce){.badge{animation:none}}
main{overflow-x:clip}

.foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}