/* Ostra 35: the page is the colour of the studio sweep the camera was shot on.
   Everything measured, nothing round that doesn't need to be. */
@font-face { font-family: "Schibsted Grotesk"; src: url(../assets/fonts/schibsted-grotesk-normal-400-900.woff2) format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url(../assets/fonts/dm-mono-normal-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --paper: #cbc5bb; --photo: #cbc5bb; --paper-2: #bfb9ae; --paper-3: #e2dfd8; --ink: #1b1b1a; --ink-2: #47453f; --ink-3: #4b4842; --line: rgb(27 27 26 / 0.16);
  --orange: #e2582c; --orange-ink: #8c2f0e;
  --sans: "Schibsted Grotesk", system-ui, sans-serif; --mono: "DM Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.23, 1, 0.32, 1); --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --gutter: clamp(16px, 4vw, 56px); --max: 1360px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--sans); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a, button, label { -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--orange-ink); outline-offset: 3px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--ink); color: var(--paper); text-decoration: none; }
.skip:focus { top: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border: 0; border-radius: 4px; background: var(--ink); color: var(--paper-3); font: 600 15px/1 var(--sans); letter-spacing: 0.01em; text-decoration: none; cursor: pointer; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 1px 0 rgb(0 0 0 / 0.25); transition: background-color 160ms ease, transform 120ms var(--ease); }
@media (hover: hover) { .btn:hover { background: #2d2c2a; } }
.btn:active { transform: translateY(1px) scale(0.985); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn { white-space: nowrap; }
@media (max-width: 360px) { .nav__price { display: none; } }
.btn--full { width: 100%; }
.link { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-weight: 600; text-decoration: none; }
.link svg { width: 16px; height: 16px; transition: transform 220ms var(--ease); }
.link:hover svg { transform: translateY(3px); }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 32px; padding: 12px var(--gutter); background: rgb(203 197 187 / 0.9); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); border-bottom: 1px solid var(--line); }
.nav__brand { display: block; padding: 8px 0; margin-right: auto; }
.nav__brand img { width: 104px; }
.nav__links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; font-size: 14px; font-weight: 500; }
.nav__links a { display: block; padding: 12px 0; text-decoration: none; color: var(--ink-2); transition: color 150ms ease; }
.nav__links a:hover { color: var(--ink); }
.nav__price { font-family: var(--mono); font-weight: 400; opacity: 0.75; }
@media (max-width: 720px) { .nav__links { display: none; } }

/* ---------- hero ---------- */
.hero { max-width: var(--max); margin: 0 auto; padding: clamp(28px, 6vh, 72px) var(--gutter) clamp(40px, 6vh, 64px); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-areas: "text cam" "read read"; align-items: center; gap: clamp(24px, 4vw, 64px); min-height: calc(100svh - 65px); }
.hero__text { grid-area: text; }
.eyebrow { margin-top: 22px; display: flex; align-items: baseline; gap: 10px; font: 400 13px/1.45 var(--mono); letter-spacing: 0.01em; color: var(--ink-2); }
.led { flex: none; align-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px rgb(226 88 44 / 0.18); }
.hero h1 { white-space: nowrap; font-size: clamp(3.6rem, 1.4rem + 7vw, 7.6rem); line-height: 0.88; letter-spacing: -0.055em; font-weight: 700; margin: 22px 0 26px; font-variant-numeric: tabular-nums; }
.hero__lede { font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem); line-height: 1.45; max-width: 30ch; color: var(--ink-2); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 34px; }
.hero__cam { grid-area: cam; margin: 0; position: relative; }
.hero__cam img { width: 100%; max-width: 660px; margin: 0 auto; filter: drop-shadow(0 30px 28px rgb(60 52 40 / 0.28)) drop-shadow(0 6px 6px rgb(60 52 40 / 0.2)); }
.js .hero__cam img { opacity: 0; transform: translateY(18px) rotate(-1.5deg) scale(0.97); }
.js .hero.is-in .hero__cam img { opacity: 1; transform: none; transition: opacity 700ms ease, transform 1100ms var(--ease); }
.readout { grid-area: read; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--ink); }
.readout div { padding: 16px 16px 0 0; border-right: 1px solid var(--line); }
.readout div + div { padding-left: 16px; }
.readout div:last-child { border-right: 0; }
.readout dt { font: 400 11.5px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.readout dd { margin: 8px 0 0; font-size: clamp(1.3rem, 1rem + 1.2vw, 2.1rem); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.readout small { font-size: max(11px, 0.5em); font-weight: 500; margin-left: 2px; color: var(--ink-2); }
@media (max-width: 820px) {
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "cam" "read"; min-height: 0; }
  .readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .readout div:nth-child(2) { border-right: 0; }
  .readout div:nth-child(3) { padding-left: 0; }
}

/* ---------- finishes ---------- */
.finish { max-width: var(--max); margin: 0 auto; padding: clamp(72px, 12vh, 140px) var(--gutter) clamp(40px, 8vh, 120px); }
.finish__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end; }
h2 { font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); line-height: 1; letter-spacing: -0.035em; }
.finish__head p { color: var(--ink-2); max-width: 46ch; }
.finish__pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 760px; margin: 20px auto 0; padding: 0; border: 0; }
.finish__pick label { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; background: rgb(255 255 255 / 0.12); transition: border-color 200ms ease, background-color 200ms ease, transform 120ms var(--ease); }
.finish__pick label:hover { border-color: rgb(27 27 26 / 0.35); }
.finish__pick label:active { transform: scale(0.99); }
.finish__pick label:has(:checked) { border-color: var(--ink); background: rgb(255 255 255 / 0.35); }
.finish__pick label:has(:focus-visible) { outline: 2px solid var(--orange-ink); outline-offset: 3px; }
.finish__pick input, .order__swatches input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; background: var(--c); box-shadow: inset 0 1px 2px rgb(255 255 255 / 0.25), inset 0 -2px 3px rgb(0 0 0 / 0.25), 0 0 0 1px rgb(0 0 0 / 0.18); }
.finish__name { font-weight: 600; }
.finish__note { font-size: 13.5px; color: var(--ink-3); line-height: 1.35; }
@media (max-width: 760px) {
  .finish__head { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .finish__pick { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- inside: one pinned scene ---------- */
.inside { position: relative; height: 420vh; background: linear-gradient(180deg, var(--paper), var(--photo) 14%, var(--photo) 86%, var(--paper)); }
.inside__pin { position: sticky; top: 64px; height: calc(100svh - 64px); max-width: var(--max); margin: 0 auto; padding: clamp(16px, 4vh, 40px) var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 0.9fr); grid-template-areas: "head stage parts"; gap: clamp(20px, 3vw, 48px); align-items: center; }
.inside__head { grid-area: head; }
.inside__head p { margin-top: 16px; font: 400 13px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.inside__stage { grid-area: stage; position: relative; height: 100%; max-height: 680px; display: grid; place-items: center; container-type: size; overflow: clip; }
.inside__whole, .inside__apart { grid-area: 1 / 1; }
.inside__whole { width: min(92cqw, 130cqh, 660px); will-change: transform, opacity; }
.inside__apart { position: relative; margin: 0; width: min(100cqw, 100cqh * 572 / 1024, 572px); aspect-ratio: 572 / 1024; will-change: transform, opacity, filter; }
.inside__apart img { width: 100%; height: 100%; object-fit: contain; }
.js .inside__apart { opacity: 0; }
.pins { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; counter-reset: p; }
.pins li { position: absolute; left: var(--x); top: var(--y); width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--ink); color: var(--paper-3); font: 400 12px/26px var(--mono); text-align: center; box-shadow: 0 0 0 3px rgb(203 197 187 / 0.85); opacity: 0; transform: scale(0.6); transition: opacity 260ms ease, transform 420ms var(--ease), background-color 200ms ease; }
.pins li.is-on { opacity: 1; transform: none; }
.pins li.is-now { background: var(--orange); color: var(--ink); box-shadow: 0 0 0 3px rgb(203 197 187 / 0.85), 0 0 0 9px rgb(226 88 44 / 0.22); }
.parts { grid-area: parts; list-style: none; margin: 0; padding: 0; counter-reset: part; display: grid; gap: 4px; font-size: 15px; line-height: 1.45; }
.parts li { counter-increment: part; position: relative; padding: 8px 0 8px 36px; color: var(--ink-3); transition: color 250ms ease, opacity 250ms ease; }
.parts li::before { content: counter(part); position: absolute; left: 0; top: 8px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor; font: 400 11px/20px var(--mono); text-align: center; }
.parts b { color: var(--ink-2); font-weight: 600; }
.parts li.is-now { color: var(--ink); }
.parts li.is-now b { color: var(--ink); }
.parts li.is-on:not(.is-now)::before { background: var(--ink); border-color: var(--ink); color: var(--paper-3); }
.parts li.is-now::before { background: var(--orange); border-color: var(--orange); color: var(--ink); }
@media (max-width: 1000px) {
  .inside { height: 460vh; }
  .inside__pin { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "head" "stage" "parts"; gap: 12px; align-items: stretch; }
  .inside__head h2 { font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.6rem); }
  .inside__head p { margin-top: 8px; }
  .inside__stage { min-height: 0; }
  .js .parts { display: block; min-height: 5.2em; }
  .js .parts li { display: none; }
  .js .parts li.is-now, .js .parts li:first-child:not(.is-on) { display: block; opacity: 1; }
}

/* ---------- street ---------- */
.street { background: #1e1a15; color: #f1ece4; padding: clamp(56px, 10vh, 120px) var(--gutter); }
.street__in { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1024px) minmax(240px, 1fr); gap: clamp(28px, 4vw, 64px); align-items: end; }
.street__photo { margin: 0; }
.street__photo img { width: 100%; max-width: 1024px; border-radius: 6px; }
.street h2 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem); color: #f1ece4; }
.street p { margin-top: 18px; color: rgb(241 236 228 / 0.86); max-width: 40ch; }
@media (max-width: 900px) { .street__in { grid-template-columns: minmax(0, 1fr); } }

/* ---------- specs ---------- */
.specs { max-width: var(--max); margin: 0 auto; padding: clamp(72px, 12vh, 140px) var(--gutter); display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 32px; }
.specs__list { margin: 0; border-top: 1px solid var(--ink); }
.specs__list div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.specs__list dt { font: 400 12.5px/1.6 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.specs__list dd { margin: 0; }
@media (max-width: 820px) { .specs { grid-template-columns: minmax(0, 1fr); } .specs__list div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* ---------- order ---------- */
.order { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) clamp(80px, 14vh, 160px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(32px, 6vw, 96px); align-items: start; }
.order__text p { margin-top: 20px; color: var(--ink-2); max-width: 50ch; }
.order__steps { margin: 28px 0 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 12px; }
.order__steps li { counter-increment: s; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: baseline; }
.order__steps li::before { content: "0" counter(s); font: 400 13px/1 var(--mono); color: var(--orange-ink); }
.order__card { position: relative; padding: 26px; border-radius: 8px; background: var(--paper-3); box-shadow: 0 1px 0 rgb(255 255 255 / 0.6) inset, 0 24px 48px -24px rgb(60 52 40 / 0.45), 0 0 0 1px var(--line); }
.order__row { display: flex; justify-content: space-between; font-weight: 600; font-size: 1.15rem; }
.order__finish { font-weight: 500; color: var(--ink-2); }
.order__swatches { display: flex; gap: 10px; margin: 16px 0 0; padding: 0; border: 0; }
.order__swatches label { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; }
.order__swatches .sw { width: 28px; height: 28px; transition: box-shadow 200ms ease; }
.order__swatches label:has(:checked) .sw { box-shadow: inset 0 1px 2px rgb(255 255 255 / 0.25), 0 0 0 2px var(--paper-3), 0 0 0 4px var(--ink); }
.order__swatches label:has(:focus-visible) { outline: 2px solid var(--orange-ink); }
.order__sum { margin: 22px 0; border-top: 1px solid var(--line); }
.order__sum div { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.order__sum b { font-weight: 700; }
.field { display: grid; gap: 8px; font-size: 14px; font-weight: 500; }
.field input { min-height: 48px; padding: 0 14px; border-radius: 4px; border: 1px solid rgb(27 27 26 / 0.3); background: #f1efea; font: 400 16px var(--sans); color: var(--ink); transition: border-color 150ms ease, box-shadow 150ms ease; }
.field input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgb(226 88 44 / 0.3); }
.field input[aria-invalid="true"] { border-color: var(--orange-ink); }
.order__err { min-height: 1.6em; margin: 6px 0 10px; font-size: 14px; color: var(--orange-ink); }
.order__fine { margin-top: 12px; font: 400 12px/1.4 var(--mono); color: var(--ink-3); text-align: center; }
.order__done { position: absolute; inset: 0; display: grid; align-content: center; gap: 12px; padding: 32px; border-radius: 8px; background: var(--ink); color: var(--paper-3); outline: none; }
.order__done[hidden] { display: none; }
.order__ticket { font: 400 14px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: rgb(226 223 216 / 0.7); }
.order__ticket b { display: block; font: 600 4rem/1 var(--sans); letter-spacing: -0.04em; color: var(--orange); margin: 6px 0; }
.order__done:not([hidden]) { animation: shut 520ms var(--ease) both; }
@keyframes shut { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(75% at 50% 50%); } }
@media (max-width: 820px) { .order { grid-template-columns: minmax(0, 1fr); } }

/* ---------- footer ---------- */
.foot { max-width: var(--max); margin: 0 auto; padding: 40px var(--gutter) 88px; border-top: 1px solid var(--ink); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; font-size: 14px; color: var(--ink-2); }
.foot__logo { width: 96px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; margin: 0; padding: 0; }
.foot__links a { display: inline-block; padding: 10px 0; text-decoration: none; color: var(--ink); }
.foot__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 820px) { .foot { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cam { transition: none !important; }
  .js .hero__cam img { opacity: 1; transform: none; transition: none; }
  .pins li, .parts li { transition: none; }
  .order__done:not([hidden]) { animation: none; }
}
/* Arriving from the portfolio: the project's frame grows into this page (and back). */
/* ---------- Back to the portfolio + page transitions (shared with the showcase) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-group(shot) { animation-duration: 640ms; animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1); }
::view-transition-image-pair(shot) { isolation: auto; overflow: hidden; animation: zt-vt-corners 640ms cubic-bezier(0.32, 0.72, 0, 1) both; }
@keyframes zt-vt-corners { from { border-radius: 12px; } to { border-radius: 0; } }
::view-transition-old(shot), ::view-transition-new(shot) { width: 100%; height: 100%; object-fit: cover; object-position: top; mix-blend-mode: normal; }
::view-transition-old(shot) { animation: none; }
::view-transition-new(shot) { animation: zt-vt-in 340ms ease 90ms both; }
html.vt-fade::view-transition-new(root) { animation: zt-vt-in 280ms ease both; }
@keyframes zt-vt-in { from { opacity: 0; } }
/* arriving from the portfolio: the page is already at rest, as in its screenshot */
html.zt-arrive *, html.zt-arrive *::before, html.zt-arrive *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
/* folded, it is only its arrow, faint in the corner; it opens when you scroll up, come near or press Esc */
.zt-return {
  --zr-bg: #1b1b1a; --zr-ink: #e2dfd8; --zr-font: "DM Mono", monospace; --zr-radius: 4px; --zr-case: uppercase; --zr-track: 0.06em; --zr-weight: 400;
  position: fixed; z-index: 90; left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 15px 0 13px;
  background: var(--zr-bg); color: var(--zr-ink); font-family: var(--zr-font); font-size: 13px; font-weight: var(--zr-weight); letter-spacing: var(--zr-track); text-transform: var(--zr-case); line-height: 1; text-decoration: none;
  border-radius: var(--zr-radius); opacity: 0.3; clip-path: inset(0 calc(100% - 40px) 0 0 round var(--zr-radius));
  transition: opacity 220ms ease, clip-path 380ms cubic-bezier(0.23, 1, 0.32, 1), transform 140ms ease-out; -webkit-tap-highlight-color: transparent;
}
.zt-return svg { width: 14px; height: 14px; flex: none; transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1); }
.zt-return__label { opacity: 0; transition: opacity 180ms ease; white-space: nowrap; }
.zt-return__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.zt-return.is-shown, .zt-return:hover, .zt-return:focus-visible { opacity: 1; clip-path: inset(-4px round var(--zr-radius)); }
.zt-return.is-shown .zt-return__label, .zt-return:hover .zt-return__label, .zt-return:focus-visible .zt-return__label { opacity: 1; transition-delay: 60ms; }
.zt-return:focus-visible { outline: 2px solid var(--zr-bg); outline-offset: 3px; }
.zt-return:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .zt-return:hover svg { transform: translateX(-3px); } }
@media (pointer: coarse) { .zt-return { min-height: 44px; clip-path: inset(0 calc(100% - 44px) 0 0 round var(--zr-radius)); padding-left: 15px; } }
@media print { .zt-return { display: none; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*), ::view-transition-image-pair(*) { animation: none !important; }
  .zt-return, .zt-return svg, .zt-return__label { transition: opacity 120ms ease; }
}

/* every product photo melts into the grey it sits on: a soft edge, no frame, no stretching */
.hero__cam img, .inside__whole, .inside__apart img {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent); mask-composite: intersect;
}
.hero__cam img { filter: none; }

/* in the pinned scene the photos have no panel: a wide oval fade lets their lighter centre sit on the grey */
.inside__whole, .inside__apart img { -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 76%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 76%, transparent 100%); }

/* ---------- the turntable: three cameras on a circle, the chosen one at the front ----------
   Each camera's angle is one registered property, so a change travels along the circle (the one at the back
   goes round behind) and a new choice mid-turn simply retargets from wherever it is. */
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
/* the turntable runs the full width of the window, so the cameras at the sides are only ever cut by the window edge, never by a box */
.turn { position: relative; margin: clamp(28px, 5vh, 48px) calc(50% - 50vw) 0; max-width: none; height: clamp(250px, 30vw, 400px); overflow: clip; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.turn.is-dragging { cursor: grabbing; }
.turn__ring { position: absolute; inset: 0; perspective: 1400px; transform-style: preserve-3d; --R: clamp(150px, 34vw, 470px); }
.cam { --k: calc((1 - cos(var(--a))) / 2); position: absolute; left: 50%; top: 46%; width: min(433px, 62vw); margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  translate: -50% -50%;
  transform: translateX(calc(sin(var(--a)) * var(--R))) translateZ(calc(var(--k) * -560px)) rotateY(calc(sin(var(--a)) * -24deg));
  filter: blur(calc(var(--k) * 3.2px)) saturate(calc(1 - var(--k) * 0.35)) brightness(calc(1 + var(--k) * 0.06));
  opacity: calc(1 - var(--k) * 0.3);
  transition: --a 1000ms linear(0, 0.0349, 0.1191, 0.2289, 0.3474, 0.4639, 0.5715, 0.6665, 0.7476, 0.8147, 0.8687, 0.911, 0.9432, 0.9671, 0.9841, 0.9958, 1.0034, 1.008, 1.0103, 1.0111, 1.0109, 1.01, 1.0088, 1.0075, 1.0062, 1.005, 1.0039, 1.003, 1.0022, 1.0016, 1.0011, 1.0007, 1.0004, 1.0002, 1.0001, 1, 1, 1, 1, 1, 1); }
.turn.is-dragging .cam { transition: none; }
.cam img { display: block; width: 100%; height: auto; pointer-events: none; filter: drop-shadow(0 22px 18px rgb(60 52 40 / 0.26)) drop-shadow(0 4px 4px rgb(60 52 40 / 0.18)); }
.cam:focus-visible { outline: none; }
.turn__name { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font: 400 13px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 700px) { .turn { height: 62vw; min-height: 220px; } .turn__ring { --R: 40vw; } .cam { top: 44%; } }

/* ---------- film loading ---------- */
.load { max-width: var(--max); margin: 0 auto; padding: clamp(72px, 12vh, 140px) var(--gutter) 0; }
.load__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end; }
.load__head p { color: var(--ink-2); max-width: 40ch; }
.load__body { margin-top: clamp(32px, 5vh, 56px); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.counter { position: sticky; top: 96px; display: grid; justify-items: start; gap: 14px; }
.counter__label { font: 400 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.counter__win { display: block; height: 1em; overflow: hidden; font: 700 clamp(6rem, 3rem + 9vw, 11rem)/1 var(--sans); letter-spacing: -0.06em; font-variant-numeric: tabular-nums; color: var(--ink);
  padding: 0 0.12em; border-radius: 0.12em; background: var(--paper-3); box-shadow: inset 0 0.04em 0.08em rgb(0 0 0 / 0.18), 0 1px 0 rgb(255 255 255 / 0.6); }
.counter__reel { display: grid; transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1); }
.counter__reel b { display: block; height: 1em; font-weight: 700; text-align: center; }
.counter__reel b:last-child { color: var(--orange-ink); }
.load__steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.load__steps li { border-bottom: 1px solid var(--line); }
.load__steps button { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: baseline; width: 100%; min-height: 64px; padding: 18px 0; border: 0; background: none; text-align: left; font: 600 clamp(1.15rem, 1rem + 0.6vw, 1.5rem)/1.2 var(--sans); letter-spacing: -0.02em; color: var(--ink-3); cursor: pointer; transition: color 200ms ease; }
.load__steps button:hover { color: var(--ink); }
.load__n { font: 400 13px/1 var(--mono); color: var(--ink-3); }
.load__steps li.is-on button { color: var(--ink); }
.load__steps li.is-on .load__n { color: var(--orange-ink); }
.load__steps p { display: grid; grid-template-rows: 0fr; margin: 0; padding-left: 40px; color: var(--ink-2); max-width: 52ch; overflow: hidden; opacity: 0; transition: opacity 300ms ease, padding 300ms ease; height: 0; }
.load__steps li.is-on p { opacity: 1; height: auto; padding-bottom: 20px; }
@media (max-width: 820px) { .load__head, .load__body { grid-template-columns: minmax(0, 1fr); } .counter { position: static; grid-auto-flow: column; align-items: center; } .counter__win { font-size: 5rem; } }

/* ---------- comparison ---------- */
.compare { max-width: var(--max); margin: 0 auto; padding: clamp(72px, 12vh, 140px) var(--gutter) 0; }
.compare__lede { margin-top: 14px; color: var(--ink-2); }
.compare__scroll { margin-top: clamp(28px, 4vh, 44px); overflow-x: auto; overscroll-behavior-x: contain; }
.compare__scroll:focus-visible { outline: 2px solid var(--orange-ink); outline-offset: 4px; }
.compare__table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 15px; }
.compare__table th, .compare__table td { padding: 16px 18px 16px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare__table thead th { font-weight: 600; font-size: 15px; border-bottom: 1px solid var(--ink); padding-bottom: 12px; }
.compare__table tbody th { font: 400 12.5px/1.5 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); width: 22%; }
.compare__table td { color: var(--ink-2); }
.compare__table .is-us { color: var(--ink); font-weight: 600; background: linear-gradient(90deg, rgb(255 255 255 / 0.28), rgb(255 255 255 / 0.28)) no-repeat 0 0 / calc(100% - 12px) 100%; padding-left: 14px; }
.compare__table thead .is-us::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--orange); vertical-align: 1px; }

/* ---------- in the box ---------- */
.box { grid-column: 2; margin-top: 40px; }
.box h3 { font-size: 1.35rem; letter-spacing: -0.02em; }
.box__list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.box__list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
.box__q { font: 400 13px/1.5 var(--mono); color: var(--orange-ink); }
@media (max-width: 820px) { .box { grid-column: 1; } .box__list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- FAQ ---------- */
.faq { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) clamp(72px, 12vh, 140px); display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 32px; }
.faq__list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--ink); }
.faq__list div { padding: 20px 0 22px; border-bottom: 1px solid var(--line); }
.faq__list dt { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
.faq__list dd { margin: 8px 0 0; color: var(--ink-2); font-size: 15px; }
@media (max-width: 820px) { .faq { grid-template-columns: minmax(0, 1fr); } .faq__list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- a fuller order block ---------- */
.order__steps li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); counter-increment: none; }
.order__steps li::before { content: none; }
.order__when { font: 400 12.5px/1.5 var(--mono); letter-spacing: 0.04em; color: var(--orange-ink); }
.order__facts { margin: 28px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
.order__facts dt { font: 400 12px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.order__facts dd { margin: 4px 0 0; font-size: 15px; }
@media (max-width: 520px) { .order__steps li { grid-template-columns: minmax(0, 1fr); gap: 2px; } .order__facts { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .counter__reel { transition: none; } }

/* the page scrollbar: thin, in the brand accent */
html { scrollbar-width: thin; scrollbar-color: #e2582c transparent; }