:root{
  --cream: #F4ECDC;
  --cream-2: #EADFC8;
  --ink: #15110F;
  --ink-2: #3A322C;
  --ink-3: #7A7066;
  --magenta: #FF2E88;
  --electric: #2540FF;
  --lime: #D8FF3A;

  --display: "Bricolage Grotesque", "Helvetica Neue", sans-serif;
  --body: "Bricolage Grotesque", "Helvetica Neue", sans-serif;
  --mono: "Space Mono", "JetBrains Mono", monospace;

  --stroke: 2px;
  --radius: 18px;
  --radius-lg: 28px;
}

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

/* ============ NAVBAR ============ */
.nav{
  position: sticky; top: 16px; z-index: 50;
  margin: 16px auto 0;
  width: min(1320px, calc(100% - 32px));
  background: var(--ink); color: var(--cream);
  border: var(--stroke) solid var(--ink);
  border-radius: 999px;
  padding: 14px 18px 14px 26px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.18);
}
.nav .brand{ display:flex; align-items:center; gap:10px; }
.nav .brand .logo-anim{ width: 220px; height: 56px; display: block; overflow: hidden; }
.nav .brand .logo-anim svg{ width: 100% !important; height: 100% !important; display: block; }
.nav .brand .badge{
  padding: 3px 8px 4px; border-radius: 6px;
  background: var(--lime); color: var(--ink);
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.15em;
}
.nav .links{
  display:flex; gap: 28px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
}
.nav .links a{ position: relative; padding: 6px 2px; opacity: 0.85; transition: opacity 0.2s; }
.nav .links a:hover{ opacity: 1; color: var(--lime); }
.nav .links a[aria-current]{ opacity: 1; color: var(--lime); }
.nav .links a[aria-current]::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height: 2px; background: var(--lime); }
.nav .cta{
  background: var(--magenta); color: var(--cream);
  font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 12px 22px; border-radius: 999px; border: var(--stroke) solid var(--cream);
  display: inline-flex; align-items: center; gap: 6px;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s, color 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.nav .cta .arrow{ display: inline-block; font-size: 15px; line-height: 1; transition: transform 0.25s ease; }
.nav .cta:hover{
  background: var(--lime); color: var(--ink); border-color: var(--ink);
  transform: translate(-3px, -3px) rotate(-2deg); box-shadow: 6px 6px 0 var(--ink);
}
.nav .cta:hover .arrow{ transform: translateX(3px); }

/* ============ CASE HERO ============ */
.case-hero{
  width: min(1320px, calc(100% - 32px));
  margin: 32px auto 0;
  padding: 56px 56px 64px;
  background: var(--lime);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-lg);
  position: relative; overflow: hidden;
  box-shadow: 10px 10px 0 var(--ink);
}
.case-hero .deco-circle{
  position: absolute; right: -120px; bottom: -120px; width: 380px; height: 380px;
  background: var(--magenta); border-radius: 50%; opacity: 0.4;
}
.case-hero .deco-square{
  position: absolute; left: -36px; top: 32px; width: 100px; height: 100px;
  background: var(--electric); transform: rotate(15deg);
  border: var(--stroke) solid var(--ink);
}
.case-hero .case-tag{
  position: relative; z-index: 2;
  display:inline-flex; align-items:center; gap: 12px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream); font-weight: 700;
  background: var(--ink); padding: 8px 16px; border-radius: 999px;
}
.case-hero h1{
  position: relative; z-index: 2;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(48px, 6.5vw, 108px);
  line-height: 0.92; letter-spacing: -0.04em;
  margin: 24px 0 28px; max-width: 1100px;
  font-variation-settings: "opsz" 96;
  text-wrap: balance;
}
.case-hero h1 .em{
  font-style: italic; color: var(--ink); font-weight: 500;
  background: linear-gradient(transparent 0 58%, var(--cream) 58% 96%, transparent 96%);
  padding: 0 8px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.case-hero .lede{
  position: relative; z-index: 2;
  font-size: clamp(18px, 1.6vw, 24px); line-height: 1.4; color: var(--ink);
  max-width: 760px; margin: 0 0 40px; font-weight: 500;
}
.case-meta{
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  padding-top: 32px; border-top: var(--stroke) solid var(--ink);
}
.case-meta dt{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 700; margin-bottom: 8px;
}
.case-meta dd{
  font-family: var(--display); font-size: 20px; line-height: 1.2; margin: 0; font-weight: 600;
  color: var(--ink);
}

/* ---- Hero color themes ---- */
.case-hero.t-magenta{ background: var(--magenta); }
.case-hero.t-magenta .case-tag{ background: var(--cream); color: var(--ink); }
.case-hero.t-magenta h1{ color: var(--cream); }
.case-hero.t-magenta h1 .em{ background: linear-gradient(transparent 0 58%, var(--lime) 58% 96%, transparent 96%); color: var(--ink); }
.case-hero.t-magenta .lede{ color: var(--cream); }
.case-hero.t-magenta .case-meta{ border-color: var(--cream); }
.case-hero.t-magenta .case-meta dt{ color: rgba(244,236,220,0.75); }
.case-hero.t-magenta .case-meta dd{ color: var(--cream); }
.case-hero.t-magenta .deco-circle{ background: var(--electric); opacity: 0.55; }
.case-hero.t-magenta .deco-square{ background: var(--lime); }

.case-hero.t-cream{ background: var(--cream-2); }
.case-hero.t-cream .deco-circle{ background: var(--lime); opacity: 0.7; }
.case-hero.t-cream .deco-square{ background: var(--magenta); }

.case-hero.t-electric{ background: var(--electric); }
.case-hero.t-electric .case-tag{ background: var(--lime); color: var(--ink); }
.case-hero.t-electric h1{ color: var(--cream); }
.case-hero.t-electric h1 .em{ background: linear-gradient(transparent 0 58%, var(--lime) 58% 96%, transparent 96%); color: var(--ink); }
.case-hero.t-electric .lede{ color: var(--cream); }
.case-hero.t-electric .case-meta{ border-color: var(--cream); }
.case-hero.t-electric .case-meta dt{ color: rgba(244,236,220,0.75); }
.case-hero.t-electric .case-meta dd{ color: var(--cream); }
.case-hero.t-electric .deco-circle{ background: var(--magenta); opacity: 0.55; }
.case-hero.t-electric .deco-square{ background: var(--lime); }

.case-hero.t-ink{ background: var(--ink); }
.case-hero.t-ink .case-tag{ background: var(--lime); color: var(--ink); }
.case-hero.t-ink h1{ color: var(--cream); }
.case-hero.t-ink h1 .em{ background: linear-gradient(transparent 0 58%, var(--magenta) 58% 96%, transparent 96%); color: var(--cream); }
.case-hero.t-ink .lede{ color: var(--cream); }
.case-hero.t-ink .case-meta{ border-color: rgba(244,236,220,0.4); }
.case-hero.t-ink .case-meta dt{ color: rgba(244,236,220,0.75); }
.case-hero.t-ink .case-meta dd{ color: var(--cream); }
.case-hero.t-ink .deco-circle{ background: var(--magenta); opacity: 0.6; }
.case-hero.t-ink .deco-square{ background: var(--lime); }

/* ============ SUB-NAV ============ */
.subnav{
  position: sticky; top: 96px; z-index: 40;
  width: min(1320px, calc(100% - 32px));
  margin: 32px auto 0;
  background: var(--cream);
  border: var(--stroke) solid var(--ink);
  border-radius: 999px;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 6px;
  box-shadow: 4px 4px 0 var(--ink);
  overflow-x: auto;
}
.subnav .pill{
  flex-shrink: 0;
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 10px 18px; border-radius: 999px;
  color: var(--ink-2); transition: all 0.2s;
  border: 2px solid transparent;
}
.subnav .pill:hover{ background: var(--cream-2); color: var(--ink); }
.subnav .pill.active{ background: var(--ink); color: var(--lime); }
.subnav .pill .num{ display: inline-block; margin-right: 6px; opacity: 0.6; font-variant-numeric: tabular-nums; }
.subnav .pill.active .num{ opacity: 1; color: var(--magenta); }

/* ============ SECTIONS ============ */
.section{
  width: min(1320px, calc(100% - 32px));
  margin: 96px auto 0;
  scroll-margin-top: 180px;
}
.section .eyebrow{
  display:inline-flex; align-items:center; gap: 12px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); font-weight: 700; margin: 0 0 24px;
}
.section .eyebrow::before{ content:""; width: 28px; height: 8px; background: var(--magenta); display:inline-block; }
.section h2{
  font-family: var(--display); font-weight: 700;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.96; letter-spacing: -0.03em; margin: 0 0 32px;
  max-width: 900px;
  font-variation-settings: "opsz" 80;
  text-wrap: balance;
}
.section h2 .em{ font-style: italic; color: var(--magenta); font-weight: 500; }
.section h2 .mark{
  font-style: normal; font-weight: 700; color: var(--ink);
  background: linear-gradient(transparent 0 58%, var(--lime) 58% 96%, transparent 96%);
  padding: 0 8px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.section .prose{
  font-size: clamp(18px, 1.4vw, 22px); line-height: 1.55; color: var(--ink-2);
  max-width: 760px;
}
.section .prose p{ margin: 0 0 20px; }
.section .prose .mark{
  color: var(--ink); font-weight: 700;
  background: linear-gradient(transparent 0 58%, var(--lime) 58% 96%, transparent 96%);
  padding: 0 6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.section .prose em{ color: var(--magenta); font-style: italic; font-weight: 600; }

/* hero image */
.hero-img-wrap{
  width: 100%; aspect-ratio: 16/9;
  border: var(--stroke) solid var(--ink); border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 10px 10px 0 var(--ink);
  background-color: var(--cream-2);
  background-size: cover;
  background-position: center;
  margin-top: 40px;
}
.hero-img-wrap.pattern{
  background-image:
    radial-gradient(circle at 70% 30%, var(--lime) 0 90px, transparent 90px),
    radial-gradient(circle at 28% 68%, var(--magenta) 0 70px, transparent 70px),
    radial-gradient(circle at 50% 50%, var(--electric) 0 40px, transparent 40px),
    repeating-linear-gradient(45deg, rgba(0,0,0,0.05) 0 16px, transparent 16px 32px);
}

/* two-col + quote */
.two-col{ display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 40px; }
.two-col .col-prose{ max-width: 560px; }
.quote-callout{
  background: var(--ink); color: var(--cream);
  border: var(--stroke) solid var(--ink); border-radius: var(--radius-lg);
  padding: 40px 36px;
  position: relative; overflow: hidden;
  transform: rotate(-1deg);
  box-shadow: 8px 8px 0 var(--magenta);
}
.quote-callout::before{
  content: "\201C"; position: absolute; top: -10px; left: 24px;
  font-family: var(--display); font-style: italic; font-weight: 800;
  color: var(--magenta); font-size: 140px; line-height: 1;
}
.quote-callout p{
  margin: 20px 0 16px;
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: 24px; line-height: 1.35; color: var(--cream);
}
.quote-callout .who{
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--lime); font-weight: 700;
}

/* steps */
.steps{ margin: 40px 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li{
  counter-increment: step;
  display: grid; grid-template-columns: 96px 1fr;
  gap: 24px; padding: 28px 0; border-top: var(--stroke) solid var(--ink);
}
.steps li:last-child{ border-bottom: var(--stroke) solid var(--ink); }
.steps li::before{
  content: "0" counter(step);
  font-family: var(--display); font-weight: 800; font-style: italic;
  font-size: 56px; line-height: 1; color: var(--magenta);
  font-variation-settings: "opsz" 60;
}
.steps h4{
  font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 1.1;
  margin: 0 0 10px; letter-spacing: -0.02em;
}
.steps p{ font-size: 18px; line-height: 1.5; color: var(--ink-2); margin: 0; max-width: 720px; }

/* gallery */
.gallery{ margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.screen{
  aspect-ratio: 9/16;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  position: relative; overflow: hidden;
  box-shadow: 6px 6px 0 var(--ink);
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,0.06) 0 8px, transparent 8px 16px),
    var(--cream-2);
}
.screen .screen-label{
  position: absolute; bottom: 14px; left: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 700; background: var(--ink); color: var(--cream);
  padding: 6px 10px; border-radius: 6px;
}
.screen.fill-mag{ background: var(--magenta); border-color: var(--ink); }
.screen.fill-electric{ background: var(--electric); border-color: var(--ink); }
.screen.fill-lime{ background: var(--lime); border-color: var(--ink); }
.screen.fill-ink{ background: var(--ink); border-color: var(--ink); }
.screen.fill-mag .screen-label, .screen.fill-electric .screen-label,
.screen.fill-lime .screen-label, .screen.fill-ink .screen-label{ background: var(--cream); color: var(--ink); }
/* wide gallery (for web/landing cases) */
.gallery.wide{ grid-template-columns: 1fr 1fr; }
.gallery.wide .screen{ aspect-ratio: 16/10; }
.gallery.single .screen{ aspect-ratio: 16/9; }
.gallery.single{ grid-template-columns: 1fr; }

/* decisions */
.decisions{ margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.decision{
  background: var(--cream);
  border: var(--stroke) solid var(--ink); border-radius: var(--radius);
  padding: 28px 24px;
  transition: transform 0.18s;
}
.decision:nth-child(1){ background: var(--lime); }
.decision:nth-child(3){ background: var(--magenta); color: var(--cream); }
.decision:hover{ transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.decision .num{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 700; opacity: 0.85;
}
.decision h4{
  font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.1;
  margin: 12px 0 10px; letter-spacing: -0.02em;
}
.decision p{ font-size: 16px; line-height: 1.5; margin: 0; opacity: 0.95; }

/* metrics */
.metrics{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.metric{
  background: var(--cream);
  border: var(--stroke) solid var(--ink); border-radius: var(--radius-lg);
  padding: 36px 32px 40px;
  position: relative; overflow: hidden;
}
.metric:nth-child(1){ background: var(--lime); }
.metric:nth-child(2){ background: var(--electric); color: var(--cream); }
.metric:nth-child(3){ background: var(--ink); color: var(--cream); }
.metric .num{
  font-family: var(--display); font-weight: 800; font-style: italic;
  font-size: clamp(56px, 7vw, 110px); line-height: 0.9; letter-spacing: -0.04em;
  margin: 0;
  font-variation-settings: "opsz" 96;
}
.metric:nth-child(3) .num{ color: var(--lime); }
.metric .num .suffix{ font-size: 0.5em; font-style: normal; font-weight: 500; }
.metric .label{
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; margin-top: 14px;
}
.metric .desc{ font-size: 16px; line-height: 1.4; margin-top: 14px; opacity: 0.92; }

/* learnings */
.learnings{
  margin-top: 64px;
  background: var(--cream-2);
  border: var(--stroke) solid var(--ink); border-radius: var(--radius-lg);
  padding: 48px;
}
.learnings h3{
  font-family: var(--display); font-weight: 700; font-size: clamp(28px, 3vw, 40px);
  line-height: 1; letter-spacing: -0.02em; margin: 0 0 24px;
}
.learnings ul{ margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.learnings li{
  display: grid; grid-template-columns: 32px 1fr; gap: 16px; align-items: start;
  font-size: 18px; line-height: 1.5; color: var(--ink-2);
}
.learnings li::before{
  content: "\2715"; color: var(--magenta); font-family: var(--display); font-weight: 800; font-size: 22px;
  line-height: 1.3;
}

/* prev/next */
.case-nav{
  width: min(1320px, calc(100% - 32px));
  margin: 120px auto 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.case-nav a{
  display: flex; flex-direction: column; gap: 8px;
  padding: 32px;
  background: var(--cream);
  border: var(--stroke) solid var(--ink); border-radius: var(--radius-lg);
  transition: transform 0.2s, background 0.2s;
}
.case-nav a.disabled{ opacity: 0.45; cursor: not-allowed; }
.case-nav a:not(.disabled):hover{ background: var(--lime); transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.case-nav .label{
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 700;
}
.case-nav h4{
  font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.5vw, 36px);
  line-height: 1.05; letter-spacing: -0.02em; margin: 0;
}
.case-nav .next{ text-align: right; }

/* contact cta */
.contact-cta{
  width: min(1320px, calc(100% - 32px));
  margin: 96px auto 96px;
  background: var(--magenta); color: var(--cream);
  border: var(--stroke) solid var(--ink); border-radius: var(--radius-lg);
  padding: 56px;
  display: grid; grid-template-columns: 1.4fr auto; gap: 56px; align-items: center;
  position: relative; overflow: hidden;
  box-shadow: 10px 10px 0 var(--ink);
}
.contact-cta .deco{
  position: absolute; right: 320px; top: -60px; width: 200px; height: 200px;
  background: var(--lime); border-radius: 50%; border: var(--stroke) solid var(--ink);
}
.contact-cta h2{
  font-family: var(--display); font-weight: 800;
  font-size: clamp(36px, 4vw, 64px); line-height: 0.92; letter-spacing: -0.035em;
  margin: 0 0 12px; font-variation-settings: "opsz" 80;
}
.contact-cta h2 em{ font-style: italic; color: var(--lime); font-weight: 500; }
.contact-cta p{ font-size: clamp(16px, 1.4vw, 20px); line-height: 1.4; max-width: 540px; margin: 0; opacity: 0.95; }
.contact-cta .big-btn{
  position: relative; z-index: 1;
  background: var(--ink); color: var(--cream);
  font-family: var(--display); font-weight: 700; font-size: 24px;
  padding: 24px 36px; border-radius: 999px; border: var(--stroke) solid var(--ink);
  display: inline-flex; align-items: center; gap: 14px;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-cta .big-btn:hover{
  background: var(--lime); color: var(--ink); border-color: var(--ink);
  transform: translate(-3px, -3px) rotate(-2deg);
  box-shadow: 8px 8px 0 var(--ink);
}
.contact-cta .big-btn:active{ transform: translate(0, 0) rotate(-2deg); box-shadow: 2px 2px 0 var(--ink); }

/* footer */
footer{ background: var(--ink); color: var(--cream); padding: 56px 32px 32px; }
.footer-inner{
  width: min(1320px, 100%); margin: 0 auto;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px;
}
.footer-brand{
  font-family: var(--display); font-weight: 800; font-size: 36px; line-height: 1;
  letter-spacing: -0.03em; margin: 0 0 12px;
}
.footer-brand em{ font-style: italic; color: var(--magenta); font-weight: 500; }
.footer-inner p{ font-family: var(--mono); font-size: 13px; opacity: 0.7; line-height: 1.5; margin: 0; }
.footer-col h4{
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--lime); margin: 0 0 16px; font-weight: 700;
}
.footer-col ul{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col li a{ font-size: 16px; opacity: 0.85; transition: opacity 0.15s, color 0.15s; }
.footer-col li a:hover{ opacity: 1; color: var(--magenta); }
.footer-bottom{
  width: min(1320px, 100%); margin: 48px auto 0; padding-top: 24px;
  border-top: 1px solid rgba(244,236,220,0.18);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 12px; opacity: 0.6; letter-spacing: 0.04em; text-transform: uppercase;
}

@media (max-width: 980px){
  .nav .links{ display: none; }
  .case-hero{ padding: 36px 28px 44px; }
  .case-meta{ grid-template-columns: 1fr 1fr; gap: 20px; }
  .two-col, .gallery, .gallery.wide, .decisions, .metrics{ grid-template-columns: 1fr; }
  .case-nav{ grid-template-columns: 1fr; }
  .contact-cta{ grid-template-columns: 1fr; gap: 24px; }
  .footer-inner{ grid-template-columns: 1fr 1fr; }
  .subnav{ top: 88px; }
}


  /* ===== MOBILE NAV (hamburger) ===== */
  .nav-toggle{ display:none; flex-shrink:0; width:48px; height:48px; padding:0; cursor:pointer;
    background:var(--lime); color:var(--ink); border:var(--stroke) solid var(--cream);
    border-radius:14px; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
  .nav-toggle span{ display:block; width:22px; height:2.5px; background:var(--ink); border-radius:2px;
    transition:transform .25s ease, opacity .2s ease; }
  .nav.open .nav-toggle span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  .nav.open .nav-toggle span:nth-child(2){ opacity:0; }
  .nav.open .nav-toggle span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
  .nav-toggle .ico-close{ display:none; }
  .nav.open .nav-toggle .ico-menu{ display:none; }
  .nav.open .nav-toggle .ico-close{ display:block; }
  @media (max-width:980px){
    .nav{ width:calc(100% - 32px) !important; max-width:none !important;
          margin:12px auto 0 !important; height:auto !important;
          padding:10px 12px 10px 18px !important; border-radius:18px !important; gap:12px !important; }
    .nav .brand .logo-anim{ width:150px; height:40px; }
    .nav-toggle{ display:flex; }
    .nav > .cta{ display:none; }
    .nav .links{ display:none; position:absolute; top:calc(100% + 8px); left:0; right:0;
      flex-direction:column; gap:4px; background:var(--ink);
      border:var(--stroke) solid var(--ink); border-radius:18px; padding:12px;
      box-shadow:5px 5px 0 rgba(0,0,0,.25); z-index:60; }
    .nav.open .links{ display:flex; }
    .nav .links a{ padding:14px 16px; font-size:15px; opacity:1; border-radius:10px; }
    .nav .links a:hover{ background:rgba(255,255,255,.08); }
    .nav .links a[aria-current]::after{ display:none; }
    header.hero, .hero{ margin-left:auto !important; margin-right:auto !important; }
  }
  @media (max-width:600px){
    .nav .brand .logo-anim{ width:128px; height:36px; }
    .case-meta{ grid-template-columns:1fr 1fr !important; }
    .metrics, .decisions, .gallery, .gallery.wide{ grid-template-columns:1fr !important; }
    .contact-cta{ padding-left:16px !important; padding-right:16px !important; }
    .contact-cta .big-btn{ width:100% !important; justify-content:center !important; min-height:56px !important; font-size:20px !important; box-sizing:border-box; }
    .case-nav{ grid-template-columns:1fr !important; }
    .case-nav a{ width:100% !important; box-sizing:border-box; }
    .case-nav .next{ text-align:left !important; }
  }