/* =================================================================
   GARAGE 1965 — Rallija vēstures ekspozīcija Liepājā
   Dark industrial · graphite & bone · rally red
   ================================================================= */

/* ---------- TOKENS ---------- */
:root{
  --ink:        #0a0a0c;   /* deepest background */
  --graphite:   #121216;
  --graphite-2: #1a1a1f;
  --graphite-3: #24242b;
  --line:       #2c2c33;
  --steel:      #3a3a43;

  --bone:       #ece6da;   /* primary warm text */
  --bone-soft:  #c8bfae;
  --bone-mute:  #8d8678;
  --beige:      #c9b896;

  --red:        #d8211f;
  --red-bright: #f23529;
  --red-deep:   #8c1714;

  --maxw: 1320px;
  --pad:  clamp(20px, 5vw, 90px);

  --ff-display: "Anton", "Oswald", Impact, sans-serif;
  --ff-head:    "Oswald", "Archivo", sans-serif;
  --ff-body:    "Archivo", system-ui, sans-serif;
  --ff-mono:    "Space Mono", ui-monospace, monospace;

  --ease:    cubic-bezier(.2,.7,.2,1);
  --ease-io: cubic-bezier(.16,1,.3,1);
}

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--ff-body);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
svg{ display:block; }
::selection{ background:var(--red); color:#fff; }

/* keyboard focus — high-contrast bone ring, clears button overflow/shadow */
:focus-visible{ outline:2px solid var(--bone); outline-offset:3px; border-radius:2px; }
a:focus-visible,.btn:focus-visible,.nav__link:focus-visible,.nav__burger:focus-visible,
.social__link:focus-visible,.closing__navlink:focus-visible{ outline:2px solid var(--bone); outline-offset:3px; }
:focus:not(:focus-visible){ outline:none; }

/* asphalt base texture under everything */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(60,55,48,.16), transparent 60%),
    radial-gradient(100% 60% at 80% 110%, rgba(216,33,31,.05), transparent 55%);
}

/* =================================================================
   ATMOSPHERE OVERLAYS (film grain, light leak, vignette, flicker)
   ================================================================= */
/* Below the nav (110) and mobile menu (109) so UI stays crisp, above all content */
.fx-grain,.fx-leak,.fx-vignette,.fx-flicker{
  position:fixed; inset:-50px; z-index:96; pointer-events:none;
}
.fx-grain{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.04; mix-blend-mode:overlay;
  animation:grain 0.6s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}   25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}
  100%{transform:translate(3%,1%)}
}
.fx-leak{
  background:
    radial-gradient(40% 50% at 15% 20%, rgba(255,180,120,.10), transparent 70%),
    radial-gradient(45% 40% at 88% 80%, rgba(216,33,31,.08), transparent 70%);
  mix-blend-mode:screen; opacity:.7;
  animation:leak 16s ease-in-out infinite alternate;
}
@keyframes leak{
  0%{transform:translate(0,0) scale(1); opacity:.55}
  50%{transform:translate(2%,-1.5%) scale(1.08); opacity:.8}
  100%{transform:translate(-1.5%,1%) scale(1.03); opacity:.6}
}
.fx-vignette{
  background:radial-gradient(115% 95% at 50% 42%, transparent 52%, rgba(0,0,0,.55) 100%);
  z-index:95;
}
/* subtle old-film luminance flicker */
.fx-flicker{
  background:#000; mix-blend-mode:multiply; opacity:0;
  animation:flicker 7s steps(1) infinite;
}
@keyframes flicker{
  0%,100%{opacity:0} 2%{opacity:.06} 3%{opacity:0} 38%{opacity:0}
  39%{opacity:.05} 40%{opacity:0} 72%{opacity:0} 73%{opacity:.08} 74%{opacity:0}
}

/* scroll progress hairline */
.scroll-rail{ position:fixed; top:0; left:0; right:0; height:2px; z-index:130; background:transparent; }
.scroll-rail__fill{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--red-deep),var(--red)); }

/* =================================================================
   MEDIA SYSTEM (blur-up, ken burns, b&w, reveal, parallax)
   ================================================================= */
.media{ position:relative; width:100%; height:100%; overflow:hidden; background:var(--graphite); }
.media img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  opacity:0; transition:opacity 1s var(--ease);
}
.media::before{ /* LQIP blur-up */
  content:""; position:absolute; inset:0;
  background:var(--lqip) center/cover no-repeat;
  filter:blur(22px) saturate(1.25); transform:scale(1.15);
  transition:opacity 1.1s var(--ease); z-index:0;
}
.media.loaded img{ opacity:1; }
.media.loaded::before{ opacity:0; }
.media img{ position:relative; z-index:1; }

/* grain-ish contrast tone on every photo to bind palette */
.media::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10,10,12,.18), transparent 28%, transparent 72%, rgba(10,10,12,.42)),
    radial-gradient(120% 120% at 50% 50%, transparent 60%, rgba(10,10,12,.30));
  mix-blend-mode:multiply;
}

/* Ken Burns slow zoom */
.media.kb img{ animation:kenburns 26s ease-in-out infinite alternate; transform-origin:60% 50%; }
@keyframes kenburns{ from{transform:scale(1.02)} to{transform:scale(1.14)} }

/* B&W -> color on reveal */
.media.bw img{ filter:grayscale(1) contrast(1.08) brightness(.92); }
.media.bw.in img{ filter:grayscale(0) contrast(1.02) brightness(1); transition:filter 1.8s var(--ease); }

/* detail close-up crop */
.media.detail img{ object-position:62% 70%; transform:scale(1.9); }
.media.detail.kb img{ animation:kenburns-detail 24s ease-in-out infinite alternate; }
@keyframes kenburns-detail{ from{transform:scale(1.8)} to{transform:scale(2.05)} }

.media__tag{
  position:absolute; left:14px; bottom:14px; z-index:4;
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bone); padding:6px 11px;
  background:rgba(10,10,12,.55); backdrop-filter:blur(4px);
  border:1px solid rgba(236,230,218,.18); border-left:2px solid var(--red);
  opacity:0; transform:translateY(8px); transition:.7s var(--ease) .5s;
}
.in .media__tag,.loaded .media__tag{ opacity:1; transform:translateY(0); }

/* ---------- REVEAL ENGINE ---------- */
[data-reveal]{ opacity:0; }
[data-reveal="fade"]{ transition:opacity 1s var(--ease-io); }
[data-reveal="rise"]{ transform:translateY(46px); transition:opacity 1.1s var(--ease-io), transform 1.1s var(--ease-io); }
[data-reveal="from-left"]{ transform:translateX(-70px); filter:blur(6px); transition:opacity 1.2s var(--ease-io), transform 1.2s var(--ease-io), filter 1.2s var(--ease-io); }
[data-reveal="from-right"]{ transform:translateX(70px); filter:blur(6px); transition:opacity 1.2s var(--ease-io), transform 1.2s var(--ease-io), filter 1.2s var(--ease-io); }
[data-reveal="from-bottom"]{ transform:translateY(80px) scale(.96); filter:blur(5px); transition:opacity 1.2s var(--ease-io), transform 1.2s var(--ease-io), filter 1.2s var(--ease-io); }
[data-reveal="pop"]{ transform:scale(.82); transition:opacity .7s var(--ease-io), transform .85s var(--ease-io); }
[data-reveal="clip-right"]{ clip-path:inset(0 100% 0 0); transition:clip-path 1.4s var(--ease-io), opacity .4s; }
[data-reveal="clip-up"]{ clip-path:inset(100% 0 0 0); transition:clip-path 1.5s var(--ease-io), opacity .4s; }

[data-reveal].in{ opacity:1; transform:none; filter:none; clip-path:inset(0 0 0 0); }

/* ---------- BUTTONS ---------- */
.btn{
  --bg:var(--red); position:relative; display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--ff-head); font-weight:600; font-size:.92rem; letter-spacing:.14em;
  text-transform:uppercase; padding:1.05em 1.7em; cursor:pointer; overflow:hidden;
  border:1px solid transparent; transition:.5s var(--ease); isolation:isolate;
}
.btn svg{ width:1.2em; height:1.2em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .5s var(--ease); }
.btn__pin{ fill:none; }
.btn--primary{ background:var(--red); color:#fff; box-shadow:0 12px 30px -16px rgba(0,0,0,.8); }
.btn--primary::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--red-bright); transform:translateX(-101%); transition:transform .5s var(--ease); }
.btn--primary:hover::before{ transform:translateX(0); }
.btn--primary:hover{ box-shadow:0 16px 38px -16px rgba(0,0,0,.9); }
.btn--primary:hover .btn__arrow{ transform:translateX(5px); }
.btn--ghost{ background:transparent; color:var(--bone); border-color:rgba(236,230,218,.32); }
.btn--ghost:hover{ border-color:var(--bone); background:rgba(236,230,218,.06); }
.btn--ghost:hover .btn__arrow{ transform:translateX(5px); }

/* ---------- SHARED TYPE ---------- */
.mono{ font-family:var(--ff-mono); }
.kicker{
  display:inline-flex; align-items:center; gap:.7em;
  font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:var(--bone-mute);
  margin-bottom:1.4em;
}
.kicker .tick,.tick{ display:inline-block; width:26px; height:1px; background:var(--red); }
.lead{ font-size:clamp(1.05rem,1.7vw,1.4rem); line-height:1.75; color:var(--bone-soft); font-weight:300; }
.lead strong{ color:var(--bone); font-weight:600; }
.lead em{ color:var(--red-bright); font-style:normal; }
.dropline{ color:var(--bone); font-weight:600; }

/* blueprint stroke primitives */
.bp-line{ stroke:rgba(236,230,218,.20); stroke-width:1; stroke-dasharray:var(--len,1600); stroke-dashoffset:var(--len,1600); }
.bp-tick{ stroke:var(--red); stroke-width:2; stroke-dasharray:80; stroke-dashoffset:80; }
.bp-ring{ stroke:rgba(236,230,218,.35); stroke-width:1; fill:none; stroke-dasharray:200; stroke-dashoffset:200; }
.in .bp-line,.bp.in .bp-line{ animation:draw 2.2s var(--ease-io) forwards; }
.in .bp-tick{ animation:draw 1s var(--ease-io) .3s forwards; }
.in .bp-ring{ animation:draw 1.6s var(--ease-io) .2s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* race number badge */
.racebadge{
  position:absolute; display:grid; place-items:center; width:88px; height:88px; z-index:6;
}
.racebadge svg{ position:absolute; inset:0; width:100%; height:100%; }
.racebadge__ring{ fill:rgba(10,10,12,.78); stroke:var(--red); stroke-width:3; stroke-dasharray:276; stroke-dashoffset:276; }
.in .racebadge__ring{ animation:draw 1.4s var(--ease-io) forwards; }
.racebadge b{ font-family:var(--ff-display); font-size:2.1rem; color:var(--bone); line-height:1; }
.racebadge--sm{ width:66px; height:66px; }
.racebadge--sm b{ font-size:1.5rem; }

/* =================================================================
   NAV
   ================================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:110;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad); transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(10,10,12,.82); -webkit-backdrop-filter:blur(12px) saturate(1.2); backdrop-filter:blur(12px) saturate(1.2);
  border-bottom-color:var(--line); padding-top:12px; padding-bottom:12px;
}
/* While the off-canvas menu is open, the nav must NOT have backdrop-filter:
   it would become the containing block for the fixed menu panel and break it. */
.nav--menu-open{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:transparent !important; }
.nav__brand{ display:flex; align-items:center; gap:.7em; }
.nav__logo{ height:26px; width:auto; display:block; }
.nav.scrolled .nav__logo{ height:23px; }
.nav__brand-mark{
  display:grid; place-items:center; width:38px; height:38px; flex:none;
  font-family:var(--ff-display); font-size:1.4rem; color:#fff; background:var(--red);
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset;
}
.nav__brand-text{ font-family:var(--ff-head); font-weight:600; letter-spacing:.16em; font-size:.95rem; display:flex; gap:.5em; }
.nav__brand-year{ color:var(--red-bright); }
.nav__links{ display:flex; gap:2.2em; }
.nav__link{
  position:relative; font-family:var(--ff-head); font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; font-size:.82rem; color:var(--bone-soft); padding:.4em 0;
  display:inline-flex; align-items:baseline; gap:.55em; transition:color .35s;
}
.nav__num{ font-family:var(--ff-mono); font-size:.6rem; color:var(--red-bright); }
.nav__link::after{ content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:var(--red); transition:width .4s var(--ease); }
.nav__link:hover{ color:var(--bone); }
.nav__link:hover::after,.nav__link.active::after{ width:100%; }
.nav__link.active{ color:var(--bone); }

.nav__burger{ display:none; flex-direction:column; gap:5px; width:34px; height:30px; background:none; border:0; cursor:pointer; padding:6px 4px; }
.nav__burger span{ height:2px; width:100%; background:var(--bone); transition:.4s var(--ease); transform-origin:center; }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- LANGUAGE SWITCHER ---------- */
.nav__actions{ display:flex; align-items:center; gap:clamp(.55em,1.4vw,1em); }
.langswitch{ position:relative; }
.langswitch__btn{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:.45em;
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--bone-soft); padding:.5em .7em; border:1px solid var(--line);
  background:rgba(10,10,12,.35); transition:.3s var(--ease); -webkit-user-select:none; user-select:none;
}
.langswitch__btn::-webkit-details-marker{ display:none; }
.langswitch__btn::marker{ content:""; }
.langswitch__btn:hover{ color:var(--bone); border-color:var(--steel); }
.langswitch__globe{ width:15px; height:15px; opacity:.85; flex:none; }
.langswitch__cur{ font-weight:700; color:var(--bone); }
.langswitch__chev{ width:12px; height:12px; flex:none; transition:transform .3s var(--ease); }
.langswitch[open] .langswitch__chev{ transform:rotate(180deg); }
.langswitch__menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:140; list-style:none;
  min-width:210px; max-height:min(70vh,460px); overflow-y:auto; padding:6px;
  background:rgba(14,14,18,.97); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--line); box-shadow:0 26px 60px -26px rgba(0,0,0,.92);
  animation:langIn .28s var(--ease-io);
}
@keyframes langIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:translateY(0); } }
.langswitch__menu a{
  display:flex; align-items:baseline; gap:.6em; padding:.62em .8em;
  font-size:.92rem; color:var(--bone-soft); transition:background .2s var(--ease), color .2s var(--ease);
}
.langswitch__menu a b{ font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.08em; color:var(--bone-mute); min-width:34px; }
.langswitch__menu a:hover{ background:rgba(216,33,31,.16); color:var(--bone); }
.langswitch__menu a.is-current{ color:var(--bone); }
.langswitch__menu a.is-current b{ color:var(--red-bright); }

/* =================================================================
   HERO
   ================================================================= */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; }
.hero__media{ position:absolute; inset:-13% 0; z-index:0; }
.hero__media .media{ height:100%; }
.hero__dust{ position:absolute; inset:0; z-index:2; pointer-events:none; mix-blend-mode:screen; opacity:.5; }
.hero__scrim{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10,10,12,.5) 0%, transparent 26%, transparent 42%, rgba(10,10,12,.82) 92%),
    linear-gradient(90deg, transparent 32%, rgba(10,10,12,.4) 62%, rgba(10,10,12,.74) 100%);
}
.hero__blueprint{ position:absolute; inset:0; width:100%; height:100%; z-index:4; pointer-events:none; opacity:.6; }

/* ---------- HERO OLD-TV / GLITCH ---------- */
.hero__crt{ position:absolute; inset:-13% 0; z-index:5; pointer-events:none; overflow:hidden; }
/* CRT scanlines (always on) */
.hero__crt::before{
  content:""; position:absolute; inset:-4px;
  background:repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0, rgba(0,0,0,0) 1.5px,
    rgba(0,0,0,.34) 2px, rgba(0,0,0,.34) 3px);
  mix-blend-mode:multiply; opacity:.55;
  animation:crtScan 7s steps(1) infinite;
}
@keyframes crtScan{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(1.5px); }
}
/* rolling VHS tracking band + occasional signal jolt (brightness) */
.hero__crt::after{
  content:""; position:absolute; left:0; right:0; top:-25%; height:16%;
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(214,205,190,.10), rgba(255,255,255,0));
  mix-blend-mode:screen;
  animation:crtRoll 5.5s linear infinite, crtFlick 4.3s steps(1) infinite;
}
@keyframes crtRoll{ 0%{ top:-25%; } 100%{ top:125%; } }
@keyframes crtFlick{ 0%,96%,100%{ opacity:.5; } 97%{ opacity:1; } 98%{ opacity:.2; } 99%{ opacity:.9; } }

/* RGB-split ghost layers — periodic glitch bursts */
.hero__rgb{
  position:absolute; inset:0; background-image:url("/assets/img/facade-65.jpg");
  background-size:cover; background-position:center; mix-blend-mode:screen;
  opacity:0; will-change:transform,opacity,clip-path;
}
.hero__rgb--r{ background-color:#ff1a1a; background-blend-mode:multiply; animation:heroGlitchR 5.5s steps(1) infinite; }
.hero__rgb--b{ background-color:#19e6ff; background-blend-mode:multiply; animation:heroGlitchB 5.5s steps(1) infinite; }
@keyframes heroGlitchR{
  0%,8%{ opacity:0; transform:translate3d(0,0,0); clip-path:inset(0 0 0 0); }
  9%{ opacity:.6; transform:translate3d(8px,0,0); clip-path:inset(18% 0 56% 0); }
  12%{ opacity:.6; transform:translate3d(8px,0,0); clip-path:inset(18% 0 56% 0); }
  13%,40%{ opacity:0; transform:translate3d(0,0,0); clip-path:inset(0 0 0 0); }
  41%{ opacity:.45; transform:translate3d(5px,0,0); clip-path:inset(60% 0 14% 0); }
  43%{ opacity:.45; transform:translate3d(5px,0,0); clip-path:inset(60% 0 14% 0); }
  44%,72%{ opacity:0; transform:translate3d(0,0,0); clip-path:inset(0 0 0 0); }
  73%{ opacity:.55; transform:translate3d(11px,0,0); clip-path:inset(38% 0 36% 0); }
  75%{ opacity:.55; transform:translate3d(11px,0,0); clip-path:inset(38% 0 36% 0); }
  76%,100%{ opacity:0; transform:translate3d(0,0,0); clip-path:inset(0 0 0 0); }
}
@keyframes heroGlitchB{
  0%,8%{ opacity:0; transform:translate3d(0,0,0); clip-path:inset(0 0 0 0); }
  9%{ opacity:.55; transform:translate3d(-8px,0,0); clip-path:inset(18% 0 56% 0); }
  12%{ opacity:.55; transform:translate3d(-8px,0,0); clip-path:inset(18% 0 56% 0); }
  13%,40%{ opacity:0; transform:translate3d(0,0,0); clip-path:inset(0 0 0 0); }
  41%{ opacity:.4; transform:translate3d(-5px,0,0); clip-path:inset(60% 0 14% 0); }
  43%{ opacity:.4; transform:translate3d(-5px,0,0); clip-path:inset(60% 0 14% 0); }
  44%,72%{ opacity:0; transform:translate3d(0,0,0); clip-path:inset(0 0 0 0); }
  73%{ opacity:.5; transform:translate3d(-11px,0,0); clip-path:inset(38% 0 36% 0); }
  75%{ opacity:.5; transform:translate3d(-11px,0,0); clip-path:inset(38% 0 36% 0); }
  76%,100%{ opacity:0; transform:translate3d(0,0,0); clip-path:inset(0 0 0 0); }
}

.hero__content{ position:relative; z-index:6; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) clamp(70px,12vh,150px); text-align:right; }
.hero__kicker{ font-family:var(--ff-mono); font-size:.78rem; letter-spacing:.3em; text-transform:uppercase; color:var(--bone-soft); display:flex; align-items:center; justify-content:flex-end; gap:.9em; margin-bottom:1.1em; }
.hero__title{ font-family:var(--ff-display); line-height:.86; letter-spacing:.01em; margin-bottom:.28em; }
/* official stencil logo in the hero */
.hero__logo{
  display:block; width:clamp(210px,42vw,600px); height:auto; margin-left:auto;
  filter:drop-shadow(0 2px 22px rgba(0,0,0,.6));
  opacity:0; transform:translateY(42px);
  transition:opacity 1.1s var(--ease-io), transform 1.1s var(--ease-io);
}
.hero__logo.in{ opacity:1; transform:none; }
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .word{
  display:inline-block; font-size:clamp(4rem,15vw,13.5rem); color:var(--bone);
  text-shadow:0 2px 20px rgba(0,0,0,.55);
  transform:translateY(110%); transition:transform 1.1s var(--ease-io);
}
.hero__title .word.in{ transform:translateY(0); }
.hero__title .word--red{ color:var(--red); -webkit-text-stroke:0; position:relative; }
.hero__sub{ font-family:var(--ff-head); font-weight:300; font-size:clamp(1.1rem,2.6vw,1.9rem); letter-spacing:.06em; color:var(--bone-soft); margin-bottom:2em; }

.hero__scroll{ position:absolute; left:var(--pad); bottom:clamp(30px,6vh,60px); z-index:6; display:flex; flex-direction:column; align-items:center; gap:10px; }
.hero__scroll-txt{ font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--bone-mute); writing-mode:vertical-rl; }
.hero__scroll-line{ width:1px; height:54px; background:linear-gradient(var(--red),transparent); position:relative; overflow:hidden; }
.hero__scroll-line::after{ content:""; position:absolute; top:0; left:0; width:100%; height:40%; background:var(--bone); animation:scrolldot 1.8s var(--ease) infinite; }
@keyframes scrolldot{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(260%)} }

/* =================================================================
   STORY
   ================================================================= */
.story{ position:relative; z-index:5; background:var(--ink); }
.block{ position:relative; max-width:var(--maxw); margin:0 auto; padding:clamp(60px,8vh,110px) var(--pad); }

.block__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,80px); align-items:center; }

/* giant 1965 backdrop */
.block--one{ overflow:hidden; }
.bignum{ position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-end; z-index:0; pointer-events:none; }
.bignum svg{ width:140%; height:auto; transform:translateX(8%); }
.bignum__text{
  font-family:var(--ff-display); font-size:420px; letter-spacing:.02em;
  fill:transparent; stroke:rgba(236,230,218,.07); stroke-width:1.4;
}
.block--one.in .bignum__text{ animation:bignumDraw 3s var(--ease-io) forwards; stroke-dasharray:6000; stroke-dashoffset:6000; }
@keyframes bignumDraw{ to{ stroke-dashoffset:0; } }

.block__media{ position:relative; }
.block--one .block__media .media{ aspect-ratio:4/3.1; box-shadow:0 40px 90px -40px rgba(0,0,0,.9); }
.racebadge{ right:-26px; bottom:-26px; }

.block__text{ position:relative; z-index:2; }
.block--one .lead em{ font-family:var(--ff-display); font-size:1.25em; letter-spacing:.02em; color:var(--red); display:inline-block; }

/* block 2 split */
.block__head{ text-align:center; margin-bottom:clamp(56px,7vw,96px); }
.block__head .kicker{ justify-content:center; }
.block__title{ font-family:var(--ff-display); font-size:clamp(2.6rem,7vw,6rem); line-height:.92; }
.block__title .outline{ color:transparent; -webkit-text-stroke:1.4px var(--red); }

.split{ display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:0; }
.split__panel{ position:relative; }
.split__panel .media{ aspect-ratio:4/3; box-shadow:0 30px 80px -40px rgba(0,0,0,.9); }
.split__panel--a{ transform:translateY(24px); }
.split__panel--b{ transform:translateY(-24px); }
.split__divider{ position:relative; width:clamp(34px,5vw,80px); display:flex; align-items:center; justify-content:center; }
.split__divider svg{ height:100%; width:40px; }
.split__vs{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:.85rem; letter-spacing:.2em; color:var(--bone); background:var(--ink); padding:8px 6px; border:1px solid var(--line); }
.split__label{ position:absolute; bottom:14px; left:14px; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-soft); background:rgba(10,10,12,.5); padding:5px 9px; border-left:2px solid var(--red); z-index:5; }
.split__panel--b .racebadge{ right:-22px; top:-22px; bottom:auto; }
.block--two .block__text{ max-width:760px; margin:clamp(46px,7vw,90px) auto 0; }
.block__text--center{ text-align:center; }

/* block 3 layers */
.layers{ position:relative; min-height:min(78vh,720px); margin-bottom:clamp(20px,4vw,40px); }
.layers__back{ position:relative; width:72%; margin-left:auto; }
.layers__back .media{ aspect-ratio:16/10; box-shadow:0 40px 90px -50px #000; }
.layers__front{ position:absolute; left:0; bottom:-6%; width:46%; z-index:3; }
.layers__front .media{ aspect-ratio:5/4; box-shadow:0 50px 100px -40px rgba(0,0,0,.95); border:1px solid rgba(236,230,218,.10); }
.layers__detail{ position:absolute; right:4%; top:-5%; width:21%; z-index:4; }
.layers__detail .media{ aspect-ratio:1/1; border:1px solid var(--red); box-shadow:0 30px 70px -34px rgba(0,0,0,.85); }
.detail__cross{ position:absolute; inset:0; display:grid; place-items:center; z-index:5; pointer-events:none; opacity:.8; }
.detail__cross svg{ width:46%; height:46%; }
.block--three .block__text{ max-width:620px; margin-left:auto; }
.block__text--right{ text-align:left; }

/* =================================================================
   VISIT
   ================================================================= */
.visit{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; isolation:isolate; }
.visit__bg{ position:absolute; inset:-13% 0; z-index:0; }
.visit__bg .media{ height:100%; }
.visit__scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(10,10,12,.96) 0%, rgba(10,10,12,.9) 55%, rgba(10,10,12,.8) 100%); }
.visit__inner{ position:relative; z-index:3; max-width:var(--maxw); margin:0 auto; padding:clamp(90px,13vh,150px) var(--pad); width:100%; }
.visit__title{ line-height:1; margin:.1em 0 .35em; }
.visit__logo{ display:block; width:clamp(230px,36vw,470px); height:auto; }
.visit__lead{ font-family:var(--ff-head); font-weight:300; font-size:clamp(1rem,2vw,1.4rem); letter-spacing:.05em; color:var(--bone-soft); margin-bottom:clamp(2.2em,4vw,3em); }

.visit__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(34px,5vw,76px); align-items:start; }
.visit__col{ min-width:0; }

.info{ border-top:1px solid var(--line); margin-bottom:2em; }
.info__row{ display:grid; grid-template-columns:120px 1fr; gap:1em; padding:.95em 0; border-bottom:1px solid var(--line); align-items:baseline; }
.info dt{ font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--bone-mute); }
.info dd{ font-size:1.05rem; color:var(--bone); overflow-wrap:anywhere; }
.info dd a{ transition:color .3s; }
.info dd a:hover{ color:var(--red-bright); }
.ph{ color:var(--beige); font-family:var(--ff-mono); font-size:.92em; opacity:.85; border-bottom:1px dashed rgba(201,184,150,.4); }

.visit__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:2em; }
.visit__note{ font-size:.85rem; line-height:1.65; color:var(--bone-mute); max-width:48ch; border-left:2px solid var(--red); padding-left:1em; }

/* price lists */
.pricelist{ margin-bottom:clamp(1.8em,3vw,2.4em); }
.pricelist:last-child{ margin-bottom:0; }
.pricelist__title{ display:flex; align-items:center; gap:.7em; font-size:.7rem; letter-spacing:.26em; text-transform:uppercase; color:var(--red-bright); margin-bottom:1em; }
.pricelist__desc{ font-size:.9rem; color:var(--bone-soft); line-height:1.65; margin-bottom:1.1em; max-width:50ch; }
.price{ list-style:none; }
.price li{ display:flex; align-items:baseline; gap:1em; padding:.62em 0; border-bottom:1px solid var(--line); }
.price li:first-child{ border-top:1px solid var(--line); }
.price__name{ color:var(--bone-soft); font-size:.98rem; line-height:1.4; }
.price__val{ margin-left:auto; white-space:nowrap; font-family:var(--ff-head); font-weight:600; color:var(--bone); font-size:1.02rem; }

/* =================================================================
   CLOSING / FOOTER
   ================================================================= */
.closing{ position:relative; background:var(--ink); }
.closing__stage{ position:relative; min-height:clamp(520px,80vh,840px); display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; }
.closing__media{ position:absolute; inset:-13% 0; z-index:0; }
.closing__media .media{ height:100%; }
.closing__scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(10,10,12,.6) 0%, transparent 32%, rgba(10,10,12,.5) 58%, rgba(10,10,12,.98) 100%); }
.closing__hero{ position:relative; z-index:3; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) clamp(46px,7vh,84px); }
.closing__title{ line-height:1; }
.closing__logo{ display:block; width:clamp(240px,42vw,560px); height:auto; filter:drop-shadow(0 2px 24px rgba(0,0,0,.7)); }
.closing__title-year{ color:var(--red); }
.closing__line{ font-family:var(--ff-head); font-weight:300; font-size:clamp(1.05rem,2.4vw,1.7rem); letter-spacing:.04em; color:var(--bone); margin-top:.6em; max-width:30ch; text-shadow:0 1px 14px rgba(0,0,0,.7); }

.closing__content{ position:relative; z-index:3; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.closing__foot{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; padding:clamp(40px,6vw,60px) 0 clamp(30px,5vw,46px); }
.closing__col{ display:flex; flex-direction:column; gap:.8em; }
.closing__label{ font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--red); margin-bottom:.5em; }
.closing__contact,.closing__navlink{ color:var(--bone-soft); font-size:.98rem; width:fit-content; transition:color .3s; }
.closing__contact:hover,.closing__navlink:hover{ color:var(--bone); }
.closing__navlink{ position:relative; }
.closing__navlink::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--red); transition:width .35s var(--ease); }
.closing__navlink:hover::after{ width:100%; }

.social{ display:flex; gap:12px; }
.social__link{ display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--line); color:var(--bone-soft); transition:.4s var(--ease); }
.social__link svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; }
.social__link:hover{ border-color:var(--red); color:#fff; background:var(--red); transform:translateY(-3px); }

.closing__base{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding-top:24px; border-top:1px solid var(--line); font-size:.72rem; color:var(--bone-mute); letter-spacing:.1em; }
.closing__top{ color:var(--bone-mute); transition:color .3s; }
.closing__top:hover{ color:var(--red-bright); }
.closing__credit{ color:var(--bone-mute); text-align:center; }
.closing__credit a{ color:var(--bone-soft); border-bottom:1px solid var(--red); padding-bottom:1px; transition:color .3s; }
.closing__credit a:hover{ color:var(--red-bright); }

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width:900px){
  .nav__links{
    position:fixed; inset:0 0 0 auto; width:min(82vw,360px); flex-direction:column; justify-content:center;
    gap:1.6em; padding:0 var(--pad); background:rgba(10,10,12,.96);
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    border-left:1px solid var(--line); transform:translateX(100%); visibility:hidden;
    transition:transform .55s var(--ease), visibility .55s var(--ease); z-index:109;
  }
  .nav__links.open{ transform:translateX(0); visibility:visible; }
  .nav__link{ font-size:1.4rem; }
  .nav__burger{ display:flex; z-index:111; }

  .block{ padding-top:clamp(38px,6vw,64px); padding-bottom:clamp(38px,6vw,64px); }
  .block__grid{ grid-template-columns:1fr; gap:32px; }
  .block--one .block__media{ order:-1; }
  .bignum svg{ width:200%; }
  .bignum__text{ stroke:rgba(236,230,218,.05); }

  .split{ grid-template-columns:1fr; gap:30px; }
  .split__divider{ width:100%; height:60px; flex-direction:row; }
  .split__divider svg{ display:none; }
  .split__panel--a,.split__panel--b{ transform:none; }
  .split__panel--b .racebadge{ right:-14px; }

  .layers{ min-height:0; display:flex; flex-direction:column; gap:0; }
  .layers__back{ width:100%; }
  .layers__front{ position:relative; width:74%; margin:-16% 0 0 0; left:0; bottom:auto; }
  .layers__detail{ position:absolute; right:4%; top:34%; width:30%; }
  .block--three .block__text{ margin-top:40px; }

  .visit__grid{ grid-template-columns:1fr; gap:clamp(40px,7vw,56px); }
  /* mobile: prices first (right after the heading), contacts after */
  .visit__col--prices{ order:-1; }

  .closing__foot{ grid-template-columns:1fr 1fr; }
}

@media (max-width:560px){
  :root{ --pad:20px; }
  .nav__brand-text{ font-size:.82rem; }
  .nav__logo{ height:18px; }
  .nav.scrolled .nav__logo{ height:17px; }
  /* keep hero logo on the right (over the sky), clear of the car */
  .hero__logo{ width:clamp(190px,52vw,300px); }
  .hero__title .word{ font-size:clamp(2.6rem,14.5vw,5.5rem); }
  .hero__kicker{ font-size:.56rem; letter-spacing:.13em; gap:.55em; margin-bottom:.9em; }
  .hero__sub{ font-size:clamp(.95rem,4vw,1.3rem); }
  .hero__scrim{ background:
    linear-gradient(180deg, rgba(10,10,12,.42) 0%, transparent 24%, rgba(10,10,12,.45) 58%, rgba(10,10,12,.92) 100%),
    linear-gradient(90deg, transparent 24%, rgba(10,10,12,.52) 100%); }
  .hero__scroll{ display:none; }
  .info__row{ grid-template-columns:1fr; gap:.2em; padding:.85em 0; }
  .info dt{ font-size:.6rem; }
  .closing__foot{ grid-template-columns:1fr; gap:36px; }
  .layers__detail{ width:38%; top:30%; }
  .visit__scrim{ background:linear-gradient(180deg, rgba(10,10,12,.7), rgba(10,10,12,.9)); }
  .btn{ width:100%; justify-content:center; }
  .racebadge{ width:62px; height:62px; right:-6px; bottom:-6px; }
  .racebadge b{ font-size:1.45rem; }
  .racebadge--sm{ width:52px; height:52px; }
  .racebadge--sm b{ font-size:1.2rem; }
  .split__panel--b .racebadge{ right:-6px; top:-6px; }
}

/* =================================================================
   MOTION-SAFE
   ================================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.2s !important; scroll-behavior:auto !important; }
  html{ scroll-behavior:auto; }
  .media.kb img,.media.detail.kb img{ animation:none; transform:none; }
  .media.detail img{ transform:scale(1.9); }
  [data-reveal]{ opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important; }
  .hero__title .word{ transform:none; }
  .hero__logo{ opacity:1; transform:none; }
  .fx-grain,.fx-leak,.fx-flicker,.hero__dust{ display:none; }
  /* keep static CRT scanlines, drop the moving glitch */
  .hero__crt::after,.hero__rgb{ display:none; }
  .hero__crt::before{ animation:none; }
  .bp-line,.bp-tick,.bp-ring,.bignum__text,.racebadge__ring{ stroke-dashoffset:0; }
}