/* Torque Garage · concept by Brand Evolution */
:root{
  --asphalt:#1C1F22; --asphalt2:#262A2E; --concrete:#ECE8E0; --paper:#F7F4EC; --yellow:#FFC629; --yellow-soft:#FFD65C; --aqua:#D6F0EE;
  --flame:#C9400F; --flame-deep:#8E2C08; --ink:#1C1F22; --ink-soft:#4A5056; --teal:#12A4A6;
  --c1:#6FE3DE; --c2:#12A4A6; --c3:#0A5C60;
  --display:"Unbounded", system-ui, sans-serif; --body:"Manrope", system-ui, sans-serif; --r:20px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; font:500 1.05rem/1.6 var(--body); color:var(--ink); background:var(--concrete); overflow-x:hidden}
svg{display:block}
h1,h2,h3{font-family:var(--display); line-height:1.04; margin:0 0 .45em; font-weight:800; letter-spacing:-.025em}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--flame); outline-offset:3px; border-radius:8px}
.skip{position:absolute; left:-999px; top:8px; background:#fff; padding:8px 14px; border-radius:10px; z-index:100}
.skip:focus{left:12px}
main{position:relative}
.wrap{width:min(1180px, 100% - 32px); margin:0 auto; position:relative; z-index:2}
.two{display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(24px,5vw,72px); align-items:center}
.display{font-size:clamp(2rem, 4.4vw, 3.7rem)}
.display mark{background:none; color:var(--flame)}
.kicker{font:800 .8rem/1.3 var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--flame); margin-bottom:1rem}
.lead{font-size:clamp(1.05rem,1.4vw,1.18rem); max-width:33em}
.tiny{font-size:.92rem; color:var(--ink-soft); margin-top:1.4rem}
.fine{font-size:.94rem; color:var(--ink-soft); margin-top:1.4rem; max-width:36em}
.paint{font:800 30px var(--display); fill:#F7F4EC; opacity:.9; letter-spacing:.06em}
.paint.big{font-size:52px; fill:#FFC629; opacity:.95; text-anchor:middle}
.paint.big.dark{fill:#1C1F22; opacity:.85}
.paint.p{font-size:30px; fill:#fff}
.paint.k{font-size:14px; fill:#1C1F22}

/* buttons */
.btn{display:inline-flex; align-items:center; font:800 1rem var(--body); text-decoration:none; color:#fff; background:var(--flame); border:0; cursor:pointer;
  padding:.8em 1.5em .76em; border-radius:14px; box-shadow:0 5px 0 var(--flame-deep); transition:background .2s, box-shadow .2s; will-change:transform}
.btn:hover{background:#B0370C}
.btn:active{box-shadow:0 2px 0 var(--flame-deep)}
.btn-ghost{background:transparent; color:inherit; box-shadow:inset 0 0 0 2.5px currentColor}
.btn-ghost:hover{background:rgba(28,31,34,.07)}
.btn-dark{background:var(--asphalt); box-shadow:0 5px 0 #000}
.btn-dark:hover{background:#30353A}
.btn-small{padding:.56em 1.05em .52em; font-size:.92rem; box-shadow:0 4px 0 var(--flame-deep)}
.cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:1.6rem}

/* nav: glass tinted to the section beneath (JS sets --navbg + data-tone) */
.nav{position:fixed; top:12px; left:50%; transform:translateX(-50%); width:min(1180px, 100% - 24px); z-index:60; display:flex; align-items:center;
  justify-content:space-between; gap:16px; padding:8px 8px 8px 12px; border-radius:18px; color:var(--ink);
  background:var(--navbg, rgba(236,232,224,.8)); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 6px 24px rgba(0,0,0,.12), inset 0 0 0 1px rgba(28,31,34,.08); transition:background .35s, color .35s}
.nav[data-tone="dark"]{color:var(--paper); box-shadow:0 6px 24px rgba(0,0,0,.3), inset 0 0 0 1px rgba(247,244,236,.12)}
.logo{display:flex; align-items:center; gap:9px; text-decoration:none; font:800 1.08rem var(--display); letter-spacing:-.02em}
.logo svg{width:32px; height:32px}
.nav nav{display:flex; gap:2px}
.nav nav a{text-decoration:none; font-weight:700; font-size:.95rem; padding:7px 12px; border-radius:10px}
.nav nav a:hover{background:rgba(127,127,127,.18)}

/* sections + torn edges */
.sec{scroll-margin-top:80px; position:relative; padding:clamp(96px,11vw,150px) 0 clamp(84px,10vw,130px)}
.tear{position:absolute; left:0; right:0; top:-38px; height:40px; z-index:3; pointer-events:none; color:var(--bg)}
.tear svg{width:100%; height:100%; fill:currentColor}
.tear .tf{fill:#fff; opacity:.85}
.hero{--bg:var(--concrete); background:var(--concrete); min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding-top:120px}
.grid-bg{position:absolute; inset:0; background-image:linear-gradient(rgba(28,31,34,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(28,31,34,.06) 1px, transparent 1px);
  background-size:48px 48px; -webkit-mask:radial-gradient(80% 80% at 70% 40%, #000, transparent); mask:radial-gradient(80% 80% at 70% 40%, #000, transparent)}
.how,.wheels,.book{--bg:var(--asphalt); background:var(--asphalt); color:var(--paper)}
.how .kicker,.wheels .kicker,.book .kicker{color:var(--yellow)}
.how .fine,.wheels .fine,.book .fine{color:#C4C8CC}
.service{--bg:var(--yellow-soft); background:var(--yellow-soft)}
.service .kicker{color:#8E2C08}
.service .fine{color:#3D3A2E}
.wash{--bg:var(--aqua); background:var(--aqua)}
.wash .kicker{color:#0A5C60}
.packages{--bg:var(--paper); background:var(--paper)}
.foot{--bg:var(--yellow); background:var(--yellow); padding-bottom:90px}

/* the road (desktop, drawn by JS) */
#road{position:absolute; left:0; top:0; z-index:1; pointer-events:none; display:none; overflow:visible}
html.desk #road{display:block}
#rEdge{fill:none; stroke:#121416; stroke-width:134; stroke-linecap:round; stroke-linejoin:round; opacity:.35}
#rKerb{fill:none; stroke:#F7F4EC; stroke-width:124; stroke-linecap:round; stroke-linejoin:round}
#rAsph{fill:none; stroke:#2E3237; stroke-width:116; stroke-linecap:round; stroke-linejoin:round}
#rMid{fill:none; stroke:#FFC629; stroke-width:4; stroke-dasharray:20 18}
.solo-road .sr-a{fill:#2E3237}
.solo-road .sr-k{stroke:#F7F4EC; stroke-width:4}
.solo-road .sr-m{stroke:#FFC629; stroke-width:4; stroke-dasharray:20 18}
html.desk .solo-road{display:none}

/* hero */
.hero-copy > *{animation:rise .6s cubic-bezier(.2,.9,.3,1.2) both}
.hero-copy > :nth-child(2){animation-delay:.06s} .hero-copy > :nth-child(3){animation-delay:.14s}
.hero-copy > :nth-child(4){animation-delay:.22s} .hero-copy > :nth-child(5){animation-delay:.3s}
@keyframes rise{from{opacity:0; transform:translateY(24px)}}
.hero-art{position:relative; justify-self:center; width:min(36vw, 420px)}
.dock{position:relative; width:min(34vw, 420px); justify-self:center}
.hero-art .dock{width:100%}
.dock .art{width:100%; height:auto; aspect-ratio:1; overflow:visible}
html.fly .scar,html.fly .foam-static{visibility:hidden}
.dock-cap{position:absolute; left:0; right:0; bottom:-14px; text-align:center; margin:0; font:800 .78rem var(--body); letter-spacing:.14em; text-transform:uppercase; opacity:.75}
.scar.idle{animation:idle .18s linear infinite alternate}
@keyframes idle{to{transform:translate(var(--tx,0),1px)}}
.laser path{stroke:#FF3B3B; stroke-width:2.5; stroke-dasharray:6 5; opacity:.8}
.spark path{transform-box:fill-box; transform-origin:50% 50%; animation:tw 1.6s ease-in-out infinite}
.spark path:nth-child(2){animation-delay:.6s}
@keyframes tw{50%{transform:scale(.4) rotate(45deg); opacity:.4}}

/* the honk: the car "says" something on load (CSS only) */
.honk{position:absolute; right:-2%; top:4%; border:0; padding:0; background:none; cursor:pointer; z-index:3; color:var(--ink)}
.honk .bubble{display:block; font:800 clamp(14px,1.5vw,18px)/1.1 var(--display); background:#fff; padding:12px 16px 10px; border-radius:16px; white-space:nowrap;
  box-shadow:0 6px 0 rgba(28,31,34,.12), 0 14px 28px rgba(28,31,34,.14); transform-origin:20% 100%; animation:bub .55s cubic-bezier(.3,1.8,.5,1) .9s backwards}
.honk .bubble::after{content:""; position:absolute; left:22px; bottom:-13px; border:9px solid transparent; border-top:15px solid #fff; border-bottom:0; transform:skewX(18deg)}
.honk.again .bubble{animation:bub2 .5s cubic-bezier(.3,1.8,.5,1) backwards}
@keyframes bub{from{opacity:0; transform:scale(0) rotate(10deg)}}
@keyframes bub2{from{opacity:0; transform:scale(0) rotate(10deg)}}

/* lists */
.steps{list-style:none; padding:0; margin:1.6rem 0 0; display:grid; gap:10px; counter-reset:s}
.steps li{counter-increment:s; position:relative; padding:14px 16px 12px 60px; border-radius:16px; background:rgba(247,244,236,.06); box-shadow:inset 0 0 0 1.5px rgba(247,244,236,.14)}
.steps li::before{content:counter(s); position:absolute; left:16px; top:13px; width:30px; height:30px; border-radius:9px; background:var(--yellow); color:var(--ink); font:800 .95rem/30px var(--display); text-align:center}
.steps b,.facts b{display:block; font-weight:800}
.steps span{font-size:.96rem; color:#C9CDD1}
.stats{list-style:none; padding:0; margin:1.4rem 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.stats li{border-radius:16px; padding:14px; background:var(--yellow); color:var(--ink)}
.stats b{display:block; font:800 clamp(1.6rem,2.8vw,2.3rem)/1 var(--display)}
.stats span{font-size:.9rem; font-weight:700}
.checks{list-style:none; padding:0; margin:1.4rem 0 0; display:grid; grid-template-columns:1fr 1fr; gap:8px 16px}
.checks li{position:relative; padding:9px 12px 8px 40px; background:rgba(255,255,255,.55); border-radius:12px; font-weight:700; font-size:.97rem}
.checks li::before{content:""; position:absolute; left:12px; top:50%; width:18px; height:18px; margin-top:-9px; border-radius:6px; background:var(--asphalt)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5l3 3 7-7' fill='none' stroke='%23FFC629' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.facts{list-style:none; padding:0; margin:1.5rem 0 0; display:grid; gap:10px}
.facts li{padding:14px 16px 12px; border-radius:16px; background:rgba(247,244,236,.06); box-shadow:inset 0 0 0 1.5px rgba(247,244,236,.14)}
.facts span{font-size:.96rem; color:#C9CDD1}
.facts.light li{background:rgba(255,255,255,.6); box-shadow:none}
.facts.light span{color:var(--ink-soft)}

/* packages */
.carswitch{position:relative; display:inline-grid; grid-template-columns:repeat(3,1fr); background:#E6E1D4; border-radius:14px; padding:5px; margin-top:4px}
.carswitch button{position:relative; z-index:1; border:0; background:none; color:var(--ink); font:800 .96rem var(--body); padding:.6em 1.2em .55em; border-radius:10px; cursor:pointer; transition:color .3s}
.carswitch button[aria-pressed="true"]{color:#fff}
.carswitch .knob{position:absolute; top:5px; bottom:5px; left:5px; width:calc((100% - 10px) / 3); border-radius:10px; background:var(--asphalt); transition:transform .45s cubic-bezier(.5,1.5,.4,1)}
html[data-car="sedan"] .carswitch .knob{transform:translateX(100%)}
html[data-car="suv"] .carswitch .knob{transform:translateX(200%)}
.note{margin:10px 0 0; color:var(--ink-soft); font-size:.97rem}
.pkgs{list-style:none; padding:0; margin:1.6rem 0 0; display:grid; gap:14px}
.pkg{position:relative; display:flex; justify-content:space-between; align-items:center; gap:18px; padding:20px 22px; border-radius:var(--r); background:#fff;
  box-shadow:0 5px 0 rgba(28,31,34,.08), 0 14px 30px rgba(28,31,34,.08); transition:transform .25s ease-out}
.pkg.hot{box-shadow:0 0 0 3px var(--yellow), 0 5px 0 rgba(28,31,34,.08), 0 14px 30px rgba(28,31,34,.1)}
.pkg h3{font-size:1.3rem; margin-bottom:.25em}
.pkg p{margin:0; font-size:.96rem; color:var(--ink-soft)}
.pkg .price b{font:800 1.7rem/1 var(--display); color:var(--ink); white-space:nowrap}
.tag{position:absolute; right:18px; top:-12px; background:var(--yellow); color:var(--ink); font:800 .74rem var(--body); letter-spacing:.06em; text-transform:uppercase; padding:4px 10px 3px; border-radius:8px}

/* booking card */
.card{display:grid; gap:14px; margin-top:1.4rem; max-width:580px; background:var(--paper); color:var(--ink); padding:22px; border-radius:22px; box-shadow:0 8px 0 #000, 0 20px 40px rgba(0,0,0,.35)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.card label{display:grid; gap:6px; font-weight:800; font-size:.9rem}
.card input:not([type="radio"]),.card select{font:600 1rem var(--body); color:var(--ink); padding:11px 12px; border-radius:12px; border:1.5px solid #CFC9BA; background:#fff; width:100%; min-width:0}
.card input:focus,.card select:focus{border-color:var(--asphalt); outline:2px solid rgba(201,64,15,.3)}
.chips{border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px}
.chips legend{font-weight:800; font-size:.9rem; margin-bottom:6px; padding:0}
.chips label{display:block; cursor:pointer}
.chips input{position:absolute; opacity:0; width:1px; height:1px}
.chips span{display:block; padding:8px 14px 7px; border-radius:10px; background:#fff; box-shadow:inset 0 0 0 1.5px #CFC9BA; font-weight:800; font-size:.94rem; transition:background .2s, color .2s}
.chips input:checked + span{background:var(--asphalt); color:#fff; box-shadow:none}
.chips input:focus-visible + span{outline:3px solid var(--flame); outline-offset:2px}
.summary{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 14px; border-radius:14px; background:var(--yellow)}
.summary span{font-weight:700; font-size:.94rem}
.summary b{font:800 1.5rem/1 var(--display)}
.card .btn{justify-self:start}
.formmsg{margin:0; font-weight:700; color:var(--flame-deep); min-height:1.2em}

/* footer */
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(20px,4vw,56px); align-items:center}
.foot .display{font-size:clamp(1.7rem,3.4vw,2.7rem)}
.foot-meta{font-size:.98rem}
.copy{text-align:center; font-size:.88rem; opacity:.8; margin:48px 0 0; position:relative; z-index:2}
.badge{position:fixed; left:12px; bottom:12px; z-index:70; font:700 .8rem var(--body); text-decoration:none; color:#fff; background:rgba(28,31,34,.92); padding:7px 12px 5px; border-radius:999px}
.badge:hover{background:var(--flame)}

/* the travelling car */
#fly{display:none}
html.fly #fly{display:block; position:fixed; inset:0; pointer-events:none; z-index:30}
#carBox{position:absolute; left:0; top:0; width:200px; height:200px; transform-origin:0 0; will-change:transform}
#carBox svg{width:100%; height:100%; overflow:visible}

@media (max-width:860px){
  .nav nav{display:none}
  .two,.foot-grid{grid-template-columns:1fr}
  .hero{min-height:auto; padding-top:110px}
  .hero-art{width:min(74vw, 320px); margin:24px auto 0}
  .honk{right:auto; left:-4%; top:-6%}
  .dock{width:min(70vw, 300px); order:-1; margin-bottom:12px}
  .checks{grid-template-columns:1fr}
  .stats{gap:8px}
  .stats li{padding:10px}
  .pkg{flex-direction:column; align-items:flex-start; gap:10px}
  .row2{grid-template-columns:1fr}
  .card{padding:16px}
  .carswitch button{padding:.55em .8em .5em; font-size:.9rem}
}
@media (max-width:420px){
  .btn-small{font-size:.82rem; padding:.48em .8em .44em}
  .logo{font-size:.95rem}
  .logo svg{width:28px; height:28px}
}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none !important; transition:none !important} }
/* phone: keep the BAY 02 paint clear of the road strip */
@media (max-width:860px){#dBay .paint.big{font-size:44px; transform:translateX(26px)}}