:root {
  /* Softer night palette: charcoal ground, warm ink, pastel coral accent */
  /* Deep red on near-black. #E1261C carries the big type; buttons use a deeper step so white labels pass AA. */
  --ground: #08080A; --surface: #111114; --surface-2: #18181C; --surface-3: #232328;
  --ink: #F2EEE6; --ink-dim: rgba(242,238,230,.64);
  --red: #E1261C; --red-action: #C81E15; --on-red: #F2EEE6; --panel-red: #EA3A2F;
  --paper: #F2EEE6; --paper-2: #E6E1D7; --ink-dark: #121214; --ink-dark-dim: rgba(18,18,20,.66); --red-deep: #C81E15;
  --radius: 8px; --panel-r: 28px;

  --font: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Oswald", "Arial Narrow", "Roboto Condensed", sans-serif;
  --hand: "Permanent Marker", "Marker Felt", "Comic Sans MS", cursive;

  --fs-giant: clamp(72px, 17vw, 320px);
  --fs-display: clamp(56px, 9.6vw, 176px);
  --fs-h2: clamp(30px, 3.2vw, 48px);
  --fs-lead: clamp(18px, .6vw + 13px, 22px);
  --fs-body: 16px;
  --fs-meta: 12px;
  --fs-hand: clamp(20px, 1.8vw, 30px);

  --wrap: 1200px;
  --m: clamp(16px, 2.5vw, 32px);
  --gut: 24px;
  --sec: clamp(60px, 6.5vw, 96px);
  --nav-h: 76px;

  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-expo: cubic-bezier(.16,1,.3,1);
  --t-hover: 220ms;
}
html.is-shrunk { --nav-h: 60px; }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); color: var(--ink); --sb: 0; overflow-x: clip; -webkit-text-size-adjust: 100%; scrollbar-color: var(--surface-3) var(--ground); }
body { margin: 0; font-family: var(--font); font-size: var(--fs-body); line-height: 1.55; font-weight: 400; letter-spacing: 0; overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
::selection { background: var(--red); color: var(--ink); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ground); }
::-webkit-scrollbar-thumb { background: var(--surface-3); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
.loop-spacer { height: 40vh; }
input, textarea { caret-color: var(--red); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: var(--m); top: 12px; z-index: 200; padding: 12px 18px; background: var(--ink); color: var(--ground); transform: translateY(-200%); text-decoration: none; font-weight: 600; }
.skip:focus-visible { transform: none; }

/* ---------- Ambient: one soft light from above + a fine grid that fades out (static, Raycast-like) ---------- */
.ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--ground); overflow: hidden; }
.ambient__light { position: absolute; left: 50%; top: -38vh; width: min(1400px, 140vw); height: 90vh; translate: -50% 0; background: radial-gradient(50% 50% at 50% 50%, rgba(225,38,28,.2) 0%, rgba(225,38,28,.06) 42%, rgba(225,38,28,0) 72%); }

/* ---------- Layout: content lives in 1200px, decoration runs to the screen edges ---------- */
.container { width: min(100% - 2 * var(--m), var(--wrap)); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
.sec { padding-top: var(--sec); }

/* ---------- Type ---------- */
.h2, .hero__hook, .pcard__name, .pcard__num, .svc__name, .shelf-info__name, .stat dd, .office__city, .faq__q, .faq__tab, .book__title, .jcard__title, .menu__links a, .btn, .link, .nav__links a, .meta, .step__num, .rec__spine, .cover, .chip span, .field label, .field legend, .bookdlg__title, .mani__text { font-family: var(--display); }
.h2 { font-size: var(--fs-h2); line-height: .92; font-weight: 600; letter-spacing: -.005em; text-transform: uppercase; }
.lead { font-size: var(--fs-lead); line-height: 1.3; font-weight: 300; }
.meta { font-size: var(--fs-meta); line-height: 1.4; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
.hand { font-family: var(--hand); font-size: var(--fs-hand); line-height: 1.1; font-weight: 400; letter-spacing: .01em; color: var(--ink); text-transform: none; }
.tnum { font-variant-numeric: tabular-nums; }
.ph { outline: 2px dashed var(--red); outline-offset: 2px; }
.ph-num { color: transparent; -webkit-text-stroke: 2px var(--red); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 56px); }
.sec-head__title { display: flex; align-items: flex-end; gap: 8px 28px; flex-wrap: wrap; }
.sec-head .hand { transform: rotate(-4deg) translateY(.12em); }

/* ---------- Actions ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 22px; background: var(--red-action); color: var(--on-red); border: 0; border-radius: var(--radius); text-decoration: none; text-transform: uppercase; font-size: 14px; letter-spacing: .08em; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform 140ms var(--ease-out); }
.btn:hover { background: var(--ink); color: var(--ground); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn--lg { min-height: 54px; padding: 0 30px; font-size: 15px; }
.link { position: relative; display: inline-flex; align-items: center; gap: .5em; text-decoration: none; font-weight: 500; text-transform: uppercase; font-size: 14px; letter-spacing: .08em; padding: 6px 0; }
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 400ms var(--ease-out); }
.link:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.arrow { width: 1.1em; height: 1.1em; flex: none; transition: transform 300ms var(--ease-out); }
.link:hover .arrow { transform: translateX(4px); }
.link--down:hover .arrow { transform: translateY(3px); }

/* ---------- Nav: bar at the top, centred glass pill after scrolling ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 90; height: 76px; color: var(--ink); pointer-events: none; }
.nav__bar { height: 76px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; pointer-events: auto; transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-expo); }
html.is-shrunk .nav__bar { opacity: 0; transform: translateY(-24px); pointer-events: none; }
html.nav-on-light .nav__bar { color: var(--ink-dark); }
.logo { display: block; color: currentColor; justify-self: start; padding: 4px 0; }
.logo svg { height: 30px; width: auto; fill: currentColor; }
.logo--mini svg { height: 22px; }
.nav__links { display: flex; gap: clamp(18px, 2.2vw, 34px); }
.nav__links a { position: relative; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; padding: 8px 0; opacity: .7; transition: opacity 200ms ease; }
.nav__links a:hover { opacity: 1; }
.nav__end { justify-self: end; display: flex; align-items: center; gap: 14px; }
.nav__burger { display: none; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; padding: 10px 0; font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-size: 14px; }
.burger { display: inline-grid; gap: 5px; width: 18px; }
.burger i { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform 300ms var(--ease-out); }
.nav__dock { position: absolute; left: 50%; top: 12px; display: flex; align-items: center; gap: 8px; translate: -50% 0; pointer-events: none; }
.nav__pill.glass { position: relative; left: auto; top: auto; translate: none; width: max-content; max-width: 320px; display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 18px; border-radius: 999px !important; opacity: 0; transform: translateY(-20px) scale(.92); pointer-events: none; transition: opacity 400ms var(--ease-out), transform 550ms var(--ease-expo); }
html.is-shrunk .nav__pill.glass { opacity: 1; transform: none; pointer-events: auto; }
.pill__menu { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; color: var(--ink); cursor: pointer; padding: 10px 14px; font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; border-radius: 999px; }
.pill__menu:hover { background: rgba(255,255,255,.06); }
.pill__menu:hover .burger i:first-child { transform: translateX(3px); }
.btn--sm { min-height: 38px; padding: 0 16px; font-size: 13px; border-radius: 999px; }
.btn--ghost { background: rgba(255,255,255,.06); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.btn--ghost:hover { background: var(--ink); color: var(--ground); }

/* Language dropdown (glass) */
.lang { position: relative; }
.lang__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: var(--radius); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: inherit; cursor: pointer; font-family: var(--display); font-size: 13px; letter-spacing: .08em; }
.lang__btn svg { width: 14px; height: 14px; transition: transform 300ms var(--ease-out); }
.lang__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.lang__list { position: absolute; right: 0; top: calc(100% + 10px); min-width: 210px; padding: 6px; margin: 0; list-style: none; border-radius: 14px !important; transform-origin: 100% 0; color: var(--ink); }
.lang__list:not([hidden]) { animation: pop 260ms var(--ease-expo); }
.lang__list a, .menu__langs a { display: flex; justify-content: space-between; gap: 16px; padding: 10px 12px; border-radius: 10px; text-decoration: none; font-size: 14px; color: var(--ink-dim); }
.lang__list a:hover, .lang__list a:focus-visible, .menu__langs a:hover { background: rgba(255,255,255,.06); color: var(--ink); }
.lang__list a[aria-current="true"], .menu__langs a[aria-current="true"] { color: var(--ink); }
.lang__list a span:last-child, .menu__langs a span:last-child { font-family: var(--display); letter-spacing: .08em; font-size: 12px; opacity: .7; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } }

/* Menu panel (glass) */
.menu { position: fixed; inset: 0; z-index: 120; display: flex; justify-content: center; align-items: flex-start; padding: 14px var(--m); }
.menu[hidden] { display: none; }
.menu__scrim { position: absolute; inset: 0; background: rgba(4,4,6,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.menu__panel { position: relative; width: min(100%, 1080px); max-height: calc(100svh - 28px); overflow: auto; padding: clamp(18px, 2.4vw, 32px); border-radius: 26px !important; transform-origin: 50% 0; }
.menu__top { display: flex; justify-content: space-between; align-items: center; }
.menu__close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255,255,255,.06); border: 0; color: var(--ink); cursor: pointer; }
.menu__close:hover { background: var(--ink); color: var(--ground); }
.menu__close svg { width: 18px; height: 18px; }
.menu__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 4vw, 64px); margin-top: 24px; }
.menu__links { display: grid; align-content: start; }
.menu__links a { display: flex; align-items: baseline; gap: 18px; padding: 10px 0; font-size: clamp(32px, 4vw, 54px); line-height: 1; font-weight: 600; text-transform: uppercase; text-decoration: none; color: var(--ink); border-bottom: 1px solid rgba(255,255,255,.06); transition: color 200ms ease, padding 400ms var(--ease-expo); }
.menu__links a span { font-size: 12px; font-weight: 400; letter-spacing: .1em; color: var(--ink-dim); width: 2.2em; }
.menu__links a:hover { color: var(--red); padding-left: 10px; }
.menu__side { display: grid; align-content: start; gap: 12px; }
.menu__label { margin-top: 8px; }
.qform { display: grid; gap: 10px; }
.qform input { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.1); font-size: 15px; }
.qform input::placeholder { color: rgba(242,238,230,.45); }
.qform input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.qform__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qform__btns .btn { width: 100%; }
.menu__langs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; list-style: none; margin: 0; padding: 0; }
.menu__clocks { line-height: 1.8; }

/* Custom cursor: only inside dedicated zones, only with a mouse */
html.has-cursor [data-cursor], html.has-cursor [data-cursor] * { cursor: none; }

/* ---------- §1 Hero: red hook, white marker note, hand marks ---------- */
.hero { --hero-h: max(100svh, 640px); position: relative; min-height: var(--hero-h); display: flex; align-items: center; overflow: hidden; padding: calc(76px + 3vh) 0 5vh; }
.hero__in { position: relative; width: min(100% - 2 * var(--m), var(--wrap)); }
.hero__h1 { margin: 0; font-weight: inherit; }
.hero__hook { display: block; color: var(--red); font-size: clamp(76px, 13vw, 220px); line-height: .84; font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; }
.hero__line { display: block; }
.hero__line:nth-child(2) { padding-left: 8%; }
.hero__sub { display: block; max-width: 30ch; margin: 28px 0 0 auto; font-size: var(--fs-lead); line-height: 1.35; font-weight: 300; text-transform: none; color: var(--ink); text-align: left; }
.hero__hand { position: absolute; left: 22%; top: 30%; z-index: 2; font-size: clamp(28px, 3.6vw, 60px); transform: rotate(-7deg); white-space: nowrap; text-shadow: 0 2px 18px rgba(14,14,16,.5); }
.hero__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 40px; }
.hero__actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.clock { white-space: nowrap; }
.clock time { color: var(--ink); }
.hero__art { position: absolute; right: -4%; bottom: -6%; width: min(34%, 420px); margin: 0; z-index: 1; pointer-events: none; }
.hero__art img { width: 100%; height: auto; }
.hero__art img.is-ink { filter: invert(1); mix-blend-mode: screen; }
.hero--clone, .hero--clone * { pointer-events: none !important; }

/* ---------- §2 Intro / manifesto ---------- */
.intro__stage { display: flex; flex-direction: column; justify-content: center; }
.intro__swap { display: grid; gap: .3em; padding-inline: var(--m); font-size: clamp(44px, 7.4vw, 132px); line-height: .9; font-weight: 600; text-transform: uppercase; letter-spacing: -.01em; }
.intro__swap > * { grid-column: 1; font: inherit; }
.intro__b { color: var(--red); }
.is-swapping .intro__swap { gap: 0; }
.is-swapping .intro__swap > * { grid-row: 1; align-self: center; }
.sl { display: block; overflow: clip; padding-block: .05em; margin-block: -.05em; }
.sw { display: inline-block; white-space: nowrap; }
.sc { display: inline-block; will-change: transform; }
.intro__foot { margin-top: clamp(40px, 6vh, 80px); display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gut); align-items: end; }
.intro__sub { grid-column: 1 / span 4; }
.stats { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); column-gap: var(--gut); }
.stat { display: flex; flex-direction: column-reverse; gap: 6px; }
.stat dd { font-size: clamp(44px, 4.4vw, 72px); line-height: .9; font-weight: 600; }
.stat dt { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-dim); }

/* ---------- §3 Services ---------- */
.svc-list { display: grid; gap: 4px; }
.svc__link { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gut); align-items: center; border-radius: 14px; padding: 14px clamp(12px, 1.4vw, 20px); text-decoration: none; background: transparent; transition: background-color 400ms ease; }
.svc__link:hover, .svc__link:focus-visible { background: var(--surface); }
.svc__idx { grid-column: 1; align-self: start; padding-top: .5em; }
.svc__icon { grid-column: 2 / span 2; width: clamp(56px, 5vw, 80px); aspect-ratio: 1; perspective: 600px; }
.svc__icon-in { width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; }
.svc__icon svg, .svc__icon img { width: 100%; height: 100%; object-fit: contain; }
.svc__name { grid-column: 4 / span 4; font-size: clamp(22px, 2vw, 30px); line-height: .95; font-weight: 500; text-transform: uppercase; letter-spacing: 0; transition: color var(--t-hover) ease, letter-spacing 600ms var(--ease-expo); }
.svc__name-in { display: block; }
.svc__link:hover .svc__name, .svc__link:focus-visible .svc__name { color: var(--red); letter-spacing: .03em; }
.svc__def { grid-column: 8 / -1; max-width: 46ch; font-size: 15px; }

/* ---------- §6 Covers (test covers until real work is uploaded) ---------- */
.cover { position: relative; container-type: inline-size; aspect-ratio: 1; background: var(--c-bg); color: var(--c-fg); overflow: hidden; }
.cover--45 { aspect-ratio: 4 / 5; }
.rec__cover .cover { aspect-ratio: auto; border-radius: 0; }
.rec__cover .cover__name { font-size: 15cqw; }
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover__name { position: absolute; left: 6cqw; right: 6cqw; bottom: 5cqw; font-size: 16cqw; line-height: .88; font-weight: var(--c-w, 600); text-transform: uppercase; letter-spacing: -.005em; overflow-wrap: break-word; }
.cover--45 .cover__name { font-size: 12.5cqw; overflow-wrap: normal; }
.cover__idx, .cover__cap { position: absolute; top: 5.5cqw; font-size: max(9px, 3.4cqw); line-height: 1; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }
.cover__idx { left: 6cqw; }
.cover__cap { right: 6cqw; }
.cover__mark { position: absolute; top: 15cqw; right: 6cqw; width: 34cqw; height: 34cqw; fill: currentColor; }

/* ---------- §4 Work: arc → shelf ---------- */
.work.is-staged { padding-top: 0; margin-top: var(--sec); }
.work { position: relative; isolation: isolate; }
.work::before { content: ""; position: absolute; inset: 6% 0 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 45% at 50% 55%, rgba(225,38,28,.12) 0%, rgba(120,40,30,.06) 40%, rgba(8,8,10,0) 75%), linear-gradient(180deg, rgba(8,8,10,0) 0%, rgba(30,24,22,.5) 50%, rgba(8,8,10,0) 100%); }
.work__stage { position: relative; padding-top: calc(var(--nav-h) + 24px); padding-bottom: 32px; }
.work__hook { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; align-items: flex-end; gap: 8px 28px; flex-wrap: wrap; transform-origin: 0 0; position: relative; z-index: 3; }
.work__hand { transform: rotate(-4deg) translateY(.12em); }
.shelf-wrap { --spine: clamp(22px, 1.8vw, 28px); --S: min(310px, 62vw); --H: calc(var(--S) * 4 / 3); position: relative; margin-top: 8px; }
.shelf { position: relative; display: flex; justify-content: center; align-items: center; height: calc(var(--H) + 40px); touch-action: pan-y; perspective: 1400px; perspective-origin: 50% 40%; }
.shelf:focus-visible { outline-offset: 10px; border-radius: 16px; }
.rec { position: relative; flex: none; width: calc(var(--S) * .32); height: var(--H); transform-style: preserve-3d; cursor: pointer; }
.rec.is-active { width: calc(var(--S) * 1.32); }
.rec__drop, .rec__turn { position: absolute; inset: 0; transform-style: preserve-3d; }
.rec__box { position: absolute; left: 50%; top: 0; width: var(--S); height: var(--H); margin-left: calc(var(--S) / -2); transform-style: preserve-3d; transform: rotateY(62deg); }
.rec.is-active .rec__box { transform: rotateY(0deg); }
.rec__cover { position: absolute; inset: 0; transform: translateZ(calc(var(--spine) / 2)); backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 1px; overflow: hidden; box-shadow: 0 40px 70px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06); }
.rec__cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 18%, rgba(255,255,255,0) 32%, rgba(0,0,0,0) 70%, rgba(0,0,0,.28) 100%); mix-blend-mode: soft-light; }
.rec__cover .cover { width: 100%; height: 100%; }
.rec__spine { position: absolute; top: 0; bottom: 0; left: 50%; width: var(--spine); margin-left: calc(var(--spine) / -2); transform: rotateY(-90deg) translateZ(calc(var(--S) / 2)); backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--spine-bg, var(--surface-3)); color: var(--spine-ink, var(--ink)); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 12px 0; overflow: hidden; border-radius: 1px 0 0 1px; box-shadow: inset 1px 0 0 rgba(255,255,255,.35), inset -1px 0 0 rgba(0,0,0,.35); }
.rec__spine > span { writing-mode: vertical-rl; rotate: 180deg; white-space: nowrap; }
.rec__spine-name { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; overflow: hidden; padding-block: 8px; }
.rec__spine-meta { font-size: 9px; line-height: 1; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }
.shelf-info { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gut); align-items: center; margin-top: 20px; min-height: 0; }
.shelf-info__name { grid-column: 1 / span 6; font-size: clamp(36px, 4.2vw, 68px); line-height: .95; font-weight: 600; text-transform: uppercase; text-wrap: balance; }
.shelf-info__svc { grid-column: 7 / span 3; }
.shelf-info__year { grid-column: 10 / span 1; }
.shelf-info__link { grid-column: 11 / span 2; justify-self: end; }

/* ---------- §6 Journal ---------- */
.journal__ctrl { display: flex; align-items: center; gap: 8px; }
.journal__ctrl .link { margin-left: 16px; }
.qbtn { border-radius: var(--radius); width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); border: 0; cursor: pointer; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.qbtn:hover { background: var(--ink); color: var(--ground); }
.qbtn:disabled { opacity: .35; cursor: default; background: var(--surface-2); color: var(--ink); }
.qbtn svg { width: 22px; height: 22px; }
.jtrack { display: flex; gap: var(--gut); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-inline: max(var(--m), calc((100% - var(--wrap)) / 2)); scroll-padding-inline: max(var(--m), calc((100% - var(--wrap)) / 2)); padding-block: 24px 32px; scrollbar-width: none; cursor: grab; }
.jtrack::-webkit-scrollbar { display: none; }
.jtrack.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.jtrack.is-dragging a { pointer-events: none; }
.jcard { flex: none; width: clamp(220px, 20vw, 280px); scroll-snap-align: start; }
.jcard__link { display: flex; flex-direction: column; gap: 20px; text-decoration: none; transition: transform 600ms var(--ease-expo); }
.jcard--top .jcard__text { order: -1; }
.jcard--top .jcard__link { padding-bottom: 48px; }
.jcard--bottom .jcard__link { padding-top: 48px; }
.jcard__link:hover, .jcard__link:focus-visible { transform: translateY(-12px); }
.jcard__media { overflow: clip; background: var(--surface); border-radius: 14px; }
.jcard__media .cover { transition: transform 900ms var(--ease-expo); }
.jcard__link:hover .jcard__media .cover { transform: scale(1.05); }
.jcard__title { margin-top: 8px; font-size: clamp(18px, 1.4vw, 22px); line-height: 1.15; font-weight: 500; text-transform: uppercase; }
.jcard__title span { text-decoration: underline 2px; text-underline-offset: .2em; text-decoration-color: transparent; transition: text-decoration-color 300ms ease; }
.jcard__link:hover .jcard__title span { text-decoration-color: var(--red); }


/* ---------- Panels: rounded sheets inset from the screen edges (paper or red) ---------- */
.is-light, .is-red { position: relative; isolation: isolate; padding-block: var(--sec); margin-block: calc(var(--sec) * .5); }
.is-light::before, .is-red::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--sheet-r, var(--panel-r)); clip-path: inset(0 var(--sheet-x, var(--m)) 0 var(--sheet-x, var(--m)) round var(--sheet-r, var(--panel-r))); }
.is-light::before { background: var(--paper); }
.is-red::before { background: var(--panel-red); }
.is-light .container, .is-red .container { width: min(100% - 4 * var(--m), var(--wrap)); }
.is-light, .is-red { color: var(--ink-dark); --ink-dim: var(--ink-dark-dim); }
.is-light .meta, .is-red .meta { color: var(--ink-dark-dim); }
.is-light .hand, .is-red .hand { color: var(--ink-dark); }
.is-light .svc__link:hover, .is-light .svc__link:focus-visible { background: var(--paper-2); }
.is-light .svc__link:hover .svc__name, .is-light .svc__link:focus-visible .svc__name { color: var(--red-deep); }
.is-light .glass { background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.55)); border-color: rgba(18,18,20,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(18,18,20,.06), 0 18px 40px -16px rgba(18,18,20,.18), 0 50px 90px -40px rgba(18,18,20,.18); }
.is-light .faq__tab { color: var(--ink-dark-dim); }
.is-light .faq__tab:hover { color: var(--ink-dark); background: rgba(18,18,20,.05); }
.is-light .faq__tab[aria-selected="true"] { color: #fff; background: var(--red-action); box-shadow: none; }
.is-light .link::after, .is-red .link::after { background: var(--ink-dark); }
.is-light .btn:hover { background: var(--ink-dark); color: var(--paper); }
.is-light .ph, .is-red .ph-num { outline-color: var(--ink-dark); -webkit-text-stroke-color: var(--ink-dark); }
.is-red .intro__b { color: var(--ink-dark); }
.is-red .intro__a { color: var(--paper); }
.is-red .intro__swap { padding-inline: calc(var(--m) * 2); }

/* ---------- Glass (Apple-style): only where something sits behind it ---------- */
.glass { position: relative; background: linear-gradient(180deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.018) 100%), rgba(14,14,17,.72); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.35), 0 16px 32px -12px rgba(0,0,0,.55), 0 48px 96px -32px rgba(0,0,0,.6); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: #121215; } }
.count { font-size: .42em; font-weight: 400; color: var(--ink-dim); vertical-align: .9em; letter-spacing: .04em; margin-left: .2em; }

/* Work: glass info panel */
.shelf-info.glass { padding: 22px 28px; margin-top: 28px; }
.shelf-info.glass .shelf-info__name { font-size: clamp(22px, 2vw, 30px); }

/* ---------- §5 Process: stacked glass cards ---------- */
.process { position: relative; }

/* ---------- §7 FAQ: tabs + one fixed-height glass stage ---------- */
.faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gut); align-items: stretch; }
.faq__tabs { grid-column: 1 / span 5; display: grid; gap: 4px; align-content: start; }
.faq__tab { text-align: left; background: transparent; border: 0; padding: 14px 18px; font-size: 15px; line-height: 1.25; font-weight: 400; text-transform: uppercase; letter-spacing: .02em; color: var(--ink-dim); cursor: pointer; border-radius: 14px; transition: color var(--t-hover) ease, background-color var(--t-hover) ease; }
.faq__tab:hover { color: var(--ink); background: rgba(255,255,255,.04); }
.faq__tab[aria-selected="true"] { color: #fff; background: var(--red-action); box-shadow: none; }
.faq__stage { grid-column: 6 / -1; padding: clamp(24px, 3vw, 40px); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; }
.faq__panels { position: relative; z-index: 1; display: grid; }
.faq__panel + .faq__panel { margin-top: 40px; }
.faq__q { font-size: clamp(22px, 2vw, 30px); line-height: 1; font-weight: 600; text-transform: uppercase; margin-bottom: 18px; max-width: 18ch; }
.faq__panel .lead { max-width: 46ch; }
.faq__cta { display: flex; align-items: center; gap: 24px; margin-top: 28px; flex-wrap: wrap; }
.js .faq__panel { grid-area: 1 / 1; margin: 0; visibility: hidden; opacity: 0; transition: opacity 500ms var(--ease-out), visibility 0s linear 500ms; }
.js .faq__panel.is-active { visibility: visible; opacity: 1; transition: opacity 500ms var(--ease-out); }

/* ---------- §8 Contact: call first, compact brief ---------- */
.contact { position: relative; overflow-x: clip; }
.pwall { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.polaroid { position: absolute; left: var(--l); top: var(--t); width: var(--w); rotate: var(--r); border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; background: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 18px 40px -18px rgba(0,0,0,.6); will-change: transform; }
.polaroid--r { left: auto; right: var(--l); }
.contact__col { position: relative; z-index: 1; width: min(100% - 2 * var(--m), 700px); margin-inline: auto; }
.contact__head { text-align: center; margin-bottom: 36px; }
.contact__title { display: block; font-family: var(--hand); font-weight: 400; text-transform: none; color: var(--red); font-size: clamp(56px, 8vw, 128px); line-height: .9; font-weight: 700; text-transform: uppercase; }
.contact__head .hand { display: inline-block; transform: rotate(-3deg); margin-top: 10px; }
.contact__title { display: inline-block; transform-origin: 50% 0; }
.contact.is-staged { padding-top: 0; margin-top: var(--sec); padding-bottom: calc(var(--sec) * 1.5); }
.contact.is-staged .pwall { z-index: 3; }
.contact.is-staged .contact__col { z-index: 1; }
.contact.is-staged .contact__col { padding-top: calc(var(--nav-h) + 40px); }
.book { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 24px 24px 28px; flex-wrap: wrap; }
.book__title { font-size: 20px; line-height: 1.15; font-weight: 500; text-transform: uppercase; }
.book__text { margin-top: 4px; color: var(--ink-dim); }
.contact__or { text-align: center; margin: 28px 0 16px; }
.brief-box { display: grid; padding: clamp(22px, 3vw, 36px); }
.brief-box > * { grid-area: 1 / 1; }
.brief { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 20px; }
.brief[hidden], .success[hidden] { display: grid; visibility: hidden; pointer-events: none; }
.field { display: grid; gap: 8px; align-content: start; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend { font-weight: 400; font-size: 14px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-dim); }
.field legend { margin-bottom: 10px; padding: 0; }
.opt { text-transform: none; letter-spacing: .02em; }
.field input, .field textarea { width: 100%; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 13px 16px; min-height: 52px; font-weight: 300; transition: border-color var(--t-hover) ease, background-color var(--t-hover) ease; }
.field textarea { min-height: 96px; resize: none; }
.field input:hover, .field textarea:hover { border-color: rgba(255,255,255,.2); }
.field [aria-invalid="true"] { border-color: var(--red); }
.field__err { display: flex; gap: 8px; align-items: baseline; font-size: 14px; min-height: 1.3em; }
.field__err:empty::before { display: none; }
.field__err::before { content: ""; width: 7px; height: 7px; background: var(--red); flex: none; transform: translateY(-1px); }
.chipset { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: var(--radius); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); text-transform: uppercase; font-size: 13px; letter-spacing: .08em; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, border-color var(--t-hover) ease; }
.chip:hover span { background: rgba(255,255,255,.1); }
.chip input:checked + span { background: var(--red-action); border-color: var(--red-action); color: var(--on-red); }
.chip input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 3px; }
.brief__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.brief__actions .btn { width: 100%; }
.success { align-content: center; justify-items: start; gap: 16px; }
.success .hand { transform: rotate(-4deg); }

/* Booking dialog */
.bookdlg { width: min(100% - 32px, 760px); max-height: min(100svh - 48px, 860px); padding: 0; color: var(--ink); background: linear-gradient(180deg, rgba(34,34,38,.82), rgba(18,18,20,.88)); overflow: hidden; }
.bookdlg[open] { display: flex; flex-direction: column; }
.bookdlg::backdrop { background: rgba(5,5,6,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.bookdlg__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 20px 16px 28px; border-bottom: 1px solid rgba(255,255,255,.07); }
.bookdlg__title { font-size: 22px; font-weight: 500; text-transform: uppercase; }
.bookdlg__close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); background: rgba(255,255,255,.07); border: 0; cursor: pointer; }
.bookdlg__close:hover { background: var(--ink); color: var(--ground); }
.bookdlg__close svg { width: 18px; height: 18px; }
.bookdlg__body { flex: 1; min-height: 0; overflow: auto; }
.bookdlg__body iframe { display: block; width: 100%; height: min(70svh, 700px); border: 0; background: #fff; }
.bookdlg__empty { padding: 40px 28px 48px; display: grid; gap: 16px; justify-items: start; }
.bookdlg[open] { animation: dlg-in 420ms var(--ease-expo); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(18px) scale(.98); } }

/* ---------- §8 Footer ---------- */
.foot { position: relative; padding-top: var(--sec); }
.foot__mark { position: relative; isolation: isolate; padding-inline: var(--m); }
.foot__phrase { position: relative; z-index: 1; display: grid; gap: .1em; max-width: none; text-transform: none; }
.foot__a { font-family: var(--display); font-weight: 600; font-size: clamp(30px, 4vw, 66px); line-height: .95; text-transform: uppercase; letter-spacing: -.005em; color: var(--ink); }
.foot__b { font-family: var(--hand); font-weight: 400; font-size: clamp(30px, 4.2vw, 70px); line-height: 1.05; color: var(--red); transform: rotate(-2deg); transform-origin: 0 50%; }
.foot__logo { position: relative; z-index: 2; width: min(40vw, 560px); margin: clamp(-140px, -7vw, -36px) var(--m) 0 auto; color: var(--ink); mix-blend-mode: difference; }
.foot__logo svg { width: 100%; height: auto; fill: currentColor; overflow: visible; }
.foot__btns { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: clamp(40px, 5vw, 72px); }
.foot__info { margin-top: clamp(48px, 6vw, 88px); row-gap: 40px; }
.offices { grid-column: 1 / span 7; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gut); }
.office__city { font-weight: 500; font-size: 18px; line-height: 1.2; text-transform: uppercase; }
.office__addr, .office__time { margin-top: 8px; }
.foot__contact { grid-column: 9 / -1; display: grid; gap: 18px; align-content: start; }
.foot__email { position: relative; justify-self: start; font-size: var(--fs-lead); font-weight: 500; text-decoration: none; padding-bottom: 4px; }
.foot__email::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 400ms var(--ease-out); }
.foot__email:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.foot__social { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot__base { display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; padding: 40px 0 48px; }
.foot__legal, .foot__lang { display: flex; gap: 20px; flex-wrap: wrap; }
.foot__legal a, .foot__lang a { text-decoration: none; }
.foot__legal a:hover, .foot__lang a:hover, .foot__lang a[aria-current="true"] { color: var(--ink); }

/* Work: every project at a glance */

/* Manifesto: one sentence with project thumbnails between the words */
.mani__text { font-size: clamp(34px, 4.4vw, 72px); line-height: 1.1; font-weight: 500; text-transform: uppercase; letter-spacing: -.005em; max-width: 24ch; }
.mani__text .kw { font-style: normal; }
.js .mani__text .wd { opacity: .22; }
.mani__text .kw.is-lit { color: var(--red); }
.mthumb { display: inline-block; width: 1.5em; height: 1em; vertical-align: -.1em; margin: 0 .06em; border-radius: .18em; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 10px 24px -10px rgba(0,0,0,.7); transition: transform 500ms var(--ease-expo); position: relative; }
.mthumb:hover { transform: scale(1.6) rotate(-4deg); z-index: 2; }
.mthumb .cover { width: 100%; height: 100%; aspect-ratio: auto; }
.mthumb .cover__idx, .mthumb .cover__cap, .mthumb .cover__name { display: none; }
.mani .stats { margin-top: clamp(40px, 5vw, 72px); max-width: 720px; }

/* Footer: animated logo + three clear zones */
.foot__logo .lg-l { fill: currentColor; transform-box: fill-box; transform-origin: 50% 100%; transition: transform 900ms cubic-bezier(.2,.8,.2,1); }
.foot__logo:hover .lg-l:nth-child(1) { transform: translateY(-4%); }
.foot__logo:hover .lg-l:nth-child(2) { transform: translateY(-8%) rotate(-2deg); }
.foot__logo:hover .lg-l:nth-child(3) { transform: translateY(-5%); }
.foot__logo:hover .lg-l:nth-child(4) { transform: translateY(-9%) rotate(2deg); }
.foot__zones { display: grid; grid-template-columns: 1.7fr 1fr .6fr; gap: clamp(24px, 4vw, 64px); margin-top: clamp(48px, 6vw, 88px); }
.foot__zone { display: grid; gap: 12px; align-content: start; }
.offices { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px 20px; }
.offices .office__city { font-size: 15px; font-weight: 500; letter-spacing: .04em; }
.offices .office__addr { display: none; }
.offices .office__time { margin-top: 2px; }
.foot__phone { font-size: 16px; text-decoration: none; color: var(--ink-dim); }
.foot__phone:hover { color: var(--ink); }
.foot__social { display: grid; gap: 4px; justify-items: start; }
.foot__base { border-top: 1px solid rgba(255,255,255,.06); margin-top: clamp(40px, 5vw, 64px); }
.hood { margin: 0; color: var(--ink-dim); }
.hood span { color: var(--ink); }

/* Hero: chrome objects at the screen edges */
.chromes { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.chrome { position: absolute; display: block; height: auto; will-change: transform; pointer-events: none; }
.chrome__img { display: block; width: 100%; height: auto; filter: drop-shadow(0 28px 40px rgba(0,0,0,.6)); pointer-events: auto; cursor: grab; user-select: none; -webkit-user-drag: none; touch-action: none; }
.chrome__img.is-grabbed { cursor: grabbing; }
.chrome--heart { width: clamp(110px, 10vw, 180px); left: -2vw; top: 30%; rotate: -14deg; }
.chrome--sphere { width: clamp(120px, 11vw, 200px); right: -3vw; top: 58%; }
.chrome--star { width: clamp(80px, 7.5vw, 140px); right: 5vw; top: 18%; rotate: 8deg; }
.hero__in { z-index: 1; }

/* Clients strip under the hero */
.clients { position: absolute; left: 0; right: 0; bottom: 24px; z-index: 1; display: grid; gap: 14px; justify-items: center; }
.clients__label { text-align: center; }
.clients__track { width: min(100%, 980px); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.clients__row { display: flex; width: max-content; gap: clamp(36px, 4vw, 64px); align-items: center; padding-right: clamp(36px, 4vw, 64px); animation: marquee 38s linear infinite; }
.clients__track:hover .clients__row { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.clients__track img { height: 26px; width: auto; opacity: .6; filter: grayscale(1) brightness(2); transition: opacity 300ms ease; }
.clients__track img:hover { opacity: 1; }
.client-ph { font-family: var(--display); font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: rgba(242,238,230,.38); outline: 1px dashed rgba(225,38,28,.5); outline-offset: 4px; padding: 2px 4px; }
.hero { padding-bottom: 120px; }

/* Process: tinted glass cards side by side */
.prow { position: relative; }
.prow__wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.prow__list { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(14px, 1.6vw, 24px); padding-block: 28px 40px; }
.pc { position: relative; min-height: 300px; padding: 22px 22px 24px; border-radius: 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; color: var(--ink); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 4px rgba(0,0,0,.35), 0 24px 48px -18px rgba(0,0,0,.65); transform-style: preserve-3d; will-change: transform; transition: border-color 300ms ease, background-color 300ms ease; }
.pc { rotate: var(--r, 0deg); }
.pc--1 { --r: -3deg; background: linear-gradient(160deg, rgba(225,38,28,.42), rgba(120,16,12,.32)); }
.pc--2 { background: linear-gradient(160deg, rgba(214,182,140,.32), rgba(110,86,58,.26)); --r: 2deg; margin-top: 48px; }
.pc--3 { background: linear-gradient(160deg, rgba(120,146,196,.34), rgba(48,62,98,.3)); --r: -2deg; margin-top: 12px; }
.pc--4 { background: linear-gradient(160deg, rgba(150,150,160,.26), rgba(40,40,46,.4)); --r: 3deg; margin-top: 56px; }
.pc:hover { border-color: rgba(255,255,255,.22); }
.pc__num { position: absolute; top: 20px; left: 22px; font-family: var(--display); font-size: 13px; letter-spacing: .12em; color: rgba(242,238,230,.75); }
.pc__name { font-size: clamp(24px, 2.2vw, 34px); line-height: .95; font-weight: 600; text-transform: uppercase; }
.pc__time { color: rgba(242,238,230,.72); }
.pc__text { font-size: 15px; line-height: 1.45; color: rgba(242,238,230,.92); }
.pc__sticker { position: absolute; top: -16px; right: 18px; padding: 8px 14px; border-radius: 999px; font-family: var(--display); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--red-action); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 20px -8px rgba(0,0,0,.6); rotate: 5deg; }
.pc__sticker--live { background: linear-gradient(180deg, #f4f4f6, #b9bcc3); color: var(--ground); rotate: -6deg; }
.prow__spark { position: absolute; width: 76px; height: auto; left: 49.5%; top: 52%; z-index: 2; translate: -50% -50%; filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)); pointer-events: none; }

/* Journal: All articles button */
.journal__more { display: flex; justify-content: center; margin-top: 12px; }
.morebtn { display: inline-flex; align-items: center; gap: 10px; padding: 8px 8px 8px 26px; border-radius: 999px; text-decoration: none; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 16px 32px -16px rgba(0,0,0,.7); font-family: var(--display); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; transition: border-color 300ms ease, padding 500ms var(--ease-expo); }
.morebtn__label { position: relative; display: grid; overflow: hidden; height: 1.3em; line-height: 1.3em; }
.morebtn__label > span { grid-area: 1 / 1; transition: transform 500ms var(--ease-expo); }
.morebtn__label > span:last-child { transform: translateY(110%); color: var(--red); }
.morebtn__icon { width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center; background: var(--red-action); color: #fff; transition: transform 500ms var(--ease-expo); }
.morebtn__icon svg { width: 18px; height: 18px; }
.morebtn:hover { border-color: rgba(255,255,255,.28); padding-left: 32px; }
.morebtn:hover .morebtn__label > span:first-child { transform: translateY(-110%); }
.morebtn:hover .morebtn__label > span:last-child { transform: translateY(0); }
.morebtn:hover .morebtn__icon { transform: rotate(-45deg); }

/* Cursor: a ring that inverts what is under it + a label with fixed contrast */
.cursor { position: fixed; left: 0; top: 0; z-index: 150; width: 0; height: 0; pointer-events: none; }
.cursor__ring { position: absolute; left: -56px; top: -56px; width: 112px; height: 112px; border-radius: 50%; background: #fff; mix-blend-mode: difference; transform: scale(0); transition: transform 500ms cubic-bezier(.2,.8,.2,1); }
.cursor__label { position: absolute; left: 0; top: 0; translate: -50% -50%; padding: 6px 12px; border-radius: 999px; background: var(--ground); color: var(--ink); font-family: var(--display); font-size: 16px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: scale(.6); transition: opacity 300ms ease, transform 500ms cubic-bezier(.2,.8,.2,1); }
.cursor.is-on .cursor__ring { transform: scale(1); }
.cursor.is-on .cursor__label { opacity: 1; transform: scale(1); }
.cursor.is-down .cursor__ring { transform: scale(.82); }


/* Availability status */
.status { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px; border-radius: 999px; font-family: var(--display); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.status i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61,220,132,.6); animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(61,220,132,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); } }

/* Process: disciplines on the Create card */
.pc__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pc__tags span { padding: 4px 9px; border-radius: 999px; font-family: var(--display); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); }

/* Footer logo: letters rise in, wave on hover, never clipped */
.foot__logo { overflow: visible; }
.foot__logo:hover .lg-l:nth-child(1) { transition-delay: 0ms; }
.foot__logo:hover .lg-l:nth-child(2) { transition-delay: 60ms; transform: translateY(-6%) rotate(-2deg); }
.foot__logo:hover .lg-l:nth-child(3) { transition-delay: 120ms; transform: translateY(-5%); }
.foot__logo:hover .lg-l:nth-child(4) { transition-delay: 180ms; transform: translateY(-8%) rotate(2deg); }
.foot__logo:hover .lg-l:nth-child(5) { transition-delay: 240ms; transform: translateY(-4%); }

/* Gravity switch + physics layer */
.gravity--bar { min-height: 40px; padding: 0 4px; }
.gravity--dock.glass { min-height: 50px; padding: 0 16px; border-radius: 999px !important; opacity: 0; transform: translateY(-20px) scale(.92); pointer-events: none; transition: opacity 400ms var(--ease-out) 60ms, transform 550ms var(--ease-expo) 60ms; color: var(--ink); }
html.is-shrunk .gravity--dock.glass { opacity: 1; transform: none; pointer-events: auto; }
.gravity { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; color: var(--ink-dim); font-family: var(--display); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; padding: 6px 0; }
.gravity:hover { color: var(--ink); }
.gravity__switch { position: relative; width: 34px; height: 20px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); transition: background-color 300ms ease; }
.gravity__switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); transition: transform 400ms var(--ease-expo); }
.gravity[aria-pressed="true"] { color: var(--ink); }
.gravity[aria-pressed="true"] .gravity__switch { background: var(--red-action); }
.gravity[aria-pressed="true"] .gravity__switch::after { transform: translateX(14px); }
.physics { position: fixed; inset: 0; z-index: 140; pointer-events: none; overflow: hidden; }
.physics__body { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: grab; user-select: none; touch-action: none; will-change: transform; }
.physics__body img, .physics__body .chrome__img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.55)); -webkit-user-drag: none; pointer-events: none; }
.physics__body > .pc__sticker, .physics__body > .physics__sticker { position: static; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; rotate: none; margin: 0; pointer-events: none; }
.physics__sticker { min-height: 46px; }
.grav-ph { visibility: hidden; }
/* While gravity is on, the loop clone shows no objects: the real ones are on screen already */
html.gravity-on .hero--clone .chromes { visibility: hidden; }
html.gravity-on .hero--clone .status { visibility: visible; }
.physics__sticker { display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; border-radius: 999px; font-family: var(--display); font-size: 16px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: #fff; background: var(--red-action); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 12px 24px -10px rgba(0,0,0,.6); }
.physics__sticker--chrome { background: linear-gradient(180deg, #f4f4f6, #b9bcc3); color: var(--ground); }
.physics__sticker--ink { background: var(--ink); color: var(--ground); }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .intro__sub { grid-column: 1 / -1; margin-bottom: 32px; }
  .stats { grid-column: 1 / -1; }
  .svc__icon { grid-column: 2 / span 2; }
  .svc__name { grid-column: 4 / -1; }
  .svc__def { grid-column: 4 / -1; margin-top: 12px; }
  .shelf-info__name { grid-column: 1 / -1; margin-bottom: 12px; }
  .shelf-info__svc { grid-column: 1 / span 6; }
  .shelf-info__year { grid-column: 7 / span 2; }
  .shelf-info__link { grid-column: 9 / span 4; }
  .offices, .foot__contact { grid-column: 1 / -1; }
}
@media (max-width: 1023px) {
  .nav__bar { grid-template-columns: auto 1fr auto; }
  .nav__burger { justify-self: center; }
  .nav__end { gap: 8px; }
  .nav__links { display: none; }
  .nav__burger { display: inline-flex; }
  .nav__end .btn { min-height: 38px; padding: 0 14px; font-size: 12px; border-radius: 999px; }
  .menu__grid { grid-template-columns: 1fr; }
  .foot__zones { grid-template-columns: 1fr 1fr; }
  .foot__zone:first-child { grid-column: 1 / -1; }
  .faq__tabs { grid-column: 1 / -1; display: flex; overflow-x: auto; gap: 8px; margin-bottom: 20px; scrollbar-width: none; }
  .faq__tabs::-webkit-scrollbar { display: none; }
  .faq__tab { flex: none; max-width: 260px; font-size: 15px; padding: 12px 16px; background: rgba(255,255,255,.04); }
  .faq__stage { grid-column: 1 / -1; }
  .pwall .polaroid:nth-child(3n+2) { display: none; }
}
@media (max-width: 767px) {
  .prow__list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding: 30px var(--m) 30px; margin-inline: calc(var(--m) * -1); scrollbar-width: none; }
  .pc { flex: none; width: 78vw; scroll-snap-align: center; margin-top: 0 !important; }
  .prow__wire, .prow__spark { display: none; }
  .nav__dock { top: 10px; }
  .nav__pill.glass { max-width: calc(100vw - 24px); }
  .nav__bar { gap: 10px; }
  .lang__btn { padding: 0 8px; }
  .gravity--dock { display: none; }
  .gravity--bar .gravity__label { display: none; }
  .nav__pill .logo--mini { display: none; }
  .offices { grid-template-columns: 1fr 1fr; }
  .foot__zones { grid-template-columns: 1fr; }
  .hero { padding-top: calc(60px + 4vh); }
  .hero__hook { font-size: clamp(60px, 19vw, 120px); }
  .hero__hand { left: 8%; top: 22%; font-size: 26px; }
  .hero__sub { margin-left: 0; }
  .hero__art { width: 46%; }
  .is-light .container, .is-red .container { width: min(100% - 2 * var(--m) - 24px, var(--wrap)); }
  .is-light::before, .is-red::before { --sheet-x: 8px; }
  .foot__logo { width: min(72vw, 420px); margin-top: -24px; }
  .brief { grid-template-columns: 1fr; }
  .book .btn { width: 100%; }
  .bookdlg { width: 100%; max-height: 100svh; border-radius: 20px 20px 0 0; margin-bottom: 0; }
  .bookdlg__body iframe { height: 72svh; }
  .clock { display: inline; }
  .intro__swap { font-size: clamp(44px, 13vw, 96px); }
  .stats { grid-template-columns: 1fr; row-gap: 28px; }
  .svc__link { grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; row-gap: 8px; padding-inline: 0; }
  .svc__name { font-size: clamp(30px, 8.4vw, 40px); overflow-wrap: anywhere; }
  .svc__idx { display: none; }
  .svc__icon { grid-column: 1; grid-row: 1 / span 2; width: 64px; align-self: start; }
  .svc__name, .svc__def { grid-column: 2; margin: 0; }
  .shelf-wrap { --S: min(300px, 64vw); --slot: calc(var(--S) * .62); }
  .shelf { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: calc(50vw - var(--slot) / 2); height: calc(var(--S) + 8px); scrollbar-width: none; overscroll-behavior-x: contain; }
  .shelf::-webkit-scrollbar { display: none; }
  .rec, .rec.is-active { width: var(--slot); scroll-snap-align: center; }
  .shelf-info__svc, .shelf-info__year, .shelf-info__link { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }
  .jcard { width: calc((100vw - 2 * var(--m) - 14px) / 2); }
  .jcard__title { font-size: 15px; }
  .jcard--top .jcard__link { padding-bottom: 24px; } .jcard--bottom .jcard__link { padding-top: 24px; }
  .jcard .meta { font-size: 10px; }
  .offices { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px 10px; }
  .offices .office__city { font-size: 12px !important; letter-spacing: .02em; }
  .offices .office__time { font-size: 10px; }
}


/* ---------- Phone refinements ---------- */
@media (max-width: 767px) {
  /* Projects: a swipe carousel of full covers instead of the 3D shelf */
  .shelf-wrap { --S: 74vw; --H: calc(74vw * 4 / 3); }
  .shelf { perspective: none; height: auto; display: flex; gap: 12px; padding: 8px 13vw 12px; overflow-x: auto; scroll-snap-type: x mandatory; justify-content: flex-start; align-items: stretch; }
  .shelf:focus, .shelf:focus-visible { outline: none; }
  .rec, .rec.is-active { width: 74vw !important; height: auto; flex: none; scroll-snap-align: center; transform: none !important; opacity: 1 !important; }
  .rec__drop, .rec__turn { position: relative; inset: auto; transform: none !important; }
  .rec__box { position: relative !important; left: auto !important; top: auto; width: 100% !important; height: auto !important; margin: 0 !important; aspect-ratio: 3 / 4; transform: none !important; transition: scale 400ms var(--ease-expo), opacity 400ms ease; scale: .94; opacity: .55; }
  .rec.is-active .rec__box { scale: 1; opacity: 1; }
  .rec__spine { display: none; }
  .rec__cover { position: absolute; inset: 0; transform: none !important; border-radius: 6px; }
  .work__hook { align-items: flex-start; }

  /* How we work: room above the cards so the sticker and the hover lift are never clipped */
  .prow__list { padding-top: 48px !important; padding-bottom: 40px !important; }

  /* Hero objects: small and quiet at the edges */
  .chrome--heart { width: 22vw; left: -7vw; top: 16%; }
  .chrome--star { width: 15vw; right: 3vw; top: 11%; }
  .chrome--sphere { width: 24vw; right: -8vw; top: auto; bottom: 30%; }

  /* FAQ: every question visible, stacked */
  .faq__tabs { display: grid !important; overflow: visible !important; gap: 4px !important; margin-bottom: 16px; }
  .faq__tab { max-width: none !important; white-space: normal; font-size: 14px !important; padding: 12px 14px !important; }

  /* Contact: polaroids at the screen edges, the brief a little lower */
  .pwall .polaroid { width: 22vw !important; }
  /* Let's talk: all six polaroids, two arrows ‹ › around the title, the brief below the first screen */
  .pwall { bottom: auto; height: 100svh; }
  .pwall .polaroid:nth-child(n) { display: block; }
  .pwall .polaroid { width: 23vw !important; }
  .pwall .polaroid:nth-child(1) { left: 5vw; top: 13%; rotate: -10deg; }
  .pwall .polaroid:nth-child(2) { left: -4vw; top: 50%; rotate: 2deg; }
  .pwall .polaroid:nth-child(3) { left: 5vw; top: 69%; rotate: 10deg; }
  .pwall .polaroid:nth-child(4) { left: auto; right: 5vw; top: 13%; rotate: 10deg; }
  .pwall .polaroid:nth-child(5) { left: auto; right: -4vw; top: 50%; rotate: -2deg; }
  .pwall .polaroid:nth-child(6) { left: auto; right: 5vw; top: 69%; rotate: -10deg; }
  .contact.is-staged .contact__col { padding-top: 36svh; }
  .contact.is-staged .contact__head { margin-bottom: 44svh; }
  .contact__head { margin-bottom: 56px; }

  .gravity--menu { display: inline-flex; }
}
.gravity--menu { margin-top: 4px; justify-self: start; }
@media (max-width: 400px) { .nav__burger-label { display: none; } .logo svg { height: 26px; } }

@media (prefers-reduced-motion: reduce) {
  .clients__row { animation: none; }
  .gravity { display: none; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* WordPress: keep the fixed nav below the admin bar for logged-in editors */
.admin-bar .nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .nav { top: 46px; } }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.form-err { min-height: 1.2em; margin: 0 0 10px; color: var(--red); font-size: 14px; }

/* =====================================================================
   Interior pages (Work, case study, services, studio, contact, journal, article, legal, 404)
   ===================================================================== */
.lz-inner main { padding-top: calc(var(--nav-h) + clamp(24px, 4vw, 56px)); }
.phero { padding-block: clamp(24px, 4vw, 56px) clamp(20px, 3vw, 40px); }
.phero__icon { width: clamp(64px, 6vw, 96px); height: auto; margin-bottom: 18px; filter: drop-shadow(0 16px 28px rgba(0,0,0,.5)); }
.phero__title { font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: clamp(44px, 7.5vw, 128px); line-height: .9; letter-spacing: -.01em; max-width: 14ch; }
.phero__title--article { font-size: clamp(34px, 4.6vw, 72px); max-width: 22ch; }
.phero__intro { max-width: 46ch; margin-top: 18px; color: var(--ink-dim); }
.phero .meta { margin-bottom: 14px; }

/* Long text (editor content) */
.prose { max-width: 70ch; font-size: 17px; line-height: 1.65; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(26px, 2.4vw, 38px); line-height: 1; margin-top: 2em; }
.prose h3 { font-family: var(--display); text-transform: uppercase; font-size: clamp(20px, 1.6vw, 26px); margin-top: 1.6em; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: .4em; }
.prose blockquote { border-left: 2px solid var(--red); padding-left: 20px; font-size: var(--fs-lead); font-weight: 300; }
.prose img, .prose figure { border-radius: 14px; max-width: 100%; height: auto; }
.prose .wp-block-image.alignwide, .prose .alignwide { max-width: min(1100px, 100vw - 2 * var(--m)); width: 100vw; }
.prose code { font-size: .9em; background: var(--surface-2); padding: 2px 6px; border-radius: 6px; }
.prose pre { background: var(--surface); padding: 18px; border-radius: 14px; overflow-x: auto; }

/* Chips used as filters */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 3vw, 40px); }
a.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); font-family: var(--display); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--ink); transition: background-color 250ms ease, color 250ms ease; }
a.chip:hover { background: rgba(255,255,255,.12); }
a.chip.is-on { background: var(--red-action); border-color: var(--red-action); color: #fff; }

/* Work grid */
.wgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px) clamp(14px, 1.6vw, 24px); }
.wcard__link { display: grid; gap: 14px; text-decoration: none; color: inherit; }
.wcard__media { aspect-ratio: 3 / 4; overflow: clip; border-radius: 4px; background: var(--surface); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.wcard__media img, .wcard__ph { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-expo); }
.wcard__ph { background: linear-gradient(160deg, var(--surface-2), var(--surface)); }
.wcard__link:hover .wcard__media img { transform: scale(1.04); }
.wcard__title { font-family: var(--display); text-transform: uppercase; font-size: clamp(20px, 1.6vw, 26px); line-height: 1; }
.wcard__link:hover .wcard__title { color: var(--red); }
.work__more { margin-top: 8px; }

/* Journal grid */
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px) clamp(14px, 1.6vw, 24px); }
.pgrid--3 { margin-top: 28px; }
.jcard--grid { width: auto; }
.jcard--grid .jcard__media { aspect-ratio: 4 / 5; }
.jcard--grid .jcard__media img, .jcard--grid .wcard__ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.jcard--grid .jcard__link { display: grid; gap: 14px; text-decoration: none; color: inherit; }
.pager { display: flex; gap: 6px; justify-content: center; margin-top: clamp(32px, 4vw, 56px); }
.pager .page-numbers { min-width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 999px; background: rgba(255,255,255,.06); text-decoration: none; color: var(--ink); font-family: var(--display); }
.pager .current { background: var(--red-action); color: #fff; }

/* Article */
.article__media { margin-bottom: clamp(28px, 4vw, 56px); }
.article__media img { width: 100%; height: auto; border-radius: 18px; display: block; }

/* Case study */
.case__hero img { width: 100%; height: auto; display: block; border-radius: 18px; }
.case__facts { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; padding-block: clamp(28px, 4vw, 48px); border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: clamp(28px, 4vw, 56px); }
.facts { display: flex; flex-wrap: wrap; gap: 18px clamp(24px, 4vw, 56px); }
.facts dd { margin: 4px 0 0; font-size: 16px; }
.case__results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.result { padding: 24px; border-radius: 18px; }
.result__v { font-family: var(--display); font-size: clamp(40px, 4.4vw, 72px); line-height: 1; color: var(--red); }
.result__l { margin-top: 8px; color: var(--ink-dim); }
.case__quote blockquote p { font-size: clamp(24px, 2.6vw, 40px); line-height: 1.15; font-weight: 300; max-width: 30ch; }
.case__quote blockquote p::before { content: "“"; color: var(--red); }
.case__quote figcaption { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.case__quote-photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.h3 { font-family: var(--display); text-transform: uppercase; font-size: clamp(20px, 1.8vw, 28px); line-height: 1; margin-bottom: 16px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.tags li { padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); font-size: 14px; }
.case__next { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px 24px; padding-block: clamp(40px, 6vw, 88px); text-decoration: none; color: inherit; border-top: 1px solid rgba(255,255,255,.08); }
.case__next .meta { grid-column: 1; }
.case__next-title { grid-column: 1; font-family: var(--display); text-transform: uppercase; font-size: clamp(36px, 6vw, 104px); line-height: .9; transition: color 300ms ease; }
.case__next-img { grid-column: 2; grid-row: 1 / span 2; width: clamp(90px, 10vw, 160px); height: auto; border-radius: 4px; rotate: 4deg; transition: rotate 600ms var(--ease-expo), scale 600ms var(--ease-expo); }
.case__next:hover .case__next-title { color: var(--red); }
.case__next:hover .case__next-img { rotate: 0deg; scale: 1.06; }

/* Bento gallery: 12-column grid, three layouts, empty slots close up */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(90px, 8.5vw, 132px); grid-auto-flow: dense; gap: clamp(8px, 1vw, 14px); }
.bento__cell { position: relative; overflow: clip; border-radius: 14px; background: var(--surface); grid-column: span 4; grid-row: span 3; }
.bento__cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 900ms var(--ease-expo); }
.bento__cell:hover img { transform: scale(1.04); }
.bento__cell::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); pointer-events: none; }
/* A — Hero: 1 big square, 2 tall, 3 small, 2 wide */
.bento--a .bento__cell--1 { grid-column: span 6; grid-row: span 6; }
.bento--a .bento__cell--2, .bento--a .bento__cell--3 { grid-column: span 3; grid-row: span 4; }
.bento--a .bento__cell--4, .bento--a .bento__cell--5, .bento--a .bento__cell--6 { grid-column: span 2; grid-row: span 2; }
.bento--a .bento__cell--7, .bento--a .bento__cell--8 { grid-column: span 6; grid-row: span 3; }
/* B — Editorial: 2 wide, 1 tall + 2 small, 3 small */
.bento--b .bento__cell--1, .bento--b .bento__cell--2 { grid-column: span 6; grid-row: span 3; }
.bento--b .bento__cell--3 { grid-column: span 4; grid-row: span 5; }
.bento--b .bento__cell--4, .bento--b .bento__cell--5 { grid-column: span 4; grid-row: span 5; }
.bento--b .bento__cell--6, .bento--b .bento__cell--7, .bento--b .bento__cell--8 { grid-column: span 4; grid-row: span 3; }
/* C — Digital: 1 desktop screen, 2 phones, 5 small */
.bento--c .bento__cell--1 { grid-column: span 8; grid-row: span 5; }
.bento--c .bento__cell--2, .bento--c .bento__cell--3 { grid-column: span 2; grid-row: span 5; }
.bento--c .bento__cell--4, .bento--c .bento__cell--5, .bento--c .bento__cell--6, .bento--c .bento__cell--7, .bento--c .bento__cell--8 { grid-column: span 4; grid-row: span 3; }
.bento__cap { margin-top: 14px; }

/* Lightbox */
.lbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(5,5,7,.94); color: var(--ink); }
.lbox[open] { display: grid; place-items: center; }
.lbox::backdrop { background: transparent; }
.lbox__img { max-width: min(92vw, 1600px); max-height: 84vh; object-fit: contain; border-radius: 10px; }
.lbox__btn { position: fixed; width: 52px; height: 52px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: var(--ink); font-size: 20px; cursor: pointer; }
.lbox__btn:hover { background: var(--ink); color: var(--ground); }
.lbox__prev { left: 20px; top: 50%; } .lbox__next { right: 20px; top: 50%; } .lbox__close { right: 20px; top: 20px; }
.lbox__count { position: fixed; bottom: 22px; left: 50%; translate: -50% 0; }

/* Service page */
.svc-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: clamp(28px, 4vw, 64px); align-items: start; }
.svc-page__aside { position: sticky; top: calc(var(--nav-h) + 20px); padding: 26px; border-radius: 18px; }
.ticks { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 26px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .45em; width: 12px; height: 7px; border-left: 2px solid var(--red); border-bottom: 2px solid var(--red); rotate: -45deg; }

/* Studio / contact pages */
.offices--page { margin-top: 24px; }
.clients--page { position: static; }

/* Closing CTA */
.cta-band { text-align: center; display: grid; justify-items: center; gap: 14px; }
.cta-band__hand { font-family: var(--hand); color: var(--red); font-size: var(--fs-hand); rotate: -3deg; }
.cta-band__title { font-family: var(--display); text-transform: uppercase; font-size: clamp(40px, 6.4vw, 112px); line-height: .9; }
.cta-band__btns { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: center; margin-top: 10px; }

/* 404 */
.e404 { min-height: 70vh; display: grid; align-content: center; gap: 18px; padding-block: calc(var(--nav-h) + 40px) 60px; }
.e404__code { font-family: var(--display); font-size: clamp(120px, 24vw, 360px); line-height: .8; color: var(--red); }
.e404__links { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 1023px) {
  .wgrid, .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-page { grid-template-columns: 1fr; }
  .svc-page__aside { position: static; }
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 80px; }
  .bento .bento__cell { grid-column: span 3 !important; grid-row: span 3 !important; }
  .bento .bento__cell--1 { grid-column: span 6 !important; grid-row: span 4 !important; }
}
@media (max-width: 640px) {
  .wgrid { grid-template-columns: 1fr 1fr; gap: 18px 12px; }
  .pgrid { grid-template-columns: 1fr; }
  .case__results { grid-template-columns: 1fr; }
  .case__next { grid-template-columns: 1fr; }
  .case__next-img { display: none; }
}
.contact__intro { max-width: 46ch; margin: 22px auto 0; text-align: center; color: var(--ink-dim); }
.info-banner { display: grid; gap: 14px; justify-items: start; padding: clamp(28px, 4vw, 56px); border-radius: 24px; }
.info-banner__hand { font-family: var(--hand); color: var(--red); font-size: var(--fs-hand); rotate: -2deg; }
.info-banner__title { font-family: var(--display); text-transform: uppercase; font-size: clamp(30px, 3.6vw, 56px); line-height: .95; max-width: 18ch; }
.info-banner__text { max-width: 46ch; color: var(--ink-dim); }
.info-banner__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 10px; }

/* =====================================================================
   1.3 Listing pages: Work, Journal, Services + minimal Let's talk
   ===================================================================== */
.lz-ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lz-ph { position: absolute; inset: 0; background: var(--surface-2); }
.lz-ph::after { content: ""; position: absolute; inset: 0; margin: auto; width: 44px; height: 44px; opacity: .28; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2EEE6' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='m4 18 5.5-5.5 4 4L16 14l4 4'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Header */
.lhead { padding-block: clamp(24px, 5vw, 72px) clamp(28px, 4vw, 56px); }
.lhead__title { font-family: var(--display); font-weight: 600; text-transform: uppercase; line-height: .86; letter-spacing: -.005em; font-size: var(--fs-giant); color: var(--red); display: flex; align-items: flex-start; gap: .06em; }
.lhead__count { font-family: var(--font); font-weight: 400; font-size: clamp(16px, 1.6vw, 22px); color: var(--ink-dim); margin-top: .6em; letter-spacing: 0; }
.lhead--hook .lhead__title { display: block; color: var(--ink); font-size: clamp(52px, 8.4vw, 136px); line-height: .9; max-width: 12ch; }
.lhead--fit .lhead__title { display: inline-block; white-space: nowrap; font-size: 100px; }
.lhead__intro { max-width: 58ch; margin-top: clamp(20px, 3vw, 36px); font-size: var(--fs-lead); font-weight: 300; line-height: 1.4; color: var(--ink-dim); }

/* Filter bar */
.fbar { position: relative; display: flex; align-items: center; gap: 16px; padding-block: 14px; border-block: 1px solid rgba(255,255,255,.1); margin-bottom: clamp(28px, 4vw, 48px); }
.fbar__list { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.fchip, .seg a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); font-family: var(--display); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--ink-dim); transition: color var(--t-hover) ease, background-color var(--t-hover) ease, border-color var(--t-hover) ease; }
.fchip:hover { color: var(--ink); border-color: rgba(255,255,255,.3); }
.fchip[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.fchip small { font-family: var(--font); font-size: 11px; letter-spacing: 0; opacity: .6; }
.fbar__end { margin-left: auto; flex: none; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); }
.seg a { min-height: 34px; border: 0; padding: 0 14px; }
.seg a:hover { color: var(--ink); }
.seg a[aria-current] { background: var(--surface-3); color: var(--ink); }
.fbar__toggle { display: none; }
@media (max-width: 767px) {
  .fbar { flex-wrap: wrap; }
  .fbar__toggle { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; flex: 1; min-width: 0; min-height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: none; cursor: pointer; font-family: var(--display); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
  .fbar__toggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fbar__toggle .lz-ico { transition: transform 300ms var(--ease-out); }
  .fbar__toggle[aria-expanded="true"] .lz-ico { transform: rotate(180deg); }
  .js .fbar__list { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20; flex-direction: column; flex-wrap: nowrap; gap: 2px; padding: 8px; border-radius: 16px; background: rgba(24,24,28,.97); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 24px 48px -12px rgba(0,0,0,.7); }
  .js .fbar__list.is-open { display: flex; }
  .js .fbar__list .fchip { min-height: 48px; border: 0; border-radius: 10px; justify-content: space-between; font-size: 14px; }
  .js .fbar__list .fchip::after { content: ""; order: 3; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--ink-dim); }
  .js .fbar__list .fchip small { margin-left: auto; }
  .js .fbar__list .fchip[aria-current] { background: var(--surface-3); color: var(--ink); }
  .js .fbar__list .fchip[aria-current]::after { border-color: var(--red); background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat; }
  .no-js .fbar__toggle { display: none; }
}
.listing.is-busy [data-items], .listing.is-busy .strip { opacity: .4; transition: opacity 200ms ease; }

/* Work grid card */
.pgridx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
@media (max-width: 1023px) { .pgridx { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .pgridx { grid-template-columns: 1fr; gap: 36px; } }
.pcardx { display: block; text-decoration: none; color: inherit; border-radius: var(--radius); }
.pcardx__media { position: relative; display: block; aspect-ratio: 3 / 4; overflow: clip; border-radius: var(--radius); background: var(--surface); }
.pcardx__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-expo); }
.pcardx__tint { position: absolute; inset: 0; opacity: 0; transition: opacity 500ms var(--ease-expo); background: linear-gradient(to top, color-mix(in srgb, var(--c) 92%, #000) 0%, color-mix(in srgb, var(--c) 70%, transparent) 55%, color-mix(in srgb, var(--c) 30%, transparent) 100%); }
.pcardx__rest { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; gap: 12px; padding: 18px 20px; font-size: 15px; background: linear-gradient(to top, rgba(8,8,10,.72), transparent); transition: opacity 350ms ease; }
.pcardx__rest span + span { color: var(--ink-dim); }
.pcardx__over { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; color: #fff; pointer-events: none; }
.pcardx__over > * { opacity: 0; transform: translateY(14px); transition: opacity 450ms var(--ease-expo), transform 600ms var(--ease-expo); }
.pcardx__hook { margin-bottom: auto; max-width: 30ch; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.3; font-weight: 300; }
.pcardx__title { display: block; white-space: nowrap; font-family: var(--display); font-weight: 600; text-transform: uppercase; line-height: .92; font-size: 64px; transition-delay: 40ms; }
.pcardx__dom { margin-top: 10px; font-size: 14px; color: rgba(255,255,255,.84); transition-delay: 60ms; }
.pcardx__go { margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; transition-delay: 100ms; }
.pcardx__meta { display: none; }
@media (hover: hover) {
  .pcardx:hover img, .pcardx:focus-visible img { transform: scale(1.05); }
  .pcardx:hover .pcardx__tint, .pcardx:focus-visible .pcardx__tint { opacity: 1; }
  .pcardx:hover .pcardx__rest, .pcardx:focus-visible .pcardx__rest { opacity: 0; }
  .pcardx:hover .pcardx__over > *, .pcardx:focus-visible .pcardx__over > * { opacity: 1; transform: none; }
}
@media (hover: none) {
  .pcardx__over, .pcardx__tint { display: none; }
  .pcardx__meta { display: grid; gap: 4px; padding-top: 14px; font-size: 14px; color: var(--ink-dim); }
  .pcardx__meta span:last-child { color: var(--ink); font-size: 16px; }
}

/* Work strip (one service) */
.strip__info { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px 32px; min-height: clamp(150px, 15vw, 210px); margin-bottom: clamp(24px, 3vw, 40px); }
.strip__name { grid-column: 1; font-family: var(--display); font-weight: 600; text-transform: uppercase; line-height: .9; font-size: clamp(44px, 6.4vw, 104px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip__name::after { content: ""; display: inline-block; width: .18em; height: .18em; margin-left: .12em; border-radius: 50%; background: var(--c); vertical-align: .12em; transition: background-color 400ms ease; }
.strip__text { grid-column: 1; font-size: 18px; font-weight: 300; color: var(--ink-dim); max-width: 52ch; }
.strip__meta { opacity: .7; }
.strip__info .btn { grid-column: 2; grid-row: 1 / 3; }
.strip__track { display: flex; align-items: center; gap: 12px; overflow-x: auto; scrollbar-width: none; padding: 8px 2px; -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.strip__track::-webkit-scrollbar { display: none; }
.strip__item { position: relative; flex: none; width: clamp(100px, 9vw, 130px); aspect-ratio: 3 / 4; border-radius: 6px; overflow: clip; background: var(--surface); transition: width 700ms var(--ease-expo), opacity 400ms ease; }
.strip__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.strip__item::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease-expo); }
.strip__track.is-hot .strip__item { opacity: .55; }
.strip__item.is-on { width: clamp(220px, 21vw, 300px); opacity: 1 !important; }
.strip__item.is-on::after { transform: none; }
.strip__nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
.strip__nav button { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); background: none; color: var(--ink); cursor: pointer; font-size: 18px; transition: background-color var(--t-hover) ease; }
.strip__nav button:hover { background: var(--surface-2); }
.strip__nav button:disabled { opacity: .3; pointer-events: none; }
@media (max-width: 767px) {
  .strip__info { grid-template-columns: 1fr; min-height: 0; }
  .strip__info .btn { grid-column: 1; grid-row: auto; justify-self: start; }
  .strip__nav { display: none; }
  .strip__track { scroll-snap-type: x mandatory; padding: 8px 19vw; gap: 10px; -webkit-mask: none; mask: none; }
  .strip__item, .strip__item.is-on { width: 62vw; scroll-snap-align: center; }
  .strip__item { transform: scale(.86); transition: transform 500ms var(--ease-expo), opacity 400ms ease; }
  .strip__item.is-on { transform: none; }
}

/* Journal rows */
.jrows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
@media (max-width: 1023px) { .jrows { grid-template-columns: 1fr; } }
.jrow { display: grid; grid-template-columns: 1fr 44%; min-height: clamp(300px, 26vw, 340px); border-radius: var(--radius); background: var(--surface); overflow: clip; text-decoration: none; color: inherit; transition: border-color 300ms ease, background-color 300ms ease; }
.jrow__txt { display: flex; flex-direction: column; padding: clamp(20px, 2vw, 28px); }
.jrow__meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--ink-dim); }
.jrow__meta b { font-weight: 500; color: var(--red); }
.jrow__title { margin-top: 16px; font-size: clamp(21px, 1.75vw, 26px); line-height: 1.18; font-weight: 600; letter-spacing: -.012em; text-wrap: balance; }
.jrow__ex { margin-top: 12px; font-size: 15px; color: var(--ink-dim); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.jrow__foot { margin-top: auto; padding-top: 20px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.jrow__foot span:first-child { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); letter-spacing: .08em; text-transform: uppercase; }
.jrow__foot span:last-child { color: var(--ink-dim); }
.jrow__foot .lz-ico { transition: transform 400ms var(--ease-expo); }
.jrow__media { position: relative; overflow: clip; }
.jrow__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-expo); }
.jrow:hover { background: var(--surface-2); }
.jrow:hover img { transform: scale(1.04); }
.jrow:hover .jrow__foot .lz-ico { transform: translateX(4px); }
@media (max-width: 619px) { .jrow { grid-template-columns: 1fr; } .jrow__media { order: -1; aspect-ratio: 16 / 10; } }
.is-new { animation: lz-in 600ms var(--ease-expo) both; }
@keyframes lz-in { from { opacity: 0; transform: translateY(12px); } }

/* Load more, empty */
.lmore { display: grid; justify-items: center; gap: 14px; margin-top: clamp(40px, 5vw, 64px); }
.lempty { display: grid; justify-items: center; gap: 20px; padding-block: 80px; text-align: center; color: var(--ink-dim); }

/* Services rows */
.svlist { border-top: 1px solid rgba(255,255,255,.1); }
.svlist > li { position: relative; border-bottom: 1px solid rgba(255,255,255,.1); }
.svlist > li::after { content: ""; position: absolute; inset: auto 0 -1px; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 800ms var(--ease-expo); }
.svlist > li:hover::after, .svlist > li:focus-within::after { transform: none; }
.svrow { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 3.5vw, 56px); padding-block: clamp(24px, 3vw, 40px); text-decoration: none; color: inherit; }
.svrow__media { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: clip; background: var(--surface); }
.svrow__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-expo); }
.svrow:hover .svrow__media img { transform: scale(1.04); }
.svrow__info { display: flex; flex-direction: column; }
.svrow__title { font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: clamp(36px, 4.2vw, 64px); line-height: .95; transition: color 300ms ease; }
.svrow:hover .svrow__title { color: var(--red); }
.svrow__hook { margin-top: 14px; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.3; }
.svrow__sum { margin-top: 12px; color: var(--ink-dim); max-width: 46ch; }
.svrow__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.svrow__tags span { font-size: 13px; padding: 5px 11px; border-radius: 999px; background: var(--surface-2); color: var(--ink-dim); }
.svrow__foot { margin-top: auto; padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.svrow:hover .btn { background: var(--ink); color: var(--ground); }
@media (max-width: 1023px) { .svrow { grid-template-columns: 1fr; } }

/* Minimal Let's talk (interior pages) */
.talk { margin-top: clamp(80px, 10vw, 160px); padding-bottom: var(--sec); }
.talk__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 96px); }
.talk__title { font-family: var(--display); font-weight: 600; text-transform: uppercase; line-height: .9; font-size: clamp(56px, 8vw, 120px); color: var(--red); }
.talk__text { margin-top: 24px; max-width: 38ch; font-size: var(--fs-lead); font-weight: 300; line-height: 1.4; color: var(--ink-dim); }
.talk__dl { margin-top: 40px; display: grid; gap: 18px; }
.talk__dl dd { margin: 4px 0 0; }
.talk__dl a { font-size: 18px; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.2); transition: border-color var(--t-hover) ease; }
.talk__dl a:hover { border-color: var(--red); }
.talk__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.talk__note { font-size: 14px; color: var(--ink-dim); }
.talk__note a { color: var(--ink); text-underline-offset: 3px; }
.talk__actions .form-err { flex-basis: 100%; margin: 0; }
@media (max-width: 1023px) { .talk__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .pcardx *, .jrow *, .svrow *, .strip__item, .is-new { transition: none !important; animation: none !important; } }