/* Rasante v2 · "Luz rasante". Dark studio, one light colour, one light section.
   Tokens first, then base, chrome (header, cursor, grain), sections in page order, then inner pages.
   Fonts: Newsreader (display, variable with optical size) and Schibsted Grotesk (UI and body). See fonts/fonts.css. */

:root {
  --night: #0D0F0E;
  --umber: #17140F;
  --lime: #EFE9DD;
  --ash: #9C978C;
  --grazing: #C2602E;
  --warm: #F2C9A0;
  --ink: #0D0F0E;
  --ink-2: #55514A;
  --line: rgba(239, 233, 221, .14);
  --line-2: rgba(239, 233, 221, .3);
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gut: clamp(20px, 4.2vw, 72px);
  --sec: clamp(104px, 14vw, 232px);
  --ease: cubic-bezier(.2, .65, .1, 1);
  --header: 76px;
  color-scheme: dark;
}

@property --lit { syntax: "<percentage>"; inherits: true; initial-value: 0%; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--night); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.has-smooth { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--night);
  color: var(--lime);
  font: 400 17px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
@media (min-width: 1100px) { body { font-size: 18px; } }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--grazing); color: var(--night); }

:focus-visible { outline: 2px solid var(--grazing); outline-offset: 4px; border-radius: 2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip { position: fixed; left: 16px; top: -80px; z-index: 200; background: var(--lime); color: var(--night); padding: 12px 18px; font-size: 15px; transition: top .2s; }
.skip:focus { top: 16px; }

.wrap { width: 100%; max-width: 1760px; margin-inline: auto; padding-inline: var(--gut); }

/* type */
.serif, h1, h2, h3 { font-family: var(--serif); font-optical-sizing: auto; font-weight: 300; }
h2 { font-size: clamp(44px, 6.2vw, 108px); line-height: .98; letter-spacing: -.022em; font-weight: 300; text-wrap: balance; }
.kicker {
  display: flex; align-items: center; gap: 0;
  font: 500 14px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ash);
  margin-bottom: clamp(24px, 3vw, 44px);
}
.kicker__no { color: var(--lime); display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; }
.kicker__no::after { content: ""; display: inline-block; width: 44px; height: 1px; background: var(--grazing); margin: 0 18px; }
.lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: rgba(239, 233, 221, .82); max-width: 36em; }
.meta { font-size: 15px; color: var(--ash); max-width: 46em; }
.meta a, .lede a { text-decoration: underline; text-decoration-color: var(--grazing); text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* buttons and links */
.btn {
  display: inline-flex; align-items: center; gap: 18px;
  font: 500 14px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  padding: 20px 28px; border: 1px solid transparent; transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
  white-space: nowrap;
}
.btn i { position: relative; display: block; width: 26px; height: 1px; background: currentColor; transition: width .5s var(--ease); }
.btn i::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); transform-origin: 100% 0; top: 0; }
.btn:hover i { width: 40px; }
.btn--light { background: var(--lime); color: var(--night); }
.btn--light:hover { background: #fff; }
.btn--dark { background: var(--night); color: var(--lime); }
.btn--dark:hover { background: #26241f; }
.btn--line { border-color: var(--line-2); color: var(--lime); }
.btn--line:hover { border-color: var(--grazing); }
.btn--line-dark { border-color: rgba(13, 15, 14, .4); color: var(--ink); }
.btn--line-dark:hover { border-color: var(--grazing); }
.btn--small { padding: 13px 20px; }
.btn[disabled] { opacity: .6; cursor: progress; }
.link-line {
  display: inline-block; font: 500 14px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  padding-block: 8px; background: linear-gradient(var(--grazing), var(--grazing)) left bottom / 0 1px no-repeat, linear-gradient(var(--line-2), var(--line-2)) left bottom / 100% 1px no-repeat;
  transition: background-size .6s var(--ease);
}
.link-line:hover { background-size: 100% 1px, 100% 1px; }


/* ---------- header ---------- */
/* The inline nav needs about 1000 px for the longest language (ES/PL); below 1040 px the menu button takes over. Keep in sync with initHeader(). */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--header);
  transition: transform .6s var(--ease), background .5s, border-color .5s;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled { background: rgba(13, 15, 14, .84); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-color: var(--line); }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header:focus-within { transform: none; }
.site-header__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-inline: var(--gut); max-width: 1760px; margin-inline: auto; }
.brand { display: inline-flex; align-items: center; gap: 14px; flex: none; padding-block: 12px; }
.brand img { width: auto; }
.brand img:first-child { height: 18px; }
.brand__word { height: 16px; }
.site-nav { display: none; flex: 1 1 auto; min-width: 0; justify-content: center; gap: clamp(18px, 2.2vw, 44px); }
.site-nav a, .menu__langs a, .lang { font: 500 14px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.site-nav a { color: rgba(239, 233, 221, .86); padding-block: 10px; background: linear-gradient(var(--grazing), var(--grazing)) left bottom / 0 1px no-repeat; transition: background-size .6s var(--ease), color .3s; }
.site-nav a:hover { background-size: 100% 1px; color: var(--lime); }
.header-actions { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); flex: none; }
.langs { display: none; gap: 10px; }
.lang { color: var(--ash); padding: 12px 4px; transition: color .3s; }
a.lang:hover { color: var(--lime); }
.lang[aria-current] { color: var(--lime); }
.cta-short { display: inline; }
.cta-full { display: none; }
.menu-btn { display: inline-flex; align-items: center; gap: 12px; font: 500 14px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; padding: 14px 0 14px 6px; }
.menu-btn__i { width: 22px; height: 7px; border-block: 1px solid currentColor; }
@media (min-width: 900px) { .header-actions .btn { display: inline-flex; } }
@media (min-width: 1040px) {
  .site-nav, .langs { display: flex; }
  .menu-btn { display: none; }
}
@media (min-width: 1320px) { .cta-full { display: inline; } .cta-short { display: none; } }
@media (max-width: 380px) { .brand__word { display: none; } .btn--small { padding-inline: 14px; } }

.menu { position: fixed; inset: 0; z-index: 80; background: var(--night); display: flex; flex-direction: column; justify-content: center; padding: 96px var(--gut) 48px; overflow-y: auto; }
.menu[hidden] { display: none; }
.menu__nav { display: grid; gap: 4px; }
.menu__nav a { display: flex; align-items: baseline; gap: 20px; font: 300 clamp(40px, 11vw, 64px)/1.15 var(--serif); letter-spacing: -.02em; padding-block: 6px; border-bottom: 1px solid var(--line); }
.menu__nav a span { font: 500 14px/1 var(--sans); letter-spacing: .16em; color: var(--ash); width: 26px; }
.menu__langs { display: flex; gap: 24px; margin-top: 40px; }
.menu__langs .lang { padding: 12px 4px; }
.menu__close { position: absolute; top: 24px; right: var(--gut); font: 500 14px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; padding: 14px 0; }
body.menu-open { overflow: hidden; }

/* ---------- grain + cursor ---------- */
.grain {
  position: fixed; inset: -60%; z-index: 90; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n' x='0' y='0'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.1s steps(1) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 17% { transform: translate(-6%, 4%); } 33% { transform: translate(5%, -7%); }
  50% { transform: translate(-3%, 8%); } 67% { transform: translate(7%, 2%); } 83% { transform: translate(-8%, -4%); }
}

/* cursor: a thin light ring that trails the pointer; a warm dot appears over things you can act on. Touch and reduced motion keep the native cursor. */
.cursor { position: fixed; left: 0; top: 0; z-index: 100; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .4s; will-change: transform; }
.cursor::before {
  content: ""; position: absolute; left: 0; top: 0; width: var(--s, 26px); height: var(--s, 26px); transform: translate(-50%, -50%);
  border: 1px solid rgba(239, 233, 221, .72); border-radius: 50%;
  transition: width .6s var(--ease), height .6s var(--ease), border-color .5s, background .5s;
}
.cursor::after {
  content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--grazing);
  transform: scale(0); transition: transform .5s var(--ease);
}
.cursor.is-on { opacity: 1; }
.cursor.is-link { --s: 46px; }
.cursor.is-link::after { transform: scale(1); }
.cursor.is-view { --s: 88px; }
.cursor.is-view::before { border-color: rgba(239, 233, 221, .9); background: rgba(239, 233, 221, .04); }
.cursor.is-view::after { transform: scale(1.35); }
.cursor.is-text { opacity: 0; }
.cursor.is-dark::before { border-color: rgba(13, 15, 14, .72); }
.cursor__label { display: none; }
html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor label, html.has-cursor summary { cursor: none; }
html.has-cursor input:not([type="checkbox"]), html.has-cursor textarea { cursor: text; }
html.has-cursor select, html.has-cursor input[type="checkbox"], html.has-cursor input[type="date"] { cursor: pointer; }
html.has-cursor dialog[open], html.has-cursor dialog[open] * { cursor: auto; }
html.has-cursor dialog[open] button { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } .cursor { display: none; } }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }
@media print { .grain, .cursor { display: none; } }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--night); }
.hero__stage { height: 100svh; min-height: 620px; background: var(--night); overflow: hidden; isolation: isolate; }
.hero__stage:not(.luz-stage) { position: relative; }
.hero__media { position: absolute; inset: 0; }
.hero__media picture, .hero__media img { width: 100%; height: 100%; }
.hero__media img { object-fit: cover; object-position: 50% 46%; }
.hero__shade { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(to top, rgba(13, 15, 14, .96) 0, rgba(13, 15, 14, .6) 26%, rgba(13, 15, 14, 0) 58%), linear-gradient(90deg, rgba(13, 15, 14, .5), rgba(13, 15, 14, 0) 55%), linear-gradient(to bottom, rgba(13, 15, 14, .55), rgba(13, 15, 14, 0) 22%); }
.hero__text { position: absolute; z-index: 4; left: var(--gut); right: var(--gut); bottom: clamp(76px, 9vh, 108px); max-width: 1760px; margin-inline: auto; }
.hero h1 { font-weight: 300; }
.hero__eyebrow { display: block; text-shadow: 0 1px 14px rgba(13,15,14,.9); font: 500 14px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(239, 233, 221, .9); margin-bottom: clamp(18px, 2.2vw, 32px); }
.hero__eyebrow::before { content: ""; display: inline-block; width: 44px; height: 1px; background: var(--grazing); vertical-align: middle; margin-right: 18px; }
.hero__title { display: block; font: 300 clamp(56px, 8vw, 148px)/.94 var(--serif); letter-spacing: -.028em; max-width: 9.5em; text-wrap: balance; font-optical-sizing: auto; }
.hero__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; margin-top: clamp(24px, 3vw, 44px); }
.hero__lede { max-width: 31em; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; color: rgba(239, 233, 221, .88); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.hero__foot { position: absolute; z-index: 4; left: var(--gut); right: var(--gut); bottom: 26px; display: flex; justify-content: space-between; align-items: center; gap: 24px; max-width: 1760px; margin-inline: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.hero__where { font-size: 14px; letter-spacing: .06em; color: var(--ash); }
.hero__scroll { display: inline-flex; align-items: center; gap: 14px; font: 500 14px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ash); }
.hero__scroll i { display: block; width: 1px; height: 28px; background: linear-gradient(var(--line-2), var(--grazing)); transform-origin: top; animation: drip 2.8s var(--ease) infinite; }
@keyframes drip { 0% { transform: scaleY(0); opacity: 0; } 30% { opacity: 1; } 70% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero__scroll i { animation: none; } }
.scene-skip { position: absolute; z-index: 5; right: var(--gut); bottom: 26px; font: 500 14px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--lime); padding: 14px 0 12px; border-bottom: 1px solid var(--line-2);
  opacity: clamp(0, calc(1.7 - var(--luz-p, 0) * 1.9), 1); transition: border-color .3s; }
.scene-skip:hover { border-color: var(--grazing); }
.scene-skip[hidden] { display: none; }

/* Scene layout. It is applied by CSS alone, before any script runs, on exactly the screens where site.js will mount the scene
   (wide, mouse, motion allowed), so the H1 never moves when the scene arrives: the module only adds the canvas and the sticky track.
   html.luz-off is added by site.js when the scene cannot start (no WebGL, import failed), which brings the photo hero back. */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.js:not(.luz-off) .hero__stage { min-height: 0; }
  html.js:not(.luz-off) .hero .hero__media, html.js:not(.luz-off) .hero .hero__foot { display: none; }
  html.js:not(.luz-off) .hero .hero__shade { background: linear-gradient(90deg, rgba(13, 15, 14, .62), rgba(13, 15, 14, 0) 52%), linear-gradient(to bottom, rgba(13, 15, 14, .5), rgba(13, 15, 14, 0) 26%); opacity: var(--luz-ui, 1); }
  html.js:not(.luz-off) .hero .hero__text { bottom: auto; top: calc(var(--header) + clamp(32px, 7vh, 96px)); opacity: var(--luz-ui, 1); pointer-events: none; }
  html.js:not(.luz-off) .hero .hero__title { font-size: clamp(52px, 6.4vw, 118px); max-width: 8.5em; }
  html.js:not(.luz-off) .hero .hero__row { display: grid; justify-content: start; margin-top: clamp(22px, 3vh, 40px); }
  html.js:not(.luz-off) .hero .hero__lede { max-width: 26em; }
  html.js:not(.luz-off) .hero .hero__actions { pointer-events: auto; }
  html.js:not(.luz-off) .hero[data-ui="off"] .hero__row, html.js:not(.luz-off) .hero[data-ui="off"] .hero__eyebrow { visibility: hidden; }
  html.js:not(.luz-off) .hero .scene-skip { display: inline-block; }
  html.js:not(.luz-off) .hero .scene-skip[hidden] { display: none; }
  html.js:not(.luz-off) .hero .luz-hint { font-size: 14px; letter-spacing: .2em; }
}

@media (min-width: 900px) and (min-aspect-ratio: 11/10) {
  /* 2.39:1 letterbox: the photograph sits in a scope window, the black bars hold the chrome. (Static hero only.) */
  .hero__media { inset: 50% 0 auto 0; height: min(100%, calc(100vw / 2.39)); transform: translateY(-50%); }
  .hero__media::before, .hero__media::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--line-2); z-index: 1; }
  .hero__media::before { top: 0; }
  .hero__media::after { bottom: 0; }
  .hero__shade { background: linear-gradient(to top, rgba(13, 15, 14, 1) 0, rgba(13, 15, 14, .9) 26%, rgba(13, 15, 14, .55) 46%, rgba(13, 15, 14, 0) 72%), linear-gradient(90deg, rgba(13, 15, 14, .6), rgba(13, 15, 14, 0) 55%); }
}
@media (max-width: 899px) {
  .hero__stage { min-height: 640px; }
  .hero__media img { object-fit: cover; object-position: 64% 50%; }
  /* the eyebrow sits on the bright pillar and sky: a firmer scrim up to the middle of the screen keeps it above 4.5:1 */
  .hero__shade { background: linear-gradient(to top, rgba(13, 15, 14, .97) 0, rgba(13, 15, 14, .9) 38%, rgba(13, 15, 14, .72) 56%, rgba(13, 15, 14, .3) 74%, rgba(13, 15, 14, 0) 90%), linear-gradient(to bottom, rgba(13, 15, 14, .55), rgba(13, 15, 14, 0) 22%); }
  .hero__text { bottom: 82px; }
  .hero__eyebrow { text-shadow: 0 0 18px rgba(13, 15, 14, .95), 0 1px 3px rgba(13, 15, 14, .8); color: var(--lime); }
  .hero__where { font-size: 14px; max-width: 70%; line-height: 1.5; }
  .hero__scroll span { display: none; }
  .hero__title { font-size: clamp(56px, 15.5vw, 84px); }
}


/* ---------- 01 work / cinema ---------- */
.work { padding-top: var(--sec); }
.work:focus { outline: none; }
.work__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; padding-bottom: clamp(36px, 4.5vw, 72px); }
.work__meta { text-align: right; display: grid; gap: 14px; justify-items: end; }
.work__note { font-size: 15px; color: var(--ash); max-width: 30em; }
.work__note a { color: var(--lime); text-decoration: underline; text-decoration-color: var(--grazing); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.broker-note { display: none; border-block: 1px solid var(--line); margin-bottom: 32px; }
.broker-note.is-on { display: block; }
.broker-note__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-block: 22px; }

/* default = list (phones, tablets, no JavaScript): one plate after the other, nothing pinned */
.reel { position: relative; }
.cinema__plates { display: grid; gap: clamp(36px, 8vw, 64px); padding-inline: var(--gut); }
.cinema__plates:focus-visible { outline-offset: 8px; }
.plate { min-width: 0; }
/* List mode (below 900 px): the browser's own lazy loading starts early on slow connections (up to 2500 px ahead) and would pull most of the gallery in before the first scroll.
   site.js releases data-defer when a plate is within 500 px of the screen; until then its picture is not rendered, so nothing is requested. The height is estimated from the
   3:2 frame plus the caption. Fail-safe: opens by itself after 6 s if the script never ran. */
@media (max-width: 899px) {
  html.js .plate[data-defer] { content-visibility: hidden; contain-intrinsic-size: auto calc((100vw - 40px) / 1.5 + 84px); animation: reel-failsafe 1ms 6s forwards; }
}
@media print { .plate[data-defer] { content-visibility: visible; } }
.plate__frame { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; background: var(--umber); }
.plate__frame picture, .plate__frame img { width: 100%; height: 100%; }
.plate__frame img { object-fit: cover; object-position: var(--pos, 50% 50%); }
.plate__cap { display: grid; gap: 6px; padding-top: 16px; }
.plate__title { font: 300 clamp(22px, 5.6vw, 30px)/1.2 var(--serif); letter-spacing: -.01em; }
.plate__type { font: 500 14px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ash); }
.cinema__ui, .ticks { display: none; }
.arrow { width: 56px; height: 56px; border: 1px solid var(--line-2); border-radius: 50%; display: grid; place-items: center; transition: border-color .4s, background .4s; flex: none; }
.arrow:hover { border-color: var(--grazing); background: rgba(194, 96, 46, .08); }
.arrow[disabled] { opacity: .3; pointer-events: none; }
.reel__btns { display: flex; gap: 12px; }

/* cinema (wide): the stage is pinned for N screens, one plate at a time, letterboxed 2.39:1 */
/* Before site.js has chosen the mode (a few milliseconds) a wide screen would lay the plates out as a list and the browser would start loading the first two
   although the real layout puts them far below the fold. Skip rendering the list until data-mode is set (content-visibility: hidden: a zero-height clip would not stop the browser, it still counts as near); the animation is a fail-safe that opens it again after 6 s if the script never ran. */
@media (min-width: 900px) {
  html.js .reel:not([data-mode]) .cinema__plates { content-visibility: hidden; animation: reel-failsafe 1ms 6s forwards; }
}
/* Same on the screens where the scene will mount: until it has (html.luz-on) the reel sits right under a one-screen hero, so its first plates would count as "near" and download.
   Once the scene is mounted the hero track is about five screens tall and they are far away. The fail-safe opens the plates after 8 s if the scene never arrives. */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.js:not(.luz-off):not(.luz-on) .cinema__plates { content-visibility: hidden; animation: reel-failsafe 1ms 8s forwards; }
}
@keyframes reel-failsafe { to { content-visibility: visible; } }
@media (min-width: 900px) {
  .reel[data-mode="cinema"] { height: calc(100svh + var(--n, 10) * 72svh); }
  .reel[data-mode="cinema"] .cinema {
    --fh: min(calc(100vw / 2.39), calc(100svh - 280px)); --k: 0; --bar: calc((100svh - var(--fh)) / 2);
    position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--night);
  }
  .reel[data-mode="cinema"] .cinema__plates { position: absolute; inset: 0; display: block; padding: 0; }
  .reel[data-mode="cinema"] .cinema__plates:focus-visible { outline-offset: -6px; }
  .reel[data-mode="cinema"] .plate { position: absolute; inset: 0; visibility: hidden; opacity: 0; transition: opacity 1.3s var(--ease), visibility 0s linear 1.3s; }
  .reel[data-mode="cinema"] .plate.is-active { visibility: visible; opacity: 1; transition: opacity 1.3s var(--ease), visibility 0s; }
  .reel[data-mode="cinema"] .plate.is-far { display: none; }
  .reel[data-mode="cinema"] .plate__frame {
    position: absolute; left: 0; right: 0; top: 50%; aspect-ratio: auto; transform: translateY(-50%);
    height: calc(100svh - (100svh - var(--fh)) * var(--k));
    box-shadow: 0 -1px 0 rgba(239, 233, 221, calc(.18 * var(--k))), 0 1px 0 rgba(239, 233, 221, calc(.18 * var(--k)));
  }
  .reel[data-mode="cinema"] .plate__frame img { transform: scale(1.08); transition: transform 2.8s var(--ease); }
  .reel[data-mode="cinema"] .plate.is-active .plate__frame img { transform: scale(1); }
  .reel[data-mode="cinema"] .plate__cap {
    position: absolute; left: var(--gut); bottom: 0; width: min(46em, 56vw); height: var(--bar); padding: 0; gap: 8px; align-content: center;
    opacity: clamp(0, calc((var(--k) - .6) * 2.5), 1); transform: translateY(8px); transition: transform 1.3s var(--ease) .15s;
    padding-bottom: 18px;
  }
  .reel[data-mode="cinema"] .plate.is-active .plate__cap { transform: none; }
  .reel[data-mode="cinema"] .plate__title { font-size: clamp(26px, 2.6vw, 44px); }
  .reel[data-mode="cinema"] .cinema__ui {
    position: absolute; z-index: 3; right: var(--gut); bottom: 0; height: var(--bar); display: flex; align-items: center; gap: clamp(20px, 2.4vw, 40px);
    padding-bottom: 18px; opacity: clamp(0, calc((var(--k) - .6) * 2.5), 1);
  }
  .reel[data-mode="cinema"] .cinema__count { font: 300 clamp(30px, 3.2vw, 54px)/1 var(--serif); letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; color: var(--ash); }
  .reel[data-mode="cinema"] .cinema__count b { font-weight: 300; color: var(--lime); }
  .reel[data-mode="cinema"] .ticks {
    display: flex; position: absolute; z-index: 3; left: var(--gut); right: var(--gut); bottom: 16px; gap: 6px; opacity: clamp(0, calc((var(--k) - .6) * 2.5), 1);
  }
  .tick { flex: 1 1 0; height: 20px; display: grid; align-items: center; }
  .tick i { display: block; width: 100%; height: 1px; background: var(--line-2); transform-origin: left; transition: background .5s, height .5s; }
  .tick:hover i { background: var(--lime); }
  .tick.is-past i { background: rgba(239, 233, 221, .5); }
  .tick.is-on i { background: var(--grazing); height: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .reel[data-mode="cinema"] .plate, .reel[data-mode="cinema"] .plate.is-active { transition: none; }
  .reel[data-mode="cinema"] .plate__frame img, .reel[data-mode="cinema"] .plate__cap { transition: none; transform: none; }
}
@media (max-width: 899px) {
  .work__meta { text-align: left; justify-items: start; }
}

/* lightbox */
.lightbox { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #080908; color: var(--lime); }
.lightbox::backdrop { background: #000; }
.lightbox[open] { display: block; }
.lightbox__stage { position: absolute; inset: 0 0 76px 0; display: grid; place-items: center; }
.lightbox__stage picture { display: contents; }
.lightbox__stage img { max-width: 100vw; max-height: calc(100dvh - 76px); width: auto; height: auto; object-fit: contain; }
.lightbox__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-inline: var(--gut); font-size: 15px; border-top: 1px solid var(--line); }
.lightbox__bar [data-lb-caption] { font: 300 22px/1.2 var(--serif); }
.lightbox__count { color: var(--ash); font-variant-numeric: tabular-nums; letter-spacing: .1em; }
.lb-btn { position: absolute; z-index: 2; width: 56px; height: 56px; border: 1px solid var(--line-2); border-radius: 50%; display: grid; place-items: center; background: rgba(8, 9, 8, .6); transition: border-color .3s; }
.lb-btn:hover { border-color: var(--grazing); }
.lb-close { top: 20px; right: 20px; }
.lb-prev, .lb-next { top: calc(50% - 38px); }
.lb-prev { left: 20px; } .lb-next { right: 20px; }
@media (max-width: 899px) { .lb-prev, .lb-next { top: auto; bottom: 10px; } .lb-prev { left: auto; right: 88px; } .lb-next { right: 20px; } .lightbox__bar { padding-right: 160px; } .lightbox__bar [data-lb-caption] { font-size: 18px; } .lightbox__count { display: none; } }

/* ---------- lit reveal: a thin grazing line sweeps across and the content comes into the light ---------- */
.js [data-lit] { --lit: 0%; transition: --lit 2s var(--ease); }
.js [data-lit].is-lit { --lit: 126%; }
.js .step__in, .js .service__in, .js .lit-text[data-lit] {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--lit) - 18%), rgba(0, 0, 0, .1) var(--lit));
  mask-image: linear-gradient(90deg, #000 calc(var(--lit) - 18%), rgba(0, 0, 0, .1) var(--lit));
}
.js .step.is-lit .step__in, .js .service.is-lit .service__in, .js .lit-text.is-lit { -webkit-mask-image: none; mask-image: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-lit] { --lit: 126%; transition: none; }
  .js .step__in, .js .service__in, .js .lit-text[data-lit] { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- 02 method: a timeline on a warm umber band ---------- */
.method { padding-block: var(--sec); background: var(--umber); border-block: 1px solid var(--line); }
.steps { margin-top: clamp(48px, 6vw, 104px); border-bottom: 1px solid var(--line); }
.step, .service { position: relative; border-top: 1px solid var(--line); }
.step::after, .service::after {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; pointer-events: none;
  background: linear-gradient(90deg, rgba(194, 96, 46, 0) 0, rgba(194, 96, 46, .9) 70%, var(--warm) 100%);
  clip-path: inset(0 calc(100% - clamp(0%, var(--lit), 100%)) 0 0);
  opacity: 0; transition: opacity 1.4s ease .5s;
}
.js .step.is-lit::after, .js .service.is-lit::after { opacity: 0; }
.js .step:not(.is-lit)::after, .js .service:not(.is-lit)::after { opacity: 1; transition: none; }
.js .step[data-lit], .js .service[data-lit] { transition-delay: calc(var(--i, 0) * .14s); }
.step__in { display: grid; grid-template-columns: minmax(96px, 1.1fr) 3fr 4.2fr; gap: 0 var(--gut); align-items: baseline; padding-block: clamp(34px, 4.4vw, 76px); }
.step__no { font: 200 clamp(56px, 8.2vw, 140px)/.8 var(--serif); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px rgba(239, 233, 221, .42); font-variant-numeric: lining-nums; }
.step__title { font: 300 clamp(32px, 3.6vw, 62px)/1 var(--serif); letter-spacing: -.02em; }
.step__body { max-width: 34em; display: grid; gap: 20px; color: rgba(239, 233, 221, .84); }
.step__note { font-size: 15px; line-height: 1.6; color: var(--ash); padding-top: 18px; border-top: 1px solid var(--line); }
@media (min-width: 1200px) {
  .steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 clamp(20px, 2.4vw, 44px); border-bottom: 0; }
  .step { border-top: 1px solid var(--line-2); }
  .step::before { content: ""; position: absolute; left: 0; top: -4px; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--grazing); background: var(--umber); }
  .step__in { display: flex; flex-direction: column; gap: 0; padding-block: clamp(28px, 3vw, 52px) 0; }
  .step__no { font-size: clamp(88px, 9.4vw, 168px); line-height: .78; margin-bottom: clamp(28px, 3.4vw, 56px); -webkit-text-stroke: 1px rgba(239, 233, 221, .5); }
  .step__title { font-size: clamp(26px, 2.2vw, 38px); margin-bottom: 20px; }
  .step__body { gap: 16px; font-size: 16px; line-height: 1.6; }
}
@media (max-width: 899px) {
  .step__in { grid-template-columns: 56px 1fr; gap: 12px 20px; }
  .step__no { grid-row: 1 / span 2; font-size: 56px; }
  .step__body { grid-column: 2; }
  .step__title { align-self: end; }
}

/* ---------- 03 services: three wide lines ---------- */
.services { padding-block: var(--sec); }
.service-list { margin-top: clamp(48px, 6vw, 104px); border-bottom: 1px solid var(--line-2); }
.service { border-top-color: var(--line-2); background: radial-gradient(640px circle at var(--mx, -9999px) 50%, rgba(242, 201, 160, .07), transparent 70%); }
.service__in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 26em); grid-template-areas: "no text" "title text" "title price";
  gap: 0 clamp(40px, 7vw, 140px); align-items: start; padding-block: clamp(44px, 5.6vw, 100px);
}
.service__no { grid-area: no; font: 500 14px/1 var(--sans); letter-spacing: .16em; color: var(--ash); margin-bottom: clamp(16px, 2vw, 28px); }
.service__title { grid-area: title; font: 300 clamp(44px, 6.2vw, 112px)/.96 var(--serif); letter-spacing: -.028em; text-wrap: balance; transition: transform .9s var(--ease); }
.service:hover .service__title { transform: translateX(clamp(8px, 1vw, 18px)); }
.service__text { grid-area: text; align-self: end; max-width: 28em; color: rgba(239, 233, 221, .86); }
.service__price { grid-area: price; margin-top: 22px; font: 500 14px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ash); }
.services__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 24px var(--gut); padding-top: 36px; font-size: 15px; color: var(--ash); }
.services__note { max-width: 40em; }
.services__next em { font-style: normal; display: block; margin-top: 6px; letter-spacing: .08em; }
.services__next span { color: var(--lime); letter-spacing: .16em; text-transform: uppercase; font-size: 14px; font-weight: 500; margin-right: 12px; }
@media (max-width: 899px) {
  .service__in { grid-template-columns: 1fr; grid-template-areas: "no" "title" "text" "price"; }
  .service__title { font-size: clamp(40px, 11vw, 64px); }
  .service__text { margin-top: 16px; }
  .service__price { margin-top: 14px; }
  .services__foot { grid-template-columns: 1fr; }
}

/* ---------- 04 concept case teaser ---------- */
.case { padding-bottom: var(--sec); }
.case__frame { position: relative; display: block; overflow: hidden; height: min(calc(100vw / 2.39), 70svh); background: var(--umber); box-shadow: 0 -1px 0 var(--line), 0 1px 0 var(--line); }
.case__frame picture, .case__frame img { width: 100%; height: 100%; }
.case__frame img { object-fit: cover; transform: scale(1.02); transition: transform 2.4s var(--ease); }
.case__frame:hover img { transform: scale(1.06); }
.case__text { display: grid; grid-template-columns: 7fr 5fr; gap: 24px clamp(40px, 6vw, 120px); padding-top: clamp(56px, 7vw, 120px); align-items: end; }
.case__text .kicker, .case__text h2 { grid-column: 1; }
.case__text .kicker { margin-bottom: 0; }
.case__lede, .case__row { grid-column: 2; }
.case__lede { grid-row: 1 / span 2; align-self: end; color: rgba(239, 233, 221, .84); max-width: 28em; }
.case__row { grid-row: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.case__tag { font-size: 14px; letter-spacing: .06em; color: var(--ash); }
.case__text h2 { font-size: clamp(40px, 5.2vw, 92px); }
@media (max-width: 899px) {
  .case__text { grid-template-columns: 1fr; }
  .case__text > * { grid-column: 1 !important; grid-row: auto !important; }
  .case__frame { height: auto; aspect-ratio: 3 / 2; }
}

/* ---------- 05 about: two-column editorial ---------- */
.about { padding-bottom: var(--sec); }
.about__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px clamp(48px, 8vw, 160px); align-items: start; }
.about__lead { position: sticky; top: calc(var(--header) + 32px); }
.about__pull { font: 300 clamp(48px, 6.8vw, 120px)/.96 var(--serif); letter-spacing: -.028em; max-width: 8em; text-wrap: balance; }
.about__body { font-size: clamp(18px, 1.4vw, 20px); line-height: 1.68; color: rgba(239, 233, 221, .86); max-width: 30em; padding-left: clamp(28px, 3.4vw, 64px); border-left: 1px solid var(--line-2); padding-top: 6px; }
.about__body p:first-child::first-line { color: var(--lime); }
.about__body a { color: var(--lime); text-decoration: underline; text-decoration-color: var(--grazing); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.about__body a.link-line { text-decoration: none; }
.about__channel { margin-top: clamp(32px, 3.4vw, 52px); display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.about__channel-name { font: italic 300 22px/1.2 var(--serif); color: var(--ash); }
@media (max-width: 899px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__lead { position: static; }
  .about__body { padding-left: 0; border-left: 0; }
}

/* ---------- 06 faq: a quiet accordion ---------- */
.faq { padding-bottom: var(--sec); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px clamp(48px, 8vw, 160px); align-items: start; }
.faq__head { position: sticky; top: calc(var(--header) + 32px); }
.faq__head .kicker { margin-bottom: 28px; }
.faq h2 { font-size: clamp(40px, 5vw, 88px); }
.faq__list { border-top: 1px solid var(--line-2); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-block: clamp(22px, 2.2vw, 34px); cursor: pointer; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline-offset: -2px; }
.faq__q { font: 300 clamp(22px, 2.1vw, 34px)/1.2 var(--serif); letter-spacing: -.01em; transition: color .4s; text-wrap: balance; }
.faq__item summary:hover .faq__q { color: #fff; }
.faq__mark { position: relative; flex: none; width: 18px; height: 18px; }
.faq__mark::before, .faq__mark::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: var(--lime); transition: transform .7s var(--ease), background .4s; }
.faq__mark::after { transform: rotate(90deg); }
.faq__item summary:hover .faq__mark::before, .faq__item summary:hover .faq__mark::after { background: var(--grazing); }
.faq__item.is-open .faq__mark::after { transform: rotate(0deg); }
.faq__a { padding: 0 clamp(0px, 6vw, 80px) clamp(24px, 2.4vw, 36px) 0; max-width: 42em; color: rgba(239, 233, 221, .84); }
@media (max-width: 899px) {
  .faq__grid { grid-template-columns: 1fr; }
  .faq__head { position: static; }
}
@media (prefers-reduced-motion: reduce) { .faq__mark::before, .faq__mark::after { transition: none; } }

/* ---------- request: the only light section ---------- */
.request { background: var(--lime); color: var(--ink); color-scheme: light; padding-block: var(--sec); position: relative; }
.request ::selection { background: var(--ink); color: var(--lime); }
.request .kicker { color: var(--ink-2); }
.request .kicker__no { color: var(--ink); }
.request .lede { color: var(--ink-2); }
.request__grid { display: grid; grid-template-columns: 5fr 6fr; gap: 56px clamp(48px, 8vw, 160px); align-items: start; }
.request h2 { font-size: clamp(48px, 6.4vw, 112px); }
.request__intro .lede { margin-top: clamp(24px, 3vw, 40px); }
.request__steps { margin-top: clamp(40px, 5vw, 72px); display: grid; gap: 0; border-top: 1px solid rgba(13, 15, 14, .2); max-width: 30em; }
.request__steps li { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding-block: 18px; border-bottom: 1px solid rgba(13, 15, 14, .2); color: var(--ink-2); font-size: 16px; }
.request__steps span { font: 300 26px/1.1 var(--serif); color: var(--ink); font-variant-numeric: lining-nums; }
.form { display: grid; gap: 30px; }
.form__intro { font-size: 15px; color: var(--ink-2); }
.field { display: grid; gap: 4px; }
.field[hidden] { display: none; }
.field > label { font: 500 15px/1.3 var(--sans); color: var(--ink); }
.opt { font-weight: 400; color: var(--ink-2); margin-left: 8px; }
.field input:not([type="checkbox"]), .field select, .field textarea {
  width: 100%; font: 400 19px/1.4 var(--sans); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid rgba(13, 15, 14, .5);
  border-radius: 0; padding: 12px 0 14px; transition: border-color .3s, box-shadow .3s; -webkit-appearance: none; appearance: none;
}
.field textarea { resize: vertical; min-height: 96px; }
.field select { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'><path d='M1 1l6 6 6-6' fill='none' stroke='%230D0F0E' stroke-width='1.2'/></svg>") right 2px center no-repeat; padding-right: 28px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--grazing); outline-offset: 6px; border-color: var(--grazing); border-radius: 0; }
.field input::placeholder { color: rgba(13, 15, 14, .5); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #A3361A; }
.field-error { font-size: 15px; color: #A3361A; min-height: 0; }
.field-error:empty { display: none; }
.date-line { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.date-line input[type="date"] { width: auto; min-width: 12em; }
.date-line input[disabled] { opacity: .4; }
.check { display: inline-flex !important; align-items: center; gap: 12px; font-weight: 400 !important; font-size: 17px !important; }
.check input { width: 22px; height: 22px; margin: 0; accent-color: var(--ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { display: none; font-size: 16px; color: #A3361A; padding: 14px 16px; border: 1px solid #A3361A; }
.form-error.is-on { display: block; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: 8px; }
.form__fine { font-size: 15px; color: var(--ink-2); max-width: 24em; }
.receipt { display: none; padding: clamp(28px, 4vw, 56px); border: 1px solid rgba(13, 15, 14, .3); }
.receipt.is-on { display: block; }
.receipt h3 { font: 300 clamp(32px, 3.4vw, 52px)/1.05 var(--serif); letter-spacing: -.02em; }
.receipt__label { margin-top: 28px; font: 500 14px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.receipt__ref { font: 300 clamp(40px, 5vw, 72px)/1.1 var(--serif); letter-spacing: .02em; margin-top: 10px; }
.receipt ol { margin: 28px 0; padding-left: 1.4em; list-style: decimal; color: var(--ink-2); display: grid; gap: 8px; }
@media (max-width: 899px) { .request__grid { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.site-footer { background: var(--night); padding-block: clamp(64px, 8vw, 120px) 48px; }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.site-footer__desc { margin-top: 20px; color: var(--ash); font-size: 15px; max-width: 22em; }
.site-footer ul { display: grid; gap: 4px; align-content: start; }
.site-footer li a { display: inline-block; padding: 8px 0; font-size: 16px; color: rgba(239, 233, 221, .86); }
.site-footer li a:hover { color: var(--lime); text-decoration: underline; text-decoration-color: var(--grazing); text-underline-offset: 5px; }
.site-footer__note { margin-top: clamp(48px, 6vw, 96px); padding-top: 24px; }
.site-footer__note small { display: block; border-top: 1px solid var(--line); padding-top: 24px; color: var(--ash); font-size: 14px; max-width: 60em; }
@media (max-width: 899px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__grid > div { grid-column: 1 / -1; } }
/* ---------- inner pages ---------- */
.page-head { padding-top: calc(var(--header) + clamp(72px, 10vw, 160px)); padding-bottom: clamp(48px, 6vw, 96px); }
.page-head .kicker { margin-bottom: 28px; }
.page-title { font: 300 clamp(48px, 7.4vw, 132px)/.96 var(--serif); letter-spacing: -.026em; max-width: 11em; text-wrap: balance; }
.page-head .lede { margin-top: clamp(28px, 3vw, 48px); }
.page-head .meta { margin-top: 20px; }
.case-hero { height: min(calc(100vw / 2.39), 70svh); overflow: hidden; background: var(--umber); box-shadow: 0 -1px 0 var(--line), 0 1px 0 var(--line); }
.case-hero picture, .case-hero img { width: 100%; height: 100%; object-fit: cover; }
.case-block { display: grid; grid-template-columns: 4fr 8fr; gap: 24px var(--gut); padding-block: clamp(48px, 6vw, 104px); border-top: 1px solid var(--line); }
.case-block:first-of-type { margin-top: clamp(48px, 6vw, 96px); }
.case-block__title { display: grid; gap: 14px; align-content: start; }
.case-block__no { font: 500 14px/1 var(--sans); letter-spacing: .16em; color: var(--ash); }
.case-block h2 { font-size: clamp(30px, 3.4vw, 56px); line-height: 1.04; }
.case-block__body { display: grid; gap: 20px; max-width: 40em; color: rgba(239, 233, 221, .86); }
.case-block__body ul { display: grid; gap: 10px; padding-left: 0; }
.case-block__body li { padding-left: 28px; position: relative; }
.case-block__body li::before { content: ""; position: absolute; left: 0; top: .8em; width: 14px; height: 1px; background: var(--grazing); }
.filesets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 32px; margin-block: 12px; }
.fileset { padding-top: 16px; border-top: 1px solid var(--line-2); }
.fileset h3 { font: 300 26px/1.1 var(--serif); margin-bottom: 8px; }
.fileset p { font-size: 16px; color: var(--ash); }
.frames { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(32px, 4vw, 64px) clamp(12px, 1.4vw, 24px); padding-inline: var(--gut); max-width: 1760px; margin: 0 auto clamp(48px, 6vw, 96px); }
.frame { grid-column: span 6; }
.frame--wide { grid-column: 1 / -1; }
.frame picture { overflow: hidden; background: var(--umber); }
.frame img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.frame--wide img { aspect-ratio: 2.39 / 1; }
.frame figcaption { display: grid; grid-template-columns: 48px 1fr; gap: 6px 12px; padding-top: 18px; font-size: 16px; color: var(--ash); }
.frame__no { font: 500 14px/1.6 var(--sans); letter-spacing: .16em; }
.frame figcaption b { font: 300 clamp(22px, 2vw, 32px)/1.15 var(--serif); color: var(--lime); }
.frame figcaption span:last-child { grid-column: 2; max-width: 40em; }
.case-cta { padding-block: clamp(72px, 9vw, 160px); border-top: 1px solid var(--line); display: grid; gap: 28px; justify-items: start; }
.case-cta h2 { font-size: clamp(48px, 7vw, 124px); }
.case-cta__row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; }
.credits-wrap { padding-bottom: var(--sec); }
.credits { display: grid; }
.credit { display: grid; grid-template-columns: 220px 1fr; gap: 12px 40px; padding-block: 32px; border-top: 1px solid var(--line); }
.credit img { width: 220px; height: 150px; object-fit: cover; }
.credit h2 { font: 300 28px/1.1 var(--serif); margin-bottom: 14px; }
.credit dl { display: grid; gap: 6px; }
.credit dl > div { display: grid; grid-template-columns: 9em 1fr; gap: 12px; font-size: 15px; }
.credit dt { color: var(--ash); }
.credit dd { word-break: break-word; }
.credit a { text-decoration: underline; text-decoration-color: var(--grazing); text-underline-offset: 3px; }
.credits__replace { margin-top: 40px; }
@media (max-width: 899px) {
  .case-block { grid-template-columns: 1fr; }
  .filesets { grid-template-columns: 1fr; }
  .frame { grid-column: 1 / -1; }
  .credit { grid-template-columns: 1fr; }
  .credit img { width: 100%; height: auto; aspect-ratio: 3 / 2; }
  .credit dl > div { grid-template-columns: 7em 1fr; }
}

/* ---------- request: form refinements on the light section ---------- */
.request { padding-block: var(--sec) calc(var(--sec) * .72); }
.form { gap: 34px; }
.field > label { font: 500 14px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.field input:not([type="checkbox"]), .field select, .field textarea { font-size: 20px; padding: 14px 0 16px; border-bottom-color: rgba(13, 15, 14, .42); }
.field select { color: var(--ink); cursor: pointer; }
.field select option { color: var(--ink); background: var(--lime); }
.field input[type="date"] { font-family: var(--sans); min-height: 56px; letter-spacing: .02em; -webkit-appearance: none; appearance: none; }
.field input[type="date"]::-webkit-datetime-edit { padding: 0; }
.field input[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.field input[type="date"]::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; padding: 6px; margin-left: 12px; transition: opacity .3s; }
.field input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 0; border-bottom-color: var(--grazing); box-shadow: 0 1px 0 0 var(--grazing); }
.field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px var(--lime) inset; -webkit-text-fill-color: var(--ink); }
.date-line { align-items: center; }
.check { cursor: pointer; }
.check input { accent-color: var(--ink); }
.check input:focus-visible { outline: 2px solid var(--grazing); outline-offset: 3px; }
.form__fine a { text-decoration: underline; text-decoration-color: var(--grazing); text-underline-offset: 3px; }
.btn--dark:focus-visible { outline-color: var(--grazing); }
.receipt { position: relative; }
.receipt::before { content: ""; position: absolute; left: -1px; top: -1px; height: 2px; width: calc(100% + 2px); background: linear-gradient(90deg, rgba(194, 96, 46, 0), var(--grazing) 70%, var(--warm)); transform-origin: left; transform: scaleX(0); }
.receipt.is-on::before { animation: sweep 1.8s var(--ease) .1s forwards; }
@keyframes sweep { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .receipt.is-on::before { animation: none; transform: scaleX(1); } }

/* ---------- footer ---------- */
.site-footer__contact { margin-top: 24px; }
.site-footer__contact a { font: 300 clamp(22px, 2vw, 30px)/1.2 var(--serif); letter-spacing: -.01em; padding-block: 6px; display: inline-block; background: linear-gradient(var(--grazing), var(--grazing)) left bottom / 0 1px no-repeat, linear-gradient(var(--line-2), var(--line-2)) left bottom / 100% 1px no-repeat; transition: background-size .6s var(--ease); }
.site-footer__contact a:hover { background-size: 100% 1px, 100% 1px; }
.site-footer .brand { padding-block: 8px; }

/* ---------- legal pages: readable long-form ---------- */
.legal { padding-bottom: var(--sec); }
.legal-block { grid-template-columns: minmax(160px, 4fr) minmax(0, 8fr); padding-block: clamp(36px, 4.4vw, 72px); }
.legal-block .case-block__title { align-content: start; }
.legal-block h2 { font: 300 clamp(24px, 2.2vw, 34px)/1.15 var(--serif); letter-spacing: -.012em; position: sticky; top: calc(var(--header) + 28px); }
.legal-block .case-block__body { max-width: 68ch; font-size: 17px; line-height: 1.72; color: rgba(239, 233, 221, .88); gap: 1.15em; }
.legal-block .case-block__body a { text-decoration: underline; text-decoration-color: var(--grazing); text-underline-offset: 4px; text-decoration-thickness: 1px; color: var(--lime); }
.legal-block .case-block__body ul { gap: 8px; }
.legal-dl { display: grid; margin-block: 4px; border-top: 1px solid var(--line); }
.legal-dl > div { display: grid; grid-template-columns: minmax(8em, 11em) minmax(0, 1fr); gap: 4px 20px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.legal-dl dt { font-size: 15px; letter-spacing: .02em; color: var(--ash); }
.legal-dl dd { overflow-wrap: anywhere; }
.placeholder { background: rgba(194, 96, 46, .22); outline: 1px dashed var(--grazing); outline-offset: 2px; padding: 0 .35em; border-radius: 2px; color: var(--lime); font-style: normal; white-space: nowrap; }
body.is-legal .page-title { max-width: 14em; }
@media (max-width: 899px) {
  .legal-block { grid-template-columns: 1fr; gap: 14px; }
  .legal-block h2 { position: static; }
  .legal-dl > div { grid-template-columns: 1fr; }
  .legal-block .case-block__body { font-size: 16.5px; }
}

/* ---------- 404 and thank-you ---------- */
body.is-404 .page-head, body.is-thanks .page-head { position: relative; min-height: 78svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding-bottom: clamp(56px, 8vw, 120px); }
body.is-404 .page-head__in, body.is-thanks .page-head__in { position: relative; z-index: 1; width: 100%; }
body.is-404 .page-head::before {
  content: "404"; position: absolute; right: var(--gut); top: calc(var(--header) + 5vw); font: 200 clamp(160px, 34vw, 560px)/.8 var(--serif); letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1px rgba(239, 233, 221, .16); pointer-events: none; font-variant-numeric: lining-nums;
}
.notfound__links { display: flex; flex-wrap: wrap; gap: 6px 36px; margin-top: clamp(28px, 3vw, 44px); }
body.is-thanks .page-head::before {
  content: ""; position: absolute; left: var(--gut); right: var(--gut); top: calc(var(--header) + 4vw); height: 1px; max-width: 1760px; margin-inline: auto;
  background: linear-gradient(90deg, rgba(194, 96, 46, 0), var(--grazing) 55%, var(--warm)); transform-origin: left; animation: sweep 2.6s var(--ease) .2s both;
}
body.is-thanks .page-title { max-width: 12em; }
body.is-thanks .page-head .btn { margin-top: clamp(24px, 3vw, 44px); }
@media (prefers-reduced-motion: reduce) { body.is-thanks .page-head::before { animation: none; } }

/* mobile refinements */
@media (max-width: 899px) {
  .header-actions .btn { display: none; }
  .hero__foot { display: none; }
  .hero__text { bottom: 40px; }
  .hero__eyebrow::before { display: none; }
  .hero__eyebrow { letter-spacing: .14em; }
  .request { padding-block: var(--sec) calc(var(--sec) * .8); }
}

/* ---------- service pages and guides (site/tools/pages.mjs) ----------
   Appended block. Reuses .page-head, .case-hero, .case-block, .filesets, .frames, .faq and .case-cta from above; only what those do not cover lives here. */
.crumbs { margin-bottom: clamp(24px, 3vw, 40px); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font: 500 13px/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ash); }
.crumbs li + li::before { content: ""; display: inline-block; width: 18px; height: 1px; background: var(--grazing); margin: 0 12px; vertical-align: middle; }
.crumbs a { padding-block: 6px; }
.crumbs a:hover { color: var(--lime); text-decoration: underline; text-decoration-color: var(--grazing); text-underline-offset: 5px; }
.crumbs [aria-current] { color: var(--lime); }
.pg-title { font-size: clamp(36px, 5.2vw, 88px); line-height: 1.02; max-width: 17em; }
.pg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; margin-top: clamp(28px, 3vw, 44px); }
.pg-cap { margin-top: 14px; font-size: 14px; color: var(--ash); }
.pg-cap a, .frame figcaption a, .pg-sources a, .pg-related a, .tldr a, .callout a, .byline a, .case-block__body a, .faq__a a, .pg-note a, .case-cta__services a { text-decoration: underline; text-decoration-color: var(--grazing); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.pg-cap a:hover, .frame figcaption a:hover, .pg-sources a:hover, .pg-related a:hover, .byline a:hover, .case-block__body a:hover, .faq__a a:hover { color: #fff; }
.page-head .byline { margin-top: 24px; }
.byline { display: flex; flex-wrap: wrap; gap: 6px 0; font-size: 15px; color: var(--ash); }
.byline span + span::before { content: ""; display: inline-block; width: 1px; height: 12px; background: var(--line-2); margin: 0 16px; vertical-align: -1px; }
.byline a { color: var(--lime); }
.pg-frames { margin-top: 0; margin-bottom: 0; padding-top: clamp(24px, 3vw, 48px); padding-bottom: clamp(24px, 3vw, 48px); }
.pg-frames .frame { grid-column: span 6; }
.callout { margin-top: clamp(32px, 4vw, 56px); padding: 6px 0 6px 24px; border-left: 1px solid var(--grazing); max-width: 48em; color: rgba(239, 233, 221, .9); }
.tldr { margin-top: clamp(28px, 3.4vw, 48px); padding: clamp(24px, 3vw, 44px); background: var(--umber); border: 1px solid var(--line); max-width: 60em; }
.tldr__t { font: 500 14px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ash); margin-bottom: 20px; }
.tldr ul { display: grid; gap: 12px; }
.tldr li { position: relative; padding-left: 28px; color: rgba(239, 233, 221, .92); }
.tldr li::before { content: ""; position: absolute; left: 0; top: .85em; width: 14px; height: 1px; background: var(--grazing); }
.pg-guide .case-block:first-of-type { margin-top: clamp(40px, 5vw, 80px); }
.legal-block .case-block__body h3 { font: 300 clamp(22px, 2vw, 28px)/1.2 var(--serif); letter-spacing: -.01em; margin-top: 8px; color: var(--lime); }
.case-block__body .pg-ol { counter-reset: pg; }
.case-block__body .pg-ol li { counter-increment: pg; padding-left: 44px; }
.case-block__body .pg-ol li::before { content: counter(pg, decimal-leading-zero); width: auto; height: auto; top: .2em; background: none; font: 500 14px/1.6 var(--sans); letter-spacing: .16em; color: var(--ash); }
.pg-sources { display: grid; gap: 6px; }
.pg-sources li { padding-left: 0 !important; overflow-wrap: anywhere; }
.pg-sources li::before { display: none; }
.case-block__body b { font-weight: 500; color: var(--lime); }
.pg-faq { padding-block: clamp(56px, 7vw, 120px) clamp(48px, 6vw, 96px); border-top: 1px solid var(--line); margin-top: clamp(24px, 4vw, 64px); }
.pg-related { padding-top: clamp(56px, 7vw, 112px); }
.pg-related h2 { font-size: clamp(28px, 3vw, 44px); line-height: 1.05; margin-bottom: 24px; }
.pg-related ul { border-top: 1px solid var(--line-2); max-width: 52em; }
.pg-related li { padding-block: 16px; border-bottom: 1px solid var(--line); color: rgba(239, 233, 221, .86); }
.pg-related + .case-cta { margin-top: clamp(56px, 7vw, 112px); }
.guide-list { padding-bottom: var(--sec); }
.guide-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 96px); border-top: 1px solid var(--line-2); }
.guide-card { position: relative; display: grid; gap: 14px; align-content: start; padding-block: clamp(28px, 3.4vw, 52px); border-bottom: 1px solid var(--line); }
.guide-card__tag { font: 500 13px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ash); }
.guide-card__t { font: 300 clamp(26px, 2.8vw, 44px)/1.08 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.guide-card__t a::after { content: ""; position: absolute; inset: 0; }
.guide-card__t a { background: linear-gradient(var(--grazing), var(--grazing)) left bottom / 0 1px no-repeat; transition: background-size .6s var(--ease); }
.guide-card:hover .guide-card__t a { background-size: 100% 1px; }
.guide-card__t a:focus-visible { outline-offset: 6px; }
.guide-card__p { color: rgba(239, 233, 221, .8); max-width: 32em; }
.guide-card__meta { font-size: 14px; color: var(--ash); }
.pg-note { margin-top: clamp(32px, 4vw, 56px); }
.services__pages { margin-top: clamp(32px, 4vw, 56px); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 28px; color: var(--ash); font-size: 15px; }
.case-cta__services { margin-top: 4px; }
@media (min-width: 900px) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
@media (max-width: 899px) {
  .pg-frames .frame { grid-column: 1 / -1; }
  .guide-cards { grid-template-columns: 1fr; }
  .byline span + span::before { margin: 0 12px; }
}
.legal.pg-guide { padding-bottom: 0; }