:root{
  --bg:#050505;
  --bg-soft:#0d0d0d;
  --line: rgba(255,255,255,0.12);
  --fg:#ffffff;
  --fg-dim:#dcdcdc;
  --fg-mute:#8a8a8a;
  --orange:#ffb35d;
  --pink:#f08fff;
  --cyan:#b1fcff;
  --blue2:#60a4ff;
  --blue:#84b9ff;
  --green:#c3ff84;
  --yellow:#fff4ab;
  --red:#ff9b9b;
  --ring-border: rgba(255,255,255,.5);
  --ring-bg: rgba(255,255,255,.06);
  --header-bg: rgba(5,5,5,.75);
  --fab-bg: rgba(10,10,10,.8);
  --select-fg:#000000;
  --pixel: 'VT323', monospace;
  --mono: 'DM Mono', monospace;
}

:root[data-theme="light"]{
  --bg:#f7f6f3;
  --bg-soft:#ffffff;
  --line: rgba(0,0,0,0.12);
  --fg:#0a0a0a;
  --fg-dim:#3a3a3a;
  --fg-mute:#6b6b6b;
  --orange:#b5680a;
  --pink:#b4189c;
  --cyan:#0e7490;
  --blue2:#1d4ed8;
  --blue:#1e40af;
  --green:#3f6212;
  --yellow:#92650a;
  --red:#b3261e;
  --ring-border: rgba(0,0,0,.35);
  --ring-bg: rgba(0,0,0,.06);
  --header-bg: rgba(247,246,243,.75);
  --fab-bg: rgba(255,255,255,.85);
  --select-fg:#ffffff;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--mono);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .3s ease, color .3s ease;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; }

::selection{ background:var(--pink); color:var(--select-fg); }

.wrap{
  max-width:1240px;
  margin:0 auto;
  padding-left:clamp(20px,5vw,64px);
  padding-right:clamp(20px,5vw,64px);
}

/* ---------- scanline / grain overlay ---------- */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:40;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- custom cursor ---------- */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  border-radius:50%;
  transform:translate(-50%,-50%);
  will-change:transform;
}
.cursor-dot{ width:6px; height:6px; background:var(--fg); }
.cursor-ring{
  width:34px; height:34px; border:1px solid var(--ring-border);
  transition:width .18s ease, height .18s ease, border-color .18s ease, background .18s ease;
}
.cursor-ring.big{ width:64px; height:64px; background:var(--ring-bg); }
body.has-cursor{ cursor:none; }
body.has-cursor a, body.has-cursor button{ cursor:none; }

/* ---------- nav ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px clamp(20px,5vw,64px);
  display:flex; align-items:center; justify-content:space-between;
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom:1px solid transparent;
  gap:16px;
}
header.scrolled{
  background:var(--header-bg);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.logo{
  font-family:var(--pixel); font-size:clamp(22px,3vw,30px);
  color:var(--orange); letter-spacing:1px;
}
.nav-right{ display:flex; align-items:center; gap:clamp(16px,2.4vw,28px); }
.nav-links{ display:flex; gap:clamp(20px,3vw,40px); align-items:center; }
.nav-links a{
  font-family:var(--pixel); font-size:26px; line-height:1;
  position:relative;
}
.nav-links a:nth-child(1){ color:var(--pink); }
.nav-links a:nth-child(2){ color:var(--cyan); }
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-4px; height:1px; width:0;
  background:currentColor; transition:width .25s ease;
}
.nav-links a:hover::after{ width:100%; }

.theme-toggle{
  width:38px; height:38px; border-radius:50%; flex:none;
  border:1px solid var(--line); background:transparent; color:var(--fg);
  display:flex; align-items:center; justify-content:center; font-size:16px;
  cursor:pointer; transition:border-color .2s ease, transform .2s ease;
}
.theme-toggle:hover{ border-color:var(--fg); transform:scale(1.06); }

.burger{
  display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; z-index:110;
}
.burger span{ width:24px; height:2px; background:var(--fg); transition:transform .25s ease, opacity .25s ease; }
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; background:var(--bg); z-index:99;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:28px;
  padding:0 32px;
  transform:translateY(-100%); transition:transform .4s cubic-bezier(.7,0,.3,1), background .3s ease;
}
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu a{ font-family:var(--pixel); font-size:44px; }
.mobile-menu a:nth-child(1){ color:var(--pink); }
.mobile-menu a:nth-child(2){ color:var(--cyan); }
.mobile-menu a:nth-child(3){ color:var(--blue2); }
.mobile-menu a:nth-child(4){ color:var(--green); }

/* ---------- marquee ---------- */
.marquee{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; white-space:nowrap; padding:12px 0; margin-top:82px;
}
.marquee-track{ display:inline-block; animation:scroll-left 31s linear infinite; }
.marquee-track span{
  font-family:var(--pixel); font-size:22px; color:var(--fg-mute);
  margin:0 22px; letter-spacing:2px;
}
.marquee-track span.hl{ color:var(--yellow); }
@keyframes scroll-left{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- hero ---------- */
.hero{
  padding:clamp(48px,8vw,96px) 0 clamp(40px,6vw,72px);
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,60px);
  align-items:center;
}
.hero h1{
  font-family:var(--mono); font-weight:500;
  font-size:clamp(24px,3.4vw,34px); line-height:1.35; margin:0 0 22px;
}
.hero .kicker{
  font-family:var(--pixel); font-size:18px; color:var(--green);
  letter-spacing:2px; margin-bottom:14px; display:inline-block;
}
.avatar-wrap{
  position:relative; justify-self:center; width:min(320px,80vw);
}
.avatar-wrap img{
  width:100%; border-radius:6px; image-rendering:pixelated;
  filter:grayscale(.1) contrast(1.05);
  border:1px solid var(--line);
}
.avatar-tag{
  position:absolute; bottom:-14px; left:-14px;
  background:var(--bg); border:1px solid var(--line); border-radius:4px;
  padding:6px 10px; font-family:var(--pixel); font-size:16px; color:var(--fg-mute);
}
.avatar-tag b{ color:var(--green); }

/* ---------- stats ---------- */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,3vw,28px);
  padding:clamp(28px,5vw,44px) 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.stat{ text-align:left; }
.stat .num{
  font-family:var(--mono); font-weight:500; font-size:clamp(30px,4.2vw,46px);
  display:block; line-height:1;
}
.stat:nth-child(1) .num{ color:var(--green); }
.stat:nth-child(2) .num{ color:var(--pink); }
.stat:nth-child(3) .num{ color:var(--blue); }
.stat:nth-child(4) .num{ color:var(--yellow); }
.stat .label{
  display:block; margin-top:8px; font-size:13px; color:var(--fg-dim); line-height:1.4;
}

/* ---------- section heading ---------- */
.section{ padding:clamp(64px,9vw,120px) 0; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px;
  margin-bottom:clamp(28px,4vw,48px); flex-wrap:wrap;
}
.section-head h2{
  font-family:var(--mono); font-weight:500; font-size:clamp(26px,3.4vw,34px); margin:0 0 8px;
}
.section-head p{ margin:0; color:var(--fg-dim); font-size:clamp(15px,1.6vw,20px); }

/* ---------- projects ---------- */
.project-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.card{
  position:relative; border:1px solid var(--line); border-radius:10px;
  overflow:hidden; background:var(--bg-soft);
  padding:16px 16px 20px;
  transform-style:preserve-3d;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .3s ease;
  opacity:0; transform:translateY(24px);
}
.card.in{ opacity:1; transform:translateY(0); }
.card:hover{ border-color:var(--accent,var(--fg)); }
.card .thumb{
  aspect-ratio:652/394; border-radius:6px; overflow:hidden; margin-bottom:16px;
  background:linear-gradient(135deg,var(--accent,#222),var(--bg));
  border:1px solid var(--line);
}
.card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; image-rendering:auto; }
.card:hover .thumb img{ transform:scale(1.06); }
.card .placeholder-thumb{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-family:var(--pixel); font-size:52px; color:rgba(0,0,0,.55);
}
.card .row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.card h3{ margin:0; font-size:16px; font-weight:500; color:var(--fg); }
.card p{ margin:6px 0 0; font-size:14px; color:var(--fg-dim); line-height:1.5; }
.card .arrow{
  flex:none; width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:14px;
  transition:transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
  color:var(--fg);
}
.card:hover .arrow{ transform:rotate(45deg); background:var(--accent,#fff); border-color:var(--accent,#fff); color:var(--select-fg); }

/* decks call-to-action, sharing the project grid's last slot */
.deck-cta{
  position:relative; border:1px solid transparent; border-radius:10px;
  overflow:hidden; background:var(--bg-soft);
  padding:16px 16px 20px;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; gap:26px;
}
/* a colour wheel spins behind the card; ::after covers all but a hairline
   of it, so what you see is a shimmer travelling around the edge */
.deck-cta::before{
  content:''; position:absolute; z-index:0;
  left:50%; top:50%; width:160%; aspect-ratio:1;
  background:conic-gradient(var(--green),var(--cyan),var(--blue),var(--pink),var(--orange),var(--yellow),var(--green));
  transform:translate(-50%,-50%) rotate(0deg);
  animation:deck-shimmer 7s linear infinite;
}
.deck-cta::after{
  content:''; position:absolute; z-index:0; inset:1.5px;
  border-radius:9px; background:var(--bg-soft);
}
.deck-cta > *{ position:relative; z-index:1; }
@keyframes deck-shimmer{
  from{ transform:translate(-50%,-50%) rotate(0deg); }
  to{ transform:translate(-50%,-50%) rotate(360deg); }
}
.deck-cta .deck-icon{
  display:block; color:var(--blue2); transform-origin:50% 50%;
  animation:deck-breathe 6s ease-in-out infinite;
}
/* the outline morphs play -> book -> play (the d values animate in the SVG);
   the spine and the turning page only exist while it is a book */
.deck-cta .deck-icon .morph{ animation:deck-fill 6s ease-in-out infinite; }
.deck-cta .deck-icon .spine{ opacity:0; animation:deck-spine 6s ease-in-out infinite; }
.deck-cta .deck-icon .leaf{
  opacity:0; fill:var(--bg-soft);
  transform-box:fill-box; transform-origin:0% 50%;
  animation:deck-leaf 6s ease-in-out infinite;
}
@keyframes deck-breathe{
  0%,20%,100%{ transform:scale(1); }
  10%{ transform:scale(1.08); }
  40%,70%{ transform:scale(1.03); }
  90%{ transform:scale(1.08); }
}
@keyframes deck-fill{
  0%,20%,27%,83%,100%{ fill:transparent; }
  8%,14%{ fill:currentColor; }
  90%,96%{ fill:currentColor; }
}
@keyframes deck-spine{
  0%,36%{ opacity:0; }
  43%,69%{ opacity:1; }
  76%,100%{ opacity:0; }
}
@keyframes deck-leaf{
  0%,37%{ opacity:0; transform:scaleX(1); }
  40%{ opacity:1; transform:scaleX(0.94); }
  53%{ opacity:1; transform:scaleX(0.02); }
  53.4%{ opacity:1; transform:scaleX(1); }
  67%{ opacity:1; transform:scaleX(0.02); }
  70%{ opacity:0; transform:scaleX(0.02); }
  100%{ opacity:0; transform:scaleX(1); }
}
.deck-cta .deck-icon.static,
.deck-cta .deck-icon.static .morph,
.deck-cta .deck-icon.static .leaf,
.deck-cta .deck-icon.static .spine{ animation:none; transform:none; }
.deck-cta .deck-icon.static .spine{ opacity:1; }
.deck-cta .deck-icon.static .leaf{ opacity:0; }
@media (prefers-reduced-motion: reduce){
  .deck-cta .deck-icon,
  .deck-cta .deck-icon .morph,
  .deck-cta .deck-icon .spine,
  .deck-cta .deck-icon .leaf,
  .deck-cta::before{ animation:none; }
  .deck-cta .deck-icon .spine{ opacity:1; }
}
.deck-cta p{
  margin:0; font-size:15px; line-height:1.6; color:var(--fg-dim); max-width:26ch;
}

.view-all{
  margin:clamp(32px,5vw,48px) auto 0; display:flex; justify-content:center;
}
.btn{
  font-family:var(--mono); font-size:15px; letter-spacing:1px;
  border:1px solid var(--fg); color:var(--fg); background:transparent;
  padding:14px 30px; border-radius:100px; cursor:pointer;
  display:inline-block; position:relative; overflow:hidden;
  transition:color .3s ease, border-color .3s ease;
}
.btn span{ position:relative; z-index:1; }
.btn::before{
  content:''; position:absolute; inset:0; background:var(--fg);
  transform:translateY(101%); transition:transform .3s cubic-bezier(.7,0,.3,1); z-index:0;
}
.btn:hover{ color:var(--bg); }
.btn:hover::before{ transform:translateY(0); }

/* ---------- about ---------- */
.about{ max-width:760px; }
.about h2{
  font-family:var(--pixel); font-size:clamp(36px,5vw,50px); color:var(--blue); margin:0 0 22px;
}
.about p{ font-size:clamp(15px,1.8vw,18px); line-height:1.7; color:var(--fg); margin:0 0 18px; }
.about .btn{ margin-top:12px; }

/* ---------- page header (secondary pages) ---------- */
.page-head{ padding:clamp(120px,16vw,160px) 0 20px; }
.page-head h1{
  font-family:var(--mono); font-weight:500; font-size:clamp(26px,3.4vw,34px); margin:0 0 8px;
}
.page-head p{ margin:0; color:var(--fg-dim); font-size:clamp(15px,1.6vw,20px); }

.case-hero{
  display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(24px,5vw,56px);
  align-items:center; padding-top:clamp(100px,15vw,140px); padding-bottom:32px;
}
.case-hero .hero-logo{ width:130px; height:auto; display:block; margin-bottom:28px; }
.case-hero h1{
  font-family:var(--mono); font-weight:500; font-size:clamp(26px,3.4vw,34px); margin:0 0 20px;
}
.case-hero .tagline{
  font-size:15.5px; line-height:1.6; color:var(--fg); margin:0 0 28px; max-width:48ch;
}
.case-hero .meta-lines{ font-size:15px; line-height:1.85; color:var(--fg); }
.case-hero .cover-img{
  border-radius:10px; overflow:hidden; border:1px solid var(--line);
}
.case-hero .cover-img img{ width:100%; display:block; }

@media (max-width:960px){
  .case-hero{ grid-template-columns:1fr; padding-top:clamp(90px,14vw,120px); }
  .case-hero .cover-img{ order:-1; }
}
.back-link{
  display:inline-flex; align-items:center; gap:8px; color:var(--fg-dim);
  font-size:14px; margin-bottom:24px; transition:color .2s ease;
}
.back-link:hover{ color:var(--fg); }

/* ---------- project detail page ---------- */
.project-nav{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:56px; padding-top:32px; border-top:1px solid var(--line); }
.project-nav .btn span{
  max-width:min(50vw,320px); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; display:inline-block; vertical-align:middle;
}

.case-study > p, .case-study > ul, .case-study > blockquote{ max-width:820px; }
.case-study h2{ font-family:var(--pixel); font-size:clamp(26px,3.6vw,36px); color:var(--blue); margin:100px 0 16px; }
.case-study h3{ font-family:var(--mono); font-weight:500; font-size:17px; color:var(--fg); margin:26px 0 8px; }
.case-study h2.neutral{ font-family:var(--mono); font-weight:500; font-size:clamp(22px,3vw,28px); color:var(--fg); }
.case-study h2.pink{ color:var(--pink); }
.case-study h2.plain{ color:var(--fg); }
.case-study h2.yellow{ color:var(--yellow); }
.case-study h2.green{ color:var(--green); }
.case-study h2.red{ color:var(--red); }
.case-study h3.cyan{ color:var(--cyan); margin:26px 0 8px; }
.case-study h3.yellow{ color:var(--yellow); margin:26px 0 8px; }
.case-study h3.green{ color:var(--green); margin:26px 0 8px; }
.case-study .term-y{ color:var(--yellow); font-weight:700; }
.case-study .term-c{ color:var(--cyan); font-weight:700; }
.case-study .voice-block{ border-left:3px solid var(--green); padding-left:36px; margin:100px 0 0; max-width:820px; }
.case-study .voice-block h2{ margin-top:0; }
.case-study p.voice{ color:var(--fg); margin:0 0 22px; }
.case-study .voice-block p.voice:last-child{ margin-bottom:0; }
@media (max-width:720px){ .case-study .voice-block{ padding-left:20px; } }

.case-study .two-col{ display:grid; grid-template-columns:1fr 1fr; gap:16px 40px; margin-bottom:20px; }
.case-study .two-col h3{ color:var(--blue); margin-top:0; }
.case-study .two-col h3.alt{ color:var(--pink); }
.case-study blockquote.quote{ color:var(--yellow); font-style:normal; border-left-color:var(--yellow); }
.case-study blockquote.accent{ color:var(--blue); font-style:normal; border-left-color:var(--blue); }
.case-study blockquote.cyan{ color:var(--cyan); font-style:normal; border-left-color:var(--cyan); }

.case-study .objectives-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 40px; align-items:start; margin-bottom:20px; }
.case-study .stat-block{ display:flex; flex-direction:column; gap:26px; }
.case-study .stat-block h3{ font-family:var(--mono); font-weight:700; font-size:16px; color:var(--fg); margin:0 0 8px; }
.case-study .stat-rule{ width:22px; height:3px; background:var(--green); border-radius:2px; margin-bottom:10px; }
.case-study .stat-value{ font-family:var(--pixel); font-size:clamp(26px,3vw,32px); color:var(--fg-mute); line-height:1.1; letter-spacing:.5px; }
@media (max-width:720px){ .case-study .objectives-grid{ grid-template-columns:1fr; gap:8px 0; } }
.case-study h3.label{ color:var(--blue); margin:26px 0 8px; }
.case-study h3.label:first-of-type{ margin-top:0; }
@media (max-width:720px){
  .case-study .two-col{ grid-template-columns:1fr; gap:0; }
}
.case-study p{ font-size:15.5px; line-height:1.75; color:var(--fg-dim); margin:0 0 16px; }
.case-study ul{ margin:0 0 20px; padding:0; }
.case-study li{ list-style:none; position:relative; padding-left:20px; font-size:15px; line-height:1.7; color:var(--fg-dim); margin-bottom:10px; }
.case-study li::before{ content:'—'; position:absolute; left:0; color:var(--green); }
.case-study blockquote{ margin:0 0 20px; padding-left:16px; border-left:2px solid var(--line); font-style:italic; color:var(--fg-dim); }
.case-study .accent-block{ border-left:3px solid; padding-left:18px; margin-bottom:22px; max-width:820px; }
.case-study .accent-block p{ margin:0; }
.case-study .term{ color:#c3ff84; font-weight:700; }
:root[data-theme="light"] .case-study .term{ color:#000000; font-weight:700; }
.case-study h3.cat{ color:#c3ff84; font-weight:700; margin:26px 0 8px; }
.case-study h3.cat:first-of-type{ margin-top:0; }
:root[data-theme="light"] .case-study h3.cat{ color:#000000; font-weight:700; }

.case-study p.subtitle{ color:var(--fg-dim); font-size:14px; margin:0 0 28px; }


.shot-grid{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:16px; margin:24px 0 36px; }
.shot-grid figure{ margin:0; flex:0 0 auto; width:min(190px,40vw); }
.shot-grid img{ width:100%; height:auto; border-radius:8px; border:1px solid var(--line); display:block; }
.shot-grid figcaption{ margin-top:8px; font-size:12px; color:var(--fg-mute); line-height:1.4; }

.shot-grid.wide figure{ width:min(320px,60vw); }

.shot-grid.cover{ display:block; margin-bottom:36px; }
.shot-grid.cover figure{ width:100%; max-width:420px; margin:0 auto; }
.shot-grid.cover img{ width:100%; border-radius:12px; }

.case-study .card-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:24px 0 20px; align-items:start; }
.case-study .card-row.two{ grid-template-columns:repeat(2,minmax(0,1fr)); }
/* content cards (not links) — no hover state */
.case-study .card-row.no-hover .card:hover{ border-color:var(--line); }
.case-study .card{ border:1px solid var(--line); border-radius:10px; padding:22px 20px; background:var(--bg-soft); }
.case-study .card h3{ margin:0 0 10px; font-family:var(--mono); font-weight:500; font-size:16px; color:var(--blue); }
.case-study .card p{ margin:0; font-size:14.5px; }
@media (max-width:860px){
  .case-study .card-row, .case-study .card-row.two{ grid-template-columns:1fr; }
}

.case-study .quad-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:24px 0 20px; align-items:start; }
.case-study .quad{ border:1px solid var(--line); border-radius:10px; padding:22px 20px; background:var(--bg-soft); }
.case-study .quad h3{ margin:0 0 12px; font-family:var(--pixel); font-size:24px; letter-spacing:.5px; color:var(--green); }
.case-study .quad ul{ margin:0; }
.case-study .quad li{ font-size:14.5px; }
@media (max-width:720px){ .case-study .quad-grid{ grid-template-columns:1fr; } }

.case-study .qa{ margin-top:20px; }
.case-study .qa-q{ font-family:var(--mono); font-weight:500; font-size:15px; color:var(--fg); margin:0 0 8px; }
.case-study .qa-a{ font-size:15px; margin:0 0 22px; padding-left:16px; border-left:2px solid var(--cyan); color:var(--cyan); }
.case-study .qa-a:last-child{ margin-bottom:0; }

.case-study .insight-row{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:48px; align-items:start; margin-top:100px; }
.case-study .insight-row.media-left{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:36px; margin-top:44px; }
.case-study .insight-row.brand{ grid-template-columns:minmax(0,1.28fr) minmax(0,1fr); gap:clamp(32px,8vw,116px); }
.case-study .insight-row.palette{ grid-template-columns:minmax(0,1.06fr) minmax(0,1fr); gap:clamp(24px,4vw,53px); }
.case-study .insight-row + .insight-row{ margin-top:44px; }
.case-study .insight-row.media-left .insight-body h3{ margin-top:0; }
.case-study .insight-row .insight-body h2{ margin-top:0; }
.case-study .insight-row .insight-body ul{ margin-bottom:0; }
.case-study .insight-media{ display:flex; flex-direction:column; gap:16px; }
.case-study .insight-media img{ width:100%; height:auto; border-radius:8px; border:1px solid var(--line); display:block; }
@media (max-width:860px){
  .case-study .insight-row,
  .case-study .insight-row.media-left,
  .case-study .insight-row.brand,
  .case-study .insight-row.palette{ grid-template-columns:1fr; gap:24px; }
  .case-study .insight-media{ max-width:420px; }
}

.case-study .persona-head{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:32px; align-items:start; margin:14px 0 26px; }
.case-study .persona-head img{ width:100%; height:auto; border-radius:10px; border:1px solid var(--line); display:block; }
.case-study .persona-specs{ font-family:var(--mono); font-size:14.5px; line-height:1.95; color:var(--fg-dim); }
.case-study .persona-traits{ margin-top:14px; font-family:var(--mono); font-size:15px; color:var(--yellow); letter-spacing:.3px; }
@media (max-width:720px){
  .case-study .persona-head{ grid-template-columns:1fr; gap:18px; }
  .case-study .persona-head img{ max-width:180px; }
}

.case-study .pair-shot{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start; margin:24px 0 0; }
.case-study .pair-shot img{ width:100%; height:auto; border-radius:10px; border:1px solid var(--line); display:block; }
.case-study .pair-shot figure{ margin:0; }
.case-study .pair-shot figcaption{ margin-top:10px; font-family:var(--mono); font-size:12.5px; line-height:1.5; color:var(--fg-mute); }
.case-study .pair-shot.screens img{ width:auto; max-width:100%; max-height:560px; margin:0 auto; }
.case-study .pair-shot.compare img{ width:auto; max-width:100%; max-height:460px; margin:0 auto; }
@media (max-width:720px){ .case-study .pair-shot{ grid-template-columns:1fr; } }

.case-study .trio-shot{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:start; margin:24px 0 0; }
.case-study .trio-shot img{ width:100%; height:auto; border-radius:10px; border:1px solid var(--line); display:block; }
@media (max-width:860px){ .case-study .trio-shot{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .case-study .trio-shot{ grid-template-columns:1fr; } }

.case-study .full-shot{ margin:24px 0 0; }
.case-study .full-shot img{ width:100%; height:auto; border-radius:10px; border:1px solid var(--line); display:block; }
.case-study .full-shot figure{ margin:0; }
.case-study .full-shot figcaption{ margin-top:10px; font-family:var(--mono); font-size:12.5px; line-height:1.5; color:var(--fg-mute); }

.case-study .figure{ display:flex; align-items:baseline; gap:14px; }
.case-study .figure b{ font-family:var(--pixel); font-weight:400; font-size:clamp(30px,4vw,42px); line-height:1; color:var(--green); }
.case-study .figure span{ font-size:15px; line-height:1.5; color:var(--fg-dim); }
.case-study .figure.lead b{ font-size:clamp(38px,5.5vw,56px); }
.case-study .figure.lead span{ font-size:17px; color:var(--fg); }
.case-study .figure-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 32px; margin:14px 0 0; align-items:start; }
.case-study .figure-row.two{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:820px; }
@media (max-width:720px){
  .case-study .figure-row,
  .case-study .figure-row.two{ grid-template-columns:1fr; gap:18px; }
}

.case-study .finding{ margin-top:56px; padding-top:34px; border-top:1px solid var(--line); }
.case-study .finding h3{ margin:0 0 16px; }
.case-study .finding-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; align-items:start; }
.case-study .finding-grid.two{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.case-study .finding-grid p{ margin:0; font-size:15px; max-width:none; }
.case-study .f-label{
  font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.8px;
  text-transform:uppercase; color:var(--blue); margin:0 0 8px;
}
.case-study .f-label.change{ color:var(--yellow); }
.case-study .f-label.rate{ color:var(--green); }
.case-study .f-rate{ font-family:var(--pixel); font-size:22px; line-height:1.25; color:var(--green); margin:0; }
@media (max-width:860px){
  .case-study .finding-grid,
  .case-study .finding-grid.two{ grid-template-columns:1fr; gap:22px; }
}

.case-study .use-case{ margin-top:56px; padding-top:34px; border-top:1px solid var(--line); }
.case-study .use-case-head{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:8px 32px; margin-bottom:12px;
}
.case-study .use-case-head h3{ margin:0; }
.case-study p.tags{ font-family:var(--mono); font-size:14px; color:var(--yellow); letter-spacing:.3px; margin:0; }
.case-study .use-case p{ max-width:820px; }

/* narrower variants — cap the container on desktop, full-bleed on small screens */
.case-study .pair-shot.narrow{ max-width:620px; }
.case-study .trio-shot.narrow{ max-width:720px; }
.case-study .full-shot.narrow{ max-width:520px; }
.case-study .full-shot.centered{ max-width:530px; margin-left:auto; margin-right:auto; }
@media (min-width:961px){ .case-study .full-shot.wide{ max-width:82%; } }

.case-study .use-case-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:24px 0 36px; align-items:start; }
.case-study .uc-item{ margin-bottom:24px; }
.case-study .uc-item:last-child{ margin-bottom:0; }
.case-study .uc-label{ display:block; font-family:var(--mono); font-size:13px; color:var(--fg-mute); margin-bottom:10px; }
.case-study .uc-item img{ width:100%; height:auto; border-radius:8px; border:1px solid var(--line); display:block; }
@media (max-width:720px){
  .case-study .use-case-grid{ grid-template-columns:1fr 1fr; }
  .case-study .use-case-grid .uc-col:first-child{ grid-column:1 / -1; max-width:220px; }
}

.shot-scroll{
  max-height:560px; overflow-y:auto; margin:0;
  border:1px solid var(--line); border-radius:8px;
}
.shot-scroll img{ width:100%; display:block; }

.screen-block{ display:flex; gap:20px; align-items:flex-start; margin:24px 0; flex-wrap:wrap; }
.screen-block .shot{ flex:0 0 auto; width:170px; }
.screen-block .shot img{ width:100%; border-radius:8px; border:1px solid var(--line); display:block; }
.screen-block .shot span{ display:block; margin-top:8px; font-family:var(--pixel); font-size:16px; color:var(--accent,var(--green)); letter-spacing:.5px; }
.screen-block .notes{ flex:1 1 220px; min-width:200px; }
.screen-block .notes ul{ margin:0; }
.screen-block .notes li{ font-size:14px; }

/* ---------- contact ---------- */
footer{
  border-top:1px solid var(--line); padding:clamp(56px,9vw,110px) 0 40px;
}
/* project pages already close with the prev/next CTAs — no divider under them */
body:has(.project-nav) footer{ border-top:none; }
footer h2{
  font-family:var(--mono); font-weight:500; font-size:clamp(28px,4.6vw,44px);
  line-height:1.3; margin:0 0 30px; max-width:29ch; text-wrap:balance;
}
.contact-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:20px 32px; margin-bottom:36px;
}
.email-copy{
  background:none; border:1px dashed var(--line); border-radius:8px;
  color:var(--fg-dim); font-family:var(--mono); font-size:clamp(15px,2vw,20px);
  padding:10px 16px; cursor:pointer; transition:border-color .2s ease, color .2s ease;
}
.email-copy:hover{ border-color:var(--fg); color:var(--fg); }
.footer-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px;
  padding-top:28px; border-top:1px solid var(--line);
  font-size:13px; color:var(--fg-mute);
}
.footer-name{
  font-family:var(--mono); font-size:13px; font-weight:500;
  color:var(--fg-dim); letter-spacing:.5px;
}

/* ---------- misc ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

.back-to-top{
  position:fixed; right:20px; bottom:20px; z-index:60;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  background:var(--fab-bg); backdrop-filter:blur(6px); color:var(--fg);
  display:flex; align-items:center; justify-content:center; font-size:18px;
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, border-color .25s ease;
}
.back-to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.back-to-top:hover{ border-color:var(--fg); }

.toast{
  position:fixed; left:50%; bottom:30px; transform:translate(-50%,20px);
  background:var(--fg); color:var(--bg); font-family:var(--mono); font-size:14px;
  padding:10px 18px; border-radius:100px; z-index:200;
  opacity:0; transition:opacity .25s ease, transform .25s ease; pointer-events:none;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .wrap{ padding-left:20px; padding-right:20px; }
  header{ padding-left:20px; padding-right:20px; }
  .hero{ grid-template-columns:1fr; text-align:left; }
  .avatar-wrap{ justify-self:start; width:min(260px,60vw); order:-1; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .project-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:720px){
  .nav-links{ display:none; }
  .burger{ display:flex; }
  .mobile-menu{ padding-left:20px; padding-right:20px; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .marquee{ margin-top:74px; }
  .project-grid{ grid-template-columns:1fr; }
}

@media (max-width:480px){
  .stats{ grid-template-columns:1fr 1fr; }
  footer h2{ max-width:none; }
}

@media (pointer:coarse){
  .cursor-dot, .cursor-ring{ display:none; }
}

/* ---------- illustrations gallery ---------- */
.illo-grid{ column-count:2; column-gap:10px; }
.illo-grid figure{
  margin:0 0 10px; break-inside:avoid; -webkit-column-break-inside:avoid;
  border:1px solid var(--line); border-radius:6px; overflow:hidden;
  background:var(--bg-soft); line-height:0;
}
.illo-grid img{ width:100%; height:auto; display:block; }
@media (max-width:900px){ .illo-grid{ column-count:1; } }