/* M&A Automotives — concept C "Lens". Layout: one pinned shot (4 clips, lens-iris cuts) that releases into services, booking and visit sections on the same black ground. */
@font-face{font-family:"Big Shoulders Display";src:url(fonts/big-shoulders-display-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Big Shoulders Display";src:url(fonts/big-shoulders-display-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Big Shoulders Display";src:url(fonts/big-shoulders-display-latin-900-normal.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken-grotesk-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken-grotesk-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}

:root{
  --ink:#04060a; --ink-2:#0a0e14; --chrome:#f2f7ff; --mute:#a9b8c8; --red:#EE4D38; --cyan:#3fd2ff;
  --line:rgba(255,255,255,.22);
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --text:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:max(16px,env(safe-area-inset-left,0px));
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;background:var(--ink)}
body{background:var(--ink);color:var(--chrome);font-family:var(--text);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- header ---------- */
.top{position:fixed;left:0;right:0;top:0;z-index:50;height:92px;padding:0 max(24px,4vw);display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,rgba(4,6,10,.85),rgba(4,6,10,0));transition:background .3s}
body.lock{overflow:hidden}
body.past .top{background:rgba(4,6,10,.92);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:baseline;gap:14px;text-decoration:none}
.logo b{font:900 52px/1 var(--display);letter-spacing:.01em}
.logo span{font:700 11px var(--text);letter-spacing:.28em;color:var(--mute);text-transform:uppercase}
.nav{display:flex;align-items:center;gap:36px;font:700 13px var(--text);letter-spacing:.2em;text-transform:uppercase}
.nav a{text-decoration:none;padding:8px 0}
.nav a:hover{color:var(--red)}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:12px;font:800 14px var(--text);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:18px 26px;background:var(--red);color:var(--ink);transition:transform .18s ease-out,background .18s}
.btn:hover{transform:translateY(-2px);background:#ff5a50}
.btn:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-130%);pointer-events:none}
.btn:hover:after{transform:translateX(130%);transition:transform .75s}
.btn.ghost{background:transparent;color:var(--chrome);border:1px solid rgba(255,255,255,.6)}
.btn.ghost:hover{background:var(--chrome);color:var(--ink)}
.nav .btn{padding:14px 20px;font-size:13px}

/* ---------- journey (pinned shot) ---------- */
.journey{position:relative;height:580vh}
.stage{position:sticky;top:0;height:100vh;min-height:560px;overflow:hidden;background:var(--ink)}
.poster,.cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.poster{background-size:cover;background-position:center}
.shade{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(2,4,7,.94) 0%,rgba(2,4,7,.86) 30%,rgba(2,4,7,.5) 50%,rgba(2,4,7,0) 70%),
  linear-gradient(0deg,rgba(2,4,7,.9) 0%,rgba(2,4,7,0) 30%),
  linear-gradient(180deg,rgba(2,4,7,.7) 0%,rgba(2,4,7,0) 18%)}
svg.rings{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.wm{position:absolute;left:30vw;bottom:-11vw;font:900 clamp(300px,45vw,860px)/1 var(--display);color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.09);mix-blend-mode:screen;letter-spacing:-.02em;white-space:nowrap;pointer-events:none;will-change:transform}

.stack{position:absolute;left:max(24px,5vw);top:clamp(100px,15vh,150px);width:min(60vw,860px);z-index:5}
.it{position:relative;padding-left:clamp(44px,4.4vw,64px)}
.it .w{display:block;text-align:left;font:900 clamp(34px,min(5.4vw,8.6vh),78px)/1 var(--display);text-transform:uppercase;color:rgba(242,247,255,.5);text-shadow:0 2px 22px rgba(0,0,0,.9);letter-spacing:.005em;transition:font-size .55s cubic-bezier(.2,.7,.2,1),color .2s;white-space:nowrap}
.it .w:hover{color:#fff}
.it sup{position:absolute;left:0;top:.35em;font:800 13px var(--text);letter-spacing:.18em;color:rgba(255,255,255,.75);transition:color .18s}
.it.on .w{font-size:clamp(58px,min(8.9vw,14.4vh),128px);line-height:.92;color:#fff;text-shadow:0 4px 34px rgba(0,0,0,.85)}
.it.on sup{color:var(--red)}
.it.on:before{content:"";position:absolute;left:0;top:clamp(36px,6vh,54px);width:clamp(28px,3vw,44px);height:6px;background:var(--red);box-shadow:0 0 18px var(--red)}
.open{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s cubic-bezier(.2,.7,.2,1)}
.it.on .open{grid-template-rows:1fr}
.open>.in{overflow:hidden;min-height:0;opacity:0;transition:opacity .35s}
.it.on .open>.in{opacity:1;transition:opacity .5s .2s}
.pn{margin-top:18px;max-width:540px;padding:20px 22px 18px;background:rgba(3,5,8,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-left:4px solid var(--red);box-shadow:0 20px 60px -20px rgba(0,0,0,.9)}
.open p{font-size:clamp(17px,1.5vw,21px);line-height:1.45;color:#fff}
.chips{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.chips i{font:800 12px var(--text);font-style:normal;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.32);padding:8px 12px;color:#fff}
.cta{margin:18px 0 2px;display:flex;flex-wrap:wrap;gap:12px}
.hrs{margin-top:14px;display:flex;gap:28px;font:800 12px var(--text);letter-spacing:.1em;text-transform:uppercase;color:#c4d2e0}
.hrs b{display:block;margin-top:4px;color:#fff;font-size:15px;letter-spacing:.05em}

.lens{position:absolute;right:max(24px,5vw);bottom:clamp(130px,21vh,200px);width:clamp(140px,12vw,220px);aspect-ratio:1;z-index:6;text-align:center}
.lens .ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--red) var(--p,0%),rgba(255,255,255,.22) 0);-webkit-mask:radial-gradient(circle,transparent 44%,#000 45.5%,#000 48.5%,transparent 50%);mask:radial-gradient(circle,transparent 44%,#000 45.5%,#000 48.5%,transparent 50%)}
.lens .img{position:absolute;inset:6%;border-radius:50%;background-size:cover;background-position:center;box-shadow:0 0 50px rgba(0,0,0,.7);transition:transform .25s}
.lens:hover .img{transform:scale(1.04)}
.lens{transition:opacity .4s,transform .5s}
.lens.off{opacity:0;transform:scale(.6);pointer-events:none}
.lens .lab{position:absolute;left:50%;transform:translateX(-50%);top:104%;white-space:nowrap;font:800 22px/1 var(--display);letter-spacing:.14em;text-transform:uppercase}
.lens .lab small{display:block;font:700 11px var(--text);letter-spacing:.24em;color:var(--mute);margin-bottom:6px}

/* ---------- inventory overlay + showroom ---------- */
.invcard{display:grid;grid-template-columns:96px 1fr auto;gap:16px;align-items:center;width:100%;margin-top:20px;padding:12px 18px 12px 12px;text-align:left;border:1px solid var(--line);background:var(--ink);transition:border-color .2s,transform .25s,background .2s}
.invcard:hover{border-color:var(--red);transform:translateY(-3px);background:#0b0f15}
.invcard .th{width:96px;height:72px;background-size:cover;background-position:55% 40%}
.invcard small{display:block;font:800 11px var(--text);letter-spacing:.22em;text-transform:uppercase;color:var(--red)}
.invcard b{display:block;font:900 28px/1.05 var(--display);text-transform:uppercase;letter-spacing:.03em;margin-top:2px}
.invcard em{font-style:normal;color:var(--mute);font-size:14px}
.invcard .ar{font:800 26px var(--text);color:var(--red);transition:transform .25s}.invcard:hover .ar{transform:translateX(6px)}
.inv{position:fixed;inset:0;z-index:100;background:rgba(2,4,7,.97);opacity:0;transition:opacity .35s}
.inv.on{opacity:1}
.showroom{position:absolute;left:max(16px,4vw);right:max(16px,4vw);top:20px;bottom:20px;display:flex;flex-direction:column;gap:12px;min-height:0}
.sr-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sr-top b{font:900 clamp(30px,4vw,56px)/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.sr-top b small{display:block;font:800 11px var(--text);letter-spacing:.26em;color:var(--red);margin-bottom:4px}
.sr-x{padding:12px 18px;border:1px solid rgba(255,255,255,.5);font:800 13px var(--text);letter-spacing:.14em;text-transform:uppercase;color:#fff}.sr-x:hover{background:#fff;color:var(--ink)}
.sr-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));overflow:auto;padding:4px 2px 20px;align-content:start;flex:1}
.sr-gc{position:relative;text-align:left;background:#090d13;border:1px solid rgba(255,255,255,.28);overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .2s;animation:rise .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--k,0)*.07s)}
.sr-gc:hover{transform:translateY(-8px);border-color:#fff}
.sr-gc .im{display:block;aspect-ratio:16/10;background-size:cover;background-position:center;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.sr-gc:hover .im{transform:scale(1.06)}
.sr-gc .imw{display:block;overflow:hidden}
.sr-gc .tx{display:block;padding:14px 16px 16px}
.sr-gc small{display:block;font:800 11px var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.sr-gc b{display:block;margin-top:4px;font:900 28px/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.sr-gc span.m{display:block;margin-top:6px;color:#b9c7d5;font-size:14px}
.sr-gc .go{display:block;margin-top:10px;font:800 12px var(--text);letter-spacing:.16em;text-transform:uppercase;color:#fff}
.sr-gc em{position:absolute;left:10px;top:10px;font:800 10px var(--text);letter-spacing:.14em;font-style:normal;background:var(--red);color:var(--ink);padding:4px 7px}
.sr-stage{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0}
.sr-stage[hidden]{display:none}
.sr-tabs{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
.sr-back{padding:11px 16px;border:1px solid rgba(255,255,255,.4);font:800 13px var(--text);letter-spacing:.14em;text-transform:uppercase;background:rgba(3,5,8,.86)}.sr-back:hover{background:#fff;color:var(--ink)}
.sr-tab{padding:11px 16px;font:800 13px var(--text);letter-spacing:.16em;text-transform:uppercase;border:1px solid rgba(255,255,255,.4);background:rgba(3,5,8,.86);color:#fff;transition:background .2s,color .2s,transform .2s}
.sr-tab small{display:block;font:700 10px var(--text);letter-spacing:.2em;color:#9fb2c4;margin-bottom:2px}
.sr-tab:hover{transform:translateY(-2px);border-color:#fff}
.sr-tab.on{background:var(--red);border-color:var(--red);color:var(--ink)}.sr-tab.on small{color:rgba(4,6,10,.7)}
.sr-view{position:relative;overflow:hidden;background:#04060a;border:1px solid rgba(255,255,255,.34);min-height:0;flex:1;box-shadow:0 30px 90px -30px #000;perspective:1200px}
.sr-drift{position:absolute;inset:0;animation:drift 13s ease-in-out infinite alternate;will-change:transform}
@keyframes drift{from{transform:translate3d(-7px,-3px,0) scale(1.018) rotate(-.25deg)}to{transform:translate3d(7px,4px,0) scale(1.004) rotate(.25deg)}}
.cam{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform,opacity;transition:opacity .9s ease;opacity:0}
.cam.live{opacity:1}
.cam.snap{transition:none}
.cam img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.pin{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:2px solid #fff;background:var(--red);color:var(--ink);font:800 12px/26px var(--text);text-align:center;padding:0;transform:scale(calc(1/var(--z,1)));transition:background .2s,opacity .3s}
.fly .pin{opacity:0}
.pin:before{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid var(--red);animation:ping 2s ease-out infinite}
.pin.on{background:#fff}
@keyframes ping{from{transform:scale(.6);opacity:1}to{transform:scale(1.5);opacity:0}}
.sr-vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,transparent 55%,rgba(0,0,0,.6) 100%)}
.sr-scan{position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:0;pointer-events:none}
.sr-scan.go{animation:scan 1.1s ease-in-out}
@keyframes scan{0%{top:0;opacity:.9}100%{top:100%;opacity:0}}
.lb{position:absolute;left:0;right:0;height:0;background:#000;transition:height .6s cubic-bezier(.2,.7,.2,1);pointer-events:none;z-index:2}
.lb.t{top:0}.lb.b{bottom:0}
.sr-view.cine .lb{height:7%}
.sr-hud{position:absolute;left:16px;top:14px;z-index:3;text-shadow:0 2px 14px #000}
.sr-hud b{display:block;font:900 clamp(26px,2.6vw,42px)/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.sr-hud span{display:block;margin-top:5px;font:800 12px var(--text);letter-spacing:.16em;text-transform:uppercase;color:#d6e0ea}
.sr-book{position:absolute;right:12px;bottom:12px;z-index:4;padding:11px 14px;background:var(--red);color:var(--ink);font:800 12px var(--text);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:background .2s,transform .2s}
.sr-book:hover{background:#ff5a50;transform:translateY(-2px)}
.sr-badge{position:absolute;right:12px;top:12px;z-index:3;font:800 10px var(--text);letter-spacing:.16em;background:var(--red);color:var(--ink);padding:5px 8px}
.sr-cap{position:absolute;left:14px;bottom:14px;z-index:3;max-width:min(360px,70%);padding:14px 16px;background:rgba(3,5,8,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-left:4px solid var(--red);transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
.sr-cap.hide{opacity:0;transform:translateY(10px)}
.sr-cap b{display:block;font:900 24px/1 var(--display);text-transform:uppercase;letter-spacing:.04em}
.sr-cap p{margin-top:6px;font-size:15px;line-height:1.4;color:#e4ecf4}
.sr-feats{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.sr-feats::-webkit-scrollbar{display:none}
.sr-f{flex:none;display:flex;align-items:center;gap:10px;padding:11px 14px;background:rgba(3,5,8,.88);border:1px solid rgba(255,255,255,.34);font:800 12px var(--text);letter-spacing:.12em;text-transform:uppercase;color:#fff;transition:background .2s,color .2s,transform .2s,border-color .2s}
.sr-f i{font-style:normal;color:var(--red);font-size:13px}
.sr-f:hover{transform:translateY(-3px);border-color:#fff}
.sr-f.on{background:#fff;color:var(--ink);border-color:#fff}.sr-f.on i{color:var(--red)}
.sr-f.tour{border-style:dashed}.sr-f.tour.on{background:var(--cyan);border-color:var(--cyan)}
.sr-f.book{background:var(--red);border-color:var(--red);color:var(--ink);text-decoration:none}.sr-f.book:hover{background:#ff5a50}

.band{position:absolute;left:-3vw;width:106vw;white-space:nowrap;overflow:hidden;font:800 26px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
.band span{display:inline-block;padding-left:0;animation:tick 40s linear infinite}
.band.r{bottom:20px;height:46px;line-height:46px;background:var(--red);color:var(--ink);transform:rotate(-1.3deg) skewX(var(--sk,0deg));z-index:8}
.band.w{bottom:44px;height:36px;line-height:36px;background:var(--chrome);color:var(--ink);transform:rotate(.9deg) skewX(var(--sk,0deg));z-index:7;font-size:21px}
.band.w span{animation-direction:reverse;animation-duration:55s}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section.sec{scroll-margin-top:60px;position:relative;padding:clamp(80px,12vw,160px) max(24px,5vw);background:var(--ink)}
.eyebrow{font:800 13px var(--text);letter-spacing:.3em;text-transform:uppercase;color:var(--red)}
h2.big{margin-top:14px;font:900 clamp(64px,11vw,190px)/.88 var(--display);text-transform:uppercase;letter-spacing:-.005em}
h2.big em{font-style:normal;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.55)}
.lead{margin-top:24px;max-width:620px;font-size:clamp(18px,1.6vw,23px);line-height:1.5;color:#cfdbe7}

#services{overflow:hidden}
#services:before{content:"";position:absolute;inset:0;background:url(img/s3.jpg) center/cover;opacity:.18;mix-blend-mode:screen;pointer-events:none}
.svc{position:relative;margin-top:56px;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:64px minmax(0,1.25fr) minmax(0,1fr) auto;gap:24px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);transition:background .2s,color .2s,padding .25s ease-out;text-decoration:none;position:relative}
.row .n{font:700 14px var(--text);letter-spacing:.18em;color:var(--mute)}
.row h3{font:900 clamp(34px,4.6vw,76px)/.95 var(--display);text-transform:uppercase}
.row p{font-size:17px;color:#b9c7d5;max-width:420px}
.row .go{font:800 13px var(--text);letter-spacing:.16em;text-transform:uppercase;border:1px solid rgba(255,255,255,.55);padding:14px 18px;white-space:nowrap}
.row:hover{background:var(--chrome);color:var(--ink);padding-left:20px;padding-right:20px}
.row:hover p,.row:hover .n{color:#2a3440}
.row:hover .go{background:var(--red);border-color:var(--red);color:var(--ink)}

#book{background:var(--ink-2);border-top:1px solid var(--line)}
.bk{margin-top:48px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,90px);align-items:start}
.steps{list-style:none;counter-reset:s;border-top:1px solid var(--line)}
.steps li{counter-increment:s;display:grid;grid-template-columns:48px 1fr;gap:12px;padding:20px 0;border-bottom:1px solid var(--line)}
.steps li:before{content:counter(s,decimal-leading-zero);font:800 16px var(--text);color:var(--red);letter-spacing:.12em;padding-top:4px}
.steps b{display:block;font:800 26px/1.1 var(--display);letter-spacing:.04em;text-transform:uppercase}
.steps span{display:block;margin-top:6px;color:#bccad8}
.rate{margin-top:28px;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;padding:22px 24px;border:1px solid var(--red)}
.rate b{font:900 64px/1 var(--display)}
.rate span{font-size:17px;color:#d6e0ea;max-width:300px}
.panel{border:1px solid var(--line);background:var(--ink)}
.panel .hd{padding:16px 22px;border-bottom:1px solid var(--line);font:800 13px var(--text);letter-spacing:.24em;text-transform:uppercase;display:flex;justify-content:space-between;gap:12px}
.panel .hd i{font-style:normal;color:var(--red)}
[data-quote-desk-inline]{display:block;min-height:420px;padding:0}
[data-quote-desk-inline]:empty{display:grid;place-items:center;text-align:center;padding:40px;color:var(--mute);border-bottom:1px dashed var(--line)}
[data-quote-desk-inline]:empty:before{content:"The Book a Diagnostic assistant loads here once the Quote Desk snippet is added.";max-width:340px}
.ask{padding:22px;border-top:1px solid var(--line)}
.ask h4{font:800 12px var(--text);letter-spacing:.24em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.ask ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.ask li{font:700 12px var(--text);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);padding:8px 11px;color:#d6e0ea}
.callrow{margin-top:20px;font-size:18px;color:#cfdbe7}
.callrow a{color:var(--chrome);font-weight:800;text-decoration-color:var(--red);text-underline-offset:5px}

#visit{overflow:hidden}
.vis{margin-top:48px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,70px)}
.vis h4{font:800 13px var(--text);letter-spacing:.26em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.vis dl>div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:18px}
.vis dt{color:#cfdbe7}.vis dd{font-weight:700}
.vis p,.vis address{font-style:normal;font-size:20px;line-height:1.5}
.vis a{text-underline-offset:5px;text-decoration-color:var(--red)}
.vis .big-tel{display:block;font:900 clamp(40px,4.4vw,70px)/1 var(--display);margin-top:6px;text-decoration:none}
footer{padding:30px max(24px,5vw) 120px;background:var(--ink);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--mute)}

.js .rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease-out,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}

/* ---------- motion ---------- */
.js .top{animation:drop .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes drop{from{translate:0 -100%;opacity:0}}
.js .it{animation:rise 1s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.2s + var(--k,0)*.11s)}
@keyframes rise{from{translate:-46px 0;opacity:0}}
.js .band{animation:bandin 1s cubic-bezier(.2,.7,.2,1) .7s both}
@keyframes bandin{from{translate:0 140%}}
.js .lens{animation:pop .9s cubic-bezier(.2,.9,.25,1.2) 1s both}
@keyframes pop{from{scale:.4;opacity:0}}
.js svg.rings{animation:ringin 1.8s cubic-bezier(.2,.7,.2,1) .2s both}
@keyframes ringin{from{opacity:0;scale:.7}}
.pulse2{animation:pulse 2.2s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pulse{from{transform:scale(1);opacity:1}to{transform:scale(2.6);opacity:0}}
.js .wm{animation:fadein 2s .4s both}
@keyframes fadein{from{opacity:0}}
.row .go{transition:background .2s,transform .25s}
.row:hover .go{transform:translateX(6px)}
.rate{position:relative;overflow:hidden}
.rate:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--red);animation:glow 2.6s ease-in-out infinite alternate}
@keyframes glow{from{box-shadow:0 0 0 var(--red)}to{box-shadow:0 0 26px var(--red)}}
.js .rv{transition-delay:var(--d,0s)}

/* ---------- responsive ---------- */
@media (max-height:800px){.pn{margin-top:10px;padding:14px 18px}.chips{margin-top:10px}.cta{margin-top:12px}.btn{padding:14px 20px}}
@media (max-width:980px){
  .nav a:not(.btn){display:none}.nav{gap:0}
  .row{grid-template-columns:44px 1fr auto}.row p{display:none}
  .bk{grid-template-columns:1fr}
  .vis{grid-template-columns:1fr}
  .lens{display:none}
  .invcard b{font-size:22px}.invcard{grid-template-columns:72px 1fr auto}.invcard .th{width:72px;height:56px}
  .sr-tab{padding:9px 10px;font-size:11px;letter-spacing:.1em;flex:1}.sr-tab small{display:none}
  .sr-book{padding:9px 11px;font-size:11px}.sr-cap{bottom:56px}
}
@media (max-width:620px){
  .logo b{font-size:40px}.logo span{display:none}
  .top{height:72px}.nav .btn{padding:12px 14px;font-size:12px}
  .stack{top:84px;width:92vw}
  .it .w{font-size:clamp(30px,10vw,44px)}
  .it.on .w{font-size:clamp(44px,13vw,64px)}
  .it{padding-left:34px}.it sup{font-size:11px}
  .it.on:before{top:30px;width:22px}
  .chips{display:none}
  .open p{font-size:16px}
  .sr-hud b{font-size:24px}.sr-cap{max-width:80%;padding:10px 12px}.sr-cap p{font-size:13.5px}.sr-cap b{font-size:19px}
  .pn{padding:14px 16px;margin-top:12px}
  .band.r{font-size:20px;height:36px;line-height:36px}.band.w{display:none}
  .row{grid-template-columns:1fr;gap:14px}.row .n{display:none}
  .row .go{padding:12px 14px;justify-self:start}
  .rate b{font-size:52px}
}
@media (prefers-reduced-motion:reduce){
  .band span{animation:none}
  .open,.open>.in,.it .w,.showroom,.cam,.js .rv{transition:none}
  .js .top,.js .it,.js .band,.js .lens,.js svg.rings,.js .wm,.pulse2,.sr-drift,.pin:before,.rate:before{animation:none}
  .js .rv{opacity:1;transform:none}
}
.sr-grid[hidden],.inv[hidden]{display:none}

/* ---------- v3: footage in front, 3D chapter titles, floating dock ---------- */
.shade{background:linear-gradient(0deg,rgba(2,4,7,.78) 0%,rgba(2,4,7,0) 40%),linear-gradient(180deg,rgba(2,4,7,.55) 0%,rgba(2,4,7,0) 16%),linear-gradient(90deg,rgba(2,4,7,.4) 0%,rgba(2,4,7,0) 42%)}
.stack{top:auto;bottom:clamp(104px,15vh,140px);left:max(24px,4.5vw);width:min(66vw,980px);perspective:1500px;perspective-origin:18% 70%}
.it{padding-left:0;transform-style:preserve-3d}
.it .w{padding-left:42px;font-size:clamp(20px,1.9vw,28px);line-height:1.25;color:rgba(255,255,255,.6);text-shadow:0 2px 14px rgba(0,0,0,.95);transition:color .2s;position:relative}
.it sup{top:.55em;font-size:12px}
.it.on:before{display:none}
.it .cap{display:none}
.it.on .w{padding-left:0;font-size:clamp(76px,min(12vw,20vh),176px);line-height:.88;color:#fff;transform-origin:0 100%;
  transform:rotateX(calc(var(--my3,0)*-6deg)) rotateY(calc(-12deg + var(--mx3,0)*9deg + var(--t,0)*10deg)) translateZ(calc(var(--t,0)*70px));
  text-shadow:
   calc(var(--ex,1)*1px) calc(var(--ey,1)*1px) 0 #c92a21,calc(var(--ex,1)*2px) calc(var(--ey,1)*2px) 0 #b9261d,calc(var(--ex,1)*3px) calc(var(--ey,1)*3px) 0 #a82219,
   calc(var(--ex,1)*4px) calc(var(--ey,1)*4px) 0 #981f16,calc(var(--ex,1)*5px) calc(var(--ey,1)*5px) 0 #881b13,calc(var(--ex,1)*6px) calc(var(--ey,1)*6px) 0 #781811,
   calc(var(--ex,1)*7px) calc(var(--ey,1)*7px) 0 #68150e,calc(var(--ex,1)*8px) calc(var(--ey,1)*8px) 0 #58120c,calc(var(--ex,1)*9px) calc(var(--ey,1)*9px) 0 #480f0a,
   calc(var(--ex,1)*10px) calc(var(--ey,1)*10px) 0 #380c08,calc(var(--ex,1)*16px) calc(var(--ey,1)*22px) 34px rgba(0,0,0,.85);
  animation:flipin .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes flipin{from{opacity:0;transform:rotateX(-75deg) rotateY(-30deg) translateY(40px) translateZ(-120px)}}
.it.on sup{display:block;position:static;margin:0 0 8px 4px;font-size:13px;color:#fff;text-shadow:0 2px 10px #000}
.it.on .cap{display:block;margin:20px 0 4px 4px;max-width:520px;font-size:clamp(16px,1.3vw,20px);line-height:1.4;color:#fff;text-shadow:0 2px 16px #000,0 0 3px rgba(0,0,0,.8);animation:capin .8s .3s both}
@keyframes capin{from{opacity:0;translate:0 14px}}
.dock{position:fixed;right:max(20px,2.5vw);bottom:84px;z-index:60;display:flex;gap:10px;filter:drop-shadow(0 14px 26px rgba(0,0,0,.55))}
.dock .btn{padding:16px 22px;background-clip:padding-box}.dock .btn.ghost{background:rgba(4,6,10,.85);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.js .dock{animation:rise .9s cubic-bezier(.2,.7,.2,1) 1.2s both}
@media (max-width:980px){.dock .num{display:none}}
@media (max-width:620px){
  .dock{left:12px;right:12px;bottom:12px}.dock .btn{flex:1;justify-content:center;padding:15px 8px;font-size:12px;letter-spacing:.1em}.dock .btn span[aria-hidden]{display:none}
  .band.r{display:none}
  .stack{bottom:92px;width:94vw}
  .it .w{font-size:20px}.it.on .w{font-size:clamp(44px,13vw,72px)}
  .it.on .cap{font-size:15px;max-width:90%}
}
@media (max-height:700px){.it .w{font-size:18px}.it.on .w{font-size:clamp(60px,min(10vw,17vh),120px)}}
@media (prefers-reduced-motion:reduce){.it.on .w{animation:none}.it.on .cap{animation:none}.js .dock{animation:none}}

/* ---------- v4: clear footage, kinetic chapter pages ---------- */
.shade{display:none}
.cv{filter:brightness(1.18) contrast(1.07) saturate(1.12)}
.top{background:linear-gradient(180deg,rgba(4,6,10,.45),rgba(4,6,10,0))}
.wm{opacity:.6}
.stack,.rail,.lens{display:none}
.pages{position:absolute;inset:0;z-index:5;pointer-events:none}
.pg{position:absolute;left:max(24px,4.5vw);right:max(24px,4.5vw);bottom:clamp(110px,16vh,150px);visibility:hidden;transition:visibility 0s .9s}
.pg.on{visibility:visible;transition:none}
.pg.right{text-align:right}
.pg.right .no{justify-content:flex-end}.pg.right .cap{margin-left:auto}
.no{display:flex;align-items:baseline;gap:14px;font:800 12px var(--text);letter-spacing:.26em;text-transform:uppercase;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.8)}
.no b{font:900 clamp(30px,3vw,44px)/1 var(--display);color:var(--red);letter-spacing:.02em;text-shadow:0 0 22px rgba(238,77,56,.55)}
.t{margin-top:2px;font:900 clamp(78px,min(13.5vw,22vh),230px)/.86 var(--display);text-transform:uppercase;color:#fff;letter-spacing:calc(var(--t,0)*.035em);text-shadow:0 3px 30px rgba(0,0,0,.45);
  overflow:hidden;padding:.04em .06em .02em;white-space:nowrap}
.pg.on .t{transform:translate3d(calc(var(--t,0)*var(--dir,-1)*70px),calc(var(--out,0)*-50px),0) skewX(calc(var(--vk,0)*-1deg));opacity:calc(1 - var(--out,0)*1.1)}
.pg.right{--dir:1}
.tw{display:inline-block}
.l{display:inline-block;transform:translateY(112%) rotate(9deg);opacity:0;transition:transform .9s cubic-bezier(.2,.85,.2,1) calc(var(--i)*.04s),opacity .5s ease calc(var(--i)*.04s)}
.pg.on .l{transform:none;opacity:1}
.cap{margin-top:14px;max-width:min(560px,86vw);font-size:clamp(17px,1.45vw,22px);line-height:1.42;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.7);opacity:0;transform:translateY(16px);transition:opacity .7s .35s,transform .8s .35s cubic-bezier(.2,.8,.2,1)}
.pg.on .cap{opacity:calc(1 - var(--out,0));transform:none}
.no{opacity:0;transform:translateX(-14px);transition:opacity .6s .1s,transform .7s .1s}
.pg.right .no{transform:translateX(14px)}
.pg.on .no{opacity:1;transform:none}
.chrail{position:absolute;right:max(18px,2vw);top:50%;transform:translateY(-50%);z-index:6;display:flex;flex-direction:column;gap:6px}
.chrail button{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:8px 0;color:#fff;font:800 11px var(--text);letter-spacing:.2em;text-transform:uppercase;text-shadow:0 1px 10px #000}
.chrail span{opacity:0;transform:translateX(8px);transition:opacity .25s,transform .25s}
.chrail button:hover span,.chrail button.on span{opacity:1;transform:none}
.chrail i{display:block;width:8px;height:26px;border-radius:4px;background:rgba(255,255,255,.4);transition:background .3s,height .4s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 8px rgba(0,0,0,.6)}
.chrail button.on i{background:var(--red);height:46px}
.wipe{position:absolute;inset:0;z-index:7;pointer-events:none;background:linear-gradient(90deg,transparent 0,var(--red) 45%,#fff 50%,transparent 55%);transform:translateX(-110%);mix-blend-mode:screen;opacity:.0}
.cut .wipe{animation:wipe .9s cubic-bezier(.6,0,.2,1)}
@keyframes wipe{0%{transform:translateX(-110%);opacity:.9}100%{transform:translateX(110%);opacity:0}}
.sr-x{}
@media (max-width:620px){
  .pg{bottom:92px;left:16px;right:16px}.pg.right{text-align:left}.pg.right .no{justify-content:flex-start}.pg.right .cap{margin-left:0}
  .t{font-size:clamp(52px,16vw,96px)}.cap{font-size:15px}.chrail{right:8px}.chrail span{display:none}.chrail i{width:6px;height:18px}.chrail button.on i{height:32px}
}
@media (prefers-reduced-motion:reduce){.l,.cap,.no{transition:none}.cut .wipe{animation:none}}
.pg{bottom:clamp(150px,21vh,190px)}
.chrail{right:auto;left:max(14px,1.4vw)}
.chrail button{justify-content:flex-start;flex-direction:row-reverse}
.chrail span{transform:translateX(-8px)}
@media (max-width:980px){.chrail{display:none}}
@media (max-width:620px){.pg{bottom:92px}}
.chrail span{display:none}

/* ---------- v5: separate full-page chapters ---------- */
html{scroll-snap-type:y proximity}
.journey{height:auto;background:#000}
.page{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;scroll-snap-align:start;background:#000}
.media{position:absolute;left:0;right:0;top:-7%;bottom:-7%;transform:translate3d(0,var(--py,0px),0);clip-path:circle(0% at var(--fx,50%) var(--fy,50%));transition:clip-path 1.3s cubic-bezier(.65,0,.2,1);will-change:transform,clip-path}
.page.on .media{clip-path:circle(150% at var(--fx,50%) var(--fy,50%))}
.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.12);transition:transform 7s cubic-bezier(.2,.6,.2,1);filter:brightness(1.08) contrast(1.05) saturate(1.08)}
.page.on .media video{transform:scale(1.0)}
.tint{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 48%),linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 20%),rgba(0,0,0,.2)}
.fring{position:absolute;left:var(--fx);top:var(--fy);width:0;height:0;z-index:2;pointer-events:none}
.fring i{position:absolute;border-radius:50%;transform:translate(-50%,-50%) scale(0);opacity:0;transition:transform 1.4s cubic-bezier(.2,.8,.2,1) .5s,opacity .8s .5s}
.fring .r1{width:160px;height:160px;border:1.5px solid rgba(255,255,255,.55)}
.fring .r2{width:320px;height:320px;border:1.5px dashed rgba(255,255,255,.35);animation:spin 40s linear infinite}
.fring .r3{width:520px;height:520px;border:1px solid rgba(255,255,255,.2)}
.fring .dot{width:9px;height:9px;background:#fff;box-shadow:0 0 18px #fff}
.page.on .fring i{transform:translate(-50%,-50%) scale(1);opacity:1}
@keyframes spin{to{rotate:360deg}}
.copy{position:absolute;z-index:3;left:max(24px,4.5vw);bottom:clamp(96px,14vh,132px);max-width:min(58vw,820px);transform:translate3d(0,var(--ty,0px),0)}
.page .no{display:flex;align-items:baseline;gap:14px;font:800 12px var(--text);letter-spacing:.26em;text-transform:uppercase;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.9);opacity:0;transform:translateX(-14px);transition:opacity .6s .15s,transform .7s .15s}
.page .no b{font:900 clamp(30px,3vw,44px)/1 var(--display);color:var(--red);text-shadow:0 2px 14px rgba(0,0,0,.8),0 0 22px rgba(238,77,56,.5)}
.page.on .no{opacity:1;transform:none}
.page .t{margin:2px 0 0;font:900 clamp(62px,min(10.5vw,18vh),170px)/.88 var(--display);text-transform:uppercase;color:#fff;white-space:nowrap;letter-spacing:0;
  text-shadow:0 2px 2px rgba(0,0,0,.55),0 8px 24px rgba(0,0,0,.65),0 18px 50px rgba(0,0,0,.55);overflow:visible;padding:0;opacity:1;transform:none}
.page .tw{display:inline-block}
.page .l{display:inline-block;transform:translateY(60%) rotate(7deg);opacity:0;transition:transform .9s cubic-bezier(.2,.85,.2,1) calc(.25s + var(--i)*.04s),opacity .6s ease calc(.25s + var(--i)*.04s)}
.page.on .l{transform:none;opacity:1}
.page .cap{margin-top:16px;max-width:min(540px,86vw);font-size:clamp(17px,1.4vw,21px);line-height:1.45;color:#fff;text-shadow:0 2px 3px rgba(0,0,0,.7),0 4px 22px rgba(0,0,0,.85);opacity:0;transform:translateY(16px);transition:opacity .7s .7s,transform .8s .7s cubic-bezier(.2,.8,.2,1)}
.page.on .cap{opacity:1;transform:none}
.dock{bottom:28px}
.chrail{position:fixed;left:max(14px,1.4vw);top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:6px;opacity:0;pointer-events:none;transition:opacity .4s}
body.injourney .chrail{opacity:1;pointer-events:auto}
.chrail button{padding:6px 8px}
.chrail span{display:none}
.chrail i{filter:drop-shadow(0 1px 4px rgba(0,0,0,.8))}
body.injourney .dock{opacity:1}
@media (max-width:620px){
  .copy{left:16px;right:16px;bottom:88px;max-width:none}
  .page .t{font-size:clamp(46px,15vw,88px)}.page .cap{font-size:15px}.dock{bottom:12px}
  .fring .r2{width:200px;height:200px}.fring .r3{display:none}
}
@media (prefers-reduced-motion:reduce){.media{clip-path:none;transition:none}.media video{transform:none;transition:none}.page .l,.page .cap,.page .no,.fring i{transition:none;opacity:1;transform:none}.fring i{transform:translate(-50%,-50%)}.fring .r2{animation:none}html{scroll-snap-type:none}}

html:not(.js) .page[data-i="0"] .media{clip-path:none}
html:not(.js) .page[data-i="0"] .l,html:not(.js) .page[data-i="0"] .cap,html:not(.js) .page[data-i="0"] .no{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.media{clip-path:none!important}}

/* ---------- v6: scroll-scrubbed chapters (each a separate scene) ---------- */
html{scroll-snap-type:none}
.chap{position:relative;height:300vh;height:300svh}
.chap .page{position:sticky;top:0;scroll-snap-align:none}
.media{transform:none}
.media video{transform:scale(calc(1.1 - var(--p,0)*.1))!important;transition:none!important}
.copy{transform:translate3d(0,calc(var(--p,0)*-24px),0)}
.page .cap,.page .no{transition-delay:.5s}
@media (max-width:620px){.chap{height:260vh}}

.cv{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;background-size:cover;background-position:center;transform:scale(calc(1.1 - var(--p,0)*.1));filter:brightness(1.08) contrast(1.05) saturate(1.08)}

/* ---------- guided booking stages ---------- */
.stages{list-style:none;margin:0 0 22px;padding:0;position:relative}
.stages:before{content:"";position:absolute;left:17px;top:18px;bottom:18px;width:2px;background:rgba(255,255,255,.14)}
.stages:after{content:"";position:absolute;left:17px;top:18px;width:2px;height:calc((100% - 36px)*var(--sp,0));background:var(--red);transition:height .8s cubic-bezier(.2,.8,.2,1)}
.stages li{position:relative;display:flex;gap:16px;align-items:flex-start;padding:10px 0;opacity:.5;transition:opacity .5s,transform .5s}
.stages li i{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:800 14px var(--text);font-style:normal;background:#0c0f13;border:2px solid rgba(255,255,255,.22);color:#fff;position:relative;z-index:1;transition:background .4s,border-color .4s,transform .5s}
.stages li b{display:block;font:800 17px var(--text);color:#fff}
.stages li span{display:block;margin-top:2px;font-size:14.5px;color:#c9d2dc}
.stages li.on{opacity:1;transform:translateX(6px)}
.stages li.on i{border-color:var(--red);background:var(--red);transform:scale(1.1)}
.stages li.done{opacity:.85}
.stages li.done i{border-color:var(--red);background:#0c0f13;color:var(--red)}
.stages li.done i:after{content:"✓";position:absolute;font-size:16px}
.stages li.done i{font-size:0}
.ease{margin:0 0 20px;padding:14px 16px;border-left:3px solid var(--red);background:rgba(255,255,255,.05);color:#dbe3ec;line-height:1.5}
.ease b{color:#fff}

/* ---------- brand logo ---------- */
.logo{align-items:center;gap:12px}
.logo img{display:block;height:46px;width:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.6))}
.logo span{line-height:1.5;font-size:10.5px}
.flogo{display:block;height:54px;width:auto;margin-bottom:14px;opacity:.95}
@media (max-width:620px){.logo img{height:36px}.logo span{display:none}}

/* ---------- launch: skip link, legal footer links, focus ---------- */
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:#fff;color:#000;padding:10px 14px;font:700 14px/1 var(--text,system-ui);text-decoration:none}
.skip:focus{left:8px}
:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px rgba(0,0,0,.6)}
footer{flex-wrap:wrap}
.flinks{display:flex;flex-wrap:wrap;gap:8px 20px;width:100%}
.flinks a{color:#d3dce6;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px;font-size:14px}
.flinks a:hover{color:#fff}
.vis h3{font:800 13px var(--text);letter-spacing:.26em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}

/* ===== one continuous journey ===== */
.journey{height:640vh;height:640svh;background:#000}
@media (max-width:620px){.journey{height:560vh;height:560svh}}
.journey .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#000}
.journey .stage .page{position:absolute;inset:0;height:100%;min-height:0}
.journey .stage .page[data-i]:not([data-i="0"]) .media{clip-path:none!important;transition:none}
html:not(.js) .journey{height:auto}
html:not(.js) .journey .stage{position:relative}