/* KELVIN — paint studio. One dark room, one light, one car. */
:root{
  --bg:#07080a;--ink:#E8ECEF;--soft:#C2C7CD;--mute:#878D94;--line:rgba(232,236,239,.14);
  --warm:#FF9A4A;--cool:#9FD0FF;
  --pad:clamp(18px,3.2vw,44px);
  --disp:'Anybody','Arial Black',system-ui,sans-serif;--text:'Geist',system-ui,sans-serif;--mono:'Geist Mono',ui-monospace,monospace;
  --out:cubic-bezier(.16,.84,.24,1);--slide:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{font-family:var(--text);font-size:16px;line-height:1.5;overflow-x:clip;background:var(--bg)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:1.5px solid var(--cool);outline-offset:4px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[tabindex='-1']:focus{outline:none}
.skip{position:fixed;left:12px;top:12px;z-index:60;padding:10px 16px;border-radius:999px;background:var(--ink);color:#08090b;font-weight:600;font-size:13px;transform:translateY(-200%);transition:transform .3s var(--slide)}
.skip:focus{transform:none}

#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;touch-action:pan-y}
.grain{position:fixed;inset:-50%;z-index:30;pointer-events:none;opacity:.065;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation:grain .9s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}17%{transform:translate(-5%,2%)}34%{transform:translate(3%,-4%)}51%{transform:translate(-3%,-6%)}68%{transform:translate(6%,3%)}85%{transform:translate(-2%,5%)}100%{transform:translate(0,0)}}

/* loader: one lamp tube strikes, the colour temperature climbs */
.load{position:fixed;inset:0;z-index:40;background:#000;display:grid;place-items:center;transition:opacity .6s ease,visibility 0s .6s}
.load .tube{width:min(300px,60vw);height:1px;background:rgba(255,255,255,.08);position:relative}
.load .tube i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--p,0));background:#fff;
  box-shadow:0 0 12px 1px color-mix(in srgb,var(--warm) calc((1 - var(--p,0)) * 100%),var(--cool));transition:transform .25s linear}
.load .lk{position:absolute;margin-top:36px;font:500 10px/1 var(--mono);letter-spacing:.3em;color:var(--mute);text-transform:uppercase}
.load .lk b{color:var(--ink);font-weight:500}
.go .load{opacity:0;visibility:hidden}

/* header pill */
.nav{position:fixed;top:16px;left:50%;transform:translate(-50%,-160%);z-index:20;display:flex;align-items:center;gap:22px;
  padding:9px 9px 9px 18px;border:1px solid var(--line);border-radius:999px;background:rgba(9,10,12,.46);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:13px;white-space:nowrap;transition:transform 1s var(--slide) 1.9s}
.go .nav{transform:translate(-50%,0)}
.nav nav{display:flex;gap:22px}
.logo{display:flex;align-items:center;gap:9px}
.logo svg{width:22px;height:13px;fill:none;stroke:var(--ink);stroke-width:1.6}
.logo b{font:850 13px/1 var(--disp);font-stretch:150%;letter-spacing:.08em}
.nav a.ln{color:var(--mute);transition:color .2s;position:relative}
.nav a.ln::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--out)}
.nav a.ln:hover{color:var(--ink)}
.nav a.ln:hover::after{transform:scaleX(1);transform-origin:left}
.snd{display:flex;align-items:center;gap:2px;height:22px;padding:0 4px;color:var(--mute)}
.snd i{display:block;width:2px;height:4px;background:currentColor;border-radius:1px;transition:height .3s}
.snd:hover{color:var(--ink)}
.snd[aria-pressed=true]{color:var(--ink)}
.snd[aria-pressed=true] i{animation:eq 1.1s ease-in-out infinite}
.snd[aria-pressed=true] i:nth-child(2){animation-delay:-.3s}.snd[aria-pressed=true] i:nth-child(3){animation-delay:-.6s}.snd[aria-pressed=true] i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{height:4px}50%{height:13px}}
.cta{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border-radius:999px;background:var(--ink);color:#08090b;font-weight:600;font-size:13px;
  transition:transform .3s,box-shadow .4s;position:relative}
.cta:hover{transform:scale(1.04);box-shadow:0 0 0 1px rgba(232,236,239,.25),0 0 28px -4px rgba(159,208,255,.45)}
.cta span{display:inline-block;transition:transform .35s var(--out)}
.cta:hover span{transform:translateX(3px)}

main{position:relative;z-index:10}
section{position:relative}
.hero{height:100vh;height:100svh;pointer-events:none}
.hero .side{position:absolute;top:50%;font:500 11px/1.7 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#B3B9C0}
.hero .l{left:var(--pad)}.hero .r{right:var(--pad);text-align:right}
.hero .bot{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(var(--pad) + env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.hero h1{font-family:var(--disp);font-size:clamp(26px,3.1vw,46px);line-height:1.02;font-weight:760;font-stretch:128%;letter-spacing:-.01em;max-width:13ch}
.hero .bot .cta{pointer-events:auto}
.cue{position:absolute;left:50%;bottom:calc(var(--pad) + 4px);transform:translateX(-50%);font:500 10px/1 var(--mono);letter-spacing:.3em;color:var(--mute);text-transform:uppercase;white-space:nowrap}
.cue::after{content:"";display:block;width:1px;height:34px;margin:12px auto 0;background:linear-gradient(var(--ink),transparent);animation:cue 1.8s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* services */
.svc{height:210vh}
.card{position:sticky;top:15vh;width:min(470px,36vw);margin-left:var(--pad);padding:28px 0}
.svc.right .card{margin-left:auto;margin-right:var(--pad)}
.k{display:flex;gap:14px;align-items:center;font:500 11px/1 var(--mono);letter-spacing:.2em;color:var(--mute);text-transform:uppercase}
.k::after{content:"";flex:1;height:1px;background:var(--line)}
.card h2{margin:22px 0 18px;font-family:var(--disp);font-size:clamp(34px,3.3vw,52px);line-height:.95;font-weight:820;font-stretch:150%;letter-spacing:-.02em;text-transform:uppercase}
.card p{color:var(--soft);font-size:17px;line-height:1.55;max-width:40ch}
.stats{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);margin:28px 0 22px;border-top:1px solid var(--line)}
.stats li{padding:16px 12px 0 0}
.stats b{display:block;font-family:var(--disp);font-size:22px;font-weight:760;font-stretch:125%;white-space:nowrap}
.stats li>span{display:block;margin-top:4px;font:400 11px/1.35 var(--mono);color:var(--mute)}
.price{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.price b{font:740 26px/1 var(--disp);font-stretch:125%;letter-spacing:0;color:var(--ink);margin-left:8px}

/* wrap swatches */
.sw{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 20px}
.sw button{display:flex;align-items:center;gap:10px;padding:7px 14px 7px 7px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--soft);
  transition:border-color .3s,background .3s,color .3s}
.sw button i{width:26px;height:26px;border-radius:50%;background:var(--c);box-shadow:inset 0 -6px 10px rgba(0,0,0,.35),inset 0 5px 8px rgba(255,255,255,.35);transition:transform .4s var(--out)}
.sw button:hover{border-color:rgba(232,236,239,.38);color:var(--ink)}
.sw button:hover i{transform:rotate(-18deg) scale(1.06)}
.sw button[aria-pressed=true]{border-color:var(--ink);background:rgba(232,236,239,.08);color:var(--ink)}

/* marquee */
.band{padding:9vh 0;overflow:hidden;white-space:nowrap;pointer-events:none}
.band div{display:inline-block;font-family:var(--disp);font-size:clamp(60px,11vw,190px);font-weight:900;font-stretch:150%;line-height:1;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1px rgba(232,236,239,.4);will-change:transform}
.band div span{color:var(--ink);-webkit-text-stroke:0}

/* booking */
.book{min-height:120vh;padding:22vh var(--pad) 0;display:flex;flex-direction:column}
.book h2{font-family:var(--disp);font-size:clamp(44px,8.4vw,150px);line-height:.88;font-weight:900;font-stretch:150%;letter-spacing:-.03em;text-transform:uppercase;max-width:12ch}
.book .row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-top:4vh}
.book .row p{max-width:34ch;color:var(--soft)}
.pk{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:10vh}
.pk article{position:relative;padding:26px;border:1px solid var(--line);border-radius:20px;background:rgba(9,10,12,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color .3s,transform .5s var(--slide);overflow:hidden}
.pk article::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(159,208,255,.10),transparent 60%)}
.pk article:hover,.pk article:focus-visible{border-color:rgba(232,236,239,.4);transform:translateY(-6px)}
.pk article:hover::before{opacity:1}
.pk h3{font-family:var(--disp);font-size:22px;font-weight:820;font-stretch:150%;text-transform:uppercase}
.pk p{margin:10px 0 26px;color:var(--mute);font-size:14px;min-height:4.6em}
.pk b{font-family:var(--disp);font-size:34px;font-weight:760;font-stretch:125%}
.pk small{font:400 11px/1 var(--mono);color:var(--mute);margin-left:6px}
footer{margin-top:auto;padding:14vh 0 calc(26px + env(safe-area-inset-bottom));display:flex;justify-content:space-between;gap:20px;font:400 11px/1.6 var(--mono);color:var(--mute)}
footer span:last-child{max-width:62ch;text-align:right}

/* scene readouts */
.hud{position:fixed;left:var(--pad);bottom:var(--pad);z-index:15;font:500 10px/1.8 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);opacity:0;transition:opacity .6s}
.hud b{color:var(--ink);font-weight:500}
.on.past .hud{opacity:1}
.on.past.end .hud{opacity:0}
.rail{position:fixed;right:var(--pad);top:50%;transform:translateY(-50%);z-index:15;display:grid;gap:12px;opacity:0;transition:opacity .6s}
.on .rail{opacity:1}
.rail i{display:block;width:18px;height:1px;background:var(--line);transition:width .5s,background .5s;margin-left:auto}
.rail i.a{width:38px;background:var(--ink)}
/* garage: which car is in the bay */
.garage{position:fixed;right:var(--pad);bottom:var(--pad);z-index:15;display:flex;align-items:center;gap:6px;font:500 10px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);opacity:0;pointer-events:none;transition:opacity .6s}
.garage .gl{margin-right:6px}
.on.past .garage{opacity:1;pointer-events:auto}
.on.past.end .garage{opacity:0;pointer-events:none}
.garage button{position:relative;overflow:hidden;font:inherit;letter-spacing:inherit;text-transform:inherit;padding:9px 13px;border:1px solid var(--line);border-radius:999px;
  color:var(--soft);background:rgba(9,10,12,.46);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:border-color .3s,color .3s,background .3s}
.garage button::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:calc(var(--p,0) * 100%);background:var(--cool);transition:width .2s,opacity .4s}
.garage button[aria-pressed=true]::after{opacity:0}
.garage button:hover{color:var(--ink);border-color:rgba(232,236,239,.38)}
.garage button[aria-pressed=true]{color:#08090b;background:var(--ink);border-color:var(--ink)}
.garage[aria-busy=true] button{cursor:progress}

/* word reveal */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.w>span{display:inline-block;transform:translateY(108%);transition:transform 1s var(--out) calc(var(--i,0) * 28ms)}
.in .w>span{transform:none}
.fade{opacity:0;transform:translateY(18px);transition:opacity .9s ease .35s,transform 1s var(--out) .35s}
.in .fade,.fade.in{opacity:1;transform:none}

/* booking dialog */
.bk{margin:auto;width:min(560px,calc(100vw - 24px));max-height:calc(100svh - 24px);border:1px solid var(--line);border-radius:24px;background:rgba(10,11,13,.9);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:var(--ink);padding:0;overflow:auto;opacity:0;transform:translateY(24px) scale(.98);
  transition:opacity .45s var(--out),transform .6s var(--out),overlay .45s allow-discrete,display .45s allow-discrete}
.bk[open]{opacity:1;transform:none}
@starting-style{.bk[open]{opacity:0;transform:translateY(24px) scale(.98)}}
.bk::backdrop{background:rgba(3,3,4,.55);backdrop-filter:blur(4px);opacity:0;transition:opacity .45s,overlay .45s allow-discrete,display .45s allow-discrete}
.bk[open]::backdrop{opacity:1}
@starting-style{.bk[open]::backdrop{opacity:0}}
.bk-in{padding:30px;position:relative}
.bk .x{position:absolute;right:16px;top:14px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);font-size:20px;line-height:1;color:var(--mute);transition:color .2s,border-color .2s,transform .4s var(--out)}
.bk .x:hover{color:var(--ink);border-color:rgba(232,236,239,.4);transform:rotate(90deg)}
.bk h2{font-family:var(--disp);font-size:40px;line-height:.95;font-weight:880;font-stretch:150%;text-transform:uppercase;margin:16px 0 22px}
.bk fieldset{border:0;margin-bottom:18px}
.bk legend{font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.svcs{display:flex;flex-wrap:wrap;gap:8px}
.svcs label,.dl label{cursor:pointer}
.svcs input,.dl input{position:absolute;opacity:0;pointer-events:none}
.svcs span,.dl span{display:block;padding:9px 15px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--soft);transition:border-color .3s,background .3s,color .3s}
.dl{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.dl span{padding:9px 4px;border-radius:12px;text-align:center;font:500 11px/1.3 var(--mono)}
.dl span em{display:block;font:700 18px/1.1 var(--disp);font-style:normal;font-stretch:125%;color:var(--ink)}
.svcs label:hover span,.dl label:hover span{border-color:rgba(232,236,239,.38);color:var(--ink)}
.svcs input:checked+span,.dl input:checked+span{border-color:var(--ink);background:rgba(232,236,239,.08);color:var(--ink)}
.svcs input:focus-visible+span,.dl input:focus-visible+span{outline:1.5px solid var(--cool);outline-offset:3px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.f{display:block;margin-bottom:10px}
.f span{display:block;font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.f input{width:100%;font:inherit;font-size:15px;color:var(--ink);background:rgba(232,236,239,.04);border:1px solid var(--line);border-radius:12px;padding:12px 14px;transition:border-color .3s,background .3s}
.f input::placeholder{color:#5d636a}
.f input:hover{border-color:rgba(232,236,239,.3)}
.f input:focus{outline:none;border-color:var(--cool);background:rgba(159,208,255,.05)}
.f input[aria-invalid=true]{border-color:var(--warm)}
.err{color:var(--warm);font-size:13px;margin:4px 0 10px}
.bk .go{margin-top:10px}
.done .big{font-family:var(--disp);font-size:30px;font-weight:850;font-stretch:150%;text-transform:uppercase}
.done .msg{color:var(--soft);margin:10px 0 24px}

@media (max-width:760px){
  .nav{gap:12px;padding:7px 7px 7px 14px;top:12px}
  .nav nav{display:none}
  .hero .side{top:auto;bottom:calc(150px + env(safe-area-inset-bottom))}
  .hero h1{font-size:28px}
  .hero .bot{flex-direction:column;align-items:flex-start;gap:18px}
  .cue{display:none}
  .svc{height:200vh;display:flex;flex-direction:column;justify-content:flex-end}
  .card,.svc.right .card{top:auto;bottom:0;position:sticky;width:auto;margin:0;padding:110px var(--pad) calc(28px + env(safe-area-inset-bottom));
    background:linear-gradient(transparent,rgba(7,8,10,.86) 90px,rgba(7,8,10,.94))}
  .card h2{font-size:36px;margin:16px 0 12px}
  .card p{font-size:15px}
  .stats{margin:18px 0 14px}
  .stats b{font-size:18px}
  .sw{margin:18px 0 14px;gap:8px}
  .sw button{font-size:12px;padding:5px 11px 5px 5px}
  .sw button i{width:22px;height:22px}
  .book{padding-top:44vh}
  .book .row{flex-direction:column;align-items:flex-start}
  .pk{grid-template-columns:1fr;margin-top:6vh}
  .pk p{min-height:0}
  footer{flex-direction:column}
  footer span:last-child{text-align:left}
  .hud{display:none}
  .rail{top:82px;transform:none;display:flex;gap:6px}
  .rail i{width:12px}.rail i.a{width:26px}
  .garage{right:auto;left:var(--pad);bottom:auto;top:108px;gap:5px;font-size:9px}
  .garage .gl{display:none}
  .garage button{padding:7px 10px}
  .bk-in{padding:24px 20px}
  .bk h2{font-size:32px}
  .two{grid-template-columns:1fr}
  .dl{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .w>span,.fade{transition-duration:.01s;transition-delay:0s}
  .cue::after{animation:none}
  .nav{transition-delay:0s;transition-duration:.3s}
}