:root{--bg:#f2f0eb;--ink:#11110f;--muted:#77736c;--line:rgba(17,17,15,.16);--dark:#0c0c0b;--max:1440px;--pad:clamp(22px,4vw,64px)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Manrope,Arial,sans-serif}a{color:inherit;text-decoration:none}img{display:block;width:100%;height:100%;object-fit:cover}.container{width:min(var(--max),calc(100% - var(--pad)*2));margin:auto}.section{padding:clamp(90px,10vw,170px) 0}.eyebrow{font-size:11px;letter-spacing:.22em;font-weight:700;margin:0 0 26px}.eyebrow.dark{color:#635f58}.site-header{position:fixed;inset:0 0 auto 0;z-index:30;height:86px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--pad);color:white;transition:.35s}.site-header.scrolled{background:rgba(9,9,8,.88);backdrop-filter:blur(14px)}.brand{display:flex;gap:13px;align-items:center}.brand-mark{border:1px solid rgba(255,255,255,.6);width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:700}.brand-copy{display:grid;line-height:1.1}.brand-copy strong{font-size:13px;letter-spacing:.13em}.brand-copy small{font-size:8px;letter-spacing:.22em;opacity:.65;margin-top:5px}.main-nav{display:flex;gap:30px;font-size:12px}.main-nav a{opacity:.78}.main-nav a:hover{opacity:1}.header-cta{justify-self:end;border:1px solid rgba(255,255,255,.5);padding:12px 18px;text-transform:uppercase;font-size:10px;letter-spacing:.15em}.menu-toggle{display:none;background:none;border:0}.hero-slider{height:100svh;min-height:700px;position:relative;background:#111;overflow:hidden}.hero-slide{position:absolute;inset:0;background-image:var(--bg);background-size:cover;background-position:center;opacity:0;transform:scale(1.035);transition:opacity .9s ease,transform 6s ease}.hero-slide.is-active{opacity:1;transform:scale(1)}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.15) 60%,rgba(0,0,0,.2))}.hero-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;color:white;padding-top:70px}.hero-content h1,.hero-content h2,.intro-copy h2,.section-head h2,.ask h2,.community h2,.contact h2{font-family:'Playfair Display',serif;font-size:clamp(58px,7.5vw,126px);line-height:.88;letter-spacing:-.045em;font-weight:500;margin:0}.hero-content em,.intro-copy em,.section-head em,.ask em,.community em,.contact em{font-weight:500}.hero-copy{font-size:clamp(17px,1.4vw,22px);max-width:560px;line-height:1.55;margin:34px 0}.hero-actions{display:flex;align-items:center;gap:28px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:16px 24px;text-transform:uppercase;font-size:11px;letter-spacing:.14em;font-weight:700}.btn-light{background:white;color:#111}.text-link{font-size:12px;text-transform:uppercase;letter-spacing:.13em}.text-link span{margin-left:10px}.text-link.light{color:#fff}.hero-meta{position:absolute;left:var(--pad);right:var(--pad);bottom:28px;color:white;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.11em;text-transform:uppercase;opacity:.72}.hero-controls{position:absolute;z-index:4;right:var(--pad);bottom:75px;display:flex;align-items:center;gap:12px;color:#fff}.hero-controls button{background:none;color:#fff;border:0;font-size:16px;cursor:pointer}.hero-progress{width:90px;height:1px;background:rgba(255,255,255,.3)}.hero-progress span{display:block;height:100%;width:33.33%;background:#fff;transition:.4s}.hero-controls>span{font-size:10px;letter-spacing:.1em}.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(50px,7vw,120px);align-items:center}.portrait-card{height:min(72vw,760px);position:relative;overflow:hidden}.portrait-card img{object-position:center 38%}.image-label{position:absolute;left:16px;bottom:16px;background:rgba(245,243,238,.92);padding:8px 10px;font-size:9px;letter-spacing:.12em;text-transform:uppercase}.intro-copy h2,.section-head h2,.contact h2{font-size:clamp(54px,6vw,100px)}.intro-copy>p:not(.eyebrow){font-size:clamp(16px,1.4vw,20px);line-height:1.72;max-width:650px;color:#494640}.contact-chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:38px}.contact-chips a{border:1px solid var(--line);padding:12px 16px;font-size:11px;text-transform:uppercase;letter-spacing:.1em}.section-head{margin-bottom:70px}.service-list{border-top:1px solid var(--line)}.service-row{display:grid;grid-template-columns:70px 1.4fr 1fr 40px;gap:22px;align-items:center;padding:34px 0;border-bottom:1px solid var(--line);transition:.25s}.service-row:hover{padding-left:12px}.service-row span{font-size:11px;color:#888}.service-row h3{font-family:'Playfair Display',serif;font-size:clamp(27px,3vw,46px);font-weight:500;margin:0}.service-row p{margin:0;color:#6a665f;line-height:1.5}.dark-section{background:var(--dark);color:white}.light-head .eyebrow{color:#aaa}.car-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.car-card{border-top:1px solid rgba(255,255,255,.18);padding-top:14px}.car-image{aspect-ratio:4/5;overflow:hidden}.car-image img{transition:.7s transform}.car-card:hover img{transform:scale(1.035)}.car-meta{display:flex;justify-content:space-between;gap:16px;padding:18px 0 24px}.car-meta span{font-size:9px;letter-spacing:.15em;color:#aaa}.car-meta h3{font-family:'Playfair Display',serif;font-size:28px;font-weight:500;margin:5px 0}.car-meta p,.car-meta a{font-size:10px;color:#9e9e9b}.center-link{text-align:center;margin-top:50px}.ask,.community{min-height:85svh;position:relative;display:flex;align-items:center;color:white;overflow:hidden}.ask-background,.community-bg{position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1494976388531-d1058494cdd8?auto=format&fit=crop&w=2200&q=88') center/cover}.community-bg{background-image:url('https://images.unsplash.com/photo-1511988617509-a57c8a288659?auto=format&fit=crop&w=2200&q=88')}.ask-overlay,.community-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.18))}.ask-content,.community-content{position:relative;z-index:2}.ask h2,.community h2{font-size:clamp(60px,8vw,130px)}.ask p:not(.eyebrow),.community p:not(.eyebrow){font-size:18px;line-height:1.6;margin:30px 0;max-width:560px}.sold{overflow:hidden}.sold-track{display:flex;gap:16px;padding-left:var(--pad);width:max-content;animation:drift 28s linear infinite}.sold-track article{width:min(32vw,500px)}.sold-track img{aspect-ratio:4/3;filter:grayscale(1);transition:.4s}.sold-track article:hover img{filter:grayscale(0)}.sold-track span{display:block;margin-top:12px;font-family:'Playfair Display',serif;font-size:24px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.stats div{border-top:1px solid rgba(255,255,255,.2);padding-top:20px}.stats strong{display:block;font-family:'Playfair Display',serif;font-size:clamp(64px,7vw,110px);font-weight:500}.stats span{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#aaa}.story-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:18px}.story-card{position:relative;min-height:360px;overflow:hidden;background:#111;color:#fff}.story-card img{position:absolute;inset:0;opacity:.65;transition:.5s}.story-card:hover img{transform:scale(1.025);opacity:.78}.story-card>div{position:absolute;z-index:2;left:24px;right:24px;bottom:24px}.story-card span{font-size:9px;letter-spacing:.15em}.story-card h3{font-family:'Playfair Display',serif;font-size:32px;font-weight:500;margin:8px 0 14px}.story-card a{font-size:10px;letter-spacing:.12em;text-transform:uppercase}.story-large{grid-row:span 2;min-height:738px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:end}.contact-copy p:not(.eyebrow){font-size:19px;line-height:1.6;max-width:540px}.contact-card{border-top:1px solid var(--line);padding-top:24px}.contact-card>p{font-size:10px;letter-spacing:.15em}.contact-card h3{font-family:'Playfair Display',serif;font-size:clamp(34px,4vw,60px);font-weight:500;margin:12px 0 50px}.contact-links{display:grid}.contact-links a{display:flex;justify-content:space-between;padding:18px 0;border-top:1px solid var(--line);font-size:12px;text-transform:uppercase;letter-spacing:.12em}.contact-card small{display:block;margin-top:30px;color:#777}.footer{background:#0c0c0b;color:#ddd;padding:40px 0}.footer-inner{display:grid;grid-template-columns:1fr auto auto;gap:40px;align-items:end}.footer-inner>div:first-child{display:grid}.footer strong{font-size:13px;letter-spacing:.14em}.footer span,.footer a{font-size:10px;color:#888}.footer-inner>div:nth-child(2){display:flex;gap:18px}.reveal{opacity:0;transform:translateY(28px);transition:.8s ease}.reveal.visible{opacity:1;transform:none}@keyframes drift{to{transform:translateX(-20%)}}
@media(max-width:900px){.site-header{grid-template-columns:1fr auto}.main-nav,.header-cta{display:none}.menu-toggle{display:grid;gap:6px}.menu-toggle span{width:26px;height:1px;background:#fff}.main-nav.open{position:absolute;display:flex;flex-direction:column;top:86px;left:0;right:0;background:#0c0c0b;padding:28px var(--pad)}.split,.contact-grid{grid-template-columns:1fr}.portrait-card{height:72vh}.service-row{grid-template-columns:42px 1fr 28px}.service-row p{grid-column:2}.service-row b{grid-column:3;grid-row:1/3}.car-grid{grid-template-columns:1fr}.car-image{aspect-ratio:16/10}.story-grid{grid-template-columns:1fr}.story-large{grid-row:auto;min-height:500px}.stats{grid-template-columns:1fr}.footer-inner{grid-template-columns:1fr}.sold-track article{width:72vw}.hero-meta{display:none}.hero-controls{bottom:28px}.hero-slider{min-height:650px}}

/* Language switch */
.header-actions{justify-self:end;display:flex;align-items:center;gap:16px}.language-switch{display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.14em;color:rgba(255,255,255,.45)}.lang-btn{appearance:none;border:0;background:transparent;color:rgba(255,255,255,.45);padding:7px 3px;font:inherit;font-size:10px;letter-spacing:.14em;cursor:pointer;transition:color .25s ease,opacity .25s ease}.lang-btn:hover,.lang-btn.is-active{color:#fff}.lang-btn.is-active{font-weight:700}.lang-btn:focus-visible{outline:1px solid rgba(255,255,255,.7);outline-offset:3px}
@media(max-width:900px){.header-actions{gap:13px}.header-actions .header-cta{display:none}.language-switch{margin-right:2px}.menu-toggle{display:grid}.main-nav.open{z-index:40}.main-nav.open~.header-actions{z-index:41}}

/* =========================================================
   HIGH OCTANE — cinematic entry intro
   ~3.8 seconds, pure CSS/JS, no video asset required
========================================================= */
body.intro-active{overflow:hidden}
.site-intro{position:fixed;inset:0;z-index:9999;background:#050505;color:#fff;display:grid;place-items:center;overflow:hidden;isolation:isolate}
.site-intro.is-finished{pointer-events:none;visibility:hidden}
.intro-stage{position:relative;z-index:3;width:min(1180px,90vw);height:100%;display:grid;place-items:center}
.intro-noise{position:absolute;inset:-50%;z-index:1;opacity:.08;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");animation:introNoise .22s steps(2) infinite}
.intro-speed-lines{position:absolute;inset:0;z-index:2;overflow:hidden;opacity:0;animation:speedLinesIn 1.05s .15s ease-out both}
.intro-speed-lines span{position:absolute;left:-30vw;width:56vw;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),rgba(255,120,45,.78),transparent);filter:blur(.2px);transform:skewX(-26deg);animation:speedLine .72s ease-in forwards}
.intro-speed-lines span:nth-child(1){top:28%;animation-delay:.12s}.intro-speed-lines span:nth-child(2){top:39%;width:75vw;animation-delay:.19s}.intro-speed-lines span:nth-child(3){top:49%;animation-delay:.26s}.intro-speed-lines span:nth-child(4){top:61%;width:68vw;animation-delay:.31s}.intro-speed-lines span:nth-child(5){top:72%;animation-delay:.37s}.intro-speed-lines span:nth-child(6){top:81%;width:82vw;animation-delay:.43s}
.intro-gauge{position:absolute;width:min(38vw,330px);aspect-ratio:1;opacity:0;transform:scale(.84);animation:gaugeSequence 1.35s .08s cubic-bezier(.2,.8,.2,1) both}
.intro-gauge svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-142deg)}
.gauge-track,.gauge-rev{fill:none;stroke-width:2.5;stroke-linecap:round}
.gauge-track{stroke:rgba(255,255,255,.14);stroke-dasharray:414 139}
.gauge-rev{stroke:#fff;stroke-dasharray:0 553;filter:drop-shadow(0 0 7px rgba(255,255,255,.35));animation:revArc .85s .15s cubic-bezier(.3,.9,.2,1) forwards}
.gauge-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:Manrope,sans-serif;letter-spacing:.14em}
.gauge-value{font-size:clamp(56px,7vw,92px);line-height:.9;font-weight:500}.gauge-center small{margin-top:12px;font-size:9px;letter-spacing:.28em;color:rgba(255,255,255,.55)}
.gauge-needle{position:absolute;left:50%;top:50%;width:39%;height:2px;background:linear-gradient(90deg,#f05d24,#ffad73);transform-origin:0 50%;transform:rotate(-120deg);box-shadow:0 0 14px rgba(240,93,36,.7);animation:needleRev .92s .12s cubic-bezier(.24,.82,.25,1) forwards}
.gauge-needle:after{content:"";position:absolute;left:-6px;top:-5px;width:12px;height:12px;border-radius:50%;background:#f3f3f3;box-shadow:0 0 0 5px rgba(255,255,255,.08)}
.intro-wordmark{position:absolute;text-align:center;opacity:0;transform:scale(.96);animation:wordmarkSequence 1.75s 1.05s cubic-bezier(.18,.8,.18,1) both}
.intro-ho{height:70px;display:flex;justify-content:center;align-items:center;margin-bottom:16px;font:500 clamp(56px,7vw,88px)/1 Manrope,sans-serif;letter-spacing:-.16em}.intro-ho span{display:inline-block}.intro-ho span:first-child{transform:translateX(10px)}.intro-ho span:last-child{transform:translateX(-10px);opacity:.76}
.intro-brand-name{font:500 clamp(26px,4.3vw,62px)/1 Manrope,sans-serif;letter-spacing:.28em;padding-left:.28em;white-space:nowrap;text-shadow:0 0 28px rgba(255,255,255,.08)}
.intro-brand-sub{margin-top:14px;font:500 clamp(8px,1vw,12px)/1.2 Manrope,sans-serif;letter-spacing:.48em;padding-left:.48em;color:rgba(255,255,255,.54)}
.intro-tagline{position:absolute;opacity:0;text-align:center;text-transform:uppercase;font-family:Manrope,sans-serif;letter-spacing:.26em;animation:taglineSequence .92s 2.58s ease both}.intro-tagline span{display:block;font-size:clamp(9px,1vw,12px);color:rgba(255,255,255,.52);margin-bottom:9px}.intro-tagline strong{display:block;font-size:clamp(13px,1.7vw,22px);font-weight:500;letter-spacing:.32em}
.intro-shutter{position:absolute;top:0;bottom:0;width:50.5%;z-index:7;background:#050505;will-change:transform}.intro-shutter-left{left:0;transform:translateX(-101%);animation:shutterLeft .72s 3.18s cubic-bezier(.7,0,.2,1) both}.intro-shutter-right{right:0;transform:translateX(101%);animation:shutterRight .72s 3.18s cubic-bezier(.7,0,.2,1) both}
.intro-skip{position:absolute;right:28px;bottom:24px;z-index:9;border:0;background:none;color:rgba(255,255,255,.46);font:600 10px/1 Manrope,sans-serif;letter-spacing:.24em;cursor:pointer;padding:10px;transition:color .2s ease}.intro-skip:hover{color:#fff}
.site-intro.is-skipping{animation:quickFade .38s ease forwards}.site-intro.is-skipping .intro-shutter{animation:none}

@keyframes introNoise{0%{transform:translate(0,0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}100%{transform:translate(-2%,-1%)}}
@keyframes speedLine{0%{transform:translateX(0) skewX(-26deg);opacity:0}25%{opacity:1}100%{transform:translateX(165vw) skewX(-26deg);opacity:0}}
@keyframes speedLinesIn{0%{opacity:0}20%{opacity:1}80%{opacity:.7}100%{opacity:0}}
@keyframes gaugeSequence{0%{opacity:0;transform:scale(.82);filter:blur(8px)}18%{opacity:1;transform:scale(1);filter:blur(0)}70%{opacity:1;transform:scale(1.03)}100%{opacity:0;transform:scale(1.12);filter:blur(3px)}}
@keyframes needleRev{0%{transform:rotate(-125deg)}45%{transform:rotate(15deg)}72%{transform:rotate(47deg)}100%{transform:rotate(62deg)}}
@keyframes revArc{0%{stroke-dasharray:0 553;stroke:#fff}70%{stroke-dasharray:360 193;stroke:#fff}100%{stroke-dasharray:414 139;stroke:#f05d24}}
@keyframes wordmarkSequence{0%{opacity:0;transform:scale(.94);filter:blur(14px)}18%{opacity:1;transform:scale(1);filter:blur(0)}72%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.02);filter:blur(4px)}}
@keyframes taglineSequence{0%{opacity:0;transform:translateY(10px);filter:blur(8px)}25%,72%{opacity:1;transform:translateY(0);filter:blur(0)}100%{opacity:0;transform:translateY(-4px);filter:blur(3px)}}
@keyframes shutterLeft{0%{transform:translateX(-101%)}45%{transform:translateX(0)}100%{transform:translateX(-101%)}}
@keyframes shutterRight{0%{transform:translateX(101%)}45%{transform:translateX(0)}100%{transform:translateX(101%)}}
@keyframes quickFade{to{opacity:0;visibility:hidden}}

@media(max-width:700px){.intro-gauge{width:min(70vw,290px)}.intro-brand-name{font-size:clamp(24px,8vw,38px);letter-spacing:.17em;padding-left:.17em}.intro-brand-sub{letter-spacing:.32em;padding-left:.32em}.intro-ho{height:54px;font-size:62px}.intro-tagline{width:86vw}.intro-tagline strong{letter-spacing:.18em}.intro-skip{right:16px;bottom:16px}}
@media(prefers-reduced-motion:reduce){.site-intro{display:none!important}body.intro-active{overflow:auto}.intro-noise,.intro-speed-lines span,.intro-gauge,.gauge-rev,.gauge-needle,.intro-wordmark,.intro-tagline,.intro-shutter{animation:none!important}}


/* =========================================================
   Official High Octane logo assets
   White version: dark / photographic surfaces
   Black version: light surfaces
========================================================= */
.brand{display:flex;align-items:center;min-width:210px}
.brand-logo{display:block;width:clamp(175px,15vw,235px);height:auto;object-fit:contain;object-position:left center}
.brand-mark,.brand-copy{display:none!important}

.intro-wordmark{width:min(720px,72vw);display:flex;justify-content:center;align-items:center}
.intro-logo{display:block;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 8px 35px rgba(255,255,255,.06))}
.intro-ho,.intro-brand-name,.intro-brand-sub{display:none!important}

.contact-logo{width:min(440px,88%);height:auto;object-fit:contain;object-position:left center;margin:0 0 34px}
.contact-card>p{margin-top:0}
.contact-card h3{display:none}

.footer-brand{display:grid;gap:14px;align-items:start}
.footer-logo{width:min(280px,70vw);height:auto;object-fit:contain;object-position:left center}
.footer-inner>div:first-child{display:grid}

@media(max-width:900px){
  .brand{min-width:0}
  .brand-logo{width:170px}
  .intro-wordmark{width:min(640px,82vw)}
  .contact-logo{width:min(390px,92%)}
}
@media(max-width:520px){
  .brand-logo{width:145px}
  .site-header{height:76px}
  .main-nav.open{top:76px}
  .intro-wordmark{width:86vw}
}


/* =========================================================
   HIGH OCTANE — SECTIONAL GARAGE DOOR INTRO V2
   ========================================================= */
html.ho-intro-lock,
html.ho-intro-lock body {
  overflow: hidden !important;
}

.ho-garage-intro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  overflow: hidden;
  background: #020202;
  color: #fff;
  isolation: isolate;
}

.ho-garage-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 1400px;
  background:
    radial-gradient(ellipse at 50% 112%, rgba(255,255,255,.11), transparent 34%),
    linear-gradient(180deg, #060606 0%, #020202 100%);
}

/* Subtle vertical tracks make the object read as an actual garage door. */
.ho-garage-rail {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18px;
  z-index: 7;
  background:
    linear-gradient(90deg,
      #0b0b0b 0%,
      #2a2a2a 18%,
      #111 45%,
      #3b3b3b 58%,
      #0a0a0a 100%);
  box-shadow:
    inset 1px 0 rgba(255,255,255,.08),
    inset -1px 0 rgba(0,0,0,.8),
    0 0 22px rgba(0,0,0,.9);
}
.ho-garage-rail-left { left: 0; }
.ho-garage-rail-right { right: 0; transform: scaleX(-1); }

.ho-garage-door {
  position: absolute;
  inset: 0 18px 0 18px;
  z-index: 5;
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  transform-origin: 50% 0%;
  will-change: transform, filter;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,.75));
}

/* Individual sectional-door slats */
.ho-door-panel {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.055) 0%,
      rgba(255,255,255,.012) 8%,
      transparent 40%,
      rgba(0,0,0,.22) 88%,
      rgba(0,0,0,.6) 100%),
    linear-gradient(90deg,
      #090909 0%,
      #111 20%,
      #0b0b0b 50%,
      #121212 80%,
      #080808 100%);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(0,0,0,.95);
  box-shadow:
    inset 0 1px rgba(255,255,255,.035),
    inset 0 -11px 18px rgba(0,0,0,.22);
}

/* Hairline seam + slight convexity */
.ho-door-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,.018) 48%,
      rgba(255,255,255,.04) 50%,
      rgba(255,255,255,.018) 52%,
      transparent 100%);
  pointer-events: none;
}
.ho-door-panel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 5px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.92));
  box-shadow: 0 2px 6px rgba(0,0,0,.8);
}

/* Brand is attached to the physical door */
.ho-garage-brand {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 25px;
  padding: 32px;
  text-align: center;
  pointer-events: none;
}

.ho-intro-logo {
  width: min(440px, 64vw);
  height: auto;
  opacity: 0;
  transform: translateY(12px) scale(.985);
  filter: drop-shadow(0 14px 36px rgba(0,0,0,.55));
  animation: hoLogoIn .8s cubic-bezier(.2,.8,.2,1) .2s forwards;
}

.ho-intro-welcome {
  font-size: clamp(10px,.72vw,13px);
  letter-spacing: .42em;
  font-weight: 600;
  color: rgba(255,255,255,.72);
  opacity: 0;
  transform: translateY(8px);
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
  animation: hoWelcomeIn .65s ease 1s forwards;
}

/* Thick bottom edge, rather than a simple animated line */
.ho-door-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  height: 14px;
  background:
    linear-gradient(180deg,
      #232323 0%,
      #080808 28%,
      #020202 72%,
      #181818 100%);
  border-top: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 10px 25px rgba(0,0,0,.88),
    0 1px 0 rgba(255,255,255,.12) inset;
}

.ho-door-reflection {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  opacity: 0;
  animation: hoBottomReflection .5s ease 1.45s forwards;
}

/* Light appearing underneath the garage door */
.ho-garage-floor-glow {
  position: absolute;
  z-index: 2;
  left: 7%;
  right: 7%;
  bottom: -6vh;
  height: 13vh;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center,
      rgba(255,255,255,.26) 0%,
      rgba(255,255,255,.085) 25%,
      rgba(255,255,255,.018) 55%,
      transparent 76%);
  filter: blur(13px);
  opacity: 0;
  transform: scaleX(.68);
  transition: opacity .6s ease, transform 1.1s ease;
}

/* Opening motion:
   It still travels upward, but slight perspective/scale makes the
   segmented surface feel like a sectional door disappearing overhead. */
.ho-garage-intro.ho-opening .ho-garage-door {
  animation: hoSectionalDoorOpen 1.65s cubic-bezier(.72,0,.19,1) forwards;
}

.ho-garage-intro.ho-opening .ho-garage-floor-glow {
  opacity: 1;
  transform: scaleX(1.2);
}

.ho-garage-intro.ho-opening .ho-garage-brand {
  animation: hoBrandAttached 1.2s cubic-bezier(.55,0,.3,1) forwards;
}

/* Each panel catches light a fraction differently during travel */
.ho-garage-intro.ho-opening .ho-door-panel:nth-child(1) { animation: hoPanelLight 1.0s ease .05s both; }
.ho-garage-intro.ho-opening .ho-door-panel:nth-child(2) { animation: hoPanelLight 1.0s ease .09s both; }
.ho-garage-intro.ho-opening .ho-door-panel:nth-child(3) { animation: hoPanelLight 1.0s ease .13s both; }
.ho-garage-intro.ho-opening .ho-door-panel:nth-child(4) { animation: hoPanelLight 1.0s ease .17s both; }
.ho-garage-intro.ho-opening .ho-door-panel:nth-child(5) { animation: hoPanelLight 1.0s ease .21s both; }
.ho-garage-intro.ho-opening .ho-door-panel:nth-child(6) { animation: hoPanelLight 1.0s ease .25s both; }

.ho-intro-skip {
  position: absolute;
  right: 32px;
  bottom: 28px;
  z-index: 20;
  border: 0;
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.65);
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  cursor: pointer;
  padding: 10px 12px;
  backdrop-filter: blur(4px);
  transition: color .25s ease, background .25s ease;
}
.ho-intro-skip:hover {
  color: #fff;
  background: rgba(255,255,255,.055);
}

.ho-garage-intro.ho-finished {
  visibility: hidden;
  pointer-events: none;
}

@keyframes hoLogoIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hoWelcomeIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hoBottomReflection {
  to { opacity: .85; }
}
@keyframes hoPanelLight {
  0%   { filter: brightness(1); }
  35%  { filter: brightness(1.13); }
  100% { filter: brightness(.82); }
}
@keyframes hoBrandAttached {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  48%  { opacity: .9; }
  100% { opacity: 0; transform: translateY(-28vh) scale(.96); }
}
@keyframes hoSectionalDoorOpen {
  0% {
    transform: translateY(0) rotateX(0deg) scaleY(1);
  }
  7% {
    transform: translateY(-.8vh) rotateX(-.25deg) scaleY(1);
  }
  38% {
    transform: translateY(-35vh) rotateX(-1.3deg) scaleY(.995);
  }
  72% {
    transform: translateY(-74vh) rotateX(-2.1deg) scaleY(.985);
  }
  100% {
    transform: translateY(-106%) rotateX(-3deg) scaleY(.975);
  }
}

@media (max-width:700px) {
  .ho-garage-rail { width: 10px; }
  .ho-garage-door { inset-left: 10px; inset-right: 10px; }
  .ho-garage-door { left: 10px; right: 10px; }
  .ho-intro-logo { width: min(310px,72vw); }
  .ho-intro-welcome { letter-spacing: .28em; }
  .ho-intro-skip { right: 18px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ho-garage-intro { display: none !important; }
}


/* =========================================================
   HIGH OCTANE — INTRO V5
   Reveal ONLY the top slider, then restore normal page scroll
   ========================================================= */

/* Lock scrolling only for the duration of the intro. */
html.ho-intro-lock,
html.ho-intro-lock body {
  overflow: hidden !important;
  height: 100% !important;
}

/* Everything except the garage and the hero stays hidden during transition. */
html.ho-intro-lock body > *:not(.ho-garage-intro):not(.ho-intro-hero) {
  visibility: hidden !important;
}

/* The hero/slider is the only site content visible behind the garage. */
html.ho-intro-lock .ho-intro-hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  transform-origin: 50% 45%;
  transform: scale(.94);
  filter: blur(5px) brightness(.48) saturate(.88);
  opacity: .34;
  will-change: transform, filter, opacity;
}

/* Smoothly bring ONLY the hero into view while the garage is still opening. */
html.ho-site-reveal .ho-intro-hero {
  animation: hoHeroReveal 1.35s cubic-bezier(.18,.76,.22,1) forwards;
}

.ho-garage-intro.ho-site-reveal {
  animation: hoIntroBlendOutV5 1.08s cubic-bezier(.2,.7,.22,1) forwards;
}

.ho-garage-intro.ho-site-reveal .ho-garage-frame {
  animation: hoGarageCameraDriftV5 1.1s cubic-bezier(.2,.75,.2,1) forwards;
}

.ho-garage-intro.ho-site-reveal::after {
  content:"";
  position:absolute;
  inset:-12%;
  z-index:15;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 50% 54%,
      rgba(255,255,255,.11) 0%,
      rgba(255,255,255,.04) 22%,
      rgba(255,255,255,.01) 40%,
      transparent 62%);
  animation:hoBlendGlowV5 1.02s ease-out forwards;
}

@keyframes hoHeroReveal {
  0% {
    transform: scale(.94);
    filter: blur(5px) brightness(.48) saturate(.88);
    opacity: .34;
  }
  34% {
    transform: scale(.968);
    filter: blur(2.8px) brightness(.68) saturate(.93);
    opacity: .62;
  }
  72% {
    transform: scale(1.014);
    filter: blur(.7px) brightness(.95) saturate(.99);
    opacity: .96;
  }
  100% {
    transform: none;
    filter: none;
    opacity: 1;
  }
}

@keyframes hoIntroBlendOutV5 {
  0% { opacity:1; }
  35% { opacity:.94; }
  72% { opacity:.48; }
  100% { opacity:0; }
}

@keyframes hoGarageCameraDriftV5 {
  0% { transform:scale(1); filter:blur(0); }
  55% { transform:scale(1.035); filter:blur(.4px); }
  100% { transform:scale(1.08); filter:blur(1.5px); }
}

@keyframes hoBlendGlowV5 {
  0% { opacity:0; transform:scale(.9); }
  34% { opacity:.65; }
  100% { opacity:0; transform:scale(1.15); }
}

/* IMPORTANT: once intro classes are removed, absolutely no transforms,
   filters, visibility or fixed-height restrictions remain on the site. */
html:not(.ho-intro-lock) body,
html:not(.ho-intro-lock) {
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;
}

html:not(.ho-intro-lock) .ho-intro-hero {
  transform: none;
  filter: none;
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  html.ho-intro-lock .ho-intro-hero {
    transform:none !important;
    filter:none !important;
    opacity:1 !important;
  }
}



/* =========================================================
   HIGH OCTANE — VEHICLE DETAIL MODAL
   ========================================================= */
.car-detail-trigger { cursor:pointer; }
.car-detail-trigger .car-image { overflow:hidden; }
.car-detail-trigger .car-image img {
  transition:transform .65s cubic-bezier(.2,.72,.18,1), filter .4s ease;
}
.car-detail-trigger:hover .car-image img { transform:scale(1.035); }
.car-detail-trigger:focus-visible { outline:1px solid rgba(255,255,255,.8); outline-offset:6px; }

.car-discover {
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  cursor:pointer;
  white-space:nowrap;
}

html.vehicle-modal-open,
html.vehicle-modal-open body {
  overflow:hidden !important;
}

.vehicle-modal {
  position:fixed;
  inset:0;
  z-index:120000;
  display:grid;
  place-items:center;
  padding:clamp(14px,2.8vw,42px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .34s ease, visibility 0s linear .34s;
}

.vehicle-modal.is-open {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .34s ease;
}

.vehicle-modal__backdrop {
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(12px);
}

.vehicle-modal__dialog {
  position:relative;
  z-index:1;
  width:min(1240px,96vw);
  max-height:min(900px,92vh);
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(380px,.94fr);
  background:#f4f2ed;
  color:#111;
  overflow:hidden;
  box-shadow:0 38px 120px rgba(0,0,0,.5);
  transform:translateY(24px) scale(.985);
  opacity:0;
  transition:transform .48s cubic-bezier(.16,.84,.24,1), opacity .3s ease;
}

.vehicle-modal.is-open .vehicle-modal__dialog {
  transform:translateY(0) scale(1);
  opacity:1;
}

.vehicle-modal__close {
  position:absolute;
  top:18px;
  right:18px;
  z-index:8;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.3);
  border-radius:50%;
  background:rgba(0,0,0,.34);
  color:#fff;
  font-size:26px;
  font-weight:300;
  line-height:1;
  cursor:pointer;
  backdrop-filter:blur(8px);
  transition:background .2s ease, transform .2s ease;
}
.vehicle-modal__close:hover { background:#fff; color:#111; transform:rotate(4deg); }

.vehicle-modal__media {
  position:relative;
  min-height:650px;
  background:#111;
  overflow:hidden;
}
.vehicle-modal__media img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.035);
  transition:transform 1s cubic-bezier(.16,.84,.24,1);
}
.vehicle-modal.is-open .vehicle-modal__media img { transform:scale(1); }

.vehicle-modal__media-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.08) 35%,rgba(0,0,0,.78) 100%);
}
.vehicle-modal__badge {
  position:absolute;
  top:26px;
  left:26px;
  padding:10px 13px;
  border:1px solid rgba(255,255,255,.32);
  color:#fff;
  font-size:9px;
  font-weight:700;
  letter-spacing:.22em;
  backdrop-filter:blur(8px);
}
.vehicle-modal__headline {
  position:absolute;
  left:clamp(28px,4vw,58px);
  right:clamp(28px,4vw,58px);
  bottom:clamp(30px,4vw,58px);
  color:#fff;
}
.vehicle-modal__headline > span {
  display:block;
  margin-bottom:9px;
  font-size:10px;
  letter-spacing:.26em;
  font-weight:700;
}
.vehicle-modal__headline h2 {
  margin:0;
  font-size:clamp(38px,4.5vw,70px);
  line-height:.95;
  letter-spacing:-.045em;
}
.vehicle-modal__headline p {
  margin:15px 0 0;
  color:rgba(255,255,255,.75);
  font-size:13px;
  letter-spacing:.08em;
}

.vehicle-modal__content {
  overflow:auto;
  padding:clamp(38px,4.5vw,68px);
}
.vehicle-modal__eyebrow,
.vehicle-modal__price-label {
  display:block;
  margin:0 0 14px;
  font-size:9px;
  letter-spacing:.24em;
  font-weight:700;
  color:#74716b;
}
.vehicle-modal__intro > p:last-child {
  max-width:600px;
  margin:0;
  color:#3e3c38;
  font-size:15px;
  line-height:1.75;
}

.vehicle-specs {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin:38px 0 42px;
  border-top:1px solid #d6d2ca;
}
.vehicle-spec {
  padding:17px 0 16px;
  border-bottom:1px solid #d6d2ca;
}
.vehicle-spec:nth-child(odd) { padding-right:20px; }
.vehicle-spec:nth-child(even) {
  padding-left:20px;
  border-left:1px solid #d6d2ca;
}
.vehicle-spec span {
  display:block;
  margin-bottom:6px;
  color:#8b877f;
  font-size:9px;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.vehicle-spec strong {
  font-size:14px;
  font-weight:600;
}

.vehicle-modal__bottom {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:25px;
  padding-top:8px;
}
.vehicle-modal__bottom strong {
  display:block;
  font-size:clamp(24px,2vw,34px);
  line-height:1;
}
.vehicle-modal__cta {
  white-space:nowrap;
}
.vehicle-modal__note {
  margin:34px 0 0;
  padding-top:20px;
  border-top:1px solid #d6d2ca;
  color:#9a968e;
  font-size:10px;
  line-height:1.55;
}

@media(max-width:900px) {
  .vehicle-modal {
    align-items:end;
    padding:10px;
  }
  .vehicle-modal__dialog {
    width:100%;
    max-height:94vh;
    grid-template-columns:1fr;
    overflow:auto;
  }
  .vehicle-modal__media {
    min-height:42vh;
  }
  .vehicle-modal__content { overflow:visible; }
}

@media(max-width:560px) {
  .vehicle-modal__content { padding:30px 22px 34px; }
  .vehicle-specs { grid-template-columns:1fr; margin-top:28px; }
  .vehicle-spec:nth-child(odd),
  .vehicle-spec:nth-child(even) {
    padding:14px 0;
    border-left:0;
  }
  .vehicle-modal__bottom {
    align-items:stretch;
    flex-direction:column;
  }
  .vehicle-modal__cta { width:100%; text-align:center; }
}

.vehicle-modal__actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.vehicle-modal__mobile-link{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#111;text-decoration:none;border-bottom:1px solid rgba(17,17,17,.35);padding-bottom:4px}
.vehicle-modal__mobile-link:hover{border-color:#111}
@media(max-width:560px){.vehicle-modal__actions{width:100%;align-items:stretch;flex-direction:column}.vehicle-modal__mobile-link{text-align:center;padding:10px 0}}


/* =========================================================
   HIGH OCTANE — VEHICLE CARDS / WIDE AUTOMOTIVE CROPPING
   ========================================================= */
.cars .car-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.8vw,28px);
}
.cars .car-image{
  aspect-ratio:16/10;
  background:#0a0a0a;
  overflow:hidden;
}
.cars .car-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
  transform:scale(1);
  transition:transform .75s cubic-bezier(.2,.72,.18,1), filter .4s ease;
}
.cars .car-card:hover .car-image img{
  transform:scale(1.025);
}

/* Mobile.de source images are landscape shots; keep the crop wide enough
   that the complete silhouette remains visible instead of zooming into a wheel. */
@media(max-width:1050px){
  .cars .car-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:700px){
  .cars .car-grid{grid-template-columns:1fr;}
  .cars .car-image{aspect-ratio:16/9;}
}


/* =========================================================
   HIGH OCTANE — VEHICLE MODAL V3 / FULL FIT + IMAGE GALLERY
   ========================================================= */
.vehicle-modal{
  padding:clamp(10px,2vw,28px);
}
.vehicle-modal__dialog{
  width:min(1380px,97vw);
  height:min(880px,94vh);
  max-height:94vh;
  grid-template-columns:minmax(0,1.12fr) minmax(410px,.88fr);
  overflow:hidden;
  border-radius:0;
}
.vehicle-modal__media{
  min-height:0 !important;
  height:100%;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  background:#090909;
  overflow:hidden;
}
.vehicle-gallery{
  min-height:0;
  height:100%;
  display:grid;
  grid-template-rows:minmax(0,1fr) 88px;
  background:#090909;
}
.vehicle-gallery__stage{
  position:relative;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#080808;
}
.vehicle-gallery__stage::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.04),transparent 64%);
  pointer-events:none;
}
.vehicle-modal__media .vehicle-gallery__stage > img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
  display:block;
  background:#080808;
}
.vehicle-modal.is-open .vehicle-modal__media img{
  transform:none !important;
}
.vehicle-modal__media-shade{display:none !important;}
.vehicle-modal__badge{
  z-index:4;
  top:22px;
  left:22px;
  background:rgba(0,0,0,.35);
}
.vehicle-gallery__counter{
  position:absolute;
  right:22px;
  bottom:18px;
  z-index:4;
  padding:8px 11px;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:10px;
  font-weight:700;
  letter-spacing:.13em;
  backdrop-filter:blur(8px);
}
.vehicle-gallery__nav{
  position:absolute;
  top:50%;
  z-index:5;
  width:48px;
  height:48px;
  margin-top:-24px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  background:rgba(0,0,0,.35);
  color:#fff;
  font-size:32px;
  font-weight:200;
  line-height:1;
  cursor:pointer;
  backdrop-filter:blur(8px);
  transition:background .2s ease,transform .2s ease;
}
.vehicle-gallery__nav:hover{
  background:#fff;
  color:#111;
  transform:scale(1.05);
}
.vehicle-gallery__prev{left:20px;}
.vehicle-gallery__next{right:20px;}

.vehicle-gallery__thumbs{
  display:flex;
  gap:7px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:8px;
  background:#111;
  scrollbar-width:thin;
  scroll-behavior:smooth;
}
.vehicle-gallery__thumb{
  flex:0 0 112px;
  height:70px;
  padding:0;
  border:1px solid transparent;
  background:#050505;
  cursor:pointer;
  opacity:.52;
  transition:opacity .2s ease,border-color .2s ease;
}
.vehicle-gallery__thumb:hover{opacity:.85;}
.vehicle-gallery__thumb.is-active{
  opacity:1;
  border-color:#fff;
}
.vehicle-gallery__thumb img{
  width:100%;
  height:100%;
  object-fit:cover !important;
  transform:none !important;
  display:block;
}
.vehicle-modal__headline{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  padding:22px 30px 28px;
  background:#090909;
  color:#fff;
}
.vehicle-modal__headline h2{
  font-size:clamp(30px,3vw,52px);
}
.vehicle-modal__headline p{
  margin-top:10px;
}
.vehicle-modal__content{
  min-height:0;
  height:100%;
  overflow-y:auto !important;
  overscroll-behavior:contain;
  padding:clamp(34px,3.5vw,58px);
  scrollbar-width:thin;
  scrollbar-color:#aaa transparent;
}
.vehicle-modal__content::-webkit-scrollbar{width:7px;}
.vehicle-modal__content::-webkit-scrollbar-thumb{background:#aaa;}
.vehicle-modal__scrollhint{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:-8px 0 28px;
  padding-bottom:14px;
  border-bottom:1px solid #d6d2ca;
  color:#8a867e;
  font-size:9px;
  font-weight:700;
  letter-spacing:.2em;
}
.vehicle-modal__scrollhint span{
  font-size:16px;
  animation:vehicleScrollHint 1.5s ease-in-out infinite;
}
@keyframes vehicleScrollHint{
  0%,100%{transform:translateY(-2px)}
  50%{transform:translateY(3px)}
}
.vehicle-modal__bottom{
  position:relative;
  padding:22px 0 4px;
  background:#f4f2ed;
}
.vehicle-modal__close{
  position:fixed;
  top:max(22px,calc(3vh + 8px));
  right:max(22px,calc(1.5vw + 12px));
}

@media(max-width:1000px){
  .vehicle-modal{
    align-items:center;
  }
  .vehicle-modal__dialog{
    width:min(760px,96vw);
    height:94vh;
    max-height:94vh;
    display:block;
    overflow-y:auto;
  }
  .vehicle-modal__media{
    height:auto;
    min-height:0 !important;
  }
  .vehicle-gallery{
    height:auto;
    grid-template-rows:minmax(280px,52vh) 78px;
  }
  .vehicle-modal__content{
    height:auto;
    overflow:visible !important;
  }
  .vehicle-gallery__thumb{
    flex-basis:98px;
    height:62px;
  }
  .vehicle-modal__close{
    position:absolute;
  }
}

@media(max-width:560px){
  .vehicle-modal{padding:0;}
  .vehicle-modal__dialog{
    width:100%;
    height:100dvh;
    max-height:100dvh;
  }
  .vehicle-gallery{
    grid-template-rows:minmax(240px,43vh) 68px;
  }
  .vehicle-gallery__thumb{
    flex-basis:82px;
    height:52px;
  }
  .vehicle-gallery__nav{
    width:42px;
    height:42px;
    margin-top:-21px;
  }
  .vehicle-gallery__prev{left:10px;}
  .vehicle-gallery__next{right:10px;}
  .vehicle-modal__headline{
    padding:20px 22px 24px;
  }
}


/* =========================================================
   HIGH OCTANE — SOLD BY HIGH OCTANE / ORIGINAL LIVE IMAGES
   ========================================================= */
.sold-live-track{
  display:flex;
  gap:clamp(14px,1.6vw,24px);
  overflow-x:auto;
  padding-bottom:28px;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
}
.sold-live-track::-webkit-scrollbar{display:none}
.sold-live-card{
  flex:0 0 clamp(300px,31vw,510px);
  scroll-snap-align:start;
}
.sold-live-image{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:#0b0b0b;
}
.sold-live-placeholder{
  position:absolute;
  inset:0;
  z-index:0;
  display:grid;
  place-items:center;
  background:
    linear-gradient(135deg,rgba(255,255,255,.035),transparent 45%),
    #0c0c0c;
}
.sold-live-placeholder span{
  color:rgba(255,255,255,.16);
  font-size:clamp(42px,5vw,80px);
  font-weight:700;
  letter-spacing:.12em;
}
.sold-live-image img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  opacity:0;
  filter:grayscale(100%) contrast(1.07);
  transition:opacity .35s ease,transform .7s cubic-bezier(.2,.72,.18,1);
}
.sold-live-card.has-image .sold-live-image img{opacity:1}
.sold-live-card:hover .sold-live-image img{transform:scale(1.025)}
.sold-live-card > span{
  display:block;
  margin-top:13px;
  color:inherit;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
@media(max-width:700px){
  .sold-live-card{flex-basis:82vw}
}

/* Alexander's Welt — editorial story cards */
.stories article, .stories .story-card{position:relative}
.story-card-link{position:absolute;inset:0;z-index:5}
.story-read{display:inline-block;margin-top:14px;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}

/* HIGH OCTANE NEWSLETTER */
.newsletter{background:#eeeae2;color:#111;padding:110px 5vw}.newsletter-inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:8vw;align-items:start}.newsletter-copy h2{margin:14px 0 24px;font-size:clamp(42px,5.5vw,82px);line-height:.92;letter-spacing:-.055em}.newsletter-copy h2 em{font-family:Georgia,serif;font-weight:400}.newsletter-copy>p:last-child{max-width:520px;color:#666;font-size:16px;line-height:1.7}.newsletter-form{padding-top:20px}.newsletter-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.newsletter-form label>span{display:block;margin-bottom:9px;font-size:9px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#777}.newsletter-form input[type="text"],.newsletter-form input[type="email"]{width:100%;border:0;border-bottom:1px solid #aaa;background:transparent;padding:13px 0;font:inherit;outline:0}.newsletter-consent{display:grid!important;grid-template-columns:18px 1fr;gap:12px;margin-top:28px;align-items:start}.newsletter-consent input{margin-top:3px;accent-color:#111}.newsletter-consent span{font-size:10px!important;line-height:1.6!important;text-transform:none!important;letter-spacing:0!important;color:#777!important}.newsletter-bottom{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-top:30px;padding-top:24px;border-top:1px solid #bbb}.newsletter-bottom p{margin:0;color:#555;font-size:11px}.newsletter-bottom button{border:0;background:#111;color:#fff;padding:16px 20px;font-size:9px;font-weight:700;letter-spacing:.13em;cursor:pointer;white-space:nowrap}@media(max-width:800px){.newsletter-inner,.newsletter-grid{grid-template-columns:1fr}.newsletter-bottom{align-items:stretch;flex-direction:column}.newsletter-bottom button{width:100%}}

/* V14 — Push opt-in */
.push-optin{background:#0d0d0d;color:#fff}
.push-optin__inner{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-top:54px;padding-bottom:54px}
.push-optin h2{margin:6px 0 10px;font-size:clamp(36px,5vw,68px);line-height:.95;letter-spacing:-.05em}
.push-optin p{max-width:680px;margin:0;color:rgba(255,255,255,.66);line-height:1.6}
.push-optin__button{min-height:46px;padding:0 18px;border:1px solid rgba(255,255,255,.45);background:#fff;color:#111;font-size:9px;font-weight:800;letter-spacing:.09em;cursor:pointer;white-space:nowrap}
.push-optin__button.is-active{background:transparent;color:#fff}
@media(max-width:760px){.push-optin__inner{align-items:flex-start;flex-direction:column}.push-optin__button{width:100%}}


/* =========================================================
   V15 — PWA install CTA
   ========================================================= */
.pwa-install{
  background:#0b0b0b;
  color:#fff;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.pwa-install__inner{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
  gap:64px;
  align-items:center;
  padding-top:72px;
  padding-bottom:72px;
}
.pwa-install__copy h2{
  max-width:880px;
  margin:8px 0 16px;
  font-size:clamp(42px,6vw,84px);
  line-height:.92;
  letter-spacing:-.055em;
  font-weight:500;
}
.pwa-install__copy p{
  max-width:720px;
  margin:0;
  color:rgba(255,255,255,.62);
  font-size:15px;
  line-height:1.65;
}
.pwa-install__status{
  min-height:18px;
  margin-top:16px;
  color:rgba(255,255,255,.48);
  font-size:10px;
  line-height:1.5;
}
.pwa-install__actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.pwa-install__button{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:"kicker arrow" "title arrow";
  gap:5px 18px;
  align-items:center;
  width:100%;
  min-height:118px;
  padding:22px 24px;
  border:1px solid rgba(255,255,255,.22);
  background:#fff;
  color:#0b0b0b;
  text-align:left;
  cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.pwa-install__button:hover{background:#ecece8}
.pwa-install__button-kicker{
  grid-area:kicker;
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em;
  color:#777;
}
.pwa-install__button strong{
  grid-area:title;
  font-size:18px;
  letter-spacing:-.01em;
}
.pwa-install__button-arrow{
  grid-area:arrow;
  font-size:29px;
}
.pwa-install__button.is-installed{
  background:#171717;
  color:#fff;
  border-color:#3a3a3a;
}
.pwa-install__button.is-installed .pwa-install__button-kicker{color:#858585}
.pwa-install__push{
  width:100%;
  min-height:48px;
  padding:0 16px;
  border:1px solid rgba(255,255,255,.28);
  background:transparent;
  color:#fff;
  font-size:9px;
  font-weight:800;
  letter-spacing:.1em;
  cursor:pointer;
}
.pwa-install__push:hover,.pwa-install__push.is-active{
  background:#fff;
  color:#111;
}

/* iOS/browser install guide */
.pwa-help[hidden]{display:none!important}
.pwa-help{
  position:fixed;
  inset:0;
  z-index:16000;
  display:grid;
  place-items:center;
  padding:20px;
}
.pwa-help__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.84);
  backdrop-filter:blur(8px);
}
.pwa-help__dialog{
  position:relative;
  z-index:1;
  width:min(560px,94vw);
  padding:34px;
  background:#f4f4f0;
  color:#111;
}
.pwa-help__dialog h2{
  margin:8px 0 24px;
  font-size:38px;
  line-height:.98;
  letter-spacing:-.045em;
}
.pwa-help__close{
  position:absolute;
  top:12px;
  right:12px;
  width:42px;
  height:42px;
  border:1px solid #d4d4d0;
  background:transparent;
  font-size:26px;
  cursor:pointer;
}
.pwa-help__steps{
  border-top:1px solid #d8d8d3;
}
.pwa-help__steps>div{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:12px;
  padding:16px 0;
  border-bottom:1px solid #d8d8d3;
}
.pwa-help__steps strong{
  font-size:10px;
  letter-spacing:.08em;
}
.pwa-help__steps p{
  margin:0;
  font-size:13px;
  line-height:1.55;
}
.pwa-help__done{
  width:100%;
  min-height:44px;
  margin-top:20px;
  border:0;
  background:#111;
  color:#fff;
  font-size:9px;
  font-weight:800;
  letter-spacing:.1em;
  cursor:pointer;
}
body.pwa-help-open{overflow:hidden}

@media(max-width:850px){
  .pwa-install__inner{
    grid-template-columns:1fr;
    gap:34px;
    padding-top:54px;
    padding-bottom:54px;
  }
  .pwa-install__copy h2{font-size:clamp(42px,12vw,66px)}
  .pwa-help__dialog{padding:28px 22px}
}
