:root{
  /* Pure black, matching the render's own background exactly, so the frame
     letterboxes into the page without a visible edge. */
  --bg: #000000;
  --ink: #e9e7e0;
  --muted: #8b8a92;
  --gold-1: #7a5a20;
  --gold-2: #e8c877;
  --gold-3: #fff3c6;
  --de-black: #1a1a1c;
  --de-red: #b3121c;
  --de-gold: #e2b33c;
  --ease: cubic-bezier(.16,.8,.24,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background: var(--bg); }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family:'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}

::selection{ background: var(--gold-2); color:#1a1408; }

/* film grain */
.grain{
  position:fixed; inset:0; z-index:50; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* ---------- hero: tall section, pinned stage ---------- */
.hero{
  position:relative;
  /* 116 frames spread over 200vh of scrolling — about 15px of scroll per
     frame, which reads as a deliberate reveal rather than a flick. */
  height: 300vh;
}
.hero__sticky{
  position:sticky; top:0;
  height:100vh;
  min-height:540px;
  overflow:hidden;
  background:#000;
}

/* Layer 1 — the animation, right at the bottom of the stack. */
.hero__canvas{
  position:absolute; inset:0;
  z-index:0;
  width:100%; height:100%;
  display:block;
  background:#000;
  /* never intercepts a gesture: scrolling and taps behave as if it weren't
     there, which is part of not reading as an embedded player */
  pointer-events:none;
  opacity:0;
  transition: opacity .6s var(--ease);
}
.hero__canvas.is-ready{ opacity:1; }

/* Layer 2 — a little ground under the type, over the animation. */
.hero__vignette{
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.55) 24%, transparent 46%),
    linear-gradient(0deg, rgba(0,0,0,.75) 0%, transparent 24%);
}

/* Layer 3 — type. */
.hero__ui{
  position:absolute; inset:0;
  z-index:2;
  display:flex; flex-direction:column;
  align-items:center;
  padding: clamp(26px,5vh,54px) 20px clamp(16px,3.5vh,32px);
  text-align:center;
  pointer-events:none;
}

/* ---------- language switch ---------- */
.lang{
  position:fixed; top:0; right:0;
  z-index:40;
  display:flex; align-items:center; gap:9px;
  padding: clamp(16px,2.6vh,26px) clamp(18px,3vw,34px);
}
.lang__btn{
  background:none; border:0; padding:2px 1px; cursor:pointer;
  font-family:'Inter', sans-serif; font-size:11px; font-weight:400;
  letter-spacing:.22em; color:#5f5e66;
  transition: color .3s;
}
.lang__btn:hover{ color:#a9a7b0; }
.lang__btn.is-active{ color: var(--gold-2); }
.lang__sep{ width:1px; height:11px; background:#3a3941; }

/* ---------- brand ---------- */
.brand{ display:flex; flex-direction:column; align-items:center; }
.brand__img{
  display:block;
  width: clamp(260px, 38vw, 520px);
  height:auto;
  filter: drop-shadow(0 4px 30px rgba(210,170,90,.20));
}

/* ---------- tagline ---------- */
/* Set well clear of the wordmark and in a quiet, wide-tracked sans: the logo is
   an ornate script, so a second decorative face beside it competes instead of
   supporting. This reads as a subtitle, not a rival headline. */
.tagline{
  margin: clamp(26px,5vh,54px) 0 0;
  font-family:'Inter', ui-sans-serif, system-ui, sans-serif;
  font-weight:200;
  font-size: clamp(11px,1.35vw,15px);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:#c9c6c0;
  text-indent:.42em;          /* balances the trailing letter-space */
  text-shadow: 0 2px 24px rgba(0,0,0,.9);
}

/* Desktop: wordmark and tagline share one line.
   On a wide screen the frame is fitted to its height, so the car reaches much
   further up than on a phone — a tagline stacked underneath lands on the bonnet.
   Side by side the lockup is shorter than the wordmark alone was, and reads
   wider and more deliberate. The breakpoint matches the desktop row of FRAMING
   in hero-video.js, so type and picture always agree on the layout.
   Must come after the .tagline block above: same specificity, so order decides. */
@media (min-width:1101px){
  .brand{
    flex-direction:row;
    align-items:center;
    gap: clamp(30px,3.4vw,58px);
  }
  /* capped against the viewport height as well — the clearance to the car is a
     vertical budget, and short desktop windows have the least of it */
  .brand__img{ max-height:14vh; width:auto; max-width:46vw; }
  .tagline{
    margin:0 -.42em 0 0;   /* trailing letter-space trimmed instead of indented, */
    text-indent:0;         /* so the pair stays optically centred on the screen  */
    white-space:nowrap;
  }
}

/* ---------- build number ---------- */
/* Replaces the scroll hint: how many will exist, counting up with the reveal. */
.counter{
  margin:auto 0 0;
  font-family:'Inter', ui-sans-serif, system-ui, sans-serif;
  font-weight:300;
  font-size: clamp(15px,1.8vw,20px);
  letter-spacing:.16em;
  color: var(--gold-2);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 22px rgba(0,0,0,.9);
}
.counter__total{ color: rgba(232,200,119,.55); }
/* Inter carries № in its cyrillic subset, which Google Fonts serves on demand —
   so it is the real typeface here, not a system substitute. */
.counter__no{ margin-right:.34em; }

/* ---------- sections revealed on entry ---------- */
.reveal{
  opacity:0;
  transform: translateY(26px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- quote ---------- */
.quote{
  padding: clamp(90px,16vh,180px) 24px clamp(70px,12vh,140px);
  display:flex; justify-content:center;
}
.quote__figure{
  position:relative;
  margin:0;
  max-width: 60ch;
  padding-left: clamp(22px,4vw,44px);
}
/* The flag is the quotation rule itself: black, red and gold blending down the
   left edge of Mezger's own words. Drawn as a pseudo-element rather than
   border-image, which degrades to an invisible border where it is unsupported. */
.quote__figure::before{
  content:"";
  position:absolute; left:0; top:4px; bottom:4px;
  width:2px;
  background: linear-gradient(180deg, var(--de-black), var(--de-red) 50%, var(--de-gold));
  opacity:.8;
}
.quote__text{
  margin:0;
  font-family:'Cormorant Garamond', serif;
  font-style: italic;
  font-weight:300;
  font-size: clamp(21px,2.6vw,34px);
  line-height:1.5;
  letter-spacing:.005em;
  color:#dcdad4;
}
.quote__by{
  margin-top: clamp(20px,3vh,30px);
  display:flex; flex-direction:column; gap:5px;
}
.quote__name{
  font-size:12.5px; letter-spacing:.28em; text-transform:uppercase;
  color: var(--gold-2);
}
.quote__role{
  font-size:12px; letter-spacing:.06em; color:#6f6e76;
}

/* ---------- contact ---------- */
.contact{
  padding: 0 24px clamp(90px,14vh,150px);
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.contact__title{
  margin:0;
  font-family:'Cormorant Garamond', serif;
  font-weight:400;
  font-size: clamp(24px,3.4vw,38px);
  letter-spacing:.14em;
}
.contact__lead{
  margin:10px 0 clamp(26px,4vh,40px);
  color: var(--muted); font-size:14px; font-weight:300;
}

.notify{ width:min(520px,100%); text-align:left; }
.notify__field{ margin-bottom:16px; }
.notify__field label{
  display:block; margin-bottom:8px;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
}
.notify__optional{ letter-spacing:.08em; text-transform:none; color:#5c5b62; }
.notify input,
.notify textarea{
  width:100%;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(232,200,119,.22);
  border-radius:2px;
  padding:14px 16px;
  color:var(--ink);
  font-family:'Inter', sans-serif; font-size:14px;
  outline:0;
  transition: border-color .3s;
  resize:vertical;
}
.notify input::placeholder,
.notify textarea::placeholder{ color:#5c5b62; }
.notify input:focus,
.notify textarea:focus{ border-color: rgba(232,200,119,.62); }
.notify button{
  width:100%;
  margin-top:6px;
  border:0; cursor:pointer;
  padding:15px 20px;
  background: linear-gradient(100deg, var(--gold-1), var(--gold-2));
  color:#1a1408; font-weight:500; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase;
  transition: filter .25s, transform .25s;
}
.notify button:hover{ filter:brightness(1.12); }
.notify button:active{ transform:scale(.99); }
.notify__status{
  min-height:18px; margin:12px 0 0; font-size:12.5px; color:var(--gold-2); text-align:center;
}
.notify__status[data-state="error"]{ color:#e07a7a; }

/* ---------- footer ---------- */
.footer{
  position:relative;
  background: var(--bg);
  padding:30px 20px 38px;
  text-align:center;
}
.footer p{ margin:0; color:#4d4c53; font-size:11.5px; letter-spacing:.06em; }

@media (max-width:560px){
  .notify button{ padding:14px; }
  /* On a phone the wordmark is nearly screen-wide, so its upswept arrow reaches
     under DE | EN. Drop the whole hero lockup below the switch. */
  .hero__ui{ padding-top: clamp(62px,10vh,86px); }
}

@media (max-height:680px){
  .tagline{ margin-top: clamp(16px,3vh,28px); }
}

@media (prefers-reduced-motion: reduce){
  /* the frame sequence is driven by the visitor's own scrolling, so it stays;
     only the unprompted fades are dropped */
  .hero__canvas{ transition:none; opacity:1; }
  .reveal{ transition:none; opacity:1; transform:none; }
}