/* absinthewu.com — tokens from getdesign.md "LottieFiles Analysis" (DESIGN.md / DESIGNDARK.md) */
:root{
  --primary:#019d91; --on-primary:#fafafa; --brand-green:#00ddb3;
  --accent-yellow:#f0b100; --accent-mint:#94d19f; --accent-blue:#0092e4; --error:#e7000b;
  --canvas:#ffffff; --canvas-soft:#f4f4f5; --elevated:#fafafa;
  --ink-canvas:#09090b; --ink-elevated:#18181b;
  --hairline:#e4e4e7; --ink:#09090b; --muted:#71717b; --faint:#9f9fa9;
  --teal-soft:#e0f4f1; --yellow-soft:#fdf3d6; --mint-soft:#e6f4e8;
  --frame:#f4f4f5;
  --display:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-xxl:24px;
  --shadow-micro:0 1px 2px rgba(0,0,0,.05); --shadow-soft:0 5px 20px rgba(0,0,0,.05);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --brand-green:#00856b;
    --canvas:#09090b; --canvas-soft:#18181b; --elevated:#27272a;
    --ink-canvas:#050507; --ink-elevated:#0e0e10;
    --hairline:#3f3f46; --ink:#ffffff; --muted:#909091; --faint:#5d5d68;
    --teal-soft:#0e2926; --yellow-soft:#2a2410; --mint-soft:#0f2a17; --frame:#18181b;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --brand-green:#00856b;
  --canvas:#09090b; --canvas-soft:#18181b; --elevated:#27272a;
  --ink-canvas:#050507; --ink-elevated:#0e0e10;
  --hairline:#3f3f46; --ink:#ffffff; --muted:#909091; --faint:#5d5d68;
  --teal-soft:#0e2926; --yellow-soft:#2a2410; --mint-soft:#0f2a17; --frame:#18181b;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:var(--r-xs)}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;margin:0;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(36px,4.8vw,58px);line-height:1.04;letter-spacing:-0.04em;font-weight:500}
h2{font-size:clamp(32px,4.4vw,64px);line-height:1.12;letter-spacing:-0.04em;font-weight:500}
h3{font-size:clamp(22px,2.2vw,28px);line-height:1.2;letter-spacing:-0.02em;font-weight:500}
h4{font-size:19px;line-height:1.3}
p{margin:0}
.eyebrow{font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--muted)}
.eyebrow .dot{margin:0 8px;color:var(--faint)}
.lede{font-family:var(--display);font-size:clamp(18px,1.6vw,24px);line-height:1.4;letter-spacing:-0.01em;color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:14px;line-height:1.5}
.mono{font-family:var(--mono);font-size:.86em}
.tnum{font-variant-numeric:tabular-nums}
.container{max-width:1376px;margin:0 auto;padding:0 clamp(20px,3vw,32px)}
.container--narrow{max-width:760px}

/* ─ nav ─ */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--canvas) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--hairline)}
.nav__in{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav__brand{font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink);display:flex;align-items:center;gap:10px;letter-spacing:-0.01em}
.nav__brand:hover{text-decoration:none}
.nav__brand .mark{width:10px;height:10px;border-radius:9999px;background:var(--primary);display:inline-block}
.nav__center{display:none;gap:4px}
@media (min-width:860px){.nav__center{display:flex}}
.nav__center a{color:var(--ink);font-size:14px;font-weight:500;padding:8px 12px;border-radius:var(--r-sm)}
.nav__center a:hover{background:var(--canvas-soft);text-decoration:none}
.nav__links{display:flex;align-items:center;gap:8px}
.nav__links .btn{padding:8px 14px}
.nav__links a.btn--primary{color:var(--on-primary)}
.nav__links a.btn--primary:hover{background:color-mix(in srgb,var(--primary) 88%,#000)}
.nav__links a.btn--secondary{color:var(--ink)}
.nav__links a{color:var(--muted);font-size:14px;font-weight:500;padding:8px 12px;border-radius:var(--r-sm)}
.nav__links a:hover{color:var(--ink);background:var(--canvas-soft);text-decoration:none}
.nav__links a[aria-current="page"]{color:var(--ink)}
@media (max-width:560px){.nav__links .hide-m{display:none}}
.theme-btn{appearance:none;border:1px solid var(--hairline);background:var(--canvas);color:var(--ink);width:36px;height:36px;border-radius:var(--r-sm);display:inline-grid;place-items:center;cursor:pointer;margin-left:6px}
.theme-btn:hover{background:var(--canvas-soft)}
.theme-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:block}
:root[data-theme="dark"] .theme-btn .moon{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-btn .sun{display:block}
  :root:not([data-theme="light"]) .theme-btn .moon{display:none}
}

/* ─ buttons & chips ─ */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-size:14px;font-weight:500;line-height:1.2;padding:12px 18px;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--primary);color:var(--on-primary)}
.btn--primary:hover{background:color-mix(in srgb,var(--primary) 88%,#000)}
.btn--secondary{background:var(--canvas);color:var(--ink);border-color:var(--hairline)}
.btn--secondary:hover{background:var(--canvas-soft)}
.btn--dark{background:var(--ink-canvas);color:#fafafa}
.btn--lg{padding:0 22px;height:48px;border-radius:var(--r-md);font-size:15px}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;line-height:1.35;padding:3px 10px;border-radius:9999px;background:var(--canvas-soft);color:var(--muted);white-space:nowrap}
.chip--teal{background:var(--teal-soft);color:var(--primary)}
.chip--soon{background:var(--yellow-soft);color:#8a6100}
:root[data-theme="dark"] .chip--soon{color:var(--accent-yellow)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .chip--soon{color:var(--accent-yellow)}}
.chip--outline{background:transparent;border:1px solid var(--hairline)}
.needs{display:inline-flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.45;padding:8px 12px;border-radius:var(--r-md);background:var(--yellow-soft);color:var(--ink);border:1px dashed color-mix(in srgb,var(--accent-yellow) 60%,transparent);margin:4px 0}
.needs::before{content:"Needs your input";font-size:10.5px;font-weight:700;letter-spacing:.06em;color:#8a6100;white-space:nowrap;margin-top:2px}
:root[data-theme="dark"] .needs::before{color:var(--accent-yellow)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .needs::before{color:var(--accent-yellow)}}

/* ─ sections ─ */
.section{padding:80px 0}
.section--tight{padding:56px 0}
.section + .section{padding-top:0}
.section__head{margin-bottom:32px}
.section__head h2{margin-top:8px}
.section__head .lede{margin-top:12px;max-width:640px}
.rule{height:1px;background:var(--hairline);border:0;margin:0}

/* ─ cards ─ */
.card{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-xl);padding:24px}
.card--soft{background:var(--canvas-soft);border-color:transparent}
.grid{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:720px){.grid--2{grid-template-columns:repeat(2,1fr)}.grid--3{grid-template-columns:repeat(3,1fr)}}

/* ─ motion vocabulary (LottieFiles: animate-float-bob, animate-carousel; 150ms transitions) ─ */
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes bob-sm{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-7px) rotate(var(--rot,0deg))}}
@keyframes blob{0%,100%{border-radius:38% 62% 55% 45%/45% 40% 60% 55%}50%{border-radius:55% 45% 40% 60%/50% 60% 40% 50%}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marquee-rev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.reveal{opacity:1;transform:none}
.js .reveal.pre{transform:translateY(22px);opacity:.6}
.js .reveal.in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
@media (prefers-reduced-motion: reduce){.js .reveal.pre{opacity:1;transform:none}.js .reveal.in{transition:none}}
/* theme switch: cross-fade colours for a moment instead of snapping */
.theme-anim,.theme-anim *,.theme-anim *::before,.theme-anim *::after{transition:background-color .35s ease,color .35s ease,border-color .35s ease,fill .35s ease,stroke .35s ease!important}
/* nav lifts off the page once you scroll */
.nav{transition:box-shadow .25s ease,background-color .25s ease}
.nav.is-scrolled{box-shadow:0 8px 28px rgba(0,0,0,.06)}
:root[data-theme="dark"] .nav.is-scrolled{box-shadow:0 8px 28px rgba(0,0,0,.4)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .nav.is-scrolled{box-shadow:0 8px 28px rgba(0,0,0,.4)}}
/* figures & shipped screens: a quiet lift on hover */
figure .fr,.ship__media,.ba > div{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
@media (hover:hover){figure .fr:hover,.ship__media:hover,.ba > div:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(0,0,0,.08)}}

/* ─ home: hero ─ */
.hero{padding:clamp(56px,8vw,104px) 0 clamp(40px,5vw,64px)}
.hero__grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
@media (min-width:900px){.hero__grid{grid-template-columns:1.1fr .9fr;gap:48px}}
.hero .hello{font-family:var(--display);font-size:clamp(20px,1.8vw,26px);font-weight:500;color:var(--muted);letter-spacing:-0.02em}
.hero h1{font-size:clamp(48px,6.7vw,90px);line-height:.96;letter-spacing:-0.05em;margin-top:4px}
.hero .role{font-family:var(--display);font-size:clamp(22px,2.4vw,32px);font-weight:500;letter-spacing:-0.025em;color:var(--primary);margin-top:16px;line-height:1.15}
.hero .lede{margin-top:22px;max-width:560px}
.hero .cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.hero__art{position:relative;justify-self:center;width:min(100%,460px);aspect-ratio:1/1}
.hero__blob{position:absolute;inset:8% 6% 6% 8%;background:linear-gradient(135deg,var(--accent-mint),var(--primary) 70%);border-radius:38% 62% 55% 45%/45% 40% 60% 55%}
.hero__photo{position:absolute;inset:16% 14% 14% 16%;border-radius:36% 64% 52% 48%/48% 42% 58% 52%;overflow:hidden;border:5px solid var(--canvas);box-shadow:0 20px 50px rgba(0,0,0,.12)}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.sticker{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:9999px;background:var(--canvas);border:1px solid var(--hairline);box-shadow:0 8px 24px rgba(0,0,0,.08);font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;transform:rotate(var(--rot,0deg))}
.sticker .e{font-size:17px}
.sticker--1{top:4%;left:-2%;--rot:-6deg}
.sticker--2{top:20%;right:-6%;--rot:5deg}
.sticker--3{bottom:14%;left:-4%;--rot:4deg}
.sticker--4{bottom:0;right:2%;--rot:-4deg}
@media (max-width:899px){.hero__art{width:min(100%,340px)}.sticker{font-size:12px;padding:6px 10px}.sticker--1{left:0}.sticker--2{right:0}.sticker--3{left:0}}
@media (prefers-reduced-motion: no-preference){
  .hero__blob{animation:blob 14s ease-in-out infinite}
  .hero__photo{animation:bob 7s ease-in-out infinite}
  .sticker{animation:bob-sm 6s ease-in-out infinite}
  .sticker--2{animation-delay:-2s}.sticker--3{animation-delay:-4s}.sticker--4{animation-delay:-1s}
}

/* ─ feature chips (rounded-2xl · p-4 · bg zinc-50 · icon square + label) ─ */
.chips{display:grid;gap:clamp(12px,1.6vw,24px);grid-template-columns:repeat(2,1fr);margin-top:clamp(28px,4vw,56px)}
@media (min-width:1024px){.chips{grid-template-columns:repeat(4,1fr)}}
.fchip{display:flex;gap:16px;align-items:center;padding:16px;border-radius:var(--r-xl);background:var(--elevated);border:1px solid transparent;transition:background-color .15s,box-shadow .15s}
.fchip:hover{background:var(--canvas);box-shadow:0 8px 24px rgba(0,0,0,.06)}
.fchip .ico{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:22px;flex:none}
.ico--yellow{background:#ffe58a}.ico--violet{background:#d9ccff}.ico--mint{background:#bfe8c7}.ico--blue{background:#bfe3ff}
.fchip .t{font-family:var(--display);font-weight:500;font-size:17px;letter-spacing:-0.01em;line-height:1.2}
.fchip .d{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.4}

/* ─ marquee rows ─ */
.marquee{overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;gap:56px;width:max-content;padding:8px 0}
.marquee--logos .marquee__track{animation:marquee 40s linear infinite}
.marquee--rev .marquee__track{animation:marquee-rev 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){.marquee__track{animation:none!important;flex-wrap:wrap;width:auto;justify-content:center}}
.wordmark{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-0.02em;color:var(--faint);white-space:nowrap}
.worked{padding:8px 0 0}
.worked .eyebrow{text-align:center;margin-bottom:14px;font-weight:500}

/* ─ sections ─ */
.section--home{padding:clamp(72px,9vw,128px) 0 0}
.sec-center{text-align:center;max-width:880px;margin:0 auto clamp(32px,4vw,56px)}
.sec-center .lede{margin:14px auto 0;max-width:640px}
.sec-center .eyebrow{margin-bottom:12px}

/* ─ about ─ */
.about{display:grid;gap:clamp(24px,3vw,40px);grid-template-columns:1fr}
@media (min-width:960px){.about{grid-template-columns:1fr 1.2fr;gap:56px}}
.about__text p{font-family:var(--display);font-size:clamp(18px,1.5vw,22px);line-height:1.4;letter-spacing:-0.015em;color:var(--ink);margin:0 0 18px}
.about__text p:last-child{margin:0}
.about__text p b{font-weight:500}
.bento{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:600px){.bento{grid-template-columns:1fr 1fr}}
.bcard{border-radius:var(--r-xxl);background:var(--canvas-soft);padding:22px 22px 20px;transition:transform .2s,box-shadow .2s}
.bcard:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.06)}
.bcard .e{font-size:26px;line-height:1}
.bcard .t{font-family:var(--display);font-weight:500;font-size:19px;letter-spacing:-0.015em;margin-top:14px;line-height:1.2}
.bcard .d{font-size:14px;color:var(--muted);margin-top:6px;line-height:1.5}

/* ─ skills ─ */
.skills{display:grid;gap:clamp(12px,1.6vw,24px);grid-template-columns:1fr}
@media (min-width:820px){.skills{grid-template-columns:repeat(3,1fr)}}
.skill{border-radius:var(--r-xxl);background:var(--canvas-soft);padding:28px 26px 24px}
.skill__h{display:flex;align-items:center;gap:14px;font-family:var(--display);font-weight:500;font-size:22px;letter-spacing:-0.02em;margin-bottom:16px}
.skill__h .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:21px;flex:none}
.skill ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.skill li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--ink)}
.skill li::before{content:"";width:6px;height:6px;border-radius:9999px;background:var(--primary);flex:none;margin-top:9px}
.tools-row{margin-top:clamp(20px,3vw,36px)}
.tools-row .chip{font-size:14px;padding:8px 14px;background:var(--canvas);border:1px solid var(--hairline);color:var(--ink);white-space:nowrap}
.tools-row .marquee__track{gap:10px}

/* ─ work tiles (showcase: radius 24, colour tile, screenshot, logo pill) ─ */
.tiles{display:grid;gap:clamp(16px,2vw,28px);grid-template-columns:1fr}
@media (min-width:820px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{display:flex;flex-direction:column;border-radius:28px;overflow:hidden;color:var(--ink);background:var(--canvas-soft);transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
.tile:hover{text-decoration:none;transform:translateY(-4px);box-shadow:0 24px 60px rgba(0,0,0,.10)}
.tile__art{position:relative;padding:36px 36px 0;min-height:280px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.tile__art .shot{width:86%;border-radius:14px 14px 0 0;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.18);border:1px solid rgba(0,0,0,.08);border-bottom:0;background:#fff;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.tile:hover .tile__art .shot{transform:translateY(-8px)}
.tile__art .shot img{width:100%;height:210px;object-fit:cover;object-position:top}
.tile__logo{position:absolute;top:20px;left:20px;height:40px;min-width:40px;padding:0 10px;border-radius:12px;background:rgba(255,255,255,.92);display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.08);font-size:20px}
.tile__logo img{width:24px;height:24px;object-fit:contain}
.tile--mint .tile__art{background:linear-gradient(160deg,#d7f0dc,var(--accent-mint))}
.tile--yellow .tile__art{background:linear-gradient(160deg,#ffe58a,var(--accent-yellow))}
.tile--violet .tile__art{background:linear-gradient(160deg,#d3c6ff,#7c5cff)}
.tile--teal .tile__art{background:linear-gradient(160deg,#9fe3dc,var(--primary))}
.tile--peach .tile__art{background:linear-gradient(160deg,#ffe4c8,#ff9a3c)}
.tile--now .tile__art{background:linear-gradient(160deg,#0f5f5a,var(--primary) 60%,#7fdcd1);align-items:center;justify-content:flex-start;padding:40px}
.tile--now .nowbox{color:#fafafa;max-width:560px}
.tile--now .nowbox .big{font-family:var(--display);font-weight:500;font-size:clamp(56px,7vw,96px);letter-spacing:-0.05em;line-height:.95}
.tile--now .nowbox .s{font-family:var(--display);font-size:18px;color:#d9f5f1;margin-top:12px;line-height:1.35;letter-spacing:-0.01em}
.tile--now .nowbox .pill{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:7px 12px;border-radius:9999px;background:rgba(9,9,11,.6);color:#fafafa;font-size:12.5px;font-weight:600}
.tile--now .nowbox .pill .pulse{width:8px;height:8px;border-radius:9999px;background:var(--accent-yellow)}
.tile--now.tile--shot .tile__art{align-items:flex-end;justify-content:center;padding:36px 36px 0}
.tile--wide.tile--shot .tile__art .shot img{height:250px}
.tile__logo--fill{padding:0;width:40px;overflow:hidden;background:transparent}
.tile__logo--fill img{width:40px;height:40px;object-fit:cover;border-radius:12px}
.tile__logo--auto{padding:0 10px}
.tile__logo--auto img{width:auto;height:22px;max-width:110px;object-fit:contain}
.tile--soft .tile__art{background:var(--canvas-soft);align-items:center;justify-content:center;min-height:220px;padding:36px}
.tile--soft .soonbox{text-align:center;font-family:var(--display);font-weight:500;font-size:clamp(32px,4vw,56px);letter-spacing:-0.04em;color:var(--faint)}
.tile--soft .soonbox small{display:block;font-family:var(--body);font-weight:600;font-size:12.5px;color:var(--muted);margin-top:10px;letter-spacing:0}
.tile__body{padding:24px 30px 30px;display:flex;flex-direction:column;gap:8px;background:var(--canvas-soft)}
.tile__body .eyebrow{color:var(--muted);font-weight:500}
.tile__title{font-family:var(--display);font-weight:500;font-size:clamp(22px,1.9vw,26px);line-height:1.2;letter-spacing:-0.025em}
.tile__desc{font-size:15px;color:var(--muted);line-height:1.5}
.tile__more{margin-top:8px;font-size:14.5px;font-weight:500;color:var(--primary);display:inline-flex;align-items:center;gap:6px}
.tile__more::after{content:"→";transition:transform .2s}
.tile:hover .tile__more::after{transform:translateX(4px)}
.tile--wide{grid-column:1 / -1}
@media (min-width:820px){.tile--wide{flex-direction:row}.tile--wide .tile__art{flex:1.15;min-height:300px}.tile--wide .tile__body{flex:1;justify-content:center;padding:40px}}

/* ─ contact: inset accent panel (radius 48, like the AI band) ─ */
.panel-y{margin:clamp(64px,7vw,96px) auto 0;background:var(--accent-yellow);color:#09090b;border-radius:clamp(28px,4vw,48px);padding:clamp(40px,5vw,64px) clamp(24px,5vw,72px);text-align:center}
.panel-y .eyebrow{color:#5a4300;font-weight:500}
.panel-y h2{color:#09090b;margin:10px auto 0;max-width:760px;font-size:clamp(32px,4.2vw,56px);letter-spacing:-0.04em}
.panel-y p{font-family:var(--display);color:#3a2f00;margin:16px auto 0;font-size:clamp(16px,1.3vw,19px);max-width:620px;line-height:1.4;letter-spacing:-0.01em}
.panel-y .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;justify-content:center}
.panel-y .btn--dark{background:#09090b;color:#fafafa}
.panel-y .btn--secondary{background:rgba(255,255,255,.7);color:#09090b;border-color:transparent}
.panel-y .btn--secondary:hover{background:#fff}

/* ─ footer ─ */
.footer{padding:40px 0 48px;color:var(--muted);font-size:13.5px}
.footer__in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px}
.footer a{color:var(--muted)}
.footer a:hover{color:var(--ink)}

/* ═══ case study ═══ */
.cs-hero{padding:56px 0 40px}
.cs-hero .eyebrow{margin-bottom:14px}
.cs-hero h1{max-width:960px;font-size:clamp(32px,3.7vw,52px);letter-spacing:-0.04em}
.cs-hero .sub{margin-top:20px;font-family:var(--display);font-size:clamp(18px,1.6vw,22px);color:var(--muted);max-width:760px;line-height:1.4;letter-spacing:-0.01em}
.cs-cover{margin:40px 0 0;border-radius:28px;overflow:hidden;background:var(--frame)}
.cs-cover img{width:100%;height:auto}
.cs-cover--band img{aspect-ratio:21/9;object-fit:cover}
.cs-cover--contain img{aspect-ratio:3/1;object-fit:contain;padding:clamp(12px,2vw,28px)}

.cs-layout{display:grid;grid-template-columns:1fr;gap:40px;padding-top:8px;padding-bottom:80px}
@media (min-width:1024px){.cs-layout{grid-template-columns:200px minmax(0,1fr);gap:64px}}
.toc{display:none}
@media (min-width:1024px){
  .toc{display:block;position:sticky;top:88px;align-self:start;font-size:13.5px}
  .toc a{display:block;color:var(--muted);padding:6px 0 6px 14px;border-left:2px solid var(--hairline);line-height:1.35}
  .toc a:hover{color:var(--ink);text-decoration:none}
  .toc a.is-active{color:var(--ink);border-left-color:var(--primary);font-weight:500}
  .toc .toc__back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);border:0;padding:0 0 18px;font-size:13px}
  .toc .toc__back:hover{color:var(--ink)}
}
.cs-main{min-width:0;max-width:760px}
.cs-main > section{margin-bottom:64px;scroll-margin-top:96px}
.cs-main .eyebrow{margin-bottom:10px}
.cs-main h2{font-size:clamp(26px,2.8vw,36px);margin-bottom:14px;letter-spacing:-0.03em}
.cs-main h3{font-size:20px;margin:28px 0 10px}
.cs-main p{margin:0 0 16px;font-size:16.5px;line-height:1.65}
.cs-main p:last-child{margin-bottom:0}
.cs-main ul,.cs-main ol{margin:0 0 16px;padding-left:22px;font-size:16px;line-height:1.6}
.cs-main li{margin:0 0 6px}
.cs-main li::marker{color:var(--faint)}
.cs-main .claim{font-family:var(--display);font-weight:600;font-size:22px;line-height:1.3;letter-spacing:-0.01em;color:var(--ink);margin:0 0 14px}

/* facts */
.facts-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;padding:24px 26px;border-radius:var(--r-xxl);background:var(--canvas-soft)}
@media (min-width:720px){.facts-grid{grid-template-columns:repeat(4,1fr)}}
.facts-grid dt{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--muted);margin-bottom:6px}
.facts-grid dd{margin:0;font-size:14.5px;line-height:1.45}
.facts-grid dd a{color:var(--primary)}
.facts-grid .wide{grid-column:1 / -1}
.nda{font-size:13px;color:var(--muted);margin-top:10px}

/* tldr */
.tldr{background:var(--ink-canvas);color:#fafafa;border-radius:32px;padding:clamp(28px,3vw,40px)}
.tldr .eyebrow{color:#909091}
.tldr p{color:#d4d4d8;font-size:16.5px;margin:0}
.tldr p b{color:#fafafa;font-weight:600}
.stats{display:grid;grid-template-columns:1fr;gap:12px;margin-top:24px}
@media (min-width:640px){.stats{grid-template-columns:repeat(3,1fr)}}
.stat{background:var(--ink-elevated);border-radius:var(--r-xl);padding:18px 20px;border:1px solid #27272a}
.stat .n{font-family:var(--display);font-weight:600;font-size:34px;letter-spacing:-0.02em;line-height:1;color:#fafafa;display:flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums}
.stat .n .arr{font-size:20px;color:var(--brand-green)}
.stat .n .arr.down{color:var(--accent-mint)}
.stat .l{font-size:13px;color:#a1a1aa;margin-top:10px;line-height:1.4}
.stat .src{font-size:11.5px;color:#71717b;margin-top:6px}

/* figures */
figure{margin:24px 0}
figure .fr{border-radius:20px;overflow:hidden;background:var(--canvas-soft)}
figure .fr img{width:100%;height:auto}
figure.contain .fr{padding:16px}
figure.contain .fr img{max-height:520px;width:auto;margin:0 auto;object-fit:contain}
@media (min-width:1200px){.cs-main figure.wide{width:calc(100% + 240px)}}
@media (min-width:1400px){.cs-main figure.wide{width:calc(100% + 320px)}}
figcaption{font-size:13.5px;color:var(--muted);margin-top:10px;line-height:1.5}
figcaption b{color:var(--ink);font-weight:600}
.fig-row{display:grid;grid-template-columns:1fr;gap:16px;margin:24px 0}
@media (min-width:640px){.fig-row{grid-template-columns:1fr 1fr}}
.fig-row figure{margin:0}

/* what shipped */
.ship{display:grid;grid-template-columns:1fr;gap:24px;align-items:center;margin:0 0 28px}
@media (min-width:720px){.ship{grid-template-columns:1.25fr 1fr}.ship.alt .ship__media{order:2}}
.ship__media{border-radius:20px;overflow:hidden;background:var(--canvas-soft);padding:14px}
.ship__media img{border-radius:10px}
.ship__media img{width:100%;height:auto}
.ship h3{margin:0 0 8px;font-size:19px}
.ship p{font-size:15px;color:var(--muted);margin:0}

/* goals */
.goals{display:grid;grid-template-columns:1fr;gap:12px}
.goal{display:grid;grid-template-columns:1fr;border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden}
@media (min-width:640px){.goal{grid-template-columns:1fr 1fr}}
.goal > div{padding:16px 18px}
.goal .u{background:var(--canvas)}
.goal .b{background:var(--canvas-soft);border-top:1px solid var(--hairline)}
@media (min-width:640px){.goal .b{border-top:0;border-left:1px solid var(--hairline)}}
.goal .t{font-size:11px;font-weight:600;letter-spacing:.06em;margin-bottom:6px}
.goal .u .t{color:var(--primary)}
.goal .b .t{color:var(--muted)}
.goal p{margin:0;font-size:15px;line-height:1.45}

/* before / after */
.ba{display:grid;grid-template-columns:1fr;gap:14px;margin:24px 0}
@media (min-width:720px){.ba{grid-template-columns:1fr 1fr}}
.ba > div{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--hairline);background:var(--canvas)}
.ba .fr{background:var(--frame);border-bottom:1px solid var(--hairline)}
.ba .fr img{width:100%;height:auto}
.ba .cap{padding:12px 14px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.ba .tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.08em;margin-bottom:4px}
.ba .before .tag{color:var(--faint)}
.ba .after{border-color:var(--primary)}
.ba .after .tag{color:var(--primary)}
.ba.pair .tag{color:var(--ink)}

/* iteration marker */
.iter{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:14px 18px;border-left:3px solid var(--primary);background:var(--teal-soft);border-radius:0 var(--r-lg) var(--r-lg) 0;margin:20px 0}
.iter .m{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-0.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.iter .k{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--primary)}
.iter .d{font-size:14px;color:var(--ink);flex:1 1 280px}

/* callouts / quotes */
.note{padding:16px 20px;border-radius:var(--r-lg);background:var(--canvas-soft);font-size:15px;line-height:1.55;margin:20px 0}
.note b{font-weight:600}
blockquote.quote{margin:24px 0;padding:22px 26px;border-radius:var(--r-xxl);background:var(--canvas-soft);font-family:var(--display);font-size:20px;line-height:1.35;letter-spacing:-0.01em;color:var(--ink)}
blockquote.quote footer{font-family:var(--body);font-size:13px;color:var(--muted);margin-top:12px;letter-spacing:0}
.wins{list-style:none;padding:0;margin:16px 0;display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:640px){.wins{grid-template-columns:1fr 1fr}}
.wins li{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--hairline);border-radius:var(--r-lg);font-size:14.5px;margin:0}
.wins li::before{content:"";width:16px;height:16px;flex:none;margin-top:3px;border-radius:9999px;background:var(--primary);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* reflection */
.refl{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:640px){.refl{grid-template-columns:1fr 1fr}}
.refl .card{background:var(--canvas-soft);border-color:transparent;border-radius:var(--r-xxl)}
.refl .card h4{font-size:17px;margin-bottom:8px}
.refl .card p{font-size:14.5px;color:var(--muted);margin:0}
.ai{margin-top:24px;padding:22px 24px;border-radius:var(--r-xl);border:1px solid var(--hairline);background:linear-gradient(135deg,var(--teal-soft),transparent 60%)}
.ai h3{margin:0 0 10px;font-size:18px}
.ai ul{margin:0}

/* next */
.next{display:grid;grid-template-columns:1fr;gap:16px;margin-top:20px}
@media (min-width:640px){.next{grid-template-columns:1fr 1fr}}
.next a{display:block;padding:20px 22px;border:1px solid var(--hairline);border-radius:var(--r-xl);color:var(--ink)}
.next a:hover{text-decoration:none;border-color:var(--faint)}
.next a .eyebrow{margin-bottom:6px}
.next a .t{font-family:var(--display);font-weight:600;font-size:18px;line-height:1.3;letter-spacing:-0.01em}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:8px}

.chapter{display:inline-block;font-family:var(--mono);font-size:12px;color:var(--primary);background:var(--teal-soft);padding:3px 8px;border-radius:var(--r-xs);margin-bottom:10px}
.two{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:640px){.two{grid-template-columns:1fr 1fr}}
.two .card{background:var(--canvas-soft);border-color:transparent;border-radius:var(--r-xxl)}
.two .card h4{margin-bottom:8px;font-size:16px}
.two .card p,.two .card li{font-size:14.5px;color:var(--muted)}
.two .card ul{margin:0;padding-left:18px}

/* trio: three emoji cards (principles, user groups) */
.trio{display:grid;grid-template-columns:1fr;gap:12px;margin:18px 0 22px}
@media (min-width:720px){.trio{grid-template-columns:repeat(3,1fr)}}
.trio .card{background:var(--canvas-soft);border-color:transparent;border-radius:var(--r-xxl);padding:20px 20px 18px}
.trio .e{font-size:26px;line-height:1}
.cs-main .trio h4{font-size:16.5px;margin:12px 0 6px;letter-spacing:-0.01em}
.cs-main .trio p{font-size:14px;color:var(--muted);margin:0;line-height:1.5}

/* steps: the numbered working loop */
.cs-main .steps{list-style:none;margin:20px 0 24px;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(136px,1fr));counter-reset:step}
.cs-main .steps li{position:relative;margin:0;padding:16px 14px 14px;border-radius:var(--r-xl);background:var(--canvas-soft);counter-increment:step}
.cs-main .steps li::before{content:counter(step);display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9999px;background:var(--primary);color:var(--on-primary);font-weight:600;font-size:13px;margin-bottom:10px;font-variant-numeric:tabular-nums}
.steps .t{font-family:var(--display);font-weight:600;font-size:15px;line-height:1.25;letter-spacing:-0.01em}
.steps .d{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.45}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}