/* Noira — components. Every colour, size and radius comes from tokens.css.
   Order: base · type roles · links + buttons · labels + grid · header · mobile menu · tables · home sections
   (hero → statement → facts → studios → chapters → work → interlude → people → brands) · footer · responsive */

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, address { margin: 0; font-style: normal; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 400; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr-only:focus { position: fixed; top: 12px; left: 12px; width: auto; height: auto; clip: auto; z-index: 100; background: var(--bg); color: var(--text); padding: 10px 14px; }

/* Page frame: 24px gutters, a 16-column grid, no max-width (the design runs edge to edge) */
.wrap { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.g16 { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); }
.band { padding-block: var(--section); }
.band + .band, .chapter + .band { padding-top: 0; }   /* one gap between two bands, never two (lesson 57) */
.band--night { background: var(--night); color: var(--on-night); }
.band--night + .band--night { padding-top: 0; }

/* ── Type roles on elements ── */
h1 { font-family: var(--font-statement); font-size: 112px; line-height: 1; letter-spacing: -.04em; }
h2 { font-family: var(--font-display); font-size: 48px; line-height: 1.05; letter-spacing: -.025em; }
h3 { font-family: var(--font-display); font-size: 24px; line-height: 1.1; letter-spacing: -.015em; }
.muted { color: var(--muted); }
.ghost { color: var(--ghost); }
.band--night .muted { color: var(--night-muted); }
.band--night .ghost { color: var(--night-ghost); }
p.t-intro { max-width: 34em; text-wrap: balance; }
.lead-xl { font-family: var(--font-statement); font-size: 21px; line-height: 1.4; letter-spacing: -.012em; max-width: 30em; text-wrap: pretty; }
.t-body { max-width: 36em; }

/* ── Links and buttons: text links with an arrow; the design has no filled buttons on its pages ── */
.lnk { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font); font-size: 13px; line-height: 1.2; letter-spacing: -.01em; color: var(--text);
  padding-bottom: 2px; border-bottom: 1px solid var(--line-2); transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.lnk svg { width: 12px; height: 12px; flex: none; color: var(--accent-ink); transition: transform .35s var(--ease-out); }
.lnk:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.lnk:hover svg { transform: translate(2px, -2px); }
.band--night .lnk { color: var(--on-night); border-color: var(--night-line-2); }
.band--night .lnk svg { color: var(--accent-on-dark); }
.band--night .lnk:hover { color: var(--accent-on-dark); border-color: var(--accent-on-dark); }

/* .btn = the one filled button (forms, the phone menu, the CTA band): a square ink block, 48px, 13px label, arrow after a hairline */
.btn { --b-bg: var(--text); --b-fg: var(--bg); display: inline-flex; align-items: center; gap: 14px; height: 48px; padding: 0 18px; background: var(--b-bg); color: var(--b-fg);
  font-size: 13px; line-height: 1; letter-spacing: -.01em; white-space: nowrap; border: 1px solid var(--b-bg); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.btn__go { display: inline-flex; align-items: center; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .25); height: 16px; }
.btn__go svg { width: 13px; height: 13px; transition: transform .35s var(--ease-out); }
.btn:hover { --b-bg: var(--night-3); }
.btn:hover .btn__go svg { transform: translateX(3px); }
.btn--ghost { --b-bg: transparent; --b-fg: var(--text); border-color: var(--line-2); }
.btn--ghost .btn__go { border-color: var(--line-2); }
.btn--ghost:hover { --b-bg: var(--surface); }
.btn--paper { --b-bg: var(--bg); --b-fg: var(--text); }
.btn--paper .btn__go { border-color: var(--line); }
.btn--paper:hover { --b-bg: var(--surface-2); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Micro-label: the design's section heading voice (13px, grey, sentence case — never a chip) ── */
.label { font-family: var(--font); font-size: 13px; line-height: 1.3; font-weight: 400; color: var(--muted); display: block; }
.band--night .label { color: var(--night-muted); }

/* Fact rows: label left, value right, 13px, used in the hero, intro and project pages */
.facts { display: grid; gap: 14px; }
.fact { display: grid; grid-template-columns: 92px 1fr; gap: 16px; font-size: 14px; line-height: 1.4; letter-spacing: -.01em; }
.fact .label { font-size: 13px; }
.fact p { color: var(--text); max-width: 26em; }
.band--night .fact p { color: var(--on-night); }

/* ── Header: a three-line wordmark top-left, the page list top-right, both 12px; it never moves ── */
.site-head { position: fixed; inset: 0 0 auto 0; z-index: 50; padding: 18px var(--gutter) 0; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none;
  color: var(--text); transition: color var(--dur-fast) var(--ease); }
.site-head.is-dark { color: var(--on-night); }
.site-head > * { pointer-events: auto; }
.brand { font-family: var(--font); font-size: 12px; line-height: 1.25; letter-spacing: -.01em; display: block; }
.brand span { display: block; }
.brand em { font-style: normal; }
.nav__links { display: flex; gap: 6px; font-size: 12px; line-height: 1.25; letter-spacing: -.01em; }
.nav__links a { position: relative; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); transition: color var(--dur-fast) var(--ease); }
.site-head.is-dark .nav__links a { color: var(--night-muted); }
.nav__links a:hover, .nav__links a[aria-current="page"], .site-head.is-dark .nav__links a:hover, .site-head.is-dark .nav__links a[aria-current="page"] { color: inherit; }
.nav__links a[aria-current="page"]::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-ink); }
.site-head.is-dark .nav__links a[aria-current="page"]::before { background: var(--accent-on-dark); }
.nav__links a:not(:last-child)::after { content: ","; margin-left: -6px; }
.nav__toggle { display: none; width: 40px; height: 40px; place-items: center; color: inherit; margin: -10px -10px 0 0; }
.nav__toggle svg { width: 20px; height: 20px; }

/* Mobile menu (≤ 900px): the whole page list in 32px, black on white */
.menu { position: fixed; inset: 0; z-index: 60; background: var(--bg); color: var(--text); padding: 18px var(--gutter) 32px; display: flex; flex-direction: column; gap: 40px;
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s; }
.menu.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.menu__top { display: flex; align-items: flex-start; justify-content: space-between; }
.menu__links { display: grid; }
.menu__links a { font-family: var(--font-display); font-size: 40px; letter-spacing: -.03em; line-height: 1.15; padding: 10px 0; border-bottom: 1px solid var(--line); }
.menu__links a[aria-current="page"] { color: var(--accent-ink); }
.menu__foot { margin-top: auto; display: grid; gap: 6px; font-size: 13px; color: var(--muted); }

/* ── Tables: 13px rows on 1px rules; the last cell is an arrow in the brand colour ── */
.tbl { display: grid; border-top: 1px solid var(--line); }
.tbl__row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 6fr) 32px; gap: 16px; align-items: center; min-height: 36px; padding: 8px 0; border-bottom: 1px solid var(--line);
  font-size: 13px; line-height: 1.35; letter-spacing: -.01em; color: var(--text); transition: color var(--dur-fast) var(--ease); }
.tbl__row > span:nth-child(2) { color: var(--muted); }
.tbl__row svg { width: 12px; height: 12px; justify-self: end; color: var(--accent-ink); transition: transform .35s var(--ease-out); }
a.tbl__row:hover { color: var(--accent-ink); }
a.tbl__row:hover svg { transform: translate(2px, -2px); }
.band--night .tbl, .band--night .tbl__row { border-color: var(--night-line); color: var(--on-night); }
.band--night .tbl__row > span:nth-child(2) { color: var(--night-muted); }
.band--night .tbl__row svg { color: var(--accent-on-dark); }
.band--night a.tbl__row:hover { color: var(--accent-on-dark); }

/* Photo plates: square-cornered, the photo fills the box */
.plate { position: relative; overflow: hidden; background: var(--surface); }
.plate img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
a.plate:hover img, .work:hover .plate img { transform: scale(1.03); }

/* ═══════════════ HOME ═══════════════ */

/* Hero (recomposed): a 112px statement stacked top-left, a facts column beside it, then a wide inset plate with a caption row.
   data-hero-recipe="stage:inset subject:scene layer:stats anchor:top-left-stacked type:giant-stack proof:stat header:minimal" */
.hero { padding-top: calc(var(--nav-h) + 72px); }
.hero__top { display: grid; grid-template-columns: minmax(0, 10fr) minmax(0, 6fr); column-gap: var(--col-gap); align-items: end; }
.hero h1 { max-width: 9.2em; }
.hero__side { display: grid; gap: 28px; padding-bottom: 10px; }
.hero__side .facts { max-width: 400px; }
.hero__proof { display: flex; gap: 32px; }
.hero__proof b { display: block; font-family: var(--font-statement); font-size: 40px; line-height: 1; font-weight: 400; letter-spacing: -.035em; }
.hero__proof span { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); letter-spacing: -.01em; }
.hero__plate { margin-top: 64px; aspect-ratio: 1392 / 720; }
.hero__plate img { object-position: 50% 45%; }
.hero__cap { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 14px; }
.hero__cap p { font-size: 14px; line-height: 1.4; letter-spacing: -.01em; color: var(--muted); }

/* Statement: one 120px sans statement, two 13px columns under it, then a full-width plate */
.state { text-align: center; }
.state h2 { font-size: 120px; line-height: 1; letter-spacing: -.035em; max-width: 12ch; margin-inline: auto; }
.state__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 280px)); justify-content: center; gap: 48px; margin-top: 40px; text-align: left; }
.state__cols p { font-size: 14px; line-height: 1.45; letter-spacing: -.01em; color: var(--muted); text-wrap: pretty; }
.state__plate { margin-top: 88px; aspect-ratio: 1392 / 620; }

/* Intro: facts column left (cols 1–6), a 30px statement paragraph right (cols 8–16); then recognition in three columns */
.intro__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--section); }
.intro__facts { grid-column: 1 / 7; align-self: start; }
.intro__text { grid-column: 8 / 17; }
.recog { grid-column: 1 / 17; display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); }
.recog > .label { grid-column: 1 / 4; }
.recog__col { display: grid; grid-template-columns: 100px 1fr; gap: 16px; align-content: start; }
.recog__col:nth-of-type(1) { grid-column: 4 / 10; }
.recog__col:nth-of-type(2) { grid-column: 10 / 17; }
.recog__list { display: grid; gap: 18px; }
.recog__list li { font-size: 14px; line-height: 1.4; letter-spacing: -.01em; }
.recog__list li span { display: block; color: var(--muted); }
.recog__list li.sum { padding-top: 6px; }

/* Studios: a 76px statement sentence (cols 1–13), then the studios table */
.studios h2 { font-family: var(--font-statement); font-size: 76px; line-height: 1.02; letter-spacing: -.035em; max-width: 1080px; }
.studios__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); margin-top: var(--head-to-content); }
.studios__grid > .label { grid-column: 1 / 4; padding-top: 10px; }
.studios__grid > .tbl { grid-column: 4 / 17; }

/* Chapters: a pinned stage (title → ink plate) followed by a statement and paragraph in normal flow.
   [data-pin] sections are 260vh tall; .pin__stage sticks for the ride; --p (0–1) is set by noira.js */
.chapter { position: relative; padding-bottom: var(--section); }
[data-pin], .chapter, .people { overflow-x: clip; }
.chapter__pin { height: 260vh; position: relative; }
.pin__stage { position: sticky; top: 0; height: 100vh; min-height: 640px; display: grid; place-items: center; overflow: hidden; }
.chapter__title { position: absolute; left: 50%; top: 18%; transform: translate(-50%, 0); text-align: center; font-family: var(--font-display); font-size: 48px; line-height: 1.05; letter-spacing: -.025em; text-wrap: balance; z-index: 2;
  opacity: calc(1 - var(--p, 0) * 2.2); translate: 0 calc(var(--p, 0) * -60px); }
.chapter__plate { width: min(1100px, 100% - 2 * var(--gutter)); height: min(66vh, 640px); display: flex; align-items: center; justify-content: center; margin-top: 8vh;
  opacity: clamp(0, calc(var(--p, 0) * 2.4 - .4), 1); scale: calc(.96 + var(--p, 0) * .04); }
.chapter__plate img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.chapter__text { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 88px; padding-top: 40px; }
.chapter__text h2 { grid-column: 1 / 17; font-family: var(--font-statement); font-size: 76px; line-height: 1.02; letter-spacing: -.035em; max-width: 1100px; }
.chapter__text .lead-xl { grid-column: 8 / 16; }
.chapter--flip .chapter__text .lead-xl { grid-column: 4 / 11; }
.chapter__list { grid-column: 4 / 11; display: grid; grid-template-columns: 100px 1fr; gap: 16px; align-content: start; }
.chapter--flip .chapter__list { grid-column: 8 / 15; }
/* static / reduced motion: no pin, everything shown */
.static .chapter__pin, .m-reduce .chapter__pin { height: auto; }
.static .pin__stage, .m-reduce .pin__stage { position: relative; height: auto; min-height: 0; display: grid; gap: 40px; padding-block: 0; }
.static .chapter__title, .m-reduce .chapter__title { position: static; transform: none; opacity: 1; translate: none; }
.static .chapter__plate, .m-reduce .chapter__plate { opacity: 1; scale: none; margin: 0 auto; }

/* Selected work: a scattered three-column masonry of two sizes, captions name · frames */
.work-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: var(--head-to-content); }
.work-head h2 sup { font-size: 18px; letter-spacing: -.01em; vertical-align: top; margin-left: 6px; top: .2em; position: relative; }
.works { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 96px; align-items: start; }
.work { display: grid; gap: 12px; }
.work .plate { aspect-ratio: 3 / 2; }
.work--tall .plate { aspect-ratio: 3 / 4; }
.work__cap { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; line-height: 1.3; letter-spacing: -.01em; }
.work__cap span:last-child { color: var(--muted); }
/* the scatter: columns and vertical offsets per slot (desktop) */
.work:nth-child(1) { grid-column: 1 / 6; }
.work:nth-child(2) { grid-column: 7 / 13; margin-top: 120px; }
.work:nth-child(3) { grid-column: 1 / 4; margin-top: -40px; }
.work:nth-child(4) { grid-column: 5 / 10; }
.work:nth-child(5) { grid-column: 10 / 13; margin-top: 80px; }
.work:nth-child(6) { grid-column: 2 / 7; margin-top: 40px; }
.work:nth-child(7) { grid-column: 8 / 11; margin-top: -60px; }
.work:nth-child(8) { grid-column: 1 / 5; }
.work:nth-child(9) { grid-column: 6 / 12; margin-top: 100px; }
.work:nth-child(10) { grid-column: 9 / 13; margin-top: -20px; }
.work:nth-child(11) { grid-column: 1 / 6; margin-top: 60px; }
.work:nth-child(12) { grid-column: 7 / 10; }
.works__more { display: flex; justify-content: center; margin-top: 96px; }

/* Interlude: eight hairlines radiating from the centre with 01–08 marks and a three-word title; the page turns black halfway through the pin */
.interlude { height: 220vh; position: relative; }
.interlude .pin__stage { background: var(--bg); color: var(--text); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.interlude.is-night .pin__stage { background: var(--night); color: var(--on-night); }
.rays { position: absolute; inset: 0; display: grid; place-items: center; rotate: calc(var(--p, 0) * 36deg); transition: rotate .1s linear; }
.ray { position: absolute; left: 50%; top: 50%; width: 46vmax; height: 1px; transform-origin: 0 50%; background: currentColor; opacity: .35; }
.ray b { position: absolute; right: 0; top: -22px; font-size: 11px; line-height: 1; font-weight: 400; letter-spacing: .02em; transform: rotate(calc(-1 * var(--a))); }
.interlude__title { position: relative; z-index: 2; text-align: center; display: grid; }
.interlude__title h2 { grid-area: 1 / 1; font-size: 48px; transition: opacity .5s var(--ease); background: inherit; padding: 16px 28px; }
.interlude__title h2:nth-child(2) { opacity: 0; }
.interlude.is-night .interlude__title h2:nth-child(1) { opacity: 0; }
.interlude.is-night .interlude__title h2:nth-child(2) { opacity: 1; }
.interlude .pin__stage::before { content: ""; position: absolute; left: 50%; top: 50%; width: 420px; height: 160px; translate: -50% -50%; background: inherit; z-index: 1; }
.static .interlude, .m-reduce .interlude { height: auto; }
.static .interlude .pin__stage, .m-reduce .interlude .pin__stage { height: 100vh; }
.static .interlude__title h2:nth-child(1), .m-reduce .interlude__title h2:nth-child(1) { opacity: 0; }
.static .interlude__title h2:nth-child(2), .m-reduce .interlude__title h2:nth-child(2) { opacity: 1; }
.static .interlude .pin__stage, .m-reduce .interlude .pin__stage { background: var(--night); color: var(--on-night); }

/* People: a statement, then a wheel of tilted photos turning around the founding year */
.people { position: relative; }
.people__head { padding: var(--section) 0 0; display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); }
.people__head .label { grid-column: 1 / 3; padding-top: 14px; }
.people__head h2 { grid-column: 3 / 12; font-family: var(--font-statement); font-size: 84px; line-height: 1.02; letter-spacing: -.04em; }
.wheel { height: 240vh; position: relative; margin-top: 48px; }
.wheel .pin__stage { display: grid; place-items: center; }
.wheel__ring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; rotate: calc(var(--p, 0) * 150deg - 70deg); }
.wheel__ring .plate { position: absolute; width: 230px; height: 170px; left: -115px; top: -85px; transform: rotate(var(--a)) translate(var(--r)) rotate(var(--t)); background: var(--night-2); }
.wheel__centre { position: relative; z-index: 2; text-align: center; display: grid; gap: 40px; justify-items: center; }
.wheel__centre h2 { font-size: 100px; letter-spacing: -.035em; line-height: 1; max-width: 8ch; }
.wheel__cols { display: grid; grid-template-columns: repeat(2, 300px); gap: 40px; text-align: left; }
.wheel__cols p { font-size: 14px; line-height: 1.45; letter-spacing: -.01em; color: var(--night-muted); text-wrap: pretty; }
.static .wheel, .m-reduce .wheel { height: auto; }
.static .wheel .pin__stage, .m-reduce .wheel .pin__stage { height: 100vh; }

/* Stats: two pairs per row, the second stat of each pair in the ghost grey (the design's own device) */
.stats { padding: var(--section) 0; display: grid; gap: 64px; }
.stat-pair { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.stat { display: grid; gap: 8px; }
.stat b { font-family: var(--font-statement); font-size: 84px; line-height: 1; letter-spacing: -.045em; font-weight: 400; }
.stat span { font-family: var(--font-statement); font-size: 28px; line-height: 1.25; letter-spacing: -.025em; max-width: 12ch; text-wrap: balance; }
.stat-pair .stat:nth-child(1) { grid-column: 3 / 9; }
.stat-pair .stat:nth-child(2) { grid-column: 10 / 16; color: var(--night-ghost); }

/* Brands: logo discs floating around a centred statement */
.brands { position: relative; min-height: 900px; display: grid; place-items: center; overflow: hidden; }
.brands h2 { position: relative; z-index: 2; font-family: var(--font-statement); font-size: 104px; line-height: 1; letter-spacing: -.045em; text-align: center; max-width: 11ch; }
.discs { position: absolute; inset: 0; }
.disc { position: absolute; width: 124px; height: 124px; border-radius: 50%; background: var(--night-3); display: grid; place-items: center; left: var(--x); top: var(--y);
  color: var(--on-night-2); font-size: 14px; letter-spacing: -.01em; text-align: center; padding: 12px; opacity: .9; }
.disc--paper { background: var(--bg); color: var(--text); }
.disc--ghost { background: var(--night-2); color: var(--night-muted); }
.disc svg { width: 44px; height: 44px; }

/* ── Footer: four 12px columns, the giant wordmark clipped at the right edge, a legal row ── */
.foot { background: var(--night); color: var(--on-night); padding: 72px var(--gutter) 24px; overflow: hidden; }
.foot__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); font-size: 12px; line-height: 1.4; letter-spacing: -.01em; }
.foot__brand { grid-column: 1 / 4; }
.foot__col { display: grid; grid-template-columns: 80px 1fr; gap: 12px; align-content: start; }
.foot__col:nth-child(2) { grid-column: 4 / 8; }
.foot__col:nth-child(3) { grid-column: 8 / 11; }
.foot__col:nth-child(4) { grid-column: 11 / 14; }
.foot__col:nth-child(5) { grid-column: 14 / 17; }
.foot__col .label { font-size: 12px; color: var(--night-muted); }
.foot__col ul { display: grid; gap: 2px; }
.foot__col ul + ul { margin-top: 14px; }
.foot__col a { opacity: .9; transition: color var(--dur-fast) var(--ease); }
.foot__col a:hover, .foot__col a[aria-current="page"] { color: var(--accent-on-dark); }
.foot__col address { display: grid; gap: 14px; }
.foot__col .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.foot__col .pair span { color: var(--night-muted); }
.foot__mark { margin: 120px 0 0; font-family: var(--font-display); font-size: clamp(160px, 44vw, 860px); line-height: .76; letter-spacing: -.04em; white-space: nowrap; margin-right: -.1em; }
.foot__legal { display: flex; flex-wrap: wrap; gap: 24px 48px; margin-top: 24px; font-size: 12px; line-height: 1.4; color: var(--night-muted); }
.foot__legal b { font-weight: 400; color: var(--on-night-2); }

/* ── Responsive ── */
@media (max-width: 1280px) {
  h1, .t-giant { font-size: 92px; }
  .state h2 { font-size: 96px; }
  .studios h2, .chapter__text h2, .people__head h2, .t-big { font-size: 64px; }
  .brands h2 { font-size: 84px; }
  .stat b { font-size: 68px; }
  .stat span { font-size: 26px; }
}
@media (max-width: 1024px) {
  :root { --section: 104px; --head-to-content: 56px; }
  h1, .t-giant { font-size: 76px; }
  .state h2 { font-size: 76px; }
  .state__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__top { grid-template-columns: 1fr; row-gap: 40px; }
  .intro__facts { grid-column: 1 / 7; }
  .intro__text { grid-column: 7 / 17; }
  .recog > .label { grid-column: 1 / 17; margin-bottom: 24px; }
  .recog__col:nth-of-type(1) { grid-column: 1 / 9; }
  .recog__col:nth-of-type(2) { grid-column: 9 / 17; }
  .studios__grid > .label { grid-column: 1 / 17; margin-bottom: 16px; }
  .studios__grid > .tbl { grid-column: 1 / 17; }
  .chapter__text .lead-xl, .chapter--flip .chapter__text .lead-xl { grid-column: 5 / 17; }
  .chapter__list, .chapter--flip .chapter__list { grid-column: 5 / 15; }
  .wheel__ring .plate { width: 170px; height: 126px; left: -85px; top: -63px; }
  .wheel__centre h2 { font-size: 72px; }
  .brands { min-height: 720px; }
  .disc { width: 96px; height: 96px; font-size: 13px; }
  .people__head h2 { grid-column: 3 / 16; }
}
@media (max-width: 900px) {
  :root { --section: 88px; --nav-h: 56px; }
  .nav__links { display: none; }
  .nav__toggle { display: grid; }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .foot__brand, .foot__col:nth-child(n) { grid-column: auto; }
  .works { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 56px; }
  .work:nth-child(n) { margin-top: 0; }
  .work:nth-child(odd) { grid-column: 1 / 4; }
  .work:nth-child(even) { grid-column: 4 / 7; margin-top: 48px; }
  .stat-pair { gap: 32px; }
  .stat-pair .stat:nth-child(1) { grid-column: 1 / 9; }
  .stat-pair .stat:nth-child(2) { grid-column: 9 / 17; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; --section: 72px; --head-to-content: 40px; }
  body { font-size: 15px; }
  h1, .t-giant { font-size: 46px; letter-spacing: -.03em; }
  .t-state { font-size: 48px; letter-spacing: -.03em; }
  .t-h1 { font-size: 40px; }
  .t-big { font-size: 40px; }
  .t-stat { font-size: 56px; }
  .t-quote { font-size: 28px; }
  h2, .t-h2 { font-size: 32px; }
  .state h2 { font-size: 44px; letter-spacing: -.03em; }
  .state__cols { grid-template-columns: 1fr; gap: 20px; margin-top: 28px; }
  .state__plate { margin-top: 48px; aspect-ratio: 4 / 3; }
  .studios h2, .chapter__text h2, .people__head h2, .t-big { font-size: 40px; }
  .lead-xl { font-size: 19px; }
  .t-intro, p.t-intro { font-size: 21px; }
  .hero { padding-top: calc(var(--nav-h) + 40px); }
  .hero__plate { margin-top: 40px; aspect-ratio: 4 / 3; }
  .hero__proof { gap: 24px; }
  .hero__proof b { font-size: 32px; }
  .hero__cap { flex-direction: column; align-items: flex-start; gap: 12px; }
  .intro__grid { row-gap: 64px; }
  .intro__facts, .intro__text { grid-column: 1 / 17; }
  .recog__col:nth-of-type(n) { grid-column: 1 / 17; grid-template-columns: 1fr; gap: 12px; }
  .recog__col + .recog__col { margin-top: 32px; }
  .tbl__row { grid-template-columns: minmax(0, 1fr) 24px; row-gap: 2px; padding: 10px 0; }
  .tbl__row > span:nth-child(2), .tbl__row > span:nth-child(3) { grid-column: 1; }
  .tbl__row svg { grid-row: 1 / 4; grid-column: 2; }
  .chapter__pin { height: 200vh; }
  .pin__stage { min-height: 520px; }
  .chapter__title { font-size: 32px; top: 16%; width: calc(100% - 2 * var(--gutter)); }
  .chapter__plate { height: 56vh; margin-top: 10vh; }
  .chapter__text { row-gap: 40px; padding-top: 16px; }
  .chapter__text .lead-xl, .chapter--flip .chapter__text .lead-xl, .chapter__list, .chapter--flip .chapter__list { grid-column: 1 / 17; }
  .chapter__list { grid-template-columns: 1fr; gap: 10px; }
  .works { grid-template-columns: 1fr; row-gap: 40px; }
  .work:nth-child(n) { grid-column: 1 / -1; margin-top: 0; }
  .works__more { margin-top: 56px; }
  .interlude { height: 180vh; }
  .interlude__title h2 { font-size: 30px; }
  .ray { width: 44vmax; }
  .people__head { grid-template-columns: 1fr; row-gap: 16px; }
  .people__head .label, .people__head h2 { grid-column: 1 / -1; }
  .wheel { height: 200vh; }
  .wheel__ring .plate { width: 120px; height: 90px; left: -60px; top: -45px; }
  .wheel__centre h2 { font-size: 44px; }
  .wheel__cols { grid-template-columns: 1fr; gap: 16px; max-width: 280px; }
  .stats { gap: 40px; }
  .stat-pair { grid-template-columns: 1fr; row-gap: 32px; }
  .stat-pair .stat:nth-child(n) { grid-column: 1 / -1; }
  .stat b { font-size: 56px; }
  .stat span { font-size: 22px; }
  .brands { min-height: 560px; }
  .brands h2 { font-size: 44px; }
  .disc { width: 72px; height: 72px; font-size: 11px; padding: 6px; }
  .disc svg { width: 30px; height: 30px; }
  .disc:nth-child(5), .disc:nth-child(6) { display: none; }
  .foot { padding-top: 56px; }
  .foot__grid { grid-template-columns: 1fr; row-gap: 28px; }
  .foot__mark { margin-top: 64px; }
  .foot__legal { gap: 12px 24px; }
}

/* ───────── About ───────── */
/* Noira — about (ab-), contact (ct-) and 404 (nf-) pages. One voice: Hanken Grotesk (--font-statement) for statements, sans everywhere. Tokens only; scoped under the page body class. */

/* ═══════════════ ABOUT: a night page from top to footer ═══════════════ */
body.page-about, .page-about main { background: var(--night); }

/* Hero: an indented statement, then one wide crew plate */
.page-about .ab-hero { padding-top: calc(var(--nav-h) + 88px); }
.page-about .ab-hero__title { font-family: var(--font-statement); font-size: 84px; line-height: 1.02; letter-spacing: -.035em; max-width: 1120px; }
.page-about .ab-hero__title::before, .page-contact .ct-hero__title::before { content: ""; display: inline-block; width: 1.4em; }
.page-about .ab-crew { margin-top: 96px; }
.page-about .ab-crew__plate { aspect-ratio: 1392 / 760; background: var(--night-2); }
.page-about .ab-crew__plate img { object-position: 50% 60%; }
.page-about .ab-cap { display: flex; justify-content: space-between; gap: 16px; padding-top: 12px; font-size: 14px; line-height: 1.3; letter-spacing: -.01em; }
.page-about .ab-cap span:last-child { color: var(--night-muted); text-align: right; }

/* Philosophy: label left, 30px paragraph cols 8–16, rooms table under it on white hairlines */
.page-about .ab-philo__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 88px; }
.page-about .ab-philo__label { grid-column: 1 / 4; align-self: start; padding-top: 8px; }
.page-about .ab-philo__text { grid-column: 8 / 17; }
.page-about .ab-philo__rooms { grid-column: 1 / 17; display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); }
.page-about .ab-philo__rooms > .label { grid-column: 1 / 4; padding-top: 10px; }
.page-about .ab-philo__rooms > .tbl { grid-column: 8 / 17; }

/* Team: centred 96px sans title with two 14px columns, then a staggered 4-across portrait grid */
.page-about .ab-team__head { text-align: center; }
.page-about .ab-team__head h2 { font-size: 84px; line-height: 1; letter-spacing: -.035em; max-width: 8.5ch; margin-inline: auto; }
.page-about .ab-team__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 280px)); justify-content: center; gap: 48px; margin-top: 40px; text-align: left; }
.page-about .ab-team__cols p { font-size: 14px; line-height: 1.45; letter-spacing: -.01em; color: var(--night-muted); text-wrap: pretty; }
.page-about .ab-team__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 72px; margin-top: 120px; padding-bottom: 88px; }
.page-about .ab-person:nth-child(even) { translate: 0 88px; }
.page-about .ab-person__plate { aspect-ratio: 5 / 7; background: var(--night-2); }

/* Awards: scattered titles, each with a 14px line */
.page-about .ab-awards__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 96px; align-items: start; }
.page-about .ab-awards__intro { grid-column: 1 / 4; grid-row: 1; }
.page-about .ab-awards__intro p { margin-top: 8px; font-size: 14px; line-height: 1.4; letter-spacing: -.01em; color: var(--night-muted); max-width: 16em; }
.page-about .ab-award h3 { font-family: var(--font-statement); font-size: 30px; line-height: 1.12; letter-spacing: -.02em; color: var(--on-night-2); max-width: 11em; }
.page-about .ab-award p { margin-top: 12px; font-size: 14px; line-height: 1.4; letter-spacing: -.01em; color: var(--night-muted); max-width: 20em; text-wrap: pretty; }
.page-about .ab-award:nth-child(2) { grid-column: 5 / 9; grid-row: 1; }
.page-about .ab-award:nth-child(3) { grid-column: 12 / 16; grid-row: 1; margin-top: 136px; }
.page-about .ab-award:nth-child(4) { grid-column: 2 / 6; grid-row: 2; margin-top: 40px; }
.page-about .ab-award:nth-child(5) { grid-column: 9 / 13; grid-row: 2; margin-top: 160px; }
.page-about .ab-award:nth-child(6) { grid-column: 5 / 9; grid-row: 3; }
.page-about .ab-award:nth-child(7) { grid-column: 13 / 17; grid-row: 3; margin-top: 64px; }

/* ═══════════════ CONTACT: white ═══════════════ */
.ct-cap { display: flex; justify-content: space-between; gap: 16px; padding-top: 12px; font-size: 14px; line-height: 1.3; letter-spacing: -.01em; }
.ct-cap span:last-child { color: var(--muted); text-align: right; }

.page-contact .ct-hero { padding-top: calc(var(--nav-h) + 88px); }
.page-contact .ct-hero__title { font-family: var(--font-statement); font-size: 64px; line-height: 1.02; letter-spacing: -.035em; max-width: 1040px; }
.page-contact .ct-pairs { display: grid; row-gap: 72px; margin-top: 120px; }
.page-contact .ct-pair { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.page-contact .ct-pair__label { display: grid; gap: 2px; padding-top: 10px; }
.page-contact .ct-pair__lines { display: grid; justify-items: end; width: max-content; font-family: var(--font-statement); font-size: 40px; line-height: 1.08; letter-spacing: -.02em; }
.page-contact .ct-pair__lines a { transition: color var(--dur-fast) var(--ease); }
.page-contact .ct-pair__lines a:hover { color: var(--accent-ink); }
.page-contact .ct-pair:nth-child(1) .ct-pair__label { grid-column: 1 / 4; }
.page-contact .ct-pair:nth-child(1) .ct-pair__lines { grid-column: 4 / 11; }
.page-contact .ct-pair:nth-child(2) .ct-pair__label { grid-column: 5 / 8; }
.page-contact .ct-pair:nth-child(2) .ct-pair__lines { grid-column: 8 / 15; }
.page-contact .ct-pair:nth-child(3) .ct-pair__label { grid-column: 9 / 12; }
.page-contact .ct-pair:nth-child(3) .ct-pair__lines { grid-column: 12 / 17; }

.page-contact .ct-plate__img { aspect-ratio: 1392 / 620; }
.page-contact .ct-plate__img img { object-position: 50% 60%; }

.page-contact .ct-where__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); }
.page-contact .ct-where__label { grid-column: 1 / 4; align-self: start; padding-top: 14px; font-size: 13px; letter-spacing: 0; }
.page-contact .ct-where__list { grid-column: 6 / 17; display: grid; row-gap: 72px; }
.page-contact .ct-addr__lines { font-family: var(--font-statement); font-size: 60px; line-height: 1.02; letter-spacing: -.03em; max-width: 9.6em; text-wrap: balance; }
.page-contact .ct-addr__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 20px; font-size: 14px; line-height: 1.4; letter-spacing: -.01em; color: var(--muted); }

.page-contact .ct-book__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; padding-top: 48px; border-top: 1px solid var(--line); }
.page-contact .ct-book__label { grid-column: 1 / 4; padding-top: 12px; }
.page-contact .ct-book__side { grid-column: 4 / 8; display: grid; gap: 24px; }
.page-contact .ct-book__fig { margin-top: 32px; }
.page-contact .ct-book__plate { aspect-ratio: 3 / 4; }
.page-contact .ct-form { grid-column: 9 / 17; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--gutter); padding-top: 8px; }
.page-contact .ct-field { position: relative; display: grid; gap: 6px; }
.page-contact .ct-field--wide, .page-contact .ct-form__foot { grid-column: 1 / -1; }
.page-contact .ct-field input, .page-contact .ct-field select, .page-contact .ct-field textarea { width: 100%; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; background: transparent; color: var(--text);
  font-family: var(--font); font-size: 18px; line-height: 1.35; letter-spacing: -.01em; padding: 8px 0 12px; -webkit-appearance: none; appearance: none; transition: border-color var(--dur-fast) var(--ease); }
.page-contact .ct-field textarea { resize: vertical; min-height: 112px; }
.page-contact .ct-field select { padding-right: 24px; cursor: pointer; }
.page-contact .ct-field--select::after { content: ""; position: absolute; right: 4px; bottom: 22px; width: 7px; height: 7px; border-right: 1.2px solid var(--text); border-bottom: 1.2px solid var(--text); rotate: 45deg; pointer-events: none; }
.page-contact .ct-field ::placeholder { color: var(--muted); opacity: 1; }
.page-contact .ct-field input:hover, .page-contact .ct-field select:hover, .page-contact .ct-field textarea:hover { border-bottom-color: var(--muted); }
.page-contact .ct-field input:focus, .page-contact .ct-field select:focus, .page-contact .ct-field textarea:focus { border-bottom-color: var(--text); }
.page-contact .ct-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 8px; }
.page-contact .ct-form__foot p { font-size: 14px; line-height: 1.4; color: var(--muted); }
.page-contact .ct-form__foot p a { color: var(--text); border-bottom: 1px solid var(--line-2); transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.page-contact .ct-form__foot p a:hover { color: var(--accent-ink); border-color: var(--accent-ink); }

/* ═══════════════ 404: one white screen ═══════════════ */
.page-404 .nf { min-height: 100vh; min-height: 100svh; padding: calc(var(--nav-h) + 72px) 0 var(--section-tight); display: flex; align-items: stretch; }
.page-404 .nf__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); grid-template-rows: auto 1fr; align-items: end; }
.page-404 .nf__code { grid-column: 1 / 12; grid-row: 1; font-family: var(--font-display); font-size: clamp(160px, 25vw, 380px); line-height: .9; letter-spacing: -.05em; margin-left: -.04em; }
.page-404 .nf__fig { grid-column: 13 / 17; grid-row: 1; padding-bottom: 20px; }
.page-404 .nf__plate { aspect-ratio: 3 / 2; }
.page-404 .nf__text { grid-column: 4 / 13; grid-row: 2; margin-top: 88px; align-self: start; }
.page-404 .nf__text h1 { font-family: var(--font-statement); font-size: 76px; line-height: 1.02; letter-spacing: -.035em; max-width: 11em; }
.page-404 .nf__text p { margin-top: 24px; font-size: 15px; line-height: 1.5; letter-spacing: -.01em; color: var(--muted); max-width: 30em; }
.page-404 .nf__links { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 32px; }

/* ── Responsive ── */
@media (max-width: 1280px) {
  .page-about .ab-hero__title, .page-about .ab-team__head h2 { font-size: 72px; }
  .page-contact .ct-hero__title { font-size: 56px; }
  .page-contact .ct-addr__lines { font-size: 52px; }
  .page-contact .ct-pair__lines { font-size: 36px; }
  .page-404 .nf__text h1 { font-size: 64px; }
}
@media (max-width: 1024px) {
  .page-about .ab-philo__text { grid-column: 6 / 17; }
  .page-about .ab-philo__rooms > .label { grid-column: 1 / 17; margin-bottom: 16px; }
  .page-about .ab-philo__rooms > .tbl { grid-column: 1 / 17; }
  .page-about .ab-award:nth-child(even) { grid-column: 1 / 8; }
  .page-about .ab-award:nth-child(odd) { grid-column: 10 / 17; }
  .page-about .ab-awards__intro { grid-column: 1 / 17; }
  .page-about .ab-award:nth-child(2), .page-about .ab-award:nth-child(3) { grid-row: 2; }
  .page-about .ab-award:nth-child(4), .page-about .ab-award:nth-child(5) { grid-row: 3; }
  .page-about .ab-award:nth-child(6), .page-about .ab-award:nth-child(7) { grid-row: 4; }
  .page-about .ab-award:nth-child(even) { margin-top: 0; }
  .page-about .ab-award:nth-child(odd) { margin-top: 72px; }
  .page-contact .ct-pair:nth-child(n) .ct-pair__label { grid-column: 1 / 5; }
  .page-contact .ct-pair:nth-child(n) .ct-pair__lines { grid-column: 5 / 17; }
  .page-contact .ct-pair:nth-child(2) .ct-pair__lines { padding-left: 12%; }
  .page-contact .ct-pair:nth-child(3) .ct-pair__lines { padding-left: 24%; }
  .page-contact .ct-where__list { grid-column: 4 / 17; }
  .page-contact .ct-book__label { grid-column: 1 / 17; margin-bottom: 24px; }
  .page-contact .ct-book__side { grid-column: 1 / 8; }
  .page-404 .nf__fig { grid-column: 12 / 17; }
  .page-404 .nf__text { grid-column: 1 / 13; }
}
@media (max-width: 900px) {
  .page-about .ab-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }
  .page-about .ab-philo__text { grid-column: 1 / 17; }
  .page-contact .ct-book__side, .page-contact .ct-form { grid-column: 1 / 17; }
  .page-contact .ct-book__side { margin-bottom: 64px; }
  .page-contact .ct-book__fig { max-width: 480px; }
}
@media (max-width: 640px) {
  .page-about .ab-hero, .page-contact .ct-hero { padding-top: calc(var(--nav-h) + 48px); }
  .page-about .ab-hero__title { font-size: 42px; line-height: 1.05; }
  .page-about .ab-crew { margin-top: 48px; }
  .page-about .ab-crew__plate { aspect-ratio: 4 / 3; }
  .page-about .ab-cap { flex-direction: column; gap: 2px; }
  .page-about .ab-cap span:last-child { text-align: left; }
  .page-about .ab-philo__grid { row-gap: 48px; }
  .page-about .ab-philo__label { grid-column: 1 / 17; padding-top: 0; }
  .page-about .ab-team__head h2 { font-size: 40px; }
  .page-about .ab-team__cols { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; max-width: 300px; margin-inline: auto; }
  .page-about .ab-team__grid { column-gap: 12px; row-gap: 40px; margin-top: 64px; padding-bottom: 48px; }
  .page-about .ab-person:nth-child(even) { translate: 0 48px; }
  .page-about .ab-awards__grid { row-gap: 40px; }
  .page-about .ab-award:nth-child(n) { grid-column: 1 / 17; grid-row: auto; margin-top: 0; }
  .page-about .ab-award:nth-child(odd) { padding-left: 22%; }
  .page-about .ab-award h3 { font-size: 26px; }
  .page-contact .ct-hero__title { font-size: 38px; line-height: 1.05; }
  .page-contact .ct-pairs { margin-top: 64px; row-gap: 44px; }
  .page-contact .ct-pair { row-gap: 8px; }
  .page-contact .ct-pair:nth-child(n) .ct-pair__label, .page-contact .ct-pair:nth-child(n) .ct-pair__lines { grid-column: 1 / 17; padding-left: 0; }
  .page-contact .ct-pair__label { padding-top: 0; }
  .page-contact .ct-pair__lines { font-size: 28px; justify-items: start; width: auto; }
  .page-contact .ct-plate__img { aspect-ratio: 4 / 3; }
  .page-contact .ct-cap { flex-direction: column; gap: 2px; }
  .page-contact .ct-cap span:last-child { text-align: left; }
  .page-contact .ct-where__label { grid-column: 1 / 17; padding-top: 0; margin-bottom: 20px; }
  .page-contact .ct-where__list { grid-column: 1 / 17; row-gap: 48px; }
  .page-contact .ct-addr__lines { font-size: 36px; line-height: 1.05; }
  .page-contact .ct-form { grid-template-columns: 1fr; row-gap: 32px; }
  .page-contact .ct-book__side { margin-bottom: 48px; }
  .page-404 .nf { padding-top: calc(var(--nav-h) + 48px); }
  .page-404 .nf__grid { grid-template-rows: auto; row-gap: 32px; }
  .page-404 .nf__code { grid-column: 1 / 17; font-size: 150px; }
  .page-404 .nf__fig { grid-column: 1 / 13; grid-row: 2; padding-bottom: 0; }
  .page-404 .nf__text { grid-column: 1 / 17; grid-row: 3; margin-top: 16px; }
  .page-404 .nf__text h1 { font-size: 44px; line-height: 1.05; }
}

/* ───────── Style Guide ───────── */
/* Noira — style guide page (body.page-style-guide). Prefix sg-. Tokens only; shared classes are only re-placed, never re-styled. */

/* ── Shared bits of this page ── */
.page-style-guide .sg-cls { font-family: var(--font); font-size: 14px; line-height: 1.35; letter-spacing: -.01em; color: var(--text); }
.page-style-guide .sg-k { font-family: var(--font); font-size: 14px; line-height: 1.35; letter-spacing: -.01em; color: var(--muted); }
.page-style-guide .sg-note { font-size: 14px; line-height: 1.45; letter-spacing: -.01em; color: var(--muted); max-width: 34em; text-wrap: pretty; }
.page-style-guide .sg-note .sg-cls { font-size: 14px; }
.page-style-guide .sg-note--cls { margin-top: 20px; }
.page-style-guide .sg-row__body > .sg-note:first-child { margin-bottom: 28px; }

/* ── Overview: the first 1440×990 screen ── */
.sg-top { padding: calc(var(--nav-h) + 44px) 0 0; }
.sg-top__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); }
.sg-top__main { grid-column: 1 / 11; grid-row: 1; display: grid; align-content: start; }
.sg-top__meta { display: flex; flex-wrap: wrap; gap: 4px 32px; }
.page-style-guide h1.sg-top__name { font-family: var(--font-display); font-size: min(300px, 21vw); line-height: .8; letter-spacing: -.045em; margin: 28px 0 0 -.04em; }
.sg-top__line { margin-top: 36px; max-width: 27em; }
.sg-voices { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); column-gap: var(--col-gap); margin-top: 52px; padding-top: 20px; border-top: 1px solid var(--line); }
.sg-voice { display: grid; gap: 14px; align-content: start; }
.sg-voice__big { font-family: var(--font-statement); font-size: clamp(40px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.sg-tiny { display: grid; border-top: 1px solid var(--line); }
.sg-tiny li { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.3; letter-spacing: -.01em; }
.sg-tiny li > span:last-child { margin-left: auto; font-size: 12px; color: var(--muted); }
.sg-tiny__nav span:first-child { font-size: 12px; }
.sg-tiny li:nth-child(3) span:first-child { font-size: 14px; }
.sg-tiny__label span:first-child { color: var(--muted); }
.sg-top__fig { grid-column: 12 / 17; grid-row: 1; display: grid; gap: 12px; align-content: start; }
.sg-top__fig .plate { aspect-ratio: 2 / 3; }
.sg-ladder { grid-column: 1 / 17; display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); margin-top: 56px; }
.sg-ladder__chips { display: contents; }
.sg-ladder__chips li { display: grid; gap: 2px; align-content: start; font-size: 12px; line-height: 1.3; letter-spacing: -.01em; }
.sg-ladder__chips li span:last-child { color: var(--muted); }
.sg-ladder__chips i, .sg-sws i, .sg-brand i { display: block; outline: 1px solid var(--line); outline-offset: -1px; }
.sg-ladder__chips i { aspect-ratio: 1; margin-bottom: 8px; }
.sg-ladder__brand { grid-column: 14 / 17; display: grid; grid-template-columns: 24px 1fr; column-gap: 12px; row-gap: 2px; align-content: start; font-size: 12px; line-height: 1.3; letter-spacing: -.01em; }
.sg-ladder__brand i { grid-row: 1 / 3; width: 24px; height: 24px; background: var(--accent-ink); }
.sg-ladder__brand span:nth-of-type(2) { color: var(--muted); }
.sg-ladder__rule { grid-column: 1 / 3; margin-top: 14px; font-family: var(--font); font-size: 14px; line-height: 1.4; color: var(--muted); max-width: 22em; }

/* ── Section heads and rows ── */
.sg-head { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); margin-bottom: var(--head-to-content); }
.sg-head > .label { grid-column: 1 / 4; padding-top: 14px; }
.sg-head h2 { grid-column: 4 / 13; }
.sg-head .lead-xl { grid-column: 4 / 11; margin-top: 28px; }
.sg-row { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); padding: 24px 0 64px; border-top: 1px solid var(--line); }
.sg-rows > .sg-row:last-child { padding-bottom: 0; }
.sg-row > .label { grid-column: 1 / 4; }
.sg-row__body { grid-column: 4 / 17; min-width: 0; }
.sg-row--dark .sg-row__body { background: var(--night); color: var(--on-night); padding: 28px; }
.sg-row--dark .sg-sw__var, .sg-row--dark .sg-sw__hex, .sg-row--dark .sg-sw__use { color: var(--night-muted); }
.sg-row--dark .sg-sw__name { color: var(--on-night); }
.sg-row--dark .sg-sws i { outline-color: var(--night-line); }

/* Swatches */
.sg-sws { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px var(--col-gap); }
.sg-sw { display: grid; gap: 2px; align-content: start; }
.sg-sw i { aspect-ratio: 3 / 2; margin-bottom: 12px; }
.sg-sw__name { font-size: 14px; line-height: 1.35; letter-spacing: -.01em; }
.sg-sw__var, .sg-sw__hex, .sg-sw__use { font-size: 13px; line-height: 1.35; letter-spacing: -.01em; color: var(--muted); }
.sg-sw__var { color: var(--text); }
.sg-sw__use { margin-top: 4px; }

/* Brand slot: small chips + where it may / may not appear */
.sg-brand { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px var(--col-gap); }
.sg-brand li { display: grid; gap: 2px; align-content: start; }
.sg-brand i { width: 40px; height: 40px; margin-bottom: 10px; }
.sg-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); margin-top: 48px; }
.sg-rules > div, .sg-pair > div { display: grid; gap: 14px; align-content: start; }
.sg-list { display: grid; border-top: 1px solid var(--line); }
.sg-list li { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.35; letter-spacing: -.01em; }
.sg-list--no li { color: var(--muted); }
.sg-acc { display: inline-flex; color: var(--accent-ink); }
.sg-acc svg { width: 12px; height: 12px; }
.sg-list__dot i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-ink); }
.sg-list__focus span { outline: 2px solid var(--accent); outline-offset: 3px; }
.page-style-guide .lnk.sg-hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.page-style-guide .lnk.sg-hover svg { transform: translate(2px, -2px); }
.page-style-guide .btn.sg-hover { --b-bg: var(--night-3); }
.page-style-guide .btn.sg-hover .btn__go svg { transform: translateX(3px); }
.page-style-guide a.tbl__row.sg-hover { color: var(--accent-ink); }
.page-style-guide a.tbl__row.sg-hover svg { transform: translate(2px, -2px); }

/* ── Typography ── */
.sg-fams { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 40px; margin-bottom: 64px; }
.sg-fam { grid-column: 1 / 9; }
.sg-scale { grid-column: 9 / 13; display: grid; align-content: end; gap: 14px; padding-top: 24px; border-top: 1px solid var(--line-ink); }
.sg-scale--tiny { grid-column: 13 / 17; }
.sg-scale__big { font-family: var(--font-statement); font-size: clamp(64px, 6.6vw, 96px); line-height: 1; letter-spacing: -.04em; }
.sg-scale__small { font-size: 12px; line-height: 1.25; letter-spacing: -.01em; padding-bottom: 6px; }
.sg-scale { padding-bottom: 12px; }
.sg-fam { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 32px; align-items: end; padding-top: 24px; border-top: 1px solid var(--line-ink); }
.sg-fam > div { display: grid; gap: 10px; padding-bottom: 12px; }
.sg-fam .sg-note { max-width: 20em; }
.sg-fam__aa { font-family: var(--font-display); font-size: 168px; line-height: .9; letter-spacing: -.05em; padding-top: 16px; }
.sg-ruler { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 22px; }
.sg-ruler li { display: grid; justify-items: center; gap: 10px; }
.sg-ruler__a { font-family: var(--font-display); line-height: 1; letter-spacing: -.02em; text-box: trim-both cap alphabetic; }
.sg-ruler .is-mid .sg-ruler__a { color: var(--muted); }
.sg-ruler__n { font-size: 12px; line-height: 1; color: var(--muted); margin-top: 4px; }
.sg-row--ruler .sg-note { margin-top: 28px; }
.sg-specs { display: grid; }
.sg-spec { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); padding: 24px 0 32px; border-top: 1px solid var(--line); align-items: start; }
.sg-spec--small { align-items: baseline; }
.sg-spec--small .sg-spec__meta { padding-top: 0; }
.sg-spec__meta { grid-column: 1 / 4; display: grid; gap: 4px; padding-top: 4px; }
.sg-spec > :last-child { grid-column: 4 / 17; }
.sg-sp { margin: 0; max-width: 34em; }
.sg-spec .t-giant, .sg-spec .t-state, .sg-spec .t-big { max-width: 15em; }
.sg-spec .t-ui, .sg-spec .t-label { display: block; }

/* ── Grid & space ── */
.sg-cols { position: relative; padding: 0 var(--gutter); margin-bottom: 72px; }
.sg-cols__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); height: 240px; }
.sg-cols__grid i { background: var(--surface); position: relative; font-style: normal; }
.sg-cols__grid b { position: absolute; left: 8px; top: 8px; font-size: 12px; line-height: 1; font-weight: 400; color: var(--muted); }
.sg-cols__gut { position: absolute; top: 0; height: 240px; width: var(--gutter); display: grid; place-items: center; font-size: 12px; color: var(--muted);
  background: repeating-linear-gradient(135deg, var(--line) 0 1px, transparent 1px 6px); }
.sg-cols__gut--l { left: 0; }
.sg-cols__gut--r { right: 0; }
.sg-cols__spans { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 14px; margin-top: 14px; }
.sg-span { padding-top: 8px; border-top: 1px solid var(--line-ink); font-size: 13px; line-height: 1.3; letter-spacing: -.01em; }
.sg-span--a { grid-column: 1 / 4; }
.sg-span--b { grid-column: 4 / 17; }
.sg-span--c { grid-column: 8 / 17; grid-row: 2; }
.sg-space, .sg-durs { display: grid; border-top: 1px solid var(--line); }
.sg-space li, .sg-durs li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 5fr); column-gap: var(--col-gap); align-items: center; min-height: 44px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sg-space i, .sg-durs i { display: block; height: 10px; background: var(--text); }
.sg-space i.is-full { width: 100%; background: repeating-linear-gradient(90deg, var(--text) 0 6px, transparent 6px 10px); }
.sg-gap { display: grid; }
.sg-gap__band { height: 56px; background: var(--surface); display: flex; align-items: center; padding: 0 16px; font-size: 12px; color: var(--muted); }
.sg-gap__space { height: 120px; position: relative; display: flex; align-items: center; padding-left: 28px; }
.sg-gap__space::before { content: ""; position: absolute; left: 12px; top: 6px; bottom: 6px; width: 1px; background: var(--text); }
.sg-gap__space::after { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 13px; border-block: 1px solid var(--text); }
.sg-radii { display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: end; }
.sg-radii li { display: grid; gap: 4px; justify-items: start; }
.sg-radii i { width: 112px; height: 112px; background: var(--surface); border: 1px solid var(--text); margin-bottom: 10px; }
.sg-radii i.sg-radii__pill { width: 176px; height: 48px; }
.sg-shadow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
.sg-shadow__item { display: grid; gap: 4px; justify-items: start; align-content: start; }
.sg-shadow__stage { background: var(--surface); padding: 32px; margin-bottom: 18px; }
.sg-switch { display: inline-flex; gap: 10px; padding: 5px; background: var(--bg); border-radius: var(--r-pill); box-shadow: var(--shadow-1); }
.sg-switch button { font-size: 12px; line-height: 1; letter-spacing: -.01em; padding: 9px 14px; border-radius: var(--r-pill); color: var(--muted); transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.sg-switch button:hover { color: var(--text); }
.sg-switch button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.sg-shadow__box { display: block; width: 168px; height: 88px; background: var(--bg); box-shadow: var(--shadow-2); }

/* ── Components ── */
.sg-demo { display: flex; flex-wrap: wrap; gap: 32px 64px; }
.sg-demo__item { display: grid; gap: 6px; justify-items: start; align-content: start; }
.sg-demo__item > .lnk { margin-bottom: 12px; }
.sg-paper { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 32px; padding: 28px; background: var(--night); }
.sg-paper .sg-cls { color: var(--on-night); }
.sg-paper .sg-k { color: var(--night-muted); }
.sg-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 40px; }
.page-style-guide .sg-flat { grid-column: auto; }
.sg-plates, .sg-works, .sg-ink { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.sg-plates figure { display: grid; gap: 12px; }
.sg-plates__wide { grid-column: 1 / 10; }
.sg-plates__wide .plate { aspect-ratio: 2.2 / 1; }
.sg-plates__tall { grid-column: 10 / 14; }
.sg-plates__tall .plate { aspect-ratio: 3 / 4; }
.sg-plates > .sg-note, .sg-works > .sg-note { grid-column: 1 / 14; }
.sg-works { align-items: start; }
.sg-works .work:nth-child(1) { grid-column: 1 / 8; }
.sg-works .work:nth-child(2) { grid-column: 9 / 13; margin-top: 96px; }
.sg-works .work:nth-child(n) { grid-row: 1; }
.sg-ink { align-items: stretch; row-gap: 20px; }
.sg-ink__plate { grid-column: 1 / 10; background: var(--surface); padding: 40px 56px; display: grid; place-items: center; }
.sg-ink__plate img { mix-blend-mode: multiply; width: 100%; height: auto; }
.sg-ink__side { grid-column: 10 / 14; display: grid; grid-template-rows: 1fr auto; gap: 12px; }
.sg-ink__plate--white { background: var(--bg); border: 1px solid var(--line); padding: 24px; }
.sg-ink__plate--white img { width: auto; height: 100%; max-height: 360px; }
.sg-ink > .sg-note { grid-column: 1 / 14; }
.sg-pin { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); }
.sg-pin li { display: grid; gap: 10px; }
.sg-pin__stage { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--line); overflow: hidden; background: var(--bg); }
.sg-pin__title { position: absolute; left: 0; right: 0; top: 36%; text-align: center; font-family: var(--font-display); font-size: 18px; line-height: 1.2; letter-spacing: -.02em; }
.sg-pin__stage--mid .sg-pin__title { top: 8%; }
.sg-pin__stage img { position: absolute; left: 50%; bottom: 6%; height: 62%; width: auto; translate: -50% 0; mix-blend-mode: multiply; }
.sg-pin__stage--end img { height: 84%; bottom: 8%; }
.sg-head-demo { display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 24px; height: 104px; border: 1px solid var(--line); margin-bottom: 12px; }
.sg-head-demo__nav { display: flex; gap: 6px; font-size: 12px; line-height: 1.25; letter-spacing: -.01em; color: var(--muted); }
.sg-head-demo__nav .is-current { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.sg-head-demo__nav .is-current::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-ink); }
.sg-head-demo--dark { background: var(--night); border-color: var(--night); color: var(--on-night); }
.sg-head-demo--dark .sg-head-demo__nav { color: var(--night-muted); }
.sg-head-demo--dark .sg-head-demo__nav .is-current { color: var(--on-night); }
.sg-head-demo--dark .sg-head-demo__nav .is-current::before { background: var(--accent-on-dark); }

/* ── Night pieces ── */
.sg-night { padding-block: var(--section); }
.sg-night .sg-row { border-color: var(--night-line); }
.sg-night .sg-note { color: var(--night-muted); }
.sg-night .sg-cls { color: var(--on-night); }
.sg-night .sg-k { color: var(--night-muted); }
.sg-night .stat-pair .stat:nth-child(1) { grid-column: 1 / 8; }
.sg-night .stat-pair .stat:nth-child(2) { grid-column: 9 / 17; }
.sg-discs { display: flex; flex-wrap: wrap; gap: 24px; }
.page-style-guide .sg-discs .disc { position: relative; left: auto; top: auto; }
.sg-scenes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 40px; }
.sg-scene { display: grid; gap: 14px; align-content: start; }
.sg-scene__box { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--night-line); overflow: hidden; background: var(--night); display: grid; place-items: center; }
.sg-rays svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sg-rays__lines line { stroke: var(--on-night); stroke-opacity: .35; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sg-rays__nums text { fill: var(--night-muted); font-family: var(--font); font-size: 9px; letter-spacing: .02em; text-anchor: middle; }
.sg-rays__title { position: relative; z-index: 1; background: var(--night); padding: 14px 24px; font-family: var(--font-display); font-size: 30px; line-height: 1.05; letter-spacing: -.025em; }
.sg-wheel { --r: 150px; }
.sg-wheel__ring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; rotate: -20deg; }
.sg-wheel__ring .plate { position: absolute; width: 84px; height: 62px; left: -42px; top: -31px; transform: rotate(var(--a)) translate(var(--r)) rotate(var(--t)); background: var(--night-2); }
.sg-wheel__year { position: relative; z-index: 1; font-family: var(--font-display); font-size: 56px; line-height: 1; letter-spacing: -.035em; }
.sg-foot-demo { border: 1px solid var(--night-line); padding: 24px 24px 0; overflow: hidden; }
.sg-foot-demo__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); font-size: 12px; color: var(--night-muted); }
.sg-foot-demo__cols span { padding-top: 8px; border-top: 1px solid var(--night-line); }
.sg-foot-demo__mark { display: block; text-align: right; margin: 48px -.1em 0 0; font-family: var(--font-display); font-size: min(19vw, 260px); line-height: .76; letter-spacing: -.04em; white-space: nowrap; margin-bottom: -.06em; }

/* ── Motion & icon ── */
.sg-ease { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 32px; margin-bottom: 40px; }
.sg-ease li { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 24px; row-gap: 4px; align-content: start; cursor: default; }
.sg-ease svg { grid-row: 1 / 5; width: 120px; height: 120px; overflow: visible; }
.sg-ease path { fill: none; stroke: var(--text); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.sg-ease path.sg-ease__axis { stroke: var(--line-2); }
.sg-ease i { position: relative; display: block; height: 1px; background: var(--line-2); margin-top: 28px; }
.sg-ease i::after { content: ""; position: absolute; left: 0; top: -5px; width: 11px; height: 11px; border-radius: 50%; background: var(--text); transition: left var(--d) var(--e); }
.sg-ease li:hover i::after { left: calc(100% - 11px); }
.sg-durs { margin-bottom: 24px; }
.sg-icons { display: flex; flex-wrap: wrap; gap: 32px 48px; }
.sg-icon { display: grid; gap: 4px; justify-items: start; width: 176px; }
.sg-icon__box { width: 112px; height: 112px; border: 1px solid var(--line); display: grid; place-items: center; margin-bottom: 10px; }
.sg-icon__box svg { color: var(--text); }
.sg-icon__box--12 svg { width: 12px; height: 12px; color: var(--accent-ink); }
.sg-icon__box--48 svg { width: 48px; height: 48px; }
.sg-icon__box--20 svg { width: 20px; height: 20px; }

/* ── Responsive ── */
@media (max-width: 1280px) {
  .sg-fam { grid-column: 1 / 17; }
  .sg-scale { grid-column: 1 / 9; }
  .sg-scale--tiny { grid-column: 9 / 17; }
  .sg-brand { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .sg-top__main { grid-column: 1 / 11; }
  .sg-top__fig { grid-column: 11 / 17; }
  .sg-voices { grid-template-columns: 1fr; row-gap: 32px; }
  .sg-ladder { grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 24px; }
  .sg-ladder__brand { grid-column: span 7; }
  .sg-head h2 { grid-column: 4 / 17; }
  .sg-head .lead-xl { grid-column: 4 / 15; }
  .sg-row > .label, .sg-spec__meta { grid-column: 1 / 17; margin-bottom: 18px; }
  .sg-row__body, .sg-spec > :last-child { grid-column: 1 / 17; }
  .sg-fam__aa { font-size: 120px; }
  .t-state.sg-sp--state { font-size: 88px; }
}
@media (max-width: 900px) {
  .sg-top__main, .sg-top__fig { grid-column: 1 / 17; grid-row: auto; }
  .sg-top__fig { margin-top: 48px; }
  .sg-top__fig .plate { aspect-ratio: 4 / 3; }
  .sg-voices { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
  .sg-sws { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sg-ink__plate { grid-column: 1 / 9; }
  .sg-ink__side { grid-column: 9 / 14; }
}
@media (max-width: 640px) {
  .sg-top { padding-top: calc(var(--nav-h) + 32px); }
  .page-style-guide h1.sg-top__name { font-size: 30vw; margin-top: 20px; }
  .sg-top__line { margin-top: 24px; }
  .sg-voices { grid-template-columns: 1fr; margin-top: 36px; }
  .sg-voice__big { font-size: 40px; }
  .sg-top__fig .plate { aspect-ratio: 2 / 3; }
  .sg-ladder { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 40px; }
  .sg-ladder__brand { grid-column: 1 / -1; }
  .sg-head > .label, .sg-head h2, .sg-head .lead-xl { grid-column: 1 / 17; }
  .sg-head > .label { padding-top: 0; margin-bottom: 14px; }
  .sg-head .lead-xl { margin-top: 20px; }
  .sg-row { padding-bottom: 48px; }
  .sg-row--dark .sg-row__body { padding: 20px; }
  .sg-sws { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-brand { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-rules, .sg-pair, .sg-shadow, .sg-scenes, .sg-ease { grid-template-columns: 1fr; row-gap: 40px; }
  .sg-fam__aa { font-size: 96px; }
  .sg-scale, .sg-scale--tiny { grid-column: 1 / 17; }
  .sg-fams { row-gap: 32px; }
  .sg-ruler { gap: 16px 14px; }
  .sg-ruler li:nth-last-child(-n+2) .sg-ruler__a { font-size: 88px !important; }
  .sg-spec { padding: 22px 0 28px; }
  .t-state.sg-sp--state { font-size: 44px; letter-spacing: -.03em; }
  .t-h1.sg-sp--h1 { font-size: 40px; }
  .t-stat.sg-sp--stat { font-size: 56px; }
  .t-quote.sg-sp--quote { font-size: 28px; }
  .sg-cols__grid, .sg-cols__gut { height: 160px; }
  .sg-cols__grid b { display: none; }
  .sg-cols__gut { width: var(--gutter); font-size: 0; }
  .sg-span { font-size: 12px; }
  .sg-span--a { grid-column: 1 / 17; }
  .sg-span--b { grid-column: 4 / 17; grid-row: 2; }
  .sg-span--c { grid-column: 8 / 17; grid-row: 3; }
  .sg-space li, .sg-durs li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 8px; }
  .sg-space li .sg-k, .sg-durs li .sg-k { grid-column: 1 / -1; grid-row: 2; }
  .sg-space i, .sg-durs i { grid-column: 2; grid-row: 1; max-width: 100%; }
  .sg-plates, .sg-works, .sg-ink { grid-template-columns: 1fr; row-gap: 28px; }
  .sg-plates > *, .sg-works > *, .sg-ink > * { grid-column: 1 / -1 !important; margin-top: 0 !important; grid-row: auto !important; }
  .sg-ink__plate { padding: 24px; }
  .sg-pin { column-gap: 8px; }
  .sg-pin__title { font-size: 13px; }
  .sg-pin__stage { aspect-ratio: 3 / 4; }
  .sg-pin__stage--mid img { height: 56%; }
  .sg-head-demo { padding: 14px 16px; height: 92px; }
  .sg-night .stat-pair .stat:nth-child(n) { grid-column: 1 / -1; }
  .sg-discs { gap: 14px; }
  .sg-wheel { --r: 96px; }
  .sg-wheel__ring .plate { width: 52px; height: 38px; left: -26px; top: -19px; }
  .sg-wheel__year { font-size: 40px; }
  .sg-rays__title { font-size: 20px; padding: 6px 10px; }
  .sg-foot-demo { padding: 16px 16px 0; }
  .sg-foot-demo__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .sg-icons { gap: 28px 16px; }
  .sg-icon { width: calc(50% - 8px); }
}

/* ───────── Variants B ───────── */
/* Noira — section variants, part B (statement · intro · list · chapter · work · interlude · people · stats · logos · team · quote · contact).
   Prefix vb-. Tokens only. Gold-page variants (…-a) reuse noira.css classes; the rest are new compositions in the same DNA. */

/* ── Variant frame: a hairline, a 13px label row naming the variant and its classes, then the section ── */
.vb-v { position: relative; padding: 28px 0 var(--section-tight); border-top: 1px solid var(--line); overflow-x: clip; }
.vb-v.band--night { background: var(--night); color: var(--on-night); border-top-color: var(--night-line); }
.vb-v.band--night + .vb-v.band--night { padding-top: 28px; }
.vb-v--flush { padding-bottom: 0; }
.vb-tag { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 64px; font-size: 13px; line-height: 1.3; letter-spacing: -.01em; }
.vb-tag code { font-family: var(--mono); font-size: 12px; letter-spacing: 0; }
.vb-tag__id { color: var(--text); }
.vb-tag__name { color: var(--text-2); }
.vb-tag__cls { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; color: var(--muted); }
.band--night .vb-tag__id { color: var(--on-night); }
.band--night .vb-tag__name { color: var(--on-night-2); }
.band--night .vb-tag__cls { color: var(--night-muted); }

/* gold sections inside the frame: their own band padding is replaced by the frame's */
.vb-v > .chapter { padding-bottom: var(--section-tight); }
.vb-v .work-head .lnk { white-space: nowrap; }
.vb-v .stat span { line-height: 1.32; }
.vb-v .people__head { padding-top: 0; }
.vb-v .stats { padding: 0; }
.vb-v .brands { min-height: 860px; }

/* ═══════════ STATEMENT ═══════════ */
/* b · left-aligned big statement with two inline photo thumbnails */
.vb-st-b__h { font-family: var(--font-statement); font-size: 96px; line-height: 1.04; letter-spacing: -.035em; max-width: 13.5em; text-wrap: pretty; }
.vb-st-b__thumb { display: inline-block; width: 1.45em; height: .92em; vertical-align: -.1em; overflow: hidden; background: var(--surface); margin-inline: .04em; }
.vb-st-b__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vb-st-b__row { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); margin-top: 88px; align-items: start; }
.vb-st-b__row .label { grid-column: 1 / 4; }
.vb-st-b__row p { font-size: 14px; line-height: 1.45; letter-spacing: -.01em; color: var(--muted); text-wrap: pretty; }
.vb-st-b__row p:nth-of-type(1) { grid-column: 8 / 11; }
.vb-st-b__row p:nth-of-type(2) { grid-column: 11 / 14; }
.vb-st-b__row .lnk { grid-column: 14 / 17; justify-self: end; }

/* c · sans statement split across a tall plate: first half top-left, second half bottom-right */
.vb-st-c__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 56px; }
.vb-st-c__h { display: contents; font-family: var(--font-display); font-size: 120px; line-height: 1; letter-spacing: -.035em; }
.vb-st-c__a, .vb-st-c__b { display: block; }
.vb-st-c__a { grid-area: 1 / 1 / 2 / 6; align-self: start; text-align: right; padding-top: 24px; }
.vb-st-c__b { grid-area: 1 / 12 / 2 / 17; align-self: end; padding-bottom: 56px; }
.vb-st-c__fig { grid-area: 1 / 6 / 2 / 12; margin-inline: 16px; display: grid; gap: 12px; align-self: start; }
.vb-st-c__plate { aspect-ratio: 3 / 4; }
.vb-st-c__cols { grid-column: 6 / 12; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-inline: 16px; }
.vb-st-c__cols p { font-size: 14px; line-height: 1.45; letter-spacing: -.01em; color: var(--muted); text-wrap: pretty; }

/* ═══════════ INTRO ═══════════ */
/* b · centred 30px paragraph; facts and recognition as two hairline rows of four */
.vb-in-b > .wrap:not(.vb-tag) { display: grid; justify-items: center; }
.vb-in-b__label { margin-bottom: 28px; }
.vb-in-b__text { text-align: center; max-width: 30em; }
p.vb-in-b__text { max-width: 30em; }
.vb-in-b__row { justify-self: stretch; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); border-top: 1px solid var(--line); margin-top: 96px; }
.vb-in-b__row--recog { margin-top: 0; }
.vb-in-b__cell { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 16px 0 28px; }
.vb-in-b__cell p { font-size: 14px; line-height: 1.4; letter-spacing: -.01em; }
.vb-in-b__cell p span { display: block; color: var(--muted); }

/* c · split: tall portrait plate left (cols 1–6), paragraph, facts and recognition right (cols 8–16) */
.vb-in-c__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.vb-in-c__fig { grid-column: 1 / 7; display: grid; gap: 12px; }
.vb-in-c__plate { aspect-ratio: 4 / 5; }
.vb-in-c__body { grid-column: 8 / 17; display: grid; gap: 28px; padding-top: 4px; position: sticky; top: 96px; }
.vb-in-c__cols { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: var(--col-gap); margin-top: 72px; padding-top: 20px; border-top: 1px solid var(--line); }
.vb-in-c__cols .facts { grid-column: 1 / 6; }
.vb-in-c__cols .recog__list { grid-column: 6 / 10; }

/* ═══════════ LIST ═══════════ */
/* b · two columns of service rows; each row's thumbnail grows and takes colour on hover */
.vb-ls-b__head { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; margin-bottom: var(--head-to-content); }
.vb-ls-b__head .label { grid-column: 1 / 4; align-self: start; padding-top: 8px; }
.vb-ls-b__head h2 { grid-column: 4 / 13; }
.vb-ls-b__head .lnk { grid-column: 13 / 17; justify-self: end; }
.vb-ls-b__cols { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); }
.vb-ls-b__list:nth-child(1) { grid-column: 4 / 10; }
.vb-ls-b__list:nth-child(2) { grid-column: 11 / 17; }
.vb-ls-b__list { border-top: 1px solid var(--line); }
.vb-ls-b__row { display: grid; grid-template-columns: 80px minmax(0, 1fr) 12px; grid-template-areas: "thumb name arrow" "thumb meta arrow"; align-items: center; column-gap: 16px; row-gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line); transition: color var(--dur-fast) var(--ease); }
.vb-ls-b__thumb { grid-area: thumb; width: 64px; height: 48px; overflow: hidden; background: var(--surface); transition: width .45s var(--ease-out), height .45s var(--ease-out); }
.vb-ls-b__thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .45s var(--ease); }
.vb-ls-b__name { grid-area: name; align-self: end; font-family: var(--font-statement); font-size: 30px; line-height: 1.1; letter-spacing: -.02em; }
.vb-ls-b__meta { grid-area: meta; align-self: start; font-size: 13px; color: var(--muted); letter-spacing: -.01em; white-space: nowrap; }
.vb-ls-b__row svg { grid-area: arrow; width: 12px; height: 12px; color: var(--accent-ink); transition: transform .35s var(--ease-out); }
.vb-ls-b__row:hover, .vb-ls-b__row:focus-visible { color: var(--accent-ink); }
.vb-ls-b__row:hover .vb-ls-b__thumb, .vb-ls-b__row:focus-visible .vb-ls-b__thumb { width: 80px; height: 60px; }
.vb-ls-b__row:hover img, .vb-ls-b__row:focus-visible img { filter: none; }
.vb-ls-b__row:hover svg { transform: translate(2px, -2px); }

/* c · numbered rows: a big number, a 40px title, a 14px line and a 13px time */
.vb-ls-c__head { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); margin-bottom: var(--head-to-content); }
.vb-ls-c__head .label { grid-column: 1 / 4; padding-top: 8px; }
.vb-ls-c__head h2 { grid-column: 4 / 14; }
.vb-ls-c__list { border-top: 1px solid var(--line-ink); counter-reset: none; }
.vb-ls-c__row { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: baseline; padding: 28px 0 32px; border-bottom: 1px solid var(--line); }
.vb-ls-c__n { grid-column: 1 / 4; font-family: var(--font-statement); font-size: 96px; line-height: 1; letter-spacing: -.035em; color: var(--muted); transition: color var(--dur-fast) var(--ease); }
.vb-ls-c__row:hover .vb-ls-c__n { color: var(--text); }
.vb-ls-c__row h3 { grid-column: 4 / 10; font-family: var(--font-statement); font-size: 40px; line-height: 1.05; letter-spacing: -.025em; }
.vb-ls-c__row p { grid-column: 10 / 15; font-size: 14px; line-height: 1.45; letter-spacing: -.01em; color: var(--muted); text-wrap: pretty; }
.vb-ls-c__when { grid-column: 15 / 17; justify-self: end; font-size: 13px; letter-spacing: -.01em; }

/* ═══════════ CHAPTER ═══════════ */
/* b · ink plate left, title + statement + list right, no pin */
.vb-ch-b__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; }
.vb-ch-b__plate { grid-column: 1 / 9; aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 32px; }
.vb-ch-b__plate img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.vb-ch-b__body { grid-column: 10 / 17; display: grid; gap: 32px; }
.vb-ch-b__body h2 { font-family: var(--font-statement); font-size: 76px; line-height: 1.02; letter-spacing: -.035em; }
.vb-ch-b__list { display: grid; grid-template-columns: 100px 1fr; gap: 16px; padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--line); }

/* c · storyboard strip: three numbered frames (sketch → set → frame) on hairline frames */
.vb-ch-c__head { display: grid; justify-items: center; gap: 16px; text-align: center; margin-bottom: var(--head-to-content); }
.vb-ch-c__strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); }
.vb-ch-c__frame { display: grid; gap: 12px; align-content: start; }
.vb-ch-c__no { display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--line-ink); font-size: 13px; letter-spacing: -.01em; }
.vb-ch-c__no span:first-child { font-family: var(--font-statement); color: var(--muted); }
.vb-ch-c__plate { aspect-ratio: 4 / 3; }
.vb-ch-c__plate--ink { position: relative; background: var(--bg); outline: 1px solid var(--line); outline-offset: -1px; overflow: hidden; }
.vb-ch-c__plate--ink img { position: absolute; inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); object-fit: contain; mix-blend-mode: multiply; }
.vb-ch-c__text { margin: 88px 0 0 calc((100% + var(--col-gap)) / 16 * 7); }

/* ═══════════ WORK ═══════════ */
/* b · tidy grid: three equal columns, 3:2 frames, two-line captions */
.vb-wk-b__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px var(--col-gap); }
.vb-wk-b__item { display: grid; gap: 12px; }
.vb-wk-b__item .plate { aspect-ratio: 3 / 2; }
.vb-wk-b__cap { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; line-height: 1.35; letter-spacing: -.01em; }
.vb-wk-b__cap em { display: block; font-style: normal; color: var(--muted); }
.vb-wk-b__cap > span:last-child { color: var(--muted); }
.vb-wk-b__item:hover .plate img { transform: scale(1.03); }

/* c · horizontal rail: own scroll box, snaps per frame, bleeds off the right edge */
.vb-wk-c__hint { display: flex; align-items: baseline; gap: 24px; }
.vb-wk-c__rail { display: flex; gap: var(--col-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  padding: 0 var(--gutter) 20px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.vb-wk-c__rail:focus-visible { outline-offset: -2px; }
.vb-wk-c__item { flex: none; width: 390px; display: grid; gap: 12px; scroll-snap-align: start; }
.vb-wk-c__item .plate { height: 520px; }
.vb-wk-c__item--wide { width: 780px; }
.vb-wk-c__item:hover .plate img { transform: scale(1.03); }

/* d · one big plate (cols 1–11) beside an index of names in 30px type (cols 12–16) */
.vb-wk-d__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--head-to-content); align-items: start; }
.vb-wk-d__h { grid-column: 1 / 17; }
.vb-wk-d__fig { grid-column: 1 / 11; display: grid; gap: 12px; }
.vb-wk-d__plate { aspect-ratio: 16 / 10; }
.vb-wk-d__side { grid-column: 12 / 17; display: grid; gap: 20px; align-content: start; justify-items: start; }
.vb-wk-d__list { width: 100%; border-top: 1px solid var(--line-ink); margin-bottom: 12px; }
.vb-wk-d__row { display: grid; grid-template-columns: minmax(0, 1fr) auto 12px; align-items: baseline; gap: 14px; padding: 14px 0 12px; border-bottom: 1px solid var(--line); transition: color var(--dur-fast) var(--ease); }
.vb-wk-d__row span:first-child { font-family: var(--font-statement); font-size: 30px; line-height: 1.1; letter-spacing: -.02em; }
.vb-wk-d__row span:nth-child(2) { font-size: 13px; color: var(--muted); letter-spacing: -.01em; }
.vb-wk-d__row svg { width: 12px; height: 12px; color: var(--accent-ink); transition: transform .35s var(--ease-out); }
.vb-wk-d__row:hover { color: var(--accent-ink); }
.vb-wk-d__row:hover svg { transform: translate(2px, -2px); }

/* ═══════════ INTERLUDE ═══════════ */
/* b · one-line title over a full-bleed plate */
.vb-il-b__h { text-align: center; padding-inline: var(--gutter); margin-bottom: 56px; }
.vb-il-b__plate { width: 100%; height: min(62vw, 860px); }
.vb-il-b__plate img { object-position: 50% 60%; }
.vb-il-b__cap { padding-top: 14px; }

/* c · a slow marquee of one phrase on night, three coordinates under a hairline */
.vb-il-c { padding-bottom: 56px; }
.vb-il-c__box { overflow: hidden; padding: 40px 0 72px; }
.vb-il-c__track { display: flex; width: max-content; animation: vb-marquee 38s linear infinite; }
.vb-il-c__run { display: flex; align-items: center; flex: none; padding-left: var(--gutter); font-family: var(--font-display); font-size: 176px; line-height: 1.05; letter-spacing: -.04em; white-space: nowrap; }
.vb-il-c__run i { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--night-ghost); margin: 0 .3em; }
.vb-il-c__foot { display: flex; justify-content: space-between; gap: 24px; padding-top: 16px; border-top: 1px solid var(--night-line); }
@keyframes vb-marquee { to { transform: translateX(-50%); } }

/* ═══════════ PEOPLE ═══════════ */
/* b · statement left (cols 1–7), a fan of five tilted photos right (cols 9–16) */
.vb-pp-b__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; }
.vb-pp-b__body { grid-column: 1 / 8; display: grid; gap: 32px; justify-items: start; }
.vb-pp-b__body h2 { font-family: var(--font-statement); font-size: 76px; line-height: 1.02; letter-spacing: -.035em; }
.vb-pp-b__fan { grid-column: 9 / 17; position: relative; height: 560px; }
.vb-pp-b__card { position: absolute; left: 50%; bottom: 60px; width: 320px; aspect-ratio: 480 / 354; margin-left: -160px; transform-origin: 50% 160%;
  transform: rotate(calc(var(--i) * 11deg)) translateY(calc(var(--i) * var(--i) * 4px)); outline: 6px solid var(--bg); transition: transform .7s var(--ease-out); }
.vb-pp-b__fan:hover .vb-pp-b__card { transform: rotate(calc(var(--i) * 15deg)) translateY(calc(var(--i) * var(--i) * 6px - 12px)); }
.vb-pp-b__card:nth-child(3) { z-index: 3; }
.vb-pp-b__card:nth-child(2), .vb-pp-b__card:nth-child(4) { z-index: 2; }

/* c · giant year, two columns, then a contact sheet of eight small frames (night) */
.vb-pp-c__top { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.vb-pp-c__h { grid-column: 1 / 11; display: grid; font-family: var(--font-display); }
.vb-pp-c__year { font-size: 264px; line-height: 1; letter-spacing: -.05em; margin-left: -.04em; }
.vb-pp-c__sub { font-family: var(--font-display); font-size: 48px; line-height: 1.05; letter-spacing: -.025em; margin-top: 24px; }
.vb-pp-c__cols { grid-column: 11 / 17; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-bottom: 6px; }
.vb-pp-c__cols p { font-size: 14px; line-height: 1.45; letter-spacing: -.01em; color: var(--night-muted); text-wrap: pretty; }
.vb-pp-c__sheet { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; margin-top: 88px; padding: 10px; border: 1px solid var(--night-line); }
.vb-pp-c__frame { display: grid; gap: 8px; }
.vb-pp-c__frame .plate { aspect-ratio: 4 / 3; background: var(--night-2); }
.vb-pp-c__frame img { filter: grayscale(.35); transition: filter .5s var(--ease); }
.vb-pp-c__frame:hover img { filter: none; }
.vb-pp-c__frame > span { font-size: 12px; line-height: 1; color: var(--night-muted); letter-spacing: .02em; }
.vb-pp-c__cap { padding-top: 14px; color: var(--on-night); }
.band--night .vb-pp-c__cap span:last-child { color: var(--night-muted); }

/* ═══════════ STATS ═══════════ */
/* b · four stats on one hairline row */
.vb-sx-b__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); }
.vb-sx-b__grid > .label { grid-column: 1 / 4; padding-top: 18px; }
.vb-sx-b__row { grid-column: 4 / 17; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-ink); }
.vb-sx-b__cell { display: grid; gap: 18px; align-content: start; padding: 16px 16px 8px 0; }
.vb-sx-b__cell + .vb-sx-b__cell { padding-left: 16px; border-left: 1px solid var(--line); }
.vb-sx-b__cell b { font-family: var(--font-statement); font-size: 64px; line-height: 1; letter-spacing: -.035em; font-weight: 400; }
.vb-sx-b__cell p { font-size: 14px; line-height: 1.4; letter-spacing: -.01em; color: var(--muted); max-width: 16ch; }

/* c · plate left (cols 1–8), one giant number right with a ghost second number */
.vb-sx-c__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.vb-sx-c__fig { grid-column: 1 / 9; display: grid; gap: 12px; }
.vb-sx-c__plate { aspect-ratio: 3 / 2; }
.vb-sx-c__body { grid-column: 10 / 17; display: grid; gap: 28px; justify-items: start; padding-bottom: 28px; }
.vb-sx-c__num { display: flex; align-items: baseline; gap: 20px; font-family: var(--font-statement); font-size: 280px; line-height: 1; letter-spacing: -.04em; margin-left: -.04em; }
.vb-sx-c__num span { font-size: 64px; letter-spacing: -.02em; line-height: 1; }
.vb-sx-c__ghost { display: flex; align-items: baseline; gap: 16px; padding-top: 20px; border-top: 1px solid var(--line); width: 100%; color: var(--muted); font-family: var(--font-statement); }
.vb-sx-c__ghost b { font-weight: 400; font-size: 64px; line-height: 1; letter-spacing: -.02em; }
.vb-sx-c__ghost span { font-size: 24px; line-height: 1.2; }

/* ═══════════ LOGOS ═══════════ */
/* b · hairline grid of client names, four across */
.vb-lg-b__head { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); margin-bottom: var(--head-to-content); }
.vb-lg-b__head .label { grid-column: 1 / 4; padding-top: 8px; }
.vb-lg-b__head h2 { grid-column: 4 / 14; }
.vb-lg-b__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.vb-lg-b__cell { position: relative; min-height: 168px; display: grid; place-items: center; padding: 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background var(--dur-fast) var(--ease); }
.vb-lg-b__cell span { font-family: var(--font-statement); font-size: 30px; line-height: 1.1; letter-spacing: -.02em; text-align: center; }
.vb-lg-b__cell small { position: absolute; left: 14px; bottom: 12px; font-size: 12px; color: var(--muted); letter-spacing: -.01em; }
.vb-lg-b__cell:hover { background: var(--surface); }

/* c · one marquee row of client names between two hairlines */
.vb-lg-c__head { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.vb-lg-c__box { overflow: hidden; border-block: 1px solid var(--line); padding: 28px 0; }
.vb-lg-c__track { display: flex; width: max-content; animation: vb-marquee 46s linear infinite; }
.vb-lg-c__box:hover .vb-lg-c__track { animation-play-state: paused; }
.vb-lg-c__run { display: flex; flex: none; align-items: center; padding-left: var(--gutter); }
.vb-lg-c__run li { display: flex; align-items: center; font-family: var(--font-statement); font-size: 64px; line-height: 1.1; letter-spacing: -.035em; white-space: nowrap; }
.vb-lg-c__run li::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ghost); margin: 0 48px; }

/* ═══════════ TEAM ═══════════ */
/* a · staggered portrait grid on night: four across, every other column drops 64px */
.vb-tm-a__head { display: grid; justify-items: center; gap: 40px; text-align: center; margin-bottom: 104px; }
.vb-tm-a__head h2 { font-size: 104px; line-height: 1; letter-spacing: -.035em; }
.vb-tm-a__cols { display: grid; grid-template-columns: repeat(2, 300px); gap: 40px; text-align: left; }
.vb-tm-a__cols p { font-size: 14px; line-height: 1.45; letter-spacing: -.01em; color: var(--night-muted); text-wrap: pretty; }
.vb-tm-a__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--col-gap); align-items: start; padding-bottom: 64px; }
.vb-tm-a__p { display: grid; gap: 12px; }
.vb-tm-a__p:nth-child(even) { margin-top: 64px; margin-bottom: -64px; }
.vb-tm-a__p .plate { aspect-ratio: 5 / 7; background: var(--night-2); }
.vb-tm-a__p:hover .plate img { transform: scale(1.03); }
.vb-tm-a__p .work__cap span:last-child { color: var(--night-muted); }
.vb-tm-a__more { aspect-ratio: 5 / 7; align-content: end; justify-items: start; gap: 20px; padding: 0 0 4px; border-top: 1px solid var(--night-line); }
.vb-tm-a__more-n { font-family: var(--font-statement); font-size: 84px; line-height: 1; letter-spacing: -.035em; }
.vb-tm-a__more-t { font-family: var(--font-statement); font-size: 21px; letter-spacing: -.012em; line-height: 1.4; color: var(--on-night-2); max-width: 14em; }

/* b · a list of names (cols 4–11); the portrait for the row under the pointer shows in a plate (cols 12–16) */
.vb-tm-b__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.vb-tm-b__head { grid-column: 1 / 17; display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); margin-bottom: var(--head-to-content); }
.vb-tm-b__head .label { grid-column: 1 / 4; padding-top: 8px; }
.vb-tm-b__head h2 { grid-column: 4 / 14; }
.vb-tm-b__list { grid-column: 4 / 11; border-top: 1px solid var(--line-ink); }
.vb-tm-b__row { display: grid; grid-template-columns: minmax(0, 1fr) auto 12px; grid-template-areas: "name city arrow" "role city arrow"; column-gap: 16px; row-gap: 4px; align-items: baseline; padding: 18px 0 16px; border-bottom: 1px solid var(--line); transition: color var(--dur-fast) var(--ease), padding var(--dur-fast) var(--ease); }
.vb-tm-b__thumb { display: none; }
.vb-tm-b__name { grid-area: name; font-family: var(--font-statement); font-size: 40px; line-height: 1.05; letter-spacing: -.025em; }
.vb-tm-b__role { grid-area: role; font-size: 13px; color: var(--muted); letter-spacing: -.01em; }
.vb-tm-b__city { grid-area: city; font-size: 13px; letter-spacing: -.01em; align-self: center; }
.vb-tm-b__row svg { grid-area: arrow; align-self: center; width: 12px; height: 12px; color: var(--accent-ink); transition: transform .35s var(--ease-out); }
.vb-tm-b__row:hover, .vb-tm-b__row:focus-visible { color: var(--accent-ink); padding-left: 12px; }
.vb-tm-b__row:hover svg { transform: translate(2px, -2px); }
.vb-tm-b__view { grid-column: 12 / 17; position: sticky; top: 96px; aspect-ratio: 5 / 7; background: var(--surface); overflow: hidden; }
.vb-tm-b__view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(100% 0 0 0); transition: clip-path .55s var(--ease-out); }
.vb-tm-b__view img:first-child { clip-path: inset(0); z-index: 0; }
.vb-tm-b__view img:not(:first-child) { z-index: 1; }
.vb-tm-b__grid:has(li:nth-child(1) .vb-tm-b__row:is(:hover, :focus-visible)) .vb-tm-b__view img:nth-child(1),
.vb-tm-b__grid:has(li:nth-child(2) .vb-tm-b__row:is(:hover, :focus-visible)) .vb-tm-b__view img:nth-child(2),
.vb-tm-b__grid:has(li:nth-child(3) .vb-tm-b__row:is(:hover, :focus-visible)) .vb-tm-b__view img:nth-child(3),
.vb-tm-b__grid:has(li:nth-child(4) .vb-tm-b__row:is(:hover, :focus-visible)) .vb-tm-b__view img:nth-child(4),
.vb-tm-b__grid:has(li:nth-child(5) .vb-tm-b__row:is(:hover, :focus-visible)) .vb-tm-b__view img:nth-child(5),
.vb-tm-b__grid:has(li:nth-child(6) .vb-tm-b__row:is(:hover, :focus-visible)) .vb-tm-b__view img:nth-child(6) { clip-path: inset(0); }

/* c · two large portraits with bios, the second dropped 160px */
.vb-tm-c__head { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); margin-bottom: var(--head-to-content); }
.vb-tm-c__head .label { grid-column: 1 / 4; padding-top: 8px; }
.vb-tm-c__head h2 { grid-column: 4 / 14; }
.vb-tm-c__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.vb-tm-c__p { display: grid; gap: 24px; }
.vb-tm-c__p:nth-child(1) { grid-column: 1 / 8; }
.vb-tm-c__p:nth-child(2) { grid-column: 10 / 17; margin-top: 160px; }
.vb-tm-c__p .plate { aspect-ratio: 5 / 6; }
.vb-tm-c__bio { display: grid; gap: 14px; }
.vb-tm-c__name { font-family: var(--font-statement); font-size: 40px; line-height: 1.05; letter-spacing: -.025em; }
.vb-tm-c__role { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; letter-spacing: -.01em; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.vb-tm-c__role span:last-child { color: var(--muted); }

/* ═══════════ QUOTE ═══════════ */
/* a · one centred 64px quote */
.vb-qt-a__fig { display: grid; justify-items: center; gap: 40px; text-align: center; }
.vb-qt-a__q p { font-family: var(--font-statement); font-size: 64px; line-height: 1.08; letter-spacing: -.035em; max-width: 19em; text-wrap: balance; }
.vb-qt-a__by { display: grid; gap: 4px; font-size: 14px; line-height: 1.35; letter-spacing: -.01em; }
.vb-qt-a__by span:last-child { color: var(--muted); }
.band--night .vb-qt-a__by span:last-child { color: var(--night-muted); }

/* b · portrait plate (cols 1–6), the quote and three small facts (cols 8–16) */
.vb-qt-b__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.vb-qt-b__fig { grid-column: 1 / 7; display: grid; gap: 12px; }
.vb-qt-b__plate { aspect-ratio: 3 / 4; }
.vb-qt-b__body { grid-column: 8 / 17; display: grid; gap: 36px; padding-bottom: 28px; }
.vb-qt-b__q p { font-family: var(--font-statement); font-size: 56px; line-height: 1.1; letter-spacing: -.025em; text-wrap: pretty; }
.vb-qt-b__by { justify-items: start; text-align: left; }
.vb-qt-b__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); padding-top: 16px; margin-top: 24px; }
.vb-qt-b__facts p { display: grid; gap: 6px; }
.vb-qt-b__facts b { font-family: var(--font-statement); font-size: 40px; line-height: 1; letter-spacing: -.025em; font-weight: 400; }
.vb-qt-b__facts p:nth-child(n+2) b { color: var(--muted); }
.vb-qt-b__facts span { font-size: 13px; color: var(--muted); letter-spacing: -.01em; }

/* c · three short quotes in columns on night */
.vb-qt-c__head { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); margin-bottom: var(--head-to-content); }
.vb-qt-c__head .label { grid-column: 1 / 4; padding-top: 8px; }
.vb-qt-c__head h2 { grid-column: 4 / 14; }
.vb-qt-c__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); }
.vb-qt-c__item { display: grid; grid-template-rows: 1fr auto; gap: 48px; padding: 20px 24px 0 0; border-top: 1px solid var(--night-line-2); }
.vb-qt-c__item + .vb-qt-c__item { padding-left: 24px; border-left: 1px solid var(--night-line); }
.vb-qt-c__item p { font-family: var(--font-statement); font-size: 30px; line-height: 1.3; letter-spacing: -.02em; text-wrap: pretty; }
.vb-qt-c__item figcaption { display: grid; gap: 2px; font-size: 14px; line-height: 1.35; letter-spacing: -.01em; }
.vb-qt-c__item figcaption span:last-child { color: var(--night-muted); }

/* ═══════════ CONTACT ═══════════ */
/* a · big statement, then three contact pairs stepping right (label + 40px email / phone) */
.vb-ct-a__h { font-family: var(--font-statement); font-size: 76px; line-height: 1.02; letter-spacing: -.035em; max-width: 13em; }
.vb-ct-a__pairs { display: grid; gap: 56px; margin-top: 96px; }
.vb-ct-a__pair { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.vb-ct-a__pair .label { padding-top: 12px; text-align: right; }
.vb-ct-a__pair:nth-child(1) .label { grid-column: 1 / 3; } .vb-ct-a__pair:nth-child(1) .vb-ct-a__val { grid-column: 3 / 12; }
.vb-ct-a__pair:nth-child(2) .label { grid-column: 3 / 5; } .vb-ct-a__pair:nth-child(2) .vb-ct-a__val { grid-column: 5 / 14; }
.vb-ct-a__pair:nth-child(3) .label { grid-column: 5 / 7; } .vb-ct-a__pair:nth-child(3) .vb-ct-a__val { grid-column: 7 / 16; }
.vb-ct-a__val { display: grid; justify-items: start; font-family: var(--font-statement); font-size: 40px; line-height: 1.1; letter-spacing: -.025em; }
.vb-ct-a__val a { transition: color var(--dur-fast) var(--ease); }
.vb-ct-a__val a:nth-child(2) { padding-left: 1.4em; }
.vb-ct-a__val a:hover { color: var(--accent-ink); }

/* b · two cities side by side, split by a hairline */
.vb-ct-b__head { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); margin-bottom: var(--head-to-content); }
.vb-ct-b__head .label { grid-column: 1 / 4; padding-top: 8px; }
.vb-ct-b__head h2 { grid-column: 4 / 14; }
.vb-ct-b__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-ink); }
.vb-ct-b__city { display: grid; gap: 28px; align-content: start; justify-items: start; padding: 24px 40px 0 0; }
.vb-ct-b__city + .vb-ct-b__city { padding: 24px 0 0 40px; border-left: 1px solid var(--line); }
.vb-ct-b__top { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.vb-ct-b__top h3 { font-family: var(--font-display); font-size: 64px; line-height: 1; letter-spacing: -.03em; }
.vb-ct-b__plate { width: min(100%, 440px); aspect-ratio: 4 / 3; }
.vb-ct-b__addr { font-family: var(--font-statement); font-size: 30px; line-height: 1.3; letter-spacing: -.02em; max-width: 14em; text-wrap: balance; }
.vb-ct-b__hours { width: 100%; }
.vb-ct-b__hours .tbl__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 12px; }

/* c · plate (cols 1–7) beside a short booking form (cols 9–16) */
.vb-ct-c__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.vb-ct-c__fig { grid-column: 1 / 8; display: grid; gap: 12px; position: sticky; top: 96px; }
.vb-ct-c__plate { aspect-ratio: 4 / 5; }
.vb-ct-c__body { grid-column: 9 / 17; display: grid; gap: 24px; }
.vb-ct-c__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--col-gap); margin-top: 32px; }
.vb-ct-c__field { display: grid; gap: 6px; }
.vb-ct-c__field--full { grid-column: 1 / -1; }
.vb-ct-c__field input, .vb-ct-c__field select, .vb-ct-c__field textarea { width: 100%; font: inherit; font-size: 16px; line-height: 1.4; color: var(--text); background: transparent;
  border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; padding: 8px 0 10px; transition: border-color var(--dur-fast) var(--ease); }
.vb-ct-c__field select { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(-45deg, transparent 50%, currentColor 50%);
  background-size: 5px 5px; background-position: calc(100% - 9px) 55%, calc(100% - 4px) 55%; background-repeat: no-repeat; }
.vb-ct-c__field textarea { resize: vertical; min-height: 88px; }
.vb-ct-c__field ::placeholder { color: var(--ghost); }
.vb-ct-c__field input:focus, .vb-ct-c__field select:focus, .vb-ct-c__field textarea:focus { outline: none; border-color: var(--line-ink); }
.vb-ct-c__send { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 8px; }

/* ═══════════ Static / reduced motion: marquees stand still, fully shown ═══════════ */
.static .vb-il-c__track, .static .vb-lg-c__track, .m-reduce .vb-il-c__track, .m-reduce .vb-lg-c__track { animation: none; }

/* ═══════════ Responsive ═══════════ */
@media (max-width: 1280px) {
  .vb-st-b__h { font-size: 80px; }
  .vb-st-c__h { font-size: 96px; }
  .vb-ch-b__body h2, .vb-pp-b__body h2, .vb-ct-a__h { font-size: 64px; }
  .vb-pp-c__year { font-size: 220px; }
  .vb-sx-c__num { font-size: 230px; }
  .vb-qt-a__q p { font-size: 56px; }
  .vb-qt-b__q p { font-size: 46px; }
  .vb-il-c__run { font-size: 144px; }
  .vb-tm-a__head h2 { font-size: 88px; }
}
@media (max-width: 1024px) {
  .vb-tag { margin-bottom: 48px; }
  .vb-st-b__h { font-size: 64px; }
  .vb-st-b__row p:nth-of-type(1) { grid-column: 4 / 10; }
  .vb-st-b__row p:nth-of-type(2) { grid-column: 10 / 17; }
  .vb-st-b__row .lnk { grid-column: 4 / 17; justify-self: start; margin-top: 28px; }
  .vb-st-c__h { font-size: 76px; }
  .vb-st-c__a { grid-column: 1 / 6; } .vb-st-c__b { grid-column: 12 / 17; }
  .vb-in-b__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vb-in-c__fig { grid-column: 1 / 8; }
  .vb-in-c__body { grid-column: 9 / 17; }
  .vb-in-c__cols { grid-template-columns: 1fr; row-gap: 32px; margin-top: 40px; }
  .vb-in-c__cols .facts, .vb-in-c__cols .recog__list { grid-column: 1 / -1; }
  .vb-ls-b__list:nth-child(n) { grid-column: 1 / 17; }
  .vb-ls-b__list:nth-child(2) { border-top: 0; }
  .vb-ls-b__head h2 { grid-column: 4 / 12; }
  .vb-ls-b__head .lnk { grid-column: 12 / 17; }
  .vb-ls-c__row h3 { grid-column: 4 / 11; font-size: 32px; }
  .vb-ls-c__row p { grid-column: 11 / 17; }
  .vb-ls-c__when { grid-column: 4 / 17; justify-self: start; margin-top: 10px; color: var(--muted); }
  .vb-ls-c__n { font-size: 72px; }
  .vb-ch-b__plate { grid-column: 1 / 8; padding: 12px; }
  .vb-ch-b__body { grid-column: 9 / 17; }
  .vb-ch-b__body h2 { font-size: 52px; }
  .vb-ch-c__text { margin-left: calc((100% + var(--col-gap)) / 16 * 4); }
  .vb-wk-b__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vb-wk-c__item { width: 300px; } .vb-wk-c__item--wide { width: 600px; } .vb-wk-c__item .plate { height: 400px; }
  .vb-wk-d__fig { grid-column: 1 / 17; }
  .vb-wk-d__side { grid-column: 1 / 17; }
  .vb-pp-b__body { grid-column: 1 / 9; }
  .vb-pp-b__body h2 { font-size: 52px; }
  .vb-pp-b__fan { grid-column: 9 / 17; height: 460px; }
  .vb-pp-b__card { width: 240px; margin-left: -120px; }
  .vb-pp-c__h { grid-column: 1 / 17; }
  .vb-pp-c__cols { grid-column: 1 / 17; margin-top: 40px; }
  .vb-pp-c__sheet { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vb-sx-b__grid > .label { grid-column: 1 / 17; padding: 0 0 16px; }
  .vb-sx-b__row { grid-column: 1 / 17; }
  .vb-sx-b__cell b { font-size: 56px; }
  .vb-sx-c__fig { grid-column: 1 / 9; }
  .vb-sx-c__body { grid-column: 10 / 17; }
  .vb-sx-c__num { font-size: 168px; }
  .vb-sx-c__num span { font-size: 44px; }
  .vb-lg-b__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vb-tm-a__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vb-tm-a__p:nth-child(n) { margin: 0; }
  .vb-tm-a__p:nth-child(3n + 2) { margin-top: 64px; margin-bottom: -64px; }
  .vb-tm-b__list { grid-column: 1 / 11; }
  .vb-tm-b__view { grid-column: 12 / 17; }
  .vb-tm-b__name { font-size: 32px; }
  .vb-qt-b__fig { grid-column: 1 / 8; }
  .vb-qt-b__body { grid-column: 9 / 17; }
  .vb-qt-b__q p { font-size: 36px; }
  .vb-qt-c__item p { font-size: 24px; }
  .vb-ct-a__h { font-size: 56px; }
  .vb-ct-a__pair .label { grid-column: 1 / 17 !important; text-align: left; padding: 0 0 8px; }
  .vb-ct-a__pair:nth-child(n) .vb-ct-a__val { grid-column: 1 / 17; }
  .vb-ct-a__pair:nth-child(2) { padding-left: 10%; } .vb-ct-a__pair:nth-child(3) { padding-left: 20%; }
  .vb-ct-b__top h3 { font-size: 48px; }
  .vb-ct-b__addr { font-size: 24px; }
  .vb-ct-c__fig { grid-column: 1 / 8; }
  .vb-ct-c__body { grid-column: 9 / 17; }
  .vb-ct-c__form { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .vb-in-c__fig, .vb-in-c__body { grid-column: 1 / 17; }
  .vb-in-c__body { position: static; }
  .vb-in-c__fig { max-width: 520px; margin-bottom: 48px; }
  .vb-ch-b__plate, .vb-ch-b__body { grid-column: 1 / 17; }
  .vb-ch-b__plate { margin-bottom: 40px; }
  .vb-pp-b__body, .vb-pp-b__fan { grid-column: 1 / 17; }
  .vb-pp-b__fan { margin-top: 24px; }
  .vb-sx-c__fig, .vb-sx-c__body { grid-column: 1 / 17; }
  .vb-sx-c__body { padding: 40px 0 0; }
  .vb-tm-b__list { grid-column: 1 / 17; }
  .vb-tm-b__view { display: none; }
  .vb-tm-b__row { grid-template-columns: 56px minmax(0, 1fr) auto 12px; grid-template-areas: "thumb name city arrow" "thumb role city arrow"; }
  .vb-tm-b__thumb { display: block; grid-area: thumb; width: 56px; height: 72px; object-fit: cover; align-self: center; }
  .vb-qt-b__fig, .vb-qt-b__body { grid-column: 1 / 17; }
  .vb-qt-b__fig { max-width: 480px; margin-bottom: 40px; }
  .vb-qt-c__grid { grid-template-columns: 1fr; row-gap: 40px; }
  .vb-qt-c__item + .vb-qt-c__item { padding-left: 0; border-left: 0; }
  .vb-qt-c__item { padding-right: 0; gap: 24px; }
  .vb-ct-b__grid { grid-template-columns: 1fr; }
  .vb-ct-b__city, .vb-ct-b__city + .vb-ct-b__city { padding: 24px 0 0; border-left: 0; }
  .vb-ct-b__city + .vb-ct-b__city { margin-top: 56px; border-top: 1px solid var(--line-ink); }
  .vb-ct-c__fig, .vb-ct-c__body { grid-column: 1 / 17; }
  .vb-ct-c__fig { position: static; max-width: 520px; margin-bottom: 48px; }
  .vb-ct-c__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .vb-v { padding: 20px 0 72px; }
  .vb-v--flush { padding-bottom: 0; }
  .vb-v > .chapter { padding-bottom: 72px; }
  .vb-tag { margin-bottom: 40px; gap: 4px 10px; }
  .vb-tag__cls { width: 100%; }
  .vb-v .brands { min-height: 560px; }
  /* statement */
  .vb-st-b__h { font-size: 40px; line-height: 1.08; }
  .vb-st-b__row { margin-top: 40px; row-gap: 16px; }
  .vb-st-b__row .label, .vb-st-b__row p:nth-of-type(n), .vb-st-b__row .lnk { grid-column: 1 / 17; margin-top: 0; }
  .vb-st-c__grid { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .vb-st-c__h { font-size: 52px; line-height: 1.02; }
  .vb-st-c__a { grid-area: 1 / 1; text-align: left; padding: 0; }
  .vb-st-c__b { grid-area: 3 / 1; text-align: right; padding: 0; }
  .vb-st-c__fig { grid-area: 2 / 1; width: 72%; justify-self: center; margin: 0; }
  .vb-st-c__cols { grid-area: 4 / 1; }
  .vb-st-c__cols { grid-column: 1 / -1; grid-template-columns: 1fr; gap: 14px; margin: 0; }
  /* intro */
  .vb-in-b__text { text-align: left; }
  .vb-in-b .wrap { justify-items: start; }
  .vb-in-b__row { grid-template-columns: 1fr; margin-top: 48px; }
  .vb-in-b__row--recog { margin-top: 0; border-top: 0; }
  .vb-in-b__cell { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .vb-in-c__fig { margin-bottom: 40px; }
  /* list */
  .vb-ls-b__head .label, .vb-ls-b__head h2, .vb-ls-b__head .lnk { grid-column: 1 / 17; justify-self: start; }
  .vb-ls-b__head h2 { margin: 12px 0 16px; }
  .vb-ls-b__row { grid-template-columns: 64px minmax(0, 1fr) 12px; grid-template-areas: "thumb name arrow" "thumb meta arrow"; column-gap: 14px; row-gap: 2px; }
  .vb-ls-b__thumb { grid-area: thumb; width: 64px; height: 48px; filter: none; }
  .vb-ls-b__thumb img { filter: none; }
  .vb-ls-b__name { grid-area: name; font-size: 22px; }
  .vb-ls-b__meta { grid-area: meta; }
  .vb-ls-b__row svg { grid-area: arrow; }
  .vb-ls-b__row:hover .vb-ls-b__thumb { grid-area: thumb; width: 64px; height: 48px; }
  .vb-ls-c__head .label, .vb-ls-c__head h2 { grid-column: 1 / 17; }
  .vb-ls-c__head h2 { margin-top: 12px; }
  .vb-ls-c__row { grid-template-columns: 64px minmax(0, 1fr); row-gap: 8px; padding: 20px 0 22px; }
  .vb-ls-c__n { grid-column: 1; grid-row: 1 / 4; font-size: 48px; }
  .vb-ls-c__row h3 { grid-column: 2; font-size: 26px; }
  .vb-ls-c__row p { grid-column: 2; }
  .vb-ls-c__when { grid-column: 2; margin: 0; }
  /* chapter */
  .vb-ch-b__plate { padding: 0; margin-bottom: 32px; }
  .vb-ch-b__body h2 { font-size: 40px; }
  .vb-ch-b__list { grid-template-columns: 1fr; gap: 10px; }
  .vb-ch-c__strip { grid-template-columns: 1fr; row-gap: 40px; }
  .vb-ch-c__text { margin: 48px 0 0; }
  /* work */
  .vb-wk-b__grid { grid-template-columns: 1fr; row-gap: 40px; }
  .vb-wk-c__head { flex-direction: column; align-items: flex-start; }
  .vb-wk-c__hint { flex-wrap: wrap; gap: 12px 20px; }
  .vb-wk-c__item { width: 240px; } .vb-wk-c__item--wide { width: 300px; } .vb-wk-c__item .plate { height: 320px; }
  .vb-wk-c__item--wide .plate { height: 200px; }
  .vb-wk-c__item--wide { align-self: end; }
  .vb-wk-d__plate { aspect-ratio: 4 / 3; }
  .vb-wk-d__row span:first-child { font-size: 24px; }
  /* interlude */
  .vb-il-b__h { margin-bottom: 32px; text-align: left; }
  .vb-il-b__plate { height: 110vw; }
  .vb-il-b__cap { flex-direction: column; gap: 4px; }
  .vb-il-c__box { padding: 24px 0 48px; }
  .vb-il-c__run { font-size: 72px; }
  .vb-il-c__run i { width: 12px; height: 12px; }
  .vb-il-c__foot { flex-direction: column; gap: 6px; }
  /* people */
  .vb-pp-b__body h2 { font-size: 40px; }
  .vb-pp-b__fan { height: 270px; margin-top: 8px; }
  .vb-pp-b__card { width: 170px; margin-left: -85px; bottom: 44px; outline-width: 4px; }
  .vb-pp-c__year { font-size: 112px; margin-left: 0; }
  .vb-pp-c__sub { font-size: 32px; margin-top: 12px; }
  .vb-pp-c__cols { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
  .vb-pp-c__sheet { margin-top: 48px; gap: 8px; padding: 8px; }
  .vb-pp-c__cap { flex-direction: column; gap: 4px; }
  /* stats */
  .vb-sx-b__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vb-sx-b__cell { padding: 16px 12px 24px 0; border-bottom: 1px solid var(--line); }
  .vb-sx-b__cell + .vb-sx-b__cell { padding-left: 0; border-left: 0; }
  .vb-sx-b__cell:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
  .vb-sx-b__cell b { font-size: 44px; }
  .vb-sx-c__num { font-size: 132px; gap: 12px; }
  .vb-sx-c__num span { font-size: 32px; }
  .vb-sx-c__ghost b { font-size: 44px; }
  .vb-sx-c__ghost span { font-size: 19px; }
  /* logos */
  .vb-lg-b__head .label, .vb-lg-b__head h2 { grid-column: 1 / 17; }
  .vb-lg-b__head h2 { margin-top: 12px; }
  .vb-lg-b__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vb-lg-b__cell { min-height: 112px; padding: 16px 12px 28px; }
  .vb-lg-b__cell span { font-size: 21px; }
  .vb-lg-b__cell small { left: 12px; bottom: 10px; }
  .vb-lg-c__run li { font-size: 40px; }
  .vb-lg-c__run li::after { margin: 0 28px; width: 7px; height: 7px; }
  .vb-lg-c__box { padding: 20px 0; }
  .vb-lg-c__head { flex-direction: column; gap: 4px; }
  /* team */
  .vb-tm-a__head { margin-bottom: 56px; gap: 28px; }
  .vb-tm-a__head h2 { font-size: 56px; }
  .vb-tm-a__cols { grid-template-columns: 1fr; gap: 14px; max-width: 320px; }
  .vb-tm-a__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; padding-bottom: 40px; }
  .vb-tm-a__p:nth-child(n) { margin: 0; }
  .vb-tm-a__p:nth-child(even) { margin-top: 40px; margin-bottom: -40px; }
  .vb-tm-a__p .work__cap { flex-direction: column; gap: 2px; }
  .vb-tm-a__more-n { font-size: 56px; }
  .vb-tm-a__more-t { font-size: 17px; }
  .vb-tm-b__head .label, .vb-tm-b__head h2 { grid-column: 1 / 17; }
  .vb-tm-b__head h2 { margin-top: 12px; }
  .vb-tm-b__name { font-size: 26px; }
  .vb-tm-b__row { grid-template-columns: 52px minmax(0, 1fr) 12px; grid-template-areas: "thumb name arrow" "thumb role arrow" "thumb city arrow"; column-gap: 14px; }
  .vb-tm-b__thumb { width: 52px; height: 68px; }
  .vb-tm-b__city { color: var(--muted); align-self: start; }
  .vb-tm-c__head .label, .vb-tm-c__head h2 { grid-column: 1 / 17; }
  .vb-tm-c__head h2 { margin-top: 12px; }
  .vb-tm-c__p:nth-child(n) { grid-column: 1 / 17; margin-top: 0; }
  .vb-tm-c__p + .vb-tm-c__p { margin-top: 56px; }
  .vb-tm-c__name { font-size: 32px; }
  .vb-tm-c__role { flex-direction: column; gap: 2px; }
  /* quote */
  .vb-qt-a__fig { gap: 28px; }
  .vb-qt-a__q p { font-size: 32px; line-height: 1.15; }
  .vb-qt-b__q p { font-size: 30px; line-height: 1.18; }
  .vb-qt-b__body { gap: 24px; padding: 0; }
  .vb-qt-b__facts b { font-size: 32px; }
  .vb-qt-c__head .label, .vb-qt-c__head h2 { grid-column: 1 / 17; }
  .vb-qt-c__head h2 { margin-top: 12px; }
  .vb-qt-c__item p { font-size: 24px; }
  /* contact */
  .vb-ct-a__h { font-size: 40px; }
  .vb-ct-a__pairs { margin-top: 48px; gap: 36px; }
  .vb-ct-a__val { font-size: 26px; }
  .vb-ct-a__val a:nth-child(2) { padding-left: 0; }
  .vb-ct-a__pair:nth-child(2) { padding-left: 8%; } .vb-ct-a__pair:nth-child(3) { padding-left: 16%; }
  .vb-ct-b__head .label, .vb-ct-b__head h2 { grid-column: 1 / 17; }
  .vb-ct-b__head h2 { margin-top: 12px; }
  .vb-ct-b__top h3 { font-size: 40px; }
  .vb-ct-b__top { flex-direction: column; gap: 6px; }
  .vb-ct-b__addr { font-size: 22px; }
  .vb-ct-c__form { grid-template-columns: 1fr; gap: 22px; }
}

/* ───────── Variants ───────── */
/* Noira — variants page (section library). Prefix v-, scoped under .page-variants. Tokens only. */

/* ── Library frame: every variant = a <section class="v-var"> opened by a 13px label row ── */
.page-variants .v-intro { padding: calc(var(--nav-h) + 72px) 0 0; }
.page-variants .v-intro__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 40px; align-items: end; }
.page-variants .v-intro__grid > .label { grid-column: 1 / 17; }
.page-variants .v-intro h1 { grid-column: 1 / 11; max-width: 9.4em; }
.page-variants .v-intro .lead-xl { grid-column: 11 / 17; padding-bottom: 12px; }
.page-variants .v-intro__facts { grid-column: 11 / 17; max-width: 420px; }

.page-variants .v-var { padding-top: var(--section); }
.page-variants .v-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; padding-bottom: 12px; margin-bottom: 48px; border-bottom: 1px solid var(--line);
  font-size: 14px; line-height: 1.4; letter-spacing: -.01em; color: var(--muted); }
.page-variants .v-label b { font-weight: 400; color: var(--text); font-size: 14px; }
.page-variants .v-label .v-cls { margin-left: auto; color: var(--muted); }

/* ── Header strips: position-relative copies of the header, framed 1:1 at the page width ── */
.page-variants .v-frame { position: relative; border: 1px solid var(--line); overflow: hidden; background: var(--bg); }
.page-variants .v-frame--bar { padding-bottom: 28px; }
.page-variants .v-hd { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 18px var(--gutter) 0; color: var(--text);
  font-size: 12px; line-height: 1.25; letter-spacing: -.01em; }
.page-variants .v-hd .brand em { font-style: normal; }
.page-variants .v-hd__list { display: flex; gap: 6px; }
.page-variants .v-hd__list a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); transition: color var(--dur-fast) var(--ease); }
.page-variants .v-hd__list a:not(:last-child)::after { content: ","; margin-left: -6px; }
.page-variants .v-hd__list a:hover, .page-variants .v-hd__list a.v-on { color: var(--text); }
.page-variants .v-hd__list a.v-on::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-ink); }
.page-variants .v-hd__burger { display: none; width: 20px; height: 20px; color: inherit; }
.page-variants .v-hd__burger svg { width: 20px; height: 20px; }
.page-variants .v-hd__end { display: flex; align-items: flex-start; gap: 40px; }
.page-variants .v-hd .lnk { font-size: 12px; }
.page-variants .v-hd--page { padding-bottom: 0; }

/* b: centred wordmark, pages split either side */
.page-variants .v-hd--b { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; }
.page-variants .v-hd--b .brand { text-align: center; }
.page-variants .v-hd__side { display: flex; gap: 40px; align-items: flex-start; }
.page-variants .v-hd__side--end { justify-content: flex-end; }
.page-variants .v-hd__city, .page-variants .v-hd__mail { color: var(--muted); transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.page-variants a.v-hd__mail:hover { color: var(--accent-ink); }

/* c: a hairline bar of cells */
.page-variants .v-hd--c { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 4fr) minmax(0, 3fr); gap: 0; padding: 0; align-items: stretch;
  border-bottom: 1px solid var(--line); background: var(--bg); }
.page-variants .v-hd__cell { display: flex; align-items: center; min-height: 56px; padding: 0 var(--gutter); }
.page-variants .v-hd__cell + .v-hd__cell { border-left: 1px solid var(--line); }
.page-variants .v-hd__one em { margin-left: .3em; font-style: normal; }
.page-variants .v-hd--c .v-hd__mail { justify-content: flex-end; }
.page-variants .v-hd__book { justify-content: flex-end; }
.page-variants .v-frame__peek { aspect-ratio: 1392 / 260; }
.page-variants .v-frame__peek img { object-position: 50% 62%; }

/* over a photo: light text, a soft night scrim under the bar */
.page-variants .v-frame--photo { height: 440px; border: 0; }
.page-variants .v-frame__bg { position: absolute; inset: 0; }
.page-variants .v-frame__bg img { object-position: 50% 60%; }
.page-variants .v-frame--photo { background: var(--night); }
.page-variants .v-scrim { position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.page-variants .v-scrim--top { top: 0; height: 160px; background: linear-gradient(rgba(7, 7, 7, .72), rgba(7, 7, 7, .4) 55%, rgba(7, 7, 7, 0)); }
.page-variants .v-scrim--foot { bottom: 0; height: 140px; background: linear-gradient(rgba(7, 7, 7, 0), rgba(7, 7, 7, .7)); }
.page-variants .v-scrim--deep { bottom: 0; height: 84%; background: linear-gradient(rgba(7, 7, 7, 0), rgba(7, 7, 7, .68) 24%, rgba(7, 7, 7, .8) 55%, rgba(7, 7, 7, .9)); }
.page-variants .v-hd--over { color: var(--on-night); }
.page-variants .v-hd--over .v-hd__list a { color: var(--on-night); }
.page-variants .v-hd--over .v-hd__list a:hover, .page-variants .v-hd--over .v-hd__list a.v-on { color: var(--on-night); }
.page-variants .v-hd--over .v-hd__list a.v-on::before { background: var(--accent-on-dark); }
.page-variants .v-hd--over .lnk { color: var(--on-night); border-color: var(--night-line-2); }
.page-variants .v-hd--over .lnk svg { color: var(--accent-on-dark); }
.page-variants .v-frame__cap { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: 18px; display: flex; justify-content: space-between; gap: 16px;
  font-size: 13px; line-height: 1.3; letter-spacing: -.01em; color: var(--on-night); }
.page-variants .v-frame__cap span:last-child { color: var(--on-night); }

/* ── HERO A (the demo, recomposed): reuse the home hero inside the library ── */
.page-variants .v-hero-a .hero { padding-top: 72px; }
.page-variants .v-hero-a__h { font-family: var(--font-statement); font-size: 112px; line-height: 1; letter-spacing: -.04em; max-width: 9.2em; }

/* ── HERO B: full-bleed photo, headline bottom-left, a hairline numbers strip ── */
.page-variants .v-hero-b__stage { position: relative; min-height: 900px; display: flex; flex-direction: column; justify-content: space-between; color: var(--on-night); overflow: hidden; }
.page-variants .v-hero-b__bg { position: absolute; inset: 0; background: var(--night-2); }
.page-variants .v-hero-b__bg img { object-position: 50% 40%; }
.page-variants .v-hero-b__stage { background: var(--night); }
.page-variants .v-hero-b__foot { position: relative; z-index: 2; padding-bottom: 28px; }
.page-variants .v-hero-b__row { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.page-variants .v-hero-b__h { grid-column: 1 / 11; font-family: var(--font-display); font-size: 96px; line-height: 1; letter-spacing: -.035em; max-width: 10.5em; }
.page-variants .v-hero-b__side { grid-column: 12 / 17; display: grid; gap: 20px; justify-items: start; padding-bottom: 8px; }
.page-variants .v-hero-b__side p { font-size: 15px; line-height: 1.45; letter-spacing: -.01em; color: var(--on-night); max-width: 30em; }
.page-variants .v-hero-b .lnk, .page-variants .v-hero-c__stage .lnk { white-space: nowrap; }
.page-variants .v-hero-b__foot .lnk { color: var(--on-night); border-color: var(--night-line-2); }
.page-variants .v-hero-b__foot .lnk svg { color: var(--accent-on-dark); }
.page-variants .v-hero-b__strip { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--night-line-2); }
.page-variants .v-num { grid-column: span 2; display: grid; gap: 6px; }
.page-variants .v-num:nth-child(1) { grid-column: 1 / 4; }
.page-variants .v-num:nth-child(2) { grid-column: 4 / 7; }
.page-variants .v-num:nth-child(3) { grid-column: 7 / 10; }
.page-variants .v-num:nth-child(4) { grid-column: 10 / 12; }
.page-variants .v-num b { font-family: var(--font-statement); font-size: 40px; line-height: 1; letter-spacing: -.025em; font-weight: 400; }
.page-variants .v-num span { font-size: 13px; line-height: 1.3; color: var(--on-night-2); }
.page-variants .v-hero-b__who { grid-column: 12 / 17; display: grid; gap: 6px; align-content: start; }
.page-variants .v-hero-b__who .label { color: var(--on-night-2); }
.page-variants .v-hero-b__who p { font-size: 14px; line-height: 1.4; letter-spacing: -.01em; color: var(--on-night); }

/* ── HERO C: type on a white field, a shoot day in six tilted photo chips ── */
.page-variants .v-hero-c__stage { position: relative; min-height: 860px; display: grid; place-items: center; margin-top: 56px; }
.page-variants .v-hero-c__copy { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; gap: 28px; max-width: 820px; }
.page-variants .v-hero-c__h { font-family: var(--font-display); font-size: 120px; line-height: 1; letter-spacing: -.035em; max-width: 7.2em; }
.page-variants .v-hero-c__copy > p { font-size: 16px; line-height: 1.5; letter-spacing: -.01em; color: var(--muted); max-width: 30em; text-wrap: pretty; }
.page-variants .v-hero-c__news { margin-bottom: 8px; }
.page-variants .v-hero-c__chips { position: absolute; inset: 0; }
.page-variants .v-chip { position: absolute; left: var(--x); top: var(--y); width: 196px; display: grid; gap: 12px; }
.page-variants .v-chip .plate { aspect-ratio: 480 / 354; rotate: var(--r); }
.page-variants .v-chip__cap { display: grid; gap: 2px; font-size: 13px; line-height: 1.3; letter-spacing: -.01em; }
.page-variants .v-chip__cap b { font-weight: 400; }
.page-variants .v-chip__cap span { color: var(--muted); }

/* ── HERO D: two hard panels — a giant word stack with a date form | night panel, tall plate, square result cards ── */
.page-variants .v-hero-d__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 880px; }
.page-variants .v-hero-d__type { display: flex; flex-direction: column; justify-content: space-between; gap: 56px; padding: 64px var(--gutter) 56px; }
.page-variants .v-hero-d__h { font-family: var(--font-statement); font-size: 196px; line-height: 1; letter-spacing: -.05em; display: grid; }
.page-variants .v-hero-d__h span { display: block; }
.page-variants .v-hero-d__low { display: grid; gap: 32px; max-width: 520px; }
.page-variants .v-hero-d__form { display: grid; gap: 10px; }
.page-variants .v-hero-d__field { display: flex; gap: 12px; }
.page-variants .v-hero-d__field input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 0; background: var(--bg); font: inherit; font-size: 14px; color: var(--text); }
.page-variants .v-hero-d__field input::placeholder { color: var(--muted); }
.page-variants .v-hero-d__field input:focus { outline: none; border-color: var(--text); }
.page-variants .v-hero-d__night { position: relative; background: var(--night); display: grid; place-items: center; padding: 64px 72px; }
.page-variants .v-hero-d__plate { width: min(100%, 500px); aspect-ratio: 3 / 4; }
.page-variants .v-card { position: absolute; background: var(--bg); color: var(--text); }
.page-variants .v-card--main { left: 40px; bottom: 64px; width: 260px; padding: 20px 20px 16px; display: grid; gap: 4px; }
.page-variants .v-card__big { font-family: var(--font-statement); font-size: 40px; line-height: 1.05; letter-spacing: -.03em; margin-top: 6px; }
.page-variants .v-card__sub { font-size: 14px; line-height: 1.35; color: var(--muted); }
.page-variants .v-card__rows { margin-top: 14px; border-top: 1px solid var(--line); }
.page-variants .v-card__rows li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.3; }
.page-variants .v-card__rows li:last-child { border-bottom: 0; padding-bottom: 0; }
.page-variants .v-card__rows li span:first-child { color: var(--muted); }
.page-variants .v-card--tag { right: 40px; top: 96px; display: flex; gap: 14px; align-items: baseline; padding: 12px 16px; font-size: 14px; line-height: 1.3; letter-spacing: -.01em; }
.page-variants .v-card--tag b { font-weight: 400; font-size: 18px; letter-spacing: -.02em; }

/* ── SERVICES A: statement line + the table ── */
.page-variants .v-svc-a h2 { max-width: 1080px; }
.page-variants .v-svc-a__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); margin-top: var(--head-to-content); }
.page-variants .v-svc-a__grid > .label { grid-column: 1 / 4; padding-top: 10px; }
.page-variants .v-svc-a__grid > .tbl { grid-column: 4 / 17; }

/* ── SERVICES B: four numbered columns on one hairline ── */
.page-variants .v-svc-b__head { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.page-variants .v-svc-b__head .label { grid-column: 1 / 4; padding-top: 12px; }
.page-variants .v-svc-b__head h2 { grid-column: 4 / 13; }
.page-variants .v-svc-b__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); margin-top: var(--head-to-content); border-top: 1px solid var(--line-ink); }
.page-variants .v-svc-b__col { display: grid; align-content: start; gap: 16px; padding: 20px 24px 0 0; }
.page-variants .v-svc-b__col + .v-svc-b__col { border-left: 1px solid var(--line); padding-left: 20px; }
.page-variants .v-svc-b__n { font-family: var(--font-statement); font-size: 84px; line-height: 1; letter-spacing: -.045em; margin-bottom: 28px; }
.page-variants .v-svc-b__col > p { font-size: 14px; line-height: 1.45; letter-spacing: -.01em; color: var(--muted); max-width: 24em; text-wrap: pretty; }
.page-variants .v-svc-b__col .facts { gap: 8px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.page-variants .v-svc-b__col .fact { grid-template-columns: 72px 1fr; }
.page-variants .v-svc-b__col .lnk { justify-self: start; margin-top: 8px; }

/* ── SERVICES C: sticky plate, a list that swaps it (pure CSS :has) ── */
.page-variants .v-svc-c { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.page-variants .v-svc-c__media { grid-column: 1 / 8; position: sticky; top: calc(var(--nav-h) + 24px); }
.page-variants .v-svc-c__stage { display: grid; gap: 12px; }
.page-variants .v-svc-c__plate { aspect-ratio: 3 / 4; max-height: calc(100vh - 160px); width: 100%; }
.page-variants .v-svc-c__plate img { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease), transform 1.2s var(--ease-out); }
.page-variants .v-svc-c__plate img:first-child { opacity: 1; }
.page-variants .v-svc-c:has(.v-svc-c__item:nth-child(n+2):is(:hover, :focus-within)) .v-svc-c__plate img:first-child { opacity: 0; }
.page-variants .v-svc-c:has(.v-svc-c__item:nth-child(2):is(:hover, :focus-within)) .v-svc-c__plate img:nth-child(2),
.page-variants .v-svc-c:has(.v-svc-c__item:nth-child(3):is(:hover, :focus-within)) .v-svc-c__plate img:nth-child(3),
.page-variants .v-svc-c:has(.v-svc-c__item:nth-child(4):is(:hover, :focus-within)) .v-svc-c__plate img:nth-child(4),
.page-variants .v-svc-c:has(.v-svc-c__item:nth-child(5):is(:hover, :focus-within)) .v-svc-c__plate img:nth-child(5) { opacity: 1; }
.page-variants .v-svc-c__list { grid-column: 9 / 17; display: grid; gap: 24px; }
.page-variants .v-svc-c__list ol { border-top: 1px solid var(--line); }
.page-variants .v-svc-c__item a { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; row-gap: 12px; padding: 36px 0 40px; border-bottom: 1px solid var(--line); transition: color var(--dur-fast) var(--ease); }
.page-variants .v-svc-c__n { font-size: 13px; line-height: 1.3; color: var(--muted); padding-top: 14px; }
.page-variants .v-svc-c__t { font-family: var(--font-display); font-size: 48px; line-height: 1.05; letter-spacing: -.03em; transition: color var(--dur-fast) var(--ease); }
.page-variants .v-svc-c__d { grid-column: 2; font-size: 14px; line-height: 1.45; letter-spacing: -.01em; color: var(--muted); max-width: 30em; }
.page-variants .v-svc-c__item a:hover .v-svc-c__t, .page-variants .v-svc-c__item a:focus-visible .v-svc-c__t { color: var(--accent-ink); }

/* ── PRICING A: three columns on hairlines ── */
.page-variants .v-price-a__head { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.page-variants .v-price-a__head .label { grid-column: 1 / 4; padding-top: 16px; }
.page-variants .v-price-a__head h2 { grid-column: 4 / 15; }
.page-variants .v-price-a__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0; margin: var(--head-to-content) 0 0 calc((100% - 15 * var(--col-gap)) / 16 * 3 + 3 * var(--col-gap)); }
.page-variants .v-plan { display: grid; align-content: start; gap: 14px; padding-top: 20px; border-top: 1px solid var(--line-ink); }
.page-variants .v-plan { padding-right: 24px; }
.page-variants .v-plan + .v-plan { padding-left: 24px; border-left: 1px solid var(--line); }
.page-variants .v-plan:last-child { padding-right: 0; }
.page-variants .v-plan__price { font-family: var(--font-statement); font-size: 84px; line-height: 1; letter-spacing: -.045em; margin: 20px 0 6px; white-space: nowrap; }
.page-variants .v-plan__price small, .page-variants .v-cmp small { font-size: 14px; letter-spacing: 0; color: var(--muted); vertical-align: .9em; margin-right: .2em; }
.page-variants .v-plan__note { font-size: 14px; line-height: 1.45; letter-spacing: -.01em; color: var(--muted); max-width: 26em; }
.page-variants .v-plan__list { margin: 10px 0 14px; border-top: 1px solid var(--line); }
.page-variants .v-plan__list li { font-size: 14px; line-height: 1.35; letter-spacing: -.01em; padding: 9px 0; border-bottom: 1px solid var(--line); }
.page-variants .v-plan .lnk { justify-self: start; }

/* ── PRICING B: a real comparison table ── */
.page-variants .v-price-b__head { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.page-variants .v-price-b__head h2 { grid-column: 1 / 9; }
.page-variants .v-price-b__head .lead-xl { grid-column: 11 / 17; }
.page-variants .v-cmp__scroll { margin-top: var(--head-to-content); }
.page-variants .v-cmp { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.35; letter-spacing: -.01em; table-layout: fixed; }
.page-variants .v-cmp th, .page-variants .v-cmp td { text-align: left; font-weight: 400; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.page-variants .v-cmp thead th { padding-bottom: 20px; border-bottom: 1px solid var(--line-ink); vertical-align: bottom; font-size: 14px; }
.page-variants .v-cmp thead th:first-child { width: 25%; }
.page-variants .v-cmp thead b { display: block; margin-top: 10px; font-family: var(--font-statement); font-size: 56px; line-height: 1; letter-spacing: -.04em; font-weight: 400; }
.page-variants .v-cmp tbody th { color: var(--muted); }
.page-variants .v-cmp__go th, .page-variants .v-cmp__go td { border-bottom: 0; padding-top: 24px; }

/* ── PRICING C: one studio day with add-ons ── */
.page-variants .v-price-c { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.page-variants .v-price-c__media { grid-column: 1 / 8; display: grid; gap: 12px; }
.page-variants .v-price-c__plate { aspect-ratio: 4 / 5; }
.page-variants .v-price-c__plate img { object-position: 57% 50%; }
.page-variants .v-price-c__body { grid-column: 9 / 17; display: grid; gap: 24px; justify-items: start; }
.page-variants .v-price-c__price { font-family: var(--font-statement); font-size: 112px; line-height: 1; letter-spacing: -.05em; }
.page-variants .v-price-c__adds { width: 100%; display: grid; gap: 14px; margin: 16px 0 12px; }
.page-variants .v-price-c__tbl .tbl__row { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 2fr); font-size: 14px; }
.page-variants .v-price-c__tbl .tbl__row > span:last-child { text-align: right; font-size: 15px; }

/* ── CTA A: giant line + one link ── */
.page-variants .v-cta-a { min-height: 640px; display: flex; flex-direction: column; justify-content: space-between; }
.page-variants .v-cta-a h2 { max-width: 12em; }
.page-variants .v-cta-a__foot { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; margin-top: 96px; padding-top: 20px; border-top: 1px solid var(--line); }
.page-variants .v-cta-a__foot .facts { grid-column: 1 / 7; }
.page-variants .v-cta-a__foot .lnk { grid-column: 13 / 17; justify-self: end; }

/* ── CTA B: night band, email at 64px ── */
.page-variants .v-cta-b { padding: var(--section) 0; }
.page-variants .v-cta-b__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); }
.page-variants .v-cta-b__grid > .label { grid-column: 1 / 4; padding-top: 12px; }
.page-variants .v-cta-b__main { grid-column: 4 / 17; display: grid; gap: 40px; justify-items: start; }
.page-variants .v-cta-b__main h2 { max-width: 15em; }
.page-variants .v-cta-b__mail { display: inline-flex; align-items: center; gap: 20px; font-family: var(--font-statement); font-size: 64px; line-height: 1.05; letter-spacing: -.04em;
  padding-bottom: 6px; border-bottom: 1px solid var(--night-line-2); transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.page-variants .v-cta-b__mail svg { width: 28px; height: 28px; color: var(--accent-on-dark); transition: transform .35s var(--ease-out); }
.page-variants .v-cta-b__mail:hover { color: var(--accent-on-dark); border-color: var(--accent-on-dark); }
.page-variants .v-cta-b__mail:hover svg { transform: translate(3px, -3px); }
.page-variants .v-cta-b__pairs { display: flex; gap: 64px; margin-top: 16px; }
.page-variants .v-cta-b__pairs div { display: grid; gap: 6px; }
.page-variants .v-cta-b__pairs a { font-family: var(--font-statement); font-size: 24px; line-height: 1.2; letter-spacing: -.02em; transition: color var(--dur-fast) var(--ease); }
.page-variants .v-cta-b__pairs a:hover { color: var(--accent-on-dark); }

/* ── CTA C: full-bleed plate, small square white card bottom-left ── */
.page-variants .v-cta-c { position: relative; min-height: 780px; display: flex; align-items: flex-end; padding: var(--gutter); }
.page-variants .v-cta-c__bg { position: absolute; inset: 0; }
.page-variants .v-cta-c__bg img { object-position: 50% 55%; }
.page-variants .v-cta-c__card { position: relative; z-index: 2; width: 440px; background: var(--bg); padding: 28px 28px 28px; display: grid; gap: 16px; justify-items: start; }
.page-variants .v-cta-c__card h2 { font-size: 32px; line-height: 1.08; letter-spacing: -.025em; margin-top: 8px; }
.page-variants .v-cta-c__card p { font-size: 14px; line-height: 1.45; letter-spacing: -.01em; color: var(--muted); }
.page-variants .v-cta-c__card .btn { margin-top: 8px; }

/* ── CTA D: split with a short booking form ── */
.page-variants .v-cta-d { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.page-variants .v-cta-d__side { grid-column: 1 / 8; display: grid; gap: 56px; }
.page-variants .v-cta-d__side .facts { max-width: 440px; }
.page-variants .v-form { grid-column: 9 / 17; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 8px; padding-top: 12px; }
.page-variants .v-field { display: grid; gap: 4px; padding: 12px 0 10px; border-bottom: 1px solid var(--line-2); }
.page-variants .v-field--wide { grid-column: 1 / -1; }
.page-variants .v-field label { font-size: 13px; line-height: 1.3; color: var(--muted); }
.page-variants .v-field input, .page-variants .v-field select, .page-variants .v-field textarea { width: 100%; border: 0; border-radius: 0; background: transparent; padding: 4px 0; font: inherit; font-size: 18px; line-height: 1.35; letter-spacing: -.01em; color: var(--text); resize: vertical; }
.page-variants .v-field select { appearance: none; background-image: none; cursor: pointer; }
.page-variants .v-field input::placeholder, .page-variants .v-field textarea::placeholder { color: var(--muted); }
.page-variants .v-field:focus-within { border-color: var(--text); }
.page-variants .v-field input:focus, .page-variants .v-field select:focus, .page-variants .v-field textarea:focus { outline: none; }
.page-variants .v-form .btn { grid-column: 1 / -1; justify-self: start; margin-top: 24px; }

/* ── FOOTER A: the demo footer, scoped ── */
.page-variants .v-foot-a .foot { margin: 0; }

/* ── FOOTER B: one row on a hairline ── */
.page-variants .v-foot-b { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: baseline; padding: 20px 0 24px; border-top: 1px solid var(--line-ink);
  font-size: 12px; line-height: 1.3; letter-spacing: -.01em; }
.page-variants .v-foot-b__mark { grid-column: 1 / 4; font-family: var(--font-display); font-size: 40px; line-height: 1; letter-spacing: -.04em; }
.page-variants .v-foot-b__list { grid-column: 4 / 9; display: flex; gap: 6px; }
.page-variants .v-foot-b__list a { color: var(--muted); }
.page-variants .v-foot-b__list a, .page-variants .v-foot-b__mail, .page-variants .v-foot-c__col a, .page-variants .v-foot-c__legal a, .page-variants .v-foot-d__col a, .page-variants .v-foot-d__legal a { transition: color var(--dur-fast) var(--ease); }
.page-variants .v-foot-b__list a:not(:last-child)::after { content: ","; }
.page-variants .v-foot-b__list a:hover, .page-variants .v-foot-b__mail:hover { color: var(--accent-ink); }
.page-variants .v-foot-b__mail { grid-column: 9 / 13; display: inline-flex; align-items: center; gap: 8px; }
.page-variants .v-foot-b__mail svg { width: 12px; height: 12px; color: var(--accent-ink); }
.page-variants .v-foot-b__legal { grid-column: 13 / 17; justify-self: end; color: var(--muted); }

/* ── FOOTER C: a wide plate fading into night, columns over the fade ── */
.page-variants .v-foot-c { position: relative; background: var(--night); color: var(--on-night); overflow: hidden; }
.page-variants .v-foot-c__bg { position: absolute; inset: 0 0 auto; height: 620px; background: var(--night); }
.page-variants .v-foot-c__bg img { object-position: 50% 30%; }
.page-variants .v-foot-c__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(7, 7, 7, .1), rgba(7, 7, 7, .45) 45%, var(--night) 100%); }
.page-variants .v-foot-c__body { position: relative; z-index: 2; padding-top: 360px; padding-bottom: 24px; }
.page-variants .v-foot-c__line { font-family: var(--font-statement); font-size: 56px; line-height: 1.05; letter-spacing: -.04em; max-width: 14em; text-wrap: balance; }
.page-variants .v-foot-c__line span { color: var(--night-muted); }
.page-variants .v-foot-c__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); margin-top: 120px; padding-top: 20px; border-top: 1px solid var(--night-line); font-size: 12px; line-height: 1.3; letter-spacing: -.01em; }
.page-variants .v-foot-c__grid > .brand { grid-column: 1 / 4; }
.page-variants .v-foot-c__col { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-content: start; }
.page-variants .v-foot-c__col:nth-child(2) { grid-column: 4 / 7; }
.page-variants .v-foot-c__col:nth-child(3) { grid-column: 7 / 10; }
.page-variants .v-foot-c__col:nth-child(4) { grid-column: 10 / 14; }
.page-variants .v-foot-c__col:nth-child(5) { grid-column: 14 / 17; }
.page-variants .v-foot-c__col .label, .page-variants .v-foot-d__col .label { font-size: 12px; }
.page-variants .v-foot-c .label { color: var(--night-muted); }
.page-variants .v-foot-c__col ul, .page-variants .v-foot-d__col ul { display: grid; gap: 2px; }
.page-variants .v-foot-c__col a:hover { color: var(--accent-on-dark); }
.page-variants .v-foot-c__legal { display: flex; flex-wrap: wrap; gap: 12px 48px; margin-top: 96px; font-size: 12px; line-height: 1.3; color: var(--night-muted); }
.page-variants .v-foot-c__legal a:hover { color: var(--accent-on-dark); }

/* ── FOOTER D: white, a 112px question, the email, 12px columns ── */
.page-variants .v-foot-d { padding-bottom: 24px; }
.page-variants .v-foot-d__top { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.page-variants .v-foot-d__q { grid-column: 1 / 11; font-family: var(--font-statement); font-size: 112px; line-height: 1; letter-spacing: -.045em; }
.page-variants .v-foot-d__mail { grid-column: 11 / 17; justify-self: end; display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-statement); font-size: 40px; line-height: 1.1; letter-spacing: -.03em;
  padding-bottom: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--line-2); transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.page-variants .v-foot-d__mail svg { width: 20px; height: 20px; color: var(--accent-ink); }
.page-variants .v-foot-d__mail:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.page-variants .v-foot-d__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); margin-top: 104px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.3; letter-spacing: -.01em; }
.page-variants .v-foot-d__grid > .brand { grid-column: 1 / 4; }
.page-variants .v-foot-d__col { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-content: start; }
.page-variants .v-foot-d__col:nth-child(2) { grid-column: 4 / 7; }
.page-variants .v-foot-d__col:nth-child(3) { grid-column: 7 / 11; }
.page-variants .v-foot-d__col:nth-child(4) { grid-column: 11 / 14; }
.page-variants .v-foot-d__col:nth-child(5) { grid-column: 14 / 17; }
.page-variants .v-foot-d__col a:hover { color: var(--accent-ink); }
.page-variants .v-foot-d__legal { display: flex; flex-wrap: wrap; gap: 12px 48px; margin-top: 72px; font-size: 12px; line-height: 1.3; color: var(--muted); }
.page-variants .v-foot-d__legal a:hover { color: var(--accent-ink); }
/* the page's own footer follows footer-d: keep one gap */
.page-variants main + .foot { margin-top: var(--section); }

/* ── Responsive ── */
@media (max-width: 1280px) {
  .page-variants .v-hero-a__h { font-size: 92px; }
  .page-variants .v-hero-b__h { font-size: 80px; }
  .page-variants .v-hero-c__h { font-size: 100px; }
  .page-variants .v-hero-d__h { font-size: 164px; }
  .page-variants .v-chip { width: 168px; }
  .page-variants .v-plan__price { font-size: 68px; }
  .page-variants .v-foot-d__q, .page-variants .v-price-c__price { font-size: 92px; }
}
@media (max-width: 1024px) {
  .page-variants .v-intro h1 { grid-column: 1 / 17; }
  .page-variants .v-intro .lead-xl { grid-column: 1 / 10; }
  .page-variants .v-intro__facts { grid-column: 10 / 17; }
  .page-variants .v-hero-a__h { font-size: 76px; }
  .page-variants .v-hero-b__h { grid-column: 1 / 17; font-size: 72px; }
  .page-variants .v-hero-b__side { grid-column: 1 / 11; margin-top: 32px; }
  .page-variants .v-num:nth-child(1) { grid-column: 1 / 5; }
  .page-variants .v-num:nth-child(2) { grid-column: 5 / 9; }
  .page-variants .v-num:nth-child(3) { grid-column: 9 / 13; }
  .page-variants .v-num:nth-child(4) { grid-column: 13 / 17; }
  .page-variants .v-hero-b__who { grid-column: 1 / 17; margin-top: 24px; }
  .page-variants .v-hero-c__h { font-size: 80px; }
  .page-variants .v-hero-c__copy { max-width: 560px; }
  .page-variants .v-chip { width: 140px; }
  .page-variants .v-hero-d__h { font-size: 128px; }
  .page-variants .v-hero-d__night { padding: 56px 40px; }
  .page-variants .v-card--main { left: 24px; bottom: 40px; width: 230px; }
  .page-variants .v-card--tag { right: 24px; top: 72px; }
  .page-variants .v-hd--c { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 0fr) minmax(0, 3fr); }
  .page-variants .v-hd--c .v-hd__mail { display: none; }
  .page-variants .v-svc-b__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }
  .page-variants .v-svc-b__col:nth-child(3) { border-left: 0; padding-left: 0; }
  .page-variants .v-svc-b__col:nth-child(n+3) { border-top: 1px solid var(--line-ink); }
  .page-variants .v-svc-b__head h2 { grid-column: 4 / 17; }
  .page-variants .v-svc-c__t { font-size: 40px; }
  .page-variants .v-svc-a__grid > .label, .page-variants .v-price-a__head .label { grid-column: 1 / 17; margin-bottom: 16px; }
  .page-variants .v-svc-a__grid > .tbl, .page-variants .v-price-a__head h2 { grid-column: 1 / 17; }
  .page-variants .v-price-a__cols { margin-left: 0; }
  .page-variants .v-plan__price { font-size: 52px; }
  .page-variants .v-cmp thead b { font-size: 40px; }
  .page-variants .v-price-b__head h2 { grid-column: 1 / 17; }
  .page-variants .v-price-b__head .lead-xl { grid-column: 1 / 12; margin-top: 24px; }
  .page-variants .v-price-c__media { grid-column: 1 / 8; }
  .page-variants .v-price-c__body { grid-column: 9 / 17; }
  .page-variants .v-price-c__price { font-size: 76px; }
  .page-variants .v-cta-b__mail { font-size: 52px; }
  .page-variants .v-foot-c__line { font-size: 44px; }
  .page-variants .v-foot-d__q { grid-column: 1 / 17; font-size: 76px; }
  .page-variants .v-foot-d__mail { grid-column: 1 / 17; justify-self: start; margin-top: 32px; }
}
@media (max-width: 900px) {
  .page-variants .v-hd__list, .page-variants .v-hd__city, .page-variants .v-hd__mail, .page-variants .v-hd__end .v-hd__list { display: none; }
  .page-variants .v-hd__burger { display: block; }
  .page-variants .v-hd--b { grid-template-columns: 1fr auto; }
  .page-variants .v-hd--b .v-hd__side { display: none; }
  .page-variants .v-hd--b .brand { text-align: left; }
  .page-variants .v-hd--c { display: flex; align-items: center; justify-content: space-between; padding-right: var(--gutter); }
  .page-variants .v-hd--c .v-hd__list, .page-variants .v-hd--c .v-hd__book { display: none; }
  .page-variants .v-hd--c .v-hd__one { padding-right: 0; }
  .page-variants .v-hd__end { gap: 20px; }
  .page-variants .v-hd__end .lnk { display: none; }
  .page-variants .v-hero-c__stage { min-height: 0; display: grid; gap: 56px; padding-top: 40px; }
  .page-variants .v-hero-c__chips { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .page-variants .v-chip { position: static; width: auto; }
  .page-variants .v-chip .plate { rotate: calc(var(--r) * .5); }
  .page-variants .v-hero-d__split { grid-template-columns: 1fr; }
  .page-variants .v-hero-d__type { padding-top: 48px; }
  .page-variants .v-hero-d__night { padding: 56px var(--gutter) 64px; }
  .page-variants .v-hero-d__plate { width: min(100%, 460px); }
  .page-variants .v-svc-c__media { grid-column: 1 / 17; position: relative; top: 0; }
  .page-variants .v-svc-c__plate { aspect-ratio: 4 / 3; max-height: none; }
  .page-variants .v-svc-c__list { grid-column: 1 / 17; margin-top: 48px; }
  .page-variants .v-price-a__cols { grid-template-columns: 1fr; row-gap: 56px; }
  .page-variants .v-plan + .v-plan { padding-left: 0; border-left: 0; }
  .page-variants .v-plan { padding-right: 0; }
  .page-variants .v-price-c__media, .page-variants .v-price-c__body { grid-column: 1 / 17; }
  .page-variants .v-price-c__plate { aspect-ratio: 4 / 3; }
  .page-variants .v-price-c__body { margin-top: 48px; }
  .page-variants .v-cta-d__side, .page-variants .v-form { grid-column: 1 / 17; }
  .page-variants .v-form { margin-top: 48px; }
  .page-variants .v-foot-b { grid-template-columns: 1fr 1fr; row-gap: 20px; }
  .page-variants .v-foot-b > * { grid-column: auto; justify-self: start; }
  .page-variants .v-foot-c__grid, .page-variants .v-foot-d__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .page-variants .v-foot-c__grid > *, .page-variants .v-foot-d__grid > * { grid-column: auto !important; }
}
@media (max-width: 640px) {
  .page-variants .v-intro { padding-top: calc(var(--nav-h) + 40px); }
  .page-variants .v-intro__grid { row-gap: 28px; }
  .page-variants .v-intro h1 { font-size: 40px; }
  .page-variants .v-intro .lead-xl, .page-variants .v-intro__facts { grid-column: 1 / 17; }
  .page-variants .v-label { margin-bottom: 32px; gap: 4px 12px; }
  .page-variants .v-label .v-cls { margin-left: 0; width: 100%; }
  .page-variants .v-frame--bar { min-height: 96px; }
  .page-variants .v-frame--photo { height: 300px; }
  .page-variants .v-frame__peek { aspect-ratio: 16 / 7; }
  .page-variants .v-hero-a .hero { padding-top: 40px; }
  .page-variants .v-hero-a__h { font-size: 46px; letter-spacing: -.015em; }
  .page-variants .v-hero-b__stage { min-height: 780px; }
  .page-variants .v-hero-b__h { font-size: 44px; letter-spacing: -.03em; }
  .page-variants .v-hero-b__side { grid-column: 1 / 17; margin-top: 20px; }
  .page-variants .v-hero-b__strip { margin-top: 32px; row-gap: 20px; }
  .page-variants .v-num:nth-child(odd) { grid-column: 1 / 9; }
  .page-variants .v-num:nth-child(even) { grid-column: 9 / 17; }
  .page-variants .v-num b { font-size: 32px; }
  .page-variants .v-hero-b__who { margin-top: 4px; }
  .page-variants .v-hero-c__h { font-size: 48px; letter-spacing: -.03em; }
  .page-variants .v-hero-c__news { white-space: normal !important; text-align: left; }
  .page-variants .v-hero-c__chips { gap: 28px 16px; }
  .page-variants .v-chip__cap { flex-direction: column; gap: 2px; }
  .page-variants .v-chip__cap span { text-align: left; }
  .page-variants .v-hero-d__h { font-size: 96px; }
  .page-variants .v-hero-d__type { gap: 40px; padding-bottom: 48px; }
  .page-variants .v-hero-d__field { flex-direction: column; }
  .page-variants .v-hero-d__field input { flex: none; }
  .page-variants .v-hero-d__field .btn { justify-content: space-between; }
  .page-variants .v-hero-d__night { padding: 40px var(--gutter) 56px; display: block; }
  .page-variants .v-hero-d__plate { width: 100%; }
  .page-variants .v-card--main { position: relative; left: auto; bottom: auto; width: auto; margin: -64px 16px 0; }
  .page-variants .v-card--tag { right: 32px; top: 56px; }
  .page-variants .v-svc-b__head .label { grid-column: 1 / 17; margin-bottom: 12px; }
  .page-variants .v-svc-b__head h2 { grid-column: 1 / 17; }
  .page-variants .v-svc-b__cols { grid-template-columns: 1fr; row-gap: 48px; }
  .page-variants .v-svc-b__col:nth-child(n) { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-ink); }
  .page-variants .v-svc-b__col:first-child { border-top: 0; }
  .page-variants .v-svc-b__n { font-size: 56px; margin-bottom: 12px; }
  .page-variants .v-svc-c__item a { grid-template-columns: 32px minmax(0, 1fr); padding: 24px 0 28px; }
  .page-variants .v-svc-c__t { font-size: 30px; }
  .page-variants .v-svc-c__n { padding-top: 8px; }
  .page-variants .v-plan__price { font-size: 56px; }
  .page-variants .v-cmp__scroll { overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .page-variants .v-cmp { min-width: 560px; }
  .page-variants .v-cmp thead b { font-size: 30px; }
  .page-variants .v-price-b__head .lead-xl { grid-column: 1 / 17; }
  .page-variants .v-price-c__price { font-size: 64px; }
  .page-variants .v-price-c__tbl .tbl__row { grid-template-columns: minmax(0, 1fr) auto; }
  .page-variants .v-price-c__tbl .tbl__row > span:nth-child(2) { grid-column: 1; grid-row: 2; }
  .page-variants .v-price-c__tbl .tbl__row > span:last-child { grid-column: 2; grid-row: 1 / 3; }
  .page-variants .v-cta-a { min-height: 0; }
  .page-variants .v-cta-a__foot { row-gap: 32px; margin-top: 56px; }
  .page-variants .v-cta-a__foot .facts, .page-variants .v-cta-a__foot .lnk { grid-column: 1 / 17; justify-self: start; }
  .page-variants .v-cta-b__grid > .label, .page-variants .v-cta-b__main { grid-column: 1 / 17; }
  .page-variants .v-cta-b__grid > .label { margin-bottom: 16px; }
  .page-variants .v-cta-b__main { gap: 28px; }
  .page-variants .v-cta-b__mail { font-size: 30px; gap: 12px; }
  .page-variants .v-cta-b__mail svg { width: 18px; height: 18px; }
  .page-variants .v-cta-b__pairs { flex-direction: column; gap: 20px; margin-top: 8px; }
  .page-variants .v-cta-b__pairs a { font-size: 21px; }
  .page-variants .v-cta-c { min-height: 620px; padding: var(--gutter); }
  .page-variants .v-cta-c__card { width: 100%; padding: 22px; }
  .page-variants .v-cta-c__card h2 { font-size: 26px; }
  .page-variants .v-cta-d__side { gap: 40px; }
  .page-variants .v-form { grid-template-columns: 1fr; }
  .page-variants .v-form .btn { justify-self: stretch; justify-content: space-between; }
  .page-variants .v-foot-b { grid-template-columns: 1fr; }
  .page-variants .v-foot-b__mark { font-size: 36px; }
  .page-variants .v-foot-c__bg { height: 420px; }
  .page-variants .v-foot-c__body { padding-top: 240px; }
  .page-variants .v-foot-c__line, .page-variants .v-foot-d__q { font-size: 40px; }
  .page-variants .v-foot-c__grid { margin-top: 72px; }
  .page-variants .v-foot-c__grid, .page-variants .v-foot-d__grid { grid-template-columns: 1fr; row-gap: 24px; }
  .page-variants .v-foot-c__legal, .page-variants .v-foot-d__legal { gap: 10px 24px; margin-top: 56px; }
  .page-variants .v-foot-d__mail { font-size: 26px; }
  .page-variants .v-foot-d__mail svg { width: 16px; height: 16px; }
  .page-variants .v-foot-d__grid { margin-top: 64px; }
}

/* ───────── Work ───────── */
/* Noira — Work (wk-) and Project (pj-) pages. Tokens only; every rule scoped to its page prefix. */

/* ═══════════════ WORK ═══════════════ */

/* Head: a quiet 64px sans title with the count, a 14px line, the split by kind */
.wk-head { padding-top: calc(var(--nav-h) + 72px); }
.wk-head__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.page-work .wk-head h1 { grid-column: 1 / 8; font-family: var(--font-display); font-size: 64px; line-height: 1.02; letter-spacing: -.035em; }
.wk-head h1 sup { font-family: var(--font-statement); font-size: 20px; letter-spacing: -.01em; vertical-align: top; position: relative; top: .25em; margin-left: 6px; }
.wk-head__text { grid-column: 8 / 12; font-size: 14px; line-height: 1.45; letter-spacing: -.01em; color: var(--muted); text-wrap: pretty; padding-bottom: 6px; }
.wk-head__split { grid-column: 13 / 17; margin: 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: end; gap: 32px; padding-bottom: 4px; }
.wk-head__split div { display: grid; gap: 4px; }
.wk-head__split dd { margin: 0; font-family: var(--font-statement); font-size: 40px; line-height: 1; letter-spacing: -.03em; }

/* The works list: one DOM, three views set by noira.js (data-view on #wk-list) */
.wk-works { padding: 90px 0 var(--section); }
.wk-item { display: grid; gap: 12px; color: var(--text); }
.wk-item .plate { aspect-ratio: 3 / 2; }
.wk-item--tall .plate { aspect-ratio: 3 / 4; }
.wk-item:hover .plate img { transform: scale(1.03); }
.wk-cap { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; line-height: 1.3; letter-spacing: -.01em; }
.wk-cap .wk-frames { color: var(--muted); }
.wk-cap .wk-no, .wk-cap .wk-type, .wk-cap .wk-year, .wk-cap svg { display: none; }
.wk-cap svg { width: 12px; height: 12px; color: var(--accent-ink); transition: transform .35s var(--ease-out); }
.wk-list__head { display: none; }

/* Grid: a sparse two-up scatter on the 16-column grid (home uses a denser three-up; this one breathes) */
.wk-list[data-view="grid"] { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 120px; align-items: start; }
.wk-list[data-view="grid"] .wk-item:nth-of-type(1)  { grid-column: 1 / 8; }
.wk-list[data-view="grid"] .wk-item:nth-of-type(2)  { grid-column: 10 / 16; margin-top: 150px; }
.wk-list[data-view="grid"] .wk-item:nth-of-type(3)  { grid-column: 2 / 6; }
.wk-list[data-view="grid"] .wk-item:nth-of-type(4)  { grid-column: 8 / 15; margin-top: 220px; }
.wk-list[data-view="grid"] .wk-item:nth-of-type(5)  { grid-column: 5 / 9; margin-top: -40px; }
.wk-list[data-view="grid"] .wk-item:nth-of-type(6)  { grid-column: 11 / 17; margin-top: 120px; }
.wk-list[data-view="grid"] .wk-item:nth-of-type(7)  { grid-column: 1 / 5; margin-top: 40px; }
.wk-list[data-view="grid"] .wk-item:nth-of-type(8)  { grid-column: 7 / 14; margin-top: 200px; }
.wk-list[data-view="grid"] .wk-item:nth-of-type(9)  { grid-column: 3 / 10; }
.wk-list[data-view="grid"] .wk-item:nth-of-type(10) { grid-column: 12 / 16; margin-top: 60px; }
.wk-list[data-view="grid"] .wk-item:nth-of-type(11) { grid-column: 1 / 7; margin-top: 60px; }
.wk-list[data-view="grid"] .wk-item:nth-of-type(12) { grid-column: 9 / 13; margin-top: 160px; }

/* List: a 14px table on hairlines, a small thumbnail first, the ↗ last */
.wk-list[data-view="list"] { display: grid; border-top: 1px solid var(--line); }
.wk-list[data-view="list"] .wk-list__head,
.wk-list[data-view="list"] .wk-item { display: grid; grid-template-columns: 104px minmax(0, 4fr) minmax(0, 4fr) minmax(0, 1fr) minmax(0, 1fr) 24px; column-gap: 16px; align-items: center; }
.wk-list[data-view="list"] .wk-list__head { padding: 10px 0; border-bottom: 1px solid var(--line); }
.wk-list[data-view="list"] .wk-item { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; transition: color var(--dur-fast) var(--ease); }
.wk-list[data-view="list"] .wk-item .plate { width: 104px; aspect-ratio: 3 / 2; }
.wk-list[data-view="list"] .wk-cap { display: contents; font-size: 14px; }
.wk-list[data-view="list"] .wk-cap .wk-type, .wk-list[data-view="list"] .wk-cap .wk-year, .wk-list[data-view="list"] .wk-cap svg { display: block; }
.wk-list[data-view="list"] .wk-cap .wk-type, .wk-list[data-view="list"] .wk-cap .wk-year { color: var(--muted); }
.wk-list[data-view="list"] .wk-cap svg { justify-self: end; }
.wk-list[data-view="list"] .wk-item:hover { color: var(--accent-ink); }
.wk-list[data-view="list"] .wk-item:hover svg { transform: translate(2px, -2px); }

/* Gallery: one big frame per row, a statement caption block beside it, sides alternate */
.wk-list[data-view="gallery"] { display: grid; row-gap: 120px; }
.wk-list[data-view="gallery"] .wk-item { grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.wk-list[data-view="gallery"] .wk-item .plate { grid-column: 1 / 12; grid-row: 1; height: min(76vh, 700px); aspect-ratio: auto; }
.wk-list[data-view="gallery"] .wk-item--tall .plate { grid-column: 1 / 7; }
.wk-list[data-view="gallery"] .wk-cap { grid-column: 13 / 17; grid-row: 1; display: grid; justify-content: start; gap: 10px; padding-bottom: 4px; }
.wk-list[data-view="gallery"] .wk-item--tall .wk-cap { grid-column: 8 / 12; }
.wk-list[data-view="gallery"] .wk-item:nth-of-type(even) .plate { grid-column: 6 / 17; }
.wk-list[data-view="gallery"] .wk-item--tall:nth-of-type(even) .plate { grid-column: 11 / 17; }
.wk-list[data-view="gallery"] .wk-item:nth-of-type(even) .wk-cap { grid-column: 1 / 5; }
.wk-list[data-view="gallery"] .wk-item--tall:nth-of-type(even) .wk-cap { grid-column: 6 / 10; }
.wk-list[data-view="gallery"] .wk-cap .wk-no, .wk-list[data-view="gallery"] .wk-cap .wk-type, .wk-list[data-view="gallery"] .wk-cap .wk-year { display: block; }
.wk-list[data-view="gallery"] .wk-cap .wk-no { font-family: var(--font); font-size: 13px; color: var(--muted); }
.wk-list[data-view="gallery"] .wk-cap .wk-name { font-family: var(--font-statement); font-size: 30px; line-height: 1.1; letter-spacing: -.02em; margin-bottom: 8px; }
.wk-list[data-view="gallery"] .wk-cap .wk-type, .wk-list[data-view="gallery"] .wk-cap .wk-year { color: var(--text-2); }

/* The view switch: the one floating pill (round + shadow are allowed here), sticky at the bottom centre */
.wk-switch { position: sticky; bottom: 24px; z-index: 20; width: max-content; margin: 96px auto 0; display: flex; gap: 2px; padding: 4px; background: var(--bg); border-radius: var(--r-pill); box-shadow: var(--shadow-2); }
.wk-switch button { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); font-size: 12px; letter-spacing: -.01em; color: var(--muted); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.wk-switch button svg { width: 12px; height: 12px; }
.wk-switch button:hover { color: var(--text); }
.wk-switch button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); }

/* ═══════════════ PROJECT ═══════════════ */

/* Hero: one full-bleed frame; a soft paper fade only along the bottom where the type sits */
.pj-hero { position: relative; height: 100vh; min-height: 640px; max-height: 1040px; overflow: hidden; }
.pj-hero__plate { position: absolute; inset: 0; }
.pj-hero__plate img { object-position: 50% 30%; }
.pj-hero__fade { position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(to top, rgba(255, 255, 255, .62), rgba(255, 255, 255, .28) 45%, rgba(255, 255, 255, 0)); pointer-events: none; }
.pj-hero__fade--top { inset: 0 0 auto 0; height: 150px; background: linear-gradient(to bottom, rgba(255, 255, 255, .72), rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, 0)); }
.pj-hero__bar { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 22px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; color: var(--text); }
.page-project .pj-hero h1 { font-family: var(--font-display); font-size: 64px; line-height: 1; letter-spacing: -.035em; }
.pj-hero__num { display: flex; align-items: flex-end; gap: 14px; }
.pj-hero__num b { font-family: var(--font-statement); font-weight: 400; font-size: 168px; line-height: 1; letter-spacing: -.05em; margin-bottom: -.1em; }
.pj-hero__num span { font-size: 13px; line-height: 1.3; letter-spacing: -.01em; padding-bottom: 8px; }

/* Brief: facts left (cols 1–6), the 30px statement brief right (cols 8–16) */
.pj-brief__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.pj-brief__facts { grid-column: 1 / 7; }
.pj-brief__text { grid-column: 8 / 17; }

/* Shot plan: a framed ink plate (multiply on white), the thumbnail rail and Prev / Next on the right */
.pj-plan__head { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; margin-bottom: var(--head-to-content); }
.pj-plan__head .label { grid-column: 1 / 4; padding-top: 12px; }
.pj-plan__head h2 { grid-column: 4 / 12; }
.pj-plan__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: stretch; }
.pj-stage { grid-column: 1 / 15; position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--line); background: var(--bg); overflow: hidden; }
.pj-slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur); }
.pj-slide.is-on, html:not(.js) .pj-slide:first-child { opacity: 1; visibility: visible; transition-delay: 0s; }
.pj-slide img { position: absolute; inset: 32px 0 56px; margin: auto; width: auto; height: auto; max-width: 78%; max-height: calc(100% - 88px); object-fit: contain; mix-blend-mode: multiply; }
.pj-slide figcaption { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; gap: 24px; padding: 14px 20px; font-size: 13px; line-height: 1.3; letter-spacing: -.01em; }
.pj-slide figcaption span:last-child { color: var(--muted); }
.pj-shots { position: absolute; inset: 0 0 48px; margin: auto; height: max-content; width: min(88%, 980px); display: grid; gap: 20px; }
.pj-shots .tbl__row { grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 7fr) 64px; font-size: 14px; min-height: 56px; }
.pj-shots .tbl__row > span:last-child { color: var(--muted); justify-self: end; white-space: nowrap; }
.pj-rail { grid-column: 15 / 17; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.pj-thumbs { display: grid; gap: 12px; }
.pj-thumb { display: grid; place-items: center; aspect-ratio: 1; width: 100%; border: 1px solid var(--line); background: var(--bg); overflow: hidden; transition: border-color var(--dur-fast) var(--ease); }
.pj-thumb img { width: 76%; height: 76%; object-fit: contain; mix-blend-mode: multiply; }
.pj-thumb svg { width: 28px; height: 28px; color: var(--muted); }
.pj-thumb:hover { border-color: var(--line-2); }
.pj-plan__grid:has(.slide:nth-child(1).is-on) .pj-thumb:nth-child(1),
.pj-plan__grid:has(.slide:nth-child(2).is-on) .pj-thumb:nth-child(2),
.pj-plan__grid:has(.slide:nth-child(3).is-on) .pj-thumb:nth-child(3) { border-color: var(--line-ink); }
.pj-ctrl { display: grid; gap: 12px; }
.pj-count { font-family: var(--font); font-size: 13px; color: var(--muted); }
.pj-count span { color: var(--text); }
.pj-ctrl__btns { display: flex; justify-content: space-between; gap: 12px; }
.pj-ctrl__btns button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 13px; letter-spacing: -.01em; border-bottom: 1px solid var(--line-2); transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.pj-ctrl__btns button svg { width: 12px; height: 12px; color: var(--accent-ink); }
.pj-ctrl__btns button:hover { color: var(--accent-ink); border-color: var(--accent-ink); }

/* Photo essay: Detail = three rhythms on the 16-col grid; Masonry = three columns; Slider = one row that scrolls sideways */
.pj-essay__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: var(--head-to-content); }
.pj-essay__note { max-width: 300px; font-size: 14px; line-height: 1.45; letter-spacing: -.01em; color: var(--muted); }
.pj-f { display: grid; gap: 12px; margin: 0; }
.pj-f figcaption { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; line-height: 1.3; letter-spacing: -.01em; }
.pj-f figcaption span:last-child { color: var(--muted); }
.pj-f .plate { aspect-ratio: 2 / 3; }
.pj-f--full .plate { aspect-ratio: 16 / 9; }

.pj-frames[data-view="detail"] { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 120px; align-items: start; }
.pj-frames[data-view="detail"] .pj-f--full { grid-column: 1 / 17; }
.pj-frames[data-view="detail"] .pj-f--a { grid-column: 1 / 6; }
.pj-frames[data-view="detail"] .pj-f--b { grid-column: 7 / 13; margin-top: 180px; }
.pj-frames[data-view="detail"] .pj-f--tall { grid-column: 1 / 8; }
.pj-frames[data-view="detail"] .pj-note { grid-column: 10 / 16; align-self: end; display: grid; gap: 20px; padding-bottom: 32px; }
.pj-frames[data-view="detail"] .pj-f--c { grid-column: 4 / 9; }
.pj-frames[data-view="detail"] .pj-f--d { grid-column: 11 / 17; margin-top: 240px; }

.pj-frames[data-view="masonry"] { columns: 3; column-gap: var(--col-gap); }
.pj-frames[data-view="masonry"] .pj-f { break-inside: avoid; margin-bottom: 48px; }
.pj-frames[data-view="masonry"] .pj-note { display: none; }

.pj-frames[data-view="slider"] { --h: min(68vh, 640px); display: flex; gap: var(--col-gap); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 16px; scrollbar-width: thin; }
.pj-frames[data-view="slider"] .pj-f { flex: none; width: calc(var(--h) * 2 / 3); scroll-snap-align: start; }
.pj-frames[data-view="slider"] .pj-f--full { width: calc(var(--h) * 16 / 9); }
.pj-frames[data-view="slider"] .pj-f .plate { height: var(--h); aspect-ratio: auto; }
.pj-frames[data-view="slider"] .pj-note { display: none; }
.pj-switch { margin-top: 72px; }

/* Result: label (cols 1–3), what shipped (cols 4–7), the 30px statement paragraph (cols 8–16) */
.pj-result__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.pj-result__label { grid-column: 1 / 4; padding-top: 6px; }
.pj-result__list { grid-column: 4 / 8; }
.pj-result__text { grid-column: 8 / 17; }

/* Next work: label, a 3:2 thumbnail, the next title in 48px sans */
.pj-next { border-top: 1px solid var(--line); padding-top: var(--section); }
.band + .pj-next { padding-top: 72px; }
.pj-next__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.pj-next__grid > .label { grid-column: 1 / 4; align-self: start; }
.pj-next__plate { grid-column: 4 / 11; aspect-ratio: 3 / 2; }
.pj-next__text { grid-column: 12 / 17; display: grid; gap: 14px; justify-items: start; }
.pj-next__text h2 a { transition: color var(--dur-fast) var(--ease); }
.pj-next__text h2 a:hover { color: var(--accent-ink); }
.pj-next__text p { font-size: 14px; color: var(--muted); letter-spacing: -.01em; margin-bottom: 10px; }

/* ── Responsive (work + project) ── */
@media (max-width: 1280px) {
  .pj-hero__num b { font-size: 136px; }
}
@media (max-width: 1024px) {
  .wk-head__text { grid-column: 8 / 17; }
  .wk-head__split { grid-column: 1 / 17; justify-content: start; margin-top: 40px; }
  .wk-list[data-view="list"] .wk-list__head, .wk-list[data-view="list"] .wk-item { grid-template-columns: 88px minmax(0, 4fr) minmax(0, 4fr) minmax(0, 1fr) minmax(0, 2fr) 20px; }
  .wk-list[data-view="list"] .wk-item .plate { width: 88px; }
  .wk-list[data-view="gallery"] .wk-item .plate { height: min(60vh, 560px); }
  .pj-brief__facts { grid-column: 1 / 7; }
  .pj-brief__text { grid-column: 7 / 17; }
  .pj-plan__head h2 { grid-column: 4 / 15; }
  .pj-stage { grid-column: 1 / 14; }
  .pj-rail { grid-column: 14 / 17; }
  .pj-frames[data-view="detail"] .pj-note { grid-column: 9 / 17; }
  .pj-result__list { grid-column: 1 / 7; grid-row: 2; margin-top: 32px; }
  .pj-result__label { grid-column: 1 / 7; }
  .pj-result__text { grid-column: 7 / 17; grid-row: 1 / 3; }
}
@media (max-width: 900px) {
  .wk-head h1 { grid-column: 1 / 17; }
  .wk-head__text { grid-column: 1 / 13; margin-top: 24px; }
  .wk-list[data-view="grid"] { row-gap: 64px; }
  .wk-list[data-view="grid"] .wk-item:nth-of-type(n) { grid-column: 1 / 9; margin-top: 0; }
  .wk-list[data-view="grid"] .wk-item:nth-of-type(even) { grid-column: 9 / 17; margin-top: 64px; }
  .wk-list[data-view="list"] .wk-list__head span:nth-child(4), .wk-list[data-view="list"] .wk-cap .wk-year { display: none; }
  .wk-list[data-view="list"] .wk-list__head, .wk-list[data-view="list"] .wk-item { grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1fr) auto 20px; }
  .wk-list[data-view="gallery"] .wk-item:nth-of-type(n) .plate { grid-column: 1 / 17; height: auto; aspect-ratio: 3 / 2; }
  .wk-list[data-view="gallery"] .wk-item--tall:nth-of-type(n) .plate { grid-column: 1 / 11; aspect-ratio: 3 / 4; }
  .wk-list[data-view="gallery"] .wk-item:nth-of-type(n) .wk-cap { grid-column: 1 / 17; grid-row: 2; margin-top: 16px; }
  .pj-hero { height: 86vh; min-height: 560px; }
  .pj-brief__grid { row-gap: 56px; }
  .pj-brief__facts, .pj-brief__text { grid-column: 1 / 17; }
  .pj-plan__head .label { grid-column: 1 / 17; padding: 0 0 12px; }
  .pj-plan__head h2 { grid-column: 1 / 17; }
  .pj-stage { grid-column: 1 / 17; }
  .pj-rail { grid-column: 1 / 17; flex-direction: row; align-items: center; margin-top: 16px; }
  .pj-thumbs { grid-template-columns: repeat(3, 72px); }
  .pj-ctrl { justify-items: end; }
  .pj-ctrl__btns { gap: 24px; }
  .pj-frames[data-view="masonry"] { columns: 2; }
  .pj-next__plate { grid-column: 1 / 10; margin-top: 16px; }
  .pj-next__grid > .label { grid-column: 1 / 17; }
  .pj-next__text { grid-column: 10 / 17; }
}
@media (max-width: 640px) {
  .wk-head { padding-top: calc(var(--nav-h) + 40px); }
  .page-work .wk-head h1 { font-size: 44px; }
  .wk-head__text { grid-column: 1 / 17; }
  .wk-head__split { gap: 28px; }
  .wk-head__split dd { font-size: 32px; }
  .wk-works { padding-top: 56px; }
  .wk-list[data-view="grid"] { row-gap: 48px; }
  .wk-list[data-view="grid"] .wk-item:nth-of-type(n) { grid-column: 1 / 17; margin-top: 0; }
  .wk-list[data-view="grid"] .wk-item--tall:nth-of-type(n) { grid-column: 1 / 13; }
  .wk-list[data-view="grid"] .wk-item--tall:nth-of-type(4n+1) { grid-column: 5 / 17; }
  .wk-list[data-view="list"] .wk-list__head { display: none; }
  .wk-list[data-view="list"] .wk-item { grid-template-columns: 76px minmax(0, 1fr) auto 16px; row-gap: 2px; }
  .wk-list[data-view="list"] .wk-item .plate { width: 76px; grid-row: 1 / 3; }
  .wk-list[data-view="list"] .wk-cap .wk-name { grid-column: 2; grid-row: 1; }
  .wk-list[data-view="list"] .wk-cap .wk-type { grid-column: 2; grid-row: 2; font-size: 13px; }
  .wk-list[data-view="list"] .wk-cap .wk-frames { grid-column: 3; grid-row: 1 / 3; font-size: 13px; }
  .wk-list[data-view="list"] .wk-cap svg { grid-column: 4; grid-row: 1 / 3; }
  .wk-list[data-view="gallery"] { row-gap: 64px; }
  .wk-list[data-view="gallery"] .wk-item--tall:nth-of-type(n) .plate { grid-column: 1 / 17; }
  .wk-list[data-view="gallery"] .wk-cap .wk-name { font-size: 24px; }
  .wk-switch { margin-top: 56px; bottom: 16px; }
  .wk-switch button { padding: 0 12px; min-height: 40px; }

  .pj-hero { height: 78vh; min-height: 520px; }
  .pj-hero__plate img { object-position: 50% 25%; }
  .pj-hero__fade { height: 46%; }
  .pj-hero__bar { bottom: 18px; }
  .page-project .pj-hero h1 { font-size: 40px; }
  .pj-hero__num { flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
  .pj-hero__num b { font-size: 88px; margin-bottom: 0; }
  .pj-hero__num span { padding-bottom: 0; }
  .pj-stage { aspect-ratio: 4 / 5; }
  .pj-slide img { max-width: 86%; inset: 24px 0 72px; max-height: calc(100% - 96px); }
  .pj-slide figcaption { flex-direction: column; gap: 2px; padding: 12px 14px; }
  .pj-shots { width: calc(100% - 28px); inset: 0 0 64px; }
  .pj-shots .tbl__row { grid-template-columns: minmax(0, 1fr) auto; min-height: 0; }
  .pj-shots .tbl__row > span:last-child { grid-column: 2; grid-row: 1 / 4; }
  .pj-rail { flex-direction: column; align-items: stretch; }
  .pj-thumbs { grid-template-columns: repeat(3, 64px); }
  .pj-ctrl { grid-template-columns: auto 1fr; align-items: center; justify-items: stretch; }
  .pj-ctrl__btns { justify-content: flex-end; }
  .pj-essay__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pj-frames[data-view="detail"] { row-gap: 48px; }
  .pj-frames[data-view="detail"] .pj-f:nth-child(n), .pj-frames[data-view="detail"] .pj-note { grid-column: 1 / 17; margin-top: 0; }
  .pj-frames[data-view="detail"] .pj-f--a { grid-column: 1 / 13; }
  .pj-frames[data-view="detail"] .pj-f--b, .pj-frames[data-view="detail"] .pj-f--d { grid-column: 5 / 17; }
  .pj-frames[data-view="detail"] .pj-f--full .plate { aspect-ratio: 4 / 3; }
  .pj-frames[data-view="detail"] .pj-note { padding-bottom: 0; }
  .pj-frames[data-view="masonry"] { columns: 2; column-gap: 12px; }
  .pj-frames[data-view="masonry"] .pj-f { margin-bottom: 28px; }
  .pj-frames[data-view="masonry"] .pj-f figcaption { flex-direction: column; gap: 2px; font-size: 12px; }
  .pj-frames[data-view="slider"] { --h: 56vh; }
  .pj-frames[data-view="slider"] .pj-f--full { width: calc(100vw - 2 * var(--gutter)); }
  .pj-frames[data-view="slider"] .pj-f--full .plate { height: auto; aspect-ratio: 4 / 3; }
  .pj-result__label, .pj-result__list, .pj-result__text { grid-column: 1 / 17; grid-row: auto; }
  .pj-result__text { margin-top: 24px; }
  .pj-result__list { margin-top: 40px; }
  .pj-next__plate { grid-column: 1 / 17; }
  .pj-next__text { grid-column: 1 / 17; margin-top: 24px; }
}