/* ==========================================================================
   Wash OnDaGo — brand.css
   The complete public design system. Cyan + near-black + white, bubbles and
   water. Every page under site/ links this file; pages must not restyle it.

   CONTENTS
   01 tokens ............ :root token block (contract, verbatim) + support tokens
   02 reset ............. box model, media, tables, forms
   03 base .............. document, fluid type scale, links, selection
   04 layout ............ .wrap .sec .split .stack .center helpers
   05 headings .......... .eyebrow .sec-t .sec-note mark.todo .skip
   06 buttons ........... .btn .btn-p .btn-o .btn-g(host) .btn-sm .btn-row
   07 surfaces .......... .card .panel .notice .quote .stat
   08 grids ............. .grid-2 .grid-3 .grid-4 .cards
   09 tags .............. .pill .chips .badge (.ok .warn .bad) .inc
   10 tables ............ .tbl (stacks under 720px via data-label) .scroll-x
   11 forms ............. .field .input .select .check .err .hint .form-grid
   12 tabs .............. .tabs .tab .tabpanel
   13 steps / faq ....... .steps .step .faq
   14 water motifs ...... .bubblefield .foam .glow  (CSS-only, no images)
   15 hero .............. .hero .pagehero .hero-cta .hero-art
   16 nav ............... .nav .lockup .links .navtoggle .navcta + drawer
   17 footer ............ .foot .fgrid .fbrand .fbase .fsvc
   18 booking ........... .wiz .wstep .bsteps .opt .summary .ziphint .paypick
   19 catalogue ......... .addongrid/.addon .mcards/.mcard .areagrid .cta
   20 prose ............. .prose (terms / privacy) .toc
   21 reveal ............ .reveal / [data-reveal] (gated on body.js-motion)
   22 a11y .............. :focus-visible ring, reduced motion, print
   ========================================================================== */

/* ---------------------------------------------------------------- 01 tokens */
:root{
  --cyan:#00C8F8; --cyan-deep:#0093C4; --cyan-lt:#7BE4FF;
  --cyan-glow:rgba(0,200,248,.28);
  --ink:#05080C; --ink-2:#0B1219; --ink-3:#111C26; --ink-4:#18242F;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  /* Form controls need a 3:1 boundary (WCAG 1.4.11); --line-2 is deliberately
     subtle for decorative hairlines and only reaches 1.6:1. */
  --line-field:rgba(255,255,255,.37);
  --fg:#E8F6FD; --fg-dim:#9BB2C2; --fg-mute:#6B8496; --white:#fff;
  --ok:#37D9A0; --warn:#FFC152; --bad:#FF6076; --info:var(--cyan);
  --f-display:'Fredoka',system-ui,sans-serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r-s:10px; --r-m:16px; --r-l:24px; --r-pill:999px;
  --sp:clamp(16px,4vw,28px);
  --wrap:1180px;
  --shadow:0 18px 50px rgba(0,0,0,.5);
  --shadow-cyan:0 10px 40px var(--cyan-glow);
  --tap:44px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* Support tokens — derived rhythm only. Never a new colour. */
:root{
  --sec-y:clamp(56px,9vw,112px);
  --gap:clamp(14px,2.2vw,24px);
  --gap-l:clamp(20px,3vw,34px);
  --read:68ch;
  --nav-h:76px;
  --ring:2px solid var(--cyan);
}

/* ----------------------------------------------------------------- 02 reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg,video,canvas{display:block;max-width:100%;height:auto}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
th{text-align:left}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
[hidden]{display:none !important}
hr{border:0;border-top:1px solid var(--line);margin:var(--gap-l) 0}
abbr[title]{text-decoration:underline dotted;cursor:help}

/* ------------------------------------------------------------------ 03 base */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  margin:0;
  background:var(--ink);
  color:var(--fg);
  font-family:var(--f-body);
  font-size:1.0625rem;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* deep-water ground: two soft cyan pools, never a hard band */
  background-image:
    radial-gradient(1100px 620px at 82% -12%, rgba(0,200,248,.13), transparent 62%),
    radial-gradient(900px 560px at -8% 12%, rgba(0,147,196,.10), transparent 60%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}
main{display:block}

h1,h2,h3,h4,h5,h6{
  font-family:var(--f-display);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--white);
  text-wrap:balance;
}
h1{font-size:clamp(2.6rem,7vw,5rem);font-weight:700;letter-spacing:-.025em}
h2{font-size:clamp(1.9rem,4vw,3rem);letter-spacing:-.02em}
h3{font-size:clamp(1.35rem,2.4vw,1.85rem)}
h4{font-size:1.1875rem}
h5{font-size:1.0625rem}
h6{font-size:.9375rem}
p{text-wrap:pretty}
p + p{margin-top:1em}
small,.small{font-size:.875rem;line-height:1.55}
strong,b{font-weight:600;color:var(--white)}

a{color:var(--cyan-lt);text-decoration:none;transition:color .18s var(--ease)}
a:hover{color:var(--cyan)}
a:not([class]){text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(123,228,255,.45)}
a:not([class]):hover{text-decoration-color:var(--cyan)}

::selection{background:var(--cyan);color:var(--ink)}
::-moz-selection{background:var(--cyan);color:var(--ink)}

/* numerals: display face + tabular figures wherever money or counts appear */
.num,.money,td.num,.tbl td,.tbl th{font-variant-numeric:tabular-nums}
.money{font-family:var(--f-display);font-weight:600;letter-spacing:-.01em}

/* ---------------------------------------------------------------- 04 layout */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--sp)}
.wrap-narrow{max-width:820px}
.sec{padding-block:var(--sec-y);position:relative}
.sec-tight{padding-block:clamp(34px,5vw,60px)}
.sec-top-0{padding-top:0}
.sec-alt{background:linear-gradient(180deg,transparent,rgba(11,18,25,.85) 12%,rgba(11,18,25,.85) 88%,transparent)}
.sec-line{border-top:1px solid var(--line)}

.split{display:grid;gap:var(--gap-l);align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,72px)}
  .split-rev > :first-child{order:2}
}
.stack > * + *{margin-top:var(--gap)}
.stack-s > * + *{margin-top:10px}
.center{text-align:center}
.center .sec-t,.center .eyebrow,.center .sec-note{margin-inline:auto}
.muted{color:var(--fg-dim)}
.meta{color:var(--fg-mute);font-size:.875rem}
.read{max-width:var(--read)}
.mt-0{margin-top:0}
.mt{margin-top:var(--gap)}
.mt-l{margin-top:var(--gap-l)}

/* -------------------------------------------------------------- 05 headings */
.eyebrow{
  font-family:var(--f-display);
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cyan);
  margin:0 0 12px;
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{
  content:"";width:22px;height:2px;border-radius:2px;flex:none;
  background:linear-gradient(90deg,var(--cyan),transparent);
}
.center .eyebrow{justify-content:center}
.center .eyebrow::before{background:linear-gradient(90deg,transparent,var(--cyan))}

.sec-t{margin:0 0 14px;max-width:22ch}
.sec-t.wide{max-width:34ch}
.center .sec-t{max-width:24ch}
.sec-note{color:var(--fg-dim);max-width:var(--read);margin:0}
.sec-lead{color:var(--fg-dim);font-size:clamp(1.0625rem,1.6vw,1.25rem);max-width:60ch;margin:0 0 var(--gap)}

/* Visible open-item chip. Never hide these — they are a launch checklist. */
mark.todo,.todo{
  display:inline-block;
  background:rgba(255,193,82,.14);
  color:var(--warn);
  border:1px dashed rgba(255,193,82,.55);
  border-radius:var(--r-pill);
  padding:2px 12px;
  font-family:var(--f-body);
  font-size:.8125rem;
  font-weight:600;
  line-height:1.5;
  letter-spacing:.01em;
}

.skip{
  position:absolute;left:12px;top:-100px;z-index:200;
  background:var(--cyan);color:var(--ink);
  font-family:var(--f-display);font-weight:600;
  padding:12px 20px;border-radius:0 0 var(--r-m) var(--r-m);
  transition:top .18s var(--ease);
}
.skip:focus{top:0;color:var(--ink)}

/* --------------------------------------------------------------- 06 buttons */
.btn{
  --btn-bg:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--tap);
  padding:12px 26px;
  border-radius:var(--r-pill);
  font-family:var(--f-display);
  font-size:1rem;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.005em;
  text-align:center;
  white-space:nowrap;
  cursor:pointer;
  border:1px solid transparent;
  background:var(--btn-bg);
  color:var(--fg);
  transition:transform .18s var(--ease),box-shadow .22s var(--ease),background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn[disabled],.btn:disabled,.btn[aria-disabled="true"]{
  opacity:.42;cursor:not-allowed;transform:none;box-shadow:none;
}

.btn-p{
  background:linear-gradient(180deg,var(--cyan-lt),var(--cyan) 42%,var(--cyan-deep));
  color:var(--ink);
  box-shadow:0 8px 26px rgba(0,200,248,.22);
}
.btn-p:hover{color:var(--ink);box-shadow:var(--shadow-cyan)}

.btn-o{
  border-color:var(--line-2);
  color:var(--fg);
  background:rgba(255,255,255,.02);
}
.btn-o:hover{border-color:var(--cyan);color:var(--cyan-lt);background:rgba(0,200,248,.07)}

.btn-ghost{color:var(--fg-dim);padding-inline:14px}
.btn-ghost:hover{color:var(--cyan-lt)}

.btn-sm{min-height:36px;padding:8px 16px;font-size:.875rem;gap:7px}
.btn-lg{padding:16px 34px;font-size:1.0625rem}
.btn-block{display:flex;width:100%}

/* Legacy alias: the old site's primary button class. Kept so nothing renders
   unstyled if a stray reference survives; it is simply the cyan fill. */
.btn-g{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--tap);padding:12px 26px;border-radius:var(--r-pill);
  font-family:var(--f-display);font-weight:600;
  background:linear-gradient(180deg,var(--cyan-lt),var(--cyan) 42%,var(--cyan-deep));
  color:var(--ink);box-shadow:0 8px 26px rgba(0,200,248,.22);
}
.btn-g:hover{color:var(--ink);box-shadow:var(--shadow-cyan)}

.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.center .btn-row{justify-content:center}

/* -------------------------------------------------------------- 07 surfaces */
.card{
  position:relative;
  background:linear-gradient(180deg,var(--ink-3),var(--ink-2));
  border:1px solid var(--line);
  border-radius:var(--r-l);
  padding:clamp(20px,3vw,30px);
  transition:border-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease);
}
.card > :first-child{margin-top:0}
.card h3,.card h4{margin-bottom:8px}
.card p{color:var(--fg-dim)}
.card-hover:hover,a.card:hover{border-color:rgba(0,200,248,.45);transform:translateY(-3px);box-shadow:var(--shadow-cyan)}
.card-feat{
  border-color:rgba(0,200,248,.42);
  box-shadow:0 0 0 1px rgba(0,200,248,.12),var(--shadow-cyan);
  background:linear-gradient(180deg,rgba(0,200,248,.08),var(--ink-3) 30%,var(--ink-2));
}
.card-flag{
  position:absolute;top:-11px;left:clamp(20px,3vw,30px);
  background:var(--cyan);color:var(--ink);
  font-family:var(--f-display);font-size:.75rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  padding:3px 12px;border-radius:var(--r-pill);
}
.card-ico{
  width:46px;height:46px;flex:none;
  display:grid;place-items:center;
  border-radius:14px;
  background:rgba(0,200,248,.12);
  border:1px solid rgba(0,200,248,.24);
  color:var(--cyan);
  font-size:1.25rem;
  margin-bottom:16px;
}

.panel{
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  padding:clamp(20px,3vw,30px);
}

.notice{
  display:flex;gap:14px;align-items:flex-start;
  background:rgba(0,200,248,.07);
  border:1px solid rgba(0,200,248,.24);
  border-left-width:3px;
  border-radius:var(--r-m);
  padding:16px 18px;
  color:var(--fg-dim);
  font-size:.9375rem;
}
.notice strong{display:block;color:var(--white);font-family:var(--f-display)}
.notice-warn{background:rgba(255,193,82,.08);border-color:rgba(255,193,82,.32)}
.notice-warn strong{color:var(--warn)}

.quote{
  border-left:3px solid var(--cyan);
  padding:6px 0 6px 22px;
  font-size:clamp(1.0625rem,1.8vw,1.375rem);
  line-height:1.5;
  color:var(--fg);
  font-family:var(--f-display);
  font-weight:400;
}
.quote cite{display:block;margin-top:12px;font:600 .875rem/1.5 var(--f-body);color:var(--fg-mute);font-style:normal}

.stats{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stat{text-align:center;padding:18px 12px;border:1px solid var(--line);border-radius:var(--r-m);background:rgba(255,255,255,.02)}
.stat b{display:block;font-family:var(--f-display);font-size:clamp(1.75rem,3.4vw,2.5rem);font-weight:700;color:var(--cyan);line-height:1.05;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:6px;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-mute)}

/* ----------------------------------------------------------------- 08 grids */
.grid-2,.grid-3,.grid-4{display:grid;gap:var(--gap)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.grid-l{gap:var(--gap-l)}

/* ------------------------------------------------------------------ 09 tags */
.pill{
  display:inline-flex;align-items:center;gap:7px;
  min-height:32px;
  padding:5px 15px;
  border-radius:var(--r-pill);
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.03);
  color:var(--fg-dim);
  font-size:.875rem;
  line-height:1.4;
  white-space:nowrap;
}
.pill-cyan{border-color:rgba(0,200,248,.4);background:rgba(0,200,248,.09);color:var(--cyan-lt)}
a.pill:hover{border-color:var(--cyan);color:var(--cyan-lt)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.center .chips{justify-content:center}

.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 11px;
  border-radius:var(--r-pill);
  font-family:var(--f-body);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:rgba(255,255,255,.07);
  color:var(--fg-dim);
  border:1px solid var(--line-2);
  white-space:nowrap;
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.badge.ok,.badge--ok{background:rgba(55,217,160,.13);color:var(--ok);border-color:rgba(55,217,160,.34)}
.badge.warn,.badge--warn{background:rgba(255,193,82,.13);color:var(--warn);border-color:rgba(255,193,82,.34)}
.badge.bad,.badge--bad{background:rgba(255,96,118,.13);color:var(--bad);border-color:rgba(255,96,118,.34)}
.badge.info,.badge--info{background:rgba(0,200,248,.13);color:var(--cyan);border-color:rgba(0,200,248,.34)}
.badge-plain::before{display:none}

/* Inclusion checklist — service "what you get" lists */
.inc{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.inc li{position:relative;padding-left:30px;color:var(--fg-dim);font-size:.9375rem;line-height:1.55}
.inc li::before{
  content:"";position:absolute;left:0;top:.34em;
  width:18px;height:18px;border-radius:50%;
  background:rgba(0,200,248,.14);
  border:1px solid rgba(0,200,248,.4);
}
.inc li::after{
  content:"";position:absolute;left:6px;top:.62em;
  width:5px;height:9px;
  border:solid var(--cyan);border-width:0 2px 2px 0;
  transform:rotate(42deg);
}
.inc-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));column-gap:22px}

/* ---------------------------------------------------------------- 10 tables */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

.tbl{
  width:100%;
  border:1px solid var(--line);
  border-radius:var(--r-m);
  overflow:hidden;
  background:var(--ink-2);
  font-size:.9375rem;
}
.tbl caption{
  caption-side:top;text-align:left;
  padding:14px 18px;
  font-family:var(--f-display);font-weight:600;color:var(--white);
  background:rgba(255,255,255,.02);
  border-bottom:1px solid var(--line);
}
.tbl th,.tbl td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl thead th{
  font-family:var(--f-display);
  font-size:.8125rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--cyan);
  background:rgba(0,200,248,.05);
  white-space:nowrap;
}
.tbl tbody th{font-weight:600;color:var(--white);font-family:var(--f-display)}
.tbl td{color:var(--fg-dim)}
.tbl td.price,.tbl td b{color:var(--fg);font-family:var(--f-display);font-weight:600}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td,.tbl tbody tr:hover th{background:rgba(0,200,248,.045)}
.tbl .num,.tbl .right{text-align:right}

/* Stacked cards under 720px — needs data-label on every td */
@media (max-width:719px){
  .tbl,.tbl tbody,.tbl tr,.tbl td,.tbl th{display:block;width:100%}
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .tbl{border-radius:var(--r-m);background:transparent;border:0}
  .tbl caption{border:1px solid var(--line);border-radius:var(--r-m);margin-bottom:10px;background:var(--ink-2)}
  .tbl tr{
    background:var(--ink-2);
    border:1px solid var(--line);
    border-radius:var(--r-m);
    padding:6px 4px;
    margin-bottom:10px;
  }
  .tbl tbody tr:hover td,.tbl tbody tr:hover th{background:transparent}
  .tbl td,.tbl th{border-bottom:1px solid var(--line);padding:11px 16px;text-align:left}
  .tbl tr > :last-child{border-bottom:0}
  .tbl tbody th{font-size:1.0625rem;background:rgba(0,200,248,.05)}
  .tbl td[data-label]{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
  .tbl td[data-label]::before{
    content:attr(data-label);
    font-family:var(--f-display);font-size:.75rem;font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;color:var(--fg-mute);
    flex:none;
  }
  .tbl .num,.tbl .right{text-align:right}
}

/* ----------------------------------------------------------------- 11 forms */
.form-grid{display:grid;gap:var(--gap)}
@media (min-width:640px){
  .form-grid-2{grid-template-columns:1fr 1fr}
  .form-grid .span-2{grid-column:1 / -1}
}
.field{display:block}
.field > label,.label{
  display:block;
  margin-bottom:7px;
  font-family:var(--f-display);
  font-size:.9375rem;
  font-weight:600;
  color:var(--fg);
}
.field .req{color:var(--cyan)}
.hint{display:block;margin-top:6px;font-size:.8125rem;color:var(--fg-mute)}

.input,.select,textarea.input{
  width:100%;
  min-height:var(--tap);
  padding:11px 15px;
  background:var(--ink-2);
  border:1px solid var(--line-field);
  border-radius:var(--r-s);
  color:var(--fg);
  font-family:var(--f-body);
  font-size:1rem;
  line-height:1.5;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background-color .18s var(--ease);
  appearance:none;
}
textarea.input{min-height:120px;resize:vertical}
.input::placeholder{color:var(--fg-mute)}
.input:hover,.select:hover{border-color:rgba(255,255,255,.26)}
.input:focus,.select:focus{
  outline:none;
  border-color:var(--cyan);
  background:var(--ink-3);
  box-shadow:0 0 0 3px rgba(0,200,248,.18);
}
/* The rule above is (0,2,0) and the shared ring in §23 is only (0,1,0), so
   `outline:none` was winning on keyboard focus too and fields were the one
   control type with no ring. Restate it here at equal specificity, after. */
.input:focus-visible,.select:focus-visible,textarea.input:focus-visible{
  outline:var(--ring);
  outline-offset:2px;
}
.select{
  padding-right:44px;
  background-image:linear-gradient(45deg,transparent 50%,var(--cyan) 50%),linear-gradient(135deg,var(--cyan) 50%,transparent 50%);
  background-position:calc(100% - 22px) calc(50% + 2px),calc(100% - 16px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  cursor:pointer;
}
.select option{background:var(--ink-2);color:var(--fg)}
.input[aria-invalid="true"],.select[aria-invalid="true"],.input.bad{
  border-color:var(--bad);
  box-shadow:0 0 0 3px rgba(255,96,118,.16);
}

/* checkbox / radio row — the whole row is the tap target */
.check{
  display:flex;align-items:flex-start;gap:12px;
  min-height:var(--tap);
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:var(--r-s);
  background:rgba(255,255,255,.02);
  cursor:pointer;
  font-size:.9375rem;
  color:var(--fg-dim);
  transition:border-color .18s var(--ease),background-color .18s var(--ease);
}
.check:hover{border-color:rgba(0,200,248,.4);background:rgba(0,200,248,.05)}
.check input[type=checkbox],.check input[type=radio]{
  appearance:none;
  flex:none;
  width:20px;height:20px;margin:2px 0 0;
  border:2px solid var(--line-2);
  border-radius:6px;
  background:var(--ink);
  cursor:pointer;
  transition:border-color .16s var(--ease),background-color .16s var(--ease);
}
.check input[type=radio]{border-radius:50%}
.check input:checked{background:var(--cyan);border-color:var(--cyan)}
.check input[type=checkbox]:checked{
  background-image:linear-gradient(45deg,transparent 44%,var(--ink) 44%,var(--ink) 56%,transparent 56%),
                   linear-gradient(-45deg,transparent 44%,var(--ink) 44%,var(--ink) 56%,transparent 56%);
  background-size:70% 2px,70% 2px;
  background-position:center 62%,center 62%;
  background-repeat:no-repeat;
}
.check:has(input:checked){border-color:var(--cyan);background:rgba(0,200,248,.08);color:var(--fg)}
.check span{line-height:1.5}
.check b{display:block;font-family:var(--f-display)}

.err{
  display:none;
  margin-top:7px;
  font-size:.8125rem;
  font-weight:500;
  color:var(--bad);
}
.err.show,.err[data-show],.field.invalid .err{display:block}
.formnote{margin-top:14px;font-size:.875rem;color:var(--fg-mute)}
.sent{
  display:none;
  margin-top:18px;
  padding:16px 18px;
  border-radius:var(--r-m);
  border:1px solid rgba(55,217,160,.34);
  background:rgba(55,217,160,.09);
  color:var(--fg);
  font-size:.9375rem;
}
.sent.show{display:block}
.sent b{color:var(--ok)}

/* ------------------------------------------------------------------ 12 tabs */
.tabs{
  display:flex;
  gap:6px;
  padding:6px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--ink-2);
  overflow-x:auto;
  scrollbar-width:none;
  max-width:100%;
}
.tabs::-webkit-scrollbar{display:none}
.tabs-center{width:fit-content;margin-inline:auto;max-width:100%}
.tab{
  flex:0 0 auto;
  min-height:var(--tap);
  padding:9px 22px;
  border-radius:var(--r-pill);
  font-family:var(--f-display);
  font-size:.9375rem;
  font-weight:600;
  color:var(--fg-dim);
  white-space:nowrap;
  transition:background-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease);
}
.tab:hover{color:var(--fg)}
.tab[aria-selected="true"],.tab.on{
  background:linear-gradient(180deg,var(--cyan-lt),var(--cyan) 50%,var(--cyan-deep));
  color:var(--ink);
  box-shadow:0 6px 20px rgba(0,200,248,.24);
}
.tabpanel{margin-top:var(--gap-l)}
.tabpanel:focus{outline:none}

/* --------------------------------------------------------- 13 steps and faq */
.steps{
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  counter-reset:step;
}
.step{
  position:relative;
  padding:clamp(20px,3vw,28px);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  background:linear-gradient(180deg,var(--ink-3),var(--ink-2));
}
.step .n{
  display:grid;place-items:center;
  width:46px;height:46px;
  margin-bottom:16px;
  border-radius:50%;
  background:rgba(0,200,248,.12);
  border:1px solid rgba(0,200,248,.32);
  color:var(--cyan);
  font-family:var(--f-display);
  font-size:1.1875rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.step h4{margin-bottom:8px}
.step p{color:var(--fg-dim);font-size:.9375rem}
/* connector dashes between steps on wide screens */
@media (min-width:900px){
  .steps-line .step + .step::before{
    content:"";position:absolute;left:calc(-1 * var(--gap));top:44px;
    width:var(--gap);height:2px;
    background:repeating-linear-gradient(90deg,rgba(0,200,248,.45) 0 5px,transparent 5px 10px);
  }
}

.faq{display:grid;gap:12px}
.faq details{
  border:1px solid var(--line);
  border-radius:var(--r-m);
  background:var(--ink-2);
  transition:border-color .2s var(--ease);
}
.faq details[open]{border-color:rgba(0,200,248,.34);background:var(--ink-3)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:var(--tap);
  padding:15px 20px;
  font-family:var(--f-display);
  font-size:1.0625rem;
  font-weight:600;
  color:var(--white);
}
.faq summary::after{
  content:"";flex:none;
  width:10px;height:10px;
  border:solid var(--cyan);border-width:0 2px 2px 0;
  transform:rotate(45deg) translateY(-3px);
  transition:transform .22s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq summary:hover{color:var(--cyan-lt)}
.faq .a{padding:0 20px 18px;color:var(--fg-dim);font-size:.9375rem}
.faq .a > * + *{margin-top:.75em}

/* --------------------------------------------------- 14 water/bubble motifs */
/* Everything here is pure CSS — no image files beyond assets/ logos. */
@keyframes wodg-rise{
  0%{transform:translate3d(0,0,0) scale(1);opacity:0}
  12%{opacity:.9}
  100%{transform:translate3d(14px,-140px,0) scale(1.18);opacity:0}
}
@keyframes wodg-drift{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(-16px,-22px,0)}
}
@keyframes wodg-sheen{
  0%{background-position:-140% 0}
  100%{background-position:240% 0}
}

/* Soft bubble field behind a section. Decorative, aria-hidden not needed
   because it is a pseudo-element. */
.bubblefield{position:relative;isolation:isolate}
.bubblefield::before{
  /* vertical bleed only — horizontal bleed would widen the page at small widths */
  content:"";position:absolute;inset:-10% 0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle 9px at 12% 78%, rgba(123,228,255,.24), rgba(123,228,255,.05) 62%, transparent 66%),
    radial-gradient(circle 15px at 24% 26%, rgba(0,200,248,.20), rgba(0,200,248,.04) 62%, transparent 66%),
    radial-gradient(circle 6px  at 38% 62%, rgba(123,228,255,.30), transparent 70%),
    radial-gradient(circle 22px at 63% 18%, rgba(0,200,248,.14), rgba(0,200,248,.03) 60%, transparent 64%),
    radial-gradient(circle 10px at 78% 70%, rgba(123,228,255,.22), transparent 68%),
    radial-gradient(circle 7px  at 88% 34%, rgba(0,200,248,.26), transparent 70%),
    radial-gradient(circle 13px at 52% 88%, rgba(0,200,248,.16), transparent 66%);
  animation:wodg-drift 22s ease-in-out infinite;
}
.bubblefield-dense::before{opacity:1}
.bubblefield-soft::before{opacity:.55}

/* A single rising bubble column — drop 3–5 <i class="bub"></i> in a .bubcol */
.bubcol{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bubcol .bub{
  position:absolute;bottom:-30px;
  width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.85), rgba(123,228,255,.32) 42%, rgba(0,200,248,.10) 70%, transparent 72%);
  border:1px solid rgba(123,228,255,.35);
  opacity:0;
  animation:wodg-rise 9s linear infinite;
}
.bubcol .bub:nth-child(1){left:8%;  width:10px;height:10px;animation-duration:8s;  animation-delay:0s}
.bubcol .bub:nth-child(2){left:26%; width:18px;height:18px;animation-duration:11s; animation-delay:1.6s}
.bubcol .bub:nth-child(3){left:47%; width:8px; height:8px; animation-duration:7s;  animation-delay:3.1s}
.bubcol .bub:nth-child(4){left:69%; width:22px;height:22px;animation-duration:13s; animation-delay:.7s}
.bubcol .bub:nth-child(5){left:86%; width:12px;height:12px;animation-duration:9.5s;animation-delay:2.4s}

/* Soap-foam edge: overlapping circles along a border */
.foam{position:relative}
.foam::after{
  content:"";position:absolute;left:0;right:0;bottom:-13px;height:26px;pointer-events:none;
  background:
    radial-gradient(circle 13px at 14px 13px, var(--ink) 96%, transparent 97%) repeat-x 0 0/56px 26px,
    radial-gradient(circle 9px  at 42px 15px, var(--ink) 96%, transparent 97%) repeat-x 0 0/56px 26px;
  filter:drop-shadow(0 -1px 0 rgba(0,200,248,.18));
}
.foam-2::after{background-color:transparent}

/* Cyan glow ring, for anything that should feel "lit" */
.glow{box-shadow:var(--shadow-cyan)}
.glow-t{
  position:relative;
}
.glow-t::before{
  content:"";position:absolute;inset:auto 12% 100% 12%;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  opacity:.7;
}

/* Water sheen sweep for headline words: <span class="sheen">clean</span> */
.sheen{
  background:linear-gradient(100deg,var(--white) 34%,var(--cyan-lt) 46%,var(--cyan) 54%,var(--white) 66%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:wodg-sheen 7s linear infinite;
}
.cyan{color:var(--cyan)}

/* ------------------------------------------------------------------ 15 hero */
.hero{
  position:relative;
  overflow:hidden;
  padding-block:clamp(56px,10vw,116px) clamp(56px,9vw,104px);
  isolation:isolate;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(760px 460px at 74% 14%, rgba(0,200,248,.22), transparent 66%),
    radial-gradient(520px 420px at 6% 86%, rgba(0,147,196,.18), transparent 68%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.85;
  background:
    radial-gradient(circle 11px at 9% 74%,  rgba(123,228,255,.26), transparent 70%),
    radial-gradient(circle 19px at 21% 22%, rgba(0,200,248,.16),  transparent 66%),
    radial-gradient(circle 7px  at 35% 55%, rgba(123,228,255,.30), transparent 72%),
    radial-gradient(circle 26px at 66% 12%, rgba(0,200,248,.12),  transparent 64%),
    radial-gradient(circle 9px  at 82% 66%, rgba(123,228,255,.24), transparent 70%),
    radial-gradient(circle 14px at 93% 30%, rgba(0,200,248,.16),  transparent 68%);
  animation:wodg-drift 26s ease-in-out infinite;
}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;gap:var(--gap-l);align-items:center}
@media (min-width:960px){
  .hero-grid{grid-template-columns:1.08fr .92fr;gap:clamp(36px,5vw,68px)}
}
.hero h1{margin-bottom:18px}
.hero .sub,.hero-sub{
  color:var(--fg-dim);
  font-size:clamp(1.0625rem,1.9vw,1.3125rem);
  max-width:56ch;
  margin-bottom:26px;
}
.hero .btn-row{margin-bottom:22px}
.hero-marks{display:flex;flex-wrap:wrap;gap:10px 20px;color:var(--fg-mute);font-size:.875rem}
.hero-marks span{display:inline-flex;align-items:center;gap:7px}
.hero-marks span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);flex:none}

/* Decorative hero panel — a "water card" pages can drop content into */
.hero-art{
  position:relative;
  border:1px solid var(--line-2);
  border-radius:var(--r-l);
  background:linear-gradient(160deg,rgba(0,200,248,.14),var(--ink-3) 46%,var(--ink-2));
  box-shadow:var(--shadow);
  padding:clamp(20px,3vw,30px);
  overflow:hidden;
}
.hero-art::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle 240px at 78% -12%, rgba(0,200,248,.24), transparent 70%);
}
.hero-art > *{position:relative}

/* Short header for interior pages */
.pagehero{
  position:relative;
  overflow:hidden;
  padding-block:clamp(40px,7vw,80px) clamp(30px,5vw,52px);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(0,200,248,.09),transparent 72%);
}
.pagehero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.7;
  background:
    radial-gradient(circle 8px  at 16% 68%, rgba(123,228,255,.24), transparent 70%),
    radial-gradient(circle 15px at 72% 26%, rgba(0,200,248,.14),  transparent 66%),
    radial-gradient(circle 6px  at 89% 72%, rgba(123,228,255,.26), transparent 72%);
  animation:wodg-drift 24s ease-in-out infinite;
}
.pagehero .wrap{position:relative;z-index:1}
.pagehero h1{font-size:clamp(2.2rem,5.4vw,3.6rem);margin-bottom:14px}
.pagehero .sub{color:var(--fg-dim);font-size:clamp(1rem,1.7vw,1.1875rem);max-width:62ch}

/* ------------------------------------------------------------------- 16 nav */
.nav{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:14px;
  min-height:var(--nav-h);
  padding:10px var(--sp);
  background:rgba(5,8,12,.82);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,200,248,.55),transparent);
  opacity:.7;
}
/* min-height, not img height: under 400px the mark drops to 36px and the link's
   own box went with it, leaving the home target below --tap. */
.lockup{display:flex;align-items:center;flex:none;min-height:var(--tap);border-radius:var(--r-s)}
.lockup img{height:clamp(38px,4.6vw,50px);width:auto}
.lockup:hover{opacity:.88}

.nav .links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav .links a{
  display:inline-flex;align-items:center;
  min-height:var(--tap);
  padding:8px 15px;
  border-radius:var(--r-pill);
  color:var(--fg-dim);
  font-family:var(--f-display);
  font-size:.9375rem;
  font-weight:500;
  white-space:nowrap;
  transition:color .18s var(--ease),background-color .18s var(--ease);
}
.nav .links a:hover{color:var(--white);background:rgba(255,255,255,.05)}
.nav .links a.here,.nav .links a[aria-current="page"]{color:var(--cyan);background:rgba(0,200,248,.10)}
.navcta{flex:none;margin-left:6px}

.navtoggle{
  display:none;
  width:var(--tap);height:var(--tap);
  margin-left:auto;
  border:1px solid var(--line-2);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  padding:0;
  place-items:center;
  align-content:center;
  justify-items:center;
  gap:5px;
}
.navtoggle span{
  display:block;width:20px;height:2px;border-radius:2px;background:var(--fg);
  transition:transform .22s var(--ease),opacity .16s var(--ease);
}
.nav.open .navtoggle{border-color:var(--cyan);background:rgba(0,200,248,.10)}
.nav.open .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .navtoggle span:nth-child(2){opacity:0}
.nav.open .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1000px){
  .navtoggle{display:grid;order:3;margin-left:0}
  .lockup{order:1;margin-right:auto}
  .navcta{order:2;margin-left:0;padding:10px 18px;font-size:.9375rem}
  .nav .links{
    order:4;
    position:absolute;left:0;right:0;top:100%;
    display:grid;gap:4px;
    margin:0;
    padding:12px var(--sp) calc(12px + env(safe-area-inset-bottom,0px));
    background:rgba(5,8,12,.97);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);
    max-height:calc(100dvh - var(--nav-h));
    overflow-y:auto;
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
  }
  .nav.open .links{opacity:1;visibility:visible;transform:none}
  .nav .links a{
    min-height:52px;
    padding:12px 16px;
    border-radius:var(--r-m);
    font-size:1.0625rem;
    border:1px solid transparent;
  }
  .nav .links a.here,.nav .links a[aria-current="page"]{border-color:rgba(0,200,248,.3)}
}
@media (max-width:400px){
  .navcta{padding:10px 14px;font-size:.875rem}
  .lockup img{height:36px}
}
/* body lock while the drawer is open (app.js toggles .navlock) */
body.navlock{overflow:hidden}

/* ---------------------------------------------------------------- 17 footer */
.foot{
  position:relative;
  margin-top:clamp(48px,8vw,96px);
  padding-top:clamp(40px,6vw,72px);
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,transparent,rgba(11,18,25,.9));
}
.foot::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,200,248,.5),transparent);
}
.fgrid{
  display:grid;
  gap:var(--gap-l);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  padding-bottom:clamp(30px,4vw,52px);
}
.fbrand{grid-column:span 1}
@media (min-width:760px){.fbrand{grid-column:span 2;max-width:400px}}
.fbrand img{height:clamp(42px,5vw,54px);width:auto;margin-bottom:16px}
.fbrand p{color:var(--fg-dim);font-size:.9375rem}
.foot h6{
  font-family:var(--f-display);
  font-size:.75rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:12px;
}
.foot p{color:var(--fg-dim);font-size:.9375rem;line-height:2}
.foot a{color:var(--fg-dim);text-decoration:none}
.foot a:hover{color:var(--cyan-lt)}
/* The <br>-separated link columns put one link per line, so each anchor is its
   own target rather than an inline run inside a sentence — the WCAG 2.5.8 inline
   exception does not cover them. As bare inlines they were 19px tall. Give them
   a real box; the phone/email column keeps the same treatment. */
.foot .fgrid p a{display:inline-block;min-height:var(--tap);padding-block:11px;line-height:1.4}
.fbase{
  display:flex;flex-wrap:wrap;gap:8px 24px;
  align-items:center;justify-content:space-between;
  padding-block:20px calc(24px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line);
}
.fbase p{font-size:.8125rem;color:var(--fg-mute);line-height:1.6}
.fsvc{color:var(--fg-mute)}

/* --------------------------------------------------------------- 18 booking */
.wiz{
  border:1px solid var(--line);
  border-radius:var(--r-l);
  background:var(--ink-2);
  padding:clamp(18px,3vw,30px);
  box-shadow:var(--shadow);
}
.bsteps{
  display:flex;flex-wrap:wrap;gap:8px;
  padding-bottom:18px;margin-bottom:20px;
  border-bottom:1px solid var(--line);
}
.bsteps span{
  padding:5px 13px;
  border-radius:var(--r-pill);
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  font-family:var(--f-display);
  font-size:.8125rem;
  font-weight:500;
  color:var(--fg-mute);
  white-space:nowrap;
}
.bsteps span.on{background:rgba(0,200,248,.14);border-color:rgba(0,200,248,.45);color:var(--cyan-lt)}
.bsteps span.done{border-color:rgba(55,217,160,.35);color:var(--ok)}
.wstep h3{margin-bottom:6px}
.wsub{color:var(--fg-dim);font-size:.9375rem;margin-bottom:18px}
.wnav{display:flex;gap:12px;justify-content:space-between;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}

/* Option buttons — vehicle, service, add-on, window pickers */
.optgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.optrow{display:flex;flex-wrap:wrap;gap:10px}
.opt{
  position:relative;
  display:flex;flex-direction:column;gap:4px;
  min-height:var(--tap);
  padding:14px 18px;
  border:1px solid var(--line-2);
  border-radius:var(--r-m);
  background:rgba(255,255,255,.02);
  text-align:left;
  color:var(--fg);
  font-family:var(--f-body);
  transition:border-color .18s var(--ease),background-color .18s var(--ease),transform .18s var(--ease);
}
.opt:hover{border-color:rgba(0,200,248,.5);background:rgba(0,200,248,.06);transform:translateY(-2px)}
.opt > span:first-child{font-family:var(--f-display);font-weight:600;font-size:1rem}
.opt small{color:var(--fg-dim);font-size:.8125rem;line-height:1.45}
.opt .op{
  font-family:var(--f-display);font-weight:700;color:var(--cyan);
  font-variant-numeric:tabular-nums;
}
.opt.on{
  border-color:var(--cyan);
  background:rgba(0,200,248,.10);
  box-shadow:0 0 0 1px rgba(0,200,248,.35) inset;
}
.opt.on::after{
  content:"";position:absolute;right:14px;top:16px;
  width:6px;height:11px;
  border:solid var(--cyan);border-width:0 2px 2px 0;
  transform:rotate(42deg);
}
.opt.chip{
  flex-direction:row;align-items:center;
  padding:10px 18px;border-radius:var(--r-pill);
  font-family:var(--f-display);font-size:.9375rem;font-weight:500;
}
.opt.chip.on::after{display:none}

.paypick{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.paypick .opt .big{font-family:var(--f-display);font-size:1.5rem;font-weight:700;color:var(--cyan)}

.ziphint{margin-top:8px;font-size:.8125rem;min-height:1.2em;color:var(--fg-mute)}
.ziphint.ok{color:var(--ok)}
.ziphint.maybe{color:var(--warn)}

.summary{
  border:1px solid rgba(0,200,248,.3);
  border-radius:var(--r-l);
  background:linear-gradient(180deg,rgba(0,200,248,.07),var(--ink-2));
  padding:clamp(18px,3vw,28px);
}
.summary h3{margin-bottom:14px}
.srow{display:flex;justify-content:space-between;gap:18px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.9375rem}
.srow:last-of-type{border-bottom:0}
.srow dt,.srow > span:first-child{color:var(--fg-mute)}
.srow dd,.srow > span:last-child{color:var(--fg);text-align:right;margin:0}
.stotal{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line-2);
}
.stotal .lbl{font-family:var(--f-display);font-weight:600}
.stotal .v{font-family:var(--f-display);font-size:clamp(1.75rem,4vw,2.4rem);font-weight:700;color:var(--cyan);font-variant-numeric:tabular-nums}
.stotal .was{margin-right:10px;color:var(--fg-mute);text-decoration:line-through;font-size:1.125rem}
.saveline{margin-top:8px;color:var(--ok);font-size:.875rem;font-weight:500;min-height:1.2em}
.snote{margin-top:10px;color:var(--fg-mute);font-size:.8125rem}

/* ------------------------------------------------------- 19 catalogue bits  */
/* add-ons (app.js renders .addon into a .js-addons container) */
.addongrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.addon{
  border:1px solid var(--line);
  border-radius:var(--r-m);
  background:var(--ink-2);
  padding:18px 20px;
  transition:border-color .2s var(--ease),transform .2s var(--ease);
}
.addon:hover{border-color:rgba(0,200,248,.4);transform:translateY(-2px)}
.addon h4{font-size:1.0625rem;margin-bottom:6px}
.addon p{color:var(--fg-dim);font-size:.875rem;margin-bottom:12px}
.addon .ap{
  font-family:var(--f-display);font-weight:600;font-size:.9375rem;
  color:var(--cyan);font-variant-numeric:tabular-nums;
}
.addon .ap.quoted{color:var(--fg-mute);font-weight:500}

/* membership cards (app.js renders .mcard into a .js-memberships container) */
.mcards{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,265px),1fr))}
.mcard{
  position:relative;
  display:flex;flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--r-l);
  background:linear-gradient(180deg,var(--ink-3),var(--ink-2));
  padding:clamp(20px,3vw,28px);
}
.mcard.feat{
  border-color:rgba(0,200,248,.45);
  box-shadow:var(--shadow-cyan);
  background:linear-gradient(180deg,rgba(0,200,248,.09),var(--ink-3) 34%,var(--ink-2));
}
.mcard h3{margin-bottom:6px}
.mcard .best{color:var(--fg-dim);font-size:.875rem;margin-bottom:16px}
.mprices{display:grid;gap:6px;padding:14px 0;margin-bottom:16px;border-block:1px solid var(--line)}
.mp{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.mp small{color:var(--fg-mute);font-size:.8125rem}
.mp span{white-space:nowrap;font-variant-numeric:tabular-nums}
.mp b{font-family:var(--f-display);font-size:1.125rem;color:var(--cyan)}
.mcard ul{display:grid;gap:9px;margin:0 0 20px;padding:0;list-style:none}
.mcard ul li{position:relative;padding-left:26px;color:var(--fg-dim);font-size:.9375rem;line-height:1.5}
.mcard ul li::before{
  content:"";position:absolute;left:2px;top:.42em;
  width:5px;height:10px;
  border:solid var(--cyan);border-width:0 2px 2px 0;
  transform:rotate(42deg);
}
.mcard .go{margin-top:auto}
.mcard .go a{display:inline-flex;width:100%;justify-content:center}

/* service-area chip grid */
.areagrid{display:flex;flex-wrap:wrap;gap:10px}
.areagrid .pill{background:rgba(0,200,248,.06);border-color:rgba(0,200,248,.24);color:var(--fg-dim)}

/* closing call-to-action band */
.cta{
  position:relative;overflow:hidden;
  border:1px solid rgba(0,200,248,.32);
  border-radius:var(--r-l);
  background:linear-gradient(140deg,rgba(0,200,248,.16),var(--ink-3) 52%,var(--ink-2));
  padding:clamp(28px,5vw,54px);
  text-align:center;
  box-shadow:var(--shadow);
}
.cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle 16px at 12% 76%, rgba(123,228,255,.20), transparent 68%),
    radial-gradient(circle 26px at 88% 22%, rgba(0,200,248,.16), transparent 66%),
    radial-gradient(circle 9px  at 70% 82%, rgba(123,228,255,.24), transparent 70%);
  animation:wodg-drift 20s ease-in-out infinite;
}
.cta > *{position:relative}
.cta h2{margin-bottom:12px}
.cta p{color:var(--fg-dim);max-width:52ch;margin:0 auto 24px}

/* two-up comparison panels (pay now / pay later, model A / model B) */
.paysplit{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.payc{
  border:1px solid var(--line);
  border-radius:var(--r-l);
  background:var(--ink-2);
  padding:clamp(20px,3vw,28px);
}
.payc.hot{border-color:rgba(0,200,248,.45);background:linear-gradient(180deg,rgba(0,200,248,.10),var(--ink-2));box-shadow:var(--shadow-cyan)}
.payc .big{font-family:var(--f-display);font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;color:var(--cyan);margin:6px 0 10px;line-height:1.05}
.payc p{color:var(--fg-dim);font-size:.9375rem}

/* ----------------------------------------------------------------- 20 prose */
.prose{max-width:var(--read)}
.prose h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin:2em 0 .6em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.1875rem;margin:1.6em 0 .5em}
.prose p,.prose li{color:var(--fg-dim)}
.prose p{margin-bottom:1em}
.prose ul,.prose ol{margin:0 0 1.2em 1.25em;padding:0;display:grid;gap:.5em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{padding-left:.25em}
.prose li::marker{color:var(--cyan)}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose .updated{
  display:inline-block;margin-bottom:1.6em;
  color:var(--fg-mute);font-size:.875rem;
}
.toc{
  border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--ink-2);padding:18px 22px;margin-bottom:2em;
}
.toc h2{font-size:.75rem !important;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin:0 0 10px !important}
.toc ol{margin:0 0 0 1.1em;display:grid;gap:.35em}

/* ---------------------------------------------------------------- 21 reveal */
/* Hidden state only applies once app.js confirms motion is allowed, so the
   page is fully readable with JS off or reduced motion on. */
.js-motion .reveal,
.js-motion [data-reveal]{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  will-change:opacity,transform;
}
.js-motion .reveal.in,
.js-motion [data-reveal].in{opacity:1;transform:none;will-change:auto}

/* ------------------------------------------------------------------ 22 a11y */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:var(--ring);
  outline-offset:2px;
  border-radius:6px;
}
.check:has(input:focus-visible){outline:var(--ring);outline-offset:2px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .btn:hover,.card-hover:hover,a.card:hover,.opt:hover,.addon:hover{transform:none}
  .js-motion .reveal,.js-motion [data-reveal]{opacity:1;transform:none}
  .sheen{animation:none;color:var(--cyan-lt);background:none;-webkit-background-clip:border-box;background-clip:border-box}
}

@media (prefers-contrast:more){
  :root{--line:rgba(255,255,255,.22);--line-2:rgba(255,255,255,.4);--fg-dim:#C3D6E2;--fg-mute:#9BB2C2}
}

@media print{
  :root{--fg:#000;--fg-dim:#222;--fg-mute:#444;--ink:#fff;--ink-2:#fff;--ink-3:#fff;--line:#bbb;--line-2:#888}
  body{background:#fff !important;color:#000;font-size:11pt;line-height:1.45}
  .nav,.navtoggle,.skip,.cta,.bubcol,.hero::before,.hero::after,.pagehero::after,.bubblefield::before,.foam::after{display:none !important}
  .hero,.pagehero,.sec{padding-block:14pt;background:none !important;border:0}
  h1{font-size:22pt}h2{font-size:16pt}h3{font-size:13pt}
  h1,h2,h3,h4,h5,h6{color:#000;page-break-after:avoid}
  .card,.panel,.tbl,.mcard,.step,.addon,.summary,.wiz{
    background:none !important;border:1px solid #bbb;box-shadow:none !important;page-break-inside:avoid;
  }
  .tbl thead th{background:none;color:#000}
  a{color:#000;text-decoration:underline}
  .prose a[href^="http"]::after,.foot a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .foot{margin-top:18pt;padding-top:12pt;border-top:1px solid #bbb;background:none}
  .fbrand img,.lockup img{display:none}
  .fbrand::before{content:"Wash OnDaGo";display:block;font:700 16pt var(--f-display);color:#000;margin-bottom:6pt}
  .reveal,[data-reveal]{opacity:1 !important;transform:none !important}
  mark.todo{border:1px solid #000;background:none;color:#000}
}