/* ---------- Fonts (self-hosted, no outside requests) ---------- */
@font-face { font-family: "Archivo Black"; src: url("fonts/archivo-black.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fonts/inter-tight-wide.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono.woff2") format("woff2"); font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --putty: #ECE8E1;
  --putty-2: #E0DAD0;
  --paper: #F8F5EF;
  --hero: #EADDC7;
  --ink: #1D1A17;
  --soft: #5B554D;
  --rule: rgba(29, 26, 23, 0.2);
  --green: #1F6B4A;
  --green-deep: #17543A;
  --yellow: #F0AE1B;
  --crimson: #C4174E;
  --blue: #5E9FCB;
  --purple: #9B7BCB;

  --display: "Archivo Black", "Arial Black", "Helvetica Neue", sans-serif;
  --body: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --g: clamp(20px, 3.4vw, 64px);
  --band: clamp(72px, 9vw, 150px);
  --top-h: 72px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--putty); scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + 8px); -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--putty); color: var(--ink); font: 450 18px/1.5 var(--body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body.locked { overflow: hidden; }
main { overflow-x: clip; }
h1, h2, h3, p, ul, ol, dl, dd, figure, address { margin: 0; padding: 0; font-style: normal; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img, video, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 4px; }
.wrap { padding-inline: var(--g); }
.nowrap { white-space: nowrap; }
.skip { position: fixed; left: 12px; top: 12px; z-index: 100; padding: 10px 16px; background: var(--ink); color: var(--paper); border-radius: 999px; font-weight: 600; transform: translateY(-220%); }
.skip:focus { transform: none; }

h1, h2, .display { font-family: var(--display); font-weight: 400; letter-spacing: -0.028em; line-height: 1.02; }
h2 { font-size: clamp(2.3rem, 5.4vw, 5.6rem); text-wrap: balance; }
.eyebrow { font: 700 13px/1.3 var(--body); letter-spacing: 0.09em; text-transform: uppercase; }

/* ---------- The marks: five materials, one job ---------- */
.u { position: relative; }
.u .w { position: relative; display: inline-block; }
h1, h2, h3, .make-list, .promises li, .amount, .nav a, .view-info h2 { isolation: isolate; }
.mk { position: absolute; left: -16px; top: 85%; z-index: -1; max-width: none; overflow: visible; pointer-events: none; }
.mk-crayon { color: var(--line, var(--green)); }
.mk-clay { color: var(--line, #D2622A); top: 82%; }
.mk-neon { color: var(--line, #E8315B); top: 80%; }
.mk-paper { color: var(--line, var(--yellow)); }
.mk-vector { color: var(--line, #2A6FDB); top: 84%; }
.mk .dash, .mk-ring .dash { transition: stroke-dashoffset var(--dur, 0.5s) ease-out var(--delay, 0s); }
.drawn .mk .dash { stroke-dashoffset: 0 !important; }
.mk-clay .dash { transition-timing-function: cubic-bezier(0.3, 1.3, 0.5, 1); transition-duration: 0.7s; }
.mk-clay .thumb { opacity: 0; transition: opacity 0.25s 0.75s; }
.drawn .mk-clay .thumb { opacity: 1; }
.mk-neon .tube { opacity: 0; }
.drawn .mk-neon .tube { animation: neon-on 0.9s steps(1, end) forwards; }
@keyframes neon-on { 0% { opacity: 0; } 8% { opacity: 1; } 16% { opacity: 0.15; } 24% { opacity: 1; } 40% { opacity: 0.35; } 52%, 100% { opacity: 1; } }
.mk-paper .strip { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0) rotate(-3deg); transition: transform 0.55s var(--spring); }
.drawn .mk-paper .strip { transform: scaleX(1) rotate(0); }
.mk-ring { position: absolute; left: -14px; top: -14px; max-width: none; overflow: visible; pointer-events: none; color: var(--ink-c, var(--green)); }
a:hover > .watch .mk-ring .dash, a:focus-visible > .watch .mk-ring .dash { stroke-dashoffset: 0 !important; }
.tick { flex: none; width: 24px; height: 22px; overflow: visible; }
.tick-crayon { color: var(--green); } .tick-clay { color: #D2622A; } .tick-neon { color: #E8315B; } .tick-paper { color: var(--yellow); } .tick-vector { color: #2A6FDB; }

/* ---------- Buttons and chips ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 60px; padding: 0 30px; border-radius: 999px;
  background: var(--green); color: var(--paper);
  font: 700 19px/1 var(--body); letter-spacing: -0.01em; white-space: nowrap;
  transition: background-color 0.25s var(--ease), transform 0.35s var(--spring);
}
.btn:hover { background: var(--green-deep); transform: rotate(-1.5deg) scale(1.03); }
.btn:active { transform: scale(0.97); }
.btn .arrow { display: inline-block; transition: transform 0.35s var(--spring); }
.btn:hover .arrow { transform: translateX(6px); }
.btn-small { height: 46px; padding: 0 22px; font-size: 16px; }
.text-link { position: relative; font-weight: 700; padding: 6px 0; border-bottom: 2.5px solid var(--ink); transition: color 0.2s, border-color 0.2s; white-space: nowrap; }
.text-link:hover { color: var(--green); border-color: var(--green); }
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 17px 0 14px;
  border-radius: 999px; border: 2px solid var(--ink); background: transparent;
  font: 700 15px/1 var(--body); white-space: nowrap; transition: background-color 0.2s, color 0.2s, transform 0.3s var(--spring);
}
.chip:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.chip svg { width: 11px; height: 11px; fill: currentColor; flex: none; }
.chip-solid { background: var(--ink); color: var(--paper); }
.chip-solid:hover { background: var(--green); border-color: var(--green); }
.chip .i-play { display: none; }
.chip[aria-pressed="true"] .i-play { display: block; }
.chip[aria-pressed="true"] .i-pause { display: none; }

/* ---------- 0. Header ---------- */
.top {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 28px;
  height: var(--top-h); padding-inline: var(--g); background: var(--putty);
  transition: box-shadow 0.4s var(--ease);
}
.top.scrolled { background: rgba(236, 232, 225, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--rule); }
.mark { display: inline-flex; align-items: center; gap: 9px; font: 400 21px/1 var(--display); letter-spacing: -0.03em; white-space: nowrap; min-width: 0; }
a.mark::before, p.mark::before { content: ""; flex: none; width: 15px; height: 15px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--crimson); transition: transform 0.5s var(--spring); }
a.mark:hover::before { transform: translateY(-5px) rotate(20deg); }
a.mark span, p.mark span { overflow: hidden; text-overflow: ellipsis; }
.nav { display: flex; gap: clamp(16px, 2.2vw, 34px); margin-left: auto; font-weight: 600; font-size: 16px; }
.nav a { position: relative; padding: 8px 0; }
.nav a .mk { top: 70%; }

/* ---------- 1. First screen ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: center;
  padding: clamp(10px, 2vh, 26px) var(--g) clamp(34px, 5vh, 60px);
}
.hello { font-weight: 600; font-size: clamp(1.05rem, 1.35vw, 1.4rem); letter-spacing: -0.01em; }
h1 { margin-top: 12px; font-size: clamp(2.3rem, 3.95vw, 4.5rem); line-height: 1.09; }
h1.long { font-size: clamp(2.1rem, 3.4vw, 3.9rem); }
.styles { margin-top: clamp(16px, 1.8vw, 26px); max-width: 30em; font-size: clamp(1.08rem, 1.4vw, 1.4rem); line-height: 1.4; font-weight: 500; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: clamp(20px, 2.2vw, 30px); }
.ticks { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: clamp(20px, 2.4vw, 34px); font-weight: 600; font-size: 16px; }
.ticks li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.hero-film { min-width: 0; padding: 26px 10px 0 0; }
/* the montage sits in a tilted screen on a slab of the current film's colour, with a tab naming the style */
.hero-stage { position: relative; transform: rotate(1.4deg); --slab: var(--green); }
.hero-slab { position: absolute; inset: 0; border-radius: 30px 30px 30px 96px; background: var(--slab); transform: translate(14px, 14px) rotate(-2.2deg); transition: background-color 0.35s var(--ease), transform 0.6s var(--spring); }
.hero-film:hover .hero-slab { transform: translate(18px, 18px) rotate(-3.2deg); }
.hero-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 30px 30px 30px 96px; background: #000; }
.hero-frame img, .hero-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-frame video { opacity: 0; transition: opacity 0.4s; }
.hero-frame video.on { opacity: 1; }
.hero-tab { position: absolute; left: 34px; top: -19px; height: 40px; padding: 0 18px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--paper); box-shadow: 0 0 0 3px var(--slab); font: 400 16px/1 var(--display); letter-spacing: -0.01em; white-space: nowrap; transform: rotate(-3deg); transition: box-shadow 0.35s var(--ease); }
.hero-tab:empty { display: none; }
.hero-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 34px 0 0 6px; }
.hero-dots { display: flex; gap: 6px; margin-right: 8px; }
.dot { width: 34px; height: 26px; display: grid; align-items: center; }
.dot i { display: block; height: 7px; border-radius: 7px; background: rgba(29, 26, 23, 0.16); overflow: hidden; position: relative; transition: height 0.3s var(--spring); }
.dot:hover i { height: 11px; }
.dot i::after { content: ""; position: absolute; inset: 0; background: var(--c); transform: scaleX(0); transform-origin: 0 50%; }
.dot.on i::after { animation: fill var(--len, 2.5s) linear forwards; }
.paused .dot.on i::after, .dot.on.hold i::after { animation-play-state: paused; }
@keyframes fill { to { transform: scaleX(1); } }
.hero-caption { flex-basis: 100%; margin-top: 2px; font-size: 14.5px; font-weight: 500; color: var(--soft); }
.all-films { padding: 34px var(--g) 0; text-align: center; background: var(--putty); }

/* ---------- 2. The films: one per band ---------- */
.film { background: var(--tint, var(--putty)); padding: clamp(56px, 7vw, 116px) 0 0; }
.film-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 40px); align-items: center; }
.film-media { position: relative; display: block; grid-column: 1 / span 8; grid-row: 1; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.film-text { grid-column: 9 / -1; grid-row: 1; padding-right: var(--g); }
.film.flip .film-media { grid-column: 5 / -1; }
.film.flip .film-text { grid-column: 1 / span 4; padding: 0 0 0 var(--g); }
.film-media img, .film-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease), opacity 0.5s; }
.film-media video { opacity: 0; }
.film-media video.on { opacity: 1; }
.film-media:hover img, .film-media:hover video { transform: scale(1.025); }
.watch {
  position: absolute; left: clamp(14px, 1.6vw, 26px); bottom: clamp(14px, 1.6vw, 26px);
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px 0 16px; border-radius: 999px;
  background: var(--paper); color: var(--ink); font-weight: 700; font-size: 16px;
  transition: transform 0.4s var(--spring);
}
.watch svg:first-child { width: 12px; height: 12px; fill: currentColor; }
.film-media:hover .watch, .film-media:focus-visible .watch { transform: rotate(-3deg) scale(1.06); }

.tag { display: inline-block; font: 700 14px/1 var(--body); white-space: nowrap; }
.tag-crayon { position: relative; padding: 10px 16px 11px; color: var(--paper); transform: rotate(-2.5deg); z-index: 0; font-size: 15px; }
.tag-crayon::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink-c); clip-path: polygon(1% 12%, 34% 2%, 71% 7%, 99% 0, 97% 52%, 100% 93%, 62% 100%, 28% 94%, 0 100%, 3% 48%); filter: url(#crayon-fill); }
.tag-clay { position: relative; padding: 11px 18px 12px; color: #fff; z-index: 0; font-size: 15px; transform: rotate(-1.5deg); }
.tag-clay::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink-c); border-radius: 22px 26px 20px 28px / 24px 20px 26px 22px; filter: url(#clay); }
.tag-vector { padding: 10px 16px 10px 13px; border-radius: 999px; background: var(--ink-c); color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.tag-vector::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); }
.tag-paper { padding: 10px 16px; background: var(--ink-c); color: #fff; filter: url(#paper); transform: rotate(-2deg); clip-path: polygon(0 4%, 100% 0, 98% 100%, 2% 96%); }
.tag-neon { position: relative; padding: 10px 14px; font: 500 12.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #12243a;
  background: linear-gradient(#12243a, #12243a) 0 0 / 9px 1.5px, linear-gradient(#12243a, #12243a) 0 0 / 1.5px 9px, linear-gradient(#12243a, #12243a) 100% 100% / 9px 1.5px, linear-gradient(#12243a, #12243a) 100% 100% / 1.5px 9px; background-repeat: no-repeat; display: inline-flex; align-items: center; gap: 9px; }
.tag-neon::before { content: ""; width: 7px; height: 7px; background: var(--ink-c); box-shadow: 0 0 8px var(--ink-c); animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.15; } }

.film-title { margin-top: 22px; font: 400 clamp(1.9rem, 3.5vw, 3.7rem)/1.1 var(--display); letter-spacing: -0.028em; }
.film-brief { margin-top: clamp(18px, 2vw, 28px); font-size: clamp(1.02rem, 1.2vw, 1.2rem); line-height: 1.45; max-width: 26em; }
.film-go { display: inline-block; margin-top: clamp(18px, 2vw, 28px); }
.facts { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 40px); margin: clamp(28px, 3.4vw, 52px) var(--g) 0; padding: 18px 0 clamp(40px, 5vw, 76px); border-top: 2px solid var(--ink); }
.facts > div { grid-column: span 2; }
.facts > .concept-cell { grid-column: span 4; }
.facts > .style-cell { grid-column: span 3; }
.facts > .price-cell { grid-column: span 3; }
.facts.has-days > .concept-cell { grid-column: span 3; }
.facts.has-days > .style-cell { grid-column: span 3; }
.facts.has-days > .price-cell { grid-column: span 2; }
.facts dt { font: 700 12.5px/1.3 var(--body); letter-spacing: 0.09em; text-transform: uppercase; color: var(--soft); }
.facts dd { margin-top: 6px; font: 400 clamp(1.15rem, 1.75vw, 1.7rem)/1.1 var(--display); letter-spacing: -0.02em; }
.facts .price-cell { text-align: right; }
.facts .price-cell dd { font-size: clamp(1.9rem, 3.3vw, 3.4rem); line-height: 0.95; }
.concept { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.concept::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-c, var(--crimson)); }
.concept-cell .concept { margin-top: 4px; }

/* ---------- Bands ---------- */
.band { padding: var(--band) 0; }
.head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 40px); align-items: end; row-gap: 20px; }
.head h2 { grid-column: 1 / span 8; }
.head-side { grid-column: 9 / -1; font-size: clamp(1.05rem, 1.3vw, 1.3rem); line-height: 1.42; font-weight: 500; padding-bottom: 0.5em; }

/* What people ask us for */
.make { background: var(--putty); }
.make-list { margin-top: 26px; font: 400 clamp(1.9rem, 5.2vw, 5.5rem)/1.16 var(--display); letter-spacing: -0.03em; }
.make-list .u { transition: color 0.3s; }
.make-after { margin-top: clamp(28px, 3vw, 44px); max-width: 34em; font-size: clamp(1.05rem, 1.3vw, 1.3rem); line-height: 1.42; font-weight: 500; }

/* 3. Prices */
.prices { background: var(--putty-2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.calc { --line: var(--yellow); --thumb: 38px; margin-top: clamp(40px, 5vw, 80px); padding: clamp(22px, 3.2vw, 56px); background: var(--paper);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(28px, 4.4vw, 80px); grid-template-areas: "len price" "facts price" "extras foot"; }
.calc-length { grid-area: len; }
.calc-secs { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; font: 400 clamp(3rem, 5.6vw, 5.4rem)/1 var(--display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.calc-secs span { font: 700 clamp(1.05rem, 1.5vw, 1.4rem)/1 var(--body); letter-spacing: 0; }
.calc-slide { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; }
.calc-rail { flex: 1; min-width: 0; }
.calc-range { --p: 0; display: block; width: 100%; height: 48px; margin: 0; padding: 0; background: transparent; cursor: grab; appearance: none; -webkit-appearance: none; touch-action: pan-y; }
.calc-range:active { cursor: grabbing; }
.calc-range:focus-visible { outline: none; }
.calc-range::-webkit-slider-runnable-track { box-sizing: border-box; height: 14px; border: 2px solid var(--ink); border-radius: 999px; background: linear-gradient(to right, var(--green) calc(var(--thumb) / 2 + var(--p) * (100% - var(--thumb))), var(--putty) 0); }
.calc-range::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; width: var(--thumb); height: var(--thumb); margin-top: -14px; border: 3px solid var(--ink); border-radius: 50%; background: var(--yellow); box-shadow: 0 3px 0 rgba(29, 26, 23, 0.2); transition: transform 0.3s var(--spring), box-shadow 0.2s; }
.calc-range::-moz-range-track { box-sizing: border-box; height: 14px; border: 2px solid var(--ink); border-radius: 999px; background: var(--putty); }
.calc-range::-moz-range-progress { height: 14px; border-radius: 999px 0 0 999px; background: var(--green); border: 2px solid var(--ink); border-right: 0; box-sizing: border-box; }
.calc-range::-moz-range-thumb { box-sizing: border-box; width: var(--thumb); height: var(--thumb); border: 3px solid var(--ink); border-radius: 50%; background: var(--yellow); box-shadow: 0 3px 0 rgba(29, 26, 23, 0.2); }
.calc-range:hover::-webkit-slider-thumb, .calc-range:active::-webkit-slider-thumb { transform: scale(1.12) rotate(-6deg); }
.calc-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(31, 107, 74, 0.35); }
.calc-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 5px rgba(31, 107, 74, 0.35); }
.calc-scale { position: relative; height: 20px; margin: 0 calc(var(--thumb) / 2); font: 700 12.5px/1 var(--body); letter-spacing: 0.04em; color: var(--soft); }
.calc-scale li { position: absolute; left: calc(var(--at) * 100%); top: 0; transform: translateX(-50%); white-space: nowrap; padding-top: 9px; }
.calc-scale li::before { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 6px; margin-left: -1px; background: var(--soft); }
.calc-longer { margin-top: 18px; font-size: 15.5px; font-weight: 500; color: var(--soft); }
.calc-price { grid-area: price; align-self: start; position: sticky; top: calc(var(--top-h) + 24px); }
.calc .amount { margin-top: 10px; font: 400 clamp(4.2rem, 8.4vw, 8.8rem)/0.92 var(--display); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc .amount .mk { top: 88%; }
.calc-lines { margin-top: clamp(26px, 3vw, 44px); border-top: 2px solid var(--ink); }
.calc-lines li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 16.5px; font-weight: 500; }
.calc-lines b { font-weight: 800; font-variant-numeric: tabular-nums; }
.calc-lines .calc-how { display: block; border-bottom: 0; font-size: 15px; color: var(--soft); }
.calc-facts { grid-area: facts; margin-top: clamp(26px, 3vw, 44px); border-top: 2px solid var(--ink); }
.calc-facts div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.calc-facts dt, .calc-extras legend { font: 700 12.5px/1.3 var(--body); letter-spacing: 0.09em; text-transform: uppercase; color: var(--soft); }
.calc-facts dd { font-size: 16.5px; line-height: 1.4; font-weight: 500; }
.calc-facts dd a, .quote a, .quote button { font-weight: 700; border-bottom: 2px solid currentColor; transition: color 0.2s; }
.calc-facts dd a:hover, .quote a:hover, .quote button:hover { color: var(--green); }
.calc-extras { grid-area: extras; min-width: 0; margin: clamp(30px, 3.4vw, 50px) 0 0; padding: 0; border: 0; }
.calc-extras legend { padding: 0 0 10px; color: var(--ink); font-size: 13px; }
.extra { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 18px; padding: 14px 0; border-top: 1px solid var(--rule); }
.extra:last-child { border-bottom: 1px solid var(--rule); }
#extra-language { grid-template-columns: auto minmax(0, 1fr) auto; }
.extra b { display: block; font-weight: 700; font-size: 17px; line-height: 1.25; }
.extra small { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.35; font-weight: 500; color: var(--soft); }
.extra-price { font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper .round { width: 40px; height: 40px; }
.stepper input { width: 52px; height: 40px; margin: 0 2px; padding: 0; text-align: center; border: 2px solid transparent; border-radius: 10px; background: transparent; font: 400 22px/1 var(--display); font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:hover { border-color: var(--rule); }
.stepper input:focus { outline: none; border-color: var(--green); background: #fff; box-shadow: 0 0 0 4px rgba(31, 107, 74, 0.25); }
.calc-foot { grid-area: foot; align-self: end; padding-top: 30px; }
.calc-foot p { margin-top: 12px; font-size: 15.5px; font-weight: 500; color: var(--soft); }
.calc-foot .calc-again { display: none; margin: 0 0 14px; font-size: 17px; font-weight: 700; color: var(--ink); }
.calc-again b { font: 400 1.7rem/1 var(--display); letter-spacing: -0.03em; margin-left: 8px; font-variant-numeric: tabular-nums; }
.included { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 40px); margin-top: clamp(44px, 5vw, 80px); align-items: start; }
.included h3 { grid-column: 1 / span 3; padding-top: 10px; }
.included ul { grid-column: 4 / -1; display: flex; flex-wrap: wrap; gap: 6px clamp(18px, 2.2vw, 36px); font: 400 clamp(1.3rem, 2.3vw, 2.4rem)/1.2 var(--display); letter-spacing: -0.025em; }
.included li { display: inline-flex; align-items: center; gap: 8px; }
.included .tick { width: 30px; height: 28px; }
.smallprint { margin: 26px 0 0; padding-left: calc(25% + clamp(4px, 0.6vw, 10px)); font-size: 16.5px; line-height: 1.5; font-weight: 500; max-width: none; }
.smallprint p + p { margin-top: 6px; }
.smallprint b { font-weight: 800; }

/* 4. How it works: a track of nine cards you scroll sideways */
.how { background: var(--putty); padding-bottom: clamp(56px, 7vw, 110px); }
.track-bar { display: flex; align-items: center; gap: 24px; margin-top: clamp(34px, 4vw, 60px); }
.rail { flex: 1; display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; }
.rail li { height: 8px; border-radius: 8px; background: rgba(29, 26, 23, 0.14); position: relative; overflow: hidden; }
.rail li::after { content: ""; position: absolute; inset: 0; background: var(--c, var(--ink)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.5s var(--ease); }
.rail li.on::after { transform: scaleX(1); }
.seg-clay { --c: #D2622A; } .seg-vector { --c: #2A6FDB; } .seg-neon { --c: #E8315B; } .seg-paper { --c: var(--yellow); } .seg-crayon { --c: var(--green); }
.track-nav { display: flex; align-items: center; gap: 10px; flex: none; }
.track-count { font: 400 18px/1 var(--display); min-width: 3.4em; text-align: right; margin-right: 6px; font-variant-numeric: tabular-nums; }
.round { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; transition: background-color 0.2s, color 0.2s, transform 0.3s var(--spring), opacity 0.2s; }
.round svg { width: 16px; height: 16px; }
.round:hover:not(:disabled) { background: var(--ink); color: var(--paper); transform: scale(1.08); }
.round:disabled { opacity: 0.3; cursor: default; }
.track { display: flex; gap: clamp(14px, 1.8vw, 28px); margin-top: 22px; padding: 14px var(--g) 26px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--g); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.track::-webkit-scrollbar { display: none; }
.track:focus-visible { outline-offset: -4px; }
.step { flex: 0 0 clamp(270px, 27vw, 400px); scroll-snap-align: start; }
.art { position: relative; aspect-ratio: 4 / 3; background: var(--paper); overflow: hidden; transition: transform 0.6s var(--spring), opacity 0.5s; }
.step:nth-child(odd) .art { transform: rotate(-1.4deg); }
.step:nth-child(even) .art { transform: rotate(1.1deg); }
.track.awake .step.now .art, .step:hover .art { transform: rotate(0) scale(1.02); }
.step:not(.seen) .art { opacity: 0.55; }
.step:not(.seen) .num, .step:not(.seen) h3, .step:not(.seen) > p { opacity: 0.45; }
.step .num, .step h3, .step > p { transition: opacity 0.5s; }
.art img { position: absolute; object-fit: cover; }
.art-brief { display: flex; flex-direction: column; justify-content: center; gap: 11%; padding: 0 12%; }
.art-brief p { display: flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); white-space: nowrap; }
.art-brief i { flex: 1; height: 9px; border-radius: 9px; background: var(--putty-2); position: relative; overflow: hidden; }
.art-brief i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.9s var(--ease) 0.2s; }
.seen .art-brief p:nth-child(1) i::after { transform: scaleX(0.66); }
.seen .art-brief p:nth-child(2) i::after { transform: scaleX(0.4); transition-delay: 0.5s; }
.seen .art-brief p:nth-child(3) i::after { transform: scaleX(0.82); transition-delay: 0.8s; }
.art-quote { background: var(--putty-2); display: grid; place-items: center; }
.slip { position: relative; width: 74%; padding: 16px 18px 14px; background: var(--paper); transform: rotate(-2deg); box-shadow: 0 3px 0 rgba(29, 26, 23, 0.1); }
.slip b { display: block; font: 400 15px/1 var(--display); padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.slip p { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--rule); font-size: 13px; font-weight: 600; }
.slip p span:first-child { color: var(--soft); font-weight: 500; }
.slip em { position: absolute; right: -14px; bottom: -14px; padding: 7px 12px; font: 400 15px/1 var(--display); font-style: normal; text-transform: uppercase; color: var(--crimson); border: 3px solid var(--crimson); border-radius: 8px; background: var(--paper); transform: rotate(-9deg) scale(0); transition: transform 0.5s var(--spring) 0.5s; }
.seen .slip em { transform: rotate(-9deg) scale(1); }
.art-script { background: var(--putty-2); display: grid; place-items: center; }
.page { width: 66%; height: 86%; margin-top: 10%; padding: 14px 16px; background: var(--paper); display: flex; flex-direction: column; gap: 7px; transform: rotate(1.5deg); }
.page b { font: 500 10.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; }
.page i { height: 6px; border-radius: 6px; background: var(--putty-2); }
.page i.short { width: 58%; }
.page q { font: 600 13px/1.3 var(--body); quotes: "“" "”"; background: linear-gradient(transparent 55%, rgba(240, 174, 27, 0.55) 0) 0 0 / 0 100% no-repeat; transition: background-size 0.8s var(--ease) 0.4s; align-self: flex-start; }
.seen .page q { background-size: 100% 100%; }
.art-frames, .art-sizes, .art-board { background: var(--putty-2); }
.art-frames img:nth-child(1) { left: 6%; top: 9%; width: 62%; aspect-ratio: 16 / 9; height: auto; transform: rotate(-3deg); box-shadow: 0 0 0 5px var(--paper); }
.art-frames img:nth-child(2) { right: 6%; bottom: 9%; width: 62%; aspect-ratio: 16 / 9; height: auto; transform: rotate(2.5deg); box-shadow: 0 0 0 5px var(--paper); }
.art-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 13% 7%; align-content: center; }
.art-board img { position: static; width: 100%; height: auto; aspect-ratio: 16 / 9; box-shadow: 0 0 0 3px var(--paper); opacity: 0; transform: translateY(8px); transition: opacity 0.4s, transform 0.5s var(--spring); }
.seen .art-board img { opacity: 1; transform: none; }
.step:nth-child(2) .art, .step:nth-child(2) .num { transition-delay: 0.12s; } .step:nth-child(3) .art, .step:nth-child(3) .num { transition-delay: 0.24s; } .step:nth-child(4) .art, .step:nth-child(4) .num { transition-delay: 0.36s; }
.art-board img:nth-child(2) { transition-delay: 0.1s; } .art-board img:nth-child(3) { transition-delay: 0.2s; } .art-board img:nth-child(4) { transition-delay: 0.3s; } .art-board img:nth-child(5) { transition-delay: 0.4s; } .art-board img:nth-child(6) { transition-delay: 0.5s; }
.art-voice { display: flex; flex-direction: column; justify-content: center; gap: 9%; padding: 0 9%; }
.art-voice p { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; border: 2px solid transparent; font: 700 13px/1 var(--body); white-space: nowrap; }
.art-voice .wave { position: static; flex: 1; height: 22px; padding: 0; background: none; }
.art-voice .wave i { background: var(--soft); animation: none; }
.art-voice u { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ink); }
.seen .art-voice .picked { border-color: var(--ink); background: #fff; transition: border-color 0.3s 0.6s, background-color 0.3s 0.6s; }
.seen .art-voice .picked u { background: radial-gradient(var(--ink) 45%, transparent 50%); transition: background 0.1s 0.6s; }
.seen .art-voice .picked .wave i { background: #D2622A; animation: wave 1.1s ease-in-out infinite alternate; }
.art-anim img, .art-anim video { inset: 0; width: 100%; height: 100%; }
.art-anim video { position: absolute; object-fit: cover; opacity: 0; transition: opacity 0.4s; }
.art-anim video.on { opacity: 1; }
.keys { position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: var(--paper); display: flex; align-items: center; justify-content: space-around; padding: 0 8%; }
.keys::before { content: ""; position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: var(--rule); }
.keys i { position: relative; width: 11px; height: 11px; background: var(--ink); transform: rotate(45deg); }
.keys b { position: absolute; top: 12%; bottom: 12%; left: 6%; width: 3px; background: #2A6FDB; animation: scrub 4s linear infinite; }
@keyframes scrub { to { left: 94%; } }
.art-sound img { inset: 0; width: 100%; height: 100%; }
.wave { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; display: flex; align-items: center; gap: 3px; padding: 0 7%; background: var(--paper); }
.wave i { flex: 1; border-radius: 3px; background: #E8315B; height: 30%; animation: wave 1.3s ease-in-out infinite alternate; }
.wave i:nth-child(3n) { height: 78%; animation-delay: -0.4s; }
.wave i:nth-child(4n+1) { height: 52%; animation-delay: -0.9s; }
.wave i:nth-child(5n+2) { height: 92%; animation-delay: -0.2s; }
.wave i:nth-child(7n) { height: 18%; animation-delay: -1.1s; }
@keyframes wave { to { transform: scaleY(0.35); } }
.art-sizes img[data-size="wide"] { left: 5%; top: 12%; width: 56%; aspect-ratio: 16 / 9; height: auto; box-shadow: 0 0 0 4px var(--paper); }
.art-sizes img[data-size="tall"] { right: 6%; top: 8%; height: 84%; width: auto; aspect-ratio: 9 / 16; box-shadow: 0 0 0 4px var(--paper); transform: rotate(3deg); }
.art-sizes img[data-size="square"] { left: 22%; bottom: 8%; width: 34%; height: auto; aspect-ratio: 1; box-shadow: 0 0 0 4px var(--paper); transform: rotate(-4deg); }
.num { display: block; margin-top: 24px; font: 400 clamp(3.4rem, 5vw, 5.4rem)/0.85 var(--display); letter-spacing: -0.04em; width: max-content; }
.num-crayon { color: var(--green); filter: url(#crayon-fill); }
.num-clay { color: #D2622A; filter: url(#clay); }
.num-neon { color: #fff; -webkit-text-stroke: 3px #E8315B; paint-order: stroke fill; filter: url(#neon); }
.num-paper { color: var(--yellow); filter: url(#paper); transform: rotate(-4deg); }
.num-vector { color: #2A6FDB; text-shadow: 4px 4px 0 var(--ink); }
.step h3 { margin-top: 14px; font: 400 clamp(1.2rem, 1.6vw, 1.55rem)/1.1 var(--display); letter-spacing: -0.02em; }
.step > p { margin-top: 10px; font-size: 16.5px; line-height: 1.45; }
.art-credit { margin-top: 6px; font-size: 14.5px; color: var(--soft); }

/* 5. The promise: the one band in the accent colour */
.promise { background: var(--green); color: var(--paper); padding: var(--band) 0; }
.promises { margin-top: 26px; counter-reset: p; }
.promises li { font: 400 clamp(1.8rem, 4.5vw, 4.7rem)/1.1 var(--display); letter-spacing: -0.03em; max-width: 17em; }
.promises li + li { margin-top: 0.42em; }
.promise { --line: var(--yellow); }
.promise .mk-neon { --line: #FFD1DC; }

/* 6. About */
.about { background: var(--putty-2); }
.about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.about-grid.no-pic { grid-template-columns: minmax(0, 1fr); }
.about-pic img { width: 100%; height: auto; transform: rotate(-2deg); }
.about-lines { margin-top: 24px; font-size: clamp(1.15rem, 1.6vw, 1.6rem); line-height: 1.42; font-weight: 500; max-width: 30em; }

/* 7. Questions */
.questions { background: var(--putty); }
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 40px); align-items: start; }
.split-head { grid-column: 1 / span 5; position: sticky; top: calc(var(--top-h) + 28px); }
.split-head > p { margin-top: 22px; max-width: 24em; font-size: clamp(1.05rem, 1.3vw, 1.3rem); line-height: 1.42; font-weight: 500; }
.faq, .form { grid-column: 7 / -1; }
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 2px solid var(--ink); }
.faq summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; font: 400 clamp(1.15rem, 1.7vw, 1.6rem)/1.15 var(--display); letter-spacing: -0.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 26px; height: 26px; margin-top: 2px; background: linear-gradient(var(--ink), var(--ink)) center / 100% 4px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 4px 100% no-repeat; transition: transform 0.4s var(--spring); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--green); }
.faq details p { padding: 0 46px 26px 0; font-size: 18px; line-height: 1.5; max-width: 36em; }
.faq details[open] p { animation: ans 0.4s var(--ease); }
@keyframes ans { from { opacity: 0; transform: translateY(-6px); } }

/* 8. Start a film */
.start { background: var(--hero); }
.next { margin-top: 30px; counter-reset: n; display: grid; gap: 10px; font-weight: 600; }
.next li { counter-increment: n; display: flex; gap: 12px; }
.next li::before { content: counter(n); flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--hero); display: grid; place-items: center; font-size: 14px; font-weight: 800; }
.contact-lines { margin-top: 26px; font-weight: 600; }
.contact-lines a { border-bottom: 2px solid currentColor; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px clamp(16px, 2.4vw, 40px); padding-top: 8px; }
.field { display: flex; flex-direction: column; min-width: 0; }
.wide { grid-column: 1 / -1; }
.field label, .field-label { font-weight: 700; font-size: 16px; }
.quote { margin-top: 8px; padding: 13px 16px; border: 2px dashed var(--ink); border-radius: 10px; font-size: 16.5px; line-height: 1.4; font-weight: 500; }
.quote > b { display: block; font-size: 18px; font-weight: 800; }
.quote > span { display: block; }
.quote > .quote-acts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px; }
.optional { font-weight: 500; color: var(--soft); margin-left: 6px; font-size: 14.5px; }
.field input, .field textarea, .field select {
  width: 100%; margin: 8px 0 0; padding: 14px 16px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper);
  font-size: 18px; line-height: 1.35; font-weight: 500; appearance: none; -webkit-appearance: none; transition: box-shadow 0.2s, border-color 0.2s;
}
.field textarea { resize: vertical; min-height: 128px; display: block; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(31, 107, 74, 0.25); }
.field [aria-invalid="true"] { border-color: var(--crimson); }
.select { position: relative; }
.select::after { content: ""; position: absolute; right: 18px; top: calc(50% + 2px); width: 9px; height: 9px; border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: translateY(-50%) rotate(45deg); pointer-events: none; }
.select select { padding-right: 44px; cursor: pointer; text-overflow: ellipsis; }
.error { margin-top: 7px; font-size: 15px; font-weight: 600; color: var(--crimson); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }
.form-note { flex: 1 1 260px; font-weight: 600; font-size: 16.5px; line-height: 1.4; max-width: 28em; }
.form-note:empty { display: none; }
.form-note.bad { color: var(--crimson); }
.form .btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-privacy { margin-top: -8px; font-size: 15px; font-weight: 500; color: var(--soft); }
.form-privacy a, .sent .text-link { color: var(--ink); }
.form-privacy a { font-weight: 700; border-bottom: 2px solid currentColor; }
.sent { grid-column: 7 / -1; padding: clamp(24px, 3vw, 44px); background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; }
.sent:focus { outline: none; }
.sent h3 { font: 400 clamp(1.4rem, 2.2vw, 2.1rem)/1.12 var(--display); letter-spacing: -0.02em; }
.sent p { margin: 14px 0 22px; font-size: 18px; line-height: 1.45; font-weight: 500; max-width: 30em; overflow-wrap: anywhere; }
.sent .text-link { font-size: 17px; }
.form-note a { border-bottom: 2px solid currentColor; }

/* ---------- 9. Footer ---------- */
.foot { background: var(--green); color: var(--paper); padding: clamp(44px, 6vw, 90px) 0 clamp(26px, 3vw, 40px); overflow: hidden; }
.foot-mark { font: 400 clamp(3.2rem, 13.4vw, 15.5rem)/0.86 var(--display); letter-spacing: -0.055em; white-space: nowrap; }
.foot-mark.long { font-size: clamp(2.4rem, 8vw, 9rem); white-space: normal; }
.foot-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 40px); row-gap: 18px; margin-top: clamp(34px, 4.4vw, 70px); align-items: start; }
.foot-legal { grid-column: 1 / span 6; font-size: 15px; line-height: 1.55; }
.foot-legal a { border-bottom: 1.5px solid currentColor; }
.foot-legal p + p { margin-top: 8px; }
.foot-small { grid-column: 10 / -1; font-size: 14.5px; line-height: 1.5; opacity: 0.9; }
.foot-grid.no-legal .foot-small { grid-column: 1 / -1; }

/* ---------- Film view ---------- */
.view { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; background: var(--tint, var(--putty)); overflow-y: auto; overscroll-behavior: contain; opacity: 0; transform: translateY(14px); transition: opacity 0.3s var(--ease), transform 0.4s var(--ease); }
.view.open { opacity: 1; transform: none; }
.view-top { position: sticky; top: 0; z-index: 2; flex: none; display: flex; align-items: center; justify-content: space-between; height: var(--top-h); padding-inline: var(--g); background: var(--tint, var(--putty)); }
.view-top .chip svg { width: 12px; height: 12px; fill: none; }
.view-body { --stage-h: calc(100vh - var(--top-h) - 140px); flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 29vw); gap: clamp(26px, 3.6vw, 64px); align-items: start; padding: 8px var(--g) 56px; }
.view-stage { min-width: 0; }
.view-frame { position: relative; aspect-ratio: 16 / 9; width: 100%; max-width: calc(var(--stage-h) * 16 / 9); background: #000; overflow: hidden; }
.view-stage[data-cut="social"] { text-align: center; }
.view-stage[data-cut="social"] .view-frame { aspect-ratio: 9 / 16; width: min(100%, calc(min(var(--stage-h), 860px) * 9 / 16)); min-width: min(100%, 250px); max-width: none; margin-inline: auto; }
.view-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.big-play { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); color: var(--ink); transition: transform 0.4s var(--spring); }
.big-play:hover { transform: scale(1.1) rotate(-6deg); }
.big-play svg { width: 26px; height: 26px; margin-left: 5px; fill: currentColor; }
.cuts { display: inline-flex; margin-top: 16px; padding: 3px; border: 2px solid var(--ink); border-radius: 999px; }
.cuts button { height: 36px; padding: 0 16px; border-radius: 999px; font: 700 15px/1 var(--body); transition: background-color 0.2s, color 0.2s; }
.cuts button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.view-info h2 { margin-top: 16px; font-size: clamp(1.9rem, 2.9vw, 3rem); line-height: 1.1; text-wrap: initial; }
.view-info h3 { margin-top: clamp(24px, 2.6vw, 38px); color: var(--soft); }
.view-idea { margin-top: 10px; font-size: 18px; line-height: 1.5; }
.view-facts { margin-top: clamp(22px, 2.4vw, 34px); border-top: 2px solid var(--ink); }
.view-facts div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.view-facts dt { font: 700 12.5px/1.3 var(--body); letter-spacing: 0.09em; text-transform: uppercase; color: var(--soft); }
.view-facts dd { font-weight: 600; font-size: 16.5px; }
.view-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 28px; }

/* ---------- Arrivals ---------- */
.rise { opacity: 0; transform: translateY(26px); }
.rise.in { opacity: 1; transform: none; transition: opacity 0.6s var(--ease) var(--d, 0s), transform 0.8s var(--ease) var(--d, 0s); }
.rise.in.settled { transition: transform 0.45s var(--spring); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .view-body { --stage-h: calc(100vh - var(--top-h) - 120px); grid-template-columns: minmax(0, 1fr); }
  .view-frame { max-width: none; }
  .view-info { max-width: 42rem; }
  .facts > div, .facts > .style-cell { grid-column: span 4; }
  .facts > .concept-cell, .facts.has-days > .concept-cell { grid-column: 1 / -1; order: 9; margin-top: 18px; }
  .facts > .price-cell { grid-column: span 4; }
  .facts.has-days > div, .facts.has-days > .style-cell, .facts.has-days > .price-cell { grid-column: span 3; }
}
@media (max-width: 980px) {
  .nav { display: none; }
  .top .btn { margin-left: auto; flex: none; }
  .hero { grid-template-columns: minmax(0, 1fr); padding: 10px var(--g) 44px; }
  .hero-film { order: 2; padding: 30px 14px 0 0; }
  .film-media, .film.flip .film-media { grid-column: 1 / -1; grid-row: 2; }
  .film-text, .film.flip .film-text { grid-column: 1 / -1; grid-row: 1; padding: 0 var(--g) 28px; }
  .film-title { max-width: 14em; }
  .head h2, .head-side { grid-column: 1 / -1; }
  .head-side { max-width: 28em; padding-bottom: 0; }
  .calc { grid-template-columns: minmax(0, 1fr); grid-template-areas: "len" "price" "facts" "extras" "foot"; }
  .calc-price { position: static; margin-top: 30px; padding-top: 22px; border-top: 2px solid var(--ink); }
  .calc-foot .calc-again { display: block; }
  .included h3, .included ul { grid-column: 1 / -1; }
  .included ul { margin-top: 16px; }
  .smallprint { padding-left: 0; }
  .split-head { grid-column: 1 / -1; position: static; }
  .faq, .form, .sent { grid-column: 1 / -1; margin-top: 36px; }
  .about-grid { grid-template-columns: minmax(0, 1fr); }
  .foot-legal, .foot-small, .foot-grid.no-legal .foot-small { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  body { font-size: 17px; }
  :root { --top-h: 64px; }
  .mark { font-size: 18px; }
  .btn-small { height: 42px; padding: 0 17px; font-size: 15px; }
  h1, h1.long { font-size: clamp(2rem, 9.4vw, 2.9rem); }
  .hero-actions { margin-top: 22px; }
  .ticks { flex-direction: column; gap: 6px; }
  .hero-slab, .hero-frame { border-radius: 20px 20px 20px 56px; }
  .hero-tab { left: 20px; height: 34px; font-size: 14px; padding: 0 14px; top: -16px; }
  .hero-bar { padding-top: 28px; }
  .track-count { display: none; }
  .step { flex-basis: 78vw; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .facts > div, .facts.has-days > div { grid-column: span 1; }
  .facts > .price-cell, .facts.has-days > .price-cell { grid-column: 1 / -1; text-align: left; }
  .facts > .concept-cell, .facts.has-days > .concept-cell { grid-column: 1 / -1; margin-top: 0; }
  .watch { height: 42px; font-size: 15px; padding: 0 16px 0 13px; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .form-foot .btn { width: 100%; }
  .calc { --thumb: 40px; margin-inline: calc(var(--g) * -0.4); padding: 22px 18px 26px; }
  .calc-slide { gap: 8px; }
  .calc-scale li:nth-child(2):not(:last-child) { display: none; }
  .calc-slide > .round { width: 42px; height: 42px; margin-top: 3px; }
  .calc-range::-webkit-slider-thumb { margin-top: -15px; }
  .calc-facts div { grid-template-columns: 104px minmax(0, 1fr); }
  .calc-foot .btn { width: 100%; padding: 0 18px; font-size: 17.5px; }
  .extra { gap: 10px 12px; }
  #extra-language { grid-template-columns: auto minmax(0, 1fr); }
  #extra-language .extra-price { grid-column: 2; margin-top: -6px; }
  .faq details p { padding-right: 0; }
  .view-facts div { grid-template-columns: 110px minmax(0, 1fr); }
  .big-play { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
  .big-play svg { width: 20px; height: 20px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation: none !important; }
  .rise { opacity: 1; transform: none; }
  .mk .dash, .mk-ring .dash { stroke-dashoffset: 0 !important; }
  .mk-neon .tube, .mk-clay .thumb { opacity: 1 !important; }
  .mk-paper .strip { transform: none !important; }
  .art-board img, .step .art, .step .num, .step h3, .step > p { opacity: 1 !important; }
}


/* ---------- Plain pages: the privacy notice and the "not found" page ---------- */
.doc { padding-top: clamp(26px, 4vw, 64px); padding-bottom: clamp(56px, 7vw, 110px); }
.doc h1 { margin: 0; font-size: clamp(2.6rem, 7vw, 7.4rem); line-height: 1.02; }
.doc-lead { margin-top: clamp(18px, 2vw, 30px); max-width: 30em; font-size: clamp(1.15rem, 1.6vw, 1.6rem); line-height: 1.4; font-weight: 500; }
.doc h2 { margin-top: clamp(34px, 3.6vw, 54px); padding-top: 18px; border-top: 2px solid var(--ink); max-width: 30em; font: 400 clamp(1.25rem, 1.8vw, 1.7rem)/1.15 var(--display); letter-spacing: -0.02em; }
.doc p, .doc li { max-width: 38em; font-size: 18px; line-height: 1.55; }
.doc h2 + p, .doc h2 + ul, .doc p + p { margin-top: 12px; }
.doc ul { display: grid; gap: 8px; }
.doc li { position: relative; padding-left: 22px; }
.doc li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--crimson); }
.doc a:not(.btn):not(.text-link) { font-weight: 700; border-bottom: 2px solid currentColor; transition: color 0.2s; }
.doc a:not(.btn):not(.text-link):hover { color: var(--green); }
.doc .doc-date { margin-top: clamp(34px, 3.6vw, 54px); font-size: 15.5px; font-weight: 500; color: var(--soft); }
.lost { min-height: 52vh; }
.lost .eyebrow { margin-bottom: 14px; color: var(--crimson); }
.lost-links { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: clamp(26px, 3vw, 44px); }

/* ---------- Films page ---------- */
.gal-head { padding-top: clamp(26px, 4vw, 64px); }
.gal-head h1 { margin: 0; font-size: clamp(2.6rem, 7vw, 7.4rem); line-height: 1.02; }
.gal-intro { margin-top: clamp(18px, 2vw, 30px); max-width: 36em; font-size: clamp(1.05rem, 1.3vw, 1.3rem); line-height: 1.42; font-weight: 500; }
.filters { margin-top: clamp(28px, 3.4vw, 52px); border-top: 2px solid var(--ink); }
.filter-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px 24px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.filter-row h2 { font: 700 13px/1.3 var(--body); letter-spacing: 0.09em; padding-top: 13px; isolation: auto; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 10px 0 16px; border-radius: 999px; border: 2px solid var(--ink); font: 700 15px/1 var(--body); white-space: nowrap; transition: background-color 0.2s, color 0.2s, transform 0.3s var(--spring), opacity 0.2s; }
.fchip small { min-width: 24px; height: 24px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; background: rgba(29, 26, 23, 0.1); font: 700 12.5px/1 var(--body); font-variant-numeric: tabular-nums; transition: background-color 0.2s, color 0.2s; }
.fchip:hover { transform: translateY(-2px) rotate(-1deg); }
.fchip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.fchip[aria-pressed="true"] small { background: var(--yellow); color: var(--ink); }
.fchip.none { opacity: 0.38; border-style: dashed; }
.gal-status { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 40px; margin-top: 22px; font-weight: 600; }
.gal-status button { font-weight: 700; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 3.4vw, 56px) clamp(16px, 2.4vw, 40px); margin-top: 18px; padding-bottom: clamp(56px, 7vw, 110px); }
.gallery[hidden] { display: none; }
body[data-shape="vertical"] .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body[data-shape="square"] .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile { display: block; min-width: 0; }
.tile[hidden] { display: none; }
.tile-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--tint); transition: transform 0.5s var(--spring); }
body[data-shape="vertical"] .tile-media { aspect-ratio: 9 / 16; }
body[data-shape="square"] .tile-media { aspect-ratio: 1; }
.tile:nth-child(odd):hover .tile-media, .tile:nth-child(odd):focus-visible .tile-media { transform: rotate(-1deg) scale(1.015); }
.tile:nth-child(even):hover .tile-media, .tile:nth-child(even):focus-visible .tile-media { transform: rotate(1deg) scale(1.015); }
.tile-media img, .tile-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile-media video { opacity: 0; transition: opacity 0.3s; }
.tile-media video.on { opacity: 1; }
.tile-media .tag { position: absolute; left: 14px; bottom: 14px; }
.tile-media .tag-neon { color: #fff; background-color: rgba(8, 16, 30, 0.78); background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff); }
.tile-cap { padding-top: 16px; }
.tile-cap h3 { font: 400 clamp(1.5rem, 2.5vw, 2.5rem)/1.05 var(--display); letter-spacing: -0.025em; }
.tile-idea { margin-top: 12px; font-size: 17px; line-height: 1.4; font-weight: 500; }
.tile-for { margin-top: 6px; font-size: 14.5px; font-weight: 600; color: var(--soft); }
.tile-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--ink); font-weight: 600; font-size: 15px; }
.tile-foot b { margin-left: auto; font: 400 clamp(1.2rem, 1.7vw, 1.6rem)/1 var(--display); letter-spacing: -0.02em; }
body[data-shape="vertical"] .tile-cap h3 { font-size: clamp(1.3rem, 1.9vw, 1.8rem); }
body[data-shape="vertical"] .tile-idea { font-size: 15.5px; }
.gal-empty { padding: clamp(40px, 6vw, 96px) var(--g) clamp(64px, 8vw, 130px); }
.gal-empty h2 { max-width: 14em; }
.gal-close { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-top: clamp(30px, 4vw, 56px); padding-bottom: clamp(56px, 7vw, 110px); border-top: 2px solid var(--ink); margin-inline: var(--g); padding-inline: 0; }
.gal-close p { font: 400 clamp(1.3rem, 2.4vw, 2.3rem)/1.12 var(--display); letter-spacing: -0.02em; max-width: 20em; }
.films-page .foot { margin-top: 0; }
@media (max-width: 980px) {
  .filter-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .filter-row h2 { padding-top: 2px; }
  body[data-shape="vertical"] .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-shape="square"] .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .filter-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--g)); padding: 2px var(--g) 6px; scrollbar-width: none; }
  .filter-chips::-webkit-scrollbar { display: none; }
  .fchip { flex: none; height: 40px; }
  body[data-shape="vertical"] .tile-idea, body[data-shape="vertical"] .tile-for { display: none; }
}
@media (min-width: 1280px) { body[data-shape="landscape"] .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(14px, 1.6vw, 26px); } body[data-shape="landscape"] .tile-cap h3 { font-size: clamp(1.3rem, 1.7vw, 1.75rem); } body[data-shape="landscape"] .tile-idea { font-size: 15.5px; } body[data-shape="landscape"] .tile-media .tag { left: 10px; bottom: 10px; font-size: 13px; } }
.dot { width: 26px; }