/* ============================================================
   Ajoy Detailing — Miami
   Chrome-on-black brand system. Sunset accent used sparingly.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Instrument+Sans:wght@400;500;600&display=swap');

:root{
  --ink:        #08090b;
  --ink-2:      #0c0e11;
  --panel:      #101317;
  --panel-2:    #14181d;
  --line:       rgba(255,255,255,.075);
  --line-str:   rgba(255,255,255,.16);

  --fg:         #eceff3;
  --fg-2:       #a9b1bb;
  --fg-3:       #7c848e;

  --sun-1:      #ff4d7a;
  --sun-2:      #ffa14c;
  --sun:        linear-gradient(96deg, var(--sun-1), var(--sun-2));

  --chrome: linear-gradient(176deg,
              #ffffff 0%, #e9ecf0 26%, #aeb7c1 47%,
              #ffffff 58%, #c5ccd4 78%, #8f97a1 100%);
  --chrome-flat: linear-gradient(180deg, #ffffff 0%, #f3f6f9 45%, #e3e8ee 74%, #d0d7df 100%);

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;

  --ease: cubic-bezier(.16,1,.3,1);
  --wrap: 1180px;
  --gut:  clamp(20px, 5vw, 44px);
  --sec:  clamp(72px, 9vw, 132px);
}

*,*::before,*::after{ box-sizing:border-box }

html{ scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--ink);
  color:var(--fg);
  font-family:'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* fine film grain so the flat blacks aren't dead flat */
body::after{
  content:''; position:fixed; inset:-50%; pointer-events:none; z-index:60; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.55'/></svg>");
  mix-blend-mode:overlay;
}

img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
button,input,select,textarea{ font:inherit; color:inherit }

::selection{ background:var(--sun-1); color:#12070c }

:focus-visible{
  outline:2px solid #ffb36b;
  outline-offset:3px;
  border-radius:4px;
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut) }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:#fff; color:#000; padding:12px 18px; border-radius:0 0 10px 0; font-weight:600;
}
.skip:focus{ left:0 }

/* ---------- type ---------- */

h1,h2,h3,h4{
  font-family:'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-weight:800;
  line-height:1.03;
  letter-spacing:-.035em;
  margin:0;
  text-wrap:balance;
}

h2{ font-size:clamp(2rem, 4.6vw, 3.35rem) }
h3{ font-size:clamp(1.25rem, 2vw, 1.5rem); letter-spacing:-.02em; line-height:1.18 }

.chrome-txt{
  background:var(--chrome);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  /* keeps the bevel readable at small sizes */
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.55));
}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg-2); margin:0 0 22px;
}
.eyebrow .dot{
  width:6px; height:6px; border-radius:50%; background:var(--sun);
  box-shadow:0 0 0 4px rgba(255,110,90,.14);
}

.sec-num{
  font-family:'Archivo', sans-serif; font-weight:800; font-size:.78rem;
  letter-spacing:.14em; background:var(--sun);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.lede{ font-size:clamp(1.02rem,1.35vw,1.16rem); color:var(--fg-2); max-width:52ch; margin:0 }

.sec-head{ max-width:var(--wrap); margin-bottom:clamp(38px,5vw,64px) }
.sec-head p{ color:var(--fg-2); max-width:56ch; margin:18px 0 0 }

.rule{ height:1px; background:linear-gradient(90deg, transparent, var(--line-str), transparent); border:0; margin:0 }

/* ---------- buttons ---------- */

.btn{
  --pad: 15px 26px;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:var(--pad); min-height:52px;
  border-radius:999px; border:1px solid transparent;
  font-weight:600; font-size:.95rem; letter-spacing:.005em;
  cursor:pointer; overflow:hidden; white-space:nowrap;
  transition:transform .25s var(--ease), border-color .25s, background .25s, color .25s, box-shadow .25s;
}
.btn:active{ transform:translateY(1px) }

.btn--chrome{
  color:#0a0b0d; background:var(--chrome-flat);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 10px 30px -12px rgba(220,230,245,.5);
}
/* sheen sweep */
.btn--chrome::after{
  content:''; position:absolute; inset:0; transform:translateX(-120%) skewX(-18deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  width:55%;
}
.btn--chrome:hover::after{ transform:translateX(320%) skewX(-18deg); transition:transform .75s var(--ease) }
.btn--chrome:hover{ box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 16px 40px -14px rgba(220,230,245,.7) }

.btn--ghost{
  color:var(--fg); border-color:var(--line-str); background:rgba(255,255,255,.02);
}
.btn--ghost:hover{ border-color:rgba(255,255,255,.38); background:rgba(255,255,255,.06) }

.btn--sun{
  color:#160709; background:var(--sun); font-weight:600;
  box-shadow:0 12px 34px -14px rgba(255,110,90,.85);
}
.btn--sun:hover{ filter:brightness(1.08) }

.btn--wide{ width:100% }
.btn:disabled{ cursor:default; opacity:.62; transform:none }
.btn:disabled::after{ display:none }

/* ---------- nav ---------- */

.nav{
  position:fixed; inset:0 0 auto; z-index:50;
  transition:background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(8,9,11,.78);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom-color:var(--line);
}
.nav__in{
  max-width:var(--wrap); margin-inline:auto; padding:14px var(--gut);
  display:flex; align-items:center; gap:28px;
}
.brand{ display:block; flex:none; line-height:0 }
.brand img{ height:30px; width:auto; transition:height .3s var(--ease) }
.nav.is-stuck .brand img{ height:26px }

.nav__links{ display:flex; gap:30px; margin-left:auto }
.nav__links a{
  position:relative; font-size:.9rem; color:var(--fg-2); padding:6px 0;
  transition:color .2s;
}
.nav__links a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--sun); transform:scaleX(0); transform-origin:left;
  transition:transform .32s var(--ease);
}
.nav__links a:hover{ color:var(--fg) }
.nav__links a:hover::after{ transform:scaleX(1) }

.nav__end{ display:flex; align-items:center; gap:14px }
.nav__tel{
  font-size:.9rem; font-weight:600; color:var(--fg); white-space:nowrap;
  display:inline-flex; align-items:center; gap:8px;
}
.nav__tel svg{ opacity:.6 }
.nav .btn{ --pad:11px 20px; min-height:44px; font-size:.88rem }

.burger{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  background:none; border:1px solid var(--line-str); border-radius:12px; cursor:pointer;
}
.burger span{ display:block; width:17px; height:1.5px; background:var(--fg); position:relative }
.burger span::before,.burger span::after{
  content:''; position:absolute; left:0; width:17px; height:1.5px; background:var(--fg);
  transition:transform .3s var(--ease), opacity .2s;
}
.burger span::before{ top:-5.5px } .burger span::after{ top:5.5px }
.burger[aria-expanded="true"] span{ background:transparent }
.burger[aria-expanded="true"] span::before{ transform:translateY(5.5px) rotate(45deg) }
.burger[aria-expanded="true"] span::after{ transform:translateY(-5.5px) rotate(-45deg) }

.mobile{
  display:none; position:fixed; inset:72px 0 auto; z-index:49;
  background:rgba(10,11,14,.97); backdrop-filter:blur(20px);
  border-block:1px solid var(--line); padding:8px var(--gut) 26px;
}
.mobile.is-open{ display:block }
.mobile a{ display:block; padding:16px 0; border-bottom:1px solid var(--line); font-size:1.05rem }
.mobile .btn{ margin-top:20px }

/* ---------- hero ---------- */

.hero{ position:relative; padding:clamp(120px,15vw,180px) 0 clamp(56px,7vw,88px); overflow:hidden }

.hero__glow{
  position:absolute; z-index:0; pointer-events:none;
  width:min(1100px,120vw); aspect-ratio:1.5; right:-14%; top:-16%;
  background:
    radial-gradient(closest-side, rgba(255,77,122,.20), transparent 70%),
    radial-gradient(closest-side at 62% 58%, rgba(255,161,76,.16), transparent 70%);
  filter:blur(24px);
}
.hero__grid{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line) 1px, transparent 1px);
  background-size:100% 78px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 30%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 30%, #000 20%, transparent 78%);
}

.hero__in{ position:relative; z-index:1; display:grid; gap:clamp(36px,4vw,52px); align-items:center;
  grid-template-columns:minmax(0,1.06fr) minmax(0,1fr) }

.hero h1{
  font-size:clamp(2.7rem, 6.4vw, 4.6rem);
  font-weight:900; letter-spacing:-.042em; margin:0 0 24px;
}
.hero h1 em{ font-style:normal; display:block }

.hero .lede{ margin-bottom:32px }

.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:38px }

.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:10px 22px; margin:0; padding:0 }
.chips li{
  display:flex; align-items:center; gap:9px;
  font-size:.86rem; color:var(--fg-2);
}
.chips svg{ flex:none; color:#cfd6de; opacity:.85 }

.hero__copy{ min-width:0 }
.hero__art{ position:relative; min-width:0 }

/* ---------- the animated mark ----------
   The logo is silver linework on real transparency, so the motion is layered
   into the same 1200x846 space as the artwork: ocean underneath it, water and
   specular on top, each clipped to a region traced off the art itself.
   build/hero-film.py generates the markup and the per-element timings.        */

.film-stage{ position:relative; z-index:1 }
.film{ display:block; width:100%; height:auto }
.film__art{ pointer-events:none }

/* fade the mark into place once the page has finished loading */
.js .film-stage{ opacity:0; transform:translateY(16px) scale(.984); filter:blur(7px) }
.js .film-stage.is-lit{
  opacity:1; transform:none; filter:none;
  transition:opacity 1.1s var(--ease), transform 1.3s var(--ease), filter 1.1s var(--ease);
}
/* the water holds still until the mark has landed */
.js .film__sea,.js .film__shine,.js .film__wet,
.js .film__drips,.js .film__jet,.js .film__spark{ opacity:0; transition:opacity .9s ease .45s }
.js .film-stage.is-lit .film__sea,.js .film-stage.is-lit .film__shine,
.js .film-stage.is-lit .film__wet,.js .film-stage.is-lit .film__drips,
.js .film-stage.is-lit .film__jet,.js .film-stage.is-lit .film__spark{ opacity:1 }
.js .film *{ animation-play-state:paused }
.js .film-stage.is-lit .film *{ animation-play-state:running }
/* and stop again once the hero is off screen — nothing to see, no frames to paint */
.js .film-stage.is-idle .film *{ animation-play-state:paused }

/* ocean — rippling behind the engraved horizon lines */
.film__wv{
  fill:none; stroke:#e2eef8;
  animation-name:filmDrift; animation-timing-function:linear; animation-iteration-count:infinite;
}
@keyframes filmDrift{ from{ transform:translateX(0) } to{ transform:translateX(var(--dx)) } }

.film__swell{ animation:filmSwell 7.5s ease-in-out infinite }
@keyframes filmSwell{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(3.5px) } }

.film__glint{ animation:filmGlint 12s cubic-bezier(.42,0,.58,1) infinite }
@keyframes filmGlint{
  0%{ transform:translateX(0); opacity:0 }
  14%{ opacity:.85 } 76%{ opacity:.85 }
  100%{ transform:translateX(1780px); opacity:0 }
}

/* specular — masked by the artwork's own luminance, so only the silver flares */
.film__wetgloss{ animation:filmGloss 6.4s ease-in-out infinite }
@keyframes filmGloss{ 0%,100%{ opacity:.34 } 50%{ opacity:.66 } }

.film__sweep{ animation:filmSweep 7.6s infinite }
@keyframes filmSweep{
  0%{   transform:translateX(-620px); animation-timing-function:steps(1,end) }
  54%{  transform:translateX(-620px); animation-timing-function:cubic-bezier(.5,0,.32,1) }
  100%{ transform:translateX(1700px) }
}

/* the jet leaving the lance */
.film__jl{
  stroke-dasharray:26 120;
  animation-name:filmJet; animation-timing-function:linear; animation-iteration-count:infinite;
}
@keyframes filmJet{ from{ stroke-dashoffset:146 } to{ stroke-dashoffset:0 } }

/* where it lands, and what runs off */
.film__splash{ animation:filmSplash 1.7s ease-in-out infinite }
@keyframes filmSplash{ 0%,100%{ opacity:.45 } 50%{ opacity:.95 } }

.film__sheet{
  animation-name:filmSheet; animation-duration:5.2s; animation-iteration-count:infinite;
  animation-timing-function:cubic-bezier(.3,.05,.5,1);
}
.film__sheet.s2{ animation-delay:2.6s }
@keyframes filmSheet{
  0%{   transform:translateY(190px); opacity:0 }
  20%{  opacity:.95 } 76%{ opacity:.8 }
  100%{ transform:translateY(660px); opacity:0 }
}

.film__riv{
  opacity:.65;
  animation-name:filmRiv; animation-timing-function:cubic-bezier(.35,0,.55,1); animation-iteration-count:infinite;
}
@keyframes filmRiv{
  0%{   transform:translateY(-26px); opacity:0 }
  15%{  opacity:1 } 78%{ opacity:.9 }
  100%{ transform:translateY(var(--dy)); opacity:0 }
}

/* sheeting forward down the hood — the local axes are rotated with the surface,
   so a plain translateY runs down-and-forward the way the water actually goes */
.film__hood{
  animation-name:filmHood; animation-timing-function:cubic-bezier(.3,.02,.55,1); animation-iteration-count:infinite;
}
@keyframes filmHood{
  0%{   transform:translateY(-50px); opacity:0 }
  20%{  opacity:.85 } 72%{ opacity:.55 }
  100%{ transform:translateY(124px); opacity:0 }
}

.film__drip{
  animation-name:filmDrip; animation-timing-function:cubic-bezier(.4,0,.85,.4); animation-iteration-count:infinite;
}
@keyframes filmDrip{
  0%{ transform:translateY(0); opacity:0 }
  18%{ opacity:.85 }
  100%{ transform:translateY(48px); opacity:0 }
}

.film__sp{ opacity:0; animation-name:filmSpark; animation-timing-function:ease-in-out; animation-iteration-count:infinite }
@keyframes filmSpark{ 0%,70%,100%{ opacity:0 } 80%{ opacity:.95 } 90%{ opacity:.2 } }

.film__pool{ animation:filmPool 8.5s ease-in-out infinite }
@keyframes filmPool{ 0%,100%{ opacity:.5 } 50%{ opacity:1 } }

/* per-element timings — generated by build/hero-film.py */
.film__wv.w1{ animation-duration:13s; --dx:-150px }
.film__wv.w2{ animation-duration:17s; --dx:180px }
.film__wv.w3{ animation-duration:11s; --dx:-210px }
.film__wv.w4{ animation-duration:15s; --dx:-240px }
.film__wv.w5{ animation-duration:19s; --dx:270px }
.film__wv.w6{ animation-duration:12s; --dx:-300px }
.film__wv.w7{ animation-duration:16s; --dx:-330px }
.film__wv.w8{ animation-duration:21s; --dx:360px }

.film__riv.r1{ animation-duration:3.4s; animation-delay:0s; --dy:178px }
.film__riv.r2{ animation-duration:4.1s; animation-delay:1.5s; --dy:150px }
.film__riv.r3{ animation-duration:3s; animation-delay:0.7s; --dy:196px }
.film__riv.r4{ animation-duration:3.8s; animation-delay:2.4s; --dy:164px }
.film__riv.r5{ animation-duration:2.7s; animation-delay:0.3s; --dy:208px }
.film__riv.r6{ animation-duration:3.5s; animation-delay:1.9s; --dy:172px }
.film__riv.r7{ animation-duration:3.1s; animation-delay:1.1s; --dy:188px }
.film__riv.r8{ animation-duration:4s; animation-delay:2.9s; --dy:156px }
.film__riv.r9{ animation-duration:2.9s; animation-delay:0.5s; --dy:200px }
.film__riv.r10{ animation-duration:3.6s; animation-delay:2.1s; --dy:166px }
.film__riv.r11{ animation-duration:3.3s; animation-delay:1.3s; --dy:178px }
.film__riv.r12{ animation-duration:4.2s; animation-delay:3.1s; --dy:148px }
.film__riv.r13{ animation-duration:3.2s; animation-delay:0.9s; --dy:168px }
.film__riv.r14{ animation-duration:3.9s; animation-delay:2.6s; --dy:140px }

.film__hood.h1{ animation-duration:3.55s; animation-delay:0.62s }
.film__hood.h2{ animation-duration:3.9s; animation-delay:1.24s }
.film__hood.h3{ animation-duration:4.25s; animation-delay:1.86s }
.film__hood.h4{ animation-duration:4.6s; animation-delay:2.48s }

.film__drip.d1{ animation-duration:2.6s; animation-delay:0.2s }
.film__drip.d2{ animation-duration:3.1s; animation-delay:1.4s }
.film__drip.d3{ animation-duration:2.4s; animation-delay:2.2s }
.film__drip.d4{ animation-duration:2.9s; animation-delay:0.8s }
.film__drip.d5{ animation-duration:2.7s; animation-delay:1.9s }
.film__drip.d6{ animation-duration:3.3s; animation-delay:0.5s }
.film__drip.d7{ animation-duration:2.5s; animation-delay:2.6s }

.film__jl.j1{ animation-duration:0.555s; animation-delay:0.055s }
.film__jl.j2{ animation-duration:0.59s; animation-delay:0.11s }
.film__jl.j3{ animation-duration:0.625s; animation-delay:0.165s }
.film__jl.j4{ animation-duration:0.66s; animation-delay:0.22s }
.film__jl.j5{ animation-duration:0.695s; animation-delay:0.275s }
.film__jl.j6{ animation-duration:0.73s; animation-delay:0.33s }
.film__jl.j7{ animation-duration:0.765s; animation-delay:0.385s }
.film__jl.j8{ animation-duration:0.8s; animation-delay:0.44s }
.film__jl.j9{ animation-duration:0.835s; animation-delay:0.495s }
.film__jl.j10{ animation-duration:0.87s; animation-delay:0.55s }

.film__sp.p1{ animation-duration:3.6s; animation-delay:0s }
.film__sp.p2{ animation-duration:4.4s; animation-delay:1.2s }
.film__sp.p3{ animation-duration:4s; animation-delay:2.1s }
.film__sp.p4{ animation-duration:3.2s; animation-delay:0.8s }
.film__sp.p5{ animation-duration:4.8s; animation-delay:3s }
.film__sp.p6{ animation-duration:3.8s; animation-delay:1.7s }
/* end generated */

/* ---------- trust bar ---------- */

.bar{ border-block:1px solid var(--line); background:var(--ink-2) }
.bar__in{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) }
.bar__item{ padding:26px 28px; border-left:1px solid var(--line) }
.bar__item:first-child{ border-left:0; padding-left:0 }
.bar__item:last-child{ padding-right:0 }
.bar__item b{ display:block; font-family:'Archivo',sans-serif; font-size:1.02rem; letter-spacing:-.02em; font-weight:700 }
.bar__item span{ font-size:.84rem; color:var(--fg-3) }

/* ---------- sections ---------- */

.sec{ padding:var(--sec) 0; position:relative }
.sec--panel{ background:var(--ink-2); border-block:1px solid var(--line) }

/* ---------- pricing ---------- */

.sizes{
  display:inline-flex; padding:5px; gap:4px; margin:34px 0 0;
  background:var(--panel); border:1px solid var(--line); border-radius:999px;
  max-width:100%; overflow-x:auto; scrollbar-width:none;
}
.sizes::-webkit-scrollbar{ display:none }
.sizes label{ position:relative; cursor:pointer; flex:none }
.sizes input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer }
.sizes span{
  display:block; padding:11px 22px; border-radius:999px; white-space:nowrap;
  font-size:.9rem; font-weight:500; color:var(--fg-2);
  transition:color .25s, background .25s;
}
.sizes i{ font-style:normal; font-weight:inherit }
.sizes .t-sm{ display:none }
.sizes input:checked + span{ background:var(--chrome-flat); color:#0a0b0d; font-weight:600 }
.sizes input:focus-visible + span{ outline:2px solid #ffb36b; outline-offset:3px }
.sizes label:hover span{ color:var(--fg) }

.plans{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin-top:44px; align-items:start }

.plan{
  position:relative; display:flex; flex-direction:column;
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(26px,3vw,38px);
}
.plan--hero{
  border-color:rgba(255,255,255,.18);
  background:linear-gradient(180deg, #171b21, var(--panel-2));
  box-shadow:0 18px 44px rgba(0,0,0,.38);
}
.plan--hero::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:linear-gradient(150deg, rgba(255,161,76,.55), rgba(255,77,122,.28) 40%, transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}

.plan__tag{
  position:absolute; top:-11px; right:26px;
  background:var(--sun); color:#160709; font-size:.68rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; padding:5px 12px; border-radius:999px;
}
.plan__name{ font-family:'Archivo',sans-serif; font-weight:800; font-size:1.6rem; letter-spacing:-.03em }
.plan__sub{ color:var(--fg-3); font-size:.9rem; margin:6px 0 0 }

.plan__price{ display:flex; align-items:flex-end; gap:9px; margin:26px 0 4px }
.plan__price .from{
  font-family:'Archivo',sans-serif; font-weight:600; font-size:.82rem; color:var(--fg-3);
  letter-spacing:.02em; transform:translateY(-15px); margin-right:-3px;
}
.plan__price .cur{ font-family:'Archivo',sans-serif; font-weight:700; font-size:1.5rem; color:var(--fg-2); transform:translateY(-14px) }
.plan__price .amt{
  font-family:'Archivo',sans-serif; font-weight:900; font-size:clamp(3.2rem,6vw,4.2rem);
  letter-spacing:-.05em; line-height:.9;
}
.plan__price .per{ color:var(--fg-3); font-size:.86rem; padding-bottom:9px }
.amt{ transition:opacity .18s ease, transform .18s ease }
.amt.is-swap{ opacity:0; transform:translateY(-6px) }

.plan__delta{ font-size:.85rem; color:var(--fg-3); min-height:1.4em; margin:0 0 24px }
.plan__delta b{ color:#ffb684; font-weight:600 }

.plan__inc{ list-style:none; margin:0; padding:26px 0 0; border-top:1px solid var(--line); display:grid; gap:12px }
.plan__inc li{ display:grid; grid-template-columns:20px 1fr; gap:13px; align-items:start }
.plan__inc svg{ margin-top:4px; color:#c8cfd7 }
.plan--hero .plan__inc svg{ color:#ffb684 }
.plan__inc b{ font-weight:500; font-size:.95rem; display:block; line-height:1.45; color:var(--fg) }
.plan__inc span{ display:block; color:var(--fg-3); font-size:.8rem; line-height:1.45; margin-top:1px }
.plan__inc-head{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-2);
  font-weight:600; padding-top:24px; border-top:1px solid var(--line); margin:0;
}
/* only a heading that follows a previous list needs to be pushed off it */
.plan__inc + .plan__inc-head,
.incl-mini + .plan__inc-head{ margin-top:26px }
.plan__inc-head + .plan__inc{ border-top:0; padding-top:14px }
/* the line where the Full Detail starts adding things */
.plan__inc-head--plus{ color:#ffcda4 }

.incl-mini{ list-style:none; display:flex; flex-wrap:wrap; gap:7px; margin:14px 0 0; padding:0 }
.incl-mini li{
  font-size:.78rem; color:var(--fg-3); border:1px solid var(--line);
  border-radius:999px; padding:5px 12px; background:rgba(255,255,255,.02);
}

.plan__foot{ margin-top:auto; padding-top:30px }

.fine{ color:var(--fg-3); font-size:.85rem; margin:26px 0 0; max-width:66ch }

/* ---------- add-ons ----------
   Sits under the two plan cards in the same panel treatment, so it reads as
   part of the pricing rather than a separate pitch. Prices are flat add-ons,
   not size-dependent, so they are static text rather than data-price. */

.addons{
  margin-top:22px; padding:clamp(24px,3vw,34px);
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--line); border-radius:var(--r-lg);
}
.addons__head{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:6px 24px; margin-bottom:22px;
}
.addons__title{ font-family:'Archivo',sans-serif; font-weight:800; font-size:1.35rem; letter-spacing:-.03em; margin:0 }
.addons__head p{ margin:0; color:var(--fg-3); font-size:.9rem }

.addons__grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;
}
.addon{
  display:flex; flex-direction:column; gap:8px;
  padding:18px 20px; border:1px solid var(--line); border-radius:var(--r);
  background:rgba(255,255,255,.02);
}
.addon__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px }
.addon__name{ font-weight:600; font-size:.97rem; line-height:1.35 }
.addon__price{
  flex:none; font-family:'Archivo',sans-serif; font-weight:800; font-size:1.2rem;
  letter-spacing:-.02em; line-height:1.1; color:var(--fg); text-align:right;
}
.addon__price small{
  display:block; margin-top:4px; font-family:'Instrument Sans',sans-serif; font-weight:500;
  font-size:.7rem; letter-spacing:0; color:var(--fg-3); white-space:nowrap;
}
.addon p{ margin:0; color:var(--fg-3); font-size:.86rem; line-height:1.5 }
.fine strong{ color:var(--fg-2); font-weight:500 }

/* ---------- process ---------- */

.steps{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden }
.step{ background:var(--ink-2); padding:clamp(28px,3.4vw,44px); display:grid; gap:20px;
  grid-template-columns:minmax(0,.3fr) minmax(0,1fr); align-items:start; transition:background .3s;
  position:relative; overflow:hidden }
.step:hover{ background:var(--panel) }

/* ---------- process photography ----------
   Full-bleed behind the copy. The photo sits under a scrim that is near-opaque
   where the text runs and opens up on the right, so the picture reads without
   ever competing with the words. The copy is lifted to z-index 1 above both. */

.step__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; opacity:1;
}
.step::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:rgba(9,11,14,.52);
}
.step > div{ position:relative; z-index:1 }

/* The five photographs were shot at very different exposures — the foam one is
   nearly white, the wax one is a black car in a dark bay. Levelling them here
   means one flat scrim works for all five and the copy stays readable on each. */
.ph-foam{     filter:brightness(.66) contrast(1.03) }
.ph-wash{     filter:brightness(.86) }
.ph-wax{      filter:brightness(1.04) }
.ph-wheels{   filter:brightness(.80) }
.ph-interior{ filter:brightness(.94) }
.step__n{ display:flex; align-items:baseline; gap:14px }
.step__n i{
  font-style:normal; font-family:'Archivo',sans-serif; font-weight:900;
  font-size:clamp(2.6rem,5.6vw,3.9rem); letter-spacing:-.06em; line-height:1;
  background:var(--chrome); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.step h3{ margin:0 0 12px; text-shadow:0 2px 8px rgba(0,0,0,.95), 0 0 22px rgba(0,0,0,.7) }
.step p{ margin:0; color:#eef1f5; max-width:58ch; text-shadow:0 1px 3px rgba(0,0,0,.95), 0 0 16px rgba(0,0,0,.75) }
.step p + p{ margin-top:12px; color:#d5dbe3; font-size:.92rem }

.duo{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin-top:22px }
.card{
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(26px,3vw,36px);
  position:relative; overflow:hidden; isolation:isolate;
}
/* the duo cards are narrow and the copy fills them, so the photo runs quieter
   here and opens up toward the bottom-right, clear of the text */
.card__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; opacity:1;
}
.card::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:rgba(9,11,14,.56);
}
.card > *:not(.card__bg){ position:relative; z-index:1 }
.card__ico{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center; margin-bottom:22px;
  background:rgba(255,255,255,.07); border:1px solid var(--line-str); color:#e6ebf1;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.card h3{ margin:0 0 12px; text-shadow:0 2px 8px rgba(0,0,0,.95), 0 0 22px rgba(0,0,0,.7) }
.card p{ margin:0; color:#eef1f5; font-size:.96rem; text-shadow:0 1px 3px rgba(0,0,0,.95), 0 0 16px rgba(0,0,0,.75) }
.card p + p{ margin-top:12px; color:#d5dbe3; font-size:.92rem }

/* ---------- coverage ---------- */

.hoods-set + .hoods-set{ margin-top:34px }
.hoods__county{
  font-family:'Archivo',sans-serif; font-size:.78rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3);
  margin:0 0 14px;
}
.hoods{ display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none }
.hoods li{
  border:1px solid var(--line); border-radius:999px; padding:9px 18px;
  font-size:.9rem; color:var(--fg-2); background:rgba(255,255,255,.02);
  transition:border-color .25s, color .25s;
}
.hoods li:hover{ border-color:var(--line-str); color:var(--fg) }

/* ---------- faq ---------- */

.faq{ border-top:1px solid var(--line) }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{
  list-style:none; cursor:pointer; padding:26px 44px 26px 0; position:relative;
  font-family:'Archivo',sans-serif; font-weight:700; font-size:clamp(1.02rem,1.5vw,1.18rem);
  letter-spacing:-.02em; transition:color .2s;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary:hover{ color:#fff }
.faq summary::after,.faq summary::before{
  content:''; position:absolute; right:8px; top:50%; background:var(--fg-2);
  transition:transform .3s var(--ease), opacity .3s;
}
.faq summary::before{ width:13px; height:1.5px; margin-top:-.75px }
.faq summary::after{ width:1.5px; height:13px; margin-top:-6.5px; right:13.75px }
.faq details[open] summary::after{ transform:rotate(90deg); opacity:0 }
.faq p{ margin:0 0 28px; color:var(--fg-2); max-width:70ch; font-size:.98rem }

/* ---------- booking ---------- */

.book{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:clamp(30px,4vw,56px); align-items:start }

.form{ display:grid; gap:18px }
.row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px }
.field label{
  display:block; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-3); margin-bottom:9px; font-weight:600;
}
.field input,.field select,.field textarea{
  width:100%; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:14px 15px; min-height:50px; color:var(--fg); font-size:.96rem;
  transition:border-color .2s, background .2s;
}
.field textarea{ resize:vertical; min-height:96px; line-height:1.5 }
.field input::placeholder,.field textarea::placeholder{ color:#6d757f }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:var(--line-str) }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:rgba(255,180,132,.7); background:var(--panel-2);
}
.field select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'><path d='M1 1.5 6 6.5l5-5' stroke='%23a9b1bb' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 15px center; padding-right:40px;
}
.field [aria-invalid="true"],
.field [aria-invalid="true"]:hover{ border-color:rgba(255,120,108,.8) }

.form__status{ margin:0; font-size:.9rem; line-height:1.5; color:var(--fg-2) }
.form__status:empty{ display:none }
.form__status.is-ok{ color:#9fe3bd }
.form__status.is-err{ color:#ff9d8f }

/* spam trap — real visitors never see or fill it */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

/* Day + time panel. A custom calendar rather than the native date input,
   because the native one cannot grey out individual days — and fully booked
   days have to look unavailable before anyone taps them. */
.when{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,30px); position:sticky; top:100px;
}
.when h3{ font-size:1.06rem; margin:0 0 14px }
.when__note{ font-size:.82rem; color:var(--fg-3); margin:16px 0 0; text-align:center }
.when__note a{ color:var(--fg-2); text-decoration:underline; text-underline-offset:3px; white-space:nowrap }
.when .form__status{ margin-top:14px }

.cal__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px }
.cal__month{ margin:0; font-weight:600; font-size:.98rem }
.cal__nav{
  display:grid; place-items:center; width:38px; height:38px; flex:none;
  border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--fg-2);
  cursor:pointer; transition:border-color .2s, color .2s;
}
.cal__nav:hover:not(:disabled){ border-color:var(--line-str); color:var(--fg) }
.cal__nav:disabled{ opacity:.25; cursor:default }

.cal__dow,.cal__grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px }
.cal__dow span{
  text-align:center; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg-3); font-weight:600; padding:4px 0 6px;
}
.cal__day{
  position:relative; aspect-ratio:1; min-height:36px; padding:0;
  border:1px solid transparent; border-radius:10px; background:rgba(255,255,255,.04);
  color:var(--fg); font-size:.9rem; font-variant-numeric:tabular-nums; cursor:pointer;
  transition:border-color .15s, background .15s;
}
.cal__day:hover:not(:disabled){ border-color:var(--line-str); background:rgba(255,255,255,.07) }
.cal__day:disabled{ background:transparent; color:#4b525b; cursor:default }
.cal__day.is-full{ text-decoration:line-through; text-decoration-color:rgba(255,120,108,.7); color:#6a717a }
.cal__day.is-today::after{
  content:''; position:absolute; left:50%; bottom:5px; width:4px; height:4px; margin-left:-2px;
  border-radius:50%; background:var(--sun-2);
}
.cal__day[aria-pressed="true"],
.cal__day[aria-pressed="true"]:hover{ background:var(--chrome-flat); color:#101317; font-weight:600 }
.cal__day:focus-visible,.cal__nav:focus-visible{ outline:2px solid rgba(255,180,132,.8); outline-offset:2px }
.cal__key{ margin:10px 0 0; font-size:.78rem; color:var(--fg-3) }

.slots{ border:0; margin:22px 0 20px; padding:0; min-width:0 }
.slots legend{
  padding:0; margin-bottom:10px; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-3); font-weight:600;
}
.slots__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
.slots__grid:empty{ display:none }
.slot{ position:relative; display:block }
.slot input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none }
.slot span{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  min-height:52px; padding:6px 10px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:rgba(255,255,255,.04); font-weight:600; font-size:.95rem; cursor:pointer;
  transition:border-color .15s, background .15s;
}
.slot span small{ font-weight:500; font-size:.7rem; color:var(--fg-3); letter-spacing:.04em }
.slot:hover input:not(:disabled) + span{ border-color:var(--line-str) }
.slot input:checked + span{ background:var(--chrome-flat); color:#101317; border-color:transparent }
.slot input:disabled + span{ background:transparent; color:#5d646d; cursor:default }
.slot input:disabled + span b{ text-decoration:line-through }
.slot input:focus-visible + span{ outline:2px solid rgba(255,180,132,.8); outline-offset:2px }
.slots__hint{ margin:10px 0 0; font-size:.84rem; color:var(--fg-3) }
.slots__hint:empty{ display:none }
.slots.is-invalid legend,.cal.is-invalid .cal__month{ color:#ff9d8f }

/* ---------- cta band ---------- */

.band{ position:relative; overflow:hidden; border-block:1px solid var(--line); background:var(--ink-2) }
.band__glow{
  position:absolute; inset:-45% -12% auto; height:460px; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,77,122,.22), transparent 72%);
  filter:blur(20px);
}
.band__in{ position:relative; z-index:1; padding:clamp(64px,8vw,104px) 0; text-align:center }
.band h2{ margin:0 auto 18px; max-width:16ch }
.band p{ color:var(--fg-2); max-width:52ch; margin:0 auto 34px }
.band__cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }

/* ---------- footer ---------- */

.foot{ padding:clamp(56px,7vw,84px) 0 40px }
.foot__top{ display:grid; grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr)); gap:40px; align-items:start }
.foot__brand{ min-width:0 }
.foot__brand img{ width:min(300px,80%); margin-bottom:22px }
.foot__brand p{ color:var(--fg-3); font-size:.92rem; max-width:38ch; margin:0 }
.foot h4{ font-family:'Archivo',sans-serif; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3); margin:0 0 18px; font-weight:700 }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px }
.foot ul a,.foot ul li{ color:var(--fg-2); font-size:.93rem; transition:color .2s }
.foot ul a:hover{ color:var(--fg) }
.foot__bot{
  margin-top:clamp(40px,5vw,60px); padding-top:26px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  color:var(--fg-3); font-size:.83rem;
}

/* ---------- reveal ----------
   Everything is visible by default. The .js class is only added at runtime,
   so a failed script (or no script at all) still leaves a fully readable page. */

.js .sec .rv,
.js .band .rv{ opacity:0; transform:translateY(18px) }
.js .rv.in{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease) }
.js .rv.in.d1{ transition-delay:.08s } .js .rv.in.d2{ transition-delay:.16s } .js .rv.in.d3{ transition-delay:.24s }

/* the hero animates from load, never from a scroll observer, so the first
   painted frame of the page is already the finished composition */
@keyframes rise{ from{ transform:translateY(15px) } to{ transform:none } }
.js .hero .rv{ animation:rise .7s var(--ease) both }
.js .hero .rv.d1{ animation-delay:.07s }
.js .hero .rv.d2{ animation-delay:.14s }
.js .hero .rv.d3{ animation-delay:.21s }

/* ---------- responsive ---------- */

@media (max-width:1000px){
  .hero__in{ grid-template-columns:minmax(0,1fr) }
  .hero__art{ order:-1; max-width:620px; width:100%; margin-inline:auto }
  .hero{ padding-top:clamp(104px,20vw,140px) }
  .nav__in{ gap:14px }
  .brand img{ height:26px }
  .nav.is-stuck .brand img{ height:24px }
  .nav__links{ display:none }
  .nav__tel{ display:none }
  .burger{ display:flex }
  .book{ grid-template-columns:minmax(0,1fr) }
  .when{ position:static }
  .bar__in{ grid-template-columns:repeat(2,1fr) }
  .bar__item:nth-child(3){ border-left:0 }
  .bar__item:nth-child(n+3){ border-top:1px solid var(--line) }
  .foot__top{ grid-template-columns:1fr 1fr }
  .foot__brand{ grid-column:1/-1 }
}

@media (max-width:760px){
  /* single column here, so the copy runs the full width — the scrim has to
     cover evenly instead of opening up on the right */
  .step::after{ background:rgba(9,11,14,.62) }
  .card::after{ background:rgba(9,11,14,.64) }
  .plans{ grid-template-columns:minmax(0,1fr) }
  .addons__grid{ grid-template-columns:minmax(0,1fr) }
  .duo{ grid-template-columns:minmax(0,1fr) }
  .step{ grid-template-columns:minmax(0,1fr); gap:10px }
  .step__n i{ font-size:2.4rem }
  .nav .btn{ --pad:10px 16px }
}

@media (max-width:520px){
  body{ font-size:16px }
  .brand img{ height:22px }
  .nav.is-stuck .brand img{ height:21px }
  .nav .btn{ --pad:10px 15px; font-size:.84rem }
  .row{ grid-template-columns:minmax(0,1fr) }
  .bar__in{ grid-template-columns:minmax(0,1fr) }
  .bar__item{ border-left:0; border-top:1px solid var(--line); padding:22px 0 }
  .bar__item:first-child{ border-top:0 }
  .hero__cta .btn{ width:100% }
  .sizes{ display:grid; grid-template-columns:repeat(3,1fr); width:100% }
  .sizes span{ padding:12px 10px; font-size:.86rem; text-align:center }
  .sizes .t-lg{ display:none }
  .sizes .t-sm{ display:inline }
  .foot__top{ grid-template-columns:minmax(0,1fr) }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
  .js .rv,.js .hero .rv{ opacity:1 !important; transform:none !important; animation:none !important }
  /* the mark settles to a still frame — water on the paint, no motion */
  .film *{ animation:none !important }
  .js .film-stage{ opacity:1 !important; transform:none !important; filter:none !important }
  .js .film__sea,.js .film__shine,.js .film__wet,
  .js .film__drips,.js .film__jet,.js .film__spark{ opacity:1 !important }
}