/* Layout concept: a film in scenes. Full-viewport "rooms" alternate ink and paper;
   condensed uppercase shouts, italic serif whispers; one process-cyan accent marks
   what matters. Print marks (crop, registration, dielines) meet screen frames. */
:root {
  color-scheme: dark;
  --ink: #111111;
  --ink-2: #1A1A1A;
  --ink-3: #262626;
  --paper: #D9CDB6;
  --paper-2: #CDBFA4;
  --white: #F1ECE3;
  --cyan: #E5322A;
  --cyan-ink: #B3170F;            /* cyan dark enough for small text on paper */
  --cyan-soft: rgba(229, 50, 42, .14);
  --on-ink: #D9CDB6;
  --on-ink-dim: rgba(241, 236, 227, .62);
  --on-ink-faint: rgba(241, 236, 227, .28);
  --on-paper: #111111;
  --on-paper-dim: rgba(17, 17, 17, .64);
  --on-paper-faint: rgba(17, 17, 17, .2);

  --f-display: "Archivo", "Arial Narrow", "Helvetica Neue", sans-serif;
  --f-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --t-display: clamp(64px, 11vw, 200px);
  --t-3xl: clamp(52px, 7vw, 120px);
  --t-2xl: clamp(38px, 4.6vw, 76px);
  --t-xl: clamp(28px, 2.8vw, 46px);
  --t-lg: clamp(20px, 1.7vw, 27px);
  --t-md: clamp(16px, 1.15vw, 18px);
  --t-sm: clamp(14px, .95vw, 15px);
  --t-xs: clamp(11.5px, .8vw, 13px);
  --t-micro: clamp(10px, .68vw, 11.5px);

  --track-label: .2em;
  --track-wide: .3em;
  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1440px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-cine: cubic-bezier(.65, 0, .35, 1);
  --ease-snap: cubic-bezier(.85, 0, .15, 1);
  --ease-fill: cubic-bezier(.76, 0, .24, 1);
  --d-quick: .35s;
  --d-base: .6s;
  --d-slow: 1.05s;
}
@media (prefers-reduced-motion: reduce) {
  :root { --d-quick: .01ms; --d-base: .01ms; --d-slow: .01ms; }
}

/* ---------- base ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
* { box-sizing: border-box; }
html { background: var(--ink); }
body {
  margin: 0; background: var(--ink); color: var(--on-ink);
  font-family: var(--f-display); font-size: var(--t-md); line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, svg { max-width: 100%; }
::selection { background: var(--cyan); color: var(--ink); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 12000; background: var(--cyan); color: var(--ink); padding: 10px 16px; font-weight: 700; transition: top .3s; }
.skip:focus { top: calc(16px + env(safe-area-inset-top, 0px)); }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.ink { background: var(--ink); color: var(--on-ink); }
.paper { background: var(--paper); color: var(--on-paper); }

/* type roles */
.display { font-family: var(--f-display); font-stretch: var(--fs-d, 84%); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; line-height: .9; }
.serif { font-family: var(--f-serif); font-weight: 400; letter-spacing: -.005em; }
.it { font-family: var(--f-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; }
.accent { color: var(--cyan); }
.paper .accent { color: var(--cyan-ink); }
.mono { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .02em; }
.label { font-family: var(--f-display); text-transform: uppercase; letter-spacing: var(--track-label); font-size: var(--t-micro); font-weight: 600; }
.kicker { display: inline-flex; align-items: center; gap: .55em; font-family: var(--f-display); text-transform: uppercase; letter-spacing: var(--track-wide); font-size: var(--t-micro); font-weight: 600; }
.kicker::before, .kicker::after { font-family: var(--f-serif); font-style: italic; font-size: 1.9em; letter-spacing: 0; line-height: 0; color: var(--cyan); font-weight: 400; }
.kicker::before { content: "("; } .kicker::after { content: ")"; }
.paper .kicker::before, .paper .kicker::after { color: var(--cyan-ink); }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; text-wrap: balance; }
p { margin: 0; }
.lede { font-family: var(--f-serif); font-size: var(--t-lg); line-height: 1.35; max-width: 34ch; }
.body-serif { font-family: var(--f-serif); font-size: clamp(19px, 1.45vw, 23px); line-height: 1.45; max-width: 58ch; }
.dim { color: var(--on-ink-dim); }
.paper .dim { color: var(--on-paper-dim); }

/* line reveal masks */
.lm { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.lm > span { display: block; will-change: transform; }
.w { display: inline-block; will-change: transform, opacity; }

/* ---------- grain ---------- */
.grain { position: fixed; inset: -50%; width: 200%; height: 200%; pointer-events: none; z-index: 9500; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.6s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }

/* ---------- cursor ---------- */
.c-dot, .c-ring { position: fixed; left: 0; top: 0; pointer-events: none; opacity: 0; will-change: transform; transition: opacity .2s; }
.c-dot { z-index: 11001; width: 6px; height: 6px; border-radius: 50%; background: #fff; mix-blend-mode: difference; }
.c-ring { z-index: 11000; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(17,17,17,.55); box-shadow: 0 0 0 1.5px rgba(241,236,227,.7);
  display: grid; place-items: center;
  transition: opacity .2s, width .32s var(--ease-cine), height .32s var(--ease-cine), background .3s, border-color .3s; }
.c-on .c-dot, .c-on .c-ring { opacity: 1; }
.c-hover .c-ring { width: 54px; height: 54px; background: rgba(241,236,227,.16); }
.c-hover .c-dot, .c-label .c-dot { opacity: 0; }
.c-label .c-ring { width: 104px; height: 104px; background: var(--ink); border-color: rgba(241,236,227,.85); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.c-ring span { font-family: var(--f-display); font-size: 11px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--paper); opacity: 0; transition: opacity .2s; padding-left: .3em; white-space: nowrap; }
.c-label .c-ring span { opacity: 1; }

/* ---------- header ---------- */
.hdr { position: fixed; z-index: 600; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center;
  padding: calc(22px + env(safe-area-inset-top, 0px)) calc(var(--gutter) + 180px) 22px var(--gutter);
  color: #D9CDB6; mix-blend-mode: difference; pointer-events: none;
  opacity: 0; transform: translateY(-14px); transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out); }
.hdr.on { opacity: 1; transform: none; }
.hdr.on a { pointer-events: auto; }
.logo { display: inline-flex; align-items: center; gap: 12px; }
.logo svg { width: 30px; height: 30px; }
.logo b { font-family: var(--f-display); font-stretch: var(--fs-d, 84%); font-weight: 900; font-size: 26px; letter-spacing: .02em; line-height: 1; }
.nav { display: flex; gap: clamp(18px, 2.4vw, 38px); }
.nav a { font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 600; position: relative; padding: 4px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--d-base) var(--ease-out); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
@media (max-width: 860px) { .nav { display: none; } .hdr { padding-right: 96px; } .logo b { font-size: 22px; } }

/* ---------- burger ---------- */
.burger { position: fixed; z-index: 1100; top: calc(16px + env(safe-area-inset-top, 0px)); right: var(--gutter);
  height: 58px; min-width: 58px; padding: 0 16px; border-radius: 999px; border: 1.25px solid rgba(255,255,255,.45);
  display: flex; align-items: center; justify-content: flex-end; gap: 0; overflow: hidden; isolation: isolate;
  mix-blend-mode: difference; color: #fff;
  transition: padding .8s var(--ease-cine), border-color .4s; }
.burger::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #D9CDB6; border-radius: inherit; transform: translateY(102%); transition: transform .55s var(--ease-cine); }
.burger:hover::before { transform: none; }
.burger .bw { max-width: 0; overflow: hidden; white-space: nowrap; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; transition: max-width .8s var(--ease-cine), margin .8s var(--ease-cine), letter-spacing .8s var(--ease-out), color .3s; }
.burger.wide { padding-left: 26px; }
.burger.wide .bw { max-width: 120px; margin-right: 14px; letter-spacing: .24em; }
.burger .bl { display: flex; flex-direction: column; gap: 7px; align-items: center; }
.burger .bl i { display: block; height: 2px; border-radius: 2px; background: #fff; transition: width .45s var(--ease-out), transform .5s var(--ease-snap), background .3s; }
.burger .bl i:first-child { width: 26px; } .burger .bl i:last-child { width: 17px; }
.burger:hover .bl i { background: #111111; } .burger:hover .bl i:last-child { width: 26px; }
.burger:hover .bw { color: #111111; }
.menu-open .burger { mix-blend-mode: normal; border-color: rgba(241,236,227,.35); }
.menu-open .burger::before { transform: translateY(102%); }
.menu-open .burger .bl i { background: var(--paper); }
.menu-open .burger .bl i:first-child { transform: translateY(4.5px) rotate(45deg); width: 22px; }
.menu-open .burger .bl i:last-child { transform: translateY(-4.5px) rotate(-45deg); width: 22px; }
.menu-open .burger:hover .bl i { background: var(--paper); }

/* ---------- menu ---------- */
.menu { position: fixed; inset: 0; z-index: 1050; background: var(--ink); color: var(--on-ink); display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--gutter);
  padding: calc(110px + env(safe-area-inset-top, 0px)) var(--gutter) calc(40px + env(safe-area-inset-bottom, 0px));
  clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .7s var(--ease-snap), visibility 0s .7s; overflow-y: auto; }
.menu-open .menu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .7s var(--ease-snap), visibility 0s; }
.menu ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(4px, 1.2vh, 14px); counter-reset: m; }
.menu li { overflow: hidden; }
.menu li a { display: grid; grid-template-columns: 3.2em auto 1fr; align-items: baseline; gap: 1rem; }
.menu .mn { font-size: var(--t-xs); letter-spacing: .2em; color: var(--on-ink-faint); font-weight: 600; }
.menu .mt { font-family: var(--f-display); font-stretch: var(--fs-d, 84%); font-weight: 800; text-transform: uppercase; font-size: clamp(42px, 6.2vw, 96px); line-height: .92; transition: color .35s, transform .5s var(--ease-out); }
.menu .ms { font-family: var(--f-serif); font-style: italic; font-size: var(--t-lg); color: var(--on-ink-dim); opacity: 0; transform: translateX(-10px); transition: opacity .35s, transform .5s var(--ease-out); }
.menu li a:hover .mt { color: var(--cyan); transform: translateX(10px); }
.menu li a:hover .ms, .menu li a:focus-visible .ms { opacity: 1; transform: none; }
.menu li > a > * { transform: translateY(110%); transition: transform .8s var(--ease-out); }
.menu-open .menu li > a > * { transform: none; }
.menu-open .menu li:nth-child(2) > a > * { transition-delay: .06s; } .menu-open .menu li:nth-child(3) > a > * { transition-delay: .12s; }
.menu-open .menu li:nth-child(4) > a > * { transition-delay: .18s; } .menu-open .menu li:nth-child(5) > a > * { transition-delay: .24s; } .menu-open .menu li:nth-child(6) > a > * { transition-delay: .3s; }
.menu li a:hover .mt, .menu li a:hover .ms { transition-delay: 0s; }
.menu aside { display: flex; flex-direction: column; justify-content: flex-end; gap: 28px; border-left: 1px solid var(--on-ink-faint); padding-left: var(--gutter); }
.menu aside .big { font-family: var(--f-serif); font-size: var(--t-xl); line-height: 1.1; }
.menu aside .links { display: flex; flex-wrap: wrap; gap: 10px 24px; }
@media (max-width: 860px) { .menu { grid-template-columns: 1fr; } .menu aside { border-left: 0; padding-left: 0; border-top: 1px solid var(--on-ink-faint); padding-top: 24px; } .menu li a { grid-template-columns: 2.4em 1fr; } .menu .ms { display: none; } }

/* ---------- buttons ---------- */
.arrow-btn { display: inline-flex; align-items: center; gap: 1rem; --stroke: rgba(241,236,227,.5); --fill: var(--paper); --ink-c: var(--paper); --ink-h: var(--ink); }
.paper .arrow-btn, .arrow-btn[data-tone="dark"] { --stroke: rgba(17,17,17,.3); --fill: var(--ink); --ink-c: var(--ink); --ink-h: var(--paper); }
.arrow-btn[data-tone="accent"] { --stroke: var(--cyan); --fill: var(--cyan); --ink-c: var(--cyan); --ink-h: var(--ink); }
.arrow-btn .lbl { font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 700; }
.arrow-btn .circ { position: relative; flex: none; width: clamp(46px, 3.6vw, 58px); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--stroke); display: grid; place-items: center; overflow: hidden; isolation: isolate; transition: border-color .45s; }
.arrow-btn .circ::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fill); transform: translateY(101%); transition: transform .5s var(--ease-fill); }
.arrow-btn svg { width: 40%; height: 40%; color: var(--ink-c); transition: color .45s, transform .5s var(--ease-out); }
.arrow-btn:hover .circ { border-color: transparent; }
.arrow-btn:hover .circ::before { transform: none; }
.arrow-btn:hover svg { color: var(--ink-h); transform: translateX(3px); }
.arrow-btn.up:hover svg { transform: translate(2px, -2px); }

.pill { position: relative; display: inline-flex; align-items: center; gap: .7rem; height: 60px; padding-left: 1.7rem; border-radius: 999px; isolation: isolate; overflow: hidden; border: 1px solid rgba(241,236,227,.35); }
.pill .pf { position: absolute; inset: 0; z-index: -1; background: var(--cyan); border-radius: inherit; clip-path: circle(29px at calc(100% - 30px) 50%); transition: clip-path .6s var(--ease-fill); }
.pill:hover .pf { clip-path: circle(150% at calc(100% - 30px) 50%); }
.pill .pl { font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 700; transition: color .4s .05s; }
.pill:hover .pl { color: var(--ink); }
.pill .pd { width: 60px; height: 60px; display: grid; place-items: center; }
.pill .pd svg { width: 38%; color: var(--ink); transition: transform .45s var(--ease-out); }
.pill:hover .pd svg { transform: translateX(3px); }
.paper .pill { border-color: rgba(17,17,17,.25); }

.u-link { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .5s var(--ease-out), color .3s; padding-bottom: 2px; }
.u-link:hover { background-size: 0 1px; background-position: 100% 100%; color: var(--cyan); }
.paper .u-link:hover { color: var(--cyan-ink); }

.copy-row { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.copy-btn { font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; font-weight: 700; border: 1px solid currentColor; border-radius: 999px; padding: 6px 12px; opacity: .7; transition: opacity .3s, background .3s, color .3s; }
.copy-btn:hover { opacity: 1; background: var(--cyan); color: var(--ink); border-color: var(--cyan); }
.selectable { user-select: all; -webkit-user-select: all; }

/* ---------- curtain ---------- */
.curtain { position: fixed; inset: -2px; z-index: 9000; pointer-events: none; background: var(--ink); clip-path: inset(0 0 100% 0); }
.curtain .cm { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; opacity: 0; }
.curtain::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(229,50,42,.6), transparent); }

/* ---------- intro ---------- */
.intro { position: fixed; inset: 0; z-index: 10000; background: var(--ink); display: grid; place-items: center; overflow: hidden; }
.intro-grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 1fr); gap: clamp(5px, .7vw, 10px); width: min(92vw, 1180px); height: min(44vw, 480px); transition: transform 1.2s var(--ease-cine), filter 1.2s, opacity .8s .1s; }
.intro-grid > div { position: relative; overflow: hidden; clip-path: inset(50%); animation: cell .9s var(--ease-cine) forwards; animation-delay: calc(var(--i) * 75ms); }
.intro-grid > div .art { position: absolute; inset: 0; width: 100%; height: 100%; }
@keyframes cell { to { clip-path: inset(0); } }
.intro.converge .intro-grid { transform: scale(.14); filter: blur(16px) brightness(.4); opacity: 0; }
.intro-logo { position: absolute; display: grid; justify-items: center; gap: 18px; opacity: 0; transition: opacity .6s; }
.intro.converge .intro-logo { opacity: 1; }
.intro-logo svg { width: min(64vw, 620px); height: auto; overflow: visible; }
.intro-logo text { fill: transparent; stroke: #D9CDB6; stroke-width: 1.4px; stroke-dasharray: 900; stroke-dashoffset: 900; transition: fill .9s var(--ease-fill) 1.3s; }
.intro.converge .intro-logo text { animation: draw 1.8s var(--ease-fill) forwards; fill: #D9CDB6; }
.intro-tag { font-family: var(--f-serif); font-style: italic; font-size: var(--t-xl); color: var(--on-ink-dim); opacity: 0; transform: translateY(10px); transition: opacity .9s var(--ease-out) 1.6s, transform .9s var(--ease-out) 1.6s; }
.intro.converge .intro-tag { opacity: 1; transform: none; }
.intro-tag em { color: var(--cyan); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.intro-skip { position: absolute; right: var(--gutter); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--on-ink-dim); display: inline-flex; gap: 8px; align-items: center; padding: 8px; }
.intro-skip:hover { color: var(--paper); }
.intro.leave { clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease-snap); }

/* ---------- shared: marquee ---------- */
.mq { overflow: hidden; white-space: nowrap; }
.mq-t { display: inline-flex; will-change: transform; animation: mq var(--mq-d, 40s) linear infinite; }
.mq-t.rev { animation-direction: reverse; }
@keyframes mq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mq-t { animation: none; } }

/* registration mark spin */
.spin { animation: spin 24s linear infinite; transform-origin: 50% 50%; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

/* scroll hint */
.scroll-hint { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.scroll-hint .sl { width: 1px; height: 52px; background: currentColor; opacity: .25; position: relative; }
.scroll-hint .sd { position: absolute; left: 50%; top: 0; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: currentColor; animation: drop 2.2s var(--ease-cine) infinite; opacity: 1; }
@keyframes drop { 0% { top: 0; opacity: 0 } 15% { opacity: 1 } 80% { top: 100%; opacity: 1 } 100% { top: 100%; opacity: 0 } }

/* ---------- HOME ---------- */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: var(--paper); color: var(--on-paper); }
.hero-stamp { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; z-index: 3; padding-inline: var(--gutter); }
.hero-stack { display: grid; justify-items: center; gap: clamp(14px, 2vw, 26px); }
.hero-word { font-family: var(--f-display); font-stretch: var(--fs-d, 84%); font-weight: 900; font-size: var(--t-display); line-height: .82; letter-spacing: -.005em; text-transform: uppercase; display: flex; align-items: center; gap: .08em; }
.hero-word .reg { width: .52em; height: .52em; color: var(--on-paper); }
.hero-sub { font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 600; color: var(--on-paper-dim); }
.hero-rot { font-family: var(--f-serif); font-style: italic; font-size: clamp(26px, 2.6vw, 40px); height: 1.25em; overflow: hidden; line-height: 1.25; transform: rotate(-2deg); }
.hero-rot .rt { display: flex; flex-direction: column; animation: rot 12s var(--ease-cine) infinite; }
.hero-rot .rt span { height: 1.25em; }
.hero-rot .rt span:nth-child(odd) { color: var(--cyan-ink); }
@keyframes rot { 0%,20% { transform: translateY(0) } 25%,45% { transform: translateY(-1.25em) } 50%,70% { transform: translateY(-2.5em) } 75%,95% { transform: translateY(-3.75em) } 100% { transform: translateY(-5em) } }
.hero .scroll-hint { position: absolute; left: 50%; bottom: 5vh; transform: translateX(-50%); z-index: 4; font-size: 9px; letter-spacing: .38em; text-transform: uppercase; font-weight: 600; color: var(--on-paper); }
.hero-media { position: absolute; inset: 0; z-index: 2; clip-path: inset(48% 48% 48% 48% round 6px); }
.hero-media .art { width: 100%; height: 100%; display: block; }
.hero-cap { position: absolute; left: var(--gutter); bottom: 6vh; z-index: 5; color: var(--paper); opacity: 0; }
.hero-cap .display { font-size: var(--t-2xl); }
.hero-corner { position: absolute; top: calc(110px + env(safe-area-inset-top,0px)); left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; z-index: 4; font-family: var(--f-mono); font-size: var(--t-micro); color: var(--on-paper-dim); }
@media (prefers-reduced-motion: reduce) { .hero-rot .rt { animation: none; } }

.pos { padding-block: clamp(110px, 18vh, 200px); }
.pos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 110px); align-items: end; }
.pos h2 { font-family: var(--f-serif); font-size: var(--t-2xl); line-height: 1.02; }
.pos h2 em { color: var(--cyan); }
.rotor { display: flex; align-items: baseline; gap: .35em; flex-wrap: wrap; margin-top: 28px; }
.rotor .display { font-size: var(--t-xl); }
.rotor .rw { position: relative; display: inline-block; font-size: var(--t-xl); height: 1.3em; overflow: hidden; vertical-align: bottom; min-width: 8.5em; }
.rotor .rw span { position: absolute; left: 0; top: 0; line-height: 1.3; white-space: nowrap; font-family: var(--f-serif); font-style: italic; font-size: 1em; color: var(--cyan); transform: translateY(110%); transition: transform .8s var(--ease-out); }
.rotor .rw span.on { transform: none; }
.rotor .rw span.off { transform: translateY(-110%); }
.pos .body-serif em { color: var(--cyan); }
@media (max-width: 860px) { .pos-grid { grid-template-columns: 1fr; } }

.reel { position: relative; }
.reel-stage { position: relative; height: 100svh; overflow: hidden; background: var(--ink); }
.reel-wall { position: absolute; inset: 0; background: var(--ink); }
.reel-screen { position: absolute; inset: 0; z-index: 1; clip-path: inset(34% 34% 34% 34% round 8px); background: #000; }
.reel-frames { position: absolute; inset: 9% 9%; }
.reel-frames > div { position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--ease-out); }
.reel-frames > div.on { opacity: 1; }
.reel-frames .art { width: 100%; height: 100%; display: block; }
.reel-frames .draw * { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.reel-frames .on .draw * { animation: draw 2.2s var(--ease-fill) forwards; }
.reel-frame { position: absolute; z-index: 3; left: 50%; top: 50%; width: 32%; height: 32%; transform: translate(-50%, -50%); pointer-events: none; }
.reel-frame i { position: absolute; width: clamp(18px, 1.6vw, 26px); height: clamp(18px, 1.6vw, 26px); border: 2px solid var(--paper); }
.reel-frame i:nth-child(1) { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.reel-frame i:nth-child(2) { right: -1px; top: -1px; border-left: 0; border-bottom: 0; }
.reel-frame i:nth-child(3) { left: -1px; bottom: -1px; border-right: 0; border-top: 0; }
.reel-frame i:nth-child(4) { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.reel-head { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; padding: clamp(96px, 16vh, 180px) var(--gutter) clamp(40px, 9vh, 90px); pointer-events: none; color: var(--paper); mix-blend-mode: difference; }
.reel-head .k { font-family: var(--f-display); font-stretch: var(--fs-d, 84%); font-weight: 800; text-transform: uppercase; font-size: clamp(20px, 2.6vw, 38px); }
.reel-head .t { font-family: var(--f-display); font-stretch: var(--fs-d, 84%); font-weight: 900; text-transform: uppercase; font-size: var(--t-3xl); line-height: .9; }
.reel-head em { font-family: var(--f-serif); font-weight: 400; text-transform: none; }
.reel-ctrl { position: absolute; z-index: 5; right: var(--gutter); bottom: clamp(24px, 5vh, 48px); display: flex; gap: 14px; align-items: center; font-size: var(--t-micro); letter-spacing: .24em; text-transform: uppercase; font-weight: 700; color: var(--paper); mix-blend-mode: difference; }
.reel-ctrl button { padding: 6px 10px; border: 1px solid currentColor; border-radius: 999px; }
.reel-prog { width: 120px; height: 1px; background: rgba(241,236,227,.3); position: relative; overflow: hidden; }
.reel-prog b { position: absolute; inset: 0; background: currentColor; transform-origin: left; transform: scaleX(0); }

.manifesto { position: relative; }
.mf-stage { position: relative; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.mf-bg { position: absolute; width: 130vmin; height: 130vmin; left: 50%; top: 50%; margin: -65vmin 0 0 -65vmin; color: var(--on-ink-faint); opacity: .5; }
.mf-beat { position: absolute; inset: 0; display: grid; align-content: center; gap: clamp(16px, 3vh, 36px); padding-inline: var(--gutter); max-width: var(--maxw); margin-inline: auto; }
.mf-beat .display { font-size: var(--t-3xl); }
.mf-beat .it { font-size: var(--t-2xl); line-height: 1.04; color: var(--cyan); max-width: 18ch; justify-self: end; text-align: right; }
.mf-count { position: absolute; left: var(--gutter); bottom: 5vh; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--on-ink-dim); }

.facts { padding-block: clamp(100px, 16vh, 180px); }
.facts-grid { display: grid; grid-template-columns: 1fr minmax(0, 520px); gap: clamp(40px, 7vw, 120px); align-items: center; }
.facts h2 { font-family: var(--f-serif); font-size: var(--t-2xl); line-height: 1.02; }
.facts h2 em { color: var(--cyan-ink); }
.label-card { background: var(--white); color: var(--ink); border: 2px solid var(--ink); padding: 14px 18px 18px; font-family: var(--f-display); box-shadow: 0 40px 80px -40px rgba(0,0,0,.35); transform: rotate(-1.5deg); }
.label-card .lc-h { font-stretch: var(--fs-d, 84%); font-weight: 900; font-size: clamp(44px, 5vw, 66px); line-height: .9; text-transform: uppercase; letter-spacing: -.01em; }
.label-card .lc-s { font-size: 14px; border-bottom: 12px solid var(--ink); padding: 6px 0 8px; display: flex; justify-content: space-between; gap: 16px; }
.label-card .lc-row { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--ink); padding: 6px 0; font-size: 15px; }
.label-card .lc-row b { font-weight: 800; }
.label-card .lc-row.thick { border-bottom-width: 6px; }
.label-card .lc-row .num { font-variant-numeric: tabular-nums; font-weight: 800; }
.label-card .lc-ind { padding-left: 1em; }
.label-card .lc-fine { font-size: 12px; line-height: 1.45; padding-top: 10px; }
.label-card .lc-bar { display: flex; align-items: flex-end; gap: 16px; margin-top: 14px; }
.label-card .lc-bar svg { height: 54px; width: 180px; }
@media (max-width: 860px) { .facts-grid { grid-template-columns: 1fr; } .label-card { transform: none; } }

.question { position: relative; }
.q-stage { position: relative; height: 100svh; overflow: hidden; display: grid; place-items: center; text-align: center; }
.q-bg { position: absolute; inset: 0; opacity: .35; }
.q-bg .art { width: 100%; height: 100%; }
.q-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(17,17,17,.35), var(--ink) 75%); }
.q-title { position: relative; z-index: 2; font-family: var(--f-serif); font-size: var(--t-3xl); line-height: .98; max-width: 14ch; padding-inline: var(--gutter); }
.q-title em { color: var(--cyan); }
.q-wipe { position: absolute; inset: 0; z-index: 3; background: var(--ink); transform: scaleY(0); transform-origin: bottom; }

.stack { position: relative; }
.stack-pin { position: relative; height: 100svh; overflow: hidden; }
.panel { position: absolute; inset: 0; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 70px); align-items: center; padding: clamp(100px, 14vh, 140px) var(--gutter) clamp(50px, 8vh, 90px); background: var(--tint); color: var(--on-ink); }
.panel + .panel { clip-path: inset(100% 0 0 0); }
.panel-head { position: absolute; top: clamp(88px, 12vh, 120px); left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; font-size: var(--t-micro); letter-spacing: .24em; text-transform: uppercase; font-weight: 600; color: var(--on-ink-dim); }
.panel-head b { color: var(--cyan); font-weight: 700; }
.panel-text { display: grid; gap: 18px; align-content: center; min-width: 0; position: relative; z-index: 2; }
.panel-text .tags { font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--on-ink-dim); font-weight: 600; }
.panel-text .tags b { color: var(--cyan); }
.panel-text h3 { font-family: var(--f-serif); font-style: italic; font-size: var(--t-2xl); line-height: 1; }
.panel-text p { font-family: var(--f-serif); font-size: var(--t-lg); line-height: 1.3; color: var(--on-ink-dim); max-width: 30ch; }
.panel-media { position: relative; aspect-ratio: 3/2; overflow: hidden; border-radius: 4px; min-width: 0; max-width: 100%; }
.panel-media .art { width: 100%; height: 100%; display: block; }
.panel-num { position: absolute; right: var(--gutter); bottom: -.12em; font-family: var(--f-display); font-stretch: var(--fs-d, 84%); font-weight: 900; font-size: clamp(120px, 18vw, 300px); line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(241,236,227,.2); pointer-events: none; z-index: 1; }
.rail { position: absolute; z-index: 5; right: var(--gutter); top: 50%; transform: translateY(-50%); display: grid; gap: 10px; text-align: right; }
.rail a { font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--on-ink-faint); transition: color .4s; display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.rail a::after { content: ""; width: 14px; height: 1px; background: currentColor; transition: width .4s var(--ease-out); }
.rail a.on { color: var(--paper); }
.rail a.on::after { width: 34px; background: var(--cyan); }
@media (max-width: 1100px) { .rail { display: none; } }
@media (max-width: 860px) {
  .stack-pin { height: auto; }
  .panel { position: relative; grid-template-columns: 1fr; min-height: 0; padding-block: 150px 70px; }
  .panel-head { top: 96px; }
  .panel + .panel { clip-path: none; }
}

.shelf { position: relative; }
.shelf-pin { position: relative; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; padding-block: clamp(96px, 14vh, 140px) clamp(24px, 5vh, 50px); }
.shelf-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.shelf-head h2 { font-family: var(--f-display); font-stretch: var(--fs-d, 84%); font-weight: 900; text-transform: uppercase; font-size: var(--t-3xl); line-height: .9; }
.shelf-head h2 em { font-family: var(--f-serif); font-weight: 400; text-transform: none; color: var(--cyan); }
.shelf-head p { max-width: 36ch; font-family: var(--f-serif); font-size: var(--t-lg); color: var(--on-ink-dim); }
.shelf-track-wrap { position: relative; display: flex; align-items: flex-end; min-height: 0; }
.shelf-track { display: flex; align-items: flex-end; gap: clamp(8px, 1.4vw, 22px); padding-inline: var(--gutter); will-change: transform; }
.sku { position: relative; flex: none; width: clamp(110px, 11vw, 170px); display: grid; justify-items: center; gap: 10px; transition: transform .5s var(--ease-out); }
.sku .sku-art { width: 100%; height: auto; display: block; }
.sku:hover { transform: translateY(-14px); }
.sku .sku-tag { position: absolute; bottom: calc(100% - 20px); left: 50%; transform: translate(-50%, 8px); white-space: nowrap; background: var(--paper); color: var(--ink); font-family: var(--f-mono); font-size: 11px; padding: 6px 10px; border-radius: 3px; opacity: 0; transition: opacity .3s, transform .4s var(--ease-out); pointer-events: none; }
.sku:hover .sku-tag, .sku:focus-visible .sku-tag { opacity: 1; transform: translate(-50%, 0); }
.sku .sku-n { font-family: var(--f-mono); font-size: 11px; color: var(--on-ink-faint); }
.shelf-floor { height: 1px; background: var(--on-ink-faint); margin-inline: var(--gutter); }
.shelf-foot { display: flex; justify-content: space-between; gap: 16px; padding-top: 14px; flex-wrap: wrap; }
.shelf-prog { width: min(240px, 40vw); height: 1px; background: var(--on-ink-faint); position: relative; align-self: center; }
.shelf-prog b { position: absolute; inset: 0; background: var(--cyan); transform-origin: left; transform: scaleX(0); }
@media (max-width: 860px) {
  .shelf-pin { height: auto; }
  .shelf-track-wrap { overflow-x: auto; padding-block: 40px 10px; }
}

.wall { position: relative; height: 100svh; min-height: 620px; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; row-gap: 4vh; padding-block: clamp(96px, 15vh, 150px) clamp(30px, 6vh, 60px); background: #0A0A0A; }
.wall-mark { position: absolute; width: 140vmin; height: 140vmin; left: 50%; top: 50%; margin: -70vmin 0 0 -70vmin; color: var(--cyan); opacity: .07; pointer-events: none; }
.wall h2 { font-family: var(--f-serif); font-size: var(--t-2xl); line-height: 1; }
.wall h2 em { color: var(--on-ink-dim); }
.wall-rows { position: relative; z-index: 1; display: grid; align-content: center; gap: clamp(2px, .8vh, 10px); user-select: none; }
.wall-row .mq-t { align-items: baseline; }
.wall-row a { display: inline-flex; align-items: baseline; gap: .5em; padding: 0 clamp(14px, 2vw, 32px); font-family: var(--f-display); font-stretch: var(--fs-d, 84%); font-weight: 800; text-transform: uppercase; font-size: clamp(38px, 6.2vw, 96px); line-height: 1.02; color: var(--paper); transition: color .45s, -webkit-text-stroke-color .45s; }
.wall-row a sup { font-size: .2em; letter-spacing: .2em; color: var(--on-ink-dim); font-weight: 600; top: -2.6em; position: relative; }
.wall-row a:nth-child(3n+2) { color: transparent; -webkit-text-stroke: 1px rgba(241,236,227,.55); }
.wall-rows:hover a { color: rgba(241,236,227,.18); -webkit-text-stroke-color: rgba(241,236,227,.18); }
.wall-rows:hover a:hover { color: var(--cyan); -webkit-text-stroke-color: var(--cyan); }
.wall-rows:hover .mq-t { animation-play-state: paused; }
.wall-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; position: relative; z-index: 2; }
.follower { position: fixed; left: 0; top: 0; z-index: 800; width: 260px; pointer-events: none; opacity: 0; transition: opacity .3s; }
.follower.on { opacity: 1; }
.follower figure { margin: 0; background: var(--paper); color: var(--ink); padding: 10px 10px 12px; box-shadow: 0 30px 60px rgba(0,0,0,.45); transform: rotate(-3deg) scale(.85); transition: transform .45s var(--ease-out); }
.follower.on figure { transform: rotate(-3deg) scale(1); }
.follower .fi { aspect-ratio: 3/2; overflow: hidden; }
.follower .fi .art { width: 100%; height: 100%; display: block; }
.follower figcaption { display: flex; justify-content: space-between; gap: 8px; padding-top: 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.follower figcaption span:last-child { color: var(--cyan-ink); }
@media (max-width: 860px) { .wall { height: auto; } }

.svc { padding-block: clamp(100px, 16vh, 170px); }
.svc-head { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; margin-bottom: clamp(30px, 6vh, 70px); }
.svc-head h2 { font-family: var(--f-serif); font-size: var(--t-2xl); line-height: 1; }
.svc-head h2 em { color: var(--cyan); }
.svc-head p { font-family: var(--f-serif); font-style: italic; color: var(--on-ink-dim); max-width: 26ch; }
.svc-list { border-top: 1px solid var(--on-ink-faint); }
.svc-row { position: relative; display: grid; grid-template-columns: 5rem minmax(0, 1fr); align-items: start; padding-block: clamp(18px, 3vh, 34px); border-bottom: 1px solid var(--on-ink-faint); transition: padding-left .5s var(--ease-out); }
.svc-row .n { display: inline-flex; gap: .6rem; align-items: center; font-size: var(--t-xs); letter-spacing: .18em; font-weight: 700; color: var(--on-ink-faint); padding-top: .6em; transition: color .4s; }
.svc-row .n i { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); opacity: .35; }
.svc-row .tz { position: relative; min-width: 0; }
.svc-row h3 { position: relative; font-family: var(--f-display); font-stretch: var(--fs-d, 84%); font-weight: 900; text-transform: uppercase; font-size: clamp(46px, 7.4vw, 124px); line-height: .92; transition: color .4s; }
.svc-row h3 .gh { position: absolute; left: 0; top: 0; color: transparent; -webkit-text-stroke: 1px rgba(241,236,227,.35); transform: translate(.35em, .14em); pointer-events: none; transition: opacity .4s, transform .6s var(--ease-out); }
.svc-row .items { height: 0; overflow: hidden; transition: height .6s var(--ease-out); }
.svc-row .items .mq-t { animation-play-state: paused; padding-top: 14px; }
.svc-row .items span { font-family: var(--f-serif); font-style: italic; font-size: var(--t-lg); padding-right: 2.2em; color: var(--on-ink-dim); }
.svc-row .items span::before { content: "✳"; font-style: normal; color: var(--cyan); margin-right: .8em; font-size: .7em; vertical-align: middle; }
.svc-row:hover, .svc-row:focus-within { padding-left: 1.2rem; }
.svc-row:hover .n, .svc-row:focus-within .n { color: var(--cyan); }
.svc-row:hover .n i { opacity: 1; animation: pulse 1s ease-in-out infinite; }
.svc-row:hover .items, .svc-row:focus-within .items { height: 3.4em; }
.svc-row:hover .items .mq-t { animation-play-state: running; }
.svc-list:hover .svc-row:not(:hover) h3 { color: rgba(241,236,227,.22); }
.svc-list:hover .svc-row:not(:hover) .gh { opacity: .1; }
.svc-row:hover h3 .gh { transform: translate(.18em, .08em); }
@keyframes pulse { 50% { transform: scale(1.6); opacity: .5 } }
@media (hover: none) { .svc-row .items { height: 3.4em; } .svc-row .items .mq-t { animation-play-state: running; } }

.credits { padding-block: clamp(100px, 16vh, 170px); text-align: center; }
.credits-vp { position: relative; height: clamp(340px, 52vh, 600px); overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 18% 82%, transparent); mask-image: linear-gradient(transparent, #000 18% 82%, transparent); margin-top: 6vh; }
.credits-track { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2vh, 18px); animation: roll 50s linear infinite; }
.credits-track span { font-family: var(--f-serif); font-size: clamp(24px, 2.6vw, 42px); line-height: 1.1; color: var(--on-paper-dim); transition: color .3s; }
.credits-track span:hover { color: var(--on-paper); }
@keyframes roll { to { transform: translateY(-50%); } }
.credits-vp:hover .credits-track { animation-play-state: paused; }
.credits .closer { font-family: var(--f-serif); font-style: italic; font-size: clamp(32px, 4.4vw, 64px); margin-top: 6vh; line-height: 1.1; }
.credits .closer mark { background: var(--cyan); color: var(--ink); padding: 0 .18em; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (prefers-reduced-motion: reduce) { .credits-track { animation: none; } }

.close-cta { position: relative; padding-block: clamp(120px, 22vh, 240px); overflow: hidden; }
.close-cta .reg-bg { position: absolute; right: -10vw; top: 50%; width: 60vw; height: 60vw; margin-top: -30vw; color: var(--on-ink-faint); opacity: .5; }
.close-cta h2 { position: relative; font-family: var(--f-display); font-stretch: var(--fs-d, 84%); font-weight: 900; text-transform: uppercase; font-size: var(--t-display); line-height: .84; }
.close-cta h2 em { font-family: var(--f-serif); font-weight: 400; text-transform: none; color: var(--cyan); display: block; }
.close-row { position: relative; display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; margin-top: clamp(36px, 6vh, 64px); }

/* ---------- footer ---------- */
.foot { padding-block: clamp(80px, 12vh, 120px) calc(28px + env(safe-area-inset-bottom, 0px)); }
.foot-top { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 6vw, 100px); align-items: end; }
.foot h2 { font-family: var(--f-serif); font-size: var(--t-2xl); line-height: 1; }
.foot h2 em { color: var(--cyan-ink); }
.foot .mail { font-family: var(--f-serif); font-size: clamp(22px, 2.6vw, 40px); overflow-wrap: anywhere; }
.foot-contact { display: grid; gap: 14px; justify-items: start; }
.foot-word { margin-top: clamp(50px, 10vh, 110px); }
.foot-word svg { width: 100%; height: auto; display: block; overflow: visible; }
.foot-word text { fill: transparent; stroke: var(--ink); stroke-width: 1.2px; stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.foot-word.on text { animation: draw 2.4s var(--ease-fill) forwards, fillin .9s var(--ease-fill) 1.6s forwards; }
@keyframes fillin { to { fill: var(--ink); } }
.foot-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; border-top: 1px solid var(--on-paper-faint); padding-top: 28px; margin-top: 28px; }
.foot-grid h4 { font-size: var(--t-micro); letter-spacing: .22em; text-transform: uppercase; color: var(--on-paper-dim); font-weight: 600; margin-bottom: 12px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--t-sm); }
.foot-grid a:hover { color: var(--cyan-ink); }
.foot-bot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 36px; font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--on-paper-dim); }
@media (max-width: 860px) { .foot-top { grid-template-columns: 1fr; } .foot-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- WORK ---------- */
.work-hero { padding-top: calc(130px + env(safe-area-inset-top, 0px)); padding-bottom: 26px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; }
.work-hero h1 { font-size: var(--t-display); }
.work-hero .hint { display: grid; gap: 6px; justify-items: end; text-align: right; font-family: var(--f-serif); font-style: italic; font-size: var(--t-lg); color: var(--on-ink-dim); }
.work-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--on-ink-faint); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid var(--on-ink-faint); border-radius: 999px; padding: 8px 16px; font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; font-weight: 700; transition: background .3s, color .3s, border-color .3s; }
.chip:hover { border-color: var(--paper); }
.chip[aria-pressed="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.drift { position: relative; height: 78svh; min-height: 480px; overflow: hidden; touch-action: none; user-select: none; cursor: grab; }
.drift.dragging { cursor: grabbing; }
.drift-plane { position: absolute; left: 0; top: 0; will-change: transform; }
.tile { position: absolute; display: block; overflow: hidden; border-radius: 3px; background: var(--ink-2); transition: opacity .5s, filter .5s; }
.tile .art { width: 100%; height: 100%; display: block; transition: transform 1s var(--ease-out); pointer-events: none; }
.tile:hover .art { transform: scale(1.05); }
.tile .tcap { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--paper); text-shadow: 0 1px 12px rgba(0,0,0,.6); opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .45s var(--ease-out); }
.tile:hover .tcap, .tile:focus-visible .tcap { opacity: 1; transform: none; }
.tile.dim { opacity: .14; filter: grayscale(1); }
.drift-vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 120px 40px var(--ink); }
.index-list { display: none; }
.view-index .drift { display: none; }
.view-index .index-list { display: block; }
.ix-row { display: grid; grid-template-columns: 4rem minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr) 3rem; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--on-ink-faint); transition: padding .5s var(--ease-out), color .3s; }
.ix-row .ixn { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--on-ink-faint); }
.ix-row .ixt { font-family: var(--f-display); font-stretch: var(--fs-d, 84%); font-weight: 800; text-transform: uppercase; font-size: clamp(28px, 3.4vw, 54px); line-height: .95; }
.ix-row .ixc, .ix-row .ixd { font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--on-ink-dim); font-weight: 600; }
.ix-row:hover { padding-left: 14px; }
.ix-row:hover .ixt { color: var(--cyan); }
.ix-row.dim { opacity: .25; }
@media (max-width: 860px) { .work-hero { grid-template-columns: 1fr; } .work-hero .hint { justify-items: start; text-align: left; } .ix-row { grid-template-columns: 3rem minmax(0,1fr) 2rem; } .ix-row .ixc, .ix-row .ixd { display: none; } }

.quick { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: var(--gutter); background: rgba(10,10,10,.72); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .4s; }
.quick.on { opacity: 1; pointer-events: auto; }
.quick-card { width: min(920px, 100%); background: var(--paper); color: var(--ink); display: grid; grid-template-columns: 1.3fr 1fr; transform: translateY(30px) scale(.98); transition: transform .6s var(--ease-out); max-height: 90svh; overflow: auto; }
.quick.on .quick-card { transform: none; }
.quick-card .qm { aspect-ratio: 4/3; min-width: 0; }
.quick-card .qm .art { width: 100%; height: 100%; display: block; }
.quick-card .qt { padding: 28px; display: grid; gap: 14px; align-content: start; }
.quick-card h3 { font-family: var(--f-display); font-stretch: var(--fs-d, 84%); font-weight: 900; text-transform: uppercase; font-size: var(--t-xl); line-height: .95; }
.quick-card .x { justify-self: end; font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; font-weight: 700; border: 1px solid currentColor; border-radius: 999px; padding: 6px 12px; }
@media (max-width: 700px) { .quick-card { grid-template-columns: 1fr; } }

/* ---------- CASE ---------- */
.case-hero { position: relative; background: var(--tint); padding-top: calc(130px + env(safe-area-inset-top, 0px)); overflow: hidden; }
.case-hero .ch-top { display: grid; gap: 22px; padding-bottom: clamp(36px, 6vh, 60px); }
.case-hero h1 { font-size: var(--t-display); }
.case-hero .lede { max-width: 26ch; font-size: var(--t-xl); line-height: 1.1; font-style: italic; }
.case-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; border-top: 1px solid var(--on-ink-faint); padding-top: 18px; }
.case-meta dt { font-size: var(--t-micro); letter-spacing: .22em; text-transform: uppercase; color: var(--on-ink-dim); font-weight: 600; margin-bottom: 6px; }
.case-meta dd { margin: 0; font-size: var(--t-sm); }
.case-media { position: relative; height: 82svh; overflow: hidden; clip-path: inset(0 var(--gutter) 0 var(--gutter)); }
.case-media .art { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; }
.case-q { padding-block: clamp(100px, 18vh, 200px); text-align: center; }
.case-q h2 { font-family: var(--f-serif); font-size: var(--t-2xl); line-height: 1.04; max-width: 20ch; margin-inline: auto; }
.case-q p { margin-top: 26px; font-family: var(--f-serif); font-style: italic; font-size: var(--t-lg); color: var(--cyan); }
.case-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(30px, 6vw, 110px); padding-block: clamp(60px, 10vh, 110px); border-top: 1px solid var(--on-ink-faint); }
.case-sec h3 { font-family: var(--f-display); font-stretch: var(--fs-d, 84%); font-weight: 900; text-transform: uppercase; font-size: var(--t-xl); line-height: .95; margin-top: 14px; }
.case-sec .body-serif + .body-serif { margin-top: 1em; }
.case-quote { position: relative; padding-block: clamp(80px, 14vh, 150px); text-align: center; }
.case-quote blockquote { margin: 0 auto; max-width: 22ch; font-family: var(--f-serif); font-style: italic; font-size: var(--t-2xl); line-height: 1.05; }
.case-quote .pq { font-family: var(--f-serif); font-size: clamp(120px, 20vw, 300px); line-height: .5; color: var(--cyan); display: block; height: .4em; }
.gal { position: relative; }
.gal-pin { height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr; padding-block: clamp(96px, 13vh, 130px) clamp(30px, 6vh, 60px); }
.gal-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.gal-track { display: flex; gap: clamp(16px, 2vw, 32px); align-items: center; padding-inline: var(--gutter); will-change: transform; }
.gal-item { flex: none; width: min(66vw, 980px); max-width: calc(100vw - 2 * var(--gutter)); display: grid; gap: 12px; }
.gal-item .gm { aspect-ratio: 3/2; overflow: hidden; border-radius: 3px; }
.gal-item .gm .art { width: 100%; height: 100%; display: block; }
.gal-item figcaption { display: flex; gap: 16px; font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--on-ink-dim); font-weight: 600; }
.gal-item figcaption b { color: var(--cyan); }
@media (max-width: 860px) { .gal-pin { height: auto; } .gal-track { overflow-x: auto; scroll-snap-type: x mandatory; padding-block: 30px; } .gal-item { width: 86vw; scroll-snap-align: center; } }
.deliv { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.deliv span { border: 1px solid var(--on-ink-faint); border-radius: 999px; padding: 8px 14px; font-size: var(--t-xs); }
.see-also { padding-block: clamp(80px, 12vh, 130px); }
.sa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 30px); margin-top: 30px; }
.sa-card { display: grid; gap: 14px; }
.sa-card .sm { aspect-ratio: 3/2; overflow: hidden; border-radius: 3px; }
.sa-card .sm .art { width: 100%; height: 100%; display: block; transition: transform 1s var(--ease-out); }
.sa-card:hover .sm .art { transform: scale(1.04); }
.sa-card .sr { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.sa-card h3 { font-family: var(--f-serif); font-style: italic; font-size: var(--t-xl); }
@media (max-width: 700px) { .sa-grid { grid-template-columns: 1fr; } .case-sec { grid-template-columns: 1fr; } .case-meta { grid-template-columns: 1fr; } }
.next-proj { display: block; position: relative; overflow: hidden; padding-block: clamp(80px, 14vh, 150px); border-top: 1px solid var(--on-ink-faint); }
.next-proj .np-bg { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); transition: clip-path .9s var(--ease-snap); }
.next-proj .np-bg .art { width: 100%; height: 100%; opacity: .55; }
.next-proj:hover .np-bg { clip-path: inset(0 0 0 0); }
.next-proj .np-in { position: relative; display: grid; gap: 10px; }
.next-proj .display { font-size: var(--t-display); transition: transform .8s var(--ease-out); }
.next-proj:hover .display { transform: translateX(2vw); }

/* ---------- SERVICES PAGE ---------- */
.page-hero { padding-top: calc(140px + env(safe-area-inset-top, 0px)); padding-bottom: clamp(60px, 10vh, 110px); }
.page-hero h1 { font-family: var(--f-display); font-stretch: var(--fs-d, 84%); font-weight: 900; text-transform: uppercase; font-size: var(--t-display); line-height: .86; margin-top: 18px; }
.page-hero h1 em { font-family: var(--f-serif); font-weight: 400; text-transform: none; color: var(--cyan); display: block; }
.paper .page-hero h1 em, .page-hero.paper h1 em { color: var(--cyan-ink); }
.toc { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 40px; font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }
.toc a { display: inline-flex; gap: 10px; }
.toc a b { color: var(--cyan); }
.terr { padding-block: clamp(80px, 14vh, 150px); border-top: 1px solid var(--on-ink-faint); }
.terr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 110px); }
.terr h2 { font-family: var(--f-display); font-stretch: var(--fs-d, 84%); font-weight: 900; text-transform: uppercase; font-size: var(--t-3xl); line-height: .88; }
.terr .tn { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--cyan); }
.terr .plain { font-size: var(--t-micro); letter-spacing: .22em; text-transform: uppercase; color: var(--on-ink-dim); font-weight: 600; margin-bottom: 14px; display: block; }
.terr .mq { margin-top: clamp(40px, 7vh, 70px); border-block: 1px solid var(--on-ink-faint); padding-block: 18px; }
.terr .mq span { font-family: var(--f-display); font-stretch: var(--fs-d, 84%); font-weight: 800; text-transform: uppercase; font-size: clamp(30px, 3.6vw, 58px); padding-right: .6em; }
.terr .mq span:nth-child(even) { font-family: var(--f-serif); font-weight: 400; font-style: italic; text-transform: none; color: var(--cyan); }
.terr-links { display: flex; flex-wrap: wrap; gap: 18px 40px; margin-top: 30px; }
.terr-art { margin-top: 30px; aspect-ratio: 3/2; overflow: hidden; border-radius: 3px; }
.terr-art .art { width: 100%; height: 100%; display: block; }
.process { padding-block: clamp(90px, 15vh, 160px); }
.process ol { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.process li { border-top: 2px solid var(--ink); padding-top: 18px; display: grid; gap: 12px; }
.process .pn { font-family: var(--f-mono); font-size: var(--t-xs); }
.process h3 { font-family: var(--f-display); font-stretch: var(--fs-d, 84%); font-weight: 900; text-transform: uppercase; font-size: var(--t-xl); line-height: .95; }
@media (max-width: 860px) { .terr-grid, .process ol { grid-template-columns: 1fr; } }

/* ---------- STUDIO ---------- */
.mantra { padding-block: 40px; border-block: 1px solid var(--on-ink-faint); }
.mantra .mq-t span { font-family: var(--f-display); font-stretch: var(--fs-d, 84%); font-weight: 800; text-transform: uppercase; font-size: clamp(36px, 5vw, 80px); padding-right: .5em; color: var(--on-ink-faint); }
.mantra .mq-t span s { text-decoration-thickness: .08em; text-decoration-color: var(--cyan); }
.mantra .mq-t span.x { color: var(--cyan); font-family: var(--f-serif); font-style: italic; font-weight: 400; text-transform: none; }
.manif-text { padding-block: clamp(90px, 16vh, 170px); }
.manif-text .big { font-family: var(--f-serif); font-size: var(--t-2xl); line-height: 1.06; max-width: 22ch; }
.manif-text .big .w { color: var(--on-ink-faint); }
.manif-text .big em { color: var(--cyan); }
.values { padding-block: clamp(80px, 14vh, 150px); }
.val-list { margin-top: 40px; display: grid; gap: 0; }
.val { display: grid; grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(16px, 3vw, 50px); padding-block: 28px; border-top: 1px solid var(--on-paper-faint); align-items: baseline; }
.val .vn { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--on-paper-dim); }
.val h3 { font-family: var(--f-display); font-stretch: var(--fs-d, 84%); font-weight: 900; text-transform: uppercase; font-size: var(--t-xl); line-height: .95; }
.val p { font-family: var(--f-serif); font-size: var(--t-lg); color: var(--on-paper-dim); max-width: 40ch; }
@media (max-width: 860px) { .val { grid-template-columns: 3rem 1fr; } .val p { grid-column: 2; } }
.founder { padding-block: clamp(90px, 15vh, 160px); }
.founder-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 110px); align-items: start; }
.founder .pf { aspect-ratio: 9/11; overflow: hidden; border-radius: 3px; }
.founder .pf .art { width: 100%; height: 100%; display: block; }
.founder h2 { font-family: var(--f-display); font-stretch: var(--fs-d, 84%); font-weight: 900; text-transform: uppercase; font-size: var(--t-3xl); line-height: .88; margin-block: 16px 22px; }
.tl { margin-top: 40px; border-top: 1px solid var(--on-ink-faint); }
.tl-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--on-ink-faint); font-size: var(--t-sm); align-items: baseline; }
.tl-row .ty { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--cyan); font-variant-numeric: tabular-nums; }
.tl-row .tr { color: var(--on-ink-dim); }
@media (max-width: 860px) { .founder-grid { grid-template-columns: 1fr; } .tl-row { grid-template-columns: 6rem 1fr; } .tl-row .tr { grid-column: 2; } }
.toolkit { padding-block: 26px; border-block: 1px solid var(--on-ink-faint); margin-top: 60px; }
.toolkit span { font-family: var(--f-serif); font-style: italic; font-size: var(--t-xl); padding-right: 1.4em; }
.toolkit span::before { content: "✳"; font-style: normal; color: var(--cyan); font-size: .5em; vertical-align: middle; margin-right: 1em; }

/* ---------- CONTACT ---------- */
.doors { padding-block: clamp(70px, 12vh, 130px); }
.doors h2 { font-family: var(--f-serif); font-size: var(--t-2xl); }
.door-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); margin-top: 40px; }
.door { position: relative; display: grid; gap: 14px; align-content: start; padding: clamp(22px, 2.4vw, 34px); border: 1px solid var(--on-ink-faint); border-radius: 4px; min-height: 340px; text-align: left; overflow: hidden; isolation: isolate; transition: border-color .4s, color .4s; }
.door::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper); transform: translateY(101%); transition: transform .7s var(--ease-fill); }
.door:hover::before, .door[aria-expanded="true"]::before { transform: none; }
.door:hover, .door[aria-expanded="true"] { color: var(--ink); border-color: var(--paper); }
.door .dn { font-family: var(--f-mono); font-size: var(--t-xs); }
.door .dk { font-size: var(--t-micro); letter-spacing: .22em; text-transform: uppercase; font-weight: 600; opacity: .7; }
.door h3 { font-family: var(--f-display); font-stretch: var(--fs-d, 84%); font-weight: 900; text-transform: uppercase; font-size: var(--t-xl); line-height: .95; }
.door p { font-family: var(--f-serif); font-size: var(--t-lg); line-height: 1.3; opacity: .8; }
.door .dgo { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; font-weight: 700; padding-top: 24px; }
.door .dgo svg { width: 18px; transition: transform .5s var(--ease-out); }
.door:hover .dgo svg { transform: translateX(4px); }
@media (max-width: 860px) { .door-grid { grid-template-columns: 1fr; } .door { min-height: 0; } }
.panel-form { display: none; margin-top: 30px; background: var(--paper); color: var(--ink); border-radius: 4px; padding: clamp(22px, 3vw, 48px); }
.panel-form.on { display: block; }
.step-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.step-bar { flex: 1; min-width: 120px; height: 2px; background: var(--on-paper-faint); position: relative; }
.step-bar b { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transition: transform .6s var(--ease-out); }
.step { display: none; }
.step.on { display: grid; gap: 22px; animation: stepin .6s var(--ease-out); }
@keyframes stepin { from { opacity: 0; transform: translateY(14px); } }
.step legend, .q-lab { font-family: var(--f-serif); font-size: var(--t-xl); line-height: 1.1; padding: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.opts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.opts label { position: relative; }
.opts input { position: absolute; opacity: 0; pointer-events: none; }
.opts span { display: inline-block; border: 1px solid var(--on-paper-faint); border-radius: 999px; padding: 10px 18px; font-size: var(--t-sm); transition: background .3s, color .3s, border-color .3s; }
.opts label:hover span { border-color: var(--ink); }
.opts input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.opts input:focus-visible + span { outline: 2px solid var(--cyan-ink); outline-offset: 2px; }
.field { display: grid; gap: 8px; }
.field label { font-size: var(--t-micro); letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--on-paper-dim); }
.field input, .field textarea { font-family: var(--f-serif); font-size: var(--t-lg); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--on-paper-faint); padding: 8px 0; outline: none; border-radius: 0; width: 100%; resize: vertical; caret-color: var(--cyan-ink); transition: border-color .3s; }
.field input:focus, .field textarea:focus { border-color: var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: var(--on-paper-faint); font-style: italic; }
.field .err { font-size: var(--t-xs); color: #B3261E; min-height: 1.2em; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 700px) { .two { grid-template-columns: 1fr; } }
.form-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.btn-solid { display: inline-flex; align-items: center; gap: 12px; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 14px 16px 14px 24px; font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; font-weight: 700; position: relative; overflow: hidden; isolation: isolate; transition: color .4s; }
.btn-solid::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cyan); transform: translateY(101%); transition: transform .55s var(--ease-cine); }
.btn-solid:hover { color: var(--ink); }
.btn-solid:hover::before { transform: none; }
.btn-solid svg { width: 18px; }
.btn-ghost { font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; font-weight: 700; padding: 10px 0; opacity: .7; }
.btn-ghost:hover { opacity: 1; }
.done { display: grid; gap: 18px; }
.done h3 { font-family: var(--f-display); font-stretch: var(--fs-d, 84%); font-weight: 900; text-transform: uppercase; font-size: var(--t-2xl); line-height: .9; }
.done pre { white-space: pre-wrap; font-family: var(--f-mono); font-size: var(--t-xs); background: var(--paper-2); padding: 18px; border-radius: 3px; max-height: 280px; overflow: auto; margin: 0; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 16px; }
.reach { padding-block: clamp(80px, 13vh, 140px); }
.reach-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(30px, 6vw, 100px); align-items: end; }
.reach h2 { font-family: var(--f-serif); font-size: var(--t-2xl); line-height: 1.02; }
.reach h2 em { color: var(--cyan-ink); }
.reach .mail { font-family: var(--f-serif); font-size: clamp(22px, 2.4vw, 36px); overflow-wrap: anywhere; }
.cities { margin-top: 60px; border-block: 1px solid var(--on-paper-faint); padding-block: 18px; }
.cities span { font-family: var(--f-serif); font-style: italic; font-size: clamp(28px, 3.4vw, 54px); padding-right: 1.2em; }
.cities span:nth-child(3n) { color: var(--cyan-ink); }
@media (max-width: 860px) { .reach-grid { grid-template-columns: 1fr; } }

/* 404 */
.nf { min-height: 100svh; display: grid; place-items: center; text-align: center; padding-inline: var(--gutter); }
.nf h1 { font-size: var(--t-display); }

/* ---------- mobile + static (reduced motion / no JS motion) fallbacks ---------- */
@media (max-width: 860px) {
  .mf-stage { height: auto; display: block; padding-block: 100px 80px; }
  .mf-beat { position: relative; inset: auto; padding-block: 36px; }
  .mf-beat .it { justify-self: start; text-align: left; }
  .mf-count { display: none; }
  .gal-pin { height: auto; }
}
.static .mf-stage { height: auto; display: block; padding-block: 120px; }
.static .mf-beat { position: relative; inset: auto; padding-block: 40px; }
.static .reel-screen { clip-path: inset(4% 4% 4% 4% round 6px); }
.static .reel-frame { width: 92%; height: 92%; }
.static .stack-pin { height: auto; }
.static .panel { position: relative; min-height: 100svh; }
.static .panel + .panel { clip-path: none; }
.static .shelf-pin { height: auto; }
.static .shelf-track-wrap { overflow-x: auto; padding-block: 40px 10px; }
.static .gal-pin { height: auto; }
.static .gal-track { overflow-x: auto; }
.static .hdr { opacity: 1; transform: none; }
.static .hdr a { pointer-events: auto; }


/* =====================================================================
   JOURNEY LAYER
   ===================================================================== */
.progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 1200; pointer-events: none; }
.progress b { display: block; height: 100%; background: var(--cyan); transform-origin: left; transform: scaleX(0); }
.skewy { transform: skewY(var(--skew, 0deg)); will-change: transform; }
.paper .chip { border-color: var(--on-paper-faint); }
.paper .chip:hover { border-color: var(--ink); }
.paper .chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.c-down .c-ring { width: 28px; height: 28px; }

/* hero: problem picker */
.hero2 { position: relative; min-height: 100svh; overflow: hidden; display: grid; align-items: center; padding-block: calc(120px + env(safe-area-inset-top, 0px)) 70px; }
.h2-in { position: relative; z-index: 2; }
.h2-title { font-family: var(--f-display); font-stretch: var(--fs-d, 84%); font-weight: 900; text-transform: uppercase; font-size: clamp(56px, 8.2vw, 150px); line-height: .86; letter-spacing: -.005em; margin-top: 22px; max-width: 11ch; }
.h2-title .wave { display: block; }
.h2-title .wd { display: inline-block; white-space: nowrap; }
.h2-title .ch { display: inline-block; transition: translate .35s var(--ease-out), color .3s; }
.h2-title em { display: block; font-family: var(--f-serif); font-weight: 400; text-transform: none; color: var(--cyan-ink); font-size: .9em; line-height: 1; }
.h2-sub { font-family: var(--f-serif); font-size: var(--t-lg); line-height: 1.35; max-width: 38ch; margin: 26px 0 30px; color: var(--on-paper-dim); }
.h2-sub b { font-weight: 400; font-style: italic; color: var(--ink); }
.picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pick { position: relative; display: grid; align-content: start; gap: 12px; text-align: left; padding: 18px 18px 16px; min-height: 196px; border: 1px solid var(--on-paper-faint); border-radius: 8px; background: rgba(250,248,244,.55); overflow: hidden; isolation: isolate; transition: color .45s, border-color .45s; }
.pick::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateY(101%); transition: transform .6s var(--ease-fill); }
.pick:hover::before, .pick[aria-pressed="true"]::before { transform: none; }
.pick:hover, .pick[aria-pressed="true"] { color: var(--paper); border-color: var(--ink); }
.pick[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--cyan); }
.pk-n { font-family: var(--f-mono); font-size: var(--t-micro); opacity: .7; }
.pk-ic { width: 42px; height: 42px; color: var(--cyan-ink); transition: color .4s; }
.pick:hover .pk-ic, .pick[aria-pressed="true"] .pk-ic { color: var(--cyan); }
.pk-ic svg { width: 100%; height: 100%; overflow: visible; }
.pk-ic .ic-move { transition: transform .6s var(--ease-out); transform-origin: center; transform-box: fill-box; }
.pick:hover .ic-move { transform: translate(2px, -2px) rotate(-8deg); }
.pk-t { font-family: var(--f-serif); font-size: clamp(20px, 1.6vw, 26px); line-height: 1.12; }
.pk-s { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; font-weight: 700; }
.pk-s svg { width: 16px; transition: transform .5s var(--ease-out); }
.pick:hover .pk-s svg { transform: translateX(5px); }
.picker-sm .pick { min-height: 130px; }
.ink .pick { border-color: var(--on-ink-faint); background: rgba(255,255,255,.02); }
.ink .pick::before { background: var(--paper); }
.ink .pick:hover, .ink .pick[aria-pressed="true"] { color: var(--ink); border-color: var(--paper); }
.ink .pk-ic { color: var(--cyan); }
.ink .pick:hover .pk-ic { color: var(--cyan-ink); }
.h2-skip { margin-top: 22px; font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--on-paper-dim); }
@media (max-width: 1000px) { .picker { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .picker { grid-template-columns: 1fr; } .pick { min-height: 0; grid-template-columns: auto 1fr; } .pk-ic { display: none; } .pk-t { grid-column: 1 / -1; } .pk-s { grid-column: 1 / -1; } }

.h2-layers { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fl { position: absolute; will-change: transform; }
.fl-search { top: 15%; right: 4%; width: 300px; background: var(--white); border-radius: 14px; padding: 12px 14px; box-shadow: 0 24px 50px -24px rgba(0,0,0,.35); display: grid; gap: 10px; font-size: 13px; color: var(--ink); }
.fs-bar { display: flex; align-items: center; gap: 10px; border: 1px solid var(--on-paper-faint); border-radius: 999px; padding: 6px 12px; }
.fs-bar svg { width: 18px; height: 18px; flex: none; }
.fs-q i { display: inline-block; width: 1.5px; height: 1em; background: var(--ink); vertical-align: -2px; margin-left: 2px; animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
.fs-r { display: grid; gap: 2px; padding-inline: 4px; } .fs-r b { color: #1a0dab; font-weight: 500; font-family: var(--f-serif); font-size: 18px; } .fs-r em { font-style: normal; color: #006621; font-size: 12px; }
.fl-pack { top: 34%; right: 5%; width: 120px; transform: rotate(8deg); }
.fl-chart { top: 56%; right: 22%; width: 200px; background: var(--ink); color: var(--paper); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; box-shadow: 0 24px 50px -24px rgba(0,0,0,.5); }
.fl-chart svg { color: var(--cyan); width: 100%; }
.fl-code { top: 11%; right: 31%; background: var(--ink); color: var(--paper); font-family: var(--f-mono); font-size: 12px; border-radius: 10px; padding: 12px 14px; display: grid; transform: rotate(-4deg); }
.fl-code b { color: var(--cyan); font-weight: 500; }
.fl-swatch { top: 31%; right: 33%; display: flex; gap: 6px; background: var(--white); padding: 8px; border-radius: 999px; box-shadow: 0 14px 30px -18px rgba(0,0,0,.4); }
.fl-swatch i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.1); }
.fl-post { top: 38%; right: 18%; width: 150px; aspect-ratio: 1; background: #13261B; color: #EEEAE0; border-radius: 6px; padding: 14px; display: grid; align-content: end; transform: rotate(-6deg); box-shadow: 0 24px 50px -24px rgba(0,0,0,.5); }
.fl-post b { font-family: var(--f-display); font-stretch: var(--fs-d, 84%); font-weight: 900; font-size: 30px; line-height: .9; }
.fl-post em { font-family: var(--f-serif); color: #D7A23C; font-size: 17px; }
.fl-reg { top: 64%; right: 4%; width: 54px; color: var(--on-paper-dim); }
@media (max-width: 1100px) { .fl-code, .fl-swatch, .fl-chart { display: none; } }
@media (max-width: 860px) { .h2-layers { display: none; } }

/* band */
.band { padding-block: 22px; border-block: 1px solid var(--on-ink-faint); overflow: hidden; }
.band span { font-family: var(--f-display); font-stretch: var(--fs-d, 84%); font-weight: 800; text-transform: uppercase; font-size: clamp(34px, 5vw, 82px); line-height: 1.05; padding-right: .3em; }
.band span.it { font-family: var(--f-serif); font-weight: 400; text-transform: none; color: var(--cyan); }
.band .star { color: var(--cyan); font-size: clamp(20px, 2vw, 34px); vertical-align: middle; padding-right: .5em; }

/* sound familiar */
.fam-pin { position: relative; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr; padding-top: clamp(96px, 13vh, 130px); }
.fam-head { display: grid; grid-template-columns: 1fr minmax(0, 34ch); gap: 30px; align-items: end; }
.fam-head h2 { font-family: var(--f-serif); font-size: var(--t-2xl); line-height: 1; }
.fam-head h2 em { color: var(--cyan); }
.fam-head p { font-family: var(--f-serif); font-size: var(--t-lg); color: var(--on-ink-dim); }
.fam-track { display: flex; gap: clamp(14px, 1.8vw, 26px); align-items: center; padding: 30px var(--gutter) 40px; will-change: transform; }
.pcard { position: relative; flex: none; width: min(420px, 82vw); min-height: min(520px, 62svh); background: var(--tint, var(--ink-2)); border: 1px solid var(--on-ink-faint); border-radius: 10px; padding: clamp(20px, 2vw, 28px); display: flex; flex-direction: column; gap: 16px; overflow: hidden; transition: border-color .4s, box-shadow .4s, transform .6s var(--ease-out); }
.pcard header { display: flex; justify-content: space-between; align-items: center; }
.pc-n { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--on-ink-dim); }
.pc-ic { width: 46px; height: 46px; color: var(--cyan); } .pc-ic svg { width: 100%; height: 100%; }
.pc-who { font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--on-ink-dim); }
.pcard h3 { font-family: var(--f-serif); font-size: var(--t-xl); line-height: 1.05; }
.pcard.hot { border-color: var(--cyan); }
.pcard.chosen { box-shadow: 0 0 0 2px var(--cyan), 0 30px 60px -30px rgba(229,50,42,.4); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tick { display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%; padding: 8px 6px; border-radius: 6px; font-size: var(--t-sm); line-height: 1.4; color: var(--on-ink-dim); transition: background .3s, color .3s; }
.tick:hover { background: rgba(255,255,255,.05); color: var(--paper); }
.tick svg { width: 22px; height: 22px; flex: none; margin-top: -1px; }
.tick rect { fill: none; stroke: var(--on-ink-faint); stroke-width: 1.5; transition: fill .3s, stroke .3s; }
.tick .ck { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .45s var(--ease-out) .05s; }
.tick[aria-pressed="true"] { color: var(--paper); }
.tick[aria-pressed="true"] rect { fill: var(--cyan); stroke: var(--cyan); }
.tick[aria-pressed="true"] .ck { stroke-dashoffset: 0; }
.paper .tick { color: var(--on-paper-dim); } .paper .tick rect { stroke: var(--on-paper-faint); }
.pc-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 10px; border-top: 1px solid var(--on-ink-faint); }
.pc-count { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--on-ink-dim); }
.pc-cta { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--on-ink-faint); border-radius: 999px; padding: 10px 16px; font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase; font-weight: 700; transition: background .35s, color .35s, border-color .35s; }
.pc-cta svg { width: 16px; }
.pc-cta:hover, .pc-cta[aria-pressed="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.pcard.hot .pc-cta:not([aria-pressed="true"]) { background: var(--cyan); color: var(--ink); border-color: var(--cyan); animation: nudge 1.6s var(--ease-out) infinite; }
@keyframes nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(229,50,42,.6) } 60% { box-shadow: 0 0 0 12px rgba(229,50,42,0) } }
.pcard-end { background: transparent; border-style: dashed; justify-content: center; }
.pcard-end p { font-family: var(--f-serif); font-size: var(--t-lg); color: var(--on-ink-dim); }
.glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.16), transparent 45%); opacity: 0; transition: opacity .4s; }
.tilt { transform-style: preserve-3d; transition: transform .7s var(--ease-out); }
.tilt.tilting { transition: transform .12s linear; }
.tilting .glare { opacity: 1; }
@media (max-width: 860px) {
  .fam-pin { height: auto; padding-bottom: 20px; }
  .fam-head { grid-template-columns: 1fr; }
  .fam-track { overflow-x: auto; scroll-snap-type: x mandatory; align-items: stretch; }
  .pcard { scroll-snap-align: center; min-height: 0; }
}

/* your path */
.path { padding-block: clamp(90px, 15vh, 160px); }
.path-empty { display: grid; gap: 26px; }
.path-empty h2 { font-family: var(--f-serif); font-size: var(--t-2xl); line-height: 1; }
.path-empty h2 em { color: var(--cyan-ink); }
.path-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.path-title { font-family: var(--f-display); font-stretch: var(--fs-d, 84%); font-weight: 900; text-transform: uppercase; font-size: var(--t-3xl); line-height: .88; margin-top: 16px; max-width: 14ch; }
.path-title em { font-family: var(--f-serif); font-weight: 400; text-transform: none; color: var(--cyan-ink); }
.path-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 100px); margin-top: clamp(40px, 7vh, 70px); }
.po-big { font-family: var(--f-serif); font-size: var(--t-xl); line-height: 1.12; margin: 10px 0 30px; }
.path-steps { list-style: none; margin: 0; padding: 0; }
.path-steps li { display: grid; grid-template-columns: 3rem 1fr; gap: 10px; padding: 16px 0; border-top: 1px solid var(--on-paper-faint); font-family: var(--f-serif); font-size: var(--t-lg); line-height: 1.3; }
.ps-n { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--cyan-ink); padding-top: .4em; }
.ink .ps-n { color: var(--cyan); }
.adds { display: grid; gap: 8px; margin-top: 12px; }
.add { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 14px; text-align: left; border: 1px solid var(--on-paper-faint); border-radius: 999px; padding: 6px 18px 6px 6px; font-size: var(--t-sm); transition: background .35s, color .35s, border-color .35s; }
.add-ic { width: 38px; height: 38px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; transition: transform .5s var(--ease-out), background .35s, border-color .35s, color .35s; }
.add-ic svg { width: 16px; }
.add-ic .pl-v { transition: transform .4s var(--ease-out); transform-origin: center; transform-box: fill-box; }
.add-s { font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase; font-weight: 700; opacity: .65; }
.add:hover { border-color: currentColor; }
.add:hover .add-ic { transform: rotate(90deg); }
.add[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.add[aria-pressed="true"] .add-ic { background: var(--cyan); border-color: var(--cyan); color: var(--ink); transform: none; }
.add[aria-pressed="true"] .pl-v { transform: scaleY(0); }
.add[aria-pressed="true"] .add-s { opacity: 1; color: var(--cyan); }
.ink .add { border-color: var(--on-ink-faint); }
.ink .add[aria-pressed="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.ink .add[aria-pressed="true"] .add-s { color: var(--cyan-ink); }
.add.sm { padding: 4px 14px 4px 4px; font-size: var(--t-xs); grid-template-columns: 30px minmax(0, 1fr) auto; }
.add.sm .add-ic { width: 30px; height: 30px; }
.path-cases { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.pcase { position: relative; display: block; border-radius: 6px; overflow: hidden; }
.pcm { display: block; aspect-ratio: 3/2; }
.pcm .art { width: 100%; height: 100%; display: block; transition: transform 1s var(--ease-out); }
.pcase:hover .pcm .art { transform: scale(1.06); }
.pct { position: absolute; left: 12px; bottom: 10px; right: 12px; font-family: var(--f-serif); font-style: italic; font-size: var(--t-lg); color: var(--paper); text-shadow: 0 2px 16px rgba(0,0,0,.7); display: grid; }
.pct em { font-family: var(--f-display); font-style: normal; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; opacity: .85; }
.path-cta { display: flex; flex-wrap: wrap; gap: 18px 36px; align-items: center; margin-top: clamp(36px, 6vh, 60px); }
@media (max-width: 860px) { .path-grid { grid-template-columns: 1fr; } }

/* before / after */
.ba-sec { padding-block: clamp(100px, 16vh, 170px); }
.ba-head { display: grid; grid-template-columns: 1fr minmax(0, 34ch); gap: 30px; align-items: end; }
.ba-head h2 { font-family: var(--f-serif); font-size: var(--t-2xl); line-height: 1; }
.ba-head h2 em { color: var(--cyan); }
.ba-head p { font-family: var(--f-serif); font-size: var(--t-lg); color: var(--on-ink-dim); }
.ba-tabs { margin: 34px 0 18px; }
.ba { --ba: 50%; position: relative; width: 100%; aspect-ratio: 16/10; max-height: 82svh; overflow: hidden; border-radius: 8px; user-select: none; touch-action: pan-y; background: var(--ink-2); }
.ba-before, .ba-after { position: absolute; inset: 0; }
.ba-before .art, .ba-after .art { width: 100%; height: 100%; display: block; }
.ba-after { clip-path: inset(0 0 0 var(--ba)); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--ba); width: 2px; margin-left: -1px; background: var(--paper); box-shadow: 0 0 20px rgba(0,0,0,.4); }
.ba-knob { position: absolute; top: 50%; left: 50%; width: 66px; height: 66px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--paper); color: var(--ink); display: flex; align-items: center; justify-content: center; gap: 0; box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .35s var(--ease-out); }
.ba-knob svg { width: 18px; }
.ba:hover .ba-knob { transform: translate(-50%, -50%) scale(1.08); }
.ba.dragging .ba-knob { transform: translate(-50%, -50%) scale(.9); }
.ba-tag { position: absolute; top: 16px; padding: 6px 12px; border-radius: 999px; background: rgba(17,17,17,.72); color: var(--paper); font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; font-weight: 700; pointer-events: none; }
.ba-tag.l { left: 16px; } .ba-tag.r { right: 16px; background: var(--cyan); color: var(--ink); }
.ba-notes { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ba-notes li { border-top: 1px solid var(--on-ink-faint); padding-top: 12px; font-family: var(--f-serif); font-size: var(--t-lg); line-height: 1.25; }
.ba-notes span { display: block; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--cyan); margin-bottom: 6px; }
@media (max-width: 860px) { .ba-head { grid-template-columns: 1fr; } .ba { aspect-ratio: 4/3; } .ba-notes { grid-template-columns: 1fr; } }

/* journey */
.jr-pin { position: relative; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr; padding-top: clamp(96px, 13vh, 130px); }
.jr-head h2 { font-family: var(--f-serif); font-size: var(--t-2xl); line-height: 1; }
.jr-head h2 em { color: var(--cyan); }
.jr-track { position: relative; display: flex; gap: 48px; align-items: flex-start; padding: 170px var(--gutter) 40px 200px; will-change: transform; width: max-content; }
.jr-path { position: absolute; left: 0; top: 20px; height: 120px; overflow: visible; }
.jr-ghost { fill: none; stroke: var(--on-ink-faint); stroke-width: 1.5; stroke-dasharray: 3 7; }
.jr-line { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; }
.jr-dot { position: absolute; left: 0; top: 20px; display: flex; align-items: center; gap: 10px; margin: -9px 0 0 -9px; font-size: var(--t-micro); letter-spacing: .24em; text-transform: uppercase; font-weight: 700; color: var(--cyan); will-change: transform; }
.jr-dot i { width: 18px; height: 18px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 rgba(229,50,42,.6); animation: nudge 1.4s ease-out infinite; }
.jr-card { flex: none; width: 330px; border: 1px solid var(--on-ink-faint); border-radius: 10px; padding: 24px; display: grid; gap: 12px; opacity: .3; transform: translateY(24px); transition: opacity .6s, transform .7s var(--ease-out), border-color .5s, background .5s; }
.jr-card.on { opacity: 1; transform: none; border-color: rgba(229,50,42,.7); background: rgba(229,50,42,.05); }
.jr-n { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--cyan); }
.jr-card h3 { font-family: var(--f-display); font-stretch: var(--fs-d, 84%); font-weight: 900; text-transform: uppercase; font-size: var(--t-xl); line-height: .95; }
.jr-card p { font-family: var(--f-serif); font-size: var(--t-lg); line-height: 1.3; color: var(--on-ink-dim); }
.jr-card .jr-get { border-top: 1px solid var(--on-ink-faint); padding-top: 12px; font-family: var(--f-display); font-size: var(--t-sm); color: var(--paper); }
.jr-get span { display: block; font-size: var(--t-micro); letter-spacing: .22em; text-transform: uppercase; color: var(--cyan); font-weight: 700; margin-bottom: 4px; }
@media (max-width: 860px) {
  .jr-pin { height: auto; padding-bottom: 60px; }
  .jr-track { flex-direction: column; width: auto; padding: 40px var(--gutter) 0; gap: 16px; }
  .jr-card { width: auto; }
}
.static .jr-pin, .static .fam-pin { height: auto; }
.static .jr-track { flex-direction: column; width: auto; padding: 40px var(--gutter) 0; }
.static .jr-card { opacity: 1; transform: none; width: auto; }
.static .jr-path, .static .jr-dot { display: none; }
.static .fam-track { overflow-x: auto; }

/* health check teaser + page */
.tease { padding-block: clamp(100px, 16vh, 170px); }
.tease-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 100px); align-items: center; }
.tease h2 { font-family: var(--f-serif); font-size: var(--t-2xl); line-height: 1; }
.tease h2 em { color: var(--cyan-ink); }
.tease-card { background: var(--white); color: var(--ink); border: 2px solid var(--ink); border-radius: 8px; padding: clamp(22px, 3vw, 36px); transform: rotate(-1.2deg); box-shadow: 0 40px 80px -40px rgba(0,0,0,.35); }
.tq { font-family: var(--f-serif); font-size: var(--t-xl); line-height: 1.1; margin: 12px 0 22px; }
.tq-opts { display: grid; gap: 10px; }
.opt { display: flex; align-items: center; gap: 14px; text-align: left; border: 1px solid var(--on-paper-faint); border-radius: 999px; padding: 8px 18px 8px 8px; font-size: var(--t-sm); transition: background .3s, color .3s, border-color .3s; }
.ol { width: 30px; height: 30px; flex: none; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; font-family: var(--f-mono); font-size: 12px; transition: background .3s, color .3s; }
.opt:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.opt.picked { background: var(--cyan); color: var(--ink); border-color: var(--cyan); }
.opt.picked .ol { background: var(--ink); color: var(--cyan); border-color: var(--ink); }
.ink .opt { border-color: var(--on-ink-faint); }
.ink .opt:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.tq-opts.big .opt { font-family: var(--f-serif); font-size: var(--t-lg); padding: 12px 22px 12px 12px; }
.tq-opts.big .ol { width: 40px; height: 40px; font-size: 13px; }
@media (max-width: 860px) { .tease-grid { grid-template-columns: 1fr; } .tease-card { transform: none; } }

.chk { padding-top: calc(130px + env(safe-area-inset-top, 0px)); padding-bottom: clamp(80px, 14vh, 140px); }
.chk h1 { font-family: var(--f-display); font-stretch: var(--fs-d, 84%); font-weight: 900; text-transform: uppercase; font-size: var(--t-3xl); line-height: .88; margin-top: 16px; }
.chk h1 em { font-family: var(--f-serif); font-weight: 400; text-transform: none; color: var(--cyan); display: block; }
.chk-head { margin-bottom: clamp(30px, 6vh, 56px); }
.chk-box { border: 1px solid var(--on-ink-faint); border-radius: 10px; padding: clamp(22px, 4vw, 56px); }
.chk-top { display: flex; align-items: center; gap: 18px; }
.chk-n b { color: var(--paper); }
.chk-axis { color: var(--cyan); }
.chk-ring { width: 44px; height: 44px; margin-left: auto; transform: rotate(-90deg); }
.chk-ring circle { fill: none; stroke: var(--on-ink-faint); stroke-width: 3; }
.chk-ring .cr { stroke: var(--cyan); stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .6s var(--ease-out); stroke-linecap: round; }
.cq { font-family: var(--f-serif); font-size: var(--t-2xl); line-height: 1.05; margin: clamp(22px, 4vh, 40px) 0; max-width: 22ch; }
.chk-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 30px; flex-wrap: wrap; }
.chk .btn-ghost { color: var(--paper); }
.res-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 90px); align-items: center; }
.radar { width: 100%; max-width: 480px; height: auto; display: block; overflow: visible; }
.rd-grid { fill: none; stroke: var(--on-ink-faint); stroke-width: 1; }
.rd-poly { fill: rgba(229,50,42,.18); stroke: var(--cyan); stroke-width: 2.5; stroke-linejoin: round; }
.rd-pt { fill: var(--cyan); }
.rd-lab { fill: var(--on-ink-dim); font-family: var(--f-display); font-size: 11px; letter-spacing: .2em; font-weight: 700; }
.res-h { font-family: var(--f-display); font-stretch: var(--fs-d, 84%); font-weight: 900; text-transform: uppercase; font-size: var(--t-2xl); line-height: .9; margin-top: 16px; }
.res-h em { font-family: var(--f-serif); font-weight: 400; text-transform: none; color: var(--cyan); }
.res-bars { display: grid; gap: 12px; margin-top: 26px; }
.rb { display: grid; grid-template-columns: 6rem minmax(0, 1fr) 2.6rem 7rem; gap: 14px; align-items: center; font-size: var(--t-sm); }
.rb-t { height: 6px; border-radius: 3px; background: var(--on-ink-faint); overflow: hidden; }
.rb-t b { display: block; height: 100%; width: var(--v); background: var(--cyan); border-radius: 3px; }
.rb-v { font-family: var(--f-mono); text-align: right; font-variant-numeric: tabular-nums; }
.rb-x { font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--on-ink-dim); font-weight: 600; }
@media (max-width: 860px) { .res-grid { grid-template-columns: 1fr; } .rb { grid-template-columns: 5rem minmax(0, 1fr) 2.4rem; } .rb-x { display: none; } }

/* solutions tracks */
.track { padding-block: clamp(90px, 15vh, 160px); border-top: 1px solid var(--on-ink-faint); background: linear-gradient(180deg, var(--tint) 0%, var(--ink) 75%); }
.track-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 100px); align-items: start; }
.track h2 { font-family: var(--f-display); font-stretch: var(--fs-d, 84%); font-weight: 900; text-transform: uppercase; font-size: var(--t-3xl); line-height: .88; margin-top: 14px; }
.track .tn { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--cyan); }
.track-ticks { background: rgba(0,0,0,.28); border: 1px solid var(--on-ink-faint); border-radius: 10px; padding: clamp(18px, 2vw, 26px); display: grid; gap: 10px; }
.tk-verdict { font-family: var(--f-serif); font-style: italic; font-size: var(--t-lg); min-height: 1.4em; color: var(--cyan) !important; }
.track-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); margin-top: clamp(50px, 9vh, 90px); }
.tstep { border-top: 2px solid var(--on-ink-faint); padding-top: 16px; display: grid; gap: 10px; }
.tstep p { font-family: var(--f-serif); font-size: var(--t-lg); line-height: 1.3; }
.track-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); margin-top: clamp(40px, 7vh, 70px); }
@media (max-width: 860px) { .track-head, .track-steps, .track-foot { grid-template-columns: 1fr; } }
.svc-row { cursor: default; }

/* plan dock, drawer, toast, fly */
.dock { position: fixed; z-index: 1150; left: var(--gutter); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 999px; background: var(--paper); color: var(--ink); box-shadow: 0 18px 40px -16px rgba(0,0,0,.55); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.dk-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); animation: nudge 1.8s ease-out infinite; }
.dk-c { min-width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-family: var(--f-mono); letter-spacing: 0; }
.dock.bump { animation: bump .6s var(--ease-out); }
@keyframes bump { 30% { transform: scale(1.12) } 60% { transform: scale(.96) } 100% { transform: scale(1) } }
.drawer { position: fixed; z-index: 1160; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: var(--paper); color: var(--ink); overflow-y: auto; padding: calc(24px + env(safe-area-inset-top, 0px)) 28px calc(40px + env(safe-area-inset-bottom, 0px)); transform: translateX(102%); transition: transform .7s var(--ease-snap), box-shadow .7s; box-shadow: 0 0 0 100vmax rgba(10,10,10,0); visibility: hidden; }
.drawer-open .drawer { transform: none; box-shadow: 0 0 0 100vmax rgba(10,10,10,.55); visibility: visible; }
.drawer .kicker::before, .drawer .kicker::after { color: var(--cyan-ink); }
.drawer .chip { border-color: var(--on-paper-faint); }
.drawer .chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.drawer .tick, .drawer .add { color: var(--ink); }
.dr-head { display: flex; justify-content: space-between; align-items: center; }
.drawer .x { font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; font-weight: 700; border: 1px solid currentColor; border-radius: 999px; padding: 6px 12px; }
.dr-lab { font-size: var(--t-micro); letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--on-paper-dim); margin: 26px 0 10px; }
.dr-out { font-family: var(--f-serif); font-size: var(--t-lg); line-height: 1.3; margin-top: 14px; }
.dr-out.dim { color: var(--on-paper-dim); }
.dr-scores { display: flex; gap: 18px; flex-wrap: wrap; font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.dr-scores span { display: grid; } .dr-scores b { font-family: var(--f-display); font-stretch: var(--fs-d, 84%); font-weight: 900; font-size: 34px; letter-spacing: 0; }
.dr-list { list-style: none; margin: 0; padding: 0; }
.dr-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--on-paper-faint); font-size: var(--t-sm); }
.dr-rm { font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; opacity: .65; }
.dr-rm:hover { opacity: 1; color: #B3261E; }
.dr-empty { font-family: var(--f-serif); font-size: var(--t-lg); }
.dr-group { display: grid; gap: 6px; margin-bottom: 16px; }
.dr-g { font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--on-paper-dim); font-weight: 600; }
.dr-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 30px; }
.drawer .pill { border-color: rgba(17,17,17,.25); }
.fly { position: fixed; left: 0; top: 0; z-index: 1300; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px rgba(229,50,42,.25); pointer-events: none; }
.toast { position: fixed; z-index: 1300; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0; background: var(--ink); color: var(--paper); border: 1px solid var(--on-ink-faint); padding: 12px 18px; border-radius: 999px; font-size: var(--t-sm); pointer-events: none; transition: opacity .35s, transform .5s var(--ease-out); max-width: calc(100% - 32px); text-align: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 700px) { .toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
.ct-plan { margin-top: 30px; border: 1px solid var(--on-ink-faint); border-radius: 8px; padding: 18px 20px; max-width: 640px; }
.ct-plan pre { white-space: pre-wrap; font-family: var(--f-mono); font-size: var(--t-xs); margin: 10px 0; color: var(--on-ink-dim); }
.ct-plan .btn-ghost { color: var(--cyan); }
.foot-grid a[data-track] { cursor: pointer; }

[hidden] { display: none !important; }

/* =====================================================================
   PREMIUM LAYER — espresso, ivory, brushed brass
   ===================================================================== */
:root {
  --gold: linear-gradient(100deg, #E5322A 0%, #E5322A 38%, #E5322A 70%, #E5322A 100%);
  --gold-ink: linear-gradient(100deg, #B3170F 0%, #B3170F 55%, #B3170F 100%);
}
::selection { background: #E5322A; color: #111111; }
.grain { opacity: .045; }

/* calmer, more refined display weight */
.hero-word, .h2-title, .path-title, .page-hero h1, .chk h1, .track h2, .res-h, .close-cta h2, .menu .mt,
.svc-row h3, .terr h2, .founder h2, .jr-card h3, .display, .ixt, .band span, .wall-row a, .shelf-head h2,
.reel-head .t, .reel-head .k, .lc-h, .door h3, .process h3, .val h3, .case-sec h3, .done h3, .quick-card h3,
.logo b, .fl-post b, .work-hero h1, .case-hero h1 { font-weight: 640; letter-spacing: .004em; }
.h2-title { font-weight: 620; }

/* brushed-brass type on dark, deep brass on ivory */
.ink :is(h1, h2, h3, p, blockquote) em, .ink .accent, .band span.it, .menu .it.accent, .hero-cap .accent, .reel-head em, .mf-beat .it, .credits .closer mark {
  background: var(--gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #E5322A;
}
.credits .closer mark { -webkit-text-fill-color: #111111; background: var(--gold); -webkit-background-clip: border-box; background-clip: border-box; }
.paper :is(h1, h2) em, .h2-title em, .path-title em, .tease h2 em, .foot h2 em, .reach h2 em, .facts h2 em {
  background: var(--gold-ink); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.kicker::before, .kicker::after { color: #E5322A; }
.paper .kicker::before, .paper .kicker::after { color: #B3170F; }

/* metallic fills on actions */
.pill .pf, .btn-solid::before, .arrow-btn[data-tone="accent"] .circ::before { background: var(--gold); }
.progress b { background: var(--gold); }
.dk-dot, .jr-dot i, .fly { background: var(--gold); }
.tick[aria-pressed="true"] rect { fill: #E5322A; }
.pill { border-color: rgba(229, 50, 42, .45); }
.paper .pill { border-color: rgba(138, 106, 51, .4); }
.burger { border-color: rgba(255, 255, 255, .35); }

/* hero light and arch photo */
.hero2 { background: radial-gradient(90% 70% at 85% 25%, #E2D7C2 0%, #D9CDB6 55%, #D2C5AB 100%); }
.h2-photo { position: absolute; right: 5%; top: 13%; width: min(29vw, 430px); height: min(68%, 640px); margin: 0; border-radius: 999px 999px 10px 10px; box-shadow: 0 70px 120px -60px rgba(17, 17, 17, .7); }
.h2-photo::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(241, 236, 227, .5); border-radius: 999px 999px 4px 4px; z-index: 2; pointer-events: none; }
.fl-search { top: 20%; right: calc(5% + min(29vw, 430px) - 110px); }
.fl-code { top: 9%; right: 2.5%; }
.fl-post { top: 50%; right: calc(5% + min(29vw, 430px) - 90px); width: 140px; }
.fl-chart { top: auto; bottom: 14%; right: 2%; }
.fl-swatch { top: 42%; right: 1.5%; flex-direction: column; border-radius: 999px; }
@media (max-width: 1100px) { .h2-photo { width: 34vw; } }

/* photography */
.ph { position: relative; overflow: hidden; margin: 0; border-radius: 6px; background: var(--ink-2); }
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.05) sepia(.07); will-change: transform; }
.pc-ph { height: 150px; flex: none; }
.pc-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, var(--tint, #111111)); opacity: .55; }
.track-ph { aspect-ratio: 21 / 8; margin-top: clamp(40px, 7vh, 70px); }
.track-ph img, .pb-ph img, .reach-ph img { height: 116%; margin-top: -8%; }
.jr-ph { height: 130px; margin: -8px -8px 6px; border-radius: 6px; filter: grayscale(.4); transition: filter .6s; }
.jr-card.on .jr-ph { filter: none; }
.photo-band { padding-block: 0 clamp(60px, 10vh, 100px); }
.pb-ph { height: 72svh; border-radius: 0; }
.pb-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; padding-top: 22px; }
.pb-cap p { font-family: var(--f-serif); font-size: var(--t-lg); color: var(--on-ink-dim); max-width: 40ch; }
.reach-ph { aspect-ratio: 16 / 5; margin-top: clamp(40px, 7vh, 70px); }
.tease-visual { position: relative; padding: 40px 0 40px 40px; }
.tease-ph { position: absolute; inset: 0 0 0 0; border-radius: 8px; }
.tease-ph img { filter: saturate(.6) sepia(.12) brightness(.92); }
.tease-visual .tease-card { position: relative; z-index: 1; width: min(100%, 480px); margin-left: auto; margin-right: 40px; }
@media (max-width: 860px) { .tease-visual { padding: 0; } .tease-ph { display: none; } .tease-visual .tease-card { margin: 0; } .track-ph { aspect-ratio: 16 / 9; } .reach-ph { aspect-ratio: 4 / 3; } .pb-ph { height: 50svh; } }
.cc-bg { position: absolute; inset: 0; opacity: .3; pointer-events: none; }
.cc-bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.cc-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 15%, rgba(17, 17, 17, .4) 70%, var(--ink)); }
.close-cta .wrap { position: relative; z-index: 1; }
.intro-grid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) sepia(.08); }

/* finer surfaces */
.pcard, .jr-card, .door, .chk-box, .track-ticks { border-color: rgba(229, 50, 42, .22); }
.pcard.hot, .jr-card.on { border-color: rgba(229, 50, 42, .8); }
.jr-card.on { background: rgba(229, 50, 42, .06); }
.pick[aria-pressed="true"] { box-shadow: 0 0 0 1.5px #E5322A; }
.label-card { background: #F1ECE3; }

.ph.h2-photo { position: absolute; }
.h2-photo { top: 12%; height: min(50%, 470px); }
.fl-chart { top: 47%; bottom: auto; right: 1.5%; }
.fl-swatch { display: none; }
.hero2 .pick { background: rgba(248, 244, 238, .9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* =====================================================================
   POSTER LAYER — kraft, poster red, signal yellow, riso blue, ink
   Screen-printed collage: grain, halftone, heavy grotesk, didone, marker.
   ===================================================================== */
:root {
  --ink: #111111; --paper: #D9CDB6; --bone: #F1ECE3; --red: #E5322A; --red-ink: #B3170F; --yellow: #FFC629; --blue: #2C6FA3;
  --f-serif: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-didone: "Gloock", "Bodoni 72", Didot, Georgia, serif;
  --f-hand: "Permanent Marker", "Marker Felt", "Comic Sans MS", cursive;
  --f-mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;
  --fs-d: 84%;
  --t-display: clamp(50px, 8.6vw, 160px);
  --t-3xl: clamp(40px, 5.8vw, 100px);
  --t-2xl: clamp(34px, 4.3vw, 70px);
  --gold: linear-gradient(#E5322A, #E5322A); --gold-ink: linear-gradient(#B3170F, #B3170F);
}
::selection { background: var(--red); color: var(--bone); }
em, .it { font-style: normal; }
.grain { opacity: .06; }
.paper { background-color: var(--paper); background-image: url("img/t-grain-dark.png"); }
.paper.bone, .bone { background-color: var(--bone); }
.ink { background-color: var(--ink); background-image: url("img/t-grain-light.png"); }
.red-sec { background-color: var(--red); background-image: url("img/t-grain-dark.png"); color: var(--bone); }
.yel-sec { background-color: var(--yellow); background-image: url("img/t-grain-dark.png"); color: var(--ink); }
.ink.blue-sec, .blue-sec { background-color: var(--blue); background-image: url("img/t-grain-light.png"); }
.poster, .think, .reveal, .jr, .tv-sec, .hand-sec, .wall { position: relative; }
.poster::after, .think::after, .jr::after, .tv-sec::after, .wall::after, .pick-sec::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: url("img/t-distress.png") 0 0 / 820px auto; mix-blend-mode: multiply; opacity: .28;
}
.pick-sec { position: relative; }

/* type: heavy grotesk display, thin+bold headlines, mono labels */
.hero-word, .path-title, .page-hero h1, .chk h1, .track h2, .res-h, .close-cta h2, .menu .mt, .svc-row h3, .terr h2,
.founder h2, .jr-card h3, .display, .ixt, .band span, .wall-row a, .shelf-head h2, .lc-h, .door h3, .process h3, .val h3,
.case-sec h3, .done h3, .quick-card h3, .logo b, .work-hero h1, .case-hero h1, .next-proj .display { font-weight: 900; letter-spacing: -.025em; }
:is(.fam-head, .ba-head, .tease, .pos, .path-empty, .facts, .foot, .reach, .svc-head, .doors, .wall, .case-q, .values, .process, .pick-head, .see-also, .chk-res) h2,
.cq, .q-title, .manif-text .big, .po-big, .case-quote blockquote { font-weight: 300; letter-spacing: -.03em; line-height: .98; }
h1 em, h2 em, h3 em, .cq em, .po-big em, blockquote em { font-family: var(--f-display); font-weight: 900; letter-spacing: -.03em; }
.page-hero h1 em, .chk h1 em, .close-cta h2 em, .path-title em, .res-h em { font-stretch: var(--fs-d); text-transform: uppercase; }
.paper :is(h1, h2) em, .h2-title em, .path-title em, .tease h2 em, .foot h2 em, .reach h2 em, .facts h2 em { background: none; -webkit-text-fill-color: currentColor; color: var(--red); }
.ink :is(h1, h2, h3, p, blockquote) em, .ink .accent { background: none; -webkit-text-fill-color: currentColor; color: var(--red); }
.body-serif { font-size: clamp(17px, 1.25vw, 20px); line-height: 1.55; font-weight: 400; }
.lede { font-weight: 300; letter-spacing: -.01em; }
.kicker { font-family: var(--f-mono); letter-spacing: .16em; font-weight: 700; }
.kicker::before, .kicker::after { font-family: var(--f-display); font-style: normal; font-size: 1.3em; color: var(--red) !important; }
.label { letter-spacing: .24em; }

/* actions */
.pill { border-color: rgba(17,17,17,.35); }
.ink .pill, .red-sec .pill { border-color: rgba(241,236,227,.45); }
.pill .pf { background: var(--red); }
.pill:hover .pl { color: var(--bone); }
.pill .pd svg { color: var(--bone); }
.btn-solid::before { background: var(--red); } .btn-solid:hover { color: var(--bone); }
.progress b, .dk-dot, .fly, .jr-dot i { background: var(--red); }
.dock { background: var(--bone); color: var(--ink); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.tick .ck { stroke: var(--bone); }
.tick[aria-pressed="true"] rect { fill: var(--red); stroke: var(--red); }
.add[aria-pressed="true"] .add-ic { background: var(--red); border-color: var(--red); color: var(--bone); }
.add[aria-pressed="true"] .add-s { color: var(--red); }
.curtain { background: var(--red); }
.ph img[src*="/p-"] { filter: none; }
.starburst { color: var(--ink); }

/* ---------- poster hero ---------- */
.poster { min-height: 100svh; padding: calc(84px + env(safe-area-inset-top, 0px)) var(--gutter) 26px; overflow: hidden; }
.pst { position: relative; height: calc(100svh - 110px); min-height: 600px; max-width: 1560px; margin: 0 auto; }
.pst-top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; gap: 12px; font-size: 11px; letter-spacing: .16em; z-index: 6; }
.pst-title { position: absolute; left: -.4%; top: 3.5%; z-index: 3; margin: 0; font-family: var(--f-display); font-stretch: 100%; font-weight: 900; text-transform: uppercase; color: var(--red); font-size: clamp(64px, 13.2vw, 232px); line-height: .8; letter-spacing: -.05em; mix-blend-mode: multiply; max-width: none; }
.pst-title .l1, .pst-title .l2 { display: block; will-change: transform; }
.pst-sky { position: absolute; left: 3.5%; right: 3.5%; top: 31%; bottom: 14%; border-radius: 0; z-index: 1; background: #2B65A0; }
.pst-sky img { width: 100%; height: 118%; object-fit: cover; margin-top: -9%; }
.pst-red { position: absolute; left: calc(3.5% + 22px); top: 40%; z-index: 4; margin: 0; color: var(--red); font: 800 clamp(16px, 1.55vw, 26px)/1.04 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; }
.pst-fly { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.pst-fly > div { position: absolute; will-change: transform; }
.fly-a { left: 37%; top: 21%; width: clamp(190px, 21vw, 360px); rotate: -14deg; filter: drop-shadow(0 50px 40px rgba(0,0,0,.35)); }
.fly-a .sku-art { width: 100%; height: auto; display: block; }
.fly-b { right: 11%; top: 46%; width: clamp(140px, 13vw, 220px); aspect-ratio: 1; rotate: 10deg; }
.fb-in { position: absolute; inset: 0; display: grid; align-content: end; padding: 16px; background: var(--ink); color: var(--bone); box-shadow: 0 40px 50px -20px rgba(0,0,0,.45); }
.fb-in b { font: 900 clamp(26px, 2.6vw, 44px)/.86 var(--f-display); font-stretch: 84%; letter-spacing: -.03em; }
.fb-in em { font-family: var(--f-hand); color: var(--yellow); font-size: clamp(15px, 1.3vw, 21px); }
.fly-c { left: 7%; bottom: 20%; width: 290px; rotate: -5deg; background: var(--bone); color: var(--ink); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; font-size: 13px; box-shadow: 0 30px 50px -24px rgba(0,0,0,.5); }
.fly-c .fs-bar { display: flex; align-items: center; gap: 10px; border: 1px solid rgba(17,17,17,.2); border-radius: 999px; padding: 6px 12px; }
.fly-c .fs-bar svg { width: 18px; height: 18px; flex: none; }
.fly-c .fs-q i { display: inline-block; width: 1.5px; height: 1em; background: var(--ink); vertical-align: -2px; margin-left: 2px; animation: blink 1s step-end infinite; }
.fly-c .fs-r { display: grid; gap: 2px; padding-inline: 4px; } .fly-c .fs-r b { color: #1a0dab; font-weight: 500; font-size: 17px; } .fly-c .fs-r em { color: #006621; font-size: 12px; }
.pst-star { position: absolute; right: 1%; top: 6%; width: clamp(120px, 14vw, 240px); z-index: 4; animation: spin 46s linear infinite; }
.pst-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; z-index: 6; }
.pst-tag { margin: 0; font: 500 clamp(18px, 1.7vw, 28px)/1.12 var(--f-display); letter-spacing: -.01em; }
.pst-go { border: 2px solid var(--ink); border-radius: 999px; padding: 12px 22px; font: 700 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; background: var(--bone); box-shadow: 4px 4px 0 var(--ink); transition: box-shadow .3s, background .3s, color .3s; }
.pst-go:hover { background: var(--red); color: var(--bone); box-shadow: 0 0 0 var(--ink); }
.pst-yr { display: flex; align-items: center; gap: 14px; font: 900 clamp(40px, 4.6vw, 78px)/1 var(--f-display); letter-spacing: -.05em; }
.globe { width: clamp(54px, 5vw, 84px); height: auto; overflow: visible; }
.globe .gm1, .globe .gm2 { transform-box: fill-box; transform-origin: center; animation: meridian 5s linear infinite; }
.globe .gm2 { animation-delay: -2.5s; }
@keyframes meridian { 0% { transform: scaleX(1) } 50% { transform: scaleX(-1) } 100% { transform: scaleX(1) } }
@media (max-width: 860px) {
  .pst { height: auto; min-height: calc(100svh - 110px); }
  .pst-title { font-size: clamp(56px, 19vw, 120px); top: 5%; }
  .pst-sky { top: 26%; bottom: 22%; left: 0; right: 0; }
  .pst-red { top: 30%; left: 14px; }
  .fly-a { left: 34%; top: 30%; width: 46vw; }
  .fly-b { right: 2%; top: 56%; width: 30vw; }
  .fly-c, .pst-top span:nth-child(2) { display: none; }
  .pst-star { width: 24vw; top: 2%; }
  .pst-foot { flex-wrap: wrap; }
  .pst-go { order: 3; width: 100%; }
}

/* ---------- picker tickets ---------- */
.pick-sec { padding-block: clamp(80px, 13vh, 140px); }
.pick-head { display: grid; grid-template-columns: 1fr minmax(0, 36ch); gap: 30px; align-items: end; margin-bottom: clamp(30px, 5vh, 50px); }
.pick-head h2 { font-size: var(--t-3xl); margin-top: 14px; }
.pick-head h2 b { font-weight: 900; color: var(--red); }
.pick-head p { font-size: var(--t-md); line-height: 1.5; color: var(--on-paper-dim); }
.pick-sec .pick { background: var(--tint); color: var(--bone); border: 0; border-radius: 6px; min-height: 250px; padding: 22px 20px 20px;
  -webkit-mask: radial-gradient(circle 11px at 0 64%, transparent 98%, #000 100%) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 64%, transparent 98%, #000 100%) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 11px at 0 64%, transparent 98%, #000 100%) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 64%, transparent 98%, #000 100%) right / 51% 100% no-repeat;
  background-image: url("img/t-grain-light.png"); }
.pick-sec .pick::after { content: ""; position: absolute; left: 14px; right: 14px; top: 64%; border-top: 2px dashed currentColor; opacity: .35; }
.pick-sec .pick[data-persona="growth"] { color: var(--ink); background-image: url("img/t-grain-dark.png"); }
.pick-sec .pick::before { background: var(--ink); }
.pick-sec .pick:hover, .pick-sec .pick[aria-pressed="true"] { color: var(--bone); }
.pick-sec .pick[aria-pressed="true"] { box-shadow: none; outline: 3px solid var(--ink); outline-offset: 4px; }
.pick-sec .pk-ic, .pick-sec .pick:hover .pk-ic { color: currentColor; }
.pick-sec .pk-t { font: 800 clamp(22px, 1.9vw, 32px)/1.02 var(--f-display); letter-spacing: -.03em; }
.pick-sec .pk-s { margin-top: auto; padding-top: 22px; }
.pick-sec .pk-n { font-family: var(--f-mono); }
@media (max-width: 860px) { .pick-head { grid-template-columns: 1fr; } }

/* ---------- band ---------- */
.band { border: 0; }
.band span { color: var(--ink); }
.band span.it { color: var(--bone); background: none; -webkit-text-fill-color: currentColor; font-family: var(--f-display); font-weight: 300; text-transform: uppercase; }
.band .star { color: var(--bone); }

/* ---------- sound familiar ---------- */
.fam.paper .fam-head p { color: var(--on-paper-dim); }
.fam-head h2 em { color: var(--red); }
.pcard { color: var(--on-ink); border: 0; border-radius: 6px; background-color: var(--tint); background-image: url("img/t-grain-light.png"); box-shadow: 8px 8px 0 var(--ink); }
.pcard[data-card="growth"], .pcard-end { --on-ink: #111; --on-ink-dim: rgba(17,17,17,.72); --on-ink-faint: rgba(17,17,17,.3); color: #111; background-image: url("img/t-grain-dark.png"); }
.pcard-end { background-color: var(--bone); border: 2px dashed var(--ink); box-shadow: none; }
.pcard .pc-ic { color: currentColor; }
.pcard h3 { font: 800 clamp(26px, 2.3vw, 38px)/1 var(--f-display); letter-spacing: -.035em; }
.pc-ph { background: transparent; height: 160px; }
.pc-ph::after { display: none; }
.pc-ph img { object-fit: cover; }
.pcard[data-card="premium"] .tick[aria-pressed="true"] rect { fill: var(--ink); stroke: var(--ink); }
.pcard[data-card="growth"] .tick .ck { stroke: var(--yellow); }
.pcard[data-card="growth"] .tick[aria-pressed="true"] rect { fill: var(--ink); stroke: var(--ink); }
.pcard.hot .pc-cta:not([aria-pressed="true"]) { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.pcard[data-card="tech"].hot .pc-cta:not([aria-pressed="true"]) { background: var(--red); border-color: var(--red); }
.pcard.chosen { box-shadow: 8px 8px 0 var(--red); outline: 3px solid var(--ink); outline-offset: 3px; }
.pcard.hot { border: 0; }
.pc-foot { border-top-color: var(--on-ink-faint); }

/* ---------- path ---------- */
.path-title em { color: var(--red); }

/* ---------- red grid ---------- */
.think { min-height: 100svh; overflow: hidden; color: var(--bone); }
.grid-ov { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.95) 2.2px, transparent 2.8px), linear-gradient(rgba(255,255,255,.42) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.42) 1px, transparent 1px);
  background-size: 120px 120px; background-position: -60px -60px, 0 0, 0 0; }
.th-art { position: absolute; right: 0; top: 2%; bottom: 0; width: min(66vw, 980px); z-index: 1; }
.th-bw { display: none; }
.th-ht, .gb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
.gb { position: absolute; inset: 0; clip-path: inset(50% 50% 50% 50%); transition: clip-path .08s steps(2), transform .08s steps(2); }
.gb img { filter: grayscale(1) contrast(1.25) brightness(1.05); }
.th-logo { position: absolute; top: 10%; left: var(--gutter); z-index: 3; font: 900 clamp(34px, 3.6vw, 60px)/1 var(--f-display); letter-spacing: -.05em; color: var(--bone); }
.th-logo sup { font-size: .22em; letter-spacing: .24em; text-transform: uppercase; color: var(--yellow); vertical-align: top; margin-left: 6px; }
.th-lab { position: absolute; z-index: 3; margin: 0; font: 600 11px/1.7 var(--f-display); letter-spacing: .32em; text-transform: uppercase; color: var(--bone); }
.th-lab i { display: block; width: 20px; height: 3px; background: currentColor; margin-top: 12px; }
.th-lab.tr { top: 11%; right: 6%; } .th-lab.ml { top: 31%; left: var(--gutter); } .th-lab.mr { top: 55%; right: 6%; }
.th-lab.bl { bottom: 5%; left: var(--gutter); } .th-lab.br { bottom: 5%; right: 6%; letter-spacing: .2em; }
.th-title { position: absolute; left: var(--gutter); bottom: 13%; z-index: 3; margin: 0; font: 900 clamp(46px, 7.6vw, 136px)/.86 var(--f-display); font-stretch: 100%; letter-spacing: -.055em; color: #F7F3EC; max-width: 9.5ch; }
.th-title .tw { display: inline-block; }
.th-title b { font-weight: 900; color: var(--ink); }
@media (max-width: 860px) {
  .think { min-height: 0; padding: 120px var(--gutter) 90px; display: grid; gap: 30px; }
  .th-art { position: relative; width: 100%; height: 70vw; top: 0; }
  .th-title { position: relative; left: 0; bottom: 0; }
  .th-logo { top: 40px; } .th-lab.ml, .th-lab.mr, .th-lab.tr { display: none; }
  .th-lab.bl, .th-lab.br { position: relative; left: 0; right: 0; bottom: 0; }
}

/* ---------- before / after on bone ---------- */
.ba-sec.paper .ba-head p { color: var(--on-paper-dim); }
.ba-sec.paper .ba-head h2 em { color: var(--red); }
.ba-sec.paper .ba-notes li { border-top-color: rgba(17,17,17,.2); }
.ba-sec.paper .ba-notes span { color: var(--red); }
.ba { box-shadow: 10px 10px 0 var(--ink); border-radius: 4px; }

/* ---------- 3D reveal ---------- */
.reveal { color: var(--ink); }
.rv-pin { position: relative; height: 100svh; overflow: hidden; }
.rv-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.rv-copy { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 3; max-width: 32rem; display: grid; gap: 18px; }
.rv-copy h2 { font: 300 clamp(38px, 4.6vw, 78px)/.96 var(--f-display); letter-spacing: -.04em; }
.rv-copy h2 b { font-weight: 900; display: block; }
.rv-copy p { font-size: var(--t-md); line-height: 1.5; max-width: 30ch; }
.reveal .kicker::before, .reveal .kicker::after { color: var(--ink) !important; }
.rv-tags { position: absolute; inset: 0; z-index: 3; list-style: none; margin: 0; padding: 0; pointer-events: none; }
.rv-tags li { position: absolute; font: 700 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; background: var(--ink); color: var(--yellow); padding: 9px 14px; border-radius: 999px; opacity: 0; transform: translateY(14px) scale(.85); transition: opacity .5s, transform .6s var(--ease-out); transition-delay: calc(var(--i) * 70ms); }
.reveal.open .rv-tags li { opacity: 1; transform: none; }
.rv-tags li:nth-child(1) { left: 52%; top: 22%; } .rv-tags li:nth-child(2) { left: 80%; top: 18%; } .rv-tags li:nth-child(3) { left: 88%; top: 46%; }
.rv-tags li:nth-child(4) { left: 50%; top: 52%; } .rv-tags li:nth-child(5) { left: 56%; top: 76%; } .rv-tags li:nth-child(6) { left: 82%; top: 72%; }
.rv-hint { position: absolute; left: 50%; bottom: 4vh; transform: translateX(-50%); z-index: 3; margin: 0; font-size: 12px; letter-spacing: .2em; opacity: calc(1 - var(--p, 0) * 4); }
.rv-fallback { display: none; position: absolute; right: 14%; top: 22%; width: min(40vw, 460px); height: 60%; z-index: 1; }
.rv-static .rv-fallback { display: block; }
.rvf-dome { position: absolute; left: 10%; right: 10%; top: 0; aspect-ratio: 2 / 1; background: radial-gradient(ellipse at 35% 30%, #3a3a3a, #111 60%); border-radius: 999px 999px 0 0; }
.rvf-plate { position: absolute; left: 0; right: 0; bottom: 10%; height: 14px; background: #111; border-radius: 50%; }
@media (max-width: 860px) {
  .rv-copy { top: 9%; transform: none; right: var(--gutter); }
  .rv-tags li:nth-child(n) { top: auto; bottom: calc(6% + (var(--i) - var(--i) % 3) * 14px); left: calc(var(--gutter) + (var(--i)) * 0px); }
  .rv-tags { display: flex; flex-wrap: wrap; gap: 8px; inset: auto var(--gutter) 9% var(--gutter); position: absolute; }
  .rv-tags li { position: static; }
}

/* ---------- journey: riso blue + didone ---------- */
.jr .jr-pin { padding-top: clamp(84px, 11vh, 110px); }
.jr-head { position: relative; color: #F4F0E8; }
.jr-codes { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .22em; opacity: .9; margin: 0 0 6px; }
.jr-serif { font-family: var(--f-didone) !important; font-weight: 400 !important; text-transform: uppercase; color: #F4F0E8; font-size: clamp(56px, 10.6vw, 196px) !important; line-height: .9 !important; letter-spacing: .005em !important; text-align: center; white-space: nowrap; margin: 0; }
.jr-o { display: inline-block; width: .5em; height: .5em; vertical-align: .08em; margin: 0 .02em; color: #F4F0E8; animation: spin 14s linear infinite; }
.jr-sub { position: absolute; right: var(--gutter); top: 100%; margin: 6px 0 0; font-size: 11px; line-height: 1.9; letter-spacing: .5em; text-transform: uppercase; color: #F4F0E8; }
.jr-track { padding-top: 120px; }
.jr-path { top: 4px; }
.jr-dot { top: 4px; color: var(--yellow); }
.jr-line { stroke: var(--yellow); }
.jr-ghost { stroke: rgba(244,240,232,.35); }
.jr-dot i { background: var(--yellow); }
.jr-card { border: 1.5px solid rgba(244,240,232,.35); background: rgba(10,30,52,.28); color: #F4F0E8; }
.jr-card.on { border-color: #F4F0E8; background: rgba(10,30,52,.5); }
.jr-card p { color: rgba(244,240,232,.78); }
.jr-n, .jr-get span { color: var(--yellow); }
.jr-ph { background: transparent; filter: none; height: 120px; margin: -6px -6px 4px; }
.jr-ph img { object-fit: cover; }

/* ---------- handwritten teaser ---------- */
.hand-sec { overflow: hidden; }
.hs-bg { position: absolute; inset: 0; z-index: 0; }
.hs-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.hs-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17,17,17,.2), rgba(17,17,17,.75) 75%); }
.hand-sec .tease-grid { position: relative; z-index: 2; }
.hand { font-family: var(--f-hand); font-weight: 400; color: #FFE14D; font-size: clamp(50px, 6.6vw, 116px); line-height: .92; letter-spacing: 0; text-transform: none; margin-top: 16px; text-shadow: 0 0 22px rgba(255,214,0,.55), 0 0 2px rgba(255,225,77,.9); }
.hand span { display: block; } .hand span:nth-child(2) { margin-left: .5em; } .hand span:nth-child(3) { font-size: .62em; margin-left: .2em; }
.hand b { font-weight: 400; color: #fff; text-shadow: 0 0 18px rgba(255,255,255,.5); }
.hand-sm { font-family: var(--f-hand); color: #fff; font-size: clamp(18px, 1.6vw, 24px); margin-top: 12px; transform: rotate(-2deg); }
.tease-card { background: var(--paper); background-image: url("img/t-grain-dark.png"); color: var(--ink); border: 2px solid var(--ink); box-shadow: 10px 10px 0 var(--red); }
.tease-card .opt { border-color: rgba(17,17,17,.25); color: var(--ink); }
.tease-card .opt:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.tease-card .label.dim { color: rgba(17,17,17,.6); }
.tease-visual { padding: 0; }

/* ---------- wall on red ---------- */
.wall { background-color: var(--red); }
.wall h2 em { color: var(--ink); background: none; -webkit-text-fill-color: currentColor; }
.wall-row a { color: var(--bone); }
.wall-row a:nth-child(3n+2) { -webkit-text-stroke-color: rgba(241,236,227,.7); }
.wall-rows:hover a { color: rgba(241,236,227,.25); -webkit-text-stroke-color: rgba(241,236,227,.25); }
.wall-rows:hover a:hover { color: var(--ink); -webkit-text-stroke-color: var(--ink); }
.wall-row a sup { color: rgba(241,236,227,.7); }
.wall-mark { color: var(--yellow); opacity: .12; }
.wall .kicker::before, .wall .kicker::after { color: var(--yellow) !important; }
.credits .closer mark { background: var(--red); -webkit-text-fill-color: var(--bone); color: var(--bone); }

/* ---------- TV + 3D text ring CTA ---------- */
.tv-sec { padding-block: clamp(90px, 15vh, 160px) 30px; overflow: hidden; }
.cc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; position: relative; z-index: 2; }
.tv-sec h2 { font-size: clamp(46px, 6.8vw, 122px) !important; color: var(--ink); }
.tv-sec h2 em { color: var(--red); display: block; }
.tv-stage { position: relative; height: clamp(380px, 44vw, 640px); perspective: 1300px; transform-style: preserve-3d; display: grid; place-items: center; --rx: 0deg; --ry: 0deg; --R: clamp(170px, 19vw, 300px); --rf: clamp(34px, 4.2vw, 70px); }
.tv { position: relative; width: min(74%, 430px); aspect-ratio: 1.3; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--ease-out); animation: bob 5s ease-in-out infinite; transform-style: preserve-3d; z-index: 2; }
@keyframes bob { 50% { translate: 0 -12px; } }
.tv-body { position: absolute; inset: 0; display: flex; padding: 7% 23% 7% 6%; border-radius: 18px; background: linear-gradient(160deg, #2c2c2c, #0c0c0c 62%); box-shadow: 0 50px 70px -36px rgba(0,0,0,.65), inset 0 2px 0 rgba(255,255,255,.14), inset 0 -8px 0 rgba(0,0,0,.6); }
.tv-screen { position: relative; flex: 1; overflow: hidden; border-radius: 14% / 18%; background: #400; box-shadow: inset 0 0 36px rgba(0,0,0,.85), 0 0 0 7px #050505; }
.tv-static { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.tv-screen::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(rgba(0,0,0,.28) 0 2px, transparent 2px 4px), radial-gradient(ellipse at 40% 35%, rgba(255,255,255,.18), transparent 60%); pointer-events: none; }
.tv-txt { position: absolute; inset: 0; display: grid; place-items: center; font: 900 clamp(22px, 2.8vw, 42px)/1 var(--f-display); letter-spacing: -.04em; color: rgba(255,255,255,.9); mix-blend-mode: overlay; animation: flick 3.2s steps(1) infinite; }
@keyframes flick { 0%, 62%, 70%, 100% { opacity: 1 } 64%, 68% { opacity: 0 } }
.tv-side { position: absolute; right: 5%; top: 11%; bottom: 11%; width: 13%; display: flex; flex-direction: column; align-items: center; gap: 9%; }
.tv-side i { width: 72%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #666, #1a1a1a 60%); box-shadow: 0 2px 0 rgba(255,255,255,.08); }
.tv-side b { flex: 1; width: 72%; background: repeating-linear-gradient(#050505 0 3px, #262626 3px 5px); border-radius: 3px; }
.ring { position: absolute; left: 50%; top: 54%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(-14deg) rotateZ(-7deg); z-index: 3; pointer-events: none; }
.ring-in { transform-style: preserve-3d; animation: ringspin 16s linear infinite; }
@keyframes ringspin { to { transform: rotateY(-360deg); } }
.ring span { position: absolute; left: 0; top: 0; transform: rotateY(var(--a)) translateZ(var(--R)); transform-style: preserve-3d; }
.ring b, .ring i { position: absolute; left: -.3em; top: -.5em; display: block; font: 900 var(--rf)/1 var(--f-display); font-stretch: 100%; font-style: normal; color: var(--red); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ring i { transform: rotateY(180deg); color: transparent; -webkit-text-stroke: 1.5px var(--red); }
.cc-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; font-size: 12px; letter-spacing: .12em; color: var(--red); position: relative; z-index: 2; }
.cc-foot span { display: inline-flex; align-items: center; gap: 10px; }
.cc-globe { width: 18px; color: var(--red); }
@media (max-width: 860px) { .cc-grid { grid-template-columns: 1fr; } .tv-stage { height: 360px; --R: 150px; --rf: 32px; } }
@media (prefers-reduced-motion: reduce) { .ring-in, .tv, .pst-star, .jr-o { animation: none; } }

/* ---------- other pages ---------- */
.page-hero h1 { color: var(--ink); }
.page-hero h1 em { color: var(--red); }
.track { background: var(--ink); background-image: url("img/t-grain-light.png"); border-top: 16px solid var(--tint); }
.track-ticks { border-color: rgba(241,236,227,.25); }
.manifesto.ink { background-color: var(--blue); }
.mf-beat .display { font-family: var(--f-didone); font-weight: 400; letter-spacing: 0; color: #F4F0E8; }
.mf-beat .it { font-family: var(--f-hand); color: #FFE14D !important; -webkit-text-fill-color: #FFE14D; background: none; text-shadow: 0 0 18px rgba(255,214,0,.45); }
.mf-bg { color: rgba(244,240,232,.3); }
.pf { position: relative; }
.pf-hand { position: absolute; left: 7%; top: 14%; z-index: 2; margin: 0; font-size: clamp(30px, 3.6vw, 58px); transform: rotate(-4deg); pointer-events: none; }
.label-card { background: var(--bone); box-shadow: 10px 10px 0 var(--red); }
.door { border-color: rgba(241,236,227,.3); }
.chk .btn-ghost { color: var(--bone); }
.rd-poly { fill: rgba(229,50,42,.25); stroke: var(--red); }
.rd-pt { fill: var(--red); }
.rb-t b { background: var(--red); }
.case-quote .pq { color: var(--red); font-family: var(--f-didone); }
.menu .mt:hover, .menu li a:hover .mt { color: var(--red); }
.menu .ms { font-family: var(--f-hand); color: var(--yellow); }
.foot-word.on text { animation: draw 2.4s var(--ease-fill) forwards, fillin .9s var(--ease-fill) 1.6s forwards; }
.jr-serif { font-size: clamp(46px, 8.2vw, 150px) !important; }
.th-art { right: -4%; width: min(54vw, 820px); }
.th-title { font-size: clamp(44px, 6.4vw, 116px); max-width: 10ch; }
.th-title b { color: var(--ink); text-shadow: 0 0 0 transparent; }
@media (min-width: 861px) { .th-title { bottom: 11%; } }

@media (max-width: 860px) { .jr-card { opacity: 1; transform: none; } .jr-sub { position: static; margin-top: 10px; letter-spacing: .3em; } }

/* =====================================================================
   PERFORMANCE + CLEAN FINISH — no textures, no full-screen blend layers
   ===================================================================== */
.grain { display: none !important; }
.paper, .ink, .red-sec, .yel-sec, .blue-sec, .ink.blue-sec, .track, .pcard, .pick-sec .pick, .pcard[data-card="growth"], .pcard-end,
.pick-sec .pick[data-persona="growth"], .tease-card { background-image: none !important; }
.poster::after, .think::after, .jr::after, .tv-sec::after, .wall::after, .pick-sec::after { display: none !important; content: none; }
.skewy { transform: none; will-change: auto; }
.ph img { will-change: auto; }
.fly-a { filter: none; }
.fly-a .sku-art { filter: drop-shadow(0 30px 24px rgba(0,0,0,.25)); }
.pst-title { mix-blend-mode: normal; }
.mq-t { will-change: auto; }
.tilt { will-change: auto; }

/* =====================================================================
   QA FIXES
   ===================================================================== */
/* 1 · Header: solid bar once you scroll, hides on scroll down, returns on scroll up */
.hdr { transition: opacity var(--d-base) var(--ease-out), transform .5s var(--ease-out), background-color .3s, padding .3s, box-shadow .3s; }
.hdr.solid { mix-blend-mode: normal; background: var(--bone); color: var(--ink); padding-top: calc(14px + env(safe-area-inset-top, 0px)); padding-bottom: 14px; box-shadow: 0 1px 0 rgba(17,17,17,.12); }
.burger { transition: padding .8s var(--ease-cine), border-color .4s, height .3s, min-width .3s, top .3s, transform .5s var(--ease-out); }
body.hdr-solid:not(.menu-open) .burger { mix-blend-mode: normal; color: var(--ink); border-color: rgba(17,17,17,.3); height: 46px; min-width: 46px; top: calc(6px + env(safe-area-inset-top, 0px)); }
body.hdr-solid:not(.menu-open) .burger .bl i { background: var(--ink); }
body.hdr-hide:not(.menu-open) .hdr.on { transform: translateY(-110%); }
body.hdr-hide:not(.menu-open) .burger { transform: translateY(-150%); }

/* 2 · Pinned horizontal sections: keep the heading column at viewport width (the track no longer stretches it) */
.jr-pin, .fam-pin, .shelf-pin, .gal-pin, .wall { grid-template-columns: minmax(0, 100%); }

/* 3 · Email lines never break mid-address */
.foot .mail, .reach .mail { font-size: clamp(18px, 2vw, 32px); overflow-wrap: normal; white-space: nowrap; }
@media (max-width: 420px) { .foot .mail, .reach .mail { font-size: clamp(16px, 4.6vw, 20px); } }

/* 4 · Case-study panels: tags on one line, project rail gets its own lane */
.panel-text .tags { max-width: none; line-height: 1.7; }
@media (min-width: 1101px) { .panel { padding-right: calc(var(--gutter) + 190px); } .panel-head { right: var(--gutter); } }

/* 5 · Proof cards: caption sits under the artwork, always readable */
.pcase { background: var(--ink); }
.pct { position: static; padding: 10px 12px 12px; color: var(--bone); text-shadow: none; font-size: var(--t-md); line-height: 1.15; }
.pct em { font-style: normal; font-family: var(--f-display); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(241,236,227,.6); margin-top: 4px; }

/* 6 · Craft rows: drop the offset outline echo */
.svc-row h3 .gh { display: none; }

/* 7 · Closing CTA: less empty space above it */
.tv-sec { padding-top: clamp(70px, 11vh, 120px); }

/* 8 · Reveal on phones: copy keeps a clean area above the 3D object */
@media (max-width: 860px) { .rv-copy { z-index: 3; } }
/* 9 · Think poster: title clears the bottom-left label */
@media (min-width: 861px) { .th-title { bottom: calc(5% + 96px); } .th-lab.bl { bottom: 5%; } }
/* 10 · Case shelf: packs scale to the stage instead of hugging the floor */
@media (min-width: 861px) { .sku { width: clamp(130px, min(15vw, 25vh), 240px); } .shelf-track-wrap { padding-top: 30px; } }
/* 11 · Plan dock: steps aside while you scroll down, not shown on the health check (it has its own plan list) */
.dock { transition: translate .45s var(--ease-out), opacity .3s; }
body.hdr-hide:not(.drawer-open) .dock { translate: 0 calc(100% + 40px); }
body[data-view="check"] .dock { display: none !important; }
/* 12 · Masked headline lines keep italic tails and descenders */
.lm { padding-bottom: .08em; margin-bottom: -.08em; }

/* =====================================================================
   WEBSITE PREVIEWS + HOME BUTTON
   ===================================================================== */
.nav-home { display: inline-flex; align-items: center; gap: 7px; }
.nav-home svg { width: 15px; height: 15px; margin-top: -2px; }
.m-home { display: none; }
@media (max-width: 860px) {
  .hdr { padding-right: calc(var(--gutter) + 150px); }
  .m-home { display: grid; place-items: center; margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: 1.25px solid currentColor; pointer-events: auto; opacity: .9; }
  .m-home svg { width: 19px; height: 19px; }
  body[data-view="home"] .m-home { visibility: hidden; }
}

/* frame: browser + phone, scrolling page inside */
.wp { position: relative; width: 100%; height: 100%; --wp-shadow: 0 30px 60px -24px rgba(0,0,0,.55); }
.wp-browser { position: absolute; left: 0; top: 3%; width: 84%; height: 90%; border-radius: 10px; background: #fff; overflow: hidden; box-shadow: var(--wp-shadow); }
.wp-bar { position: relative; z-index: 2; height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #ECE8E0; border-bottom: 1px solid rgba(0,0,0,.08); }
.wp-bar i { width: 9px; height: 9px; border-radius: 50%; background: #D1CBC0; flex: none; }
.wp-bar i:first-child { background: #E5322A; opacity: .8; }
.wp-url { margin: 0 auto; padding: 4px 14px; border-radius: 999px; background: #fff; color: #555; font: 500 11px/1.2 var(--f-mono, monospace); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.wp-live { display: inline-flex; align-items: center; gap: 6px; font: 700 9px/1 var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: #777; flex: none; }
.wp-live b { width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.wp.on .wp-live b { animation: pulse 1.6s ease-in-out infinite; }
.wp-view { position: absolute; top: 30px; left: 0; right: 0; bottom: 0; overflow: hidden; }
.wp-page { --end: 0px; transform: translateY(0); }
.wp-svg { display: block; width: 100%; height: auto; }
.wp.on .wp-page { animation: wpScroll 26s cubic-bezier(.45,0,.55,1) infinite; }
.wp-pview .wp-page { animation-delay: -6s !important; animation-duration: 20s !important; }
.wp:hover .wp-page { animation-play-state: paused; }
@keyframes wpScroll { 0%, 6% { transform: translateY(0); } 47%, 55% { transform: translateY(var(--end)); } 94%, 100% { transform: translateY(0); } }
.wp-phone { position: absolute; right: 0; bottom: 0; width: 23%; aspect-ratio: 9 / 19; padding: 5px; border-radius: 22px; background: #0B0B0C; box-shadow: var(--wp-shadow); z-index: 3; }
.wp-pview { position: relative; height: 100%; border-radius: 17px; overflow: hidden; background: #fff; }
.wp-notch { position: absolute; left: 50%; top: 10px; width: 30%; height: 10px; border-radius: 6px; background: #0B0B0C; transform: translateX(-50%); z-index: 2; }

/* home stack panels: the preview fills the media box */
.panel-media.has-wp { overflow: visible; border-radius: 0; aspect-ratio: 16 / 10.4; }
.panel-media.has-wp .wp-browser { transition: transform .6s var(--ease-out); }
.panel-media.has-wp:hover .wp-browser { transform: translateY(-6px); }

/* case page: large preview */
.case-prev { padding-block: clamp(60px, 10vh, 120px) clamp(40px, 8vh, 90px); }
.cp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.wp-lg { aspect-ratio: 16 / 9.6; height: auto; }
.wp-lg .wp-browser { width: 80%; height: 96%; top: 0; border-radius: 14px; }
.wp-lg .wp-bar { height: 38px; }
.wp-lg .wp-view { top: 38px; }
.wp-lg .wp-url { font-size: 12px; }
.wp-lg .wp-phone { width: 22%; border-radius: 30px; padding: 7px; bottom: -2%; }
.wp-lg .wp-pview { border-radius: 23px; }
@media (max-width: 860px) {
  .panel-media.has-wp { aspect-ratio: 4 / 3.3; }
  .wp-bar { height: 24px; padding: 0 9px; gap: 4px; } .wp-bar i { width: 7px; height: 7px; } .wp-live { display: none; }
  .wp-url { font-size: 9px; padding: 3px 10px; max-width: 70%; }
  .wp-view { top: 24px; }
  .wp-phone { width: 30%; border-radius: 16px; padding: 4px; } .wp-pview { border-radius: 12px; } .wp-notch { top: 6px; height: 7px; }
  .wp-lg { aspect-ratio: 4 / 3.4; } .wp-lg .wp-browser { width: 86%; height: 88%; } .wp-lg .wp-bar { height: 26px; } .wp-lg .wp-view { top: 26px; } .wp-lg .wp-phone { width: 32%; bottom: 0; border-radius: 18px; padding: 5px; }
}
@media (prefers-reduced-motion: reduce) { .wp-page { animation: none !important; } }
@media (min-width: 861px) { .panel-media.has-wp { width: 100%; max-width: calc((100svh - 250px) * 1.54); justify-self: center; } }

/* browser-only previews: tiles, proof cards, see-also, quick look */
.wp-mini { position: relative; width: 100%; height: 100%; }
.wp-mini .wp-browser { inset: 0; top: 0; width: 100%; height: 100%; border-radius: 6px; box-shadow: none; }
.wp-mini .wp-bar { height: 22px; padding: 0 9px; gap: 4px; } .wp-mini .wp-bar i { width: 6px; height: 6px; }
.wp-mini .wp-url { font-size: 9px; padding: 2px 9px; } .wp-mini .wp-live { display: none; }
.wp-mini .wp-view { top: 22px; }
.wp-mini.on .wp-page { animation: none; }
.wp-mini .wp-page { transition: transform 7s cubic-bezier(.45,0,.55,1); }
:is(.tile, .pcase, .sa-card, .wp-mini):hover .wp-mini .wp-page, .wp-mini:hover .wp-page { transform: translateY(var(--end)); transition-duration: 9s; }
.tile .wp-mini { pointer-events: none; }
.tile:hover .wp-mini .wp-page { transform: translateY(var(--end)); }
.tile .wp-tile .wp-browser { border-radius: 4px; }
.pcm .wp-mini .wp-browser { border-radius: 0; }
.sa-card .sm { aspect-ratio: 16 / 10; border-radius: 8px; }
.quick-card .qm { aspect-ratio: auto; min-height: 380px; padding: 22px; background: var(--ink); }
.wp-quick { height: 100%; min-height: 340px; }

/* =====================================================================
   STUDIO METHOD — steps with aligned design + technical services
   ===================================================================== */
.manifesto .mf-bg { opacity: .35; }
.mf-steps { position: absolute; z-index: 3; top: clamp(88px, 12vh, 120px); left: var(--gutter); right: var(--gutter); display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mf-steps span { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 2px solid rgba(244,240,232,.25); font: 700 11px/1 var(--f-display); letter-spacing: .22em; text-transform: uppercase; color: rgba(244,240,232,.55); transition: color .4s, border-color .4s; }
.mf-steps span b { font-family: var(--f-mono); font-weight: 700; letter-spacing: 0; }
.mf-steps span.on { color: #F4F0E8; border-color: #FFE14D; }
.mf-steps span.on b { color: #FFE14D; }
.mf-beat { max-width: none !important; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 70px); align-items: center; align-content: center; padding: clamp(150px, 20vh, 190px) var(--gutter) clamp(40px, 6vh, 70px); }
.mf-left { display: grid; gap: clamp(12px, 2vh, 22px); align-content: center; min-width: 0; }
.mf-no { font-size: 12px; letter-spacing: .14em; color: rgba(244,240,232,.7); margin: 0; }
.mf-beat .display { font-size: clamp(40px, 5.4vw, 92px) !important; line-height: .95; margin: 0; }
.mf-beat .it { justify-self: start !important; text-align: left !important; font-size: clamp(20px, 1.9vw, 30px) !important; line-height: 1.25; max-width: 26ch; margin: 0; }
.mf-pic { margin: 6px 0 0; display: grid; grid-template-columns: clamp(120px, 13vw, 200px) 1fr; gap: 14px; align-items: end; }
.mf-pic .ph { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: #F4F0E8; margin: 0; }
.mf-pic .ph img { width: 100%; height: 100%; object-fit: cover; }
.mf-pic figcaption { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(244,240,232,.7); }
.mf-card { background: #F4F0E8; color: var(--ink); border-radius: 6px; padding: clamp(20px, 2.4vw, 36px); box-shadow: 10px 10px 0 rgba(10,30,52,.45); display: grid; gap: clamp(14px, 2vh, 22px); min-width: 0; }
.mf-ch { margin: 0; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--red); }
.mf-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 32px); }
.mf-cols h4 { margin: 0 0 10px; font: 900 clamp(18px, 1.5vw, 24px)/1 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.mf-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.mf-cols li { font-size: clamp(13px, 1vw, 15px); line-height: 1.3; padding: 9px 0 9px 22px; border-bottom: 1px solid rgba(17,17,17,.12); position: relative; }
.mf-cols li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 1.5px var(--ink); }
.mf-cols ul.tech li::before { border-radius: 2px; background: var(--blue); }
.mf-out { margin: 0; display: grid; gap: 4px; font-size: clamp(14px, 1.1vw, 17px); font-weight: 600; padding: 12px 14px; background: var(--ink); color: #F4F0E8; border-radius: 4px; }
.mf-out .mono { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #FFE14D; }
.mf-count { display: none; }
@media (max-width: 1100px) and (min-width: 861px) { .mf-pic { display: none; } }
@media (max-width: 860px) {
  .mf-steps { display: none; }
  .mf-beat { grid-template-columns: 1fr; padding: 34px var(--gutter); }
  .mf-cols { grid-template-columns: 1fr; }
  .mf-pic { grid-template-columns: 120px 1fr; }
}
@media (max-width: 860px) { .mf-stage { padding-block: 70px 50px; } }
@media (min-width: 861px) { .mf-pic { grid-template-columns: clamp(150px, 15vw, 250px) 1fr; } }

/* =====================================================================
   REAL SITE CAPTURES
   ===================================================================== */
.wp-shot { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.wp-view, .wp-pview { background: #fff; }
/* phone-only: two phones, the second starts further down the page */
.wp-monly { display: flex; justify-content: center; align-items: center; gap: 6%; }
.wp-monly .wp-phone { position: relative; inset: auto; width: auto; height: 94%; aspect-ratio: 9 / 19; z-index: 1; }
.wp-monly .wp-p2 { transform: translateY(5%); }
.wp-monly .wp-p2 .wp-page { animation-delay: -9s !important; }
.wp-monly.on .wp-p1 .wp-page { animation-duration: 18s !important; animation-delay: 0s !important; }
.wp-tag { position: absolute; left: 0; bottom: -2px; font: 700 10px/1 var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: rgba(241,236,227,.6); }
.panel .wp-tag, .case-prev .wp-tag { color: rgba(241,236,227,.6); }
.wp-mini-m { display: grid; place-items: center; background: #161616; border-radius: 6px; overflow: hidden; }
.wp-mini-m .wp-phone { position: relative; inset: auto; width: auto; height: 88%; aspect-ratio: 9 / 19; transform: translateY(8%); border-radius: 14px; padding: 4px; box-shadow: 0 20px 40px -10px rgba(0,0,0,.6); }
.wp-mini-m .wp-pview { border-radius: 10px; }
.wp-mini-m .wp-notch { top: 7px; height: 6px; }
:is(.tile, .pcase, .sa-card, .wp-mini):hover .wp-mini-m .wp-page { transform: translateY(var(--end)); transition-duration: 9s; }
/* visit live site */
.live-link { display: inline-flex; align-items: center; gap: 8px; font: 700 11px/1 var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: inherit; border-bottom: 1px solid currentColor; padding-bottom: 4px; justify-self: start; width: max-content; opacity: .85; transition: opacity .3s; }
.live-link:hover { opacity: 1; }
.live-link.dark { color: var(--ink); }
.panel-text .live-link { margin-top: 4px; }
.cp-head .live-link { color: #F4F0E8; }
@media (max-width: 860px) { .wp-monly .wp-phone { height: 92%; } .wp-tag { display: none; } }

/* before / after: real Nutripleks bottles */
.ba { aspect-ratio: 1400 / 566; max-height: none; background: #EFEBE4; }
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; pointer-events: none; user-select: none; }
@media (max-width: 860px) { .ba { aspect-ratio: 16 / 10; } }

/* real covers for social + packaging tiles */
.cover-img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.tile .cover-img { transition: transform 1s var(--ease-out); } .tile:hover .cover-img { transform: scale(1.05); }
/* gallery quick-look */
.qc-social { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); width: min(1180px, 100%); }
.qc-social .qt { order: 0; }
.sg { background: var(--ink); color: var(--paper); padding: 22px; display: grid; gap: 14px; align-content: start; overflow: auto; }
.sg-h { margin: 0; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(241,236,227,.7); }
.sg-row { display: grid; grid-template-columns: 1.9fr 1fr .62fr; gap: 10px; align-items: stretch; height: clamp(220px, 34vh, 340px); }
.sg-row.two { grid-template-columns: 1fr 1fr; height: clamp(320px, 58vh, 560px); }
.sg-i { margin: 0; border-radius: 6px; overflow: hidden; background: #000; min-width: 0; }
.sg-i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-i.pack img { object-fit: contain; background: #2a211b; }
.sg-sites { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sg-site { display: grid; gap: 8px; color: var(--paper); }
.sg-site .wp-mini { aspect-ratio: 16 / 10; height: auto; }
.sg-site span { font: italic 400 18px/1.2 var(--f-serif); } .sg-site em { display: block; font: 700 10px/1.4 var(--f-display); font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: rgba(241,236,227,.6); }
@media (max-width: 860px) { .qc-social { grid-template-columns: 1fr; } .sg-row { grid-template-columns: 1fr 1fr; height: auto; } .sg-row .wide { grid-column: 1 / -1; aspect-ratio: 16/9; } .sg-row .sg-i:not(.wide) { aspect-ratio: 2/3; } .sg-row.two { height: auto; } .sg-row.two .sg-i { aspect-ratio: 871/1280; } .sg-sites { grid-template-columns: 1fr; } }
.sg-row.two.land { height: auto; } .sg-row.two.land .sg-i { aspect-ratio: 1100 / 989; }
.sg-row.two.land .sg-i.pack img { object-fit: cover; background: none; }
.qc-social { max-height: 90svh; overflow: auto; }
.sg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sg-grid .sg-i { aspect-ratio: 4 / 5; }
.sg-grid .sg-i img { object-fit: cover; }
.sg-grid.art { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sg-grid.art .sg-i { aspect-ratio: 4 / 5; background: #000; }
.sg-grid.art .sg-i img { object-fit: contain; }
@media (min-width: 861px) { .sg-grid.art { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sg-grid.tallg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sg-grid.tallg .sg-i { aspect-ratio: 552 / 1400; }
.sg-grid .sg-i { cursor: zoom-in; }
.sg-zoom { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,.92); display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) 16px; overflow: auto; cursor: zoom-out; }
.sg-zoom img { max-width: min(1100px, 100%); max-height: none; width: auto; height: auto; display: block; }
@media (max-width: 520px) { .sg-grid.tallg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }