/* ===== FONTS =====
   To change fonts: 1) swap the families in this @import URL (copy it from fonts.google.com),
   2) update --f-display, --f-body and --f-mono in :root below.
   Self-hosting instead? Delete the @import, put .woff2 files in /fonts and add @font-face rules here. */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Instrument+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");


/* Layout: airy white canvas, one electric-blue accent, every project lives on its own pastel tile; bento grid for work, editorial rows for case studies, masonry for art. */
:root{
  --bg:#FAFAFD; --surface:#FFFFFF; --ink:#14152B; --muted:#5E6080; --line:#E7E7F1;
  --accent:#7744C0; --accent-ink:#FFFFFF; --accent-soft:#F0E8FA;
  --t-violet:#ECE6FF; --t-violet-s:#7B5CFA;
  --t-butter:#FFF1C2; --t-butter-s:#F2A20C;
  --t-mint:#D9F5E6; --t-mint-s:#16A167;
  --t-sky:#DCEBFF; --t-sky-s:#2A7BF0;
  --t-pink:#FFE1EE; --t-pink-s:#E5468B;
  --t-peach:#FFE4D6; --t-peach-s:#F0642F;
  --mock-bg:#FFFFFF; --mock-line:rgba(20,21,43,.08);
  --shadow:0 1px 2px rgba(20,21,43,.04),0 12px 32px -12px rgba(20,21,43,.14);
  --f-display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-lg:28px; --r-md:18px; --r-sm:12px;
  --ease:cubic-bezier(.22,1,.36,1);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0D0E1A; --surface:#161729; --ink:#F1F1FA; --muted:#A3A5C2; --line:#272943;
  --accent:#A87FE8; --accent-ink:#0D0E1A; --accent-soft:#2A1B45;
  --t-violet:#231C45; --t-violet-s:#A38DFF;
  --t-butter:#3A2F10; --t-butter-s:#FFC53D;
  --t-mint:#0F3326; --t-mint-s:#3FD397;
  --t-sky:#112A4D; --t-sky-s:#65A6FF;
  --t-pink:#3D1529; --t-pink-s:#FF7DB4;
  --t-peach:#40200F; --t-peach-s:#FF8A5C;
  --mock-bg:#1D1F35; --mock-line:rgba(241,241,250,.09);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 16px 40px -16px rgba(0,0,0,.6);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0D0E1A; --surface:#161729; --ink:#F1F1FA; --muted:#A3A5C2; --line:#272943;
  --accent:#A87FE8; --accent-ink:#0D0E1A; --accent-soft:#2A1B45;
  --t-violet:#231C45; --t-violet-s:#A38DFF;
  --t-butter:#3A2F10; --t-butter-s:#FFC53D;
  --t-mint:#0F3326; --t-mint-s:#3FD397;
  --t-sky:#112A4D; --t-sky-s:#65A6FF;
  --t-pink:#3D1529; --t-pink-s:#FF7DB4;
  --t-peach:#40200F; --t-peach-s:#FF8A5C;
  --mock-bg:#1D1F35; --mock-line:rgba(241,241,250,.09);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 16px 40px -16px rgba(0,0,0,.6);
  color-scheme:dark}

html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
h1,h2,h3{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;line-height:1.05;text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
section{padding-block:clamp(72px,10vw,128px)}
.sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:24px;margin-bottom:clamp(32px,5vw,56px)}
.sec-head h2{font-size:clamp(36px,5.6vw,64px);margin-top:14px}
.sec-head p{max-width:42ch;color:var(--muted)}

/* progress + nav */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--accent);z-index:60}
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;padding-block:14px}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:12px;background:color-mix(in srgb,var(--surface) 78%,transparent);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid var(--line);border-radius:999px;padding:8px 8px 8px 18px;box-shadow:var(--shadow)}
.logo{font-family:var(--f-display);font-weight:800;font-size:20px;display:flex;align-items:center;gap:8px}
.logo i{width:26px;height:26px;border-radius:8px;background:var(--accent);display:grid;place-items:center;color:var(--accent-ink);font-style:normal;font-size:14px;transition:transform .5s var(--ease)}
.logo:hover i{transform:rotate(-12deg) scale(1.08)}
.links{position:relative;display:flex;gap:2px}
.links a{position:relative;z-index:1;padding:8px 14px;border-radius:999px;font-size:14px;font-weight:500;color:var(--muted);transition:color .3s}
.links a.on,.links a:hover{color:var(--ink)}
.pill-ind{position:absolute;top:0;height:100%;border-radius:999px;background:var(--accent-soft);transition:left .45s var(--ease),width .45s var(--ease),opacity .3s;opacity:0}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;font-weight:600;font-size:15px;background:var(--accent);color:var(--accent-ink);transition:transform .35s var(--ease),box-shadow .35s;position:relative;overflow:hidden;white-space:nowrap}
.btn:hover{box-shadow:0 10px 24px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn .arr{display:inline-grid;overflow:hidden;width:16px;height:16px}
.btn .arr span{grid-area:1/1;transition:transform .4s var(--ease)}
.btn .arr span:last-child{transform:translate(-120%,120%)}
.btn:hover .arr span:first-child{transform:translate(120%,-120%)}
.btn:hover .arr span:last-child{transform:none}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--ink);box-shadow:none}
.btn.sm{padding:9px 16px;font-size:14px}
.menu-btn{display:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line)}
.menu-btn span{display:block;width:16px;height:2px;background:var(--ink);margin:3px auto;border-radius:2px;transition:transform .3s var(--ease)}
.nav.open .menu-btn span:first-child{transform:translateY(2.5px) rotate(45deg)}
.nav.open .menu-btn span:last-child{transform:translateY(-2.5px) rotate(-45deg)}
@media (max-width:820px){
  .links{position:absolute;left:clamp(16px,4vw,40px);right:clamp(16px,4vw,40px);top:calc(100% + 4px);flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:8px;box-shadow:var(--shadow);transform-origin:top;transform:scaleY(.9);opacity:0;pointer-events:none;transition:.3s var(--ease)}
  .nav.open .links{opacity:1;transform:none;pointer-events:auto}
  .links a{padding:12px 14px}
  .pill-ind{display:none}
  .menu-btn{display:block}
  .nav-cta{display:none}
}

/* hero */
.hero{padding-block:clamp(48px,8vw,96px) clamp(56px,8vw,96px);position:relative}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,64px);align-items:center}
.status{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 8px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:13px;font-weight:500}
.status .dot{width:20px;height:20px;border-radius:50%;background:var(--t-mint);display:grid;place-items:center}
.status .dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--t-mint-s);animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--t-mint-s) 60%,transparent)}80%,100%{box-shadow:0 0 0 8px transparent}}
.hero h1{font-size:clamp(48px,8.4vw,108px);font-weight:800;letter-spacing:-.04em;line-height:.95;margin-block:24px 22px}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .ln>span{display:inline-block;animation:up 1s var(--ease) both}
.hero h1 .ln:nth-child(2)>span{animation-delay:.08s}
.hero h1 .ln:nth-child(3)>span{animation-delay:.16s}
@keyframes up{from{transform:translateY(105%)}}
.hl{color:var(--accent);position:relative;white-space:nowrap}
.hl svg{position:absolute;left:0;bottom:-.06em;width:100%;height:.22em;overflow:visible}
.hl path{stroke:var(--t-butter-s);stroke-width:6;fill:none;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;animation:draw 1.1s .7s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.lead{font-size:clamp(17px,1.6vw,20px);color:var(--muted);max-width:44ch;animation:fade .9s .3s var(--ease) both}
.lead b{color:var(--ink);font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;animation:fade .9s .4s var(--ease) both}
@keyframes fade{from{opacity:0;transform:translateY(12px)}}
.who{display:flex;align-items:center;gap:14px;margin-top:40px;font-size:14px;color:var(--muted);animation:fade .9s .5s var(--ease) both}
.who strong{display:block;color:var(--ink);font-size:15px}
.avatar{width:48px;height:48px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:18px}

.stage{position:relative;aspect-ratio:1/1.05;max-width:100%}
.float{position:absolute;border-radius:22px;box-shadow:var(--shadow);transition:transform .8s var(--ease);will-change:transform}
.f1{inset:4% 14% 34% 0;background:var(--t-violet);padding:16px;animation:fade 1s .3s var(--ease) both}
.f2{inset:44% 0 0 30%;background:var(--t-mint);padding:16px;animation:fade 1s .45s var(--ease) both}
.f3{width:38%;aspect-ratio:1;right:2%;top:0;background:var(--t-butter);display:grid;place-items:center;animation:fade 1s .6s var(--ease) both}
.f4{left:4%;bottom:6%;background:var(--surface);border:1px solid var(--line);padding:12px 16px;display:flex;gap:10px;align-items:center;font-size:13px;font-weight:600;animation:fade 1s .75s var(--ease) both}
.f4 .sw{display:flex}
.f4 .sw i{width:18px;height:18px;border-radius:50%;border:2px solid var(--surface);margin-left:-6px}
.f4 .sw i:first-child{margin-left:0}
.sticker{width:78%;aspect-ratio:1;animation:spin 18s linear infinite}
.sticker text{font-family:var(--f-mono);font-size:9px;letter-spacing:0;fill:var(--ink);text-transform:uppercase}
@keyframes spin{to{transform:rotate(360deg)}}
.f3 .core{position:absolute;width:34%;aspect-ratio:1;border-radius:50%;background:var(--t-butter-s);display:grid;place-items:center;color:var(--ink);font-family:var(--f-display);font-weight:800;font-size:20px}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.stage{max-width:520px;width:100%;margin-inline:auto}}

/* marquee */
.marquee{border-block:1px solid var(--line);background:var(--surface);overflow:hidden;padding-block:18px}
.track{display:flex;gap:40px;width:max-content;animation:mq 40s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.track span{font-family:var(--f-display);font-weight:600;font-size:clamp(20px,2.4vw,28px);display:flex;align-items:center;gap:40px;white-space:nowrap}
.track span::after{content:"";width:10px;height:10px;border-radius:3px;background:var(--accent);transform:rotate(45deg)}
.track span:nth-child(3n+2)::after{background:var(--t-pink-s);border-radius:50%}
.track span:nth-child(3n)::after{background:var(--t-butter-s)}
@keyframes mq{to{transform:translateX(-50%)}}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:14px;font-weight:500;color:var(--muted);transition:all .3s var(--ease);display:inline-flex;gap:8px;align-items:center}
.chip:hover{color:var(--ink);border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip small{font-family:var(--f-mono);font-size:11px;opacity:.7}

/* work grid */
.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.card{grid-column:span 6;display:flex;flex-direction:column;gap:16px;cursor:pointer;transition:opacity .4s,transform .5s var(--ease)}
.card.w7{grid-column:span 7}.card.w5{grid-column:span 5}
.card.out{display:none}
.cover{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;background:var(--tint);transition:transform .6s var(--ease),border-radius .6s var(--ease);transform-style:preserve-3d}
.card:hover .cover{border-radius:36px}
.cover .art{position:absolute;inset:0;transition:transform .9s var(--ease)}
.card:hover .cover .art{transform:scale(1.035)}
.cover .tagbar{position:absolute;left:16px;top:16px;display:flex;gap:6px;flex-wrap:wrap;z-index:2}
.cover .tagbar span{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:var(--surface);color:var(--ink)}
.cover .open{position:absolute;right:16px;bottom:16px;width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-size:20px;transform:scale(0) rotate(-45deg);transition:transform .5s var(--ease);z-index:2}
.card:hover .open,.card:focus-visible .open{transform:scale(1) rotate(0)}
.meta{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding-inline:4px}
.meta h3{font-size:clamp(22px,2.2vw,28px)}
.meta p{color:var(--muted);font-size:15px;margin-top:4px}
.meta .yr{font-family:var(--f-mono);font-size:12px;color:var(--muted);white-space:nowrap}
.slot{border:1.5px dashed var(--line);border-radius:var(--r-lg);display:grid;place-items:center;text-align:center;padding:32px;color:var(--muted);min-height:220px;grid-column:span 12;transition:border-color .3s,background .3s}
.slot:hover{border-color:var(--accent);background:var(--accent-soft)}
.slot strong{display:block;font-family:var(--f-display);font-size:22px;color:var(--ink);margin-bottom:4px}
@media (max-width:760px){.card,.card.w7,.card.w5{grid-column:span 12}}

/* mock art (stand-ins until real covers are dropped in) */
.mk{position:absolute;background:var(--mock-bg);border-radius:14px;box-shadow:0 20px 40px -20px rgba(20,21,43,.35);overflow:hidden}
.mk-browser{left:9%;right:9%;top:20%;bottom:-6%}
.mk-bar{height:28px;display:flex;align-items:center;gap:6px;padding-inline:12px;border-bottom:1px solid var(--mock-line)}
.mk-bar i{width:8px;height:8px;border-radius:50%;background:var(--mock-line)}
.mk-bar b{margin-left:10px;height:12px;flex:0 1 40%;border-radius:6px;background:var(--mock-line)}
.mk-body{padding:6% 7%;display:grid;gap:10px}
.mk-h{font-family:var(--f-display);font-weight:800;font-size:clamp(16px,2.6vw,30px);line-height:1;color:var(--ink);letter-spacing:-.03em}
.mk-l{height:8px;border-radius:4px;background:var(--mock-line)}
.mk-btn{width:34%;height:22px;border-radius:999px;background:var(--strong)}
.mk-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.mk-row div{aspect-ratio:4/3;border-radius:8px;background:var(--tint)}
.mk-row div:nth-child(2){background:color-mix(in srgb,var(--strong) 30%,var(--tint))}
.mk-phone{width:30%;aspect-ratio:9/19;border-radius:22px;padding:10px 8px;display:flex;flex-direction:column;gap:7px;border:4px solid var(--ink)}
.mk-phone.p1{left:18%;top:14%;transform:rotate(-6deg)}
.mk-phone.p2{left:50%;top:22%;transform:rotate(5deg)}
.mk-phone .notch{width:36%;height:6px;border-radius:4px;background:var(--ink);margin:0 auto 4px}
.mk-phone .ph-hero{aspect-ratio:1.3;border-radius:10px;background:var(--strong);padding:0}
.mk-phone .it{display:flex;gap:6px;align-items:center}
.mk-phone .it::before{content:"";width:18px;height:18px;border-radius:6px;background:var(--tint);flex:none}
.mk-phone .it span{flex:1;height:6px;border-radius:3px;background:var(--mock-line)}
.mk-tv{left:8%;right:8%;top:16%;aspect-ratio:16/9;border:5px solid var(--ink);border-radius:12px;padding:5%;display:grid;grid-template-columns:1.2fr 1fr;gap:6%}
.mk-tv .play{border-radius:10px;background:var(--strong);display:grid;place-items:center;color:#fff;font-size:22px}
.mk-tv .side{display:grid;gap:8px;align-content:start}
.mk-stand{position:absolute;left:44%;right:44%;top:calc(16% + 0px);height:0}
.brand{position:absolute;inset:0;display:grid;place-items:center}
.brand .mascot{width:42%;aspect-ratio:1;border-radius:50%;background:var(--strong);position:relative;box-shadow:0 30px 50px -24px rgba(20,21,43,.4)}
.brand .mascot::before,.brand .mascot::after{content:"";position:absolute;top:38%;width:14%;aspect-ratio:1;border-radius:50%;background:var(--ink);animation:blink 4s infinite}
.brand .mascot::before{left:30%}.brand .mascot::after{right:30%}
.brand .mascot i{position:absolute;left:35%;right:35%;top:58%;height:12%;border-radius:0 0 40px 40px;background:var(--ink)}
@keyframes blink{0%,46%,50%,100%{transform:scaleY(1)}48%{transform:scaleY(.1)}}
.brand .word{position:absolute;bottom:12%;font-family:var(--f-display);font-weight:800;font-size:clamp(22px,3vw,36px);letter-spacing:-.03em;color:var(--ink)}
.brand .sw{position:absolute;right:8%;top:16%;display:grid;gap:6px}
.brand .sw i{width:26px;height:26px;border-radius:8px}
.blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.55;background:var(--strong)}

/* case studies */
.cases{display:grid;gap:20px}
.case{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,56px);align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(16px,2.4vw,24px);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.case:hover{box-shadow:var(--shadow)}
.case .cover{aspect-ratio:16/11}
.case:nth-child(even) .cover{order:2}
.case-body{display:grid;gap:18px;padding-block:8px;min-width:0}
.case-body .kind{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--strong)}
.case-body h3{font-size:clamp(30px,3.6vw,46px)}
.case-body>p{color:var(--muted);font-size:17px;max-width:44ch}
.scope{display:flex;flex-wrap:wrap;gap:6px}
.scope span{font-size:13px;padding:6px 12px;border-radius:999px;background:var(--tint);color:var(--ink)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border-top:1px solid var(--line);padding-top:18px}
.facts dt{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.facts dd{margin:4px 0 0;font-weight:600;font-size:14px}
@media (max-width:860px){.case{grid-template-columns:1fr}.case:nth-child(even) .cover{order:0}}

/* services */
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.svc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:24px;display:flex;flex-direction:column;gap:14px;min-height:300px;position:relative;overflow:hidden;transition:transform .5s var(--ease),border-color .3s}
.svc::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-80px;bottom:-110px;background:var(--tint);transition:transform .7s var(--ease)}
.svc:hover{border-color:var(--strong)}
.svc:hover::before{transform:scale(2.6)}
.svc>*{position:relative}
.svc .ic{width:52px;height:52px;border-radius:16px;background:var(--tint);display:grid;place-items:center;transition:transform .6s var(--ease),background .4s}
.svc:hover .ic{transform:rotate(-8deg) scale(1.06);background:var(--surface)}
.svc .ic svg{width:26px;height:26px;stroke:var(--strong);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.svc h3{font-size:24px;margin-top:auto}
.svc p{color:var(--muted);font-size:15px}
.svc .for{font-family:var(--f-mono);font-size:11.5px;color:var(--ink);letter-spacing:.04em}
@media (max-width:980px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.svc-grid{grid-template-columns:1fr}.svc{min-height:0}}

/* art & photo */
.art-sec{background:var(--surface);border-block:1px solid var(--line)}
.masonry{columns:3 260px;column-gap:16px}
.tile{break-inside:avoid;margin-bottom:16px;border-radius:var(--r-md);overflow:hidden;position:relative;background:var(--tint);cursor:pointer;display:block;width:100%;text-align:left}
.tile.out{display:none}
.tile .pic{width:100%;transition:transform .9s var(--ease),filter .6s}
.tile:hover .pic{transform:scale(1.05)}
.tile figcaption{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:14px;font-weight:600;transform:translateY(calc(100% + 16px));transition:transform .5s var(--ease)}
.tile:hover figcaption,.tile:focus-visible figcaption{transform:none}
.tile figcaption small{font-family:var(--f-mono);font-size:11px;color:var(--muted);font-weight:400;text-transform:uppercase;letter-spacing:.08em}
@media (hover:none){.tile figcaption{transform:none}}

/* testimonials */
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.q{border-radius:var(--r-lg);padding:28px;background:var(--tint);display:flex;flex-direction:column;gap:28px;transition:transform .5s var(--ease)}
.q:hover{transform:translateY(-6px) rotate(-.6deg)}
.q:nth-child(2):hover{transform:translateY(-6px) rotate(.6deg)}
.q blockquote{margin:0;font-family:var(--f-display);font-weight:600;font-size:clamp(19px,1.7vw,22px);line-height:1.3;letter-spacing:-.01em}
.q blockquote::before{content:"\201C";display:block;font-size:64px;line-height:.6;color:var(--strong);margin-bottom:8px}
.q footer{margin-top:auto;display:flex;align-items:center;gap:12px;font-size:14px}
.q footer i{width:42px;height:42px;border-radius:50%;background:var(--strong);color:var(--accent-ink);display:grid;place-items:center;font-style:normal;font-weight:700;font-family:var(--f-display)}
.q footer span{color:var(--muted);display:block;font-size:13px}
@media (max-width:900px){.quotes{grid-template-columns:1fr}}

/* about */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:start}
.about-big{font-family:var(--f-display);font-weight:600;font-size:clamp(26px,3vw,38px);line-height:1.2;letter-spacing:-.02em;text-wrap:pretty}
.about-big em{font-style:normal;color:var(--accent)}
.about-side{display:grid;gap:28px}
.about-side p{color:var(--muted);max-width:60ch}
.tools{display:flex;flex-wrap:wrap;gap:8px}
.tools span{padding:8px 14px;border:1px solid var(--line);border-radius:10px;font-size:14px;font-weight:500;background:var(--surface);transition:transform .3s var(--ease),border-color .3s}
.tools span:hover{transform:translateY(-3px);border-color:var(--accent)}
.where{display:flex;flex-wrap:wrap;gap:20px;font-family:var(--f-mono);font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.where b{display:block;color:var(--ink);font-family:var(--f-display);font-size:28px;letter-spacing:-.02em;text-transform:none}
@media (max-width:860px){.about{grid-template-columns:1fr}}

/* contact */
.contact{padding-block:clamp(40px,6vw,72px) clamp(32px,4vw,48px)}
.cta-card{background:var(--accent);color:var(--accent-ink);border-radius:clamp(28px,4vw,48px);padding:clamp(32px,6vw,80px);position:relative;overflow:hidden;isolation:isolate}
.cta-card .eyebrow::before{background:var(--accent-ink)}
.cta-card .ring{position:absolute;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--accent-ink) 25%,transparent);z-index:-1}
.cta-card h2{font-size:clamp(40px,7vw,96px);font-weight:800;letter-spacing:-.04em;max-width:12ch}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:40px}
.mail{display:flex;align-items:center;gap:6px;background:var(--accent-ink);color:var(--ink);border-radius:999px;padding:6px 6px 6px 22px;font-weight:600;font-size:clamp(14px,1.6vw,18px);max-width:100%;min-width:0}
.mail span{overflow:hidden;text-overflow:ellipsis;user-select:all}
.copy{flex:none;padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:14px;font-weight:600;transition:transform .3s var(--ease)}
.copy:active{transform:scale(.94)}
.socials{display:flex;gap:8px;flex-wrap:wrap}
.socials a{padding:12px 18px;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--accent-ink) 40%,transparent);font-weight:600;font-size:14px;transition:background .3s,color .3s}
.socials a:hover{background:var(--accent-ink);color:var(--accent)}
footer.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:28px 40px;font-size:13px;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,140%);background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:999px;font-weight:600;font-size:14px;z-index:80;transition:transform .5s var(--ease)}
.toast.show{transform:translate(-50%,0)}

/* project drawer */
dialog.drawer{margin:0 0 0 auto;height:100%;max-height:100%;width:min(560px,100%);max-width:100%;border:0;padding:0;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);overflow:auto}
dialog.drawer::backdrop{background:rgba(13,14,26,.45);backdrop-filter:blur(4px)}
dialog.drawer[open]{animation:slide .55s var(--ease)}
@keyframes slide{from{transform:translateX(100%)}}
.dr-in{padding:calc(20px + env(safe-area-inset-top,0px)) clamp(16px,4vw,32px) 40px;display:grid;gap:22px}
.dr-top{display:flex;justify-content:space-between;align-items:center}
.x{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);font-size:20px;transition:transform .4s var(--ease)}
.x:hover{transform:rotate(90deg)}
.dr-in .cover{aspect-ratio:16/11}
.dr-in h3{font-size:clamp(32px,5vw,44px)}
.dr-in .sub{color:var(--muted);font-size:17px}
.dr-list{display:grid;gap:0;border-top:1px solid var(--line)}
.dr-list div{display:flex;justify-content:space-between;gap:16px;padding-block:12px;border-bottom:1px solid var(--line);font-size:15px}
.dr-list span:first-child{color:var(--muted)}
.note{font-size:14px;color:var(--muted);background:var(--bg);border-radius:var(--r-sm);padding:14px 16px;border:1px dashed var(--line)}

/* cursor */
.cursor{position:fixed;left:0;top:0;z-index:90;pointer-events:none;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:999px;background:var(--ink);display:grid;place-items:center;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .3s,opacity .3s;opacity:0}
.cursor span{font-size:13px;font-weight:600;color:var(--bg);opacity:0;transition:opacity .2s}
.cursor.big{width:84px;height:84px;margin:-42px 0 0 -42px;background:var(--accent)}
.cursor.big span{opacity:1;color:var(--accent-ink)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* scroll reveal: content stays visible at rest, only position animates */
.motion .rv{transform:translateY(40px);transition:transform 1s var(--ease);transition-delay:var(--d,0s)}
.motion .rv.in{transform:none}
.motion .rv-img .art{transform:scale(1.12)}
.motion .rv-img.in .art{transform:none;transition:transform 1.4s var(--ease)}
.motion .card.rv-img.in:hover .art{transform:scale(1.035)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .track{animation:none}
}

/* ===== multi-page additions ===== */
.links a[aria-current="page"]{color:var(--ink)}
.page-head{padding-block:clamp(40px,7vw,88px) clamp(32px,5vw,56px)}
.crumb{font-family:var(--f-mono);font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;display:flex;gap:8px;align-items:center}
.crumb a:hover{color:var(--accent)}
.page-head h1{font-size:clamp(52px,10vw,132px);font-weight:800;letter-spacing:-.045em;line-height:.92;margin-block:20px 24px;display:flex;align-items:flex-start;gap:.15em;flex-wrap:wrap}
.page-head h1 sup{font-family:var(--f-mono);font-size:clamp(14px,1.6vw,20px);font-weight:500;letter-spacing:0;color:var(--accent);margin-top:.6em}
.page-head h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.page-head h1 .ln>span{display:inline-block;animation:up 1s var(--ease) both}
.page-head .lead{max-width:52ch}
.page-head .row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px}

.link-arrow{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:16px;padding-block:6px;border-bottom:2px solid var(--line);transition:border-color .3s,gap .4s var(--ease)}
.link-arrow:hover{border-color:var(--accent);gap:16px;color:var(--accent)}

/* sticky category tabs on Work */
.subnav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 84px);z-index:40;padding-block:8px;margin-bottom:8px}
.subnav .filters{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:inline-flex;padding:6px;border-radius:999px;border:1px solid var(--line);flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none}
.subnav .chip{border:0;background:transparent;white-space:nowrap}
.subnav .chip[aria-current="true"]{background:var(--ink);color:var(--bg)}
.cat-sec{padding-block:clamp(48px,7vw,88px) 0;scroll-margin-top:150px}
.cat-head{display:grid;grid-template-columns:auto 1fr auto;gap:12px 24px;align-items:end;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:28px}
.cat-head .num{font-family:var(--f-mono);font-size:13px;color:var(--strong);background:var(--tint);padding:6px 12px;border-radius:999px;align-self:center}
.cat-head h2{font-size:clamp(32px,5vw,56px)}
.cat-head p{color:var(--muted);max-width:40ch;font-size:15px;text-align:right}
@media (max-width:760px){.cat-head{grid-template-columns:auto 1fr}.cat-head p{grid-column:1/-1;text-align:left}}
.list-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
.list-grid .card{grid-column:auto}
.list-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.list-grid .slot{grid-column:auto;min-height:0;aspect-ratio:4/3}
@media (max-width:900px){.list-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.list-grid,.list-grid.three{grid-template-columns:1fr}}

/* home teasers */
.teaser-foot{display:flex;justify-content:center;margin-top:56px}
.art-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.art-strip .tile{margin:0}
.art-strip .pic{aspect-ratio:3/4!important}
@media (max-width:760px){.art-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
.about-teaser{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,5vw,64px);align-items:end}
@media (max-width:860px){.about-teaser{grid-template-columns:1fr}}

/* art page lightbox */
dialog.lightbox{border:0;padding:0;background:transparent;max-width:min(920px,calc(100% - 32px));width:100%;max-height:calc(100% - 32px);overflow:visible}
dialog.lightbox::backdrop{background:rgba(13,14,26,.8);backdrop-filter:blur(6px)}
dialog.lightbox[open]{animation:pop .5s var(--ease)}
@keyframes pop{from{transform:scale(.92);opacity:0}}
.lb-in{background:var(--surface);border-radius:var(--r-lg);overflow:hidden;display:grid}
.lb-in .pic{aspect-ratio:16/10!important;max-height:70vh}
.lb-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px}
.lb-bar h3{font-size:22px}
.lb-bar small{font-family:var(--f-mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.lb-nav{display:flex;gap:8px}
.lb-nav button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);font-size:18px;transition:background .3s,transform .3s var(--ease)}
.lb-nav button:hover{background:var(--accent-soft);transform:scale(1.06)}

/* about page */
.portrait{aspect-ratio:4/5;border-radius:var(--r-lg);background:var(--t-sky);position:relative;overflow:hidden}
.portrait .face{position:absolute;left:22%;right:22%;top:18%;aspect-ratio:1;border-radius:50%;background:var(--t-sky-s)}
.portrait .body{position:absolute;left:10%;right:10%;bottom:-20%;height:48%;border-radius:50% 50% 0 0;background:var(--accent)}
.portrait .tag{position:absolute;left:16px;bottom:16px;padding:8px 14px;border-radius:999px;background:var(--surface);font-size:13px;font-weight:600}
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:s}
.step{border-top:2px solid var(--ink);padding-top:18px;display:grid;gap:8px}
.step::before{counter-increment:s;content:"0" counter(s);font-family:var(--f-mono);font-size:12px;color:var(--accent)}
.step h3{font-size:22px}
.step p{color:var(--muted);font-size:15px}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* contact page */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,48px);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,3.5vw,40px);display:grid;gap:22px}
.field{display:grid;gap:8px}
.field label,.field legend{font-size:14px;font-weight:600}
.field input,.field textarea{font:inherit;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;transition:border-color .3s,box-shadow .3s;width:100%}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.field .err{font-size:13px;color:var(--t-pink-s)}
fieldset.field{border:0;padding:0;margin:0}
.pick{display:flex;flex-wrap:wrap;gap:8px}
.pick{position:relative}
.pick input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.pick label{padding:10px 16px;border-radius:999px;border:1.5px solid var(--line);font-weight:500;cursor:pointer;transition:all .3s var(--ease)}
.pick input:checked+label{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pick input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
.pick label:hover{border-color:var(--ink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.two{grid-template-columns:1fr}}
.side-card{border-radius:var(--r-lg);padding:28px;display:grid;gap:14px;background:var(--tint)}
.side-card h3{font-size:24px}
.side-card p{color:var(--muted)}
.side-stack{display:grid;gap:16px}
.done{display:grid;gap:14px;text-align:left}
.done .check{width:56px;height:56px;border-radius:50%;background:var(--t-mint);display:grid;place-items:center}
.done .check svg{width:28px;height:28px;stroke:var(--t-mint-s);stroke-width:3;fill:none;stroke-dasharray:30;stroke-dashoffset:30;animation:drawc .6s .2s var(--ease) forwards}
@keyframes drawc{to{stroke-dashoffset:0}}
.socials.dark a{border-color:var(--line)}
.socials.dark a:hover{background:var(--ink);color:var(--bg)}

/* page transition curtain */
.curtain{position:fixed;inset:0;z-index:100;background:var(--accent);transform:translateY(100%);pointer-events:none;visibility:hidden}
.leaving .curtain,.entering .curtain{visibility:visible}
.leaving .curtain{transform:none;transition:transform .45s var(--ease)}
.entering .curtain{animation:lift .6s var(--ease) forwards}
@keyframes lift{from{transform:none}to{transform:translateY(-100%)}}

.links .only-mobile{display:none}
@media (max-width:820px){.links .only-mobile{display:block}}

/* ===== project / case study pages ===== */
.pj-hero{background:var(--tint);border-radius:0 0 clamp(28px,5vw,56px) clamp(28px,5vw,56px);padding-block:clamp(120px,14vw,170px) clamp(40px,6vw,72px);margin-top:-96px;position:relative;overflow:hidden}
.pj-hero::after{content:"";position:absolute;width:46vw;max-width:620px;aspect-ratio:1;border-radius:50%;background:var(--strong);opacity:.14;right:-12vw;top:-18vw;pointer-events:none}
.pj-hero .crumb{position:relative;z-index:1}
.pj-hero h1{font-size:clamp(48px,9vw,120px);font-weight:800;letter-spacing:-.045em;line-height:.92;margin-block:18px 20px;position:relative;z-index:1}
.pj-hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.pj-hero h1 .ln>span{display:inline-block;animation:up 1s var(--ease) both}
.pj-hero .lead{color:var(--ink);opacity:.78;max-width:46ch;position:relative;z-index:1}
.pj-kind{display:inline-flex;gap:8px;flex-wrap:wrap;position:relative;z-index:1}
.pj-kind span{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:var(--surface)}
.pj-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;position:relative;z-index:1;animation:fade .9s .35s var(--ease) both}
.btn.on-tint{background:var(--ink);color:var(--bg)}
.btn.on-tint:hover{box-shadow:0 10px 24px -8px rgba(20,21,43,.5)}
.btn.soft{background:var(--surface);color:var(--ink)}
.btn[aria-disabled="true"]{background:transparent;color:var(--muted);border:1.5px dashed color-mix(in srgb,var(--ink) 25%,transparent);cursor:default;box-shadow:none}
.pj-cover{position:relative;z-index:1;margin-top:clamp(36px,5vw,56px);aspect-ratio:16/8;border-radius:var(--r-lg);overflow:hidden;background:color-mix(in srgb,var(--strong) 22%,var(--tint));box-shadow:var(--shadow)}
.pj-cover .art{will-change:transform}
@media (max-width:640px){.pj-cover{aspect-ratio:4/3}}

.facts-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);margin-top:clamp(32px,5vw,56px);overflow:hidden}
.facts-strip div{padding:20px 22px;border-left:1px solid var(--line);display:grid;gap:4px;min-width:0}
.facts-strip div:first-child{border-left:0}
.facts-strip dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.facts-strip dd{margin:0;font-weight:600;font-size:15px}
@media (max-width:760px){.facts-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.facts-strip div:nth-child(3){border-left:0}.facts-strip div:nth-child(n+3){border-top:1px solid var(--line)}}

.cs{padding-block:clamp(56px,8vw,104px) 0}
.cs-row{display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
.cs-label{position:sticky;top:110px;display:grid;gap:12px}
.cs-label .no{font-family:var(--f-mono);font-size:12px;color:var(--strong);letter-spacing:.08em}
.cs-label h2{font-size:clamp(28px,3.4vw,42px)}
.cs-body{display:grid;gap:28px;min-width:0}
.prose{display:grid;gap:16px;font-size:18px;line-height:1.65;max-width:62ch}
.prose p{color:var(--ink)}
.prose .draft{color:var(--muted);font-style:italic}
@media (max-width:860px){.cs-row{grid-template-columns:1fr}.cs-label{position:static}}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.trio>div{border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);padding:22px;display:grid;gap:8px;align-content:start}
.trio h3{font-size:20px}
.trio p{color:var(--muted);font-size:15px}
.trio .ic{width:40px;height:40px;border-radius:12px;background:var(--tint);display:grid;place-items:center;font-family:var(--f-mono);font-size:13px;color:var(--strong);font-weight:500}
@media (max-width:760px){.trio{grid-template-columns:1fr}}

.process{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.process span{padding:10px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:500;font-size:14px}
.process i{color:var(--muted);font-style:normal}

/* image / mockup slots */
.shots{display:grid;gap:16px}
.shots.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.shots.g21{grid-template-columns:2fr 1fr}
@media (max-width:760px){.shots.g2,.shots.g3,.shots.g21{grid-template-columns:1fr}}
.shot{margin:0;display:grid;gap:10px;min-width:0}
.shot .frame{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--tint);aspect-ratio:var(--ar,16/10);transition:transform .6s var(--ease)}
.shot .frame>img{width:100%;height:100%;object-fit:cover;display:block}
.shot figcaption{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);letter-spacing:.04em;display:flex;justify-content:space-between;gap:10px}
.shot figcaption b{font-weight:500;color:var(--ink)}
.shot .frame .art,.shot .frame .mx{transition:transform .9s var(--ease)}
.shot:hover .frame .mx{transform:scale(1.03)}
.shot.full .frame{aspect-ratio:var(--ar,16/8)}
.shot.dark .frame{background:var(--ink)}

/* mockup primitives */
.mx{position:absolute;inset:0;display:grid;place-items:center}
.dv{background:var(--mock-bg);border-radius:12px;overflow:hidden;box-shadow:0 24px 50px -24px rgba(20,21,43,.4);position:relative}
.dv-browser{width:84%;aspect-ratio:16/10}
.dv-browser .bar{height:7%;min-height:16px;display:flex;align-items:center;gap:5px;padding-inline:10px;border-bottom:1px solid var(--mock-line)}
.dv-browser .bar i{width:7px;height:7px;border-radius:50%;background:var(--mock-line)}
.dv-browser .bar b{margin-left:8px;height:40%;width:36%;border-radius:6px;background:var(--mock-line)}
.pg{padding:5% 6%;display:grid;gap:6%;height:93%;grid-template-rows:auto 1fr}
.pg-top{display:grid;grid-template-columns:1.1fr 1fr;gap:6%;align-items:center}
.pg-top .tx{display:grid;gap:8px}
.pg-h{font-family:var(--f-display);font-weight:800;font-size:clamp(12px,2.2vw,30px);line-height:1;letter-spacing:-.03em;color:var(--ink)}
.ln-s{height:6px;border-radius:3px;background:var(--mock-line)}
.pill-s{width:40%;height:16px;border-radius:999px;background:var(--strong)}
.blk{border-radius:8px;background:var(--tint)}
.blk.s{background:var(--strong)}
.blk.m{background:color-mix(in srgb,var(--strong) 35%,var(--tint))}
.pg-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:4%}
.dv-phone{width:23%;aspect-ratio:9/19.5;border-radius:18px;border:4px solid var(--ink);padding:5% 4%;display:flex;flex-direction:column;gap:6px}
.dv-phone .nt{width:34%;height:5px;border-radius:3px;background:var(--ink);margin:0 auto 4px}
.dv-phone .hd{aspect-ratio:1.25;border-radius:10px;background:var(--strong)}
.dv-phone .rw{display:flex;gap:5px;align-items:center}
.dv-phone .rw::before{content:"";width:16px;height:16px;border-radius:5px;background:var(--tint);flex:none}
.dv-phone .rw span{flex:1;height:5px;border-radius:3px;background:var(--mock-line)}
.dv-phone .tb{margin-top:auto;display:flex;justify-content:space-around;padding-top:6px;border-top:1px solid var(--mock-line)}
.dv-phone .tb i{width:12px;height:12px;border-radius:4px;background:var(--mock-line)}
.dv-phone .tb i:first-child{background:var(--strong)}
.phones{display:flex;gap:4%;justify-content:center;align-items:center;width:100%}
.phones .dv-phone:nth-child(2){transform:translateY(-6%);width:25%}
.dv-tablet{width:60%;aspect-ratio:4/3;border:6px solid var(--ink);border-radius:20px}
.dv-tv{width:78%;aspect-ratio:16/9;border:7px solid var(--ink);border-radius:12px;display:grid;grid-template-columns:1.3fr 1fr;gap:5%;padding:5%}
.dv-tv .play{border-radius:10px;background:var(--strong);display:grid;place-items:center;color:var(--surface);font-size:clamp(14px,3vw,30px)}
.dv-tv .rail{display:grid;gap:8%;align-content:center}
.wire{filter:grayscale(1);opacity:.9}
.wire .blk,.wire .blk.s,.wire .blk.m,.wire .pill-s{background:var(--mock-line);outline:1.5px dashed color-mix(in srgb,var(--ink) 25%,transparent);outline-offset:-1.5px}
.wire .pg-h{color:var(--muted)}
.flow{display:flex;align-items:center;gap:2%;width:90%;flex-wrap:nowrap}
.flow .node{flex:1;aspect-ratio:1.4;border-radius:12px;background:var(--mock-bg);display:grid;place-items:center;font-family:var(--f-mono);font-size:clamp(8px,1.1vw,12px);text-align:center;padding:6px;box-shadow:0 10px 24px -14px rgba(20,21,43,.4);color:var(--ink)}
.flow .node.k{background:var(--strong);color:var(--surface)}
.flow .ar{flex:none;width:4%;height:2px;background:var(--ink);position:relative}
.flow .ar::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left-color:var(--ink);border-right:0}
.persona{width:78%;background:var(--mock-bg);border-radius:16px;padding:6%;display:grid;grid-template-columns:auto 1fr;gap:6%;box-shadow:0 24px 50px -24px rgba(20,21,43,.4)}
.persona .av{width:clamp(44px,8vw,88px);aspect-ratio:1;border-radius:50%;background:var(--strong);position:relative;overflow:hidden}
.persona .av::after{content:"";position:absolute;left:25%;right:25%;top:22%;aspect-ratio:1;border-radius:50%;background:var(--tint)}
.persona .q{grid-column:1/-1;font-family:var(--f-display);font-weight:600;font-size:clamp(12px,1.6vw,18px);color:var(--ink)}
.swatches{display:grid;grid-template-columns:repeat(5,1fr);width:86%;height:62%;border-radius:14px;overflow:hidden;box-shadow:0 24px 50px -24px rgba(20,21,43,.35)}
.swatches div{display:flex;align-items:flex-end;padding:10%;font-family:var(--f-mono);font-size:clamp(8px,1vw,11px)}
.spec{width:86%;display:grid;grid-template-columns:auto 1fr;gap:6%;align-items:center;color:var(--ink)}
.spec .aa{font-family:var(--f-display);font-weight:800;font-size:clamp(56px,11vw,150px);line-height:.85;letter-spacing:-.05em;color:var(--strong)}
.spec .sc{display:grid;gap:6px;font-family:var(--f-display)}
.spec .sc span{display:block;line-height:1.05}
.comps{width:86%;display:grid;gap:12px;justify-items:start}
.comps .r{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.c-btn{padding:8px 16px;border-radius:999px;background:var(--strong);color:var(--surface);font-weight:600;font-size:13px}
.c-btn.o{background:transparent;border:1.5px solid var(--ink);color:var(--ink)}
.c-chip{padding:5px 12px;border-radius:999px;background:var(--mock-bg);font-size:12px;color:var(--ink)}
.c-in{width:220px;max-width:100%;height:34px;border-radius:10px;background:var(--mock-bg);border:1.5px solid var(--mock-line)}
.c-tog{width:42px;height:24px;border-radius:999px;background:var(--strong);position:relative}
.c-tog::after{content:"";position:absolute;right:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--surface)}
.masc{width:var(--s,40%);aspect-ratio:1;border-radius:50%;background:var(--strong);position:relative;box-shadow:0 24px 40px -22px rgba(20,21,43,.45)}
.masc::before,.masc::after{content:"";position:absolute;top:38%;width:14%;aspect-ratio:1;border-radius:50%;background:var(--ink)}
.masc::before{left:30%}.masc::after{right:30%}
.masc i{position:absolute;left:35%;right:35%;top:58%;height:12%;border-radius:0 0 40px 40px;background:var(--ink)}
.masc.sad i{border-radius:40px 40px 0 0;top:62%}
.masc.wow i{left:43%;right:43%;height:14%;border-radius:50%}
.masc.wink::after{height:4%;aspect-ratio:auto;top:42%;border-radius:2px}
.masc.blink::before,.masc.blink::after{animation:blink 4s infinite}
.poses{display:grid;grid-template-columns:repeat(4,1fr);gap:6%;width:84%;place-items:center}
.poses .masc{--s:100%}
.constr{position:relative;width:52%;aspect-ratio:1;display:grid;place-items:center}
.constr::before{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px dashed var(--ink);opacity:.35}
.constr::after{content:"";position:absolute;inset:-8%;background:linear-gradient(var(--ink),var(--ink)) center/1.5px 100% no-repeat,linear-gradient(var(--ink),var(--ink)) center/100% 1.5px no-repeat;opacity:.25}
.constr .masc{--s:76%}
.merch{width:88%;display:grid;grid-template-columns:repeat(3,1fr);gap:5%;align-items:end}
.merch svg{width:100%;height:auto;filter:drop-shadow(0 18px 24px rgba(20,21,43,.25))}
.bcards{position:relative;width:62%;aspect-ratio:1.6}
.bcards div{position:absolute;inset:0;border-radius:12px;box-shadow:0 24px 40px -20px rgba(20,21,43,.45);display:flex;align-items:flex-end;padding:7%;font-family:var(--f-display);font-weight:800;font-size:clamp(12px,2vw,22px)}
.bcards div:first-child{background:var(--strong);color:var(--ink);transform:rotate(-8deg) translate(-8%,-6%)}
.bcards div:last-child{background:var(--mock-bg);color:var(--ink);transform:rotate(4deg) translate(8%,6%)}
.stickers{width:80%;display:flex;flex-wrap:wrap;gap:6%;justify-content:center}
.stickers>*{flex:0 0 26%}
.stickers .st{aspect-ratio:1;border-radius:50%;background:var(--surface);display:grid;place-items:center;padding:10%;box-shadow:0 12px 24px -14px rgba(20,21,43,.4)}
.stickers .st{position:relative}
.stickers .st .masc{position:absolute;inset:14%;width:auto;box-shadow:none}
.frames{display:grid;grid-template-columns:repeat(4,1fr);gap:3%;width:90%}
.frames>div{aspect-ratio:1;border-radius:12px;background:var(--mock-bg);display:grid;place-items:center;position:relative;overflow:hidden}
.frames>div::after{content:attr(data-n);position:absolute;left:8px;top:6px;font-family:var(--f-mono);font-size:10px;color:var(--muted)}
.frames .masc{--s:52%}
.add-hint{position:absolute;right:12px;top:12px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border-radius:999px;background:var(--surface);color:var(--muted);opacity:0;transition:opacity .3s}
.shot:hover .add-hint{opacity:1}

.results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.results div{border-radius:var(--r-md);background:var(--tint);padding:24px;display:grid;gap:6px}
.results b{font-family:var(--f-display);font-size:clamp(36px,4.6vw,56px);letter-spacing:-.03em;line-height:1;color:var(--ink)}
.results span{color:var(--muted);font-size:14px}
@media (max-width:640px){.results{grid-template-columns:1fr}}

.linkcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.linkcard{border-radius:var(--r-lg);padding:clamp(24px,3.5vw,40px);display:grid;gap:40px;min-height:220px;background:var(--surface);border:1px solid var(--line);transition:transform .5s var(--ease),background .4s,border-color .4s;position:relative;overflow:hidden}
.linkcard:first-child{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.linkcard .t{font-family:var(--f-display);font-weight:700;font-size:clamp(26px,3vw,38px);letter-spacing:-.02em;line-height:1.05}
.linkcard .s{font-family:var(--f-mono);font-size:12px;opacity:.7;text-transform:uppercase;letter-spacing:.08em}
.linkcard .go{position:absolute;right:24px;top:24px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:22px;background:var(--accent);color:var(--accent-ink);transition:transform .5s var(--ease)}
a.linkcard:hover{transform:translateY(-4px)}
a.linkcard:hover .go{transform:rotate(45deg) scale(1.08)}
.linkcard.off{background:transparent;border-style:dashed;color:var(--muted)}
.linkcard.off .go{background:var(--line);color:var(--muted)}
@media (max-width:700px){.linkcards{grid-template-columns:1fr}}

.next{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;border-radius:var(--r-lg);padding:clamp(24px,4vw,48px);background:var(--tint);position:relative;overflow:hidden;transition:transform .6s var(--ease)}
.next:hover{transform:scale(.99)}
.next small{font-family:var(--f-mono);font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.next h2{font-size:clamp(40px,7vw,96px);font-weight:800;letter-spacing:-.04em;margin-top:8px}
.next .thumb{width:clamp(120px,22vw,280px);aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;position:relative;background:color-mix(in srgb,var(--strong) 22%,var(--tint));transition:transform .7s var(--ease)}
.next:hover .thumb{transform:rotate(-4deg) scale(1.06)}
@media (max-width:640px){.next{grid-template-columns:1fr}}
.prevnext{display:flex;justify-content:space-between;gap:12px;margin-top:16px;flex-wrap:wrap}

a.cover{display:block;color:inherit}
a.card{color:inherit}
.pj-cover .art,.next .thumb .art,.shot .frame .art{position:absolute;inset:0}
.dv-browser{width:auto;height:80%;max-width:90%}
.dv-tablet{width:auto;height:78%;max-width:80%}
.dv-tablet .pg-h,.next .thumb .mk-h{font-size:clamp(10px,1.3vw,18px)}
.dv-phone{width:auto;height:84%}
.phones .dv-phone:nth-child(2){width:auto;height:90%}
.dv-tv{width:auto;height:74%;max-width:84%}
.comps{width:auto;justify-items:center;transform:scale(1.25)}
.comps .r{justify-content:center}
@media (max-width:640px){.dv-phone{border-width:3px;border-radius:12px}.comps{transform:none}}
.crumb{flex-wrap:wrap;row-gap:4px}
/* real images */
.art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
img.pic{display:block;width:100%;object-fit:cover}
img.portrait{display:block;width:100%;object-fit:cover}

/* dark "Selected work" band on Home: re-maps the text/surface tokens inside it */
.work-dark{
  --band:#15111F;
  --bg:#15111F; --surface:#221C30; --ink:#F3EFFA; --muted:#A79FBA; --line:#342B47;
  --accent-soft:#2E2244;
  background:var(--band);color:var(--ink);color-scheme:dark;
  border-radius:clamp(28px,5vw,56px);margin-inline:clamp(8px,1.5vw,16px)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .work-dark{--band:#1A1526;--bg:#1A1526}}
:root[data-theme="dark"] .work-dark{--band:#1A1526;--bg:#1A1526}
.work-dark .cover .tagbar span{background:#FFFFFF;color:#14152B}
.work-dark .link-arrow{border-color:var(--line)}
/* keep project covers in the page's own colours inside the dark band */
.work-dark .cover{--ink:#14152B; --surface:#FFFFFF; --muted:#5E6080; --line:#E7E7F1}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .work-dark .cover{--ink:#F1F1FA; --surface:#161729; --muted:#A3A5C2; --line:#272943}}
:root[data-theme="dark"] .work-dark .cover{--ink:#F1F1FA; --surface:#161729; --muted:#A3A5C2; --line:#272943}

/* ===== section separation: full-width, square-edged colour bands (like the original site) ===== */
:root{--bg-alt:#F4F2F8}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg-alt:#13121D}}
:root[data-theme="dark"]{--bg-alt:#13121D}
.marquee{background:var(--accent);color:var(--accent-ink);border-block:0;padding-block:22px}
.track span::after{background:var(--accent-ink)!important;opacity:.8}
.work-dark{border-radius:0;margin-inline:0}
.art-sec{background:var(--bg-alt);border-block:0}
.contact-band{position:relative;overflow:hidden;isolation:isolate;background:var(--accent);color:var(--accent-ink);padding-block:clamp(72px,10vw,128px)}
.contact-band .ring{position:absolute;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--accent-ink) 25%,transparent);z-index:-1}
.contact-band .eyebrow{color:inherit;opacity:.85}
.contact-band .eyebrow::before{background:var(--accent-ink)}
.contact-band h2{font-size:clamp(40px,7vw,96px);font-weight:800;letter-spacing:-.04em;max-width:13ch;margin-top:16px}
.contact-band .btn.ghost{color:inherit;border-color:currentColor}
.contact-band .btn.ghost:hover{background:var(--accent-ink);color:var(--accent)}
.site-foot{background:var(--bg);padding-block:clamp(48px,7vw,80px) 0}
.find{display:grid;gap:18px;justify-items:center;text-align:center;padding-bottom:clamp(32px,5vw,56px);border-bottom:1px solid var(--line)}
.find-links{display:flex;flex-wrap:wrap;gap:clamp(20px,5vw,64px);justify-content:center}
.find-links a{font-family:var(--f-display);font-weight:700;font-size:clamp(24px,3.2vw,40px);letter-spacing:-.02em;transition:color .3s}
.find-links a span{font-size:.6em;color:var(--muted);transition:transform .4s var(--ease);display:inline-block}
.find-links a:hover{color:var(--accent)}
.find-links a:hover span{transform:translate(3px,-3px);color:var(--accent)}
/* Copy email button in the contact band */
.contact-band .copy-email{background:var(--accent-ink);color:var(--accent)}
.contact-band .copy-email:hover{box-shadow:0 12px 28px -10px rgba(0,0,0,.45)}
.ce-ic{position:relative;width:18px;height:18px;display:inline-block}
.ce-ic svg{position:absolute;inset:0;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--ease),opacity .3s}
.ce-ic .i-ok{opacity:0;transform:scale(.4) rotate(-30deg);stroke-width:2.6}
.copy-email.ok .i-copy{opacity:0;transform:scale(.4) rotate(30deg)}
.copy-email.ok .i-ok{opacity:1;transform:none}
.copy-email:active{transform:scale(.96)}
/* ===== infinite image slider under the hero ===== */
.slider-band{background:var(--accent);padding-block:clamp(28px,4vw,48px);overflow:hidden;position:relative}
.slider-track{display:flex;width:max-content;animation:slide 70s linear infinite}
.slider-band:hover .slider-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.slide{flex:none;position:relative;display:block;height:clamp(200px,26vw,360px);aspect-ratio:var(--ar,16/10);margin-right:clamp(12px,1.6vw,20px);border-radius:clamp(16px,2vw,24px);overflow:hidden;background:var(--tint);box-shadow:0 20px 40px -24px rgba(0,0,0,.45);transition:transform .6s var(--ease)}
.slide .cover{position:absolute;inset:0;border-radius:0;aspect-ratio:auto;background:var(--tint)}
.slide .cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.slide:hover{transform:translateY(-6px) rotate(-.6deg)}
.slide-tag{position:absolute;left:12px;bottom:12px;padding:6px 12px;border-radius:999px;background:#FFFFFF;color:#14152B;font-size:13px;font-weight:600;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .4s var(--ease)}
.slide:hover .slide-tag,.slide:focus-visible .slide-tag{opacity:1;transform:none}
@media (hover:none){.slide-tag{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.slider-band{overflow-x:auto}.slider-track{animation:none}}

/* ===== round 6 tweaks ===== */
/* navbar logo image */
.logo img{width:28px;height:28px;border-radius:8px;display:block;transition:transform .5s var(--ease)}
.logo:hover img{transform:rotate(-12deg) scale(1.08)}
/* hero: no underline, purple full stop */
.hl svg{display:none}

/* equal-width project cards everywhere */
.card.w7,.card.w5{grid-column:span 6}
.list-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.card.w7,.card.w5{grid-column:span 12}.list-grid.three{grid-template-columns:1fr}}

/* services: 2 x 2 large cards with an image area (like the original site) */
.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.svc{min-height:0;padding:clamp(16px,2.2vw,24px);gap:22px;border-radius:24px;background:var(--surface)}
.svc::before{display:none}
.svc-art{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:var(--tint)}
.svc-art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc-art .art{position:absolute;inset:0}
.svc-art .mx{transition:transform .9s var(--ease)}
.svc:hover .svc-art .mx,.svc:hover .svc-art .art{transform:scale(1.04)}
.svc-txt{display:grid;gap:8px;padding:4px 8px 8px}
.svc-txt .ic{width:44px;height:44px;border-radius:14px;margin-bottom:6px}
.svc h3{font-size:clamp(24px,2.4vw,32px);margin-top:0}
.svc p{font-size:16px;color:var(--ink)}
.svc .for{font-family:var(--f-body);font-size:15px;color:var(--muted);letter-spacing:0}
@media (max-width:760px){.svc-grid{grid-template-columns:1fr}}

/* about: full-width image */
.full-img{margin:0;width:100%;height:clamp(280px,48vw,640px);position:relative;overflow:hidden;background:var(--accent-soft)}
.full-img>img{width:100%;height:100%;object-fit:cover;display:block}
.full-ph{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(135deg,var(--t-violet),var(--t-sky) 50%,var(--t-pink))}
.full-ph::before{content:"";position:absolute;inset:0;background:url("images/doodle.svg") 0 0/200px repeat;opacity:.18;filter:invert(1)}
.full-ph span{position:relative;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;padding:8px 14px;border-radius:999px;background:var(--surface);color:var(--muted)}

/* page-transition curtain: purple with a doodle pattern at 10% opacity */
.curtain::before{content:"";position:absolute;inset:0;background:url("images/doodle.svg") 0 0/240px repeat;opacity:.1}


/* ===== round 7 ===== */
/* "How might we" statement on project pages */
.hmw{margin:0;padding:clamp(20px,3vw,32px);border-radius:var(--r-md);background:var(--tint);font-family:var(--f-display);font-weight:600;font-size:clamp(22px,2.6vw,32px);line-height:1.25;letter-spacing:-.01em;border-left:6px solid var(--strong)}
.hmw span{color:var(--strong)}
.hmw .draft{font-style:italic;color:var(--muted);font-weight:500}

/* previous / next project cards */
.prevnext2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pn{position:relative;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;padding:16px;border-radius:var(--r-lg);background:var(--tint);color:var(--ink);overflow:hidden;transition:transform .5s var(--ease)}
.pn-next{grid-template-columns:1fr auto;text-align:right}
.pn-next .thumb{order:2}
.pn .thumb{width:clamp(110px,16vw,200px);aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;position:relative;background:color-mix(in srgb,var(--strong) 22%,var(--tint));transition:transform .6s var(--ease)}
.pn .thumb .art{position:absolute;inset:0}
.pn small{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--strong)}
.pn h3{font-size:clamp(22px,2.6vw,34px);margin-block:6px 4px}
.pn p{color:var(--muted);font-size:14px}
.pn-arrow{position:absolute;top:16px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--bg);font-size:18px;transition:transform .5s var(--ease)}
.pn-prev .pn-arrow{right:16px}
.pn-next .pn-arrow{left:16px}
.pn:hover{transform:translateY(-4px)}
.pn:hover .thumb{transform:scale(1.04) rotate(-2deg)}
.pn-prev:hover .pn-arrow{transform:translateX(-4px)}
.pn-next:hover .pn-arrow{transform:translateX(4px)}
@media (max-width:760px){.prevnext2{grid-template-columns:1fr}.pn,.pn-next{grid-template-columns:auto 1fr;text-align:left}.pn-next .thumb{order:0}.pn-arrow{display:none}}

/* footer: contact + find me on (left), logo (right), in the purple band */
.site-foot2{padding-block:clamp(64px,9vw,112px) 0}
.foot-grid{display:grid;grid-template-columns:1fr auto;gap:clamp(32px,6vw,80px);align-items:center;padding-bottom:clamp(40px,6vw,72px)}
.foot-left{display:grid;gap:28px;min-width:0}
.foot-left h2{margin-top:0}
.find2{display:grid;gap:12px;padding-top:28px;border-top:1px solid color-mix(in srgb,var(--accent-ink) 25%,transparent)}
.site-foot2 .find-links{justify-content:flex-start}
.site-foot2 .find-links a{color:var(--accent-ink)}
.site-foot2 .find-links a span{color:inherit;opacity:.7}
.site-foot2 .find-links a:hover{color:var(--accent-ink);opacity:.85}
.foot-logo{display:block;width:clamp(120px,18vw,220px);aspect-ratio:1;border-radius:clamp(28px,4vw,52px);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-ink) 70%,transparent),0 30px 60px -24px rgba(0,0,0,.5);overflow:hidden;transition:transform .6s var(--ease)}
.foot-logo img{width:100%;height:100%;display:block}
.foot-logo:hover{transform:rotate(-8deg) scale(1.04)}
.site-foot2 .foot{border-top:1px solid color-mix(in srgb,var(--accent-ink) 25%,transparent);color:color-mix(in srgb,var(--accent-ink) 80%,transparent);padding-block:24px 32px}
.site-foot2 .foot a:hover{color:var(--accent-ink);text-decoration:underline}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}.foot-logo{width:96px;order:-1}}
.find2:first-child{border-top:0;padding-top:0}
.pn-prev .pn-txt{padding-right:56px}
.pn-next .pn-txt{padding-left:56px}
@media (max-width:760px){.pn-prev .pn-txt,.pn-next .pn-txt{padding:0}}
.site-foot2 .foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px}
/* gap between More projects and the footer; no arrow badges */
.prevnext2{margin-bottom:clamp(72px,10vw,128px)}
.pn-arrow{display:none}
.pn-prev .pn-txt,.pn-next .pn-txt{padding:0}
/* single link card fills the row */
.linkcards:has(> :only-child){grid-template-columns:1fr}
#cats{padding-bottom:clamp(72px,10vw,128px)}

/* ===== no strokes on boxes (buttons and form fields keep theirs) ===== */
.nav-in,.status,.f4,.case,.svc,.tools span,.subnav .filters,.form,.facts-strip,.trio>div,.process span,.linkcard,.mail{border:0!important}
@media (max-width:820px){.links{border:0}}
.facts-strip div{border:0!important}
.facts-strip{gap:2px;background:var(--bg-alt)}
/* boxes get a soft tint instead of an outline so they still read as separate */
.case,.svc,.trio>div,.form,.facts-strip,.process span,.tools span,.linkcard:not(:first-child){background:var(--bg-alt)}
.pj-hero .facts-strip{background:var(--surface)}
.status,.f4,.nav-in{box-shadow:var(--shadow)}
.linkcard.off{background:var(--bg-alt)}
.case:hover{box-shadow:none}
.svc:hover{transform:translateY(-4px)}
.foot-logo{box-shadow:0 30px 60px -24px rgba(0,0,0,.5)}
/* monogram mark for brand projects without a mascot */
.brand .mono,.constr .mono{width:36%;aspect-ratio:1;border-radius:28%;background:var(--strong);display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:clamp(28px,5.5vw,76px);letter-spacing:-.04em;color:#FFFFFF;box-shadow:0 30px 50px -24px rgba(20,21,43,.4);margin-bottom:12%}
.constr .mono{width:70%;margin:0;font-size:clamp(24px,4vw,60px)}
.brand .word.long{font-size:clamp(16px,2vw,26px);max-width:86%;text-align:center;line-height:1.05;text-wrap:balance}
.card.out{display:none}
.brand .mono{width:auto;height:40%;max-width:44%}
.constr .mono{height:auto;max-width:none}
.pj-cover .brand .word{bottom:16%}
.foot-logo{box-shadow:none;border-radius:0;overflow:visible;aspect-ratio:auto;height:auto}
.foot-logo img{height:auto;object-fit:contain}
.hero-img{inset:0;width:100%;height:100%;object-fit:cover;border-radius:28px;animation:fade 1s .3s var(--ease) both}
.stage:has(.hero-img) .float:not(.hero-img){display:none}
.hero-img{object-fit:contain;border-radius:0;box-shadow:none}
.hero{padding-block:clamp(28px,4.5vw,56px) clamp(40px,5vw,64px)}
.hero h1{font-size:clamp(40px,5.6vw,76px);margin-block:18px 16px}
.hero .lead{font-size:clamp(16px,1.3vw,18px)}
.hero-cta{margin-top:24px}
.who{margin-top:28px}
.stage{max-width:440px;width:100%;justify-self:end}
@media (max-width:900px){.stage{max-width:380px;justify-self:center}}
.slider-track{animation-duration:38s}
.slider-band:hover .slider-track{animation-play-state:running}
.slide-tag{display:none}
/* Home: hide the case studies section */
#cases{display:none}
#services{padding-top:clamp(72px,10vw,128px)!important}

/* Bigger screens: cards get wider instead of the side margins */
.wrap{max-width:2000px;padding-inline:clamp(16px,4vw,80px)}

/* Case study: full-width image stack after Solution */
.full-gallery{display:grid;gap:clamp(8px,1vw,16px);padding-top:clamp(56px,8vw,104px)}
.full-shot{margin:0;display:block}
.full-shot .frame{border-radius:0;aspect-ratio:auto;transform:none!important;background:var(--tint)}
.full-shot .frame:not(:has(img)){aspect-ratio:16/9}
.full-shot .frame>img{width:100%;height:auto;object-fit:initial;display:block}
.full-shot figcaption{display:none}
.slide .brand .sw{display:none}
/* .hero-grid{grid-template-columns:1fr 1fr}
.stage{max-width:720px}
@media (max-width:900px){.stage{max-width:460px}} */
/* hero image covers the whole right side, running to the right edge of the screen */
.hero-grid{grid-template-columns:1fr 1fr;align-items:stretch}
.stage{max-width:none;width:auto;justify-self:stretch;aspect-ratio:auto;min-height:clamp(360px,42vw,640px);margin-right:calc(-1 * clamp(16px,4vw,80px))}
.hero-img{border-radius:28px 0 0 28px}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .stage{min-height:0;aspect-ratio:4/3;max-width:none;justify-self:stretch;width:calc(100% + clamp(16px,4vw,80px));margin-left:0}
}