/* VELMARIN landing page, prototype 2: bold editorial layout with scroll-driven motion, in the brand's colours.
   Deep Red is the page colour (cream text, 5.88:1), Ink bands carry the dark sections, Cyan is the accent. */

:root {
  --cream: #EFE7DA;
  --ink: #1A1A1A;
  --red: #B2001A;
  --cyan: #00AEC7;
  --maroon: #5C1A1B;
  --red-bright: #E61E25;   /* reserved colour: used only for the stamp */
  --gold: #B08D57;
  --teal: #007D87;
  --muted-on-red: color-mix(in srgb, var(--cream) 90%, var(--red));   /* 4.92:1 */
  --muted-on-ink: color-mix(in srgb, var(--cream) 78%, var(--ink));
  --display: 'Fraunces', Georgia, serif;
  --text: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --punch: 'Space Grotesk', 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --gutter: clamp(20px, 5vw, 64px);
  /* Type scale: four headline steps. Display-size words (hero, numbers) sit outside it on purpose. */
  --h1: clamp(2.5rem, 5.6vw, 5rem);        /* section statements */
  --h2: clamp(2rem, 3.8vw, 3.25rem);       /* section titles, feature, range, enquiry */
  --h3: clamp(1.5rem, 2.8vw, 2.5rem);      /* the tagline */
  --h4: clamp(1.125rem, 1.8vw, 1.5rem);    /* card and step names */
  --section: clamp(88px, 11vw, 150px);     /* vertical rhythm between sections */
  --stack-gap: 16px;                       /* label to headline */
  --radius-section: clamp(22px, 3vw, 40px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: only dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--red); color: var(--cream); font: 400 1.0625rem/1.6 var(--text); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.04; letter-spacing: -.015em; }
p { margin: 0; }
:focus-visible { outline: 2.5px solid var(--cream); outline-offset: 3px; }
::selection { background: var(--cream); color: var(--red); }

.wrap { width: min(1240px, 100%); margin-inline: auto; padding-inline: var(--gutter); }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; background: var(--cream); color: var(--ink); }
.skip-link:focus { top: 12px; }
.label { font: 500 .8125rem/1.35 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.big { font-size: var(--h1); max-width: 18ch; text-wrap: balance; }
.lead { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); }
.placeholder { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 1px 8px; border: 1.5px dashed currentColor; border-radius: 999px; font: 500 .6875rem/1.6 var(--mono); letter-spacing: .06em; opacity: .8; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 26px; border: 1.5px solid transparent; border-radius: 999px;
  font: 700 .9375rem/1 var(--punch); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--small { min-height: 42px; padding: 8px 18px; font-size: .8125rem; }
.btn--block { width: 100%; }
.btn--cream { background: var(--cream); color: var(--ink); }
.btn--cream:hover { background: var(--ink); color: var(--cream); }
.btn--line { border-color: var(--cream); color: var(--cream); }
.btn--line:hover { background: var(--cream); color: var(--ink); }
.btn--red { background: var(--red); color: var(--cream); }
.btn--red:hover { background: var(--ink); }
.btn--ink { background: var(--ink); color: var(--cream); }
.btn--ink:hover { background: var(--cream); color: var(--ink); }
.btn--ink-line { border-color: var(--ink); color: var(--ink); }
.btn--ink-line:hover { background: var(--ink); color: var(--cream); }
.btn--cream-line { border-color: var(--cream); color: var(--cream); background: color-mix(in srgb, var(--ink) 70%, transparent); }
.wa-icon { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }


/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px var(--gutter);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.header.is-scrolled { background: color-mix(in srgb, var(--red) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 color-mix(in srgb, var(--cream) 18%, transparent); }
.brand img { height: 26px; width: auto; }
.nav { display: none; gap: 30px; }
.nav a { font: 700 .8125rem var(--punch); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav a:hover::after { transform: none; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.lang { min-width: 44px; min-height: 42px; border: 1.5px solid color-mix(in srgb, var(--cream) 35%, transparent); border-radius: 999px; background: none; color: var(--cream); font: 500 .75rem var(--mono); letter-spacing: .08em; cursor: pointer; }
.lang:hover { border-color: var(--cream); }
@media (min-width: 920px) {
  /* Three equal columns so the menu sits on the page's centre line, above the hero emblem. */
  .header { display: grid; grid-template-columns: 1fr auto 1fr; }
  .nav { display: flex; }
  .header-actions { justify-self: end; }
  /* On landing there is room for a larger logo and CTA; once scrolled, the bar settles to its compact size. */
  .header { padding-block: 22px; transition: background .3s var(--ease), box-shadow .3s var(--ease), padding .35s var(--ease); }
  .brand img { height: 36px; transition: height .35s var(--ease); }
  .nav { gap: 36px; }
  .nav a { font-size: .875rem; }
  .lang { min-width: 50px; min-height: 50px; }
  .header-actions .btn { min-height: 50px; padding: 12px 26px; font-size: .9375rem; transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), min-height .35s var(--ease), padding .35s var(--ease), font-size .35s var(--ease); }
  .header.is-scrolled { padding-block: 12px; }
  .header.is-scrolled .brand img { height: 28px; }
  .header.is-scrolled .lang { min-width: 44px; min-height: 42px; }
  .header.is-scrolled .header-actions .btn { min-height: 42px; padding: 8px 20px; font-size: .8125rem; }
}
@media (max-width: 640px) { .header-actions .btn { display: none; } }
/* The header button's full label needs room; on narrower desktops it shortens so the centred menu stays centred. */
.cta-short { display: none; }
@media (max-width: 1299px) { .header .cta-long { display: none; } .header .cta-short { display: inline; } }

/* Phones: a slim call-to-action pinned to the bottom once the hero is passed, hidden again at the form. */
.cta-bar { display: none; }
@media (max-width: 640px) {
  .cta-bar {
    display: grid; grid-template-columns: 1fr auto; gap: 8px; position: fixed; z-index: 90; left: 16px; right: 16px; bottom: max(14px, env(safe-area-inset-bottom));
    transform: translateY(calc(100% + 30px)); transition: transform .45s var(--ease);
  }
  .cta-bar .btn { box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
  .cta-bar .btn--cream-line { width: 52px; padding: 0; }
  .cta-bar.is-shown { transform: none; }
  .cta-bar .btn:hover { transform: none; }
}

/* ---------- Hero: through the emblem ----------
   The stage is pinned while the hero scrolls. main.js sets, from scroll progress:
   --z  zoom progress 0→1, --s  scale of the emblem, --rx/--ry  the oval window in px, --end  tagline 0→1. */
.hero { --z: 0; --s: 1; --end: 0; position: relative; height: 260vh; }
.hero-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; isolation: isolate; }
/* The brand pattern drifting faintly on the red around the emblem; it fades out as the zoom opens into the film. */
.hero-pattern { --pattern-opacity: calc(.055 * (1 - var(--z))); }
.hero-film.media { position: absolute; inset: 0; min-height: 0; z-index: 0; clip-path: ellipse(var(--rx, 0px) var(--ry, 0px) at 50% 50%); }
.hero-tint { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(20, 6, 8, .16) 35%, rgba(20, 6, 8, .5) 100%); opacity: calc(1 - var(--z)); }   /* a dark rim inside the oval, gone once it opens */
/* The hero film in full colour, darker and richer than the site's shared grade, so the oval reads as a real window. */
.hero-film.media:not(.media--placeholder) video { filter: saturate(1.15) contrast(1.12) brightness(.84); }
.hero-film.media:not(.media--placeholder)::before { background: none; }
.hero-shade { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: var(--end); background: linear-gradient(0deg, rgba(26, 26, 26, .72) 0%, rgba(26, 26, 26, .45) 55%, rgba(26, 26, 26, .55) 100%); }
.hero-seal { position: relative; z-index: 4; height: clamp(240px, 54svh, 560px); aspect-ratio: 195.92 / 246.96; transform: scale(var(--s)); will-change: transform; pointer-events: none; }
.seal { display: block; width: 100%; height: 100%; overflow: visible; }
.seal-oval { fill: none; stroke: var(--cream); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: max(0, calc(1 - var(--z) * 3)); animation: draw 1.6s var(--ease) .15s forwards; }
.seal-archer { fill: var(--cream); color: var(--cream); opacity: 0; animation: appear 1s var(--ease) 1s forwards; }
/* Fades out as the zoom begins. Plain opacity on a wrapper (CSS filters on SVG shapes are ignored by Safari),
   so it doesn't clash with the archer's own fade-in animation. */
.seal-fade { opacity: max(0, calc(1 - var(--z) * 2.5)); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes appear { to { opacity: 1; } }
.js .hero:not(.is-ready) .seal-oval, .js .hero:not(.is-ready) .seal-archer { animation-play-state: paused; }
.hero-open { position: absolute; z-index: 4; left: 0; right: 0; bottom: max(28px, 6svh); display: grid; justify-items: center; gap: 10px; text-align: center; color: var(--muted-on-red); opacity: max(0, calc(1 - var(--z) * 5)); }
.hero-hint { opacity: .8; }
.hero-end {
  position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 22px;
  padding: 0 var(--gutter); text-align: center;
  opacity: var(--end); transform: translateY(calc((1 - var(--end)) * 30px));
}
.hero-end h1 { font-weight: 500; font-size: var(--h1); line-height: 1.08; max-width: 20ch; text-wrap: balance; }
.hero-end .label { color: var(--cream); opacity: .85; }
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }



/* ---------- Media slots ---------- */
.media { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--maroon), var(--ink)); min-height: 200px; }
.media video, .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media--placeholder::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--cream) 7%, transparent) 0 2px, transparent 2px 14px);
}
.media--placeholder::after {
  content: "STOCK · " attr(data-label); position: absolute; left: 14px; bottom: 12px; right: 14px;
  font: 500 .6875rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--cream) 80%, transparent);
}
.media--feature { min-height: 320px; }

/* One grade for all stock: slightly warmer and less saturated, a soft red wash and fine film grain,
   so clips from different shoots read as one Velmarin shoot. */
.media:not(.media--placeholder) video, .media:not(.media--placeholder) img { filter: saturate(.86) contrast(1.06) sepia(.14) brightness(.97); }
.media:not(.media--placeholder)::before, .media:not(.media--placeholder)::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.media:not(.media--placeholder)::before { background: linear-gradient(180deg, rgba(178, 0, 26, .10), rgba(92, 26, 27, .22)); mix-blend-mode: soft-light; }
.media:not(.media--placeholder)::after {
  inset: -50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .22; mix-blend-mode: overlay;
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* ---------- Ticker ---------- */
.ticker { position: relative; z-index: 2; background: var(--cyan); color: var(--ink); padding-block: 16px; transform: rotate(-2deg); margin: 44px -2vw 40px; overflow: hidden; }
.ticker--seam { position: absolute; z-index: 6; left: -2vw; right: -2vw; bottom: 0; margin: 0; transform: translateY(50%) rotate(-2deg); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.ticker-track { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; animation: marquee 32s linear infinite; }
.ticker-track li { display: flex; align-items: center; white-space: nowrap; font: 700 clamp(1.125rem, 2.2vw, 1.75rem) var(--punch); text-transform: uppercase; letter-spacing: .02em; }
.ticker-track li::after { content: "●"; margin-inline: 28px; font-size: .5em; color: var(--red); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Every step, named ---------- */
.steps { --p: 0; position: relative; height: 185vh; background: var(--maroon); }   /* arc: maroon → night → dawn → red */
.steps-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding-block: clamp(86px, 10vh, 120px) calc(28px + var(--radius-section)); overflow: hidden; }   /* clear of the next section's overlap */
.steps-head { text-align: center; display: grid; justify-items: center; gap: 10px; }
.steps-head .label, .steps-head .lead { color: var(--muted-on-ink); }
.steps-head h2 { font-size: var(--h2); max-width: 22ch; }
.stack { position: relative; list-style: none; margin: 0 auto; padding: 0; width: min(760px, 92vw); align-self: center; height: 100%; }
.layer {
  --i: 0; position: absolute; left: 0; right: 0; top: 50%; height: clamp(46px, 6.4vh, 64px); margin-top: calc(clamp(46px, 6.4vh, 64px) / -2);
  display: grid; grid-template-columns: 56px 1fr; align-items: center; column-gap: 14px; padding-inline: 20px;
  border-radius: 14px; z-index: calc(10 - var(--i));
  /* Collapsed: stacked tightly like one package. Open: spread over the height, each step named. */
  transform: translateY(calc((var(--i) - 2) * (10px + var(--p) * clamp(48px, 8.8vh, 88px)))) rotate(calc((1 - var(--p)) * (var(--i) - 2) * 1.2deg));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  will-change: transform;
}
.layer-no { font: 700 1.125rem var(--punch); }
.layer:not(.layer--1) :is(.layer-no, .layer-name) { opacity: min(1, calc(var(--p) * 4)); }
.layer-name { font: 700 var(--h4)/1 var(--punch); text-transform: uppercase; letter-spacing: .02em; }
.layer-note { position: absolute; right: 20px; top: 50%; transform: translate(calc((1 - var(--shown, 0)) * 20px), -50%); opacity: var(--shown, 0); font-size: .8125rem; max-width: 52%; text-align: right; line-height: 1.3; transition: opacity .35s, transform .35s var(--ease); }
.layer--1 { --i: 0; background: var(--cream); color: var(--ink); }
.layer--2 { --i: 1; background: var(--gold); color: var(--ink); }
.layer--3 { --i: 2; background: var(--red); color: var(--cream); }
.layer--4 { --i: 3; background: var(--cyan); color: var(--ink); }
.layer--5 { --i: 4; background: var(--ink); color: var(--cream); }
.pin-foot { display: grid; justify-items: center; gap: 8px; }
.steps-hint { color: var(--muted-on-ink); height: 0; overflow: visible; opacity: max(0, calc(1 - var(--p, 0) * 3)); transform: translateY(-28px); }
.pin-count { font-variant-numeric: tabular-nums; }
.steps .pin-count { color: var(--cream); opacity: min(1, calc(var(--p, 0) * 3)); }
.pin-bar { display: block; width: min(220px, 50vw); height: 3px; border-radius: 3px; background: color-mix(in srgb, currentColor 22%, transparent); overflow: hidden; }
.pin-bar > span { display: block; height: 100%; background: var(--cyan); transform: scaleX(var(--bar, 0)); transform-origin: left; }
.steps .pin-bar { color: var(--cream); }
@media (max-width: 640px) {
  .steps-head .lead { display: none; }   /* the notes on each step carry this on phones */
  .layer { --h: 70px; height: var(--h); margin-top: calc(var(--h) / -2); grid-template-columns: 38px 1fr; grid-template-rows: auto auto; align-content: center; row-gap: 3px; padding-inline: 16px;
    transform: translateY(calc((var(--i) - 2) * (10px + var(--p) * 66px))) rotate(calc((1 - var(--p)) * (var(--i) - 2) * 1.2deg)); }
  .layer-no { grid-row: 1 / 3; }
  .layer-note { position: static; grid-column: 2; transform: none; max-width: none; text-align: left; font-size: .75rem; line-height: 1.25; }
}

/* Step films: a faint film fills the section behind the cards. It follows the step you are on (and the card
   you hover), crossfading between clips; the current card carries a soft cream outline. */
.steps-sticky { isolation: isolate; }
.steps-head, .stack, .pin-foot { position: relative; z-index: 1; }
.steps-film.media { position: absolute; inset: 0; z-index: 0; min-height: 0; background: var(--maroon); }
.steps-film video { opacity: 0; transition: opacity 1.2s var(--ease); }
.steps-film video.is-active { opacity: .38; }
/* Keep the film faint and let the text sit on ink: darker at the top (heading) and bottom (counter). */
.steps-film::before { z-index: 2 !important; mix-blend-mode: normal !important; background: linear-gradient(180deg, rgba(92, 26, 27, .9) 0%, rgba(92, 26, 27, .45) 38%, rgba(92, 26, 27, .45) 70%, rgba(92, 26, 27, .9) 100%) !important; }
.layer { transition: box-shadow .45s var(--ease); }
.layer.is-current { box-shadow: 0 0 0 2px var(--cream), 0 14px 34px rgba(0, 0, 0, .55); }
.steps.is-open .layer { cursor: default; }

/* ---------- Story ---------- */
.story { padding-top: var(--section); }
.story .label { color: var(--muted-on-red); }
.story .big { margin: var(--stack-gap) 0 28px; }
.story-grid { display: grid; gap: clamp(44px, 6vw, 88px); align-items: center; }
@media (min-width: 960px) { .story-grid { grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); } }
/* Sized from the column's own width (container units), so the longest word always fits. */
.story-head { container-type: inline-size; }
.story-title { font-size: min(var(--h1), 11.2cqi); max-width: 13ch; }

/* The heading lights up word by word as you scroll; then "Nähe" is underlined with a hand-drawn cyan line. */
.lw { opacity: .26; transition: opacity .5s var(--ease); }
.lw.is-lit { opacity: 1; }
.lw--strike { position: relative; display: inline-block; }
.lw--strike svg { position: absolute; left: -4%; top: 100%; width: 108%; height: .42em; margin-top: -.16em; overflow: visible; pointer-events: none; }
/* Drawn by wiping the line in from the left (a clip), so it stays one clean stroke at any size. */
.lw--strike svg { clip-path: inset(0 100% 0 0); transition: clip-path .75s cubic-bezier(.6, 0, .3, 1); }
.lw--strike path { fill: none; stroke: var(--cyan); stroke-width: clamp(4px, .55vw, 8px); stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lw--strike.is-struck svg { clip-path: inset(0 -4% 0 -4%); }

/* The mission as a letter: cream paper, slightly turned, a fold crease, the full logomark as letterhead,
   a signature in Pinyon Script (the brand's occasion face) and the stamp pressed over the signature. */
/* The paper is turned about 2° and has its top-right corner folded over (a dog-ear): the corner is cut away with
   clip-path and the folded flap is drawn on top. Its shadow sits on the wrapper, which follows the cut shape. */
.letter-wrap { filter: drop-shadow(0 2px 0 rgba(26, 26, 26, .08)) drop-shadow(0 28px 34px rgba(40, 0, 6, .4)); }
.letter {
  --ear: clamp(34px, 4vw, 54px);
  position: relative; background: #FBF8F3; color: var(--ink); transform: rotate(-2deg);
  padding: clamp(28px, 4vw, 48px) clamp(24px, 3.6vw, 46px) clamp(32px, 4vw, 46px);
  clip-path: polygon(0 0, calc(100% - var(--ear)) 0, 100% var(--ear), 100% 100%, 0 100%);
  font-size: 1.0625rem; line-height: 1.65;
}
.letter::after {
  content: ""; position: absolute; top: 0; right: 0; width: var(--ear); height: var(--ear);
  background: linear-gradient(to bottom left, transparent 50%, #DDD4C6 50%, #EAE3D8 68%, #F4EFE7 100%);
  filter: drop-shadow(-2px 3px 3px rgba(26, 26, 26, .18));
}
.letter::before { content: ""; position: absolute; left: 0; right: 0; top: 36%; height: 1px; background: rgba(26, 26, 26, .07); box-shadow: 0 1px 0 rgba(255, 255, 255, .7); }
.letter-head { display: block; width: clamp(110px, 10vw, 140px); height: auto; margin: 0 auto 18px; }
.letter-place { margin-bottom: 18px; text-align: right; font: 500 .75rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 65%, #FBF8F3); }
.letter-greeting { margin-bottom: 14px; font: italic 500 1.3125rem/1.3 var(--display); }
.letter p + p { margin-top: 14px; }
.letter .letter-sign { display: grid; gap: 2px; margin-top: 26px; }
.signature { font: 400 clamp(2.5rem, 4vw, 3.25rem)/1 'Pinyon Script', cursive; color: var(--red); margin: 4px 0 2px -2px; }
.signed { font: 500 .75rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 65%, #FBF8F3); }
.letter .stamp { right: clamp(14px, 3vw, 36px); bottom: clamp(14px, 2.5vw, 30px); width: clamp(112px, 11vw, 150px); --stamp-rot: 13deg; }   /* fully on the paper */
@media (max-width: 560px) {
  .letter { transform: rotate(-1.2deg); font-size: 1rem; }
  .letter .stamp { right: 12px; bottom: 14px; width: 100px; }
}

/* ---------- Reel ---------- */
.reel { padding-block: var(--section); overflow: clip; }
.reel-head .label { color: var(--muted-on-red); }
.reel-head .big { margin-top: var(--stack-gap); }
/* ---------- Range: the crate lid ----------
   The cyan band is the lid of a Velmarin crate. The products are stickers slapped onto it at slight angles; they
   drift at different speeds as you scroll (main.js sets --t, 0→1 while the section passes) and straighten up a
   little on hover. Beside them, a typed packing list. Nothing here is a link: the range is discussed personally. */
.range { --t: .5; position: relative; color: var(--ink); isolation: isolate; padding-block: clamp(40px, 6vh, 72px); }
/* The lid itself: cyan set into the dark like an object, not a wall of colour. */
.range-lid {
  position: relative; isolation: isolate; overflow: hidden; margin-inline: clamp(12px, 2.5vw, 40px);
  padding-block: clamp(40px, 6vh, 72px); background: var(--cyan); border-radius: clamp(22px, 2.6vw, 36px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 40px 90px rgba(0, 0, 0, .45);
}
/* Story and range share one surface whose colour shifts as you scroll: red for the letter, darkening to ink as
   the crate lid arrives (main.js sets --dusk 0→1), so there is no hard edge between them. */
.story, .range { background: color-mix(in srgb, var(--ink) calc(var(--dusk, 0) * 100%), var(--red)); }
.range .pattern { --pattern-colour: var(--ink); --pattern-opacity: .06; }
.range :focus-visible { outline-color: var(--ink); }
.range .label { color: var(--ink); }
.range .big { margin: 12px auto 22px; font-size: clamp(1.75rem, 3vw, 2.625rem); max-width: 14ch; }
/* Three columns on wide screens: stickers | title and packing slip | stickers. On phones: stickers, centre, stickers. */
.range-stage { display: grid; gap: 24px; padding-inline: clamp(12px, 2vw, 32px); }
.range-center { position: relative; z-index: 3; display: grid; justify-items: center; text-align: center; padding-inline: var(--gutter); }
.range-center .packing-list { text-align: left; width: min(100%, 420px); }
@media (min-width: 900px) {
  .range-stage { grid-template-columns: minmax(0, 1fr) minmax(360px, 420px) minmax(0, 1fr); align-items: center; min-height: clamp(560px, 74vh, 700px); gap: 0; }
  .range-center { padding-inline: 12px; }
}

/* The packing list: a paper slip taped to the lid. */
.packing-list {
  position: relative; max-width: 400px; padding: 18px 20px 12px; background: #FBF8F3; color: var(--ink); border-radius: 3px; transform: rotate(-1.2deg);
  box-shadow: 0 2px 0 rgba(26, 26, 26, .08), 0 18px 36px rgba(26, 26, 26, .2);
  font: 500 .8125rem/1.45 var(--mono); letter-spacing: .03em;
}
.packing-list::before { content: ""; position: absolute; top: -12px; left: 50%; width: 96px; height: 24px; margin-left: -48px; transform: rotate(2deg); background: rgba(239, 231, 218, .75); box-shadow: 0 1px 2px rgba(26, 26, 26, .12); }
.packing-head { display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: 1.5px solid var(--ink); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.packing-list dl { margin: 0; }
.packing-list dl > div { display: grid; grid-template-columns: 8.5em 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px dashed rgba(26, 26, 26, .35); }
.packing-list dt { text-transform: uppercase; color: color-mix(in srgb, var(--ink) 65%, #FBF8F3); }
.packing-list dd { margin: 0; }
@media (max-width: 480px) { .packing-list dl > div { grid-template-columns: 1fr; gap: 2px; } }   /* phones: category above its products */
.packing-foot { padding-top: 10px; color: color-mix(in srgb, var(--ink) 70%, #FBF8F3); }

/* The lid and its stickers. */
.lid { position: relative; align-self: stretch; }
.lid-mark { position: absolute; right: 8%; bottom: 0; margin: 0; font: 700 clamp(1rem, 1.6vw, 1.375rem)/1 var(--punch); letter-spacing: .3em; text-transform: uppercase; color: var(--ink); opacity: .22; }
/* The figure is the sticker's fixed footprint (its place, tilt and scroll drift) and never changes shape on hover, so
   overlapping stickers can't flicker between each other; the lift and straightening happen on the card inside it. */
.sticker {
  position: absolute; left: var(--x); top: var(--y); width: 54%; margin: 0;
  --lift: 0; --undo: 0deg;
  z-index: calc(20 - var(--n));   /* higher stickers lie on top, so each name stays visible */
  transform: translateY(calc((var(--t) - .5) * var(--speed) * 1px)) rotate(var(--rot));
  transition: transform .6s var(--ease);
}
.sticker-in {
  position: relative; padding: 7px 7px 0; background: #FBF8F3; border-radius: 10px;
  box-shadow: 0 1px 0 rgba(26, 26, 26, .08), 0 14px 28px rgba(26, 26, 26, .28);
  transform: rotate(var(--undo)) scale(calc(1 + var(--lift) * .05));
  transition: transform .45s var(--ease), box-shadow .3s var(--ease);
}
.sticker:hover { --lift: 1; --undo: calc(-1 * var(--rot)); z-index: 30; }
.sticker:hover .sticker-in { box-shadow: 0 1px 0 rgba(26, 26, 26, .08), 0 24px 44px rgba(26, 26, 26, .35); }
.sticker img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 5px; filter: saturate(.86) contrast(1.06) sepia(.14) brightness(.97); }
.sticker-in { container-type: inline-size; }   /* captions size with the sticker, so long names never spill over */
.sticker figcaption { display: grid; gap: 3px; padding: 8px 22px 10px 4px; font: 500 clamp(.4375rem, 6.6cqi, .6875rem)/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 65%, #FBF8F3); }
.sticker figcaption strong { font: 700 clamp(.625rem, 9.4cqi, 1rem)/1.1 var(--punch); letter-spacing: .02em; color: var(--ink); hyphens: manual; overflow-wrap: break-word; min-width: 0; }
/* A peeling corner. */
.sticker-in::after { content: ""; position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; border-radius: 0 0 10px 0; background: linear-gradient(135deg, transparent 50%, #E6DFD3 50%, #FBF8F3 70%); box-shadow: -2px -2px 3px rgba(26, 26, 26, .12); }
/* Slapped on when the lid comes into view, one after another. */
.js .lid:not(.is-in) .sticker { opacity: 0; scale: 1.15; }
.js .lid .sticker { transition: transform .6s var(--ease), scale .6s var(--ease), opacity .35s ease; }
.js .lid.is-in .sticker { transition-delay: calc(var(--n) * 90ms); }
@media (min-width: 900px) {
  .sticker { width: 40%; top: calc(var(--y) * .92); }
  .lid--b .sticker { left: auto; right: var(--x); }   /* the right side is a true mirror of the left */
  .lid-mark { bottom: -36px; }
}
/* Phones and tablets: each group of six sits in a neat grid of three, above and below the slip; nothing runs off the edge. */
@media (max-width: 899px) {
  .range-stage { gap: 26px; padding-inline: var(--gutter); }
  .lid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2.6vw, 18px); width: min(100%, 620px); justify-self: center; }
  .lid--b { order: 3; }
  .sticker { position: relative; left: auto; top: auto; width: auto; --speed: 0; transform: rotate(calc(var(--rot) * .5)); }
  .sticker:hover { --undo: calc(-.5 * var(--rot)); }
  .lid-mark { display: none; }
}
@media (max-width: 700px) {
  .sticker-in { padding: 5px 5px 0; }
  .sticker figcaption { padding: 5px 14px 6px 2px; }
  .sticker-in::after { width: 14px; height: 14px; }
}

.range-cta { display: grid; justify-items: center; gap: 14px; text-align: center; margin-top: 26px; }
.range-cta .lead { max-width: 30ch; font-family: var(--display); font-weight: 500; font-size: 1.125rem; line-height: 1.3; }
.range-cta .btn { min-height: 46px; padding: 10px 20px; font-size: .8125rem; }
.range-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- The stamp (pressed onto the letter) ---------- */
.stamp {
  position: absolute; z-index: 2; width: clamp(120px, 15vw, 180px); height: auto;
  color: var(--red-bright); mix-blend-mode: multiply; opacity: .92; transform: rotate(var(--stamp-rot, -12deg));
}
/* It comes down large and faint, then is pressed flat. */
.js [data-stamp]:not(.is-in) .stamp { opacity: 0; transform: rotate(-4deg) scale(1.6); }
.js [data-stamp] .stamp { transition: opacity .25s ease-in, transform .38s cubic-bezier(.55, 0, .75, .4); }
.js .letter .stamp { transition-delay: .5s; }   /* after the letter has settled */

/* ---------- Delivery: the departure board and the morning route ----------
   Night-ink band that warms towards dawn as it scrolls through (main.js sets --dawn). A split-flap board shows
   the live order and delivery days; below it, the route across an abstract Berlin draws itself (Ringbahn loop,
   Spree, faint streets: deliberately not a real map, so it claims no delivery area). */
.delivery { --dawn: 0; position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, #0d0d0d, var(--ink) 30%);   /* picks up the van's street, no seam */ color: var(--cream); padding-block: clamp(64px, 9vh, 110px) calc(clamp(64px, 9vh, 110px) + var(--radius-section)); }
@media (min-width: 960px) { .delivery { min-height: 100vh; min-height: 100svh; display: grid; align-items: center; } }   /* one screen on desktop */
.delivery-sky {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--dawn);
  background:
    radial-gradient(ellipse 120% 60% at 50% 112%, var(--red) 0%, var(--maroon) 42%, transparent 78%),
    linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--maroon) 55%, transparent));
}
/* The last stretch always fades fully into red, so dawn hands over to the red story section without a line. */
.delivery::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; z-index: -1; pointer-events: none; background: linear-gradient(180deg, transparent, var(--red)); }
.delivery .label { color: var(--muted-on-ink); }
.delivery .big { margin: var(--stack-gap) 0 16px; font-size: var(--h2); max-width: 12ch; }
.delivery .lead { max-width: 38ch; color: var(--muted-on-ink); }
.delivery-grid { display: grid; gap: clamp(36px, 4vw, 64px); align-items: center; }
@media (min-width: 960px) { .delivery-grid { grid-template-columns: minmax(340px, .8fr) 1.2fr; } }

/* The board: 18 flaps per row, each a dark tile split across the middle. */
.board { margin-top: 28px; width: fit-content; max-width: 100%; background: #121212; border-radius: 14px; padding: clamp(14px, 1.8vw, 22px); box-shadow: inset 0 0 0 1px rgba(239, 231, 218, .08), 0 30px 60px rgba(0, 0, 0, .45); }
.board-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(239, 231, 218, .08); }
.board-foot .clock { font-size: 1.125rem; }
.board-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.board-rows { display: grid; gap: 10px; }
.board-row { display: grid; grid-template-columns: 6.4em auto; align-items: center; gap: 12px; }
.board-label { font: 500 .6875rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-on-ink); }
.board-cells { display: flex; gap: 3px; }
.cell {
  --c: clamp(20px, 2.1vw, 32px);
  position: relative; display: grid; place-items: center; flex: none; width: var(--c); height: calc(var(--c) * 1.42); overflow: hidden; border-radius: 3px;
  background: linear-gradient(180deg, #2b2b2b 0 49.5%, #1e1e1e 50.5% 100%); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .6);
  color: var(--cream); font: 700 calc(var(--c) * .8)/1 var(--punch);
}
.cell::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .75); }
.cell.is-flip > span { animation: flap .09s ease-in; }
@keyframes flap { from { transform: scaleY(.15) translateY(-45%); } to { transform: none; } }
.board-row--key .cell { color: var(--cyan); }
@media (max-width: 420px) { .cell { --c: 20px; } .board-row { grid-template-columns: 5.6em auto; gap: 8px; } }

/* The route. */
.route { position: relative; }
.route-map { display: block; width: 100%; height: auto; overflow: visible; }
.map-streets { fill: none; stroke: var(--cream); stroke-opacity: .07; stroke-width: 1.2; }
.map-ring { fill: none; stroke: var(--cream); stroke-opacity: .24; stroke-width: 1.6; stroke-dasharray: 6 7; }
.map-river { fill: none; stroke: var(--cyan); stroke-opacity: .28; stroke-width: 7; stroke-linecap: round; }
.route-path { fill: none; stroke: var(--cyan); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.mark { fill: var(--ink); stroke: color-mix(in srgb, var(--cream) 40%, transparent); stroke-width: 2; transition: fill .4s, stroke .4s; }
.mark.is-lit { fill: var(--cyan); stroke: var(--cream); }
.mark--pin circle { fill: var(--ink); stroke: color-mix(in srgb, var(--cream) 40%, transparent); stroke-width: 2.5; transition: fill .4s, stroke .4s; }
.mark--pin.is-lit circle { fill: var(--red-bright); stroke: var(--cream); }
.mark--pin.is-lit .pin-core { fill: var(--cream); stroke: none; }
.route-stops { list-style: none; margin: 0; padding: 0; }
.route-stops li { display: flex; align-items: baseline; gap: 8px; font: 600 .875rem/1.3 var(--text); color: var(--muted-on-ink); opacity: .4; transition: opacity .4s, color .4s; }
.route-stops li.is-lit { opacity: 1; color: var(--cream); }
.stop-no { font: 500 .6875rem var(--mono); color: var(--cyan); }
@media (min-width: 760px) {
  .route-stops li { position: absolute; left: var(--sx); top: var(--sy); transform: translate(16px, -135%); white-space: nowrap; }
  .route-stops li.stop--left { transform: translate(calc(-100% - 16px), -135%); }   /* the last label sits left of the pin, inside the map */
}
@media (max-width: 759px) { .route-stops { display: grid; gap: 10px; margin-top: 20px; } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Pattern ----------
   The brand's open repeat pattern as a faint texture: a colour shown through the pattern as a mask. */
.pattern {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--pattern-colour, var(--cream)); opacity: var(--pattern-opacity, .05);
  -webkit-mask: url(assets/pattern-mask.svg) 0 0 / 520px auto repeat; mask: url(assets/pattern-mask.svg) 0 0 / 520px auto repeat;
}
.pattern--drift { animation: drift 90s linear infinite; }
@keyframes drift { to { -webkit-mask-position: 520px 360px; mask-position: 520px 360px; } }
.range .pattern--drift { animation: drift-up 40s linear infinite; }
@keyframes drift-up { to { -webkit-mask-position: 0 -360.94px; mask-position: 0 -360.94px; } }
.enquire { position: relative; isolation: isolate; }
.enquire .pattern { --pattern-opacity: .03; }
/* The pattern fades out at the top and bottom edges, so the range above and the film below meet plain surface. */
.enquire::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, var(--surface), transparent 20%, transparent 80%, var(--surface)); }

/* ---------- Arrival (trial) ----------
   Pinned while it scrolls. main.js (Arrival) sets, from a smoothed scroll progress:
   --x drive-in offset, --yaw the turn (0 = side on, 90deg = back to the camera), --pitch the brake dip,
   --roll the lean in the turn, --spin wheels, --doors 0→1, --mist 0→1→0, --zoom/--tx/--ty/--ox/--oy the push
   through the doorway (a 2D zoom of the rendered scene), --head the heading. */
.arrival { --x: -120vw; --yaw: 0deg; --pitch: 0deg; --roll: 0deg; --spin: 0deg; --doors: 0; --mist: 0; --zoom: 1; --tx: 0px; --ty: 0px; --ox: 50%; --oy: 50%; --head: 0; position: relative; height: 340vh; background: var(--ink); }
/* The maroon of the steps melts into the night sky over Berlin. The veil scrolls in with the section's top edge and
   is gone by the time the stage pins, so it never covers the van. */
.arrival::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 55vh; z-index: 5; pointer-events: none; background: linear-gradient(180deg, var(--maroon), color-mix(in srgb, var(--maroon) 55%, transparent) 40%, transparent); }
.arrival-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; border-radius: inherit; isolation: isolate;
  /* Night over Berlin: ink at the top, warming to a faint maroon glow at the horizon (the dawn comes next). */
  background:
    radial-gradient(ellipse 90% 40% at 50% 62%, rgba(92, 26, 27, .55), transparent 70%),
    linear-gradient(180deg, #0f0f10 0%, #17131a 45%, #2a1418 62%, #0d0d0d 62.1%);
}
/* Berlin at twilight (Pexels, George Frewat), filling the sky behind the van: the skyline sits on the horizon,
   the photo is faded back, slightly desaturated and tinted night-to-maroon, so the red van stays the focus. */
.arrival-photo {
  position: absolute; left: -4%; right: -4%; top: 0; bottom: 33%; opacity: .7;
  background: url(assets/media/berlin-night.jpg) 50% 72% / cover no-repeat;
  filter: saturate(.85) contrast(1.05) brightness(1.05);
  transform: translateX(calc(var(--drift, 0) * -2%));
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 58%, transparent 98%); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 58%, transparent 98%);   /* the city emerges from the night above and fades into the street */
}
.arrival-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 15, 16, .35), rgba(92, 26, 27, .12) 65%, rgba(13, 13, 13, .45)); }
.arrival-street {
  position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background: linear-gradient(180deg, rgba(23, 23, 23, .55), #171717 12%, #0d0d0d);   /* the kerb softens into the city */
}
.arrival-street::after { content: ""; position: absolute; left: 0; right: 0; top: 30%; height: 3px; background: repeating-linear-gradient(90deg, rgba(239, 231, 218, .22) 0 46px, transparent 46px 92px); }

/* The camera: the rendered 3D scene is flattened here, so the final zoom is a clean 2D scale. */
.van-zoom {
  position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 42%;   /* camera just above roof height */
  transform: translate(var(--tx), var(--ty)) scale(var(--zoom)); transform-origin: var(--ox) var(--oy);
}
/* The van: a point on the street (the centre of its footprint); faces are placed around it in metres (--m). */
.van3d {
  --m: min(15vw, 12vh);   /* one metre; the 5.9 m side just fits a phone width */
  position: absolute; left: 50%; bottom: 29%; width: 0; height: 0; transform-style: preserve-3d;   /* van on the street in front of the skyline */
  transform: translateX(var(--x)) rotateY(var(--yaw)) rotateZ(var(--pitch)) rotateX(var(--roll));
}
.van3d > div { position: absolute; backface-visibility: hidden; }
.v-shadow {
  left: calc(var(--m) * -3.3); bottom: calc(var(--m) * -1.3); width: calc(var(--m) * 6.6); height: calc(var(--m) * 2.6);
  transform: rotateX(90deg); border-radius: 40%; background: radial-gradient(closest-side, rgba(0, 0, 0, .7), transparent); backface-visibility: visible !important;
}
.v-roof {
  left: calc(var(--m) * -2.675); bottom: calc(var(--m) * 1.36); width: calc(var(--m) * 4.125); height: calc(var(--m) * 2);
  transform: rotateX(90deg); border-radius: 6px; background: linear-gradient(90deg, #8f0015, #a3001a);
}
.v-side { left: calc(var(--m) * -2.95); bottom: calc(var(--m) * -.18); width: calc(var(--m) * 5.9); height: calc(var(--m) * 2.6); transform: translateZ(calc(var(--m) * 1)); }
.v-side-art { display: block; width: 100%; height: 100%; overflow: visible; }
.van-body { fill: var(--red); }   /* VELMARIN red, cream logo, no stripe */
.van-glass { fill: #1f2a2d; }
.van-glass--side { fill: #243034; }
.van-roofline { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 2; }
.van-trim { fill: #262626; }   /* the dark lower trim and rubbing strip */
.van-handle { fill: #1c1c1c; }
.van-marker { fill: #e8932a; }
.hub { fill: #8d877d; }
.van-line { fill: none; stroke: rgba(0, 0, 0, .28); stroke-width: 2; }
.van-light--tail { fill: var(--red-bright); stroke: rgba(0, 0, 0, .35); stroke-width: 1.5; }
.van-light--head { fill: #fff6d8; }
.van-dark, .tyre { fill: #141414; }
.van-arch { fill: #0b0b0b; }
.rim { fill: #bdb6aa; }
.spoke { stroke: #6d675f; stroke-width: 4; }
.wheel { transform: rotate(var(--spin)); }

/* The back: 2 m wide, 2.36 m from street to roof (matching the side artwork's outline); turned to face backwards and moved to the rear of the van. */
.v-back {
  left: calc(var(--m) * -1); bottom: 0; width: calc(var(--m) * 2); height: calc(var(--m) * 2.36);
  transform: translateX(calc(var(--m) * -2.675)) rotateY(-90deg); transform-style: preserve-3d;
}
.rear-body { position: absolute; left: 0; top: 0; width: 100%; height: 86%; border-radius: 14% 14% 3% 3% / 9% 9% 2% 2%; background: var(--red); box-shadow: inset 0 -10px 0 rgba(0, 0, 0, .12), inset 0 8px 0 rgba(255, 255, 255, .12); transform-style: preserve-3d; }
.rear-inside { position: absolute; left: 9%; top: 7%; width: 82%; height: 84%; overflow: hidden; background: #0c1719; transform: translateZ(1px); backface-visibility: hidden; }   /* a hair in front of the body, so Safari never has two shapes fighting for the same plane */
.rear-film.media { position: absolute; inset: 0; min-height: 0; opacity: .38; }   /* faint, like the hero */
/* No moving grain inside the van: blown up by the zoom, its jumps read as flicker. */
.rear-film.media::after { display: none; }
.rear-cold { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(214, 244, 250, .22), transparent 70%), linear-gradient(0deg, rgba(12, 23, 25, .6), transparent 50%); }
.rear-door { position: absolute; z-index: 2; top: 7%; width: 41%; height: 84%; transform-style: preserve-3d; }   /* open doors cover the tail lights */
.rear-door--l { left: 9%; transform-origin: 0 50%; transform: translateZ(2px) rotateY(calc(var(--doors) * -118deg)); }
.rear-door--r { left: 50%; transform-origin: 100% 50%; transform: translateZ(2px) rotateY(calc(var(--doors) * 118deg)); }
.door-face { position: absolute; inset: 0; backface-visibility: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 30%), var(--red); border: 1px solid rgba(0, 0, 0, .25); }
.rear-brake { position: absolute; z-index: 3; left: 43%; top: 1.5%; width: 14%; height: 2.4%; border-radius: 3px; background: #2a0006; box-shadow: inset 0 0 0 1px rgba(230, 30, 37, .7); }
.door-face--back { transform: rotateY(180deg); background: #7c0013; }
.door-window { position: absolute; left: 14%; top: 7%; width: 72%; height: 20%; border-radius: 6%; background: #1f2a2d; box-shadow: inset 0 0 0 3px rgba(239, 231, 218, .12); }
.door-emblem { position: absolute; left: 50%; top: 38%; width: 46%; height: auto; transform: translateX(-50%); }
.door-word { position: absolute; left: 0; right: 0; top: 46%; font: 700 calc(var(--m) * .085)/1.2 var(--punch); letter-spacing: .12em; text-transform: uppercase; color: var(--cream); text-align: center; }
.door-handle { position: absolute; top: 56%; width: 5%; height: 10%; border-radius: 3px; background: #c9c1b3; }
.rear-door--l .door-handle { right: 8%; }
.rear-door--r .door-handle { left: 8%; }
.rear-light { position: absolute; z-index: 1; top: 50%; width: 7%; height: 27%; border-radius: 3px 3px 2px 2px; background: linear-gradient(180deg, var(--red-bright) 0 62%, #f2efe8 62% 70%, #e8932a 70% 78%, var(--red-bright) 78%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 0 14px rgba(230, 30, 37, .5); }
.rear-light--l { left: 1.5%; }
.rear-light--r { right: 1.5%; }
.rear-bumper { position: absolute; left: -1%; width: 102%; top: 84%; height: 7%; border-radius: 3px 3px 6px 6px; background: linear-gradient(180deg, #262626 0 60%, #161616 60%); display: grid; place-items: center; }
.rear-plate { padding: 0 .6em; border-radius: 2px; background: var(--cream); color: var(--ink); font: 600 calc(var(--m) * .1)/1.5 var(--mono); letter-spacing: .08em; }
.rear-wheel { position: absolute; top: 89%; width: 17%; height: 11%; border-radius: 0 0 6px 6px; background: #121212; }
.rear-wheel--l { left: 6%; }
.rear-wheel--r { right: 6%; }

/* The cold breath: pale clouds billowing out of the doorway and sinking to the street. */
/* The mist gets a real box around the doorway (not a zero-size anchor): inside the 3D scene it is flattened to its
   own box, so anything outside that box would be cut off. It sits a little in front of the doorway's plane. */
.rear-mist { position: absolute; left: -90%; right: -90%; top: -40%; bottom: -60%; opacity: var(--mist); pointer-events: none; transform: translateZ(calc(var(--m) * .4)); }
/* Cold mist: loose wisps that roll out over the door sill, sink and spread along the street and thin out as they
   go, each on its own slow loop; the warp filter frays their edges so nothing reads as a circle. */
.rear-mist { filter: url(#mist-warp) blur(calc(var(--m) * .03)); }
.rear-mist i {
  --sx: 0; --ex: 0; --ey: 1; --w: 1.6; --d: 7s;
  position: absolute; left: calc(50% - var(--m) * var(--w) / 2 + var(--m) * var(--sx)); top: 52%;
  width: calc(var(--m) * var(--w)); height: calc(var(--m) * var(--w) * .42); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(232, 243, 246, .3), rgba(232, 243, 246, .1) 55%, transparent);
  animation: mist-roll var(--d) cubic-bezier(.3, .1, .4, 1) infinite; animation-delay: var(--delay, 0s);
}
.rear-mist i:nth-child(1) { --sx: -.3; --ex: -1.4; --ey: .8; --w: 1.8; --d: 7.5s; }
.rear-mist i:nth-child(2) { --sx: .3; --ex: 1.5; --ey: .85; --w: 2; --d: 8.5s; --delay: -2s; }
.rear-mist i:nth-child(3) { --sx: 0; --ex: -.4; --ey: 1; --w: 2.4; --d: 9s; --delay: -4.5s; }
.rear-mist i:nth-child(4) { --sx: .1; --ex: .6; --ey: .9; --w: 1.4; --d: 6.5s; --delay: -1s; }
.rear-mist i:nth-child(5) { --sx: -.2; --ex: -2; --ey: .95; --w: 2.6; --d: 11s; --delay: -6s; }
.rear-mist i:nth-child(6) { --sx: .2; --ex: 2.1; --ey: .9; --w: 2.4; --d: 10s; --delay: -3.5s; }
.rear-mist i:nth-child(7) { --sx: 0; --ex: .2; --ey: -.7; --w: 1.1; --d: 6s; --delay: -2.5s; }   /* a thin wisp rising off the cold air */
.rear-mist i:nth-child(8) { --sx: -.1; --ex: -.5; --ey: -.5; --w: .9; --d: 7s; --delay: -5s; }
@keyframes mist-roll {
  0% { transform: translate(0, 0) scale(.35, .5); opacity: 0; }
  18% { opacity: 1; }
  70% { opacity: .55; }
  100% { transform: translate(calc(var(--m) * var(--ex)), calc(var(--m) * var(--ey))) scale(1.7, 1.25); opacity: 0; }
}

.arrival-copy {
  position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 0 var(--gutter); text-align: center;
  opacity: var(--head); transform: translateY(calc((1 - var(--head)) * 24px));
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(12, 12, 12, .55), rgba(12, 12, 12, .25));
}
.arrival-copy .label { color: var(--cyan); }
.arrival-copy .big { max-width: 16ch; }
.arrival-copy .lead { color: var(--muted-on-ink); }

/* ---------- Enquiry ----------
   One centred column: emblem, heading, then the form in the middle of the screen, on a full-width ink
   background with a warm maroon glow behind the form and the brand pattern drifting across it. */
.enquire {
  padding-block: var(--section);
  background: var(--surface);   /* ink at both edges, so it meets the range above and the film below without a seam */
}
/* The warm glow behind the form; it gives way as the surface itself turns red towards the film. */
.enquire::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: calc(1 - var(--warm, 0)); background: radial-gradient(ellipse 85% 48% at 50% 55%, color-mix(in srgb, var(--red) 55%, var(--maroon)) 0%, var(--maroon) 38%, color-mix(in srgb, var(--maroon) 45%, var(--ink)) 62%, transparent 92%); }
/* Enquiry and film share one surface, like story and range: ink behind the form, warming back to red as the
   film comes up the screen (main.js sets --warm 0→1). */
.enquire, .reel { --surface: color-mix(in srgb, var(--red) calc(var(--warm, 0) * 100%), var(--ink)); }
.reel { background: var(--surface); }
.enquire .label, .enquire .lead { color: var(--muted-on-ink); }
.enquire-grid { display: grid; justify-items: center; gap: clamp(36px, 5vw, 56px); }
.enquire-head { display: grid; justify-items: center; text-align: center; }
.enquire-emblem { width: clamp(76px, 8vw, 108px); height: auto; margin-bottom: 22px; }
.js .enquire-emblem.reveal { transform: translateY(26px) scale(.85) rotate(-6deg); }
.js .enquire-emblem.reveal.is-in { transform: none; }
/* The brand film's push-in: the archer comes slowly closer as the form fills in (main.js sets --draw 0→1). */
.enquire-emblem.bow { scale: calc(1 + var(--draw, 0) * .1); transition: transform .9s var(--ease), opacity .9s var(--ease), scale 1.1s var(--ease); }
.bow-mini { scale: calc(1 + var(--draw, 0) * .12); transition: scale 1.1s var(--ease); }
.enquire .big { margin: var(--stack-gap) 0 16px; font-size: var(--h1); max-width: 16ch; }
.enquire-mail { margin-top: 14px; }

/* The archer draws the bow as the form fills in, and lets go on send (main.js, Bow). */
.bow { overflow: visible; color: var(--cream); }
.bow-arrow line, .bow-fletch { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; fill: none; }
.bow-fletch { stroke-width: 1; }
.bow-head { fill: currentColor; }

/* Send button: an arrow that is pulled back on hover and shot forward on send. */
.btn--arrow { overflow: hidden; }
.btn-arrow { width: 40px; height: 12px; flex: none; overflow: visible; transition: transform .35s var(--ease); }
.btn-arrow line, .btn-fletch { stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }
.btn-fletch { stroke-width: 1.5; }
.btn-arrow path:not(.btn-fletch) { fill: currentColor; }
.btn--arrow:hover .btn-arrow { transform: translateX(-8px); }
.btn--arrow.is-fired .btn-arrow { animation: btn-shoot .7s var(--ease) both; }
@keyframes btn-shoot {
  0% { transform: translateX(-10px); }
  45% { transform: translateX(420px); opacity: 1; }
  46% { opacity: 0; transform: translateX(-60px); }
  100% { opacity: 1; transform: none; }
}

/* The shot: an arrow flying from the emblem into the target (placed and moved by main.js). */
.flying-arrow { position: absolute; z-index: 5; left: 0; top: 0; width: 84px; height: 14px; margin: -7px 0 0 -84px; transform-origin: 100% 50%; pointer-events: none; color: var(--ink); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .25)); }
.flying-arrow line, .flying-arrow .fl { stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; fill: none; }
.flying-arrow path:not(.fl) { fill: currentColor; }

/* After sending, the card turns into the target. */
.form-fields { display: grid; gap: 16px; }
.field--inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.field--inline .field-label { margin: 0; }
.cf-turnstile:empty { display: none; }
.send-row { display: flex; align-items: center; gap: 14px; }
.bow-mini { flex: none; width: 46px; height: auto; overflow: visible; color: var(--red); }

/* Desktop: heading and archer on the left, held in place while the form on the right is filled in,
   so the bow can be seen drawing back. The whole section fits one screen. */
@media (min-width: 1000px) {
  .enquire { padding-block: clamp(72px, 9vh, 110px); }
  .enquire-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; justify-items: stretch; gap: clamp(40px, 5vw, 88px); }
  .enquire-head { position: sticky; top: 110px; justify-items: start; text-align: left; }
  .enquire-head .enquire-emblem { width: clamp(150px, 13vw, 210px); margin-bottom: 28px; }
  .enquire .big { font-size: var(--h2); max-width: 13ch; margin-top: 12px; }
  .enquire .form { width: 100%; }
  .bow-mini { display: none; }
}
@media (max-width: 480px) { .bow-mini { width: 42px; } .form .chips { gap: 6px; } .form .chip span { padding: 9px 12px; } }
.form.is-sent .form-fields { display: none; }
.form-done[hidden] { display: none; }
.form-done { display: grid; justify-items: center; align-content: center; gap: 10px; min-height: inherit; text-align: center; padding-block: 12px; }
.form-done .label { color: var(--red); }
.done-title { font: 700 var(--h3)/1.1 var(--display); margin: 0; }
.done-title:focus { outline: none; }
.done-note { font-size: .875rem; color: color-mix(in srgb, var(--ink) 65%, var(--cream)); }
.form-done .btn { margin-top: 8px; }
.target { position: relative; width: clamp(160px, 22vw, 220px); margin-bottom: 14px; }
.target-rings { display: block; width: 100%; height: auto; overflow: visible; }
.ring-a { fill: var(--red); }
.ring-b { fill: var(--cream); }
.target-rings circle:first-child { stroke: var(--ink); stroke-width: 1.5; }
.target-arrow { opacity: 0; }
.target-arrow line, .target-arrow path { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; fill: none; }
.target.is-hit .target-arrow { opacity: 1; }
.target.is-hit .target-rings { animation: target-thud .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes target-thud { 0% { transform: translate(3px, 2px) scale(.97); } 35% { transform: translate(-2px, -1px) rotate(-1.5deg); } 70% { transform: translate(1px, 0) rotate(.6deg); } 100% { transform: none; } }
.target-stamp { position: absolute; right: -34%; bottom: -12%; width: 62%; }
.target-stamp .stamp { position: static; display: block; width: 100%; --stamp-rot: 14deg; transition: opacity .25s ease-in, transform .38s cubic-bezier(.55, 0, .75, .4); }
.target-stamp:not(.is-in) .stamp { opacity: 0; transform: rotate(-4deg) scale(1.6); }
.form-done > :not(.target) { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.form-done:not(.is-in) > :not(.target) { opacity: 0; transform: translateY(12px); }
.enquire-mail a { color: var(--cyan); font-weight: 600; }
.enquire .form { width: min(760px, 100%); box-shadow: 0 40px 100px rgba(0, 0, 0, .45); }
.form { display: grid; gap: 18px; padding: clamp(22px, 3vw, 36px); background: var(--cream); color: var(--ink); border-radius: 22px; color-scheme: light; }
.form :focus-visible { outline-color: var(--red); }
.form a { color: var(--red); }
.field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend, .field-label { font-weight: 600; font-size: .9375rem; padding: 0; margin-bottom: 2px; }
.optional { font-weight: 400; color: color-mix(in srgb, var(--ink) 70%, var(--cream)); }
.field-row { display: grid; gap: 18px; }
@media (min-width: 600px) { .field-row { grid-template-columns: 1fr 1fr; } }
input:not([type="checkbox"]), textarea { width: 100%; min-height: 46px; padding: 12px 14px; border: 1.5px solid color-mix(in srgb, var(--ink) 28%, transparent); border-radius: 12px; background: #fff; font: inherit; color: var(--ink); }
input:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 25%, transparent); }
[aria-invalid="true"] { border-color: var(--red) !important; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span { padding: 10px 18px; border: 1.5px solid color-mix(in srgb, var(--ink) 28%, transparent); border-radius: 999px; font-weight: 500; transition: all .2s var(--ease); }
.chip input:checked + span { background: var(--cyan); border-color: var(--ink); color: var(--ink); }
.chip input:focus-visible + span { outline: 2.5px solid var(--red); outline-offset: 2px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .875rem; line-height: 1.5; }
.consent input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--red); flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.5em; font-weight: 600; }
.form-status[data-state="error"] { color: var(--red); }
.form-status[data-state="ok"] { color: var(--teal); }

/* ---------- Closing strip: frosted glass ----------
   Edge to edge, a short wide strip on desktop; a squarer pane on phones. */
.frost-hint { margin-top: 14px; font: 500 .8125rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); }
.frost-pane { position: relative; margin-top: clamp(32px, 5vh, 56px); height: clamp(220px, 34vh, 340px); background: #2a2c2e; box-shadow: 0 30px 70px rgba(0, 0, 0, .35); touch-action: pan-y; cursor: crosshair; }
.frost-pane canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 700px) { .frost-pane { height: auto; aspect-ratio: 1; } }

/* ---------- Footer ---------- */
.footer { background: var(--ink); padding-top: 64px; overflow: clip; border-top: 2px solid var(--cyan); }
.footer-grid { display: grid; gap: 28px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer .label { color: var(--muted-on-ink); margin-bottom: 8px; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.clock { font: 700 1.5rem var(--punch); letter-spacing: .04em; color: var(--cyan); }
.footer-word { width: min(1240px, 100%); margin: 64px auto 36px; padding-inline: var(--gutter); }
.footer-word img { width: 100%; height: auto; }
/* The wordmark wipes in from the left when it comes into view. The clip sits on the image, not on the
   observed box, because a fully clipped element never counts as visible. */
.js .wipe > img { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s var(--ease); }
.js .wipe.is-in > img { clip-path: inset(0 0 0 0); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-block: 22px 28px; font-size: .8125rem; color: var(--muted-on-ink); border-top: 1px solid color-mix(in srgb, var(--cream) 12%, transparent); }

/* ---------- Stacked sections ----------
   Each band that changes colour overlaps the one before it with rounded top corners and a soft shadow,
   so the page reads as layers laid on top of each other rather than hard cuts. */
.steps {   /* only where the colour changes */
  position: relative; z-index: 1;
  margin-top: calc(-1 * var(--radius-section));
  border-radius: var(--radius-section) var(--radius-section) 0 0;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, .28);
}
.pattern { border-radius: inherit; }
/* Space at the foot of the section underneath, so the overlap never covers its content. */
.story { padding-bottom: clamp(48px, 7vh, 80px); }   /* flows straight into the range, no overlap to clear */

/* ---------- Reveals ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Legal pages (shared) ---------- */
/* Impressum and Datenschutz sit on ink, under the same red header as the main page. */
.page-legal { background: var(--ink); }
.page-legal .site-header { background: var(--red); }
.page-legal .kicker, .page-legal .legal-note { color: var(--muted-on-ink); }
.page-legal .legal a { color: var(--cyan); }
.page-legal .todo { background: color-mix(in srgb, var(--gold) 38%, transparent); color: var(--cream); }
.site-header { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--gutter); }
.site-header .brand img { height: 26px; }
.btn--ghost { border-color: var(--cream); color: var(--cream); }
.section { padding-block: clamp(72px, 10vw, 120px); }
.kicker { font: 500 .8125rem var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted-on-red); }
.legal h1 { font-size: var(--h2); margin: 14px 0 24px; }
.legal h2 { font-size: 1.375rem; margin: 36px 0 10px; }
.legal p, .legal li { max-width: 68ch; }
.legal-note { padding: 14px 18px; border: 1.5px dashed color-mix(in srgb, var(--cream) 30%, transparent); border-radius: 12px; color: var(--muted-on-red); }
.legal-list { padding-left: 1.2em; display: grid; gap: 10px; }
.todo { background: color-mix(in srgb, var(--gold) 45%, transparent); padding: 0 4px; border-radius: 4px; }

/* ---------- Reduced motion: everything at rest, nothing scroll-driven. ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js [data-split] .char, .js .enquire-emblem.reveal { opacity: 1; transform: none; }
  .form-done > :not(.target) { opacity: 1 !important; transform: none !important; }
  .target-stamp .stamp { opacity: .92 !important; transform: rotate(14deg) !important; }
  .js .wipe > img { clip-path: none; }
  .lw { opacity: 1; }
  .lw--strike svg { clip-path: none; }
  .delivery { --dawn: .7; }
  .arrival { height: auto; --x: 0vw; --yaw: 90deg; --doors: 1; --head: 1; }
  .arrival-stage { position: relative; height: auto; min-height: 100svh; }
  .arrival-copy { position: relative; inset: auto; padding-block: 14vh 52vh; background: none; }
  .route-path { stroke-dashoffset: 0; }
  .board-dot { animation: none; }
  .hero { height: auto; }
  .hero-stage { position: relative; height: auto; min-height: 88svh; padding-block: 120px 80px; }
  .hero-film.media { clip-path: none; }
  .hero-tint, .hero-seal, .hero-open { display: none; }
  .hero-shade, .hero-end { opacity: 1; transform: none; }
  .hero-end { position: relative; }
  .steps { height: auto; }
  .steps-sticky { position: relative; height: auto; }
  .stack { height: auto; display: grid; gap: 10px; padding-block: 32px; }
  .layer { position: relative; top: 0; margin: 0; transform: none; }
  .layer-note { opacity: 1; transform: translateY(-50%); }
  .pin-foot { display: none; }
  .js .lid:not(.is-in) .sticker { opacity: 1; }
  .sticker { transform: rotate(var(--rot)); }
  .ticker-track { flex-wrap: wrap; width: auto; justify-content: center; }
}