:root{
  --red:#C8102E; --red-dark:#A00D25; --red-tint:#FDF2F4;
  --ink:#111111; --body:#3D3D3D; --muted:#767676;
  --hairline:#E5E5E5; --surface:#FFFFFF; --surface-alt:#FAFAFA;
  --blue:#2B7FD4; --green:#3EA95B; --yellow:#F5C518; --orange:#F08A24;
  --success:#1B7F3B;
  --r-card:8px; --r-btn:10px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(17,17,17,.06);
  --sh-md:0 4px 12px rgba(17,17,17,.08);
  --sh-lg:0 18px 40px rgba(17,17,17,.10);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --max:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font); color:var(--body);
  background:var(--surface); line-height:1.6;
  font-size:clamp(16px,0.4vw + 15px,17px);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{color:var(--ink); line-height:1.1; margin:0; letter-spacing:-0.02em; font-weight:800}
h1{font-size:clamp(32px,3.9vw,46px)}                      /* page title */
.display{font-size:clamp(38px,5.6vw,68px); letter-spacing:-0.038em; line-height:1.02}  /* hero headline */
h2{font-size:clamp(24px,2.6vw,32px); letter-spacing:-0.025em}   /* section */
h3{font-size:clamp(19px,1.5vw,21px)}                            /* card title */
p{margin:0}
a{color:inherit}
img,svg{max-width:100%}
ul{margin:0; padding:0; list-style:none}
.tnum{font-variant-numeric:tabular-nums}

.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}
.stack>*+*{margin-top:var(--gap,16px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--hairline);
}
.hdr{display:flex; align-items:center; gap:16px; height:66px}
.mark{display:block; height:auto}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto}
.brand strong{font-size:15px; font-weight:800; color:var(--ink); letter-spacing:-.02em; line-height:1.15}
.brand small{display:block; font-size:10.5px; font-weight:600; color:var(--muted); letter-spacing:.14em; text-transform:uppercase}
nav.main{margin-left:auto; display:flex; gap:2px; align-items:center}
nav.main a{
  text-decoration:none; font-size:14.5px; font-weight:600; color:var(--body);
  padding:8px 11px; border-radius:var(--r-btn); white-space:nowrap;
}
nav.main a:hover{background:var(--surface-alt); color:var(--ink)}
nav.main a[aria-current="page"]{color:var(--ink); background:var(--surface-alt)}
nav.main a.btn{background:var(--ink); color:#fff; box-shadow:none; padding:9px 17px}
nav.main a.btn:hover{background:#000; color:#fff}
nav.main a.btn[aria-current="page"]{background:#000; color:#fff}
.hdr .call{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none; font-weight:700; font-size:14.5px;
  background:var(--red); color:#fff; padding:9px 15px; border-radius:var(--r-btn); box-shadow:0 6px 16px rgba(200,16,46,.25);
}
.hdr .call:hover{background:var(--red-dark)}
.burger{display:none; margin-left:auto; background:none; border:1px solid var(--hairline); border-radius:var(--r-btn); padding:9px 11px; cursor:pointer}
.burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px}
.burger span+span{margin-top:4px}
@media (max-width:940px){
  nav.main{
    position:fixed; inset:66px 0 auto 0; background:#fff; border-bottom:1px solid var(--hairline);
    flex-direction:column; align-items:stretch; padding:10px 14px 16px; gap:0; display:none;
    box-shadow:var(--sh-lg); max-height:calc(100vh - 66px); overflow:auto;
  }
  nav.main.open{display:flex}
  nav.main a{padding:12px 10px; font-size:16px; border-bottom:1px solid var(--hairline)}
  .burger{display:block}
  .hdr .call{display:none}
  .hdr .brand{margin-right:auto}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:15.5px; padding:13px 24px; border-radius:var(--r-btn);
  text-decoration:none; border:1px solid transparent; cursor:pointer; font-family:inherit;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .12s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--red); color:#fff; box-shadow:0 10px 24px rgba(200,16,46,.24)}
.btn-primary:hover{background:var(--red-dark)}
.btn-ghost{border-color:rgba(17,17,17,.38); color:var(--ink); background:transparent}
.btn-ghost:hover{background:var(--ink); color:#fff; border-color:var(--ink)}
/* Studio treatment. Red stays reserved for prices, promos and the primary CTA,
   so the Detailing Studio / Ceramic route gets the onyx fill instead. */
.btn-ink{background:var(--ink); color:#fff; box-shadow:0 10px 24px rgba(17,17,17,.22)}
.btn-ink:hover{background:#000; color:#fff}
.btn-light{background:#fff; color:var(--ink)}
.btn-light:hover{background:rgba(255,255,255,.9)}
.btn-outline-light{border-color:rgba(255,255,255,.45); color:#fff}
.btn-outline-light:hover{background:rgba(255,255,255,.12)}
.btn-sm{padding:9px 16px; font-size:14px}
.btn[disabled]{opacity:.45; pointer-events:none}

/* ---------- decorative ---------- */
.blob{position:absolute; border-radius:50%; filter:blur(64px); opacity:.30; pointer-events:none}
.glass{background:rgba(255,255,255,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--hairline)}
.card{background:#fff; border:1px solid var(--hairline); border-radius:14px; box-shadow:var(--sh-sm)}
.card-lift{transition:box-shadow .2s ease, transform .2s ease}
.card-lift:hover{box-shadow:var(--sh-lg); transform:translateY(-2px)}
.pill{
  display:inline-flex; align-items:center; gap:7px; border-radius:var(--r-pill);
  font-size:12px; font-weight:700; padding:5px 12px; background:var(--surface-alt);
  border:1px solid var(--hairline); color:var(--muted);
}
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.badge{
  display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px; border-radius:var(--r-pill); background:var(--red-tint); color:var(--red);
}
.badge.n{background:#EFF6FF;color:#1D4ED8}
.eyebrow{font-size:11.5px; font-weight:800; letter-spacing:.19em; text-transform:uppercase; color:var(--muted)}
.lead{color:var(--body); font-size:clamp(16.5px,1.1vw,18.5px); max-width:62ch}
.hr{height:1px; background:var(--hairline); border:0; margin:0}

section.band{padding:clamp(52px,7vw,88px) 0}
section.band.alt{background:var(--surface-alt); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline)}
.onyx{background:var(--ink); color:#fff}
.onyx h1,.onyx h2,.onyx h3,.onyx h4{color:#fff}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--hairline)}
.hero-grid{
  position:relative; z-index:2; display:grid; gap:44px; align-items:center;
  padding-top:clamp(44px,6vw,84px); padding-bottom:clamp(52px,7vw,92px);
}
@media (min-width:960px){ .hero-grid{grid-template-columns:1.05fr .95fr} }
.hero h1{margin-top:20px}
.trust{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:30px}
@media (max-width:560px){ .hero .btn{flex:1 1 100%} }
.trust li{display:flex; align-items:center; gap:9px; font-size:14.5px; font-weight:600; color:var(--body)}
.shield-wrap{position:relative; display:flex; justify-content:center}
.shield-glow{position:absolute; inset:8%; border-radius:50%; background:radial-gradient(closest-side,rgba(200,16,46,.20),transparent 72%)}
.shield{position:relative; z-index:2; width:min(92vw,440px); height:auto; filter:drop-shadow(0 22px 38px rgba(17,17,17,.16)); animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
/* Soap bubbles, tinted from the watercolour palette in the logo. */
.bubble{
  position:absolute; border-radius:50%; animation:rise linear infinite; opacity:0;
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.95) 0 12%, rgba(255,255,255,.35) 22%, transparent 42%),
    radial-gradient(circle at 62% 74%, rgba(var(--c),.55), rgba(var(--c),.16) 68%, rgba(var(--c),.05));
  border:1px solid rgba(var(--c),.42);
  box-shadow:inset -4px -6px 10px rgba(var(--c),.22), 0 5px 12px rgba(var(--c),.16);
}
@keyframes rise{0%{transform:translateY(24px) scale(.78);opacity:0}16%{opacity:.9}70%{opacity:.75}100%{transform:translateY(-210px) scale(1.08);opacity:0}}
@media (prefers-reduced-motion:reduce){ .shield,.bubble{animation:none} .bubble{opacity:.5} html{scroll-behavior:auto} }

/* ---------- size switch ---------- */
.sizebar{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  padding:14px 16px; border:1px solid var(--hairline); border-radius:14px; background:var(--surface-alt);
}
.sizebar .lbl{font-size:13.5px; font-weight:700; color:var(--ink)}
.segmented{display:inline-flex; background:#fff; border:1px solid var(--hairline); border-radius:var(--r-pill); padding:3px; gap:2px}
.segmented button{
  border:0; background:none; font-family:inherit; font-size:13.5px; font-weight:700; color:var(--muted);
  padding:8px 15px; border-radius:var(--r-pill); cursor:pointer; white-space:nowrap;
}
.segmented button[aria-pressed="true"]{background:var(--ink); color:#fff}
.sizebar .hint{font-size:13px; color:var(--muted)}
.oversize{display:flex; gap:11px; align-items:flex-start; margin-top:12px; padding:13px 16px; border:1px solid var(--hairline); border-radius:14px; background:#fff; cursor:pointer}
.oversize input{margin-top:2px; width:17px; height:17px; accent-color:var(--red); flex:0 0 auto}
.oversize span{font-size:14.4px; font-weight:600; color:var(--ink)}
.oversize em{display:block; font-style:normal; font-size:12.5px; font-weight:500; color:var(--muted); margin-top:3px}

/* ---------- price cards ---------- */
.grid{display:grid; gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}
.svc{padding:22px; display:flex; flex-direction:column; position:relative}
.svc .top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; min-height:24px}
.svc h3{margin-top:10px}
.svc .desc{margin-top:8px; font-size:14.5px; color:var(--body)}
.svc ul{margin-top:14px; display:grid; gap:7px}
.svc ul li{position:relative; padding-left:21px; font-size:14px; color:var(--body)}
.svc ul li::before{
  content:""; position:absolute; left:0; top:7px; width:11px; height:6px;
  border-left:2px solid var(--green); border-bottom:2px solid var(--green); transform:rotate(-45deg);
}
/* Detailing category jump menu */
.catnav{display:grid; gap:14px; margin-top:22px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.catcard{
  display:block; width:100%; text-align:left; font-family:inherit; cursor:pointer; text-decoration:none; background:#fff; border:1px solid var(--hairline);
  border-radius:14px; padding:20px 20px 18px; position:relative; overflow:hidden;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.catcard:hover{box-shadow:var(--sh-lg); transform:translateY(-2px); border-color:rgba(17,17,17,.28)}
.catcard .bar{position:absolute; left:0; top:0; bottom:0; width:4px}
.catcard strong{display:block; font-size:17px; font-weight:800; color:var(--ink); letter-spacing:-.01em}
.catcard em{display:block; font-style:normal; font-size:13.8px; color:var(--body); margin-top:6px; line-height:1.5}
.catcard .meta{display:block; font-size:12.6px; font-weight:700; color:var(--muted); margin-top:12px}
.catcard::after{content:"→"; position:absolute; right:18px; top:18px; color:var(--muted); font-weight:700}
.catcard:hover::after{color:var(--ink)}
/* Sticky category rail. Left side — the right belongs to WhatsApp / call / top. */
.rail{
  position:fixed; left:18px; top:50%; transform:translateY(-50%) translateX(-14px);
  z-index:55; display:flex; flex-direction:column; gap:6px; padding:8px;
  background:rgba(255,255,255,.9); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--hairline); border-radius:16px; box-shadow:var(--sh-lg);
  opacity:0; pointer-events:none; transition:opacity .22s ease, transform .22s ease;
}
.rail.show{opacity:1; transform:translateY(-50%); pointer-events:auto}
.rail button{
  display:flex; align-items:center; gap:0; background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:13.4px; font-weight:700; color:var(--body);
  padding:10px; border-radius:12px; white-space:nowrap; text-align:left;
  transition:background .15s ease, color .15s ease;
}
.rail button:hover{background:var(--surface-alt); color:var(--ink)}
.rail button[aria-current="true"]{background:var(--ink); color:#fff}
.rail button[aria-current="true"] .rico{color:#fff !important}
.rail .rico{width:24px; height:24px; flex:0 0 auto; display:block}
.rail .rico svg{width:24px; height:24px; display:block}
/* label is hidden until hover or keyboard focus — icons alone are ambiguous
   for "Specialist", so the word is always one hover away */
.rail .lbl{
  max-width:0; opacity:0; overflow:hidden;
  transition:max-width .22s ease, opacity .18s ease, margin .22s ease;
}
.rail button:hover .lbl,
.rail button:focus-visible .lbl{max-width:190px; opacity:1; margin-left:10px; margin-right:2px}
/* icon tint stays on the brand colour until the button is active */
.catcard .cico{position:absolute; right:16px; bottom:16px; width:34px; height:34px; opacity:.9}
.catcard .cico svg{width:34px; height:34px; display:block}
.catcard::after{display:none}
/* Not enough side room below ~1280px: become a strip under the header instead. */
@media (max-width:1279px){
  .rail{
    left:0; right:0; top:66px; bottom:auto; transform:translateY(-10px);
    flex-direction:row; justify-content:flex-start; gap:4px; border-radius:0;
    border-left:0; border-right:0; border-top:0; box-shadow:var(--sh-md);
    overflow-x:auto; padding:8px 14px;
  }
  .rail.show{transform:none}
  .rail button{font-size:12.8px; padding:8px 11px}
  /* room to spare across the top of a phone, so keep the words visible */
  .rail .lbl{max-width:190px; opacity:1; margin-left:8px}
  .rail .rico, .rail .rico svg{width:19px; height:19px}
}
@media (prefers-reduced-motion:reduce){ .rail{transition:opacity .01s} }
.catnote{margin-top:14px; font-size:13.6px; color:var(--muted)}
/* the inspection block sits below the three categories and applies to all of them */
.entrypanel{background:var(--surface-alt); border:1px solid var(--hairline); border-radius:18px; padding:30px 28px}
.entrypanel .grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
@media (max-width:560px){ .entrypanel{padding:22px 18px} }
.catnote a,.linkish{font-weight:700; color:var(--ink)}
.linkish{background:none; border:0; padding:0; font-family:inherit; font-size:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
/* clear the sticky header when jumping to a section */
.dsection{scroll-margin-top:88px}
.whyquote{margin-top:12px; font-size:12.4px; color:var(--muted); line-height:1.5}
.svc .foot{margin-top:auto; padding-top:18px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px}
.price{font-weight:800; color:var(--red); font-size:clamp(25px,2.2vw,31px); letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1}
.price .from{font-size:12.5px; font-weight:700; color:var(--muted); letter-spacing:.02em; display:block; margin-bottom:3px; text-transform:uppercase}
.price.free{color:var(--success)}
.meta{font-size:12.5px; color:var(--muted); text-align:right}
.gst{font-size:13px; color:var(--muted); margin-top:14px}

table.prices{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
table.prices th,table.prices td{padding:13px 12px; text-align:right; border-bottom:1px solid var(--hairline); font-size:15px}
table.prices th:first-child,table.prices td:first-child{text-align:left}
table.prices thead th{font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:800}
table.prices tbody tr:last-child td{border-bottom:0}
table.prices td.p{font-weight:800; color:var(--red)}
table.prices td.p.hl{background:var(--red-tint); border-radius:6px}
table.prices .nm{font-weight:700; color:var(--ink)}
table.prices .sub{display:block; font-size:12.5px; font-weight:500; color:var(--muted)}
.scroller{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* addons */
.addon{display:flex; justify-content:space-between; gap:14px; align-items:baseline; padding:11px 0; border-bottom:1px solid var(--hairline)}
.addon:last-child{border-bottom:0}
.addon .n{font-size:14.8px; color:var(--ink); font-weight:600}
.addon .t{font-size:12px; color:var(--muted); font-weight:500}
.addon .v{font-weight:800; color:var(--red); font-variant-numeric:tabular-nums; white-space:nowrap}

/* club */
.tier{padding:26px; display:flex; flex-direction:column; position:relative; border-radius:16px}
.tier.pop{border-color:var(--red); box-shadow:0 14px 34px rgba(200,16,46,.13)}
.tier .amt{font-size:46px; font-weight:800; color:var(--ink); letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums}
.tier .per{font-size:14px; color:var(--muted); font-weight:600}
.tier .save{margin-top:12px; display:inline-block; background:#EAF7EE; color:var(--success); font-weight:800; font-size:13px; padding:6px 12px; border-radius:var(--r-pill)}
.tier ul{margin:20px 0 24px; display:grid; gap:9px}
.tier ul li{position:relative; padding-left:22px; font-size:14.5px}
.tier ul li::before{content:""; position:absolute; left:0; top:7px; width:11px; height:6px; border-left:2px solid var(--green); border-bottom:2px solid var(--green); transform:rotate(-45deg)}
/* auto pushes the CTA to the floor of the card, so buttons line up across tiers
   even when one has more perks than the other */
.tier .btn{margin-top:auto; width:100%; padding:14px 20px; font-size:16px; border-radius:12px}
.tier .btn-ghost{border-width:1.5px; border-color:rgba(17,17,17,.28)}
.tier .btn-ghost:hover{border-color:var(--ink)}
.tier .cta-note{margin-top:10px; text-align:center; font-size:12.4px; color:var(--muted)}
.tier.trade{border-color:rgba(17,17,17,.55); background:linear-gradient(180deg,#fff, #FAFAFA)}
.badge.trade{background:var(--ink); color:#fff}
.tier .elig{margin:-8px 0 20px; font-size:12.6px; color:var(--muted); line-height:1.5}
.calclink{
  background:none; border:0; font-family:inherit; font-size:13.4px; font-weight:700; color:var(--ink);
  padding:0 0 18px; cursor:pointer; text-align:left; text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--hairline);
}
.calclink:hover{text-decoration-color:var(--ink)}
.calc{border:1px solid var(--hairline); border-radius:16px; background:var(--surface-alt); padding:24px}
.calcrow{display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid var(--hairline)}
.calcrow:last-child{border-bottom:0}
.calcrow .who{font-weight:700; color:var(--ink); font-size:15px}
.calcrow .who em{display:block; font-style:normal; font-size:12.5px; color:var(--muted); font-weight:500}
.calcrow .now{font-weight:800; font-size:21px; color:var(--ink); font-variant-numeric:tabular-nums; text-align:right}
.calcrow .off{font-weight:800; font-size:13px; color:var(--success); background:#EAF7EE; border-radius:var(--r-pill); padding:5px 11px; white-space:nowrap}
.calcrow.retail .now{color:var(--muted)}
.calcrow.best{background:#fff; border-radius:12px; padding:14px; margin:4px -6px; box-shadow:var(--sh-sm)}
.calcsum{margin-top:16px; font-size:13.4px; color:var(--body)}
/* The two "front door" cards. Copy lengths differ, so the price + CTA block is
   floated to the bottom of both cards and the buttons share one width. */
.door{padding:32px; display:flex; flex-direction:column}
.door h3{margin-top:9px; font-size:clamp(24px,2.4vw,30px)}
.door .lede{margin-top:12px}
.door .foot{margin-top:auto; padding-top:24px}
.door .fromline{font-size:13.5px; color:var(--muted)}
.door .fromline b{font-weight:800; color:var(--red); font-size:21px; font-variant-numeric:tabular-nums}
.door .btn{margin-top:14px; width:100%; max-width:260px; justify-content:center}

/* faq */
details.faq{border-bottom:1px solid var(--hairline); padding:4px 0}
details.faq summary{
  cursor:pointer; list-style:none; padding:17px 40px 17px 0; font-weight:700; color:var(--ink);
  position:relative; font-size:16.5px;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{
  content:""; position:absolute; right:8px; top:26px; width:9px; height:9px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(45deg); transition:transform .18s ease;
}
details.faq[open] summary::after{transform:rotate(-135deg)}
details.faq .a{padding:0 0 18px; color:var(--body); max-width:70ch}

/* booking */
.field{display:block; margin-top:16px}
.field span{display:block; font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:7px}
.req{color:var(--red); font-style:normal; font-weight:800; margin-left:3px}
.reqmsg{margin-top:10px; font-size:12.8px; color:var(--muted); text-align:center}
.reqmsg b{color:var(--ink)}
.fieldhint{display:block; font-style:normal; font-size:12.3px; color:var(--muted); margin-top:6px}
.field input,.field select,.field textarea{
  width:100%; font-family:inherit; font-size:16px; color:var(--ink); background:#fff;
  border:1px solid var(--hairline); border-radius:var(--r-btn); padding:12px 13px;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--red); outline-offset:1px; border-color:transparent}
.opt{display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--hairline)}
.opt:last-of-type{border-bottom:0}
.optmain{display:flex; align-items:flex-start; gap:11px; flex:1; cursor:pointer; min-width:0}
.qty{display:inline-flex; align-items:center; gap:2px; border:1px solid var(--hairline); border-radius:var(--r-pill); padding:2px; background:#fff}
.qty[hidden]{display:none}
.qty button{
  width:28px; height:28px; border:0; background:none; font-family:inherit; font-size:17px; font-weight:700;
  color:var(--ink); cursor:pointer; border-radius:50%; line-height:1;
}
.qty button:hover{background:var(--surface-alt)}
.qty button:disabled{opacity:.3; cursor:not-allowed}
.qty b{min-width:20px; text-align:center; font-size:14.5px; font-variant-numeric:tabular-nums}
.lvl{display:inline-flex; gap:2px; border:1px solid var(--hairline); border-radius:var(--r-pill); padding:2px; background:#fff}
.lvl[hidden]{display:none}
.lvl button{
  border:0; background:none; font-family:inherit; font-size:12.8px; font-weight:700; color:var(--muted);
  padding:6px 12px; border-radius:var(--r-pill); cursor:pointer; white-space:nowrap;
}
.lvl button[aria-pressed="true"]{background:var(--ink); color:#fff}
.opt input{margin-top:4px; width:17px; height:17px; accent-color:var(--red); flex:0 0 auto}
.opt .l{flex:1; font-size:14.8px; color:var(--ink); font-weight:600}
.opt .l em{display:block; font-style:normal; font-size:12.5px; color:var(--muted); font-weight:500}
.opt .v{font-weight:800; color:var(--red); font-variant-numeric:tabular-nums; white-space:nowrap}
.daybar{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch}
.day{
  flex:0 0 auto; border:1px solid var(--hairline); background:#fff; border-radius:12px; padding:9px 13px;
  font-family:inherit; cursor:pointer; text-align:center; line-height:1.25; min-width:62px;
}
.day b{display:block; font-size:16px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums}
.day span{display:block; font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
.day[aria-pressed="true"]{background:var(--ink); border-color:var(--ink)}
.day[aria-pressed="true"] b,.day[aria-pressed="true"] span{color:#fff}
.day[disabled]{opacity:.34; cursor:not-allowed}
.slots{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.slot{
  font-family:inherit; font-size:14px; font-weight:700; color:var(--ink); background:#fff;
  border:1px solid var(--hairline); border-radius:var(--r-pill); padding:9px 15px; cursor:pointer;
  font-variant-numeric:tabular-nums;
}
.slot:hover:not([disabled]){border-color:var(--ink)}
.slot[aria-pressed="true"]{background:var(--red); border-color:var(--red); color:#fff}
.slot[disabled]{opacity:.32; cursor:not-allowed; text-decoration:line-through}
.slotmsg{font-size:13.3px; color:var(--muted); margin-top:10px}
.memberon{display:flex; gap:11px; align-items:flex-start; margin-top:12px; padding:14px 16px; border-radius:12px; background:#EAF7EE; border:1px solid rgba(27,127,59,.22)}
.memberon .dot{margin-top:7px}
.memberon strong{display:block; font-size:14.6px; color:var(--success)}
.memberon em{display:block; font-style:normal; font-size:13px; color:var(--body); margin-top:3px}
.sumrow .was{text-decoration:line-through; color:var(--muted); font-weight:600; margin-right:7px}
.summary{position:sticky; top:86px}
[data-step]+[data-step]{margin-top:30px}
[data-step][hidden]{display:none}
/* The booking grid's 280px sidebar minimum overflowed a 390px phone. Stack it. */
@media (max-width:900px){
  #bookgrid{grid-template-columns:minmax(0,1fr) !important}
  .summary{position:static}
}
/* Three segmented buttons in one row do not fit a phone once the labels get
   long ("Work ute / very heavy"), so let them wrap. */
@media (max-width:560px){
  .sizebar{flex-direction:column; align-items:stretch; gap:10px}
  .segmented{flex-wrap:wrap}
  .segmented button{flex:1 1 auto; font-size:13px; padding:9px 12px}
  .sizebar .hint{font-size:12.5px}
}
/* 320px (older SE-class phones): the 300px auto-fit minimum no longer fits. */
@media (max-width:420px){
  .g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}
  .calcrow{grid-template-columns:minmax(0,1fr) auto}
  .calcrow .off{grid-column:1 / -1; justify-self:start; margin-top:4px}
}
.sumrow{display:flex; justify-content:space-between; gap:12px; font-size:14.5px; padding:7px 0}
.sumrow.tot{border-top:1px solid var(--hairline); margin-top:10px; padding-top:14px; font-size:19px; font-weight:800; color:var(--ink)}
.sumrow.tot .v{color:var(--red); font-variant-numeric:tabular-nums}
.sumrow .k{color:var(--body)}
.sumrow .v{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums}
.note{background:var(--red-tint); border:1px solid rgba(200,16,46,.18); border-radius:12px; padding:14px 16px; font-size:13.8px; color:var(--body)}
.note strong{color:var(--ink)}

/* map / contact */
.info{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--hairline)}
.info:last-child{border-bottom:0}
.info .ic{width:36px;height:36px;border-radius:10px;background:var(--surface-alt);display:grid;place-items:center;flex:0 0 auto;border:1px solid var(--hairline)}
.info .k{font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.info .v{font-size:16px;color:var(--ink);font-weight:600;margin-top:3px}
.info a{color:var(--ink)}

/* footer */
footer.site{background:var(--surface-alt); border-top:1px solid var(--hairline); margin-top:0}
.fgrid{display:grid; gap:34px; padding:52px 0; grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
footer.site h4{font-size:13.5px; font-weight:800; color:var(--ink); margin-bottom:12px}
footer.site ul{display:grid; gap:8px}
footer.site a{font-size:14.3px; color:var(--body); text-decoration:none}
footer.site a:hover{color:var(--ink)}
.legal{border-top:1px solid var(--hairline); padding:20px 0; font-size:12.3px; color:var(--muted); display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between}
.legal nav{display:flex; flex-wrap:wrap; gap:8px 16px}

/* floating contact */
.fab{
  position:fixed; right:18px; bottom:18px; z-index:70; display:flex; flex-direction:column; gap:10px;
}
.fab a{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center; box-shadow:var(--sh-lg);
  text-decoration:none; border:1px solid rgba(0,0,0,.06);
}
.fab .wa{background:#25D366}
.totop{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:#fff; color:var(--ink); border:1px solid var(--hairline); box-shadow:var(--sh-lg);
  opacity:0; transform:translateY(10px) scale(.9); pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, background .15s ease;
}
.totop.show{opacity:1; transform:none; pointer-events:auto}
.totop:hover{background:var(--ink); color:#fff; border-color:var(--ink)}
@media (prefers-reduced-motion:reduce){ .totop{transition:opacity .01s} }
.fab .ph{background:var(--red)}
@media print{ .fab,header.site,nav.main{display:none} }

.reveal{opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none} }