/* ─────────────── Portfolio · Shared Chrome ─────────────── */
:root{
  --lime:#c8ff00;
  --f-display:"Space Grotesk","Inter",system-ui,sans-serif;
  --f-body:"Inter",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
  --f-serif:"Instrument Serif",Georgia,serif;
  --pad: clamp(20px, 4vw, 56px);
  --maxw: 1360px;
}
html[data-theme="dark"]{
  --bg:#0c0c0c; --bg-2:#141414; --bg-3:#1c1c1c;
  --ink:#f1ede2; --ink-2:#bdb9ad; --mute:#8a877d;
  --rule:#262625; --card:#161614; --card-2:#1a1a18;
  --reverse:#f4f1ea; --reverse-ink:#0c0c0c;
}
html[data-theme="light"]{
  --bg:#f4f1ea; --bg-2:#ece8de; --bg-3:#e2ddd0;
  --ink:#0c0c0c; --ink-2:#2a2a26; --mute:#6a6a64;
  --rule:#dcd7cb; --card:#ffffff; --card-2:#faf8f2;
  --reverse:#0c0c0c; --reverse-ink:#f4f1ea;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html{scroll-behavior:smooth}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--lime);color:#0c0c0c}

.mono{font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.serif{font-family:var(--f-serif);font-style:italic;font-weight:400}
.lime-dot{display:inline-block;width:8px;height:8px;background:var(--lime);border-radius:50%;box-shadow:0 0 0 4px rgba(200,255,0,.18);vertical-align:middle;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(200,255,0,.18)}50%{box-shadow:0 0 0 8px rgba(200,255,0,.06)}}

/* ───────── NAV ───────── */
.nav{
  position:sticky;top:0;z-index:20;
  background:color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--rule);
  transition: background .3s, box-shadow .3s, border-color .3s;
}
.nav.is-scrolled{
  background:color-mix(in oklab, var(--bg) 96%, transparent);
  box-shadow: 0 10px 30px -20px rgba(0,0,0,.5);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:14px var(--pad);
}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{width:100px;height:100px;background:transparent;border:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.brand .logo img{width:100%;height:100%;object-fit:contain}

.menu{display:flex;gap:28px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.menu a{position:relative;padding:6px 0;transition:color .2s}
.menu a:hover{color:var(--ink)}
.menu a.active{color:var(--ink)}
.menu a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--lime)}
.menu a::before{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,0,1)}
.menu a:hover::before{transform:scaleX(1)}
.menu a.active::before{display:none}

.nav-right{display:flex;align-items:center;gap:14px}
.lang{display:flex;align-items:center;border:1px solid var(--rule);border-radius:999px;padding:3px;gap:2px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase}
.lang button{appearance:none;background:transparent;border:0;color:var(--mute);padding:5px 9px;border-radius:999px;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;transition:all .15s}
.lang button:hover{color:var(--ink)}
.lang button.active{background:var(--ink);color:var(--bg)}

.theme-toggle{appearance:none;background:transparent;border:1px solid var(--rule);color:var(--ink);width:38px;height:38px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:transform .25s, border-color .15s}
.theme-toggle:hover{border-color:var(--ink);transform:rotate(-12deg)}
.theme-toggle svg{width:16px;height:16px}
html[data-theme="dark"] .theme-toggle .sun{display:block}
html[data-theme="dark"] .theme-toggle .moon{display:none}
html[data-theme="light"] .theme-toggle .sun{display:none}
html[data-theme="light"] .theme-toggle .moon{display:block}

.cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--lime);color:#0c0c0c;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;padding:11px 16px;border-radius:999px;border:1px solid var(--lime);transition:transform .3s cubic-bezier(.2,.7,0,1), box-shadow .3s;position:relative;overflow:hidden}
.cta-btn::after{content:"↗"}
.cta-btn::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);transform:translateX(-120%);transition:transform .8s}
.cta-btn:hover{transform:translate(0,-2px);box-shadow:0 14px 30px -10px rgba(200,255,0,.45)}
.cta-btn:hover::before{transform:translateX(120%)}

/* ───────── Section base ───────── */
.section{max-width:var(--maxw);margin:0 auto;padding: clamp(56px, 9vw, 120px) var(--pad)}
.section + .section{padding-top:0}
.s-head{
  display:grid;grid-template-columns: 120px 1fr auto;gap:24px;align-items:baseline;
  padding-bottom:18px;border-bottom:1px solid var(--rule);margin-bottom:40px;
}
.s-head .num{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.s-head .title{font-family:var(--f-display);font-weight:600;font-size:clamp(22px,2.6vw,32px);letter-spacing:-.015em;line-height:1.1}
.s-head .title .serif{font-size:1.1em;letter-spacing:-.005em;color:var(--ink)}
.s-head .meta{font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}

/* ───────── Footer ───────── */
.foot{border-top:1px solid var(--rule);background:var(--bg-2)}
.foot-inner{max-width:var(--maxw);margin:0 auto;padding:22px var(--pad);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.foot-inner .lockup{display:flex;align-items:center;gap:10px;color:var(--ink)}
.foot-inner .lockup .l{width:24px;height:24px;background:transparent;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;border:0;flex-shrink:0}
.foot-inner .lockup .l img{width:24px;height:24px;object-fit:contain;display:block}
.foot-inner .lime{color:#0c0c0c;background:var(--lime);padding:3px 7px}

/* ───────── Case study chrome ───────── */
.case-hero{
  max-width:var(--maxw);margin:0 auto;padding: clamp(48px,7vw,96px) var(--pad) 40px;
}
.case-hero .crumbs{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:10px;margin-bottom:32px}
.case-hero .crumbs a{color:var(--ink)}
.case-hero .crumbs a:hover{color:var(--lime)}
.case-hero h1{
  font-family:var(--f-display);font-weight:600;
  font-size: clamp(56px, 10vw, 168px);
  line-height:.9;letter-spacing:-.04em;color:var(--ink);text-wrap:balance;
}
.case-hero h1 .serif{font-family:var(--f-serif);font-style:italic;font-weight:400}
.case-hero h1 .dot{color:var(--lime)}
.case-hero .sub{
  margin-top:24px;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 22px;
  font-family:var(--f-display);font-weight:500;font-size:clamp(16px,1.6vw,22px);color:var(--ink);
}
.case-hero .sub .sl{color:var(--mute)}
.case-hero .sub .tag{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--rule);padding:5px 10px;color:var(--ink-2);margin-left:6px}

/* Cover image */
.case-cover{
  max-width:var(--maxw);margin:0 auto;padding: 0 var(--pad);
}
.case-cover .img{
  position:relative;aspect-ratio:16/8;background:var(--bg-3);border:1px solid var(--rule);overflow:hidden;
}
.case-cover .img::before{ display:none; }
.case-cover .img::after{
  content:attr(data-slot);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);
  background:var(--card);padding:7px 12px;border:1px solid var(--rule);
}
.case-cover .img img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}

/* Brief grid: lead + meta sidebar */
.case-brief{
  max-width:var(--maxw);margin:0 auto;padding: clamp(56px,8vw,96px) var(--pad);
  display:grid;grid-template-columns: 1.4fr 1fr;gap:64px;align-items:start;
}
.case-brief .lede{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(22px,2.6vw,36px);line-height:1.2;letter-spacing:-.015em;
  text-wrap:balance;color:var(--ink);
}
.case-brief .lede mark{background:linear-gradient(transparent 60%, var(--lime) 60%);color:var(--ink);padding:0 .05em}
.case-brief .lede .em{font-family:var(--f-serif);font-style:italic;font-weight:400}
.case-brief .body{display:flex;flex-direction:column;gap:14px;font-size:14px;line-height:1.65;color:var(--ink-2);max-width:46ch;margin-top:20px}

.meta-card{
  background:var(--card);border:1px solid var(--rule);
  padding:24px;display:flex;flex-direction:column;gap:18px;
}
.meta-card .top{display:flex;justify-content:space-between;align-items:center;font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);padding-bottom:14px;border-bottom:1px solid var(--rule)}
.meta-card .top .pill{background:var(--lime);color:#0c0c0c;padding:3px 7px}
.meta-card .row{display:flex;flex-direction:column;gap:2px}
.meta-card .row .k{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.meta-card .row .v{font-family:var(--f-body);font-weight:500;font-size:14px;color:var(--ink);word-break:break-word}
.meta-card .row .v a{border-bottom:1px solid transparent;transition:border-color .15s}
.meta-card .row .v a:hover{border-color:var(--ink)}
.meta-card .links{display:flex;flex-direction:column;gap:8px;padding-top:6px;border-top:1px solid var(--rule);margin-top:4px}
.meta-card .links a{
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  padding:9px 12px;border:1px solid var(--rule);color:var(--ink);
  transition:border-color .2s,background .2s,color .2s;
}
.meta-card .links a:hover{border-color:var(--lime);background:var(--lime);color:#0c0c0c}
.meta-card .links a.primary{background:var(--lime);color:#0c0c0c;border-color:var(--lime)}
.meta-card .links a.primary:hover{background:transparent;color:var(--lime)}

/* Image grid */
.case-grid{
  max-width:var(--maxw);margin:0 auto;padding: 0 var(--pad) clamp(56px,8vw,96px);
  display:grid;grid-template-columns:repeat(12,1fr);gap:20px;
}
.case-grid .slot{
  position:relative;background:var(--bg-3);border:1px solid var(--rule);overflow:hidden;
}
.case-grid .slot::before{ display:none; }
.case-grid .slot::after{
  content:attr(data-slot);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);
  background:var(--card);padding:6px 10px;border:1px solid var(--rule);
}
.case-grid .slot img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
.case-grid .span12{grid-column:span 12;aspect-ratio:16/8}
.case-grid .span8{grid-column:span 8;aspect-ratio:16/10}
.case-grid .span6{grid-column:span 6;aspect-ratio:4/3}
.case-grid .span4{grid-column:span 4;aspect-ratio:4/5}
.case-grid .square{aspect-ratio:1/1}

/* Pull quote */
.case-quote{
  max-width:var(--maxw);margin:0 auto;padding: clamp(40px,6vw,80px) var(--pad);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:start;
}
.case-quote .l{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.case-quote blockquote{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(24px,3vw,42px);line-height:1.1;letter-spacing:-.02em;text-wrap:balance;color:var(--ink);
}
.case-quote blockquote .em{font-family:var(--f-serif);font-style:italic;font-weight:400}
.case-quote blockquote .lime{color:var(--lime)}

/* Process / Deliverables list */
.case-list{
  max-width:var(--maxw);margin:0 auto;padding: clamp(56px,8vw,96px) var(--pad);
}
.case-list .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.case-list .item{background:var(--bg);padding:24px;display:flex;flex-direction:column;gap:10px;min-height:180px;transition:background .3s}
.case-list .item:hover{background:var(--card-2)}
.case-list .item .n{font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.case-list .item h4{font-family:var(--f-display);font-weight:600;font-size:18px;letter-spacing:-.01em;color:var(--ink);line-height:1.2}
.case-list .item p{font-size:13px;line-height:1.6;color:var(--ink-2)}

/* Next project */
.case-next{
  border-top:1px solid var(--rule);background:var(--bg);
}
.case-next-inner{
  max-width:var(--maxw);margin:0 auto;padding: clamp(48px,7vw,80px) var(--pad);
  display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;
}
.case-next .l{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.case-next a.next{
  display:flex;justify-content:flex-end;align-items:baseline;gap:18px;
  font-family:var(--f-display);font-weight:600;font-size:clamp(32px,5vw,72px);
  letter-spacing:-.025em;line-height:1;color:var(--ink);
  transition: gap .35s cubic-bezier(.2,.7,0,1), color .25s;
}
.case-next a.next .arrow{color:var(--mute);transition:transform .35s, color .25s}
.case-next a.next:hover{gap:32px}
.case-next a.next:hover .arrow{transform:translate(8px,-6px);color:var(--lime)}
.case-next a.next .serif{font-family:var(--f-serif);font-style:italic;font-weight:400}

/* ── Más proyectos (shared across case studies) ── */
.mp-more{padding:80px 0 100px;border-top:1px solid var(--rule)}
.mp-more-inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.mp-more-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:40px}
.mp-more-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.mp-more-all{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);text-decoration:none;transition:color .2s}
.mp-more-all:hover{color:var(--lime)}
.mp-more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mp-more-card{display:block;text-decoration:none;color:inherit}
.mp-more-card .mc-thumb{aspect-ratio:16/10;background:rgba(255,255,255,.04);overflow:hidden;border-radius:4px;margin-bottom:14px}
.mp-more-card .mc-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,opacity .3s}
.mp-more-card:hover .mc-thumb img{transform:scale(1.04)}
.mp-more-card .mc-name{font-size:15px;font-weight:600;margin-bottom:6px}
.mp-more-card .mc-meta{font-family:var(--f-mono);font-size:11px;color:var(--mute);letter-spacing:.08em}
@media(max-width:768px){.mp-more-grid{grid-template-columns:1fr;gap:32px}}

/* Packaging 3D interactive viewer */
.case-3d{
  max-width:var(--maxw);margin:0 auto;padding: 0 var(--pad) clamp(56px,8vw,96px);
}
.case-3d-head{
  padding-bottom:16px;border-bottom:1px solid var(--rule);margin-bottom:28px;
}
.case-3d-label{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);
}
.case-3d-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.case-3d-item{
  position:relative;background:var(--bg-3);border:1px solid var(--rule);overflow:hidden;aspect-ratio:4/3;
}
.case-3d-item iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}
@media(max-width:768px){
  .case-3d-grid{grid-template-columns:1fr}
}

/* ───────── Animations: reveal ───────── */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translate3d(0,28px,0);transition:opacity .9s cubic-bezier(.2,.7,0,1), transform .9s cubic-bezier(.2,.7,0,1)}
  .reveal.is-visible{opacity:1;transform:none}
  .reveal[data-delay="1"]{transition-delay:.06s}
  .reveal[data-delay="2"]{transition-delay:.12s}
  .reveal[data-delay="3"]{transition-delay:.18s}
  .reveal[data-delay="4"]{transition-delay:.24s}
  .reveal[data-delay="5"]{transition-delay:.30s}
  .case-hero .crumbs{animation: rise .8s .05s both cubic-bezier(.2,.7,0,1)}
  .case-hero h1{animation: rise 1.05s .15s both cubic-bezier(.2,.7,0,1)}
  .case-hero .sub{animation: rise 1s .35s both cubic-bezier(.2,.7,0,1)}
  @keyframes rise{from{opacity:0;transform:translate3d(0,40px,0);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
}

/* ───────── Portfolio Index ───────── */
.idx-hero{
  max-width:var(--maxw);margin:0 auto;padding: clamp(48px,7vw,96px) var(--pad) 32px;
}
.idx-hero .crumbs{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin-bottom:28px;display:flex;gap:10px;align-items:center}
.idx-hero .crumbs a{color:var(--ink)}
.idx-hero h1{font-family:var(--f-display);font-weight:600;font-size:clamp(48px,8vw,128px);line-height:.95;letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.idx-hero h1 .serif{font-family:var(--f-serif);font-style:italic;font-weight:400}
.idx-hero .lede{margin-top:24px;font-family:var(--f-display);font-size:clamp(16px,1.6vw,20px);line-height:1.5;color:var(--ink-2);max-width:60ch}

.idx-filters{
  max-width:var(--maxw);margin:0 auto;padding: 0 var(--pad) 28px;
  display:flex;gap:10px;flex-wrap:wrap;
  border-bottom:1px solid var(--rule);
}
.idx-filters .pill{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);
  border:1px solid var(--rule);padding:8px 14px;border-radius:999px;background:transparent;cursor:pointer;transition:all .2s;
}
.idx-filters .pill:hover{color:var(--ink);border-color:var(--ink)}
.idx-filters .pill.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}

.idx-grid{
  max-width:var(--maxw);margin:0 auto;padding: 40px var(--pad) clamp(56px,8vw,96px);
  display:grid;grid-template-columns:repeat(12,1fr);gap:24px;
}
.idx-card{
  position:relative;background:var(--card);border:1px solid var(--rule);
  overflow:hidden;display:flex;flex-direction:column;
  transition: transform .5s cubic-bezier(.2,.7,0,1), border-color .3s, box-shadow .4s;
}
.idx-card:hover{transform:translate3d(0,-4px,0);border-color:var(--ink);box-shadow:0 24px 60px -30px rgba(0,0,0,.55)}
.idx-card .thumb{
  position:relative;aspect-ratio:4/3;background:var(--bg-3);overflow:hidden;
}
.idx-card .thumb::before{ display:none; }
.idx-card .thumb::after{
  content:attr(data-slot);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
  background:rgba(0,0,0,.72);padding:6px 12px;border:1px solid rgba(255,255,255,.18);
  opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap;
}
.idx-card:hover .thumb::after{opacity:1}
.idx-card .meta-row{display:flex;justify-content:space-between;align-items:center;padding:14px 18px 0;font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.idx-card .meta-row .pill{background:var(--lime);color:#0c0c0c;padding:3px 7px}
.idx-card .info{padding:10px 18px 18px;display:flex;flex-direction:column;gap:8px}
.idx-card h3{font-family:var(--f-display);font-weight:600;font-size:22px;letter-spacing:-.015em;line-height:1.1;color:var(--ink)}
.idx-card h3 .arrow{color:var(--mute);transition:transform .25s, color .25s;display:inline-block;margin-left:6px}
.idx-card:hover h3 .arrow{transform:translate(4px,-4px);color:var(--lime)}
.idx-card .desc{font-size:13px;line-height:1.55;color:var(--ink-2)}
.idx-card .tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.idx-card .tags span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);border:1px solid var(--rule);padding:3px 7px}
.idx-card.span6{grid-column:span 6}
.idx-card.span4{grid-column:span 4}
.idx-card.span12{grid-column:span 12}
.idx-card.span12 .thumb{aspect-ratio:16/7}
.idx-card.span12 h3{font-size:30px}

/* ───────── Responsive ───────── */
@media(max-width:1100px){
  .case-brief{grid-template-columns:1fr;gap:36px}
  .case-list .grid{grid-template-columns:repeat(2,1fr)}
  .idx-card.span4{grid-column:span 6}
}
@media(max-width:900px){
  .menu{display:none}
  .s-head{grid-template-columns:80px 1fr;row-gap:8px}
  .s-head .meta{grid-column:1 / -1;order:3}
  .case-grid{grid-template-columns:repeat(6,1fr)}
  .case-grid .span12{grid-column:span 6}
  .case-grid .span8{grid-column:span 6}
  .case-grid .span6{grid-column:span 6}
  .case-grid .span4{grid-column:span 6}
  .case-quote{grid-template-columns:1fr;gap:18px}
  .case-next-inner{grid-template-columns:1fr;gap:18px}
  .case-next a.next{justify-content:flex-start;font-size:clamp(28px,7vw,52px)}
}
@media(max-width:560px){
  .nav-inner{gap:10px}
  .cta-btn span{display:none}
  .cta-btn{padding:11px 14px}
  .case-list .grid{grid-template-columns:1fr}
  .idx-card.span6, .idx-card.span4{grid-column:span 12}
}

/* ───────── Hamburger / Mobile Nav ───────── */
.hamburger{
  display:none;
  appearance:none;background:transparent;border:1px solid var(--rule);color:var(--ink);
  width:38px;height:38px;border-radius:999px;cursor:pointer;
  align-items:center;justify-content:center;flex-shrink:0;
  transition:border-color .15s,background .15s;
}
.hamburger:hover{border-color:var(--ink)}
.hamburger svg{width:18px;height:18px;display:block}
.hamburger .h-close{display:none}
body.nav-open .hamburger .h-bars{display:none}
body.nav-open .hamburger .h-close{display:block}
@media(max-width:900px){.hamburger{display:inline-flex}}

.mobile-nav{
  display:none;position:fixed;inset:0;z-index:19;
  background:color-mix(in oklab, var(--bg) 97%, transparent);
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  flex-direction:column;padding:80px var(--pad) var(--pad);overflow-y:auto;
}
.mobile-nav.is-open{display:flex}
body.nav-open{overflow:hidden}
.mobile-nav .mn-link{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(28px,9vw,52px);letter-spacing:-.025em;
  color:var(--ink);padding:16px 0;
  border-bottom:1px solid var(--rule);
  display:flex;align-items:center;justify-content:space-between;
  transition:color .2s,padding-left .25s cubic-bezier(.2,.7,0,1);
}
.mobile-nav .mn-link::after{content:"↗";font-size:.55em;color:var(--mute);transition:color .2s}
.mobile-nav .mn-link:hover{color:var(--lime);padding-left:10px}
.mobile-nav .mn-link:hover::after{color:var(--lime)}
.mobile-nav .m-cta{
  margin-top:28px;display:inline-flex;align-items:center;gap:8px;
  background:var(--lime);color:#0c0c0c;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  padding:13px 20px;border-radius:999px;align-self:flex-start;
}
.mobile-nav .m-foot{
  margin-top:auto;padding-top:32px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);
}
@media(max-width:560px){.hamburger{width:34px;height:34px}}