/* High Shine Club — design system
   Brand: deep navy + logo blue (#24c0f0). Display: Bebas Neue. Body: DM Sans. */

:root{
  --navy-900:#000e1a;
  --navy-800:#041826;
  --navy-700:#00263a;
  --navy-600:#003a52;
  --navy-500:#00527a;
  --accent:#24c0f0;          /* sampled from the logo */
  --accent-bright:#5fd6ff;   /* hover */
  --accent-deep:#0b7fa8;     /* accent as TEXT on light bg — #24c0f0 fails contrast */
  --accent-ink:#04222e;      /* text sitting ON the accent */
  --ink:#0a1420;
  --body:#3f4d5a;
  --muted:#6b7885;
  --line:#cfdde8;
  --wash:#dfecf5;
  --wash-2:#d3e6f2;
  --tint-line:rgba(11,127,168,.22);
  --white:#fff;
  --surface:#eaf2f8;   /* base ground — never pure white */
  --star:#fbbc04;

  --max:1180px;
  --gut:clamp(1.15rem,4vw,2.5rem);
  --radius:14px;
  --radius-lg:20px;
  --shadow:0 1px 2px rgba(4,24,38,.06),0 8px 24px -8px rgba(4,24,38,.14);
  --shadow-lg:0 2px 4px rgba(4,24,38,.06),0 24px 56px -16px rgba(4,24,38,.28);
  --t:.25s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--surface);color:var(--body);
  font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{color:var(--ink);margin:0 0 .5em;line-height:1.08;font-weight:600}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.display{
  font-family:"Bebas Neue",Impact,"Arial Narrow",sans-serif;
  font-weight:400;letter-spacing:.012em;line-height:.94;text-transform:uppercase;
}
h1.display{font-size:clamp(2.7rem,7.2vw,5rem)}
h2.display{font-size:clamp(2.1rem,5vw,3.5rem)}
h3.display{font-size:clamp(1.4rem,2.6vw,1.9rem)}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(3.5rem,8vw,6.5rem);position:relative;isolation:isolate}
.section--wash{background:var(--wash)}

/* ---------- section grounds ----------
   Mirrors the rhythm on the live site: alternating white, light blue, deep
   navy and mid blue bands rather than one continuous pale sheet. Cards invert
   against whatever they sit on - solid white on the light bands, translucent
   white on the dark ones - so the contrast comes from the stack, not from
   borders. */

.ground--white{background:#fff}
.ground--sky{background:linear-gradient(180deg,#ffffff 0%,#e4f4fb 100%)}
.ground--sky2{background:linear-gradient(180deg,#f5fbfe 0%,#dcedf8 100%)}
.ground--navy{background:linear-gradient(135deg,#000e1a 0%,#003a52 100%);color:#c3d4e0}
.ground--ocean{background:linear-gradient(180deg,#003a52 0%,#00527a 100%);color:#cfe3ee}
.ground--deep{background:linear-gradient(180deg,#0a1420 0%,#050b12 100%);color:#b9c6d2}

/* --- anything on a dark ground --- */
.ground--navy h1,.ground--navy h2,.ground--navy h3,
.ground--ocean h1,.ground--ocean h2,.ground--ocean h3,
.ground--deep h1,.ground--deep h2,.ground--deep h3{color:#fff}
.ground--navy .lede,.ground--ocean .lede,.ground--deep .lede{color:#a9bfcd}
.ground--navy .eyebrow,.ground--ocean .eyebrow,.ground--deep .eyebrow{color:var(--accent)}

/* Cards on dark: translucent glass, not white blocks. */
.ground--navy .feature,.ground--ocean .feature,.ground--deep .feature,
.ground--navy .review,.ground--ocean .review,.ground--deep .review,
.ground--navy .compare__col,.ground--ocean .compare__col{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.12);
  box-shadow:none;backdrop-filter:blur(6px);
}
.ground--navy .feature h3,.ground--ocean .feature h3,.ground--deep .feature h3,
.ground--navy .compare__col h3,.ground--ocean .compare__col h3{color:#fff}
.ground--navy .feature p,.ground--ocean .feature p,.ground--deep .feature p{color:#a9bfcd}
.ground--navy .compare__col li,.ground--ocean .compare__col li{color:#cfdae4}
.ground--navy .feature__ico,.ground--ocean .feature__ico,.ground--deep .feature__ico{
  background:rgba(36,192,240,.16);color:var(--accent);
}
.ground--navy .step p,.ground--ocean .step p,.ground--deep .step p{color:#a9bfcd}
.ground--navy .ticks li,.ground--ocean .ticks li,.ground--deep .ticks li{color:#cfdae4}
.ground--navy .ticks li svg,.ground--ocean .ticks li svg,.ground--deep .ticks li svg{color:var(--accent)}
.ground--navy .btn--ghost,.ground--ocean .btn--ghost,.ground--deep .btn--ghost{
  color:#fff;border-color:rgba(255,255,255,.45);
}
.ground--navy .btn--ghost:hover,.ground--ocean .btn--ghost:hover,.ground--deep .btn--ghost:hover{
  background:#fff;color:var(--navy-900);border-color:#fff;
}
/* FAQ inverts too, or it disappears against the dark. */
.ground--navy .faq,.ground--ocean .faq,.ground--deep .faq{border-top-color:rgba(255,255,255,.16)}
.ground--navy .faq details,.ground--ocean .faq details,.ground--deep .faq details{border-bottom-color:rgba(255,255,255,.16)}
.ground--navy .faq summary,.ground--ocean .faq summary,.ground--deep .faq summary{color:#fff}
.ground--navy .faq summary::after,.ground--ocean .faq summary::after,.ground--deep .faq summary::after{
  border-color:var(--accent);
}
.ground--navy .faq details p,.ground--ocean .faq details p,.ground--deep .faq details p{color:#a9bfcd}
.ground--navy .stats,.ground--ocean .stats,.ground--deep .stats{border-color:rgba(255,255,255,.14)}

/* Dark grounds carry a faint accent grid so they read as surface, not void. */
.ground--navy::before,.ground--deep::before,.ground--ocean::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(36,192,240,.085) 1px,transparent 1px),
    linear-gradient(90deg,rgba(36,192,240,.085) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(85% 75% at 50% 40%,#000,transparent);
  mask-image:radial-gradient(85% 75% at 50% 40%,#000,transparent);
}
/* Light grounds get the softer dot field. */
.ground--white::before,.ground--sky::before,.ground--sky2::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(11,127,168,.16) 1.2px,transparent 1.2px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:1rem 1.85rem;border-radius:999px;border:2px solid transparent;
  font-weight:600;font-size:1rem;text-decoration:none;cursor:pointer;
  transition:transform var(--t),box-shadow var(--t),background var(--t),color var(--t),border-color var(--t);
  line-height:1;text-align:center;
}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.btn--accent{background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 20px -6px rgba(36,192,240,.55)}
.btn--accent:hover{background:var(--accent-bright);box-shadow:0 10px 28px -8px rgba(36,192,240,.7)}
.btn--navy{background:var(--navy-700);color:#fff}
.btn--navy:hover{background:var(--navy-600)}
.btn--ghost{border-color:currentColor;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
/* Every dark surface the ghost button sits on. Without these it renders
   near-black on near-black and the phone CTA effectively disappears. */
.section--dark .btn--ghost,
.hero .btn--ghost,
.site-header .btn--ghost,
.callbar .btn--ghost,
.quote .btn--ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.section--dark .btn--ghost:hover,
.hero .btn--ghost:hover,
.site-header .btn--ghost:hover,
.callbar .btn--ghost:hover,
.quote .btn--ghost:hover{background:#fff;color:var(--navy-900);border-color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;background:rgba(0,14,26,.92);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.site-header__inner{display:flex;align-items:center;gap:1rem;min-height:74px}
.brand{display:flex;align-items:center;flex-shrink:0;text-decoration:none}
.brand img{height:42px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:.1rem;min-width:0}
.nav a{
  color:#cdd8e2;text-decoration:none;font-size:.88rem;font-weight:500;
  padding:.5rem .6rem;border-radius:8px;transition:color var(--t),background var(--t);white-space:nowrap;
}
.nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav a[aria-current="page"]{color:var(--accent)}
.header-cta{display:flex;align-items:center;gap:.5rem;flex-shrink:0;margin-left:.5rem}
.header-cta .btn{padding:.7rem 1.1rem;font-size:.88rem;white-space:nowrap}
/* Three actions do not fit between the nav and the edge, so they drop in
   order of how much they add. Book Now is the only one that survives every
   width: it is the one path that reaches the price before the form. */
@media (max-width:1400px){.header-cta .btn--call{display:none}}
@media (max-width:1240px){.header-cta .btn--quote{display:none}}
.nav-toggle{
  display:none;margin-left:auto;background:none;border:0;color:#fff;padding:.5rem;
  cursor:pointer;border-radius:8px;
}
.nav-toggle:focus-visible{outline:2px solid var(--accent)}
.nav-toggle svg{display:block}

@media (max-width:1100px){
  .header-cta .btn--call{display:inline-flex}
  .header-cta .btn--quote{display:none}
  .nav{
    position:fixed;inset:74px 0 auto;background:var(--navy-900);flex-direction:column;
    align-items:stretch;gap:0;padding:.75rem var(--gut) 1.5rem;margin:0;
    border-bottom:1px solid rgba(255,255,255,.1);
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity var(--t),transform var(--t);
    max-height:calc(100vh - 74px);overflow-y:auto;
  }
  .nav[data-open="true"]{transform:none;opacity:1;pointer-events:auto}
  .nav a{padding:.85rem .25rem;border-bottom:1px solid rgba(255,255,255,.07);border-radius:0;font-size:1rem}
  .nav-toggle{display:block;order:3}
  .header-cta{order:2;margin-left:auto}
}
@media (max-width:560px){
  /* Call Now goes icon-only; Book Now keeps its words, because an unlabelled
     calendar glyph is not an instruction. */
  .header-cta .btn--call span{display:none}
  .header-cta .btn{padding:.6rem .85rem;font-size:.84rem}
  .brand img{height:36px}
}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy-900);color:#c3d0dc;overflow:hidden;isolation:isolate}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(36,192,240,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(36,192,240,.07) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(75% 75% at 30% 45%,#000,transparent);
  mask-image:radial-gradient(75% 75% at 30% 45%,#000,transparent);
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(115% 85% at 78% 8%,rgba(36,192,240,.22),transparent 62%),
             radial-gradient(85% 70% at 8% 100%,rgba(0,82,122,.45),transparent 60%);
}
.hero__inner{
  display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center;padding-block:clamp(3rem,7vw,5.5rem);
}
/* The left column is TWO elements, not one, so the form can sit between them
   on a phone. On desktop they stack back into a single column and the layout
   is unchanged: .hero__copy hugs the bottom of row 1, .hero__extra the top of
   row 2, which reproduces the old single-div flow. Desktop converts at 7.3%
   and is not the problem, so nothing here may move it. */
.hero__copy{grid-column:1;grid-row:1;align-self:end}
.hero__extra{grid-column:1;grid-row:2;align-self:start}
.hero__media{grid-column:2;grid-row:1 / span 2;align-self:center}
.hero h1{color:#fff;margin-bottom:1rem}
.hero h1 .hl{color:var(--accent);display:block}
.hero__sub{font-size:clamp(1.05rem,2vw,1.28rem);color:#a9bbc9;max-width:34ch;margin-bottom:1.75rem}
.hero ul{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:.7rem}
.hero ul li{display:flex;gap:.7rem;align-items:flex-start;font-size:1rem;color:#cfdae4}
.hero ul svg{flex-shrink:0;margin-top:.28rem;color:var(--accent)}
.hero__media{position:relative}
.hero__media img{border-radius:var(--radius-lg);box-shadow:0 30px 70px -20px rgba(0,0,0,.7);width:100%;object-fit:cover;aspect-ratio:4/5}
/* Tinted blue rather than the old 7% white, which read as grey smoke over a
   bright daytime hero (Zaak, 2026-10-04). Still translucent, and blurred so
   the type stays legible wherever the photo happens to be light behind it. */
.rating-chip{
  display:inline-flex;align-items:center;gap:.6rem;
  background:rgba(36,192,240,.30);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(36,192,240,.45);border-radius:999px;padding:.5rem 1.05rem;
  font-size:.87rem;color:#eaf6fc;margin-bottom:1.5rem;font-weight:500;
  transition:background var(--t),border-color var(--t);
}
@supports not (backdrop-filter:blur(2px)){
  .rating-chip{background:rgba(16,74,106,.88)}
}
/* GOLD, not the brand blue. Gold is what a review star looks like
   everywhere else on the internet, so it is read as a rating rather
   than as decoration. Zaak's own GHL hero uses gold. */
.rating-chip .stars{color:#FFD700;letter-spacing:.06em}
@media (max-width:900px){
  /* REVERSED 2026-10-11, on measurement rather than taste. The old rule here
     put the whole left column above the form, reasoning that people need the
     headline and the trust signals before being asked to fill anything in.
     GA4 says that costs leads: on mobile the form was NEVER above the fold
     (`form_above_fold` = 125 "no", 0 "yes"), only 48% of paid mobile visits
     ever saw it, and mobile converts at 3.7% against desktop's 7.3% while
     being two thirds of paid traffic. Once a mobile visitor DOES see the form
     they engage MORE than desktop (13% vs 8%), so the problem was never
     interest, only distance.

     The compromise keeps the comment's real point: headline and review chip
     still come first, so the form is never the first thing with no context.
     The ticks, buttons and trust tiles move BELOW it, where they still do
     their job for anyone who scrolls. */
  .hero__inner{display:flex;flex-direction:column;gap:1.5rem}
  .hero__copy{order:1}
  .hero__media{order:2;max-width:520px;width:100%;margin-inline:auto}
  .hero__extra{order:3}
  .hero__media img{aspect-ratio:16/11}
  .hero__sub{max-width:none;margin-bottom:0}
  .hero__cta{margin-bottom:.9rem}
  /* Six ticks is 200px of scroll before anything can be filled in. Three
     carries the same promise. The rest stay in the DOM for the crawler and
     for anyone on desktop. */
  .hero__extra ul li:nth-child(n+4){display:none}
  .hero__extra ul{margin-bottom:1.25rem}
}

/* ---------- trust strip ---------- */
.trust{background:var(--navy-800);border-top:1px solid rgba(255,255,255,.07);padding-block:1.6rem}
.trust__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:1.1rem 1.4rem}
.trust__item{display:flex;gap:.85rem;align-items:center}
.trust__item svg{color:var(--accent);flex-shrink:0}
.trust__item strong{display:block;color:#fff;font-size:.97rem;font-weight:600;line-height:1.3}
.trust__item span{font-size:.85rem;color:#8b9dad;line-height:1.4}

/* ---------- stat band ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.stat{background:#fff;padding:1.7rem 1.25rem;text-align:center}
.stat__i{display:grid;place-items:center;width:42px;height:42px;margin:0 auto .75rem;
  border-radius:12px;background:rgba(36,192,240,.13);color:var(--accent-deep)}
.stats{box-shadow:var(--shadow)}
.stat__n{font-family:"Bebas Neue",Impact,sans-serif;font-size:clamp(2rem,4vw,2.9rem);
  color:var(--navy-700);line-height:1;letter-spacing:.01em}
.stat__l{font-size:.82rem;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;margin-top:.4rem;font-weight:500}
/* Zaak, 2026-09-28: keep the stat band on ONE ROW on a phone. auto-fit with a
   150px minimum fits three across at phone widths and orphans the fourth on a
   row of its own next to a large empty cell, which is what looked broken.
   Four fixed columns and smaller type instead - same treatment as the hero
   trust strip, and it reads as one band of numbers rather than a grid with a
   hole in it. */
@media (max-width:640px){
  .stats{grid-template-columns:repeat(4,1fr)}
  .stat{padding:1.05rem .3rem}
  .stat__i{width:30px;height:30px;margin-bottom:.5rem;border-radius:9px}
  .stat__i svg{width:16px;height:16px}
  .stat__n{font-size:1.4rem}
  .stat__l{font-size:.55rem;letter-spacing:.02em;margin-top:.3rem;line-height:1.3}
}

/* ---------- cards / grids ---------- */
.grid{display:grid;gap:1.5rem}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid--c4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid--c4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid--c4{grid-template-columns:1fr}}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
a.card{text-decoration:none;color:inherit}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.card__img{aspect-ratio:16/10;overflow:hidden;background:var(--wash)}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.card:hover .card__img img{transform:scale(1.05)}
.card__body{padding:1.5rem;display:flex;flex-direction:column;flex:1}
.card__body h3{font-size:1.18rem;margin-bottom:.5rem;font-weight:600}
.card__body p{font-size:.95rem;color:var(--muted);margin-bottom:1.1rem}
.card__link{margin-top:auto;font-weight:600;color:var(--navy-600);font-size:.93rem;display:inline-flex;gap:.4rem;align-items:center}
.card:hover .card__link{gap:.65rem}
.card__link svg{transition:transform var(--t)}

.feature{padding:1.75rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.section--wash .feature{background:#fff}
.feature__ico{
  width:46px;height:46px;border-radius:12px;background:var(--navy-900);color:var(--accent);
  display:grid;place-items:center;margin-bottom:1.1rem;
}
.feature h3{font-size:1.08rem;margin-bottom:.45rem;font-weight:600}
.feature p{font-size:.94rem;color:var(--muted);margin:0}

/* ---------- reviews ---------- */
.review{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.65rem;
  display:flex;flex-direction:column;
}
.review__stars{color:var(--star);letter-spacing:.09em;font-size:1rem;margin-bottom:.85rem}
.review blockquote{margin:0 0 1.25rem;font-size:.97rem;color:var(--ink);line-height:1.6}
.review__who{display:flex;align-items:center;gap:.75rem;margin-top:auto}
.review__av{
  width:40px;height:40px;border-radius:50%;background:var(--navy-700);color:#fff;
  display:grid;place-items:center;font-size:.82rem;font-weight:600;flex-shrink:0;letter-spacing:.03em;
}
.review__who strong{display:block;font-size:.93rem;color:var(--ink);font-weight:600}
.review__who span{font-size:.8rem;color:var(--muted)}

/* ---------- before / after slider ---------- */
.ba{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--navy-900);
  aspect-ratio:1/1;touch-action:pan-y;user-select:none;cursor:ew-resize}
@media (max-width:620px){.ba{aspect-ratio:4/5}}
/* Most of these are phone photos of car interiors shot portrait. Anchoring
   the crop to the upper-middle keeps seats and dashboards in frame instead of
   slicing through them. */
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 38%;pointer-events:none}
/* Starts at 88%, not 50%: the tile opens showing the BEFORE almost full
   frame with a sliver of the after down the right edge, so the dirty photo
   is what stops the scroll and dragging left is what reveals the result. */
.ba__after{clip-path:inset(0 0 0 var(--pos,78%))}
.ba__handle{position:absolute;top:0;bottom:0;left:var(--pos,78%);width:3px;background:#fff;
  transform:translateX(-50%);pointer-events:none;box-shadow:0 0 14px rgba(0,0,0,.5)}
.ba__knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;
  border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--navy-800);
  box-shadow:0 4px 16px rgba(0,0,0,.4)}
.ba__tag{position:absolute;top:.85rem;font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:.35rem .75rem;border-radius:999px;pointer-events:none;
  background:rgba(0,14,26,.78);color:#fff;backdrop-filter:blur(4px)}
.ba__tag--b{left:.85rem}
.ba__tag--a{right:.85rem;background:var(--accent);color:var(--navy-900)}
.ba:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ---------- process ---------- */
.steps{counter-reset:s;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.step{position:relative;padding-top:4.9rem}
.step::before{
  counter-increment:s;content:counter(s);position:absolute;top:0;left:0;
  font-family:"Bebas Neue",Impact,sans-serif;font-size:2.6rem;line-height:1;
  width:60px;height:60px;border-radius:50%;background:var(--accent);color:var(--navy-900);
  display:grid;place-items:center;padding-top:.12em;
}
.step h3{font-size:1.08rem;margin-bottom:.45rem;font-weight:600}
.step p{font-size:.94rem;color:var(--muted);margin:0}
.section--dark .step p{color:#93a5b4}

/* ---------- compare table ---------- */
.compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}
.compare__col{border-radius:var(--radius);padding:1.75rem;border:1px solid var(--line);background:#fff}
.compare__col--bad{background:#fef6f6;border-color:#f3dada}
.compare__col--good{background:#f2fbf5;border-color:#cfe9d8}
.compare__col h3{font-size:1.05rem;margin-bottom:1.1rem;font-weight:600}
.compare__col ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.compare__col li{display:flex;gap:.6rem;font-size:.94rem;align-items:flex-start;line-height:1.5}
.compare__col li svg{flex-shrink:0;margin-top:.22rem}
.compare__col--bad li svg{color:#c74343}
.compare__col--good li svg{color:#2c8a4e}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  padding:1.25rem 2.5rem 1.25rem 0;cursor:pointer;font-weight:600;color:var(--ink);
  font-size:1.03rem;list-style:none;position:relative;line-height:1.45;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.35rem;top:1.65rem;width:10px;height:10px;
  border-right:2px solid var(--navy-500);border-bottom:2px solid var(--navy-500);
  transform:rotate(45deg);transition:transform var(--t);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{padding:0 2.5rem 1.4rem 0;color:var(--muted);font-size:.97rem;margin:0}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- quote / form ---------- */
.quote{
  background:
    radial-gradient(90% 70% at 15% 0%,rgba(36,192,240,.16),transparent 60%),
    linear-gradient(180deg,#062031,#00131f);
  color:#b9c6d2;scroll-margin-top:90px;
}
.quote__inner{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.quote h2{color:#fff}
.quote ul{list-style:none;margin:1.75rem 0 0;padding:0;display:grid;gap:.85rem}
.quote ul li{display:flex;gap:.7rem;align-items:flex-start;font-size:.97rem;color:#cfdae4}
.quote ul svg{flex-shrink:0;margin-top:.25rem;color:var(--accent)}
/* The GHL form renders its own dark fields. On a white card they looked like
   holes punched in paper, so the container matches the form instead of
   fighting it. */
.quote__form{background:#17334d;
  border:1px solid rgba(36,192,240,.28);border-radius:var(--radius-lg);
  padding:1rem;box-shadow:0 24px 60px -20px rgba(0,0,0,.65);overflow:hidden}
/* Floor only, and it must stay BELOW the height attribute that build.py puts
   on the iframe or it silently becomes the real height.
   CORRECTED 2026-10-11: the comment here used to say form_embed.js sets an
   explicit height once the form reports its size. It does NOT - measured on
   the live site, `iframe.style.height` is empty and the rendered height came
   entirely from the 620px floor and the height attribute. So when two fields
   were removed from the form the iframe did not shrink, and about 200px of
   dead space appeared under the Get Quote button.
   The form's real content is 528px tall (submit button ends at 481), measured
   by loading the widget URL directly at 360px and 470px wide - identical at
   both. 520 is the floor, 560 is the attribute, and the ~30px over content
   leaves room for a Turnstile challenge to appear without being clipped. */
/* GHL serves the SAME form with two different placeholder colours depending on
   the rendered width: white below roughly 480px, black above it. The hero form
   was 443px (white, readable) and the footer form 525px (black on a dark field,
   invisible). Capping both under that breakpoint keeps every form on the
   readable variant. Verified by sweeping the width live. */
.quote__form iframe{width:100%;max-width:470px;margin-inline:auto;border:0;display:block;
  border-radius:var(--radius);min-height:520px;background:transparent}
@media (max-width:900px){.quote__inner{grid-template-columns:1fr}}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.split img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;object-fit:cover;aspect-ratio:4/5}
.split--flip .split__media{order:2}
@media (max-width:860px){
  .split{grid-template-columns:1fr}
  .split--flip .split__media{order:0}
  .split img{aspect-ratio:16/11}
}

.ticks{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.7rem}
.ticks li{display:flex;gap:.65rem;align-items:flex-start;font-size:.98rem;line-height:1.55}
.ticks li svg{flex-shrink:0;margin-top:.25rem;color:var(--navy-500)}
.section--dark .ticks li{color:#cfdae4}
.section--dark .ticks li svg{color:var(--accent)}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-900);color:#8b9dad;padding-block:clamp(3rem,6vw,4.5rem) 2rem;font-size:.93rem}
.site-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
.site-footer img.flogo{height:44px;width:auto;margin-bottom:1.1rem}
.site-footer h4{color:#fff;font-size:.79rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.1rem;font-weight:600}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.site-footer a{color:#8b9dad;text-decoration:none;transition:color var(--t)}
.site-footer a:hover{color:var(--accent)}
.site-footer__bar{border-top:1px solid rgba(255,255,255,.09);padding-top:1.75rem;
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.85rem;color:#6b7c8c}
@media (max-width:760px){.site-footer__grid{grid-template-columns:1fr;gap:2rem}}

/* ---------- closing CTA ----------
   Sat between the dark quote band and the dark footer, a third navy block read
   as one long slab. This one goes brand-blue so the last ask stands out. */
.section--cta{
  background:linear-gradient(135deg,var(--accent) 0%,#0f9ed0 55%,#0b7fa8 100%);
  color:var(--accent-ink);position:relative;overflow:hidden;
}
.section--cta::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,.20) 1.4px,transparent 1.4px);
  background-size:26px 26px;
}
.section--cta h2{color:var(--navy-900)}
.section--cta .lede{color:rgba(4,34,46,.82)}
.section--cta .btn--accent{background:var(--navy-900);color:#fff;box-shadow:0 8px 26px -8px rgba(0,0,0,.5)}
.section--cta .btn--accent:hover{background:#052232}
.section--cta .btn--ghost{color:var(--navy-900);border-color:rgba(4,34,46,.45)}
.section--cta .btn--ghost:hover{background:var(--navy-900);color:#fff;border-color:var(--navy-900)}

/* ---------- sticky mobile call bar ---------- */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:.6rem;padding:.65rem;
  background:rgba(0,14,26,.96);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.12);
}
.callbar .btn{flex:1;padding:.9rem .6rem;font-size:.95rem}
@media (max-width:700px){
  .callbar{display:flex}
  body{padding-bottom:74px}
}

/* ---------- back to top (mobile and desktop, see the desktop block below) ---------- */
/* Pages here run long: the suburb pages are ~1,300 words and the problem
   pages 3,600, which is a lot of thumb on a phone. Mobile only, because a
   desktop mouse has a scroll wheel and the header is sticky anyway.
   It sits ABOVE the sticky call bar - that bar is fixed at bottom:0 and 74px
   tall under 700px, so anything lower than that is simply covered up. The
   call bar keeps the right-hand side, so this goes left, where nothing else
   is competing for the thumb. */
.totop{
  position:fixed;left:.85rem;bottom:calc(74px + .85rem);z-index:69;
  width:44px;height:44px;border-radius:50%;display:none;
  align-items:center;justify-content:center;
  /* Solid navy with an accent ring, not a translucent white-bordered pill.
     The sections alternate navy and white down every page, and a white border
     simply vanishes on the white ones - it read as an accidental dark blob
     sitting on the headings. The accent ring reads as a control on both. */
  background:var(--navy-900);color:#e8f3fa;
  border:1.5px solid rgba(36,192,240,.55);
  box-shadow:0 4px 14px rgba(0,14,26,.4);
  opacity:0;transform:translateY(8px);transition:opacity .22s ease,transform .22s ease;
}
.totop svg{width:20px;height:20px}
/* .is-on is added by site.js once the reader is far enough down the page. */
.totop.is-on{opacity:1;transform:translateY(0)}
@media (max-width:700px){
  .totop:not([hidden]){display:flex}
}
@media (prefers-reduced-motion:reduce){
  .totop{transition:none}
}

/* ---------- desktop sticky: Instant Quote + Call pill, with back to top ----------
   Added 2026-10-21 (Zaak). Above 700px the full-width call bar becomes a small
   floating pill bottom right, and the back-to-top circle sits above it. Both
   fade in after a short scroll (site.js adds .is-on); the header is sticky too
   but its quote button is hidden under 1240px and the call button under 1400px. */
@media (min-width:701px){
  .callbar{
    display:flex;left:auto;right:1.25rem;bottom:1.25rem;gap:.5rem;padding:.45rem;
    border-radius:999px;border:1px solid rgba(36,192,240,.35);
    box-shadow:0 10px 30px rgba(0,14,26,.45);
    opacity:0;transform:translateY(12px);pointer-events:none;
    transition:opacity .22s ease,transform .22s ease;
  }
  .callbar.is-on{opacity:1;transform:translateY(0);pointer-events:auto}
  .callbar .btn{flex:none;padding:.7rem 1.3rem;font-size:.95rem;border-radius:999px;white-space:nowrap}
  .totop{left:auto;right:1.25rem;bottom:calc(1.25rem + 62px)}
  .totop:not([hidden]){display:flex}
}
@media (min-width:701px) and (prefers-reduced-motion:reduce){
  .callbar{transition:none}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:var(--navy-900);
  padding:.8rem 1.3rem;border-radius:0 0 8px 0;font-weight:600;text-decoration:none}
.skip:focus{left:0}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem}
.shot{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--wash);
  box-shadow:var(--shadow);aspect-ratio:3/4}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.shot:hover img{transform:scale(1.04)}

/* ---------- hero CTA emphasis ---------- */
.btn--lg{padding:1.2rem 2.3rem;font-size:1.06rem}
.hero__cta{margin-bottom:1.1rem}
.hero__cta .btn--accent{
  box-shadow:0 8px 30px -6px rgba(36,192,240,.6);
  animation:ctaBreathe 3.2s ease-in-out infinite;
}
@keyframes ctaBreathe{
  0%,100%{box-shadow:0 8px 30px -6px rgba(36,192,240,.5)}
  50%{box-shadow:0 10px 40px -6px rgba(36,192,240,.85)}
}
@media (prefers-reduced-motion:reduce){.hero__cta .btn--accent{animation:none}}

.hero__reassure{
  display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  font-size:.9rem;color:#9fb2c1;margin:0;
}
.pulse{
  width:9px;height:9px;border-radius:50%;background:var(--accent);flex-shrink:0;
  box-shadow:0 0 0 0 rgba(36,192,240,.75);animation:pulseDot 2s infinite;
}
@keyframes pulseDot{
  70%{box-shadow:0 0 0 9px rgba(36,192,240,0)}
  100%{box-shadow:0 0 0 0 rgba(36,192,240,0)}
}
@media (prefers-reduced-motion:reduce){.pulse{animation:none}}

.hero__badge{
  position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;
  background:var(--accent);color:var(--navy-900);font-weight:600;font-size:.87rem;
  padding:.6rem 1.15rem;border-radius:999px;
  box-shadow:0 10px 28px -8px rgba(0,0,0,.7);
}
@media (max-width:900px){.hero__badge{font-size:.8rem;padding:.5rem .95rem}}

/* ---------- review wall ----------
   Masonry-ish columns rather than a grid: reviews vary a lot in length, and a
   grid forces every card in a row to the tallest one, leaving big gaps. */
/* margin-top was -1rem, which yanked the button up into the section heading
   above it and made it collide at some widths (Zaak, 2026-09-28). Normal
   spacing instead, and the button no longer stretches full width on a phone -
   a 375px-wide pill reads as a banner rather than a button. */
.review__browse{text-align:center;margin:.5rem 0 2.5rem}
.review__browse .btn{display:inline-flex;width:auto}
@media (max-width:640px){
  .review__browse{margin:.25rem 0 2rem}
  .review__browse .btn{padding:.85rem 1.2rem;font-size:.92rem}
}
.reviews-grid{columns:3 300px;column-gap:1.4rem}
.reviews-grid > .review{break-inside:avoid;margin:0 0 1.4rem}
.review.is-more{display:none}
.reviews-grid.is-expanded .review.is-more[data-shown="1"]{display:flex}

.review{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem;display:flex;flex-direction:column;box-shadow:var(--shadow);
}
.review blockquote{
  margin:0 0 1.2rem;font-size:.96rem;color:var(--ink);line-height:1.6;
  quotes:"\201C" "\201D";
}
.review blockquote::before{content:open-quote;color:var(--accent);font-weight:700}
.review blockquote::after{content:close-quote;color:var(--accent);font-weight:700}
.review__stars{color:var(--star);letter-spacing:.09em;font-size:.95rem;margin-bottom:.8rem}
.review__who{display:flex;align-items:center;gap:.75rem;margin-top:auto}
.review__av{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;font-size:.82rem;font-weight:700;letter-spacing:.03em;
  color:#fff;
  background:linear-gradient(140deg,hsl(var(--h) 62% 52%),hsl(var(--h) 58% 38%));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.6),0 2px 6px rgba(4,24,38,.22);
}
.review__who strong{display:block;font-size:.93rem;color:var(--ink);font-weight:600;line-height:1.3}
.review__who > span > span{font-size:.79rem;color:var(--muted)}

.review__more{text-align:center;margin-top:2rem}
.review__count{font-size:.85rem;color:var(--muted);margin:.9rem 0 0}
@media (max-width:640px){.reviews-grid{columns:1}}

/* Two up, never three. A wider slider is easier to drag, and the paired
   photos only read properly at this size. */
.ba-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(2,1fr)}
@media (max-width:720px){.ba-grid{grid-template-columns:1fr}}

/* ---------- hero quote form ----------
   The form replaces the hero photo on lead-gen pages: the car sells the
   service further down, but nothing converts like the form being the first
   thing in reach. */
/* THE GHL IFRAME IS TRANSPARENT, and the comment further down this file
   saying otherwise was wrong. Proven 2026-10-04 by painting this wrapper red
   on the live page: the red came straight through the whole form area, not
   just the padding ring. So the hero photo can show through and the card stops
   reading as a flat slab dropped on top of the picture.

   Kept dark and heavily blurred rather than properly see-through, because the
   form's own labels are white and the hero behind it is a bright daytime shot.
   Anything lighter than this and "Full Name" stops being readable over the
   sky. */
.hero__formwrap{
  background:rgba(13,37,58,.72);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  backdrop-filter:blur(18px) saturate(130%);
  border:1px solid rgba(36,192,240,.38);border-radius:var(--radius-lg);
  padding:1rem 1rem .5rem;box-shadow:0 28px 70px -22px rgba(0,0,0,.8);
}
/* Safari and anything without backdrop-filter gets the old solid card, which
   is the right fallback: readable beats pretty. */
@supports not (backdrop-filter:blur(2px)){
  .hero__formwrap{background:#17334d}
}
.hero__formhead{
  display:flex;align-items:center;gap:.5rem;justify-content:center;
  margin:0 0 .65rem;font-size:.86rem;font-weight:600;color:var(--accent);
  letter-spacing:.02em;
}
.hero__formwrap .quote__form{
  background:none;border:0;padding:0;box-shadow:none;
}
.hero .hero__badge{bottom:-15px}
@media (max-width:900px){
  .hero__media{max-width:520px;width:100%}
  .hero__formwrap{padding:.85rem .85rem .4rem}
}
/* Sits over the form's lower edge — must never intercept a click on Submit. */
.hero__badge{pointer-events:none}

/* ---------- assurance band ----------
   A slim repeating strip, not a section. People commit at different scroll
   depths, so the guarantee sits near every decision point rather than once. */
.assure{
  background:linear-gradient(90deg,var(--accent) 0%,#0f9ed0 50%,#0b7fa8 100%);
  color:var(--accent-ink);padding-block:1.05rem;
}
.assure__row{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.6rem 2.4rem;text-align:center;
}
.assure__item{display:inline-flex;align-items:center;gap:.6rem;line-height:1.25}
.assure__item svg{flex-shrink:0}
.assure__item b{font-size:.97rem;font-weight:700;color:var(--navy-900)}
.assure__item em{font-style:normal;font-size:.86rem;color:rgba(4,34,46,.72)}
@media (max-width:760px){
  .assure__row{gap:.75rem 1.4rem}
  .assure__item{flex-direction:row;font-size:.9rem}
  .assure__item em{display:none}
}

/* ---------- mega menu ----------
   Thirteen pages need grouping. Hover opens it on desktop, click on touch,
   and it is keyboard reachable either way. */
.navitem{position:relative;display:flex;align-items:center}
.navitem__btn,.navitem__link{
  display:inline-flex;align-items:center;gap:.35rem;background:none;border:0;
  color:#cdd8e2;font:inherit;font-size:.92rem;font-weight:500;cursor:pointer;
  padding:.55rem .8rem;border-radius:8px;text-decoration:none;white-space:nowrap;
  transition:color var(--t),background var(--t);
}
.navitem__btn:hover,.navitem__link:hover{color:#fff;background:rgba(255,255,255,.08)}
.navitem__btn.is-active,.navitem__link[aria-current="page"]{color:var(--accent)}
.navitem__btn svg{transition:transform var(--t)}
.navitem--has-menu:hover .navitem__btn svg,
.navitem__btn[aria-expanded="true"] svg{transform:rotate(90deg)}
.navitem__btn:focus-visible,.navitem__link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.mega{
  position:absolute;top:100%;left:50%;transform:translate(-50%,6px);
  min-width:640px;padding-top:.75rem;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--t),transform var(--t),visibility var(--t);
}
.navitem--has-menu:hover .mega,
.navitem--has-menu .navitem__btn[aria-expanded="true"] + .mega{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
}
.mega__inner{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;
  background:#04202f;border:1px solid rgba(36,192,240,.28);
  border-radius:var(--radius-lg);padding:1.5rem;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.75);
}
.megacol h4{
  color:var(--accent);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 .75rem;font-weight:700;
}
.megacol a{
  display:block;color:#cdd8e2;text-decoration:none;font-size:.9rem;
  padding:.45rem .6rem;margin-left:-.6rem;border-radius:7px;
  transition:color var(--t),background var(--t);
}
.megacol a:hover{color:#fff;background:rgba(36,192,240,.14)}
.megacol a[aria-current="page"]{color:var(--accent);font-weight:600}

@media (max-width:1100px){
  .navitem,.navitem--has-menu{display:block;width:100%}
  .navitem__btn,.navitem__link{
    width:100%;justify-content:space-between;padding:.85rem .25rem;
    border-bottom:1px solid rgba(255,255,255,.07);border-radius:0;font-size:1rem;
  }
  .mega{
    position:static;transform:none;min-width:0;padding-top:0;
    display:none;opacity:1;visibility:visible;pointer-events:auto;
  }
  .navitem--has-menu .navitem__btn[aria-expanded="true"] + .mega{
    display:block;transform:none;left:auto;
  }
  .mega__inner{
    grid-template-columns:1fr;gap:1.1rem;background:none;border:0;
    box-shadow:none;padding:.5rem 0 .9rem .75rem;
  }
  .megacol a{padding:.5rem 0;border-bottom:0}
}

/* ---------- thank you ---------- */
.thanks-hero{
  background:radial-gradient(90% 80% at 50% 0%,rgba(36,192,240,.22),transparent 65%),
             linear-gradient(180deg,#00131f,#000e1a);
  padding-block:clamp(3.5rem,8vw,6rem);text-align:center;
}
.thanks-hero__in{max-width:56ch;margin-inline:auto}
.thanks-hero h1{color:#fff;margin-bottom:.6rem}
.thanks-hero .lede{color:#a9bfcd;margin:0 auto 1.5rem}
.thanks-tick{
  display:grid;place-items:center;width:84px;height:84px;margin:0 auto 1.75rem;
  border-radius:50%;background:rgba(36,192,240,.16);color:var(--accent);
  border:2px solid rgba(36,192,240,.5);animation:tickPop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes tickPop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.thanks-tick{animation:none}}

/* The impatient-customer escape hatch. Sits inside the thank-you hero so it is
   visible without scrolling, but framed as an alternative rather than a second
   ask - they have already converted, so this must not read like another form. */
.thanks-book{
  margin-top:2.25rem;padding:1.6rem 1.4rem;border-radius:var(--radius-lg);
  background:rgba(255,255,255,.05);border:1px solid rgba(36,192,240,.3);
}
.thanks-book__kick{
  font-family:"Bebas Neue",Impact,sans-serif;font-size:1.6rem;line-height:1;
  letter-spacing:.01em;color:#fff;margin:0 0 .45rem;
}
.thanks-book__sub{
  color:#a9bfcd;font-size:.95rem;line-height:1.5;margin:0 auto 1.25rem;max-width:44ch;
}
.thanks-book .btn{width:100%;max-width:26rem}
@media (max-width:520px){
  .thanks-book{padding:1.35rem 1.1rem}
  .thanks-book__kick{font-size:1.4rem}
  /* Keeps the label on one line at 375px instead of wrapping mid-phrase. */
  .thanks-book .btn{font-size:.92rem;padding-inline:.9rem;gap:.45rem}
}

.tact-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.tact{
  display:block;text-decoration:none;padding:1.4rem;border-radius:var(--radius);
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);
  transition:border-color var(--t),transform var(--t),background var(--t);
}
.tact:hover{transform:translateY(-3px);border-color:var(--accent);background:rgba(36,192,240,.1)}
.tact__ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
  background:rgba(36,192,240,.16);color:var(--accent);margin-bottom:.9rem}
.tact b{display:block;color:#fff;font-size:1.02rem;margin-bottom:.3rem}
.tact em{font-style:normal;display:block;color:#93a9ba;font-size:.89rem;line-height:1.5}

/* GHL renders its own placeholders at 12px/300 inside the iframe, which is too
   thin to read on a large screen and not restylable from outside. The guidance
   is restated here at a legible size. */
.quote__hint{
  margin:0 0 .9rem;padding:.75rem .9rem;border-radius:10px;
  background:rgba(36,192,240,.12);border:1px solid rgba(36,192,240,.3);
  color:#dbe9f2;font-size:.88rem;line-height:1.5;
}
.quote__hint b{color:#fff;font-weight:600}

/* ---------- hero trust tiles ---------- */
/* Three answers to the three things that stop a stranger filling the form:
   how long will this take, what if the work is bad, what if something gets
   damaged. One bordered row rather than three cards, so it reads as a strip
   of reassurance and not as more content to get through. */
.hero__trust{
  margin-top:1.6rem;display:flex;align-items:stretch;
  border:1px solid rgba(36,192,240,.25);border-radius:14px;overflow:hidden;
  background:rgba(0,20,36,.45);
}
.hero__item,.hti__item{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:.45rem;padding:1.05rem .85rem;
}
.hti__div{width:1px;background:rgba(36,192,240,.2);align-self:stretch;flex:none}
.hti__icon{
  width:42px;height:42px;border-radius:10px;display:inline-flex;
  align-items:center;justify-content:center;flex-shrink:0;
  background:rgba(36,192,240,.14);color:var(--accent);
}
.hti__title{font-weight:700;font-size:.82rem;color:#fff;line-height:1.3}
.hti__desc{font-size:.76rem;color:#9fb2c1;line-height:1.4}
/* Zaak, 2026-09-28: keep the three columns SIDE BY SIDE on a phone, the way
   his GoHighLevel hero does it. The stacked version was right that the words
   get tight and wrong about the trade - stacking cost roughly 170px of height
   directly above the form, and three short columns read as one strip of
   reassurance taken in at a glance rather than three more things to scroll
   past. So the columns stay and the type and icon shrink instead. */
@media (max-width:520px){
  .hti__item{padding:.85rem .35rem;gap:.4rem}
  .hti__icon{width:34px;height:34px;border-radius:9px}
  .hti__icon svg{width:18px;height:18px}
  .hti__title{font-size:.71rem;line-height:1.25}
  .hti__desc{font-size:.64rem;line-height:1.3}
}

/* The two hero buttons sit beside each other on a phone too (same ask). They
   wrapped because .btn--lg carries desktop padding, so each is given an equal
   share of the row and the accent button's arrow is dropped - it is
   decoration and on a 375px screen it costs a line break. */
@media (max-width:640px){
  .hero__cta{flex-wrap:nowrap;gap:.6rem}
  .hero__cta .btn{flex:1 1 0;min-width:0;justify-content:center;text-align:center;
                  padding:.95rem .55rem;font-size:.88rem;line-height:1.25}
  .hero__cta .btn--accent svg{display:none}
  .hero__cta .btn--ghost svg{flex:none;width:16px;height:16px}
}

/* ---------- "Replying now" on the quote form ---------- */
.quote__hint--live{
  display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  color:#dbe9f2;font-weight:500;
  /* Only 14px of the gap between this badge and the first field was ever
     ours. The rest is padding INSIDE the GHL iframe, which is cross origin
     and cannot be styled from here.
     A -14px pull on the iframe was tried on 2026-09-29 and REVERTED the same
     day because it clipped this badge. The reason recorded at the time - "the
     iframe has an opaque background" - was WRONG: a red-background test on
     2026-10-04 showed the iframe is transparent throughout. Our margin stays at zero,
     which is the whole of the safe saving. **The remaining gap has to be
     closed in the GHL form builder**, on the form's own top padding. */
  margin-bottom:0;
}
.quote__hint--live b{color:#fff;font-weight:700}

/* ---------- service tiles ---------- */
/* The photo with the name on it, description on hover. Ported from the grid on
   highshineclub.com.au (Zaak, 2026-09-17). Set per section with `tile: True`,
   never globally - see s_services() in build.py for why.

   The picture is dimmed at rest so a white name is readable over ANY of the
   eight photos without a per-image scrim, and dimmed further on hover so the
   revealed paragraph has something to sit on. */
.svctiles{display:grid;gap:1.25rem;grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.svctiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.svctiles{grid-template-columns:1fr}}

.svctile{
  position:relative;display:block;overflow:hidden;text-decoration:none;
  border-radius:var(--radius);background:var(--navy-900);aspect-ratio:4/3;
  box-shadow:var(--shadow);
}
.svctile__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.55);
  transition:transform .5s cubic-bezier(.4,0,.2,1),filter .4s;
}
.svctile__veil{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,8,16,.78) 0%,transparent 62%);
  transition:background .4s;
}
.svctile__in{
  position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:flex-end;padding:1.6rem 1.35rem;
}
.svctile__name{
  color:#fff;font-size:clamp(1.35rem,2vw,1.75rem);line-height:1;
  margin-bottom:.45rem;
}
.svctile__desc,.svctile__cta{display:block}
.svctile__desc{font-size:.92rem;line-height:1.5;color:#d3e0ea}
.svctile__cta{
  margin-top:.6rem;color:var(--accent);font-weight:700;font-size:.88rem;
  display:inline-flex;align-items:center;gap:.4rem;
}
.svctile:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* HOVER-CAPABLE POINTERS ONLY.
   Gating the hide on `hover: hover` is the whole reason phone users still get
   the copy: a touch device has no hover state, so anything hidden this way
   would be hidden from them for ever, and mobile is most of this traffic. */
@media (hover:hover){
  .svctile__desc,.svctile__cta{
    max-height:0;opacity:0;overflow:hidden;
    transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .35s;
  }
  .svctile:hover .svctile__desc,.svctile:focus-visible .svctile__desc{
    max-height:9rem;opacity:1;
  }
  .svctile:hover .svctile__cta,.svctile:focus-visible .svctile__cta{
    max-height:2.5rem;opacity:1;
  }
  .svctile:hover .svctile__img,.svctile:focus-visible .svctile__img{
    transform:scale(1.07);filter:brightness(.3);
  }
  .svctile:hover .svctile__veil,.svctile:focus-visible .svctile__veil{
    background:linear-gradient(to top,rgba(0,26,46,.92) 0%,rgba(0,26,46,.55) 100%);
  }
}
@media (prefers-reduced-motion:reduce){
  .svctile__img,.svctile__veil,.svctile__desc,.svctile__cta{transition:none}
}

/* ---------- service tiles: the TOUCH treatment ----------
   No hover exists on a phone, so the copy is permanently on show (see the
   hover:hover gate above). That created a legibility problem the desktop
   version never has: on desktop the paragraph only ever appears together with
   the darker hover veil, but on touch it was sitting on the light REST veil.
   MEASURED across all eight photos at 375px: the description ran 2.52 to 4.03
   against a 4.5 floor - every single tile failed, worst over the bright orange
   car. So this is a legibility fix, not a restyle.

   The veil is the SAME darkness desktop uses when that text is visible
   (Zaak, 2026-09-17: "leave the same opacity as desktop"), and the tile goes
   SQUARE rather than 4:3 to earn the room: the text block needs ~184px, which
   in a 254px-tall 4:3 tile leaves no clear photo at all, while a 338px square
   keeps a real photo zone up top and puts the words on solid dark below.
   Re-measured after: description 11.5 to 12.0, name 15+, CTA 7.7+. */
@media (hover:none){
  .svctile{aspect-ratio:1/1}
  /* LIGHTENED 2026-09-29 on Zaak's call: the cars were barely visible on a
     phone. Brightness .55 under a veil running .94/.88/.30 meant the photo
     was doing almost no work, and the photo is the reason the tile exists.
     The veil still sits heaviest at the BOTTOM, which is where the text is
     (the tile is flex-end), so the contrast that mattered is kept while the
     top two thirds of the car come back. Text measured at 11.5:1 before this;
     AA needs 4.5:1, so there was a lot of headroom to spend. Re-check the
     description against the photo if these numbers are touched again. */
  .svctile__img{filter:brightness(.78)}
  .svctile__veil{
    background:linear-gradient(to top,
      rgba(0,26,46,.90) 0%,rgba(0,26,46,.72) 58%,rgba(0,26,46,.12) 100%);
  }
  /* Touch feedback, standing in for hover. A press is the only signal a phone
     can give that the whole tile is the link, so it has to be visible. */
  .svctile:active{transform:scale(.985)}
  .svctile:active .svctile__img{filter:brightness(.42)}
  .svctile:active .svctile__cta{color:var(--accent-bright)}
  .svctile{transition:transform .18s ease}
}


/* ---------- review claims link to the Google profile ---------- */
/* These elements were plain text before, so the link must not introduce
   underlines or a colour shift. Only the hover state announces it is clickable,
   which keeps the layout identical while making every claim checkable. */
a.rating-chip,a.stat--a,a.feature--a{text-decoration:none;color:inherit;cursor:pointer}
a.rating-chip:hover{border-color:rgba(36,192,240,.85);background:rgba(36,192,240,.40)}
a.stat--a:hover .stat__n,a.feature--a:hover h3{color:var(--accent)}
a.feature--a:hover{border-color:rgba(36,192,240,.45)}
.rev-a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(36,192,240,.5)}
.rev-a:hover{color:var(--accent);border-bottom-color:var(--accent)}
a.rating-chip:focus-visible,a.stat--a:focus-visible,
a.feature--a:focus-visible,.rev-a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- team (About page) ---------- */
/* Portrait cards. 3-up on desktop so five people wrap 3+2 and the founder
   leads the second row rather than sitting alone on a third. */
.team-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.member{margin:0;background:#fff;border:1px solid rgba(11,42,66,.1);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:0 2px 14px rgba(11,42,66,.06);
  transition:transform var(--t),box-shadow var(--t)}
.member:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(11,42,66,.12)}
.member__img{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--navy-900)}
.member__img img{width:100%;height:100%;object-fit:cover;display:block}
.member__body{padding:1.25rem 1.35rem 1.5rem}
.member__body h3{margin:0 0 .15rem;font-size:1.3rem}
.member__role{margin:0 0 .7rem;color:var(--accent-deep);font-size:.84rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase}
.member__body p:last-child{margin:0;font-size:.94rem;line-height:1.55;color:var(--ink-soft)}
/* On the dark grounds the card has to invert or it glows. */
.ground--navy .member,.ground--ocean .member,.ground--deep .member{
  background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);box-shadow:none}
.ground--navy .member__body h3,.ground--ocean .member__body h3,.ground--deep .member__body h3{color:#fff}
.ground--navy .member__role,.ground--ocean .member__role,.ground--deep .member__role{color:var(--accent)}
.ground--navy .member__body p:last-child,.ground--ocean .member__body p:last-child,
.ground--deep .member__body p:last-child{color:#a9bfcd}

/* ---------- hero with an image instead of the quote form (/about) ---------- */
/* Sized and framed like the form card it replaces, so the hero grid does not
   shift and the right-hand column keeps its visual weight. */
.hero__pic{margin:0;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid rgba(36,192,240,.28);background:rgba(255,255,255,.04);
  box-shadow:0 18px 50px rgba(0,0,0,.35)}
.hero__pic img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.hero__pic figcaption{padding:.9rem 1.1rem;font-size:.88rem;color:#a9bfcd;
  text-align:center;border-top:1px solid rgba(255,255,255,.08)}
@media (max-width:900px){.hero__pic figcaption{font-size:.82rem}}

/* ---------- hero with a background photograph ---------- */
/* Two pseudo-elements rather than one: the image sits on ::before and the
   scrim on ::after, so the gradient can be tuned without touching the image
   and neither needs a wrapper div.

   The scrim is LOAD-BEARING. The headline is white and the photo contains
   bright sky and white snow foam, so without a heavy left-side darkening the
   copy is unreadable. It is deliberately asymmetric: near-opaque behind the
   text on the left, thinner on the right where the photo earns its keep and
   the opaque form card sits over it anyway. */
/* DESKTOP ONLY, and the media query is the whole point.
   On a phone this same photo behind this same box is upscaled ~2.2x and the
   opaque form card lands on the technician's back, which is exactly what Zaak
   rejected. Mobile keeps the band above the hero instead
   (.banner--mobile-only), and the two treatments are mutually exclusive. */
@media (min-width:901px){
  .hero--bg{position:relative;isolation:isolate;background:var(--navy-900)}
  .hero--bg::before{
    content:"";position:absolute;inset:0;z-index:-2;
    background-image:var(--hero-bg);
    /* --hero-bg-size exists because `cover` gives NO PAN ROOM on a wide
       screen, which made the pan setting silently useless exactly where it
       was needed. At 1920 the hero box is 1.95:1 against the photo's 1.78:1,
       so cover scales by WIDTH and the horizontal overflow is zero - the
       88% pan tuned at 1440 did nothing at all on Zaak's own monitor.
       Zooming past cover (e.g. `auto 132%`) creates the overflow that makes
       panning possible, and incidentally makes the subject bigger, which is
       what he asked for. Keep any zoom under ~135%: the source is 2672px
       wide, so beyond that it starts upscaling and goes soft. */
    /* Narrow desktop keeps plain cover, centred. The hero box is TALL here
       (the quote form sets the height) so it is nearly square, and any zoom on
       top of cover crops the sides hard - at 1100px a 132% zoom reduced the
       van to a sliver behind the form. */
    background-size:cover;
    background-position:center;background-repeat:no-repeat;
  }
  .hero--bg::after{
    content:"";position:absolute;inset:0;z-index:-1;
    /* "Slightly opaque ... so you can see the logos" (Zaak, 2026-09-14).
       MEASURED, not guessed: the composited hero is rasterised to a canvas and
       the worst-case pixel under each text block is read. This is the lightest
       set that still clears WCAG AA everywhere - h1 6.2:1, sub-headline 4.7:1,
       ticks 7.4:1, against a 4.5:1 floor for body text.
       The first attempt (.80/.66/.30/.16) looked better and put the
       sub-headline at 2.95:1, which is unreadable over the bright driveway.
       Going lighter on the 66% stop is also a dead end: the h1 runs past
       halfway, so it pays for that too and drops to 4.9:1.
       What actually made the logos visible was the PAN, not the scrim - see
       --hero-bg-pos.
       Stepped up TWICE on 2026-09-17 (.90/.80/.44/.24 -> .92/.84/.52/.34 ->
       .96/.91/.70/.54). The first step was too timid to see. The middle stop
       of the VERTICAL wash also came off full transparency (0 -> .14), which
       is most of why the photo still read bright: the horizontal gradient was
       doing all the work while a clear band ran through the middle of it.
       Zaak wanted it more
       opaque, matching his GHL hero. WORTH KNOWING - that GHL hero's scrim
       is byte-for-byte THESE SAME STOPS, so the two only looked different
       for structural reasons: the GHL page keeps its accent grid and blue
       glow layered OVER the scrim, and its hero box is 1080px tall against
       979 here, so the photo is framed tighter. Darkening further chases a
       difference the scrim was never causing. */
    background:
      linear-gradient(90deg,rgba(0,14,26,.96) 0%,rgba(0,14,26,.91) 34%,
                            rgba(0,14,26,.70) 66%,rgba(0,14,26,.54) 100%),
      linear-gradient(180deg,rgba(0,14,26,.52) 0%,rgba(0,14,26,.14) 38%,
                             rgba(0,14,26,.60) 100%);
  }
  /* The sub-headline is #a9bbc9, the dimmest text on the page. That is a fine
     muted tone on the flat navy hero and too weak over a photograph: measured
     across all 62 suburb backgrounds it fell below WCAG AA on 16 of them,
     worst 3.93:1 against a 4.5 floor, while the h1 and the ticks passed
     everywhere. Lifting it to the same #cfdae4 the ticks already use takes the
     worst case to ~5.5:1.
     Deliberately fixed HERE rather than by darkening the scrim: the scrim is
     shared by every page, so darkening it would dim 62 photographs to solve a
     problem caused by one colour. */
  .hero--bg .hero__sub{color:#cfdae4}

  /* The band and the background are the same file. Showing both would mean
     the photo twice in one screen. */
  .banner--mobile-only{display:none}
}

/* Wide desktop only. The per-page zoom and pan live here rather than at 901px
   because they only make sense once the hero box is wider than the photo's
   16:9 - which is where `cover` stops leaving any horizontal overflow to pan
   within. Below 1300px the rules above (plain cover, centred) apply. */
@media (min-width:1300px){
  .hero--bg::before{
    background-size:var(--hero-bg-size,cover);
    background-position:var(--hero-bg-pos,62% center);
  }
}

/* ---------- full-bleed photo band ---------- */
/* Shown at the image's own 16:9 rather than cover-cropped into a tall box.
   That is the whole point: as a hero background on a phone this same file was
   being upscaled ~2.2x and looked soft. Here it is downscaled, so it is sharp,
   and nothing is layered over it so the detail actually reads. */
.banner{padding:0;background:var(--navy-900)}
.banner__fig{margin:0;position:relative;line-height:0}
.banner__fig img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.banner__cap{
  position:absolute;left:0;right:0;bottom:0;line-height:1.4;
  padding:2.6rem 1.25rem 1rem;font-size:.9rem;color:#cfdae4;text-align:center;
  background:linear-gradient(180deg,rgba(0,14,26,0),rgba(0,14,26,.85));
}
@media (max-width:640px){
  /* Shorter than it was, so the eye carries on down into the hero and the
     form instead of stopping at a tall slab of photo (Zaak, 2026-09-15).
     250px tall at 375px wide -> 211px.
     It went 4:3 -> 3:2 -> 16:9, and each step improved TWO things at once,
     because a taller box crops a 16:9 source harder: 4:3 threw away 12.5% of
     the width at each edge and sliced the baked-in suburb name in half, 3:2
     lost 7.8%, and 16:9 is the source's own shape so it loses NOTHING. The
     whole composition now shows - van, technician, car and suburb name - and
     object-position stops mattering at all.
     The trade is that the photo is displayed 16% smaller, so the burned-in
     suburb name renders about 22px tall on the longest names. Still clearly
     readable; do not go shorter than this. */
  .banner__fig img{aspect-ratio:16/9;object-position:center}
  /* Zaak, 2026-09-28: the band was still too tall on a phone and pushed the
     form below the fold. 21:9 takes about 24% off the height. The crop is
     anchored at 30% rather than centre because the people are in the upper
     third and the bottom of these frames is driveway - so the height comes
     off the gravel, not off anyone's head. Suburb pages are deliberately
     excluded: their heroes have the suburb name baked into the pixels. */
  /* Shortened AGAIN 2026-10-11, 21:9 -> 32:9, and this time with the number
     measured rather than eyeballed. The band is 161px on a 375px phone, it is
     mobile ONLY, and it sits directly above the form on the device that
     converts at half of desktop. 32:9 takes it to about 105px. The photo
     stays, because mobile's hero carries the form instead of an image and
     without this band the top of the page is all type. */
  .banner--short .banner__fig img{aspect-ratio:32/9;object-position:center 30%}
  .banner__cap{font-size:.82rem;padding:1.6rem 1rem .7rem}
}

/* ---- the strap beside the logo ---- */
.header-strap{
  display:none;align-items:center;gap:.6rem;flex:0 1 auto;
  font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(219,233,242,.72);white-space:nowrap;margin-left:.4rem;
}
.header-strap i{
  display:block;width:clamp(14px,2.4vw,38px);height:1px;flex:0 0 auto;
  background:linear-gradient(90deg,transparent,var(--accent));
}
.header-strap i:last-child{background:linear-gradient(90deg,var(--accent),transparent)}
@media (min-width:1120px){.header-strap{display:flex}}

/* Nearby suburb links. Added 2026-10-04: every suburb page had exactly ONE
   inbound internal link (from /suburbs), so 217 pages hung off a single hub
   and Google had almost no internal signal to rank any of them on. Chips
   rather than a list, because six place names read faster wrapped than
   stacked, and they have to work at phone width. */
.nearby{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1.1rem}
/* Solid navy chips with white text. The first version was a 10% cyan tint
   with near-white text, which only read on a dark band; the suburb pages
   put this block on a light band and the names were nearly invisible
   (reported 2026-10-23). Solid fill works on either background. */
.nearby__a{
  display:inline-block;padding:.5rem 1.05rem;border-radius:999px;
  background:#0d3a57;border:1px solid #24c0f0;
  color:#fff;text-decoration:none;font-size:.92rem;font-weight:600;
  transition:background var(--t),border-color var(--t),color var(--t);
}
.nearby__a:hover{background:#24c0f0;border-color:#24c0f0;color:#06222f}

/* The Salisbury NAP block. Name, address, phone and hours visible ON the page
   rather than only inside JSON-LD - it is the one page with a real street
   address and it should look like it. */
.nap{
  display:grid;gap:.1rem;max-width:620px;margin:0 auto 1.4rem;
  text-align:left;border:1px solid rgba(36,192,240,.26);border-radius:var(--radius-lg);
  background:rgba(36,192,240,.055);padding:.35rem .25rem;
}
.nap__row{display:flex;gap:1rem;padding:.6rem .95rem;align-items:baseline}
.nap__row + .nap__row{border-top:1px solid rgba(255,255,255,.07)}
.nap__row b{flex:0 0 84px;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);font-weight:600}
.nap__row span{flex:1;font-size:.96rem}
@media (max-width:520px){
  .nap__row{flex-direction:column;gap:.2rem}
  .nap__row b{flex:none}
}

/* Keyless Google Maps embed. Lazy loaded and 16:9 so it cannot shift layout. */
.mapwrap{
  position:relative;width:100%;aspect-ratio:16/9;max-width:820px;margin:0 auto 1.3rem;
  border-radius:var(--radius-lg);overflow:hidden;border:1px solid rgba(36,192,240,.26);
  background:#10283b;
}
.mapwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* The price and spec line on a Car Care Tips product step. Reads as a label
   rather than prose, so the figure is the first thing the eye lands on. */
.spec{
  display:inline-block;margin:0 0 .9rem;padding:.5rem .95rem;
  background:rgba(36,192,240,.12);border:1px solid rgba(36,192,240,.30);
  border-radius:var(--radius-sm,10px);
  font-size:.86rem;line-height:1.5;font-weight:500;
}

/* Phone: the GHL form carries about 60px of dead padding down each side inside
   its iframe, so the fields only used ~60 percent of the card. Let the iframe
   run wider than its card and crop the dead edge (the card clips it). Total
   width is capped at 460px because GHL flips to black placeholders near 480px,
   which is invisible on this dark card. */
@media (max-width:640px){
  .hero__formwrap{padding:.6rem .35rem .3rem}
  .quote__form{padding:.5rem .25rem}
  .quote__form iframe{
    position:relative;left:50%;transform:translateX(-50%);
    max-width:none;width:min(calc(100% + 56px),460px);
  }
}

/* ---- THE SHORT VERSION box, at the top of a Car Care Tips post ----
   Zaak, 2026-10-22: the article hero should inform rather than sell. These
   pages already carry no form and no button above the fold, so the lever is
   making the top of the page answer the question straight away.

   Every US guide in the ceramic teardown opened with one of these and not a
   single one of the twenty Australian pages did. Plain text, no links: a
   reader scanning for the answer should not have to dodge anything to get
   to it. */
.section--tight{padding-block:1.4rem}
.takeaways{
  border:1px solid rgba(36,192,240,.28);
  border-left:4px solid var(--accent);
  border-radius:var(--radius);
  background:rgba(36,192,240,.055);
  padding:1.35rem 1.5rem 1.2rem;
}
.takeaways h2{
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .85rem;font-family:inherit;font-weight:800;
}
.takeaways ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.takeaways li{display:flex;gap:.6rem;align-items:flex-start;line-height:1.5}
.takeaways li svg{flex:0 0 auto;margin-top:.22rem;color:var(--accent)}
@media (max-width:560px){.takeaways{padding:1.1rem 1.1rem 1rem}}