/* AURVO Autocare. A light bay: ink, champagne and one LED red taken from the cars' own tail lights.
   Signature: the edge of a film, a bright line slanted at 16 degrees, and the LED bar that follows it.
   Display: Barlow Condensed in capitals. Text: Manrope. */
:root{
  --ink:#0d0d0a;--deep:#090908;--raise:#14140f;--surface:#1b1b14;
  --paper:#e9e4d8;--white:#f2efe6;--gold:#cbb783;--gold-soft:#e4d4aa;--gold-deep:#8d7b49;
  --led:#ff3b2b;--muted:#b0afa2;--dim:#8d8c7f;
  --line:rgba(203,183,131,.17);--line-strong:rgba(203,183,131,.4);
  --pad:clamp(20px,5.6vw,108px);--head:76px;
  --ease:cubic-bezier(.16,1,.3,1);--skew:-16deg;
  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--head)}
body{margin:0;background:var(--ink);color:var(--white);font-family:Manrope,Arial,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
main{overflow:clip}
h1,h2,h3,p,figure,dl,dd{margin:0}
h1,h2,h3{font-weight:500}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
img{display:block;max-width:100%}
svg{display:block}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
::selection{background:var(--gold);color:var(--ink)}
.skip{position:fixed;z-index:100;left:20px;top:-100px;background:var(--gold);color:var(--ink);padding:12px 20px;font-weight:600}
.skip:focus{top:12px}

.eyebrow{display:flex;align-items:center;gap:14px;font:600 12px/1.5 Manrope,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.eyebrow::before{content:'';flex:none;width:3px;height:14px;background:var(--led);transform:skewX(var(--skew));box-shadow:0 0 10px rgba(255,59,43,.55)}
h2{font:500 clamp(54px,8.4vw,146px)/.9 var(--display);text-transform:uppercase;letter-spacing:.004em}
.g{color:var(--gold)}

/* Actions: a slab slanted like the film edge; the LED dot lights up on hover and focus. */
.slab{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:58px;padding:0 40px 0 34px;border:0;background:none;color:var(--gold-soft);font:600 13px/1 Manrope,sans-serif;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;transition:color .45s}
.slab::before{content:'';position:absolute;inset:0;z-index:-2;border:1px solid var(--line-strong);background:rgba(27,27,20,.82);transform:skewX(var(--skew));transition:border-color .4s}
.slab::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,var(--gold-soft),var(--gold));transform:skewX(var(--skew)) scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
.slab:hover,.slab:focus-visible{color:var(--ink)}
.slab:hover::after,.slab:focus-visible::after{transform:skewX(var(--skew)) scaleX(1)}
.slab:active{transform:translateY(1px)}
.led{flex:none;width:7px;height:7px;border-radius:50%;background:var(--gold);transition:background-color .3s,box-shadow .3s}
.slab:hover .led,.slab:focus-visible .led,.service-link:hover .led,.service-link:focus-visible .led{background:var(--led);box-shadow:0 0 12px 3px rgba(255,59,43,.7)}
.slab-small{min-height:46px;padding:0 30px 0 26px;font-size:12px;gap:13px}
.slab-gold{color:var(--ink)}
.slab-gold::before{background:linear-gradient(100deg,var(--gold-soft),var(--gold));border-color:transparent}
.slab-gold::after{background:var(--ink)}
.slab-gold .led{background:var(--ink)}
.slab-gold:hover,.slab-gold:focus-visible{color:var(--gold-soft)}
.slab-gold:hover .led,.slab-gold:focus-visible .led{background:var(--led)}

/* Header */
.header{position:fixed;z-index:60;left:0;right:0;top:0;height:var(--head);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding-inline:var(--pad);transition:background-color .5s,box-shadow .5s}
.header.is-solid{background:rgba(13,13,10,.93);box-shadow:0 1px 0 var(--line)}
.brand{display:block;justify-self:start}
.brand img{width:125px;height:46px;object-fit:contain}
.desktop-nav{display:flex;gap:clamp(22px,3.2vw,52px)}
.desktop-nav a{position:relative;padding:14px 0;font:600 12px/1 Manrope,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#d4d2c4;transition:color .3s}
.desktop-nav a::after{content:'';position:absolute;left:0;right:0;bottom:7px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.desktop-nav a:hover{color:var(--white)}
.desktop-nav a:hover::after{transform:scaleX(1)}
.header-cta{justify-self:end}
.header-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--gold-deep),var(--gold) 55%,var(--led))}
.mobile-menu{display:none}

/* Hero: a light bay. The title stands on the floor, the car stands above its own reflection. */
.hero{position:relative;isolation:isolate;min-height:max(100svh,700px);padding:calc(var(--head) + 14px) var(--pad) 30px;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto;overflow:clip;background:radial-gradient(ellipse 72% 56% at 50% 36%,rgba(203,183,131,.1),transparent 70%),linear-gradient(180deg,#0e0e0b,#11110d 62%,#0b0b09)}
.rig{position:absolute;z-index:0;inset:0 0 auto 0;height:82%;pointer-events:none}
.beam{position:absolute;top:-4%;width:28vw;height:100%;transform-origin:50% 0;background:linear-gradient(180deg,rgba(255,238,200,.2),rgba(255,238,200,.06) 55%,transparent 92%);clip-path:polygon(43% 0,57% 0,100% 100%,0 100%);-webkit-mask-image:linear-gradient(90deg,transparent 14%,#000 40%,#000 60%,transparent 86%);mask-image:linear-gradient(90deg,transparent 14%,#000 40%,#000 60%,transparent 86%);opacity:.8}
.b1{left:6vw;rotate:14deg}
.b2{left:36vw;rotate:0deg;opacity:.9}
.b3{right:6vw;rotate:-14deg}
.hero-meta{grid-row:1;position:relative;z-index:3;display:flex;justify-content:space-between;gap:24px;font:600 11px/1.6 Manrope,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.hero-vehicle{--car-w:clamp(420px,min(74vw,calc((100svh - 400px) * 2.31)),1280px);--car-h:calc(var(--car-w) * .4332);grid-row:2;position:relative;z-index:2;min-height:var(--car-h)}
.hero-word{position:absolute;z-index:0;left:0;right:0;display:flex;justify-content:center;bottom:calc(var(--car-h) * .26);font:500 calc(var(--car-w) * .5)/.74 var(--display);letter-spacing:.04em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(203,183,131,.34);background:linear-gradient(180deg,rgba(203,183,131,.2),rgba(203,183,131,0) 76%);-webkit-background-clip:text;background-clip:text;pointer-events:none;user-select:none}
.floor{position:absolute;z-index:1;left:-14vw;right:-14vw;top:calc(100% - var(--car-h) * .043);height:calc(var(--car-h) * 1.15);pointer-events:none;background:radial-gradient(ellipse 46% 58% at 50% 0,rgba(255,240,205,.18),transparent 72%),linear-gradient(180deg,rgba(255,243,220,.07),rgba(255,243,220,.02) 46%,transparent)}
.floor::after{content:'';position:absolute;left:50%;top:0;width:calc(var(--car-w) * .9);height:calc(var(--car-h) * .09);translate:-50% -40%;background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.78),rgba(0,0,0,.3) 52%,transparent 72%)}
.floor::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(203,183,131,.5) 12%,rgba(255,244,214,.8) 50%,rgba(203,183,131,.5) 88%,transparent)}
.hero-car{position:absolute;z-index:2;left:50%;margin-left:calc(var(--car-w) * -.5);bottom:0;width:var(--car-w);aspect-ratio:1505/652}
.car-rig{position:absolute;inset:0}
.hero-car picture{display:block;width:100%;height:100%}
.car-img{width:100%;height:100%}
.car-reflect{position:absolute;left:0;top:95.7%;width:100%;height:60%;overflow:hidden;pointer-events:none;opacity:.5;-webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35) 38%,transparent 82%);mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35) 38%,transparent 82%)}
.car-reflect picture{width:100%;height:166.7%}
.car-reflect img{width:100%;height:100%;transform:scaleY(-1)}
.car-led{position:absolute;left:54%;top:27%;width:46%;height:26%;pointer-events:none;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(255,52,36,.8),rgba(255,52,36,.28) 44%,transparent 72%);mix-blend-mode:screen}
.hero-vehicle figcaption{position:absolute;z-index:4;right:0;bottom:2px;display:flex;flex-direction:column;align-items:flex-end;gap:1px;font:500 12px/1.5 Manrope,sans-serif;letter-spacing:.04em;color:var(--muted)}
.hero-vehicle figcaption>span:first-child{color:var(--gold-soft)}
.hero-eyebrow{grid-row:3;position:relative;z-index:3;margin-top:clamp(10px,1.4vw,22px)}
.hero h1{grid-row:4;position:relative;z-index:3;display:flex;justify-content:space-between;gap:.22em;margin-top:clamp(8px,1vw,16px);font:500 clamp(54px,9.7vw,184px)/.88 var(--display);text-transform:uppercase;letter-spacing:.004em;white-space:nowrap}
.hero h1>span:last-child{color:var(--gold-soft)}
.hero-dock{grid-row:5;position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1.15fr) auto minmax(0,1fr) auto;align-items:center;gap:clamp(20px,3vw,48px);margin-top:clamp(16px,2.2vw,36px);padding-top:clamp(16px,1.8vw,26px);border-top:1px solid var(--line)}
.hero-copy{font-size:16px;line-height:1.7;color:#cdccbf}
.hero-foot{font:500 13px/1.6 Manrope,sans-serif;color:var(--muted);max-width:230px}
.scroll-cue{display:flex;align-items:center;gap:16px;justify-self:end;min-height:44px;font:600 12px/1 Manrope,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#d6d4c6;transition:color .3s}
.scroll-cue:hover{color:var(--gold-soft)}
.cue-line{position:relative;display:block;width:1px;height:34px;overflow:hidden;background:var(--line-strong)}
.cue-line i{position:absolute;left:0;top:0;width:1px;height:14px;background:linear-gradient(180deg,transparent,var(--led))}

/* Ticker: the three tasks, set large. It is decorative; the real names live in the hero and the selector. */
.ticker{position:relative;overflow:hidden;background:var(--deep);border-block:1px solid var(--line);padding-block:clamp(10px,1.4vw,22px)}
.tk-row{overflow:hidden;white-space:nowrap}
.tk-track{display:inline-flex;align-items:center;gap:clamp(24px,3.2vw,60px);padding-inline:2vw;will-change:transform}
.tk-track span{font:500 clamp(58px,9vw,160px)/1.02 var(--display);text-transform:uppercase;color:transparent;-webkit-text-stroke:1px rgba(228,212,170,.46)}
.tk-track i{flex:none;width:7px;height:clamp(34px,5.4vw,96px);background:var(--gold-deep);transform:skewX(var(--skew))}
.tk-b span{font-size:clamp(28px,3.6vw,64px);letter-spacing:.08em;color:var(--gold);-webkit-text-stroke:0}
.tk-b i{width:4px;height:clamp(18px,2.4vw,42px);background:var(--led);box-shadow:0 0 12px rgba(255,59,43,.6)}
.tk-row+.tk-row{margin-top:clamp(2px,.6vw,10px)}

/* Selector: three tasks as a switch above a stage whose photograph and text are cut by the film edge. */
.services{--sh:clamp(500px,40vw,620px);--cut:calc(var(--sh) * .2867);position:relative;padding:clamp(100px,11vw,190px) var(--pad) clamp(90px,9vw,150px);background:radial-gradient(ellipse 60% 52% at 78% 40%,rgba(203,183,131,.07),transparent 70%),var(--deep);overflow:clip}
.svc-ghost{position:absolute;z-index:0;right:calc(var(--pad) * -.2);top:clamp(30px,5vw,96px);width:100%;height:clamp(180px,24vw,420px);pointer-events:none}
.svc-ghost span{position:absolute;right:0;top:0;font:500 clamp(170px,23vw,420px)/.84 var(--display);letter-spacing:.02em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(203,183,131,.15);opacity:0;transform:translate3d(0,8%,0);transition:opacity .9s var(--ease),transform 1.3s var(--ease)}
.svc-ghost span.is-on{opacity:1;transform:none}
.section-heading{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:48px}
.section-heading h2{margin-top:18px}
.heading-note{font-size:15px;line-height:1.8;color:var(--muted);max-width:290px;margin-bottom:8px}
.configurator{position:relative;z-index:1;margin-top:clamp(44px,5vw,84px)}
.service-tabs{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.service-tabs button{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"no name" "no sub";column-gap:clamp(12px,1.4vw,22px);row-gap:2px;align-items:end;min-height:clamp(112px,10vw,150px);padding:clamp(20px,2.2vw,32px) 22px clamp(18px,1.8vw,26px) 0;border:0;background:none;text-align:left;color:var(--dim);transition:color .4s}
.service-tabs button>em{grid-area:no;align-self:start;padding-top:.5em;font:500 clamp(16px,1.4vw,22px)/1 var(--display);font-style:normal;letter-spacing:.14em;color:var(--gold-deep);transition:color .4s}
.service-tabs button>span{grid-area:name;font:500 clamp(28px,3.3vw,56px)/.96 var(--display);text-transform:uppercase;letter-spacing:.006em}
.service-tabs button>small{grid-area:sub;font:500 13px/1.5 Manrope,sans-serif;letter-spacing:.03em;color:#8b8a7c;transition:color .4s}
.service-tabs button:hover{color:var(--white)}
.service-tabs button[aria-selected=true]{color:var(--white)}
.service-tabs button[aria-selected=true]>em{color:var(--gold)}
.service-tabs button[aria-selected=true]>small{color:var(--gold-soft)}
.tab-indicator{position:absolute;left:0;top:-2px;width:33.333%;height:3px;pointer-events:none;background:linear-gradient(90deg,var(--gold-deep),var(--gold) 70%,var(--gold-soft));will-change:transform}
.tab-indicator::after{content:'';position:absolute;right:0;top:-1px;width:18px;height:5px;background:var(--led);transform:skewX(var(--skew));box-shadow:0 0 12px rgba(255,59,43,.8)}
.svc-stage{position:relative;height:var(--sh);margin-top:6px}
.service-visual{position:absolute;z-index:1;left:0;top:0;bottom:0;width:58%;overflow:hidden;background:#14140f;clip-path:polygon(0 0,100% 0,calc(100% - var(--cut)) 100%,0 100%)}
.service-images{position:absolute;inset:0}
.service-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:46% 46%;opacity:0}
.service-shot.selected{opacity:1;z-index:1}
.service-shot[data-service-shot=coating]{object-position:42% 52%}
.service-shot[data-service-shot=correction]{object-position:60% 50%}
.service-visual-shade{position:absolute;z-index:2;inset:48% 0 0;background:linear-gradient(0deg,rgba(9,9,8,.82),transparent);pointer-events:none}
.service-visual figcaption{position:absolute;z-index:3;left:clamp(18px,2vw,30px);bottom:clamp(18px,2vw,28px);display:flex;flex-direction:column;gap:2px;font:600 12px/1.55 Manrope,sans-serif;letter-spacing:.06em;color:#ded6bd}
.service-visual figcaption>span:last-child{font-weight:500;color:#b3b09f}
.stage-slash{position:absolute;z-index:3;top:0;bottom:0;left:calc(58% - var(--cut) / 2 + 8px);width:1px;background:linear-gradient(180deg,transparent,var(--gold) 16%,var(--gold-soft) 50%,var(--gold) 84%,transparent);transform:skewX(var(--skew));pointer-events:none}
.service-panel{position:absolute;z-index:2;top:0;bottom:0;left:calc(58% - var(--cut) + 16px);right:0;display:grid;align-content:center;padding:clamp(24px,2.6vw,40px) clamp(8px,2vw,32px) clamp(24px,2.6vw,40px) calc(var(--cut) + clamp(28px,3vw,48px));background:linear-gradient(140deg,#1d1d15,#11110d 70%);clip-path:polygon(var(--cut) 0,100% 0,100% 100%,0 100%);outline-offset:-6px}
.service-content{grid-area:1/1;min-width:0;visibility:hidden;opacity:0;pointer-events:none}
.service-content.selected{visibility:visible;opacity:1;pointer-events:auto}
.service-kicker{font:600 12px/1.6 Manrope,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.service-content h3{margin-top:14px;font:500 clamp(40px,4.5vw,74px)/.92 var(--display);text-transform:uppercase;letter-spacing:.004em}
.service-description{margin-top:18px;max-width:46ch;font-size:16px;line-height:1.75;color:#c4c3b6}
.service-content dl{margin-top:20px;max-width:46ch;border-top:1px solid var(--line)}
.service-content dl>div{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.5}
.service-content dt{flex:none;font:600 11px/1.9 Manrope,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.service-content dd{color:#d9d6c6;text-align:right}
.service-link{position:relative;display:inline-flex;align-items:center;gap:14px;margin-top:18px;min-height:46px;font:600 12px/1 Manrope,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft)}
.service-link::after{content:'';position:absolute;left:21px;right:0;bottom:8px;height:1px;background:var(--gold);transform-origin:left;transition:transform .6s var(--ease)}
.service-link:hover::after,.service-link:focus-visible::after{transform:scaleX(.55)}
.configurator-note{margin-top:clamp(22px,2.4vw,34px);padding-top:clamp(18px,2vw,26px);border-top:1px solid var(--line);font-size:14px;color:var(--dim);line-height:1.7}

/* Protection: a pinned scene. The film is laid along the car, a marker leads to a lens that shows the layer. */
.protection{position:relative;scroll-margin-top:calc(var(--head) * -1);background:linear-gradient(180deg,#0e0e0a,#13130e 40%,#0e0e0a)}
.film-story{position:relative}
.film-sticky{position:relative;display:flex;flex-direction:column;min-height:760px;padding:clamp(92px,8.6vw,124px) var(--pad) 28px;overflow:clip}
.motion-ready .film-story{height:300svh;min-height:2100px}
.motion-ready .film-sticky{position:sticky;top:0;height:100svh;min-height:700px;max-height:1240px}
.protection-word{position:absolute;z-index:0;left:0;right:0;top:18%;display:flex;justify-content:center;font:500 clamp(240px,38vw,640px)/.8 var(--display);letter-spacing:.04em;color:transparent;-webkit-text-stroke:1px rgba(203,183,131,.11);pointer-events:none;user-select:none}
.protection-heading{position:relative;z-index:2}
.protection-heading h2{margin-top:14px;font-size:clamp(44px,min(6.1vw,9.6svh),106px)}
.protection-heading>p{max-width:34ch;margin-top:16px;font-size:15px;line-height:1.75;color:var(--muted)}
.protection-stage{position:relative;z-index:1;flex:1;min-height:340px;margin-top:6px}
.protection-ambient{position:absolute;z-index:-1;inset:0 -8% 4%;pointer-events:none;background:radial-gradient(ellipse at 38% 62%,rgba(203,183,131,.2),transparent 62%);opacity:.75}
.protected-vehicle{position:absolute;left:-2%;bottom:7%;width:min(68%,calc((100svh - 440px) * 2.31));aspect-ratio:1505/652}
.protected-vehicle picture{display:block;position:relative;z-index:1;width:100%;height:100%}
.pv-car{width:100%;height:100%}
.vehicle-shadow{position:absolute;z-index:0;left:50%;bottom:3%;width:78%;height:7%;translate:-50% 0;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.85),transparent 72%);pointer-events:none}
.pv-film{position:absolute;z-index:2;inset:0;overflow:hidden;pointer-events:none;-webkit-mask:url(assets/rs7-cutout.webp) 0 0/100% 100% no-repeat;mask:url(assets/rs7-cutout.webp) 0 0/100% 100% no-repeat}
.pv-film i{position:absolute;top:-6%;bottom:-6%;left:0;width:132%;transform:skewX(var(--skew));background:linear-gradient(90deg,transparent calc(100% - 3px),rgba(255,251,240,.96) calc(100% - 3px)),linear-gradient(90deg,transparent calc(100% - 64px),rgba(255,236,190,.4)),linear-gradient(90deg,rgba(255,252,240,.06),rgba(255,244,214,.12) 60%,rgba(255,244,214,.2))}
.car-marker{--mx:90%;--my:49%;position:absolute;z-index:3;left:var(--mx);top:var(--my);width:20px;height:20px;margin:-10px 0 0 -10px;border:1px solid #fff;border-radius:50%;background:rgba(13,13,10,.4)}
.car-marker i{position:absolute;inset:6px;border-radius:50%;background:var(--led);box-shadow:0 0 12px 2px rgba(255,59,43,.7)}
.leader{position:absolute;z-index:3;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.leader path{fill:none;stroke:var(--gold-soft);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:0}
.loupe{position:absolute;z-index:3;right:0;bottom:0;width:clamp(230px,22vw,340px)}
.loupe-disc{position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px var(--line-strong),0 0 0 9px rgba(13,13,10,.94),0 0 0 10px rgba(203,183,131,.26),0 34px 80px rgba(0,0,0,.65)}
.loupe-disc svg{width:100%;height:100%}
.lp-label{font:600 11px Manrope,sans-serif;letter-spacing:.2em;fill:#d8c99f}
.loupe-ctrl{margin-top:clamp(18px,2vw,30px)}
.material-title{display:block;font:500 clamp(24px,2.1vw,34px)/1 var(--display);text-transform:uppercase;letter-spacing:.03em;color:var(--gold-soft)}
.loupe-ctrl p{margin-top:6px;font-size:14px;line-height:1.6;color:var(--muted)}
.loupe-ctrl label{display:flex;align-items:center;gap:12px;margin-top:12px;font:600 12px/1.6 Manrope,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#d6d4c6}
.loupe-ctrl label svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.3}
.loupe-ctrl input{display:block;width:100%;height:34px;margin:2px 0 0;padding:0;appearance:none;-webkit-appearance:none;background:none;cursor:pointer;accent-color:var(--gold)}
.loupe-ctrl input::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--gold),rgba(203,183,131,.25))}
.loupe-ctrl input::-moz-range-track{height:2px;background:linear-gradient(90deg,var(--gold),rgba(203,183,131,.25))}
.loupe-ctrl input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:22px;margin-top:-10px;background:var(--gold-soft);border:0;border-radius:0;transform:skewX(var(--skew));box-shadow:0 0 0 3px rgba(13,13,10,.9),0 0 0 4px rgba(203,183,131,.5)}
.loupe-ctrl input::-moz-range-thumb{width:14px;height:22px;background:var(--gold-soft);border:0;border-radius:0;box-shadow:0 0 0 3px rgba(13,13,10,.9),0 0 0 4px rgba(203,183,131,.5)}
.loupe-cap{display:block;margin-top:2px;font-size:12px;line-height:1.6;color:var(--dim)}
.vehicle-annotation{position:absolute;z-index:3;left:0;bottom:-2px;font:600 12px/1.6 Manrope,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft)}
.vehicle-annotation>span{display:block;font-weight:500;letter-spacing:.03em;text-transform:none;color:var(--muted)}
.illustration-note{position:relative;z-index:2;margin-top:12px;max-width:520px;font-size:12px;line-height:1.7;color:var(--dim)}
.story-progress-track{position:absolute;left:var(--pad);right:var(--pad);bottom:0;height:1px;background:var(--line)}
.story-progress{position:absolute;inset:0;background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--led));transform:scaleX(0);transform-origin:left}

/* Panorama: the only place the page lets one photograph fill the whole width. */
.cinematic{position:relative;isolation:isolate;height:clamp(580px,72vw,1020px);overflow:hidden;background:#1c1b16}
.cinematic-image{position:absolute;z-index:-2;inset:-6% 0}
.cinematic-image img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.cinematic::after{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(11,11,9,.82),rgba(11,11,9,.12) 62%),linear-gradient(0deg,rgba(11,11,9,.78),transparent 46%)}
.cinematic-copy{position:absolute;z-index:2;left:var(--pad);bottom:clamp(72px,8vw,128px);max-width:min(100% - 2 * var(--pad),1200px)}
.cinematic-copy h2{margin-top:18px;font-size:clamp(60px,8.4vw,156px);line-height:.86;white-space:nowrap}
.cinematic-copy h2 br{display:none}
.cinematic-copy .g{color:#f1dcb4}
.cinematic-copy>p:last-child{margin-top:26px;font-size:17px;line-height:1.7;color:#e6e3d3}
.cinematic-caption{position:absolute;z-index:2;left:var(--pad);right:var(--pad);bottom:clamp(20px,2.4vw,34px);display:flex;justify-content:space-between;gap:20px;font:500 12px/1.5 Manrope,sans-serif;letter-spacing:.06em;color:#d8d3c0}

/* Proof: an editorial spread of two cars, an inspection lens, and the idea behind the studio. */
.proof{position:relative;padding:clamp(100px,11vw,190px) var(--pad) clamp(80px,8vw,140px);background:var(--ink);overflow:clip}
.proof-heading{display:grid;grid-template-columns:1fr auto;align-items:end;gap:18px 48px}
.proof-heading>.eyebrow{grid-column:1/-1}
.proof-heading h2{font-size:clamp(54px,8.6vw,150px)}
.proof-heading .heading-note{max-width:320px;margin-bottom:10px}
.project-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(14px,2vw,32px);margin-top:clamp(50px,6vw,100px);align-items:start}
.project-range{position:relative;grid-column:1/span 6}
.project-garage{grid-column:8/span 5;margin-top:clamp(50px,6.4vw,110px)}
.detail-inset{position:absolute;z-index:3;right:-15%;top:63%;width:39%;aspect-ratio:3/2;overflow:hidden;background:#17170f;clip-path:polygon(0 0,100% 0,80.9% 100%,0 100%);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.detail-inset img{width:100%;height:100%;object-fit:cover}
.detail-inset::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(9,9,8,.8),transparent 52%)}
.detail-inset>span{position:absolute;z-index:2;left:14px;bottom:10px;font:600 11px/1.4 Manrope,sans-serif;letter-spacing:.06em;color:#ece5cf}
.project-photo{position:relative;overflow:hidden;aspect-ratio:4/5;background:#17170f}
.project-range .project-photo{aspect-ratio:1/1}
.project-photo .photo-base{width:100%;height:100%;object-fit:cover;object-position:50% 56%}
.project-range .photo-base{object-position:50% 80%}
.project-garage .photo-base{object-position:50% 50%}
.project figcaption{position:relative;z-index:2;margin-top:calc(clamp(40px,4.6vw,80px) * -1.05);padding-inline:clamp(14px,1.6vw,26px)}
.project-kind{display:block;font:600 12px/1.6 Manrope,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft)}
.project h3{margin-top:8px;font:500 clamp(40px,4.6vw,80px)/.92 var(--display);text-transform:uppercase;letter-spacing:.004em}
.project figcaption>p{margin-top:16px;max-width:36ch;font-size:16px;line-height:1.75;color:#bdbcaf}
.lens{position:absolute;z-index:3;left:0;top:0;width:clamp(120px,11vw,176px);aspect-ratio:1;border-radius:50%;overflow:hidden;pointer-events:none;opacity:0;scale:.5;box-shadow:0 0 0 1px rgba(255,244,214,.75),0 0 0 6px rgba(13,13,10,.7),0 18px 50px rgba(0,0,0,.6)}
.lens img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0}
.lens::after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.28),transparent 34%,transparent 70%,rgba(255,255,255,.1))}
.studio{position:relative;display:grid;grid-template-columns:1.5fr 1fr;gap:5vw;margin-top:clamp(90px,10vw,170px);padding-top:clamp(40px,4vw,70px);border-top:1px solid var(--line);align-items:start}
.studio-word{position:absolute;z-index:0;right:-1vw;bottom:-.1em;font:500 clamp(260px,40vw,660px)/.7 var(--display);color:transparent;-webkit-text-stroke:1px rgba(203,183,131,.1);pointer-events:none;user-select:none}
.studio>div{position:relative;z-index:1}
.studio h3{margin-top:16px;font:500 clamp(50px,7vw,120px)/.9 var(--display);text-transform:uppercase;letter-spacing:.004em}
.studio>div>p:not(.eyebrow){max-width:46ch;font-size:17px;line-height:1.8;color:#c4c3b6}
.fiction-note{display:block;margin-top:24px;font-size:13px;line-height:1.8;color:var(--dim)}

/* Contact: the page turns to paper along the film edge. */
.contact{--diag:clamp(36px,6.4vw,112px);position:relative;margin-top:var(--diag);background:var(--paper);color:#22231c;color-scheme:light}
.contact::before{content:'';position:absolute;left:0;right:0;top:calc(var(--diag) * -1 + 1px);height:var(--diag);pointer-events:none;background:linear-gradient(to top left,var(--paper) calc(50% - .75px),#b89c58 calc(50% - .75px) calc(50% + .75px),transparent calc(50% + .75px))}
.contact-top{padding:clamp(44px,5vw,84px) var(--pad) 0}
.contact .eyebrow{color:#6e6340}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:5vw;align-items:end;margin-top:28px}
.contact h2{font-size:clamp(70px,12.4vw,222px);line-height:.84}
.contact .g{color:#8a7a47}
.contact-copy{position:relative;padding:clamp(28px,3vw,48px);background:var(--ink);color:var(--white);justify-self:end;width:min(100%,460px)}
.contact-copy::before{content:'';position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,var(--gold),var(--gold-soft) 80%,var(--led))}
.contact-copy>p{font-size:17px;line-height:1.75;color:#d6d4c6}
.contact-button{margin-top:26px;width:100%}
.contact-note{display:block;margin-top:18px;font-size:13px;line-height:1.7;color:var(--dim)}
.contact a:focus-visible,.contact button:focus-visible{outline-color:#6b5a28}
.contact footer{display:flex;justify-content:space-between;align-items:center;gap:28px;margin:clamp(54px,6vw,100px) var(--pad) 0;padding-block:24px;border-top:1px solid rgba(34,35,28,.2)}
.contact footer>.brand img{width:119px;height:44px;filter:brightness(.55)}
.contact footer>span{font-size:13px;line-height:1.7;color:#5f6150}
.portfolio-return{display:flex;align-items:center;gap:14px;min-height:46px;font:600 12px/1 Manrope,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#3b3d2f}
.portfolio-return svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;transition:transform .4s var(--ease)}
.portfolio-return:hover svg{transform:translateX(-5px)}
.footer-word{position:relative;height:clamp(110px,18.4vw,330px);margin-top:8px;overflow:hidden}
.footer-word span{position:absolute;left:var(--pad);bottom:0;font:500 clamp(200px,31vw,560px)/.74 var(--display);letter-spacing:.05em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(34,35,28,.34);background:linear-gradient(180deg,rgba(34,35,28,.2),rgba(34,35,28,.02) 80%);-webkit-background-clip:text;background-clip:text;transform:translate3d(0,24%,0)}
.photo-credit{padding:22px var(--pad);background:#0a0a08;font-size:12px;line-height:1.9;color:#9a9a8b}
.photo-credit a{color:var(--gold-soft);text-decoration:underline;text-underline-offset:3px}

dialog{width:calc(100% - 40px);max-width:600px;padding:clamp(34px,4vw,56px);background:#14140f;color:var(--white);border:1px solid var(--line-strong);border-radius:0;box-shadow:0 30px 100px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(6,6,5,.82)}
dialog h2{margin:20px 0 26px;font-size:clamp(46px,6vw,70px);line-height:.92}
dialog>p:not(.eyebrow){margin-top:14px;font-size:15px;line-height:1.75;color:#c4c3b6}
dialog .slab{margin-top:30px}
.dialog-close{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:46px;height:46px;border:0;background:none;color:var(--gold)}
.dialog-close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.3}

@media(hover:hover) and (pointer:fine){
  .project-photo{cursor:none}
}

/* ---------- 1100 ---------- */
@media(max-width:1100px){
  .desktop-nav{gap:20px}.desktop-nav a{font-size:11px}
  .hero-dock{grid-template-columns:minmax(0,1fr) auto minmax(0,.8fr);row-gap:14px}
  .scroll-cue{display:none}
  .services{--sh:clamp(480px,50vw,560px)}
  .service-visual{width:54%}.stage-slash{left:calc(54% - var(--cut) / 2 + 8px)}.service-panel{left:calc(54% - var(--cut) + 16px)}
  .service-tabs button>small{font-size:12px}
  .loupe{width:clamp(220px,27vw,300px)}
  .project-range{grid-column:1/span 6}.project-garage{grid-column:7/span 6}
}
/* ---------- 900: tablet portrait, the pinned scene becomes a column ---------- */
@media(max-width:900px){
  .header{grid-template-columns:1fr auto}
  .desktop-nav{display:none}
  .header-cta{display:none}
  .mobile-menu{display:block;justify-self:end}
  .mobile-menu summary{display:grid;place-items:center;width:46px;height:46px;list-style:none;cursor:pointer;color:var(--gold-soft)}
  .mobile-menu summary::-webkit-details-marker{display:none}
  .burger{position:relative;display:block;width:24px;height:12px}
  .burger i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .5s var(--ease),top .5s var(--ease)}
  .burger i:first-child{top:0}.burger i:last-child{top:10px}
  .mobile-menu[open] .burger i:first-child{top:5px;transform:rotate(45deg)}
  .mobile-menu[open] .burger i:last-child{top:5px;transform:rotate(-45deg)}
  .mobile-menu>nav{position:fixed;z-index:59;left:0;right:0;top:var(--head);height:calc(100dvh - var(--head));display:flex;flex-direction:column;justify-content:flex-start;gap:4px;padding:clamp(24px,9dvh,90px) var(--pad) 36px;background:var(--ink)}
  .mobile-menu nav a{display:flex;align-items:baseline;gap:18px;padding:12px 0;border-bottom:1px solid var(--line);font:500 clamp(40px,10vw,64px)/1 var(--display);text-transform:uppercase;color:var(--white)}
  .mobile-menu nav a em{font:600 12px/1 Manrope,sans-serif;font-style:normal;letter-spacing:.16em;color:var(--gold)}
  .mobile-menu nav a:nth-last-of-type(1){color:var(--gold-soft)}
  .menu-foot{margin-top:auto;padding-top:28px;font-size:13px;line-height:1.7;color:var(--dim)}
}
/* The pinned scene needs a tall screen; narrow or short ones get the same story as a column. */
@media(max-width:900px),(max-height:700px){
  .motion-ready .film-story{height:auto;min-height:0}
  .motion-ready .film-sticky{position:relative;height:auto;min-height:0;max-height:none}
  .film-sticky{padding-top:96px;padding-bottom:48px}
  .protection-stage{display:flex;flex-direction:column;align-items:center;gap:34px;margin-top:18px}
  .protected-vehicle{position:relative;left:auto;bottom:auto;width:min(100%,760px);margin-inline:auto}
  .loupe{position:relative;right:auto;top:auto;bottom:auto;width:min(100%,520px);display:grid;grid-template-columns:minmax(180px,.9fr) minmax(0,1fr);gap:24px;align-items:center}
  .loupe-ctrl{margin-top:0}
  .vehicle-annotation{position:relative;left:auto;bottom:auto;align-self:flex-start}
  .leader{display:none}
  .story-progress-track{display:none}
  .protection-word{top:8%}
}
/* ---------- 700: phone ---------- */
@media(max-width:700px){
  :root{--head:64px}
  .brand img{width:112px;height:42px}
  .slab{min-height:54px;padding:0 32px 0 28px;font-size:12px}
  .eyebrow{font-size:11px;letter-spacing:.15em}
  h2{font-size:clamp(46px,14.4vw,86px);line-height:.92}
  .hero{min-height:0;padding-bottom:26px;grid-template-rows:auto auto auto auto auto}
  .hero-meta{flex-direction:column;gap:0;font-size:10px;letter-spacing:.12em}
  .hero-vehicle{--car-w:104vw;grid-row:2;height:calc(var(--car-w) * .4332 + 12px);margin:clamp(20px,6vw,40px) calc(var(--pad) * -1) 0}
  .hero-vehicle figcaption{right:var(--pad);bottom:-34px;font-size:11px}
  .hero-eyebrow{grid-row:3;margin-top:46px;font-size:10px;letter-spacing:.12em}
  .hero h1{grid-row:4;display:block;margin-top:14px;font-size:clamp(46px,16.2vw,92px);line-height:.9}
  .hero h1>span{display:block}
  .hero-dock{grid-row:5;grid-template-columns:1fr;gap:20px;margin-top:22px}
  .hero-copy{font-size:15px}
  .hero-dock .slab{width:100%}
  .hero-foot{max-width:none;font-size:13px}
  .ticker{padding-block:8px}
  .services{--sh:auto;padding-top:76px;padding-bottom:64px}
  .svc-ghost{top:28px}
  .section-heading{display:block}
  .heading-note{margin-top:20px;max-width:none}
  .configurator{margin-top:34px}
  .service-tabs button{display:flex;flex-direction:column;justify-content:flex-start;gap:6px;min-height:96px;padding:16px 8px 14px 0}
  .service-tabs button>em{padding:0;font-size:14px}
  .service-tabs button>span{font-size:clamp(20px,6.1vw,30px);line-height:1}
  .service-tabs button>small{display:none}
  .svc-stage{height:auto;margin-top:0;display:flex;flex-direction:column}
  .service-visual{position:relative;width:100%;aspect-ratio:1.28;clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),0 100%)}
  .stage-slash{display:none}
  .service-panel{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin-top:-14px;padding:30px 20px 28px;clip-path:none;background:linear-gradient(160deg,#1d1d15,#11110d);border-bottom:1px solid var(--line)}
  .service-content h3{font-size:clamp(44px,13vw,64px)}
  .service-description{font-size:15px}
  .service-content dl>div{flex-direction:column;gap:2px}
  .service-content dd{text-align:left}
  .film-sticky{padding-top:80px}
  .protection-heading h2{font-size:clamp(42px,13vw,72px)}
  .protection-heading>p{margin-top:18px;max-width:none}
  .protection-word{font-size:62vw;top:5%}
  .protected-vehicle{width:calc(100% + 24px);margin-inline:-12px}
  .loupe{grid-template-columns:1fr;width:min(100%,360px)}
  .loupe-ctrl{margin-top:20px}
  .cinematic{height:clamp(600px,150vw,760px)}
  .cinematic-image{inset:-4% -22% -4% -22%}
  .cinematic-image img{object-position:34% 56%}
  .cinematic::after{background:linear-gradient(180deg,rgba(11,11,9,.9),rgba(11,11,9,.2) 58%),linear-gradient(0deg,rgba(11,11,9,.82),transparent 40%)}
  .cinematic-copy{bottom:76px}
  .cinematic-copy h2{font-size:clamp(52px,17.4vw,104px);white-space:normal}
  .cinematic-copy h2 br{display:inline}
  .cinematic-copy>p:last-child{font-size:15px}
  .cinematic-caption{font-size:11px}
  .proof{padding-top:76px;padding-bottom:70px}
  .proof-heading{display:block}
  .proof-heading h2{font-size:clamp(48px,15vw,92px);margin-top:14px}
  .proof-heading .heading-note{margin-top:20px}
  .project-grid{display:block;margin-top:38px}
  .project-garage{width:88%;margin:58px 0 0 auto}
  .project-photo{aspect-ratio:1/1.12}
  .project figcaption{margin-top:-46px}
  .project h3{font-size:clamp(44px,13vw,62px)}
  .project figcaption>p{font-size:15px}
  .lens{width:104px}
  .studio{display:block;margin-top:70px;padding-top:30px}
  .studio>div:last-of-type{margin-top:22px}
  .studio h3{font-size:clamp(54px,16vw,92px)}
  .studio>div>p:not(.eyebrow){font-size:16px}
  .studio-word{font-size:92vw;right:-8vw}
  .contact{--diag:34px}
  .contact-top{padding-top:34px}
  .contact h2{font-size:clamp(62px,21vw,108px)}
  .contact-grid{display:block;margin-top:22px}
  .contact-copy{margin-top:30px;width:100%;padding:26px 22px 28px}
  .contact-copy>p{font-size:16px}
  .contact footer{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;margin-top:44px}
  .contact footer>span{text-align:right}
  .portfolio-return{grid-column:1/-1;justify-content:space-between;flex-direction:row-reverse;padding-top:12px;border-top:1px solid rgba(34,35,28,.14)}
  .footer-word{height:24vw}
  .footer-word span{font-size:37vw}
  .detail-inset{display:none}
  .photo-credit{font-size:11px}
  dialog{padding:34px 22px}
}
@media(max-width:360px){
  :root{--pad:18px}
  .hero h1{font-size:15.6vw}
  .service-tabs button>span{font-size:19px}
  .service-content h3{font-size:42px}
}
@media(max-width:900px) and (max-height:520px) and (orientation:landscape){
  .hero{min-height:0}
  .hero-vehicle{--car-w:min(70vw,calc((100svh - 150px) * 2.31))}
}
/* Tall, narrow screens: the car takes the width, the hero is only as tall as its content. */
@media(min-width:701px) and (max-aspect-ratio:1/1){
  .hero{min-height:0}
  .hero-vehicle{--car-w:min(92vw,calc((100svh - 480px) * 2.31));min-height:calc(var(--car-h) + 56px)}
}
@media(min-width:1800px){
  .hero-dock,.hero-meta,.hero-eyebrow,.hero h1{max-width:1700px;margin-inline:auto;width:100%}
}