/* ===========================================================
   ResQ Tyres & Recovery — Revision 3
   Theme: "Bright & Trustworthy" — light, on-brand (red/black/white),
   real imagery, scroll-flow animation.
   Asset credits: logo + van = client's own. Stock fitting photos
   from Pexels (free commercial licence, no attribution required).
   =========================================================== */

:root{
  --bg:#ffffff;
  --bg-soft:#f4f6f9;
  --bg-soft-2:#eceff4;
  --ink:#14181d;
  --ink-2:#3c4651;
  --muted:#6a7480;
  --line:#e3e7ec;
  --line-2:#d3d9e0;
  --red:#e4002b;
  --red-dark:#b80022;
  --red-soft:#fff0f2;
  --amber:#ffab00;
  --green:#1aa64b;
  --whatsapp:#0f7a6c;   /* darkened from #25d366 — white text now passes WCAG AA (5.2:1) */
  --dark:#0f1318;
  --dark-2:#171c23;
  /* Radius scale — three tiers, no one-offs.
     --radius-lg  large surfaces: photos, cards, panels
     --radius     controls and inner panels: buttons, notes, badges
     --radius-sm  form fields and anything that sits flush against one */
  --radius-sm:10px;
  --radius:14px;
  --radius-lg:20px;
  --maxw:1880px;
  --gutter:clamp(16px,2.6vw,44px);
  --section-y:clamp(44px,6.5vw,82px);
  --font:"Manrope","Manrope Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --shadow-sm:0 2px 10px rgba(20,24,29,.06);
  --shadow:0 18px 44px rgba(20,24,29,.12);
  --shadow-red:0 10px 26px rgba(228,0,43,.32);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
/* The browser's own [hidden]{display:none} loses to any class that sets
   display (.addon-note, .pc-result, .quote-call are all flex), which left
   empty bordered boxes on screen. Make hidden mean hidden. */
[hidden]{display:none!important}
a{color:inherit}
h1,h2,h3{letter-spacing:-.02em;line-height:1.12}

.wrap{width:100%;max-width:none;margin:0 auto;padding:0 var(--gutter)}
.stars{color:var(--amber);letter-spacing:1px}
.req{color:var(--red)}
.micro{font-size:12px;color:var(--muted)}
.icon{width:1em;height:1em;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.eyebrow{color:var(--red);font-weight:800;letter-spacing:2px;font-size:13px;text-transform:uppercase}
.center{text-align:center}

/* ===== Scroll-motion system ===== */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
.reveal.from-left{transform:translateX(-48px)}
.reveal.from-right{transform:translateX(48px)}
.reveal.zoom{transform:scale(.9)}
.reveal.in{opacity:1;transform:none}
.reveal.now,.stagger.now>*{transition:none!important}
/* staggered children */
.js .stagger>*{opacity:0;transform:translateY(38px);transition:opacity .65s cubic-bezier(.2,.7,.2,1),transform .65s cubic-bezier(.2,.7,.2,1)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(1){transition-delay:.04s}
.stagger.in>*:nth-child(2){transition-delay:.13s}
.stagger.in>*:nth-child(3){transition-delay:.22s}
.stagger.in>*:nth-child(4){transition-delay:.31s}
.stagger.in>*:nth-child(5){transition-delay:.40s}
.stagger.in>*:nth-child(6){transition-delay:.49s}
.stagger.in>*:nth-child(7){transition-delay:.58s}
.stagger.in>*:nth-child(8){transition-delay:.67s}
.stagger.in>*:nth-child(9){transition-delay:.76s}
.stagger.in>*:nth-child(10){transition-delay:.85s}

/* scroll progress bar */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--red),#ff5a78);z-index:80;transition:width .08s linear}

/* hero scroll cue */
.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;margin-top:30px}
.scroll-cue .mouse{width:24px;height:38px;border:2px solid var(--line-2);border-radius:14px;display:flex;justify-content:center;padding-top:6px}
.scroll-cue .mouse::before{content:"";width:4px;height:7px;border-radius:2px;background:var(--red);animation:wheelDrop 1.6s infinite}
@keyframes wheelDrop{0%{opacity:0;transform:translateY(-4px)}30%{opacity:1}70%{opacity:1;transform:translateY(6px)}100%{opacity:0;transform:translateY(10px)}}

/* parallax */
[data-parallax]{will-change:transform}

/* animated underline under section headings */
.section-head h2{position:relative;display:inline-block}
.section-head h2::after{content:"";position:absolute;left:50%;bottom:-10px;width:0;height:3px;border-radius:3px;background:var(--red);transform:translateX(-50%);transition:width .6s ease .25s}
.section-head.in h2::after,.reveal.in .section-head h2::after,.section-head.reveal.in h2::after{width:54px}

/* moving marquee ticker */
.marquee{background:var(--red);color:#fff;overflow:hidden;white-space:nowrap;border-top:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.15)}
.marquee.dark{background:var(--dark);color:#fff}
.marquee .track{display:inline-flex;align-items:center;gap:0;padding:13px 0;animation:scrollX 26s linear infinite;will-change:transform}
.marquee:hover .track{animation-play-state:paused}
.marquee .item{display:inline-flex;align-items:center;gap:12px;font-weight:800;font-size:15px;letter-spacing:1px;text-transform:uppercase;padding:0 26px}
.marquee .item .icon{width:16px;height:16px;stroke:#fff;opacity:.85}
.marquee .dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.6)}
@keyframes scrollX{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media(prefers-reduced-motion:reduce){
  .reveal,.stagger>*{opacity:1!important;transform:none!important;transition:none}
  .marquee .track{animation:none}
  .scroll-cue .mouse::before{animation:none}
  *{animation:none!important}
}

/* ===== Top utility bar ===== */
.topbar{background:var(--dark);color:#eef1f4;font-size:13px}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px var(--gutter);max-width:1480px;margin-inline:auto}
.topbar a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:#eef1f4}
.topbar .icon{width:14px;height:14px}
.topbar .tb-left{display:inline-flex;align-items:center;gap:8px;color:#aeb6c0}
.topbar .dotpulse{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(26,166,75,.6);animation:livePulse 1.8s infinite}
.topbar .tb-right{display:inline-flex;align-items:center;gap:18px}
.topbar .tb-right a:hover{color:#fff}
.topbar .icon.solid{fill:currentColor;stroke:none}
.tb-socials{display:inline-flex;align-items:center;gap:12px;padding-left:14px;border-left:1px solid rgba(255,255,255,.18)}
.tb-social{display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px}
.topbar .tb-right>a{min-height:24px}
.tb-social .icon{width:16px;height:16px}

/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;padding:10px var(--gutter);gap:24px;max-width:calc(1480px + 2*var(--gutter));margin-inline:auto}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
@media(max-width:560px){.bar{gap:12px}.logo{gap:8px}} /* phones: room for the gutter without wrapping the name */
@media(min-width:761px) and (max-width:1100px){.bar,.bar .nav{gap:16px}} /* tablets: room for the gutter without wrapping the name */
@media(max-width:360px){.site-header .bar{padding-inline:12px}.site-header .btn-call{padding-inline:14px}.site-header .logo-text small{letter-spacing:1px}} /* smallest phones: keep the name clear of the call button */
.logo img{width:54px;height:54px;border-radius:50%}
.logo-text{display:flex;flex-direction:column;line-height:1.05;font-weight:800;font-size:19px;color:var(--ink)}
.logo-text small{font-weight:600;color:var(--muted);font-size:12px;letter-spacing:1px;margin-top:2px}
@media(max-width:419px){.logo-text .est{display:none}} /* phones: the tagline stays on one line beside the call button */
.nav{display:flex;align-items:center;gap:clamp(24px,2.2vw,44px)}
.nav a{text-decoration:none;color:var(--ink-2);font-weight:600;font-size:16px}
.nav a:hover{color:var(--red)}
.header-right{display:flex;align-items:center;gap:12px}
.btn-call{background:var(--red);color:#fff;font-weight:800;padding:11px 18px;border-radius:999px;text-decoration:none;display:inline-flex;gap:8px;align-items:center;white-space:nowrap;box-shadow:var(--shadow-red);transition:.15s}
.btn-call .icon{width:17px;height:17px}
.btn-call:hover{background:var(--red-dark);transform:translateY(-1px)}

/* ===== Hero ===== */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff,var(--bg-soft));padding:48px 0 0}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,56px);align-items:center;max-width:1480px;margin-inline:auto}
.hero-photo{max-width:600px;justify-self:end;width:100%}
.live-badge{display:inline-flex;align-items:center;gap:8px;background:var(--red-soft);border:1px solid #ffd0d8;color:var(--red-dark);font-weight:800;font-size:13px;padding:7px 13px;border-radius:999px;margin-bottom:20px}
.live-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--red);animation:livePulse 1.8s infinite}
.hero h1{font-size:clamp(34px,5.2vw,58px);font-weight:800;margin-bottom:8px}
.hero h1 .rot{color:var(--red);display:inline-block;min-height:1.1em}
/* Google rating in words under the headline, so it is on the first phone screen
   (the photo card that also carries it sits below the buttons on phones). */
.hero-rating{font-size:15px;font-weight:800;color:var(--ink);margin:12px 0 14px}
.hero-rating .stars{margin-right:4px}
/* Three separate beats: headline, rotating line, paragraph. The fixed height
   holds the line box steady while the text swaps, so nothing shifts. */
.hero .rotator{font-size:clamp(20px,3vw,28px);font-weight:800;color:var(--red);line-height:1.4;height:1.5em;margin-top:20px;margin-bottom:24px}
.hero-sub{color:var(--ink-2);font-size:18px;max-width:520px;margin-bottom:26px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.cta-primary{background:var(--red);color:#fff;font-size:19px;font-weight:800;padding:16px 26px;border-radius:var(--radius);text-decoration:none;display:inline-flex;gap:10px;align-items:center;box-shadow:var(--shadow-red);transition:transform .15s}
.cta-primary .icon{width:20px;height:20px}
.cta-primary:hover{transform:translateY(-2px)}
.cta-whatsapp{background:#fff;border:2px solid #cfeede;color:#0f7a3d;font-weight:800;padding:14px 20px;border-radius:var(--radius);text-decoration:none;display:inline-flex;align-items:center;gap:9px;transition:.15s}
.cta-whatsapp .icon{width:20px;height:20px;stroke:var(--whatsapp)}
.cta-whatsapp:hover{border-color:var(--whatsapp);background:#f3fdf7}
.cta-secondary{background:#fff;border:2px solid var(--line-2);color:var(--ink);font-weight:700;padding:14px 20px;border-radius:var(--radius);text-decoration:none;display:inline-flex;align-items:center;gap:9px;transition:.15s}
.cta-secondary:hover{border-color:var(--red);color:var(--red)}

/* Hero photo */
.hero-photo{position:relative}
.hero-photo .frame{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 40%;aspect-ratio:4/4.2}
.hero-photo .tag{position:absolute;left:14px;bottom:14px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border-radius:var(--radius);padding:10px 13px;box-shadow:var(--shadow-sm)}
.hero-photo .tag .icon{width:20px;height:20px;stroke:var(--red)}
.hero-photo .tag b{display:block;font-size:14px}
.hero-photo .tag span{color:var(--muted);font-size:12px}
.hero-photo .floatcard{position:absolute;top:16px;right:-6px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px;box-shadow:var(--shadow);text-align:center}
.hero-photo .floatcard b{font-size:22px;color:var(--red);display:block;line-height:1}
/* same trap as the stats strip: .floatcard span is the caption rule */
.hero-photo .floatcard b span{font-size:inherit;color:inherit;font-weight:inherit}
.hero-photo .floatcard b .star{font-size:13px;color:var(--amber);margin-left:2px;vertical-align:2px}
.hero-photo .floatcard span{font-size:12px;color:var(--muted);font-weight:600}

/* Hero stats strip */
.stats{margin-top:42px;background:var(--dark);color:#fff}
.stats .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:8px;padding:clamp(16px,2.4vw,24px)}
.stat{display:flex;align-items:center;gap:12px;justify-content:center;padding:6px 4px}
.stat .icon{width:24px;height:24px;stroke:var(--red)}
/* One figure size across all four stats; the unit or denominator that
   follows it is the supporting label, not a second figure.
   .stat span below is the caption rule — it was also catching the count-up
   <span> holding "5.0", which is why the rating read smaller than its own
   "/ 5". Spans inside the figure inherit the figure. */
.stat b{font-size:20px;display:block;line-height:1.1}
.stat b span{font-size:inherit;color:inherit;font-weight:inherit}
.stat b .of{font-size:12px;font-weight:700;color:#aeb6c0;letter-spacing:.02em}
.stat span{color:#aeb6c0;font-size:12px}

/* ===== Section scaffolding ===== */
.section{padding:var(--section-y) 0}
.section.soft{background:var(--bg-soft)}
.section-head{max-width:640px;margin:0 auto 38px;text-align:center}
/* The h2 is inline-block so the red underline can be measured against the
   text rather than the column. That means an inline eyebrow will sit on the
   same line as any heading short enough to fit beside it ("How it works").
   Making the eyebrow a block keeps it above the heading on every section. */
.section-head .eyebrow{display:block;margin-bottom:6px}
.section-head h2{font-size:clamp(26px,3.6vw,36px);font-weight:800;margin:8px 0 10px}
.section-head p{color:var(--muted);font-size:17px}

/* ===== Estimate tool ===== */
.estimate .card{max-width:800px;margin:0 auto}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-sm)}
/* Scoped to the price-guide card. It used to catch .enquiry h2 as well, and
   display:flex overrode the centred .section-head h2 — which is why "Plan a
   home tyre fitting" was the one left-aligned section heading on the page.
   The enquiry heading now inherits .section-head h2 like every other one. */
.estimate .card h2{font-size:24px;font-weight:800;margin-bottom:6px;display:flex;align-items:center;justify-content:center;gap:10px}
.estimate .card h2 .icon{width:24px;height:24px;stroke:var(--red)}
.hint{color:var(--muted);font-size:14px;margin-bottom:20px;text-align:center}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--ink-2);margin-bottom:7px;text-transform:uppercase;letter-spacing:.6px;font-weight:700}
select,input,textarea{width:100%;background:#fff;border:1px solid var(--line-2);color:var(--ink);padding:13px;border-radius:var(--radius-sm);font-size:16px;font-family:inherit;appearance:none;transition:.15s}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(228,0,43,.14)}
textarea{resize:vertical}
.select-wrap{position:relative}
.select-wrap::after{content:"";position:absolute;right:14px;top:50%;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-65%) rotate(45deg);pointer-events:none}
.regplate{display:flex;align-items:center;background:#ffd400;border-radius:8px;overflow:hidden;border:1px solid #00309c}
.regplate .gb{background:#00309c;color:#fff;font-weight:800;padding:0 10px;align-self:stretch;display:grid;place-items:center;font-size:13px;letter-spacing:1px}
.regplate input{background:#ffd400;border:none;color:#111;font-weight:800;font-size:18px;letter-spacing:2px;text-transform:uppercase;border-radius:0}
.regplate input:focus{box-shadow:none}
.regplate input::placeholder{color:#8a7700}
.btn-go{width:100%;background:var(--red);color:#fff;border:none;font-weight:800;padding:15px;border-radius:var(--radius);font-size:16px;cursor:pointer;margin-top:4px;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:.15s}
.btn-go .icon{width:18px;height:18px}
.btn-go:hover{background:var(--red-dark)}
.form-error{color:var(--red-dark);font-size:14px;margin-top:12px}
.results{margin-top:22px;animation:fade .3s ease}
.results-head{font-size:14px;color:var(--muted);margin-bottom:14px}
.results-head b{color:var(--ink)}
.options{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:13px}
.opt{position:relative;background:#fff;border:1px solid var(--line-2);border-radius:var(--radius);padding:18px 16px;text-align:center;cursor:pointer;transition:.15s}
.opt:hover{border-color:var(--red);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.opt.sel{border-color:var(--red);box-shadow:0 0 0 2px rgba(228,0,43,.35)}
.opt.sel::after{content:"Popular";position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;font-size:12px;font-weight:800;letter-spacing:.5px;padding:3px 9px;border-radius:999px;text-transform:uppercase}
.opt .tier{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:700}
.opt .price{font-size:27px;font-weight:800;margin:6px 0;color:var(--ink)}
.opt .price small{font-size:13px;color:var(--muted);font-weight:600}
.opt .note{font-size:12px;color:var(--muted)}
.btn-approve{width:100%;margin-top:18px;background:var(--green);color:#fff;font-weight:800;border:none;padding:16px;border-radius:var(--radius);font-size:17px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:.15s}
.btn-approve .icon{width:19px;height:19px}
.btn-approve:hover{filter:brightness(1.05)}

/* ===== Services ===== */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(16px,2vw,24px)}
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:.18s}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.svc .ph{aspect-ratio:1/1;overflow:hidden;background:var(--bg-soft);display:grid;place-items:center}
.svc .ph img{width:100%;height:100%;object-fit:contain;transition:transform .4s ease}
.svc:hover .ph img{transform:scale(1.03)}
.svc .body{padding:20px}
.svc h3{font-size:19px;font-weight:800;margin-bottom:6px}
.svc p{color:var(--muted);font-size:14px}
.svc .tagline{display:inline-flex;align-items:center;gap:6px;color:var(--red);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.svc .tagline .icon{width:15px;height:15px}

/* ===== How it works ===== */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(14px,1.8vw,20px)}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 22px;box-shadow:var(--shadow-sm)}
.step .n{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--radius);background:var(--red);color:#fff;font-weight:800;font-size:18px;margin-bottom:14px;box-shadow:var(--shadow-red)}
.step b{font-size:17px;display:block;margin-bottom:4px}
.step p{color:var(--muted)}
.step:not(:last-child)::after{content:"";position:absolute;top:46px;right:-12px;width:0;height:2px;background:var(--red);opacity:.5;transition:width .55s ease .45s}
.steps.in .step:not(:last-child)::after{width:24px}

/* ===== Van band ===== */
.van-band{background:var(--dark);color:#fff;overflow:hidden}
.van-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,48px);align-items:center}
.van-grid .copy{padding:60px 0}
.van-grid h2{font-size:clamp(26px,3.6vw,38px);font-weight:800;margin-bottom:14px}
.van-grid h2 span{color:var(--red)}
.van-grid p{color:#c2c9d2;font-size:17px;margin-bottom:22px;max-width:480px}
.van-feats{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:26px}
.van-feats li{display:flex;align-items:center;gap:11px;color:#e7ebf0;font-weight:600}
.van-feats .icon{width:20px;height:20px;stroke:var(--red)}
.van-img{position:relative;min-height:340px;border-radius:var(--radius-lg);overflow:hidden}
.van-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ===== Offer banner ===== */
.offer{background:linear-gradient(120deg,var(--red),var(--red-dark));color:#fff}
.offer .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px 20px;flex-wrap:wrap}
.offer .ot{display:flex;align-items:center;gap:18px}
.offer .badge30{background:#fff;color:var(--red);font-weight:800;font-size:26px;border-radius:var(--radius);padding:12px 16px;line-height:1;text-align:center}
.offer .badge30 small{display:block;font-size:12px;letter-spacing:1px;color:var(--ink-2)}
.offer h3{font-size:24px;font-weight:800}
.offer p{color:#ffe2e7;font-size:15px}
.offer .btn-book{background:#fff;color:var(--red);font-weight:800;padding:15px 24px;border-radius:var(--radius);text-decoration:none;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;transition:.15s}
.offer .btn-book:hover{transform:translateY(-2px)}

/* ===== Reviews ===== */
.rev-head{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:34px}
.rev-head .big{font-size:40px;font-weight:800}
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(16px,2vw,24px)}
.review{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm)}
.review .stars{font-size:16px}
.review p{font-size:15px;color:var(--ink-2);margin:12px 0}
.review .who{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;font-weight:700}
.review .who b{color:var(--ink)}
.review .gicon{width:20px;height:20px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-weight:800;font-size:12px;color:#4285F4;flex:none}

/* reviews CTA row (Google + TikTok) */
.reviews-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.reviews-cta a{display:inline-flex;align-items:center;gap:9px;font-weight:800;padding:12px 22px;border-radius:999px;text-decoration:none;transition:.15s}
.rev-google{background:#fff;border:1px solid var(--line-2);color:var(--ink)}
.rev-google:hover{border-color:var(--red);color:var(--red);transform:translateY(-2px)}
.rev-google .gicon{width:20px;height:20px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-weight:800;font-size:12px;color:#4285F4;background:#fff}
.rev-tiktok{background:var(--ink);color:#fff}
.rev-tiktok:hover{background:#000;transform:translateY(-2px)}
.rev-tiktok .icon{width:18px;height:18px;fill:#fff;stroke:none}

/* ===== Areas ===== */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:760px;margin:0 auto}
.chips li{background:#fff;border:1px solid var(--line);padding:9px 16px;border-radius:999px;font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:7px;box-shadow:var(--shadow-sm)}
.chips .icon{width:14px;height:14px;stroke:var(--red)}
.chips li a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.chips li:has(a):hover{border-color:var(--red)}

/* ===== Enquiry / success ===== */
.enquiry .card{max-width:800px;margin:0 auto}
.success{max-width:800px;margin:18px auto 0;background:#eafaf0;border:1px solid #b6e6c7;border-radius:var(--radius-lg);padding:26px;text-align:center}
.success h3,.success .success-title{margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:9px;color:#0f7a3d;font-size:1.17em;font-weight:800}
.success h3 .icon,.success .success-title .icon{width:22px;height:22px;stroke:var(--green)}
.success a{color:var(--red);font-weight:700}

/* ===== Footer ===== */
.site-footer{background:var(--dark);color:#aeb6c0;padding:54px 0 110px;font-size:14px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:clamp(24px,3vw,36px);margin-bottom:30px}
.foot-brand{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.foot-brand img{width:52px;height:52px;border-radius:50%}
.foot-brand b{color:#fff;font-size:18px}
.site-footer h3,.site-footer h4{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px}
.site-footer a{color:#aeb6c0;text-decoration:none}
.site-footer a:hover{color:#fff}
.foot-links{list-style:none;display:flex;flex-direction:column;gap:9px}
.foot-links a{display:inline-flex;align-items:center;gap:9px}
.foot-links .icon{width:15px;height:15px;stroke:var(--red)}
.foot-links .icon.solid{fill:var(--red);stroke:none}
.foot-bottom{border-top:1px solid #2a313a;padding-top:18px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:#7d8893}
.foot-legal{flex-basis:100%}
.form-privacy{margin-top:12px;text-align:center}
.form-privacy a{color:inherit;text-decoration:underline}

/* Sticky mobile bar */
.sticky-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;display:none;gap:10px}
.sticky-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:16px;padding:15px;min-height:50px;border-radius:var(--radius);text-decoration:none;box-shadow:var(--shadow)}
.sticky-bar .s-call{background:var(--red);color:#fff;white-space:nowrap}
.sticky-bar .s-wa{flex:none;width:56px;padding:15px 0;background:var(--whatsapp);color:#fff}
.sticky-bar .icon{width:19px;height:19px}
.sticky-bar .s-wa .icon{width:24px;height:24px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Animations */
.pulse{animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(228,0,43,.45)}70%{box-shadow:0 0 0 16px rgba(228,0,43,0)}100%{box-shadow:0 0 0 0 rgba(228,0,43,0)}}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(26,166,75,.55)}70%{box-shadow:0 0 0 7px rgba(26,166,75,0)}100%{box-shadow:0 0 0 0 rgba(26,166,75,0)}}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* shared search-button style (used by postcode checker) */
.btn-find{background:var(--ink);color:#fff;border:none;font-weight:800;padding:0 20px;border-radius:var(--radius-sm);font-size:15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;transition:.15s}
.btn-find .icon{width:17px;height:17px;stroke:#fff}
.btn-find:hover{background:#000}

/* ===== Two ways we help (path cards) ===== */
.paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(16px,2.4vw,26px);max-width:1080px;margin:0 auto}
.path{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 26px 28px;box-shadow:var(--shadow-sm);overflow:hidden;transition:.18s}
.path:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.path::before{content:"";position:absolute;top:0;left:0;right:0;height:4px}
.path-emergency::before{background:var(--red)}
.path-planned::before{background:var(--ink)}
.path-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.path-badge{display:inline-flex;align-items:center;gap:8px;background:var(--red-soft);border:1px solid #ffd0d8;color:var(--red-dark);font-weight:800;font-size:12px;padding:6px 12px;border-radius:999px}
.path-badge.alt{background:var(--bg-soft);border-color:var(--line-2);color:var(--ink-2)}
.path-badge.alt .icon{width:14px;height:14px;stroke:var(--ink-2)}
.path-badge .dotpulse{width:8px;height:8px;border-radius:50%;background:var(--red);animation:livePulse 1.8s infinite}
.path-ico{width:26px;height:26px;stroke:var(--line-2);flex:none}
.path h3{font-size:22px;font-weight:800;margin-bottom:8px}
.path>p{color:var(--ink-2);font-size:15px;margin-bottom:16px}
.path-list{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:20px}
.path-list li{display:flex;align-items:flex-start;gap:9px;color:var(--ink-2);font-size:14px;font-weight:600}
.path-list .icon{width:17px;height:17px;stroke:var(--green);margin-top:2px;flex:none}
.path-cta{display:flex;gap:10px;flex-wrap:wrap}
.cta-secondary.solid{background:var(--ink);border-color:var(--ink);color:#fff}
.cta-secondary.solid:hover{background:#000;border-color:#000;color:#fff}

/* ===== Locking wheel-nut question ===== */
.lock-q{border:1px solid var(--line-2);border-radius:var(--radius);padding:14px 16px 4px;margin:2px 0 18px}
.lock-q legend{font-size:12px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.6px;font-weight:700;padding:0 6px}
.lock-hint{display:flex;align-items:flex-start;gap:8px;color:var(--muted);font-size:12.5px;margin:10px 0 12px}
.lock-hint .icon{width:15px;height:15px;stroke:var(--red);margin-top:1px;flex:none}

/* ===== Price range output ===== */
.range-box{background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff;border-radius:var(--radius);padding:22px 20px;text-align:center;box-shadow:var(--shadow-red)}
.range-num{font-size:clamp(30px,6vw,42px);font-weight:800;line-height:1;display:inline-flex;align-items:baseline;gap:2px;flex-wrap:wrap;justify-content:center}
.range-num .dash{margin:0 6px;font-weight:600;opacity:.85}
.range-num small{display:block;width:100%;font-size:13px;font-weight:600;opacity:.9;margin-top:8px;letter-spacing:.3px}
/* Size ResQ hasn't priced. We never guess a number — we ask for the call.
   Same visual weight as the price box so it still reads as an answer. */
.quote-call{display:flex;align-items:flex-start;gap:14px;background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff;border-radius:var(--radius);padding:22px 20px;box-shadow:var(--shadow-red)}
.quote-call .icon{width:26px;height:26px;stroke:#fff;flex:none;margin-top:2px}
.quote-call b{display:block;font-size:clamp(18px,3.2vw,21px);font-weight:800;line-height:1.2;margin-bottom:7px}
.quote-call span{display:block;font-size:14px;line-height:1.55;opacity:.93}
.addon-note{display:flex;align-items:flex-start;gap:9px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px;margin-top:14px;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.addon-note .icon{width:18px;height:18px;stroke:var(--red);margin-top:1px;flex:none}
.addon-note b{color:var(--ink)}
.results-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.results-cta .cta-primary,.results-cta .btn-approve{flex:1;min-width:200px;justify-content:center}
.btn-approve{background:var(--ink);color:#fff;font-weight:800;border:none;padding:15px;border-radius:var(--radius);font-size:16px;cursor:pointer;display:inline-flex;align-items:center;gap:9px;transition:.15s}
.btn-approve .icon{width:18px;height:18px}
.btn-approve:hover{background:#000}

/* ===== Coverage map + postcode checker ===== */
.areas-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,3vw,40px);align-items:center;max-width:1040px;margin:0 auto}
.area-map{background:#0b0e13;border:1px solid #1b222b;border-radius:var(--radius-lg);padding:8px;box-shadow:var(--shadow)}
/* --- Static coverage map (self-hosted SVG, inlined in index.html #areas).
       Replaced Leaflet + CARTO tiles 2026-09-02. --- */
.cov-map{display:block;width:100%;height:auto;aspect-ratio:62/56;border-radius:calc(var(--radius-lg) - 8px);background:#0b0e13}
/* --- Puncture price line --- */
.pr-line{display:flex;gap:9px;align-items:flex-start;margin:0 0 18px;padding:11px 13px;border:1px solid var(--line);border-left:3px solid var(--red);border-radius:var(--radius-sm,10px);background:rgba(228,0,43,.04);font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.pr-line .icon{flex:0 0 auto;width:17px;height:17px;margin-top:1px;color:var(--red)}
.pr-line b{color:var(--ink)}
.glance{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.glance h3{font-size:17px;margin:0 0 10px}
.glance table{width:100%;border-collapse:collapse;font-size:15px}
.glance th,.glance td{padding:9px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.glance th{font-weight:600;color:var(--ink-2);padding-right:12px}
.glance td{font-weight:800;color:var(--ink);text-align:right;white-space:nowrap}
.glance .micro{margin-top:10px}
.hero-kicker{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin:-8px 0 4px;line-height:1.3}
.leeds-districts{margin-top:34px}
.leeds-districts h3{font-size:clamp(19px,2.4vw,23px);margin-bottom:6px}
.leeds-districts>p{color:var(--muted);margin-bottom:16px;max-width:60em}
.districts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.district{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow-sm)}
.district b{font-size:15px;color:var(--red);white-space:nowrap;font-variant-numeric:tabular-nums}
.district span{font-size:14px;color:var(--muted);line-height:1.45}

/* --- FAQ --- */
.faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,22px);max-width:1040px;margin:0 auto}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(16px,2vw,22px);box-shadow:var(--shadow-sm)}
.faq-item h3{margin:0 0 8px;font-size:clamp(15px,1.5vw,17px);line-height:1.35}
.faq-item p{margin:0;font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.faq-item a{color:var(--red);font-weight:700}
@media(max-width:760px){.faq-grid{grid-template-columns:1fr}}
.area-side{display:flex;flex-direction:column;gap:18px}
.pc-checker{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm)}
.pc-result{flex-wrap:wrap}
.pc-ctas{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;flex-basis:100%;padding-left:26px}
.pc-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border-radius:var(--radius);font-weight:800;text-decoration:none;color:#fff}
.pc-cta.call{background:var(--red)}
.pc-cta.wa{background:var(--whatsapp)}
.pc-checker label{display:block;font-size:12px;color:var(--ink-2);margin-bottom:9px;text-transform:uppercase;letter-spacing:.6px;font-weight:700}
.pc-row{display:flex;gap:10px}
.pc-row input{flex:1;text-transform:uppercase}
.pc-result{margin-top:12px;font-size:14px;display:flex;align-items:flex-start;gap:8px;border-radius:var(--radius-sm);padding:11px 13px;line-height:1.45}
.pc-result .icon{width:18px;height:18px;flex:none;margin-top:1px}
.pc-result>span{min-width:0}
.pc-result a{color:inherit;font-weight:800;text-decoration:underline}
.pc-result.ok{background:#eafaf0;border:1px solid #b6e6c7;color:#0f7a3d}
.pc-result.ok .icon{stroke:var(--green)}
.pc-result.warn{background:var(--red-soft);border:1px solid #ffd0d8;color:var(--red-dark)}
.pc-result.warn .icon{stroke:var(--red)}
.area-side .chips{justify-content:flex-start;max-width:none}

/* ===== Tyre-size caution (enquiry) ===== */
.tyresize-caution{display:flex;align-items:flex-start;gap:8px;color:var(--red-dark);font-size:12.5px;margin-top:8px;line-height:1.45}
.tyresize-caution .icon{width:15px;height:15px;stroke:var(--red);margin-top:1px;flex:none}

/* ===== Find-your-tyre-size guide ===== */
.size-help{margin:6px 0 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-soft);overflow:hidden}
.size-help summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;font-weight:700;font-size:14px;padding:13px 16px;color:var(--ink)}
.size-help summary::-webkit-details-marker{display:none}
.size-help summary .icon{width:17px;height:17px;stroke:var(--red)}
.sh-chev{margin-left:auto;display:inline-flex;transition:transform .25s ease}
.sh-chev .icon{width:18px;height:18px;stroke:var(--muted)}
.size-help[open] .sh-chev{transform:rotate(180deg)}
.sh-body{padding:4px 16px 18px}
.sh-text{font-size:14px;color:var(--ink-2);margin-bottom:6px}
.tyre-guide{width:100%;max-width:420px;height:auto;margin:6px auto 4px;display:block}

.tg-side{fill:#7a8590;font-size:11px;font-weight:700;letter-spacing:2px;font-family:var(--font)}
.tg-code{fill:#e7ecf1;font-size:30px;font-weight:800;font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;letter-spacing:1px;text-anchor:middle}
.tg-code.tg-dim{fill:#8b96a2}
.tg-code.tg-small{font-size:16px}
.tg-sidetext{fill:#aeb6c0;font-size:12px;font-weight:700;letter-spacing:1.5px;font-family:ui-monospace,monospace;text-anchor:middle;opacity:.6}
.tg-loc-ring{fill:none;stroke:var(--red);stroke-width:2;animation:tgLoc 1.6s ease-out infinite}
@keyframes tgLoc{0%{r:5;opacity:.9}100%{r:16;opacity:0}}
.tg-callout{fill:none;stroke:var(--red);stroke-width:2;stroke-dasharray:4 5;opacity:.85;animation:tgDash 1s linear infinite}
@keyframes tgDash{to{stroke-dashoffset:-18}}
.tg-hl{opacity:0}
.tg-hl1{fill:rgba(228,0,43,.32)}
.tg-hl2{fill:rgba(255,171,0,.32)}
.tg-hl3{fill:rgba(24,95,165,.34)}
.tg-tap{transform:translate(300px,78px)}
.tg-dot{fill:#fff;stroke:var(--red);stroke-width:2}
.tg-arrow{stroke:var(--red);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tg-ripple{fill:none;stroke:var(--red);stroke-width:2;opacity:0}

.tg-legend{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.tg-chip{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;transition:border-color .2s,box-shadow .2s}
.tg-chip b{font-size:20px;font-weight:800;font-family:ui-monospace,monospace}
.tg-chip span{display:flex;flex-direction:column;font-size:13px;font-weight:700;color:var(--ink)}
.tg-chip small{font-weight:500;font-size:12px;color:var(--muted)}
.tg-c1 b{color:var(--red)} .tg-c2 b{color:#bb7d00} .tg-c3 b{color:#185fa5}

/* animation timeline: 6s loop, three phases */
.tg-hl1{animation:tgHl 6s infinite 0s}
.tg-hl2{animation:tgHl 6s infinite 2s}
.tg-hl3{animation:tgHl 6s infinite 4s}
@keyframes tgHl{0%{opacity:0}4%{opacity:1}30%{opacity:1}34%{opacity:0}100%{opacity:0}}
.tg-tap{animation:tgMove 6s infinite}
@keyframes tgMove{
  0%,30%{transform:translate(300px,78px)}
  34%,63%{transform:translate(372px,78px)}
  67%,96%{transform:translate(440px,78px)}
  100%{transform:translate(300px,78px)}
}
.tg-ripple{animation:tgRipple 1.5s ease-out infinite}
@keyframes tgRipple{0%{r:6;opacity:.7}100%{r:20;opacity:0}}
.tg-c1{animation:tgChip 6s infinite 0s} .tg-c2{animation:tgChip 6s infinite 2s} .tg-c3{animation:tgChip 6s infinite 4s}
@keyframes tgChip{0%{border-color:var(--line)}4%,30%{border-color:var(--red);box-shadow:0 4px 14px rgba(20,24,29,.10)}34%,100%{border-color:var(--line);box-shadow:none}}
.tg-c2{} /* keep border red accent generic; colour cue carried by number */

@media(prefers-reduced-motion:reduce){
  .tg-hl{opacity:.5} .tg-tap{display:none} .tg-loc-ring{opacity:.6}
  .tg-hl1,.tg-hl2,.tg-hl3,.tg-c1,.tg-c2,.tg-c3,.tg-ripple,.tg-tap,.tg-loc-ring,.tg-callout{animation:none}
}

/* hero image scale-on-scroll */
.hero-photo .frame img{transform-origin:center;will-change:transform}

/* back-to-top button */
.to-top{position:fixed;right:18px;bottom:84px;z-index:55;width:46px;height:46px;border-radius:50%;background:var(--red);color:#fff;border:none;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-red);opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);transition:opacity .3s ease,transform .3s ease,visibility .3s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--red-dark);transform:translateY(-2px)}
.to-top .icon{width:22px;height:22px;stroke-width:2.4}
@media(min-width:761px){.to-top{bottom:24px}}

/* ===== Responsive ===== */
/* Layout-mode changes only — the grids above reflow on their own via auto-fit */
@media(max-width:920px){
  .hero-grid,.van-grid,.areas-grid{grid-template-columns:1fr;gap:clamp(22px,4vw,30px)}
  .hero-photo{max-width:560px;margin:0 auto}
  .van-img{min-height:280px}
  .van-grid .copy{padding:clamp(36px,6vw,48px) 0}
  .area-map{max-width:520px;margin:0 auto;width:100%}
}
@media(max-width:760px){
  /* phones: headline + call button first */
  .hero{padding-top:12px}
  .hero .scroll-cue,.hero .cta-secondary{display:none}
  /* 5 Oct 2026: the call button, rating and price sit above the bottom bar on every page,
     not only the home page. The top bar (its number and WhatsApp are in the header and the
     bottom bar), the rotating line and the badge's extra words make room on phones.
     A phone shows about 640px before any scrolling once the browser's own bars are on, so the
     headline is a size smaller and the gaps tighter: at 360 wide the call button starts above
     430px and both hero buttons clear the bottom bar on a 640px screen. */
  .topbar,.hero .rotator,.live-badge .badge-extra{display:none}
  .live-badge{margin-bottom:10px}
  .hero h1{font-size:clamp(30px,5.2vw,58px)}
  .hero-rating{margin:8px 0 10px}
  .hero-sub{font-size:16px;line-height:1.5;margin-bottom:16px}
}
@media(max-width:760px){
  .nav,.topbar .tb-left{display:none}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .step:not(:last-child)::after{display:none}
  .sticky-bar{display:flex}
  .site-footer{padding-bottom:96px}
  /* footer links: full 44px tap targets on touch screens */
  .foot-links{gap:0}
  .foot-links li>a,.foot-links li>span{min-height:44px}
  .offer .wrap{flex-direction:column;text-align:center}
  .offer .ot{flex-direction:column;text-align:center}
}
/* phone guard: single column below 560 (no tiny-screen overflow) */
@media(max-width:560px){
  .services,.steps,.reviews,.foot-grid{grid-template-columns:1fr}
}
@media(max-width:430px){
  .options{grid-template-columns:1fr}
  .opt{display:flex;align-items:center;justify-content:space-between;text-align:left;padding:14px}
  .opt .price{margin:0}
  .opt.sel::after{left:auto;right:14px;transform:none}
}


/* ===== Utilities ===== */
/* Visually hidden but readable by screen readers and search engines.
   Used for the Reviews section heading so the section has a real <h2>
   without changing the visual design. */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}


/* ---- photo treatment -----------------------------------------------------
   The unified grade lives in the image files themselves (tools/grade-photos.py),
   not here. A single CSS filter shifts every photo by the same amount, which
   cannot reconcile shots taken in three different lights — and a filter on the
   hero image forces an extra compositing layer on the LCP element. Nothing to
   apply at runtime: re-run the script if the source photos are ever replaced. */

/* 1 Oct 2026: price guide all-in line + WhatsApp-your-size; enquiry form honeypot and send states */
.allin{margin-top:12px;font-weight:800;font-size:16px;color:var(--ink);text-align:center}
.results-cta .cta-whatsapp{flex:1;min-width:200px;justify-content:center}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.btn-go[disabled]{opacity:.65;cursor:progress}
.form-error a{color:var(--red);font-weight:800}