/* =====================================================================
   RESCUE TYRES — Redesign
   Bright • Energetic • Rescue
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Brand */
  --red:        #FF2E2E;
  --red-deep:   #E00B0B;
  --red-soft:   #FFE6E6;
  --blue:       #1652F0;
  --blue-deep:  #0B3BC4;
  --blue-soft:  #E5ECFF;
  --yellow:     #FFD400;

  /* Neutrals */
  --ink:        #0A0E1A;
  --ink-2:      #444C5E;
  --ink-3:      #8A92A6;
  --line:       #E9ECF2;
  --bg:         #FFFFFF;
  --bg-2:       #F5F7FB;
  --bg-3:       #EEF2F8;

  /* System */
  --radius:     22px;
  --radius-sm:  14px;
  --radius-lg:  34px;
  --radius-pill: 999px;
  --shadow-sm:  0 2px 10px rgba(10,14,26,.06);
  --shadow:     0 18px 50px -18px rgba(10,14,26,.22);
  --shadow-red: 0 18px 40px -12px rgba(255,46,46,.45);
  --shadow-blue:0 18px 40px -12px rgba(22,82,240,.45);

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 56px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --font: "Plus Jakarta Sans", "Jakarta Fallback", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html { scroll-behavior: auto; } }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg,video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input,select,textarea { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }

::selection { background: var(--red); color: #fff; }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(72px, 10vw, 140px); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 84px); }
.bg-soft { background: var(--bg-2); }
.bg-ink { background: var(--ink); color: #fff; }

/* ---------- Typography ---------- */
.display {
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.03em;
  font-size: clamp(2.7rem, 8vw, 6.4rem);
}
h1,h2,h3,h4 { font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
h2.section-title { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--red);
}
.eyebrow::before { content:""; width: 26px; height: 2px; background: var(--red); border-radius: 2px; }
.eyebrow.blue { color: var(--blue); }
.eyebrow.blue::before { background: var(--blue); }
.eyebrow.light { color: #fff; }
.eyebrow.light::before { background: var(--yellow); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--ink-2); max-width: 56ch; }
.text-muted { color: var(--ink-3); }
.hl { color: var(--red); }
.hl-blue { color: var(--blue); }
.underline-swish { position: relative; white-space: nowrap; }
.underline-swish::after {
  content:""; position:absolute; left:-2%; right:-2%; bottom:.05em; height:.34em;
  background: var(--yellow); z-index:-1; border-radius: 4px; transform: rotate(-1.2deg);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  font-weight: 800; letter-spacing: -.01em; font-size: 1rem;
  padding: .95em 1.6em; border-radius: var(--radius-pill);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  will-change: transform; white-space: nowrap;
}
.btn svg { width: 1.1em; height: 1.1em; }
.btn--red { background: var(--red); color: #fff; box-shadow: var(--shadow-red); }
.btn--red:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -12px rgba(255,46,46,.6); }
.btn--blue { background: var(--blue); color: #fff; box-shadow: var(--shadow-blue); }
.btn--blue:hover { transform: translateY(-3px); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.btn--ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
.btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--ink); transform: translateY(-3px); }
.btn--wa { background: #1f8a4c; color: #fff; box-shadow: 0 18px 44px -16px rgba(31,138,76,.7); }
.btn--wa:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -12px rgba(31,138,76,.6); }
.btn--lg { font-size: 1.08rem; padding: 1.1em 1.9em; }
.btn .arrow { transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding-block: 16px;
  transition: background .35s var(--ease), box-shadow .35s, padding .35s;
}
.site-header.scrolled {
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 1px 0 var(--line), 0 10px 30px -20px rgba(10,14,26,.3);
  padding-block: 10px;
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: -.02em; font-size: 1.15rem; }
.brand img { width: 42px; height: 42px; object-fit: contain; }
.brand--logo img { width: auto; height: 52px; border-radius: 12px; }
.site-header.scrolled .brand--logo img { height: 44px; transition: height .35s var(--ease); }
.site-footer .brand--logo img { height: 60px; border-radius: 14px; }
.brand .brand-sub { display:block; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--red); font-weight: 800; line-height:1; margin-top:3px;}
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a {
  padding: .55em .95em; border-radius: var(--radius-pill); font-weight: 700; font-size: .96rem;
  color: var(--ink-2); transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--ink); background: var(--bg-3); }
.nav-links a.active { color: var(--ink); }
.nav-links a.active::after { content:""; display:block; height:3px; width:18px; margin:3px auto 0; background:var(--red); border-radius:3px; }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--ink); }
.nav-phone .dot { width: 9px; height: 9px; border-radius: 50%; background: #18C964; box-shadow: 0 0 0 4px rgba(24,201,100,.18); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(24,201,100,0); } }

.burger { display: none; width: 46px; height: 46px; border-radius: 14px; background: var(--ink); position: relative; }
.burger span { position:absolute; left:13px; right:13px; height:2.5px; background:#fff; border-radius:3px; transition: .3s var(--ease); }
.burger span:nth-child(1){ top:16px; } .burger span:nth-child(2){ top:22px; } .burger span:nth-child(3){ top:28px; }
body.menu-open .burger span:nth-child(1){ top:22px; transform: rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ top:22px; transform: rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 99; background: var(--ink); color:#fff;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: var(--gutter); transform: translateY(-100%); transition: transform .5s var(--ease-out);
}
body.menu-open .mobile-menu { transform: translateY(0); }
.mobile-menu a { font-size: clamp(2rem,9vw,3.2rem); font-weight: 800; letter-spacing: -.02em; padding: .1em 0; opacity:.9; }
.mobile-menu a:hover { color: var(--yellow); }
.mobile-menu .mm-foot { margin-top: 30px; display:flex; flex-direction:column; gap:14px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: clamp(130px, 18vh, 200px); padding-bottom: clamp(60px,8vw,110px); overflow: hidden; }
.hero-bg { position:absolute; inset:0; z-index:-2; background:
   radial-gradient(60% 60% at 85% 10%, var(--blue-soft) 0%, transparent 60%),
   radial-gradient(50% 50% at 8% 90%, var(--red-soft) 0%, transparent 55%),
   var(--bg); }

/* Homepage hero: photographic backdrop with white overlay for legibility */
.hero .hero-bg {
  background-image:
    linear-gradient(100deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.88) 42%, rgba(255,255,255,.5) 70%, rgba(255,255,255,.28) 100%),
    radial-gradient(60% 60% at 85% 10%, var(--blue-soft) 0%, transparent 60%),
    radial-gradient(50% 50% at 8% 90%, var(--red-soft) 0%, transparent 55%),
    url("../assets/img/hero.webp?v=7");
  background-size: cover, auto, auto, cover;
  background-position: center, center, center, center right;
  background-repeat: no-repeat;
  background-color: var(--bg);
}
@media (max-width: 980px){
  .hero .hero-bg {
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.9) 100%),
      url("../assets/img/hero.webp?v=7");
    background-size: cover, cover;
    background-position: center, center;
  }
}
.speedlines { position:absolute; inset:0; z-index:-1; opacity:.5; overflow:hidden; }
.speedlines i { position:absolute; height:2px; border-radius:2px; background: linear-gradient(90deg, transparent, var(--ink-3)); opacity:.18; animation: zoom 3.4s linear infinite; }
@keyframes zoom { from { transform: translateX(-30vw) scaleX(.4);} to { transform: translateX(120vw) scaleX(1);} }

.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px,4vw,60px); align-items: center; }
.hero h1 { font-size: clamp(2.8rem, 7.4vw, 6rem); font-weight: 800; line-height: .96; letter-spacing: -.035em; }
.hero .lead { margin-top: 1.4rem; }
.hero-cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 14px; align-items:center; }
.hero-trust { margin-top: 2.2rem; display:flex; align-items:center; gap: 18px; flex-wrap: wrap; }
.stars { color: var(--yellow); letter-spacing: 2px; font-size: 1.1rem; -webkit-text-stroke: .5px var(--yellow); }
.hero-trust b { font-weight: 800; }

.hero-card-stack { position: relative; }
.hero-photo {
  border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow);
  aspect-ratio: 3/2.05; background: var(--bg-3) center/cover;
  position: relative;
}
.hero-photo img { width:100%; height:100%; object-fit: cover; }
.float-badge {
  position:absolute; background:#fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px 18px; display:flex; align-items:center; gap:12px; font-weight:800;
}
.float-badge .ico { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:1.3rem; }
.float-badge small { display:block; font-weight:700; color:var(--ink-3); font-size:.72rem; letter-spacing:.04em; }
.badge-1 { top: 6%; left: -6%; animation: floaty 5s var(--ease) infinite; }
.badge-2 { bottom: 8%; right: -7%; animation: floaty 5s var(--ease) .8s infinite; }
.badge-3 { bottom: 40%; left: -10%; animation: floaty 6s var(--ease) .4s infinite; }
@keyframes floaty { 50% { transform: translateY(-12px); } }

/* ---------- Marquee ---------- */
.marquee { background: var(--ink); color:#fff; padding-block: 18px; overflow: hidden; }
.marquee.red { background: var(--red); }
.marquee-track { display:flex; gap: 50px; width: max-content; animation: marq 26s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { display:inline-flex; align-items:center; gap: 16px; font-weight:800; font-size: 1.15rem; letter-spacing:-.01em; white-space:nowrap; }
.marquee-track span::after { content:"★"; color: var(--yellow); }
@keyframes marq { to { transform: translateX(-50%); } }

/* ---------- Service cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.card {
  position: relative; background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: 30px; overflow:hidden; transition: transform .4s var(--ease), box-shadow .4s, border-color .4s;
}
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow); border-color: transparent; }
.card .card-ico { width:60px; height:60px; border-radius:18px; display:grid; place-items:center; font-size:1.7rem; margin-bottom:18px; background: var(--red-soft); transition: transform .4s var(--ease); }
.card:hover .card-ico { transform: rotate(-8deg) scale(1.06); }
.card:nth-child(3n+2) .card-ico { background: var(--blue-soft); }
.card:nth-child(3n) .card-ico { background: #FFF6CC; }
.card h3 { font-size: 1.3rem; margin-bottom: 8px; }
.card p { color: var(--ink-2); font-size: .98rem; }
.card .card-link { margin-top:16px; display:inline-flex; align-items:center; gap:8px; font-weight:800; color:var(--red); }
.card .glow { position:absolute; inset:auto -40% -60% auto; width:60%; aspect-ratio:1; background: radial-gradient(circle, var(--red-soft), transparent 70%); opacity:0; transition: opacity .4s; }
.card:hover .glow { opacity:1; }

/* ---------- Steps / How it works ---------- */
.steps { display:grid; grid-template-columns: repeat(4,1fr); gap: 18px; counter-reset: step; }
.step { background:#fff; border-radius: var(--radius); padding: 28px 24px; border:1px solid var(--line); position:relative; }
.step::before {
  counter-increment: step; content: counter(step,decimal-leading-zero);
  font-weight:800; font-size: 2.4rem; letter-spacing:-.04em; color: var(--red); opacity:.18; line-height:1; display:block; margin-bottom:14px;
}
.step h3 { font-size: 1.12rem; margin-bottom:6px; }
.step p { font-size: .92rem; color: var(--ink-2); }
.step .step-arrow { position:absolute; top:36px; right:-22px; color:var(--ink-3); font-size:1.4rem; z-index:2; }
.steps .step:last-child .step-arrow { display:none; }

/* ---------- Stats ---------- */
.stats { display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; text-align:center; }
.stat .num { font-size: clamp(2.4rem,5vw,3.6rem); font-weight:800; letter-spacing:-.03em; line-height:1; }
.stat .num .suf { color: var(--red); }
.stat p { color: var(--ink-3); font-weight:700; margin-top:8px; letter-spacing:.02em; }
.bg-ink .stat p { color: rgba(255,255,255,.6); }

/* ---------- Split feature ---------- */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,70px); align-items:center; }
.split-media { border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow); aspect-ratio: 5/4; background: var(--bg-3); position:relative; }
.split-media img { width:100%; height:100%; object-fit: cover; }
.feature-list { display:grid; gap: 14px; margin-top: 24px; }
.feature-list li { display:flex; gap:14px; align-items:flex-start; font-weight:600; }
.feature-list .tick { flex:none; width:28px; height:28px; border-radius:50%; background:var(--red); color:#fff; display:grid; place-items:center; font-size:.8rem; margin-top:2px; }

/* ---------- Coverage ---------- */
.coverage-grid { display:flex; flex-wrap:wrap; gap: 12px; margin-top:24px; }
.chip { background:#fff; border:1px solid var(--line); border-radius: var(--radius-pill); padding:.6em 1.2em; font-weight:700; transition:.3s var(--ease); }
.chip:hover { background:var(--ink); color:#fff; transform:translateY(-3px); }

/* ---------- Testimonials ---------- */
.tcards { display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.tcard { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.tcard .stars { font-size:1rem; margin-bottom:14px; }
.tcard p { color: var(--ink); font-size:1.04rem; font-weight:500; }
.tcard .who { margin-top:18px; display:flex; align-items:center; gap:12px; }
.tcard .ava { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-weight:800; color:#fff; background: var(--blue); }
.tcard .who b { display:block; } .tcard .who small { color:var(--ink-3); }

/* ---------- CTA band ---------- */
.cta-band { position:relative; overflow:hidden; border-radius: var(--radius-lg); padding: clamp(40px,6vw,72px); background: linear-gradient(120deg, var(--red), var(--red-deep)); color:#fff; box-shadow: var(--shadow-red); }
.cta-band::after { content:""; position:absolute; inset:auto -10% -60% auto; width:55%; aspect-ratio:1; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); }
.cta-band h2 { font-size: clamp(2rem,4.5vw,3.4rem); }
.cta-band .lead { color: rgba(255,255,255,.9); max-width: 50ch; }
.cta-band .hero-cta .btn--red { background:#fff; color:var(--red); box-shadow: 0 16px 40px -12px rgba(0,0,0,.4); }
.cta-band .btn--ghost { background: transparent; color:#fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }
.cta-band .btn--ghost:hover { background:#fff; color:var(--red); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #fff; padding-block: clamp(56px,7vw,90px) 30px; }
.foot-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }
.site-footer .brand { color:#fff; }
.site-footer p { color: rgba(255,255,255,.6); margin-top:14px; max-width: 34ch; }
.foot-col h4 { font-size: .82rem; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-3); margin-bottom:16px; }
.foot-col a { display:block; color: rgba(255,255,255,.78); padding:6px 0; transition:.2s; }
.foot-col a:hover { color: var(--yellow); transform: translateX(4px); }
.socials { display:flex; gap:10px; margin-top:18px; }
.socials a { width:42px; height:42px; border-radius:12px; background: rgba(255,255,255,.08); display:grid; place-items:center; transition:.3s var(--ease); }
.socials a svg { width:18px; height:18px; }
.socials a:hover { background: var(--red); transform: translateY(-3px); }
.foot-bottom { margin-top: 50px; padding-top: 24px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color: rgba(255,255,255,.5); font-size:.9rem; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding-top: clamp(130px,18vh,190px); padding-bottom: clamp(40px,6vw,70px); position:relative; overflow:hidden; }
.page-hero .hero-bg { position:absolute; }
.page-hero h1 { font-size: clamp(2.6rem,6.5vw,5rem); }
.breadcrumb { display:flex; gap:8px; color:var(--ink-3); font-weight:700; font-size:.9rem; margin-bottom:18px; }
.breadcrumb a:hover { color:var(--red); }

/* ---------- Accordion (services detail) ---------- */
.svc-row { display:grid; grid-template-columns: 64px 1fr auto; gap: 22px; align-items:center; padding: 26px 6px; border-top:1px solid var(--line); cursor:pointer; transition: padding .3s; }
.svc-row:hover { padding-inline: 14px; }
.svc-row .svc-ico { width:64px; height:64px; border-radius:18px; background:var(--red-soft); display:grid; place-items:center; font-size:1.6rem; }
.svc-row:nth-child(even) .svc-ico { background:var(--blue-soft); }
.svc-row h3 { font-size: clamp(1.3rem,2.4vw,1.9rem); }
.svc-row .svc-toggle { width:46px; height:46px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; font-size:1.4rem; transition:.3s var(--ease); flex:none; }
.svc-item.open .svc-toggle { background:var(--red); color:#fff; border-color:var(--red); transform: rotate(45deg); }
.svc-body { max-height:0; overflow:hidden; transition: max-height .45s var(--ease); }
.svc-body-inner { padding: 0 6px 30px 86px; color: var(--ink-2); max-width: 70ch; }
.svc-body-inner .feature-list { margin-top:16px; }

/* ---------- Booking flow ---------- */
.booking { max-width: 720px; margin-inline:auto; }
.progress { display:flex; gap:10px; margin-bottom: 34px; }
.progress .pstep { flex:1; height:6px; border-radius:6px; background: var(--bg-3); overflow:hidden; position:relative; }
.progress .pstep::after { content:""; position:absolute; inset:0; width:0; background: var(--red); transition: width .5s var(--ease); }
.progress .pstep.done::after { width:100%; }
.progress .pstep.active::after { width:55%; }
.book-card { background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px,4vw,46px); box-shadow: var(--shadow-sm); }
.book-step { display:none; animation: fadeUp .5s var(--ease) both; }
.book-step.active { display:block; }
.book-step h2 { font-size: clamp(1.6rem,3.4vw,2.3rem); margin-bottom:6px; }
.book-step > p.sub { color: var(--ink-2); margin-bottom: 26px; }
.field { margin-bottom: 18px; }
.field label { display:block; font-weight:800; margin-bottom:8px; font-size:.95rem; }
.field input, .field select, .field textarea {
  width:100%; padding: .95em 1.1em; border-radius: var(--radius-sm); border:2px solid var(--line);
  background: var(--bg-2); transition: border-color .25s, background .25s; font-weight:600;
}
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color: var(--blue); background:#fff; }
.size-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:12px; }
.size-grid .field { margin:0; }
.choice-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.choice {
  border:2px solid var(--line); border-radius: var(--radius); padding: 26px; cursor:pointer; transition:.3s var(--ease); background:#fff; position:relative;
}
.choice:hover { border-color: var(--ink-3); transform: translateY(-4px); }
.choice.selected { border-color: var(--red); box-shadow: var(--shadow-red); }
.choice .badge { font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--red); }
.choice.blue.selected { border-color: var(--blue); box-shadow: var(--shadow-blue); }
.choice h3 { font-size:1.4rem; margin:8px 0; }
.choice p { color:var(--ink-2); font-size:.92rem; }
.choice .price { font-weight:800; font-size:1.1rem; margin-top:12px; }
.brand-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:12px; }
.brand-opt { border:2px solid var(--line); border-radius: var(--radius-sm); padding: 16px; text-align:center; font-weight:800; cursor:pointer; transition:.25s var(--ease); background:#fff; }
.brand-opt:hover { border-color: var(--ink-3); transform:translateY(-3px); }
.brand-opt.selected { border-color: var(--red); background: var(--red-soft); }
.book-nav { display:flex; justify-content:space-between; gap:14px; margin-top:30px; }
.deposit-note { background: var(--blue-soft); border-radius: var(--radius); padding: 18px 22px; display:flex; gap:14px; align-items:center; font-weight:700; margin: 8px 0 22px; }
.deposit-note .ico { font-size:1.6rem; }
.summary { background: var(--bg-2); border-radius: var(--radius); padding: 22px; margin-bottom: 22px; }
.summary .row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed var(--line); }
.summary .row:last-child { border:none; }
.summary .row b { font-weight:800; }
.book-success { text-align:center; padding: 30px 10px; }
.book-success .check { width:90px; height:90px; border-radius:50%; background:var(--red); color:#fff; display:grid; place-items:center; font-size:2.6rem; margin: 0 auto 24px; animation: pop .6s var(--ease-out) both; box-shadow: var(--shadow-red); }
@keyframes pop { 0%{ transform: scale(0);} 60%{ transform: scale(1.15);} 100%{ transform: scale(1);} }

/* ---------- Reveal animation ---------- */
.reveal { opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.in { opacity:1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce){
  .reveal { opacity:1; transform:none; transition:none; }
  .speedlines, .badge-1,.badge-2,.badge-3, .marquee-track { animation: none !important; }
}
@keyframes fadeUp { from { opacity:0; transform: translateY(16px);} to { opacity:1; transform:none;} }

/* ---------- Section heads ---------- */
.sec-head { max-width: 60ch; margin-bottom: clamp(34px,4vw,56px); }
.sec-head.center { margin-inline:auto; text-align:center; }
.sec-head .lead { margin-top: 14px; }
.sec-head.center .lead { margin-inline:auto; }
.split-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom: clamp(34px,4vw,56px); }

/* ---------- Floating WhatsApp ---------- */
.fab { position: fixed; right: 22px; bottom: 22px; z-index: 80; display:flex; align-items:center; gap:10px;
  background:#25D366; color:#fff; padding:.85em 1.3em; border-radius: var(--radius-pill); font-weight:800;
  box-shadow: 0 14px 34px -10px rgba(37,211,102,.7); transition: transform .3s var(--ease); }
.fab:hover { transform: translateY(-4px) scale(1.03); }
.fab svg { width:22px; height:22px; }
.fab .fab-label { white-space:nowrap; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero-grid { grid-template-columns: 1fr; }
  .hero-card-stack { order:-1; max-width: 460px; }
  .cards, .tcards { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step .step-arrow { display:none; }
  .stats { grid-template-columns: 1fr 1fr; gap: 30px; }
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-media { order:-1; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .nav-links, .nav-phone { display: none; }
  .burger { display:block; }
}
@media (max-width: 600px){
  .cards, .tcards, .brand-grid, .size-grid { grid-template-columns: 1fr; }
  .choice-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .float-badge { transform: scale(.85); }
  .badge-1{ left:0; } .badge-2{ right:0; } .badge-3{ display:none; }
  .fab .fab-label { display:none; }
  .fab { padding: .9em; }
  .book-nav { flex-direction: column-reverse; }
  .book-nav .btn { width:100%; justify-content:center; }
  /* mobile fixes: stop horizontal overflow + crowding */
  .nav-cta .btn { display: none; }
  .hero-card-stack { max-width: 100%; }
  .hero h1 { font-size: clamp(2.05rem, 8.4vw, 6rem); }
  .page-hero h1 { font-size: clamp(2.1rem, 8.6vw, 7rem); }
  .section-title { font-size: clamp(1.7rem, 7vw, 4.4rem); }
}

/* ---------- FAQ accordion ---------- */
.faq { max-width: 860px; margin-inline: auto; display: grid; gap: 14px; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.faq details[open] { border-color: transparent; box-shadow: var(--shadow); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 26px; font-weight: 800; font-size: 1.05rem; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 800; font-size: 1.5rem; line-height: 1; color: var(--red); transition: transform .3s var(--ease); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-a { padding: 0 26px 24px; color: var(--ink-2); max-width: 70ch; }

/* ---------- Footer legal bar ---------- */
.foot-legal {
  margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; align-items: center; gap: 16px 28px;
  flex-wrap: wrap; color: rgba(255,255,255,.5); font-size: .85rem;
}
.foot-legal + .foot-bottom { margin-top: 18px; padding-top: 18px; }
.foot-legal-links { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-legal-links a { color: rgba(255,255,255,.7); transition: color .2s; }
.foot-legal-links a:hover { color: var(--yellow); }

/* ---------- Legal / long-form content pages ---------- */
.legal { max-width: 820px; margin-inline: auto; }
.legal h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 40px 0 12px; }
.legal h3 { font-size: 1.15rem; margin: 26px 0 8px; }
.legal p, .legal li { color: var(--ink-2); margin-bottom: 14px; line-height: 1.7; }
.legal ul { list-style: disc; padding-left: 22px; margin-bottom: 14px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--red); font-weight: 700; }
.legal a:hover { text-decoration: underline; }
.legal .updated { color: var(--ink-3); font-weight: 700; font-size: .9rem; margin-bottom: 8px; }
.legal .legal-note { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; margin: 24px 0; font-size: .95rem; }

/* ---------- Cookie consent banner ---------- */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90;
  max-width: 560px; margin-inline: auto; background: var(--ink); color: #fff;
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px 22px; display: none;
}
.cookie-banner.show { display: block; animation: fadeUp .5s var(--ease-out) both; }
.cookie-banner p { color: rgba(255,255,255,.82); font-size: .92rem; margin-bottom: 14px; }
.cookie-banner a { color: var(--yellow); font-weight: 700; }
.cookie-banner .cb-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-banner .btn { padding: .7em 1.3em; font-size: .92rem; }
.cookie-banner .btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.4); }
.cookie-banner .btn--ghost:hover { box-shadow: inset 0 0 0 2px #fff; }
@media (max-width: 600px){ .cookie-banner { left: 10px; right: 10px; bottom: 10px; } }

/* ---------- Map embed ---------- */
.map-embed { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); line-height: 0; }
.map-embed iframe { width: 100%; height: 440px; border: 0; display: block; }
@media (max-width: 600px){ .map-embed iframe { height: 320px; } }

/* ---------- Bigger side hero image (homepage, desktop) ---------- */
@media (min-width: 981px){
  .hero-grid { grid-template-columns: 1fr 1.15fr; align-items: stretch; }
  .hero-card-stack { display: flex; align-items: stretch; }
  .hero-photo { aspect-ratio: auto; flex: 1; min-height: 540px; }
}

/* ---------- Hero lead-capture form (homepage) ---------- */
.hero-form-wrap { position: relative; }
.hero-form {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(26px, 3vw, 40px); box-shadow: var(--shadow);
}
.hero-form h2 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); letter-spacing: -.02em; }
.hero-form .sub { color: var(--ink-2); margin: 8px 0 22px; font-size: 1rem; line-height: 1.5; }
.hf-field { margin-bottom: 16px; }
.hf-field label {
  display: block; font-weight: 800; font-size: .76rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px;
}
.hf-field input, .hf-field textarea {
  width: 100%; padding: .9em 1.05em; border-radius: var(--radius-sm);
  border: 2px solid var(--line); background: var(--bg-2); font-weight: 600;
  transition: border-color .25s, background .25s;
}
.hf-field textarea { resize: vertical; min-height: 96px; }
.hf-field input:focus, .hf-field textarea:focus { outline: none; border-color: var(--blue); background: #fff; }
.hero-form .btn--red { width: 100%; justify-content: center; margin-top: 6px; }
.hero-form .reassure { text-align: center; color: var(--ink-3); font-size: .85rem; margin-top: 14px; }
.hero-form .book-success { padding: 24px 8px; }
.hero-form .book-success .check { width: 72px; height: 72px; font-size: 2rem; margin-bottom: 18px; }

@media (min-width: 981px){
  .hero-form-wrap { display: flex; align-items: center; }
  .hero-form { width: 100%; }
}
@media (max-width: 980px){
  .hero-form-wrap { max-width: 520px; margin-top: 8px; }
}

/* ---------- Clickable service cards ---------- */
a.card { display: block; color: inherit; }
.card .card-arrow { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--red); }
.card:hover .card-arrow { gap: 12px; }


/* --- SEO/perf pass (2026-07) --- */
/* Hero content must paint immediately (LCP) — no reveal animation above the fold */
.hero .reveal,.page-hero .reveal{opacity:1;transform:none}
/* Metric-matched fallback font minimises CLS while Plus Jakarta Sans loads */
@font-face{font-family:"Jakarta Fallback";src:local("Arial"),local("Helvetica Neue");ascent-override:94%;descent-override:23.5%;line-gap-override:0%;size-adjust:105.5%}
/* Larger nav tap targets (accessibility) */
.nav-links a{padding-top:.7em;padding-bottom:.7em}


/* --- a11y pass (2026-07) --- */
/* Remove off-screen mobile menu from tab order when closed */
.mobile-menu{visibility:hidden;transition:transform .4s var(--ease,ease),visibility .4s}
body.menu-open .mobile-menu{visibility:visible}
/* Visible keyboard focus on form fields */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,.hf-field:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* Respect reduced-motion for remaining animations */
@media (prefers-reduced-motion: reduce){.marquee-track,.nav-cta{animation:none!important}*{scroll-behavior:auto!important}}


/* --- WCAG AA contrast + skip link (2026-07) --- */
.btn--red{background:#E00B0B}
.eyebrow:not(.blue):not(.light),.card-link,.card-arrow,a.text-link{color:#C00A0A}
.text-muted,.stat p,.breadcrumb,.reassure{color:#6B7280}
.fab{background:#0B7357}
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:#0A0E1A;color:#fff;padding:12px 18px;font-weight:700;border-radius:0 0 10px 0}
.skip-link:focus{left:0}

/* Persistent call action on mobile. .nav-phone is hidden below 980px and
   .nav-cta .btn below 600px, so without this the only fixed action once the
   user scrolls past the hero is the WhatsApp bubble - wrong priority for
   emergency roadside intent. */
.fab-call{position:fixed;left:22px;bottom:22px;z-index:80;display:none;align-items:center;gap:10px;
  background:var(--red-deep,#E00B0B);color:#fff;font-weight:800;padding:.9em 1.15em;border-radius:999px;
  box-shadow:0 10px 30px -8px rgba(224,11,11,.6);text-decoration:none}
.fab-call svg{width:20px;height:20px;flex:none;fill:currentColor}
@media(max-width:980px){.fab-call{display:flex}}
@media(max-width:600px){.fab-call{left:10px;bottom:10px;padding:.9em}.fab-call .fab-call-label{display:none}}

/* The two fixed FABs occupy a ~64px band across the bottom of every screen, and
   on short viewports the hero's own CTA buttons land inside that band, so the
   FAB paints on top of them (measured at 320x568, 360x640, and on some
   templates 375x667).
   Reserving space with margin-bottom on .hero-cta did NOT work and was removed:
   the FABs are position:fixed, so they are anchored to the viewport and nothing
   in document flow can push them away. Instead js/main.js sets body.past-hero
   once the user scrolls clear of the hero, and the call FAB only appears then -
   which is also when it stops being a duplicate of the hero's own call button.
   If JS does not run, body.past-hero is never set, so the :not() below keeps the
   FAB visible: fail OPEN, because a reachable phone number beats a tidy hero. */
@media (max-width: 640px){
  .site-footer { padding-bottom: 5.5rem; }
}
@media (max-width: 980px){
  html.js body:not(.past-hero) .fab-call { display: none; }
}

/* .breadcrumb is display:flex with no wrap, inside .page-hero{overflow:hidden}.
   At 320px the final crumb - the TOWN NAME, i.e. the one element confirming the
   searcher is on the right local page - was silently clipped off-screen rather
   than wrapping. */
.breadcrumb { flex-wrap: wrap; row-gap: 4px; }

/* /locations builds a 3,671-element DOM from 12 .loc-grid blocks listing ~2,470
   town links. Lighthouse measured 726ms of Style & Layout there and a 1,143ms
   LCP render delay - the browser lays out the whole link grid before it can
   paint the two-line hero paragraph at the very top, which has nothing to do
   with the grid. content-visibility lets it skip layout for off-screen blocks.
   contain-intrinsic-size supplies a placeholder height so the scrollbar stays
   stable and skipped blocks don't cause jumps when scrolled into view. */
.loc-grid { content-visibility: auto; contain-intrinsic-size: auto 900px; }