/* ===========================================================
   63 MOTORS · shared stylesheet · Site by SH Studios
   Brand: red + charcoal · premium dark performance theme
   =========================================================== */
:root{
  --brand:#F2151B; --brand2:#FF4A4F; --brand-deep:#B00C12;
  --brand-soft:rgba(242,21,27,.14); --brand-rgb:242,21,27;
  --ink:#0a0c0f; --ink2:#101419; --ink3:#161b22; --card:#12161c;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.05);
  --txt:#eef1f4; --mut:#98a2ad; --mut2:#6c7782;
  --ok:#36d97c; --no:#ff4d4d;
  --br-green:#0aa44a; --br-yellow:#ffd200; --br-blue:#0a2a8a;
  --r:18px; --maxw:1200px;
  --s4:40px; --s5:64px; --s6:100px;
}
*{margin:0;padding:0;box-sizing:border-box}
/* iOS 26 Liquid Glass recipe: explicit background + color-scheme on html,
   never transparent, so the translucent status-bar/URL-pill strips sample
   a real colour instead of washing out white. */
html{scroll-behavior:smooth;background:var(--ink);color-scheme:dark}
body{background:var(--ink);color:var(--txt);font-family:'Inter',system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.skip-link{position:absolute;left:-999px;top:0;z-index:2000;background:var(--brand);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;font-weight:700;font-family:'Archivo',sans-serif}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--brand2);outline-offset:3px}
.eyebrow{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:.22em;text-transform:uppercase;font-size:.78rem;color:var(--brand2);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--brand);display:inline-block}
.eyebrow.center{justify-content:center}
h1,h2,h3{font-family:'Archivo',sans-serif;line-height:1.05;letter-spacing:-.01em}
.display{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:.01em}
section{position:relative}
.sec{padding:var(--s6) 0}
.sec-head{max-width:680px;margin-bottom:54px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(2rem,4.7vw,3.4rem);margin:18px 0 14px}
.sec-head p{color:var(--mut);font-size:1.08rem}

/* progress + brazil ribbon */
#progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--brand),var(--brand2));z-index:999;box-shadow:0 0 12px rgba(var(--brand-rgb),.6)}

/* ---------- NAV ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:200;transition:all .35s ease;padding:16px 0}
nav.scrolled{background:rgba(10,12,15,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:10px 0}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:11px}
.brand svg{height:38px;width:auto;display:block}
.nav-mid{display:flex;align-items:center;gap:28px}
.nav-mid a{font-size:.93rem;color:var(--mut);font-weight:500;transition:color .2s;position:relative}
.nav-mid a:hover,.nav-mid a.active{color:#fff}
.nav-mid a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--brand)}
.nav-right{display:flex;align-items:center;gap:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:.95rem;padding:13px 22px;border-radius:12px;cursor:pointer;transition:all .25s ease;border:none;font-family:'Inter',sans-serif;white-space:nowrap}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 8px 26px rgba(var(--brand-rgb),.34)}
.btn-primary:hover{background:var(--brand2);transform:translateY(-2px);box-shadow:0 12px 34px rgba(var(--brand-rgb),.46)}
.btn-ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid var(--line)}
.btn-ghost:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.btn-lg{font-size:1.05rem;padding:16px 30px}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
.burger span{width:24px;height:2px;background:#fff;transition:.3s;}

/* live open/closed pill */
.status{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;padding:7px 13px;border-radius:50px;border:1px solid var(--line);background:rgba(255,255,255,.04);white-space:nowrap}
.status .dot{width:8px;height:8px;border-radius:50%;background:var(--mut);transition:.3s;}
.status.open .dot{background:var(--ok);box-shadow:0 0 10px var(--ok);animation:pulse 2s infinite;}
.status.closed .dot{background:var(--no);box-shadow:0 0 8px rgba(255,77,77,.6)}
.status.open{color:#8df0b6}.status.closed{color:#ff9a9a}
@keyframes pulse{50%{opacity:.45}}

/* ---------- HERO ---------- */
.hero{min-height:100vh;display:flex;align-items:center;padding:130px 0 80px;position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.4;transform:scale(1.06);animation:kb 24s ease-in-out infinite alternate;}
@keyframes kb{to{transform:scale(1.17)}}
.hero-bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 90% at 80% 15%,rgba(var(--brand-rgb),.22),transparent 55%),
  linear-gradient(180deg,rgba(10,12,15,.5) 0%,rgba(10,12,15,.78) 55%,var(--ink) 100%),
  linear-gradient(90deg,var(--ink) 6%,rgba(10,12,15,.3) 62%,transparent 100%)}
.grain{position:absolute;inset:0;z-index:1;opacity:.5;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E")}
.hero-in{position:relative;z-index:2;max-width:830px}
.hero h1{font-size:clamp(2.7rem,7.4vw,5.6rem);margin:22px 0 6px}
.hero h1 .display{display:block}
.hero h1 em{font-style:normal;color:var(--brand2)}
.hero .lead{font-size:clamp(1.05rem,2.2vw,1.32rem);color:#d4dae1;max-width:610px;margin:18px 0 30px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.rating-chip{display:inline-flex;align-items:center;gap:11px;padding:9px 16px;border-radius:50px;background:rgba(255,255,255,.06);border:1px solid var(--line);backdrop-filter:blur(8px);font-size:.9rem}
.stars{color:var(--br-yellow);letter-spacing:2px;font-size:.95rem}
.rating-chip b{color:#fff}.rating-chip span{color:var(--mut)}
.hero-tags{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap}
.tag{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;color:#fff;padding:7px 15px;border:1px solid var(--line);border-radius:50px;background:rgba(255,255,255,.03)}
.tag i{color:var(--brand2);font-style:normal}
.scroll-cue{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:2;color:var(--mut2);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-cue span{width:1px;height:34px;background:linear-gradient(var(--brand),transparent);animation:cue 1.8s ease-in-out infinite;}
@keyframes cue{0%,100%{opacity:.2;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* page hero (inner pages) */
.phero{padding:160px 0 70px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.phero::before{content:"";position:absolute;top:-30%;right:-10%;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(var(--brand-rgb),.18),transparent 65%);z-index:0}
.phero-in{position:relative;z-index:2;max-width:760px}
.phero h1{font-size:clamp(2.4rem,6vw,4.2rem);margin:18px 0 14px}
.phero h1 em{font-style:normal;color:var(--brand2)}
.phero p{color:var(--mut);font-size:1.12rem;max-width:600px}
.crumb{font-size:.84rem;color:var(--mut2)}
.crumb a:hover{color:var(--brand2)}

/* ---------- STAT STRIP ---------- */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink2)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:30px 24px;text-align:center;border-right:1px solid var(--line2)}
.stat:last-child{border-right:none}
.stat .num{font-family:'Anton',sans-serif;font-size:clamp(2rem,4vw,2.9rem);color:#fff;line-height:1}
.stat .num em{font-style:normal;color:var(--brand2)}
.stat .lab{font-size:.82rem;color:var(--mut);margin-top:8px;letter-spacing:.03em}

/* ---------- SERVICES ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.svc-grid.cols3{grid-template-columns:repeat(3,1fr)}
.svc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 22px 24px;position:relative;overflow:hidden;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;}
.svc::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .35s ease;}
.svc:hover{transform:translateY(-5px);border-color:rgba(var(--brand-rgb),.5);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.svc:hover::before{transform:scaleX(1)}
.svc .no{font-family:'Anton',sans-serif;color:var(--ink3);font-size:2.6rem;position:absolute;top:14px;right:18px;line-height:1;transition:color .3s;}
.svc:hover .no{color:rgba(var(--brand-rgb),.32)}
.svc .ic{width:50px;height:50px;border-radius:13px;display:grid;place-items:center;background:var(--brand-soft);border:1px solid rgba(var(--brand-rgb),.25);margin-bottom:18px}
.svc .ic svg{width:25px;height:25px;stroke:var(--brand2)}
.svc h3{font-size:1.16rem;color:#fff;margin-bottom:7px;font-family:'Archivo',sans-serif;font-weight:800}
.svc p{font-size:.92rem;color:var(--mut)}
.svc .price{display:inline-block;margin-top:14px;font-size:.82rem;color:var(--brand2);font-weight:700;letter-spacing:.02em}

/* ---------- WHY / EDITORIAL ---------- */
.alt{background:var(--ink2);border-top:1px solid var(--line)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.split.rev{grid-template-columns:.95fr 1.05fr}
.media{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/5}
.media img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease;}
.media:hover img{transform:scale(1.05)}
.media .tab{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:9px;background:rgba(10,12,15,.74);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:50px;padding:8px 15px;font-size:.82rem;font-weight:600}
.copy h2{font-size:clamp(2rem,4.4vw,3rem);margin:16px 0 18px}
.copy h2 em{font-style:normal;color:var(--brand2)}
.copy .lead{color:#c7cdd4;font-size:1.06rem;margin-bottom:14px}
.copy p{color:var(--mut);margin-bottom:14px}
.points{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}
.pt{display:flex;gap:12px;align-items:flex-start}
.pt .tick{width:26px;height:26px;border-radius:8px;background:var(--brand-soft);border:1px solid rgba(var(--brand-rgb),.3);display:grid;place-items:center;flex:0 0 auto;margin-top:2px}
.pt .tick svg{width:14px;height:14px;stroke:var(--brand2)}
.pt b{display:block;color:#fff;font-size:.97rem;font-family:'Archivo',sans-serif}
.pt span{font-size:.85rem;color:var(--mut)}

/* ---------- GALLERY / IG ---------- */
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gal{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);cursor:pointer;aspect-ratio:1/1}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease;}
.gal:hover img{transform:scale(1.08)}
.gal::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(var(--brand-rgb),.22),rgba(10,12,15,.6));opacity:0;transition:opacity .3s;}
.gal:hover::after{opacity:1}
.gal .cap{position:absolute;left:14px;bottom:12px;z-index:2;font-size:.8rem;font-weight:600;color:#fff;opacity:0;transform:translateY(6px);transition:.3s;}
.gal:hover .cap{opacity:1;transform:translateY(0)}
.gal-tall{grid-row:span 2;aspect-ratio:auto}
.ig-embed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.ig-embed-grid .instagram-media{margin:0 auto!important;min-width:0!important;width:100%!important}
.ig-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}

/* ---------- REVIEWS ---------- */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* 2-up variant. Lives here, NOT as an inline style: an inline grid-template-columns
   beats every stylesheet rule including the mobile media query below, which is exactly
   how the reviews grid stayed 2-up at 320px and pushed the page 22-30px sideways. */
.rev-grid.cols2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:700px;margin-inline:auto}
.review{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;position:relative}
.review .q{font-family:'Anton',sans-serif;color:rgba(var(--brand-rgb),.22);font-size:3.4rem;line-height:.6;position:absolute;top:22px;right:24px}
.review .rs{color:var(--br-yellow);letter-spacing:2px;margin-bottom:14px}
.review p{color:#d6dbe1;font-size:.97rem;margin-bottom:18px}
.review .who{display:flex;align-items:center;gap:11px}
.review .av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-deep));display:grid;place-items:center;font-weight:800;color:#fff;font-size:.9rem}
.review .who b{color:#fff;font-size:.92rem;display:block}
.review .who span{color:var(--mut);font-size:.78rem}
.rev-foot{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:36px;color:var(--mut);font-size:.92rem;flex-wrap:wrap;text-align:center}
.rev-foot b{color:#fff}
.feat-rev{max-width:880px;margin:0 auto 46px;text-align:center;position:relative;padding:0 20px}
.feat-rev .fr{color:var(--br-yellow);letter-spacing:3px;font-size:1.15rem;margin-bottom:16px;display:block}
.feat-rev .fq{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(1.35rem,3.1vw,2.05rem);line-height:1.32;color:#fff;letter-spacing:-.01em;margin:0}
.feat-rev .fq b{color:var(--brand2)}
.feat-rev .fa{margin-top:18px;color:var(--mut);font-size:.95rem}
.feat-rev .fa b{color:#fff}
.gchip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:50px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:.9rem;color:var(--mut)}
.gchip svg{width:16px;height:16px;flex:0 0 auto}
.gchip b{color:#fff}.gchip .stars{font-size:.9rem}

/* ---------- VISIT / CONTACT ---------- */
.visit-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:24px;overflow:hidden}
.visit-info{padding:46px 40px;background:var(--card)}
.visit-info h2{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:14px}
.vrow{display:flex;gap:15px;padding:16px 0;border-top:1px solid var(--line2)}
.vrow:first-of-type{border-top:none}
.vrow .vic{width:40px;height:40px;border-radius:10px;background:var(--brand-soft);border:1px solid rgba(var(--brand-rgb),.25);display:grid;place-items:center;flex:0 0 auto}
.vrow .vic svg{width:19px;height:19px;stroke:var(--brand2)}
.vrow .vt b{display:block;color:#fff;font-size:.97rem;margin-bottom:2px}
.vrow .vt span,.vrow .vt a{color:var(--mut);font-size:.92rem}
.vrow .vt a:hover{color:var(--brand2)}
.hours-tbl{width:100%;border-collapse:collapse;margin-top:4px}
.hours-tbl td{padding:9px 0;border-top:1px solid var(--line2);font-size:.92rem;color:var(--mut)}
.hours-tbl td:first-child{color:#fff;font-weight:600}
.hours-tbl td:last-child{text-align:right}
.hours-tbl tr.today td{color:var(--brand2)}
.hours-tbl tr.today td:first-child{color:var(--brand2)}
.visit-map{min-height:430px;position:relative}
.visit-map iframe{width:100%;height:100%;border:0;filter:grayscale(.3) contrast(1.05) brightness(.85)}
.visit-cta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}

/* ---------- FAQ ---------- */
.faq-list{max-width:820px;margin:0 auto}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:'Archivo',sans-serif;font-weight:700;font-size:1.08rem;color:#fff}
.qa summary::-webkit-details-marker{display:none}
.qa .pm{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);display:grid;place-items:center;flex:0 0 auto;transition:.3s;font-size:1.2rem;color:var(--brand2)}
.qa[open] .pm{background:var(--brand);color:#fff;transform:rotate(45deg)}
.qa .ans{padding:0 0 22px;color:var(--mut);font-size:.97rem;max-width:680px}

/* ---------- CTA BAND ---------- */
.cta-band{background:linear-gradient(135deg,#1a0a03,var(--ink2) 60%);border-top:1px solid var(--line);position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;top:-40%;right:-5%;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(var(--brand-rgb),.24),transparent 65%)}
.cta-in{text-align:center;position:relative;z-index:2;max-width:680px;margin:0 auto}
.cta-in h2{font-size:clamp(2rem,5vw,3.4rem);margin:18px 0 14px}
.cta-in p{color:var(--mut);font-size:1.1rem;margin-bottom:30px}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- FOOTER ---------- */
footer{background:var(--ink);border-top:1px solid var(--line);padding:56px 0 28px}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;margin-bottom:34px}
.foot-brand{max-width:340px}
.foot-brand svg{height:38px;width:auto;margin-bottom:14px}
.foot-brand p{color:var(--mut);font-size:.92rem}
.foot-flag{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:.84rem;color:var(--mut);border:1px solid var(--line);border-radius:50px;padding:6px 13px}
.socials{display:flex;gap:12px;margin-top:18px}
.socials a{width:46px;height:46px;border-radius:13px;overflow:hidden;display:block;transition:transform .25s,box-shadow .25s;}
.socials a:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.45)}
.socials svg{width:100%;height:100%;display:block}
.foot-col h4{font-family:'Archivo',sans-serif;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut2);margin-bottom:16px}
.foot-col a,.foot-col p{display:block;color:var(--mut);font-size:.92rem;margin-bottom:10px}
.foot-col a:hover{color:#fff}
.foot-bottom{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--mut2);font-size:.84rem;align-items:center}
.foot-bottom a{color:var(--mut)}.foot-bottom a:hover{color:var(--brand2)}
.madeby b{color:#fff}

/* ---------- QUOTE ESTIMATOR ---------- */
.estimator{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:40px 38px;max-width:880px;margin:0 auto;position:relative;overflow:hidden}
.estimator::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand),var(--brand2))}
.est-step{margin-bottom:26px}
.est-label{font-family:'Archivo',sans-serif;font-weight:800;font-size:.95rem;color:#fff;margin-bottom:13px;display:flex;align-items:center;gap:10px}
.est-label .n{width:24px;height:24px;border-radius:7px;background:var(--brand-soft);border:1px solid rgba(var(--brand-rgb),.3);display:grid;place-items:center;font-family:'Anton',sans-serif;color:var(--brand2);font-size:.8rem}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:11px 18px;border:1px solid var(--line);border-radius:50px;cursor:pointer;font-size:.9rem;font-weight:600;color:var(--mut);background:var(--ink);transition:all .2s;user-select:none}
.chip:hover{border-color:rgba(var(--brand-rgb),.5);color:#fff}
.chip.sel{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 6px 18px rgba(var(--brand-rgb),.3)}
.est-result{margin-top:28px;border-top:1px solid var(--line);padding-top:26px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.est-price .lab{font-size:.8rem;color:var(--mut);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.est-price .val{font-family:'Anton',sans-serif;font-size:2.6rem;color:#fff;line-height:1.05}
.est-price .val em{font-style:normal;color:var(--brand2)}
.est-price .sub{font-size:.82rem;color:var(--mut2);margin-top:4px}
.est-cta{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- BOOKING FORM ---------- */
.book-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:start}
.form-card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:38px 36px;position:relative;overflow:hidden}
.form-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand),var(--brand2))}
.field{margin-bottom:18px}
.field label{display:block;font-size:.8rem;font-weight:700;color:#fff;margin-bottom:8px;font-family:'Archivo',sans-serif;letter-spacing:.02em}
.field label .req{color:var(--brand2)}
.field input,.field select,.field textarea{width:100%;background:var(--ink);border:1px solid var(--line);border-radius:12px;padding:13px 15px;color:#fff;font-family:'Inter',sans-serif;font-size:.96rem;transition:border-color .2s,box-shadow .2s;}
.field input::placeholder,.field textarea::placeholder{color:var(--mut2)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2398a2ad' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center}
.field textarea{min-height:92px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-note{font-size:.82rem;color:var(--mut2);margin-top:16px;text-align:center}
.form-success{display:none;text-align:center;padding:30px 10px}
.form-success.on{display:block}
.form-success .tickc{width:64px;height:64px;border-radius:50%;background:var(--brand-soft);border:1px solid rgba(var(--brand-rgb),.4);display:grid;place-items:center;margin:0 auto 18px}
.form-success .tickc svg{width:30px;height:30px;stroke:var(--brand2)}
.form-success h3{font-size:1.4rem;color:#fff;margin-bottom:8px}
.form-success p{color:var(--mut);margin-bottom:20px}
.book-side .panel{background:var(--ink2);border:1px solid var(--line);border-radius:20px;padding:30px 28px;margin-bottom:18px}
.book-side h3{font-family:'Archivo',sans-serif;font-size:1.15rem;color:#fff;margin-bottom:18px}
.bstep{display:flex;gap:14px;margin-bottom:18px}
.bstep:last-child{margin-bottom:0}
.bstep .bn{width:30px;height:30px;border-radius:9px;background:var(--brand-soft);border:1px solid rgba(var(--brand-rgb),.3);display:grid;place-items:center;flex:0 0 auto;font-family:'Anton',sans-serif;color:var(--brand2);font-size:.95rem}
.bstep b{display:block;color:#fff;font-size:.95rem;font-family:'Archivo',sans-serif}
.bstep span{font-size:.85rem;color:var(--mut)}
.book-side .status{margin-top:4px}

/* sticky mobile bar */
.mbar{position:fixed;bottom:0;left:0;right:0;z-index:300;display:none;gap:10px;padding:12px 14px;background:rgba(10,12,15,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.mbar a{flex:1;padding:14px}

/* reveal (no-JS safe: hidden only when html.has-js) */
.has-js [data-rev]{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);}
.has-js [data-rev].in{opacity:1;transform:none}
[data-d="1"]{transition-delay:.08s}[data-d="2"]{transition-delay:.16s}[data-d="3"]{transition-delay:.24s}[data-d="4"]{transition-delay:.32s}

/* lightbox */
#lb{position:fixed;inset:0;background:rgba(5,6,8,.94);z-index:1000;display:none;align-items:center;justify-content:center;padding:30px;cursor:zoom-out}
#lb.on{display:flex}
#lb img{max-width:92%;max-height:90%;border-radius:12px;border:1px solid var(--line)}

/* ---------- responsive ---------- */
.hero-status{display:none;margin-bottom:14px}
@media(max-width:920px){
  .nav-mid,.nav-right .btn-ghost,.nav-right .btn-primary,.nav-right .status{display:none}
  .hero .hero-status{display:inline-flex}
  .burger{display:flex}
  .nav-mid.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:rgba(10,12,15,.98);backdrop-filter:blur(14px);padding:22px 24px;gap:18px;border-bottom:1px solid var(--line)}
  .nav-mid.open a{font-size:1.05rem}
  .stats-grid{grid-template-columns:1fr 1fr}.stat{border-top:1px solid var(--line2)}
  .stat:nth-child(2n){border-right:none}.stat:nth-child(-n+2){border-top:none}
  .svc-grid,.svc-grid.cols3{grid-template-columns:1fr 1fr}
  .split,.split.rev{grid-template-columns:1fr;gap:36px}.media{aspect-ratio:4/3;max-height:440px}
  .gal-grid{grid-template-columns:1fr 1fr}.gal-tall{grid-row:auto;aspect-ratio:1/1}
  .ig-embed-grid{grid-template-columns:1fr 1fr}
  .rev-grid,.rev-grid.cols2{grid-template-columns:1fr}
  .visit-grid{grid-template-columns:1fr}.visit-map{min-height:320px}
  .book-grid{grid-template-columns:1fr;gap:32px}
  .foot-top{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}
  .mbar{display:flex}body{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
  .sec{padding:68px 0}

  /* iOS 26 Liquid Glass recipe: on phones the nav is a solid, fully opaque
     bar at all times (not just .scrolled) so nothing bleeds through into
     the notch / status-bar strip, padded clear of the notch, and extended
     upward with real border pixels because Safari ignores pseudo-elements
     in that strip. Mirrored on .mbar for the home-indicator zone below. */
  nav,nav.scrolled{
    background:#0a0c0f;backdrop-filter:none;-webkit-backdrop-filter:none;
    border-bottom:1px solid var(--line);
  }
  nav{
    padding-top:max(env(safe-area-inset-top),10px);
    padding-bottom:12px;
    border-top:150px solid #0a0c0f;
    margin-top:-150px;
  }
  .mbar{
    background:#0a0c0f;backdrop-filter:none;-webkit-backdrop-filter:none;
    padding:12px 14px calc(12px + env(safe-area-inset-bottom));
    border-bottom:200px solid #0a0c0f;
    margin-bottom:-200px;
  }

  /* Tap targets: EVERY control clears 44x44 on phones. Discrete controls get
     a real 44px box; links sitting in running prose (the @63_motors mention in
     .rev-foot and in about.html) keep their inline flow and instead grow the
     hit area with vertical padding, which overflows the line box rather than
     reflowing the paragraph, so the prose is untouched but the finger target
     clears 44px. */
  .brand{min-height:44px}
  .burger{width:44px;height:44px;padding:0;align-items:center;justify-content:center}
  .nav-mid.open{gap:4px;align-items:stretch}
  .nav-mid.open a{min-height:44px;display:flex;align-items:center}
  .foot-col a{min-height:44px;display:flex;align-items:center;padding:10px 0;margin-bottom:0}
  /* gap restores the word space that inline-flex collapses between the
     "Site by" text node and the <b>SH Studios</b> flex item. */
  .foot-bottom .madeby{min-height:44px;display:inline-flex;align-items:center;gap:.3em}
  .vrow .vt a{min-height:44px;display:inline-flex;align-items:center}
  .crumb a{min-height:44px;display:inline-flex;align-items:center;padding:0 6px;margin:0 -6px}

  /* Every call / email / WhatsApp action link clears 44px, wherever it lives.
     .btn is excluded because it is already a 44px+ button and re-declaring
     the display would fight its own layout. */
  a[href^="tel:"]:not(.btn),
  a[href^="mailto:"]:not(.btn),
  a[href*="wa.me"]:not(.btn){min-height:44px;display:inline-flex;align-items:center}

  /* Inline prose links: hit area only, no reflow. */
  .rev-foot a:not(.btn){min-height:44px;display:inline-flex;align-items:center;padding:0 5px;margin:0 -5px}
  p a:not(.btn):not([href^="tel:"]):not([href^="mailto:"]):not([href*="wa.me"]){padding:12px 5px;margin:0 -5px}

  /* 16px minimum on form controls, otherwise iOS Safari zooms the whole
     page in the moment a field takes focus and never zooms back out. */
  .field input,.field select,.field textarea{font-size:16px}
}
@media(max-width:560px){
  .svc-grid,.svc-grid.cols3,.ig-embed-grid{grid-template-columns:1fr}
  .points{grid-template-columns:1fr}
  .gal-grid{grid-template-columns:1fr 1fr}
  .hero{padding-top:120px}
  .visit-info{padding:34px 24px}
}
@media(max-width:390px){
  .wrap{padding:0 16px}
  .hero h1{font-size:clamp(2.3rem,9vw,3.2rem)}
  .sec-head h2{font-size:clamp(1.7rem,7vw,2.3rem)}
  .btn-lg{padding:14px 20px;font-size:1rem}
  .rating-chip{font-size:.82rem;padding:8px 13px}
  .cta-row{flex-direction:column;align-items:stretch}
  .visit-info{padding:26px 18px}
}

/* ---------- reduced motion (accessibility) ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto}
  .hero-bg img{animation:none;transform:none}
  .scroll-cue span,.status.open .dot{animation:none;}
  .has-js [data-rev]{opacity:1!important;transform:none!important;transition:none!important;}
}

/* ---- long links must never widen the page ----
   The footer email (63motors.uk@gmail.com) is one unbreakable 174px token. In the 2-up
   footer grid on a 320px phone that pushed the whole document 6px sideways. Letting it
   break mid-address is the correct behaviour for a phone; nothing else on the page wraps
   differently. */
.foot-col a[href^="mailto:"]{overflow-wrap:anywhere}