/* ==========================================================================
   Raindancer Car Wash — site stylesheet
   Brand system lives in :root below. /brand-guide/ displays these same
   variables. Change a value HERE, never page by page.
   ========================================================================== */

:root {
  /* ---- Colors (sampled from the logo file) — one job each ---- */
  --rd-green: #12FF02; /* Primary CTA fill. Never text on white. */
  --rd-blue:  #0000FD; /* Headings, links, secondary buttons, blue sections */
  --rd-ink:   #282828; /* Body text, button text, sticker shadow, dark sections */
  --rd-white: #FFFFFF; /* Page background */
  --rd-tint:  #F2F2FF; /* Alternating sections (5% logo blue on white) */

  /* Menu colors — red, yellow, and blue sampled from the client's wash menu; purple added 2026-10-22 */
  --menu-red:    #E20000; /* white text 5.0:1 */
  --menu-yellow: #FEF200; /* ink text 12.6:1 */
  --menu-blue:   #006DBC; /* white text 5.4:1 */
  --menu-purple: #6A1B9A; /* white text 9.4:1 */

  /* Package tier colors — the client's original package colors (team request 2026-10-22).
     Used ONLY to identify a wash package (plan card headers, picker, calculator). */
  --tier-managers: var(--menu-purple); /* Manager's Special — white text */
  --tier-best:     var(--menu-blue);   /* The Best Wash — white text */
  --tier-ultimate: var(--menu-red);    /* The Ultimate Wash — white text */
  --tier-wsp:      var(--menu-yellow); /* Wash Shine & Protect — ink text */

  /* Derived tones — mixed from the six colors above, never new colors */
  --rd-rule: color-mix(in srgb, var(--rd-blue) 16%, var(--rd-white));      /* light divider lines */
  --rd-rule-dark: color-mix(in srgb, var(--rd-white) 25%, var(--rd-ink)); /* dividers on ink */
  --rd-stripe: color-mix(in srgb, var(--rd-blue) 90%, var(--rd-white));   /* placeholder stripes */
  --rd-black: #000000;                                                    /* high-contrast mode text only */
  --rd-blue-deep: #0000CA;                                                /* high-contrast mode blue (logo blue, 20% darker) — white 11.2:1 */
  --rd-deep: color-mix(in srgb, var(--rd-blue) 72%, var(--rd-black));               /* top utility bar — same royal blue, just deeper (no grey mixed in). White 12:1, green 9:1 */

  /* ---- Type ---- */
  --font: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --fw-body: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-heavy: 800;

  --fs-body: 1rem;        /* 16px mobile */
  --fs-small: 0.875rem;   /* 14px — fine print only */
  --fs-lead: 1.125rem;
  --fs-h1: 2.5rem;        /* 40px mobile */
  --fs-h2: 1.875rem;      /* 30px mobile */
  --fs-h3: 1.25rem;       /* 20px mobile */
  --lh-body: 1.6;
  --lh-tight: 1.1;

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  --section-pad: var(--space-7);  /* 64px mobile */
  --gap: var(--space-3);          /* 16px mobile */
  --gutter: var(--space-3);
  --max: 1200px;

  /* ---- Buttons (two styles, one shape) ---- */
  --btn-radius: 14px;
  --btn-pad: 14px 28px;
  --btn-border: 2px;
  --sticker: 4px 4px 0 var(--rd-ink);
  --sticker-hover: 6px 6px 0 var(--rd-ink);
  --sticker-press: 1px 1px 0 var(--rd-ink);

  /* ---- Misc ---- */
  --radius: 20px;
  --focus: 3px solid var(--rd-blue);
  --focus-on-dark: 3px solid var(--rd-green);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

@media (min-width: 900px) {
  :root {
    --fs-body: 1.125rem;  /* 18px desktop */
    --fs-lead: 1.3125rem;
    --fs-h1: 3.5rem;      /* 56px desktop */
    --fs-h2: 2.5rem;      /* 40px desktop */
    --fs-h3: 1.5rem;      /* 24px desktop */
    --section-pad: var(--space-8);  /* 96px desktop */
    --gap: var(--space-4);          /* 24px desktop */
    --gutter: var(--space-5);
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--rd-ink);
  background: var(--rd-white);
}
img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }
h1, h2, h3 { font-weight: var(--fw-heavy); line-height: var(--lh-tight); letter-spacing: -0.025em; margin: 0 0 var(--space-3); color: var(--rd-blue); text-wrap: balance; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 var(--space-3); }
ul { margin: 0 0 var(--space-3); padding-left: 1.25em; }
a { color: var(--rd-blue); text-decoration: none; text-underline-offset: 3px; }
a:hover, a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; }
/* Links inside sentences are bold, so they don't rely on color alone (WCAG 1.4.1) */
p a:not(.btn), dd a:not(.btn), .answer a, .checklist a, .amenities a, td a { font-weight: var(--fw-bold); }
:focus-visible { outline: var(--focus); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible, .on-dark:focus-visible { outline: var(--focus-on-dark); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-3); top: -100px; z-index: 1000;
  background: var(--rd-ink); color: var(--rd-white); padding: var(--space-2) var(--space-3);
  border-radius: 8px; font-weight: var(--fw-bold);
}
.skip-link:focus { top: var(--space-3); outline: var(--focus-on-dark); }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-pad) 0; }
.section--tint { background: var(--rd-tint); }
.section--blue { background: var(--rd-blue); color: var(--rd-white); }
.section--blue h2, .section--blue h3 { color: var(--rd-white); }
.section--blue a:not(.btn) { color: var(--rd-white); }

.center { text-align: center; }
.narrow { max-width: 720px; margin-left: auto; margin-right: auto; }
.lead { font-size: var(--fs-lead); }
.fine { font-size: var(--fs-small); }

/* Sticker headline — the logo's offset drop shadow */
.sticker { text-shadow: 3px 3px 0 var(--rd-green); }
.on-dark .sticker, .sticker--dark { text-shadow: 4px 4px 0 var(--rd-ink); }
.hl { color: var(--rd-green); } /* only used on dark or blue backgrounds */

.eyebrow {
  display: inline-block; font-weight: var(--fw-heavy); letter-spacing: .08em;
  text-transform: uppercase; font-size: var(--fs-small); margin-bottom: var(--space-2);
  color: var(--rd-blue);
}
.on-dark .eyebrow, .section--blue .eyebrow { color: var(--rd-green); }

/* ---------- Buttons: exactly two styles ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: var(--btn-pad);
  font-family: var(--font); font-size: 1rem; font-weight: var(--fw-heavy);
  text-transform: uppercase; letter-spacing: .04em; line-height: 1.1; text-align: center;
  text-decoration: none; border-radius: var(--btn-radius); border: var(--btn-border) solid;
  cursor: pointer; transition: transform .15s var(--ease), box-shadow .15s var(--ease),
    background-color .15s var(--ease), color .15s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn--primary {
  background: var(--rd-green); color: var(--rd-ink); border-color: var(--rd-ink);
  box-shadow: var(--sticker);
}
.btn--primary:hover, .btn--primary:focus-visible { transform: translate(-2px, -2px); box-shadow: var(--sticker-hover); }
.btn--primary:active { transform: translate(3px, 3px); box-shadow: var(--sticker-press); }
.on-dark .btn--primary, .section--blue .btn--primary { border-color: var(--rd-ink); }

.btn--secondary {
  background: transparent; color: var(--rd-blue); border-color: var(--rd-blue);
}
.btn--secondary:hover, .btn--secondary:focus-visible { background: var(--rd-blue); color: var(--rd-white); transform: translate(-2px, -2px); }
.btn--secondary:active { transform: translate(1px, 1px); }
.on-dark .btn--secondary, .section--blue .btn--secondary { color: var(--rd-white); border-color: var(--rd-white); }
.on-dark .btn--secondary:hover, .section--blue .btn--secondary:hover, .on-dark .btn--secondary:focus-visible, .section--blue .btn--secondary:focus-visible { background: var(--rd-white); color: var(--rd-blue); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.center .btn-row { justify-content: center; }
.text-link { font-weight: var(--fw-bold); }

/* ---------- Utility bar ---------- */
.utility { background: var(--rd-deep); color: var(--rd-white); font-size: var(--fs-small); }
.utility .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 36px; }
.utility a { color: var(--rd-white); font-weight: var(--fw-bold); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.utility a:hover { text-decoration: underline; }
.utility__left, .utility__right { display: flex; align-items: center; gap: var(--space-4); }
.utility__join { color: var(--rd-green) !important; }
.utility svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 699px) {
  
  .utility .container { justify-content: center; }
  .utility__left { display: none; }
}

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--rd-white); border-bottom: 2px solid var(--rd-ink); }
.site-header .container { display: flex; align-items: center; gap: var(--space-4); min-height: 76px; }
.brand { display: inline-block; flex-shrink: 0; }
.brand img { width: 84px; height: auto; }
.nav { margin-left: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-1); }
.nav a {
  display: block; padding: var(--space-2) var(--space-3); border-radius: 10px;
  color: var(--rd-ink); font-weight: var(--fw-bold); text-decoration: none;
}
.nav a:hover { color: var(--rd-blue); background: var(--rd-tint); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--rd-blue); box-shadow: inset 0 -3px 0 var(--rd-blue); border-radius: 10px 10px 0 0; }
.nav-toggle {
  display: none; margin-left: auto; background: transparent; border: 2px solid var(--rd-ink);
  border-radius: 10px; width: 48px; height: 48px; cursor: pointer; color: var(--rd-ink);
}
.nav-toggle svg { width: 24px; height: 24px; margin: auto; }
.header-cta { flex-shrink: 0; }

@media (max-width: 979px) {
  .site-header .container { gap: var(--space-3); min-height: 68px; }
  .brand img { width: 64px; }
  .nav-toggle { display: block; }
  .header-cta { padding: 10px 14px; font-size: .875rem; min-height: 44px; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--rd-white); border-bottom: 2px solid var(--rd-ink); display: none; margin: 0; }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; padding: var(--space-2) var(--gutter) var(--space-4); }
  .nav a { padding: var(--space-3); font-size: 1.125rem; }
  .no-js .nav { display: block; position: static; border: 0; }
  .no-js .nav-toggle { display: none; }
}
@media (max-width: 380px) {
  .header-cta .btn-long { display: none; }
}
@media (min-width: 381px) {
  .header-cta .btn-short { display: none; }
}

/* ---------- Hero (dark moment) ---------- */
.hero {
  position: relative; overflow: hidden; color: var(--rd-white);
  background: radial-gradient(ellipse at 80% 10%, color-mix(in srgb, var(--rd-white) 22%, transparent) 0%, transparent 55%),
              linear-gradient(150deg, var(--rd-blue) 0%, color-mix(in srgb, var(--rd-blue) 80%, var(--rd-white)) 100%);
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }

.hero__inner { position: relative; z-index: 1; padding: var(--space-8) 0 var(--space-8); max-width: 700px; }
.hero h1 { color: var(--rd-white); font-size: clamp(2.75rem, 6.5vw, 5.25rem); line-height: .98; letter-spacing: -0.035em; }
.hero p { font-size: var(--fs-lead); max-width: 560px; }

/* ---------- Photo placeholders ---------- */
.photo {
  position: relative; display: block; border-radius: var(--radius); overflow: hidden;
  background: var(--rd-blue); border: 2px solid var(--rd-ink); box-shadow: 8px 8px 0 var(--rd-green);
}
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Facts band (trust) — slim, runs out of the hero ---------- */
.facts { background: var(--rd-blue); color: var(--rd-white); border-bottom: 4px solid var(--rd-green); }
.facts ul { list-style: none; margin: 0; padding: var(--space-4) 0; display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .facts ul { grid-template-columns: repeat(3, 1fr); gap: 0; padding: var(--space-5) 0; } .facts li + li { border-left: 1px solid color-mix(in srgb, var(--rd-white) 35%, transparent); } }
.facts li { display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: 0 var(--space-4); }
@media (max-width: 899px) { .facts li { justify-content: flex-start; } }
.facts__icon { flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center; border: 2px solid var(--rd-green); border-radius: 50%; color: var(--rd-green); }
.facts__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.facts strong { display: block; font-size: 1.125rem; font-weight: var(--fw-heavy); line-height: 1.2; }
.facts li > span:last-child > span { display: block; font-size: var(--fs-small); font-weight: var(--fw-medium); }
.facts a { color: var(--rd-white); }

/* ---------- Split layout ---------- */
.split { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: var(--space-7); }  }

/* ---------- Steps (scroll storytelling) ---------- */
.steps { list-style: none; margin: var(--space-6) 0; padding: 0; display: grid; gap: var(--space-5); counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--gap); } }
.step { position: relative; padding-top: var(--space-2); text-align: center; max-width: 360px; margin: 0 auto; }
.step__num {
  display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto var(--space-3);
  border-radius: 50%; background: var(--rd-green); color: var(--rd-ink); border: 2px solid var(--rd-ink);
  box-shadow: var(--sticker); font-size: 1.75rem; font-weight: var(--fw-heavy);
}
.step h3 { margin-bottom: var(--space-2); }
.section--blue .step__num { border-color: var(--rd-ink); }

/* ---------- Plans ---------- */
.plans { display: grid; gap: var(--gap); margin-top: var(--space-6); }
@media (min-width: 640px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .plans { grid-template-columns: repeat(4, 1fr); } }
.plan {
  --tier: var(--rd-ink); --tier-text: var(--rd-white);
  position: relative; display: flex; flex-direction: column; background: var(--rd-white); color: var(--rd-ink);
  border: 2px solid var(--rd-ink); border-radius: var(--radius); box-shadow: 8px 8px 0 var(--tier);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.plan:hover, .plan:focus-within { transform: translateY(-4px); box-shadow: 12px 12px 0 var(--tier); }
.plan--managers { --tier: var(--tier-managers); --tier-text: var(--rd-white); }
.plan--best     { --tier: var(--tier-best);     --tier-text: var(--rd-white); }
.plan--ultimate { --tier: var(--tier-ultimate); --tier-text: var(--rd-white); }
.plan--wsp      { --tier: var(--tier-wsp);      --tier-text: var(--rd-ink); }
.plan__head {
  position: relative; background: var(--tier); color: var(--tier-text);
  border-bottom: 2px solid var(--rd-ink); border-radius: 18px 18px 0 0;
  padding: var(--space-4); min-height: 112px; display: flex; align-items: flex-end;
}
.plan__head h3 { color: var(--tier-text); margin: 0; font-size: 1.5rem; font-style: italic; } /* 24px heavy = large text */
.plan--managers .plan__head h3, .plan--best .plan__head h3, .plan--ultimate .plan__head h3 { text-shadow: 2px 2px 0 var(--rd-ink); }
.plan__body { display: flex; flex-direction: column; flex-grow: 1; padding: var(--space-4); }
.plan__price { font-size: 2.75rem; font-weight: var(--fw-heavy); line-height: 1; color: var(--rd-ink); margin: 0; }
.plan__price small { font-size: 1rem; font-weight: var(--fw-bold); }
.plan__single { font-weight: var(--fw-medium); margin: var(--space-2) 0 var(--space-3); }
.plan ul { list-style: none; padding: 0; margin: 0 0 var(--space-4); flex-grow: 1; }
.plan li { padding: 6px 0 6px 28px; position: relative; border-bottom: 1px dashed var(--rd-rule); }
.plan li::before { content: ""; position: absolute; left: 0; top: .7em; width: 16px; height: 16px; border-radius: 50%; background: var(--rd-blue); }
.plan li::after { content: ""; position: absolute; left: 5px; top: calc(.7em + 3px); width: 4px; height: 8px; border: solid var(--rd-white); border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* Best Value badge — echoes the yellow starburst on the printed menu */
.badge {
  position: absolute; top: -18px; right: var(--space-3); background: var(--menu-yellow); color: var(--menu-red);
  font-size: 1.1875rem; font-weight: var(--fw-heavy); font-style: italic; text-transform: uppercase; letter-spacing: .03em;
  padding: 2px var(--space-3); border-radius: 999px; border: 2px solid var(--rd-ink); transform: rotate(4deg);
  box-shadow: 3px 3px 0 var(--rd-ink);
}
.express-note { margin-top: var(--space-5); font-weight: var(--fw-medium); }
/* WashLinc product badges — replace the check mark on matching plan items (client-supplied art) */
.plan li.plan__smart { display: flex; align-items: center; min-height: 56px; padding-left: 56px; }
.plan li.plan__smart::before, .plan li.plan__smart::after { content: none; }
.plan__smart img { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: auto; height: 48px; }

/* Menu table */

 /* heading above says the same thing */

/* ---------- Amenities ---------- */
.amenities { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 560px) { .amenities { grid-template-columns: 1fr 1fr; } }
.amenities li { display: flex; gap: var(--space-3); align-items: center; font-weight: var(--fw-bold); }
.amenities .icon {
  flex-shrink: 0; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px;
  background: var(--rd-blue); color: var(--rd-white); transition: transform .2s var(--ease);
}
.amenities li:hover .icon { transform: rotate(-8deg) scale(1.06); }
.amenities .icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.amenities small { display: block; font-weight: var(--fw-medium); font-size: var(--fs-small); }

/* ---------- Location card ---------- */
.location { display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .location { grid-template-columns: 5fr 7fr; align-items: stretch; } }
.location__info dl { margin: 0 0 var(--space-4); display: grid; gap: var(--space-3); }
.location__info dt { font-weight: var(--fw-heavy); color: var(--rd-blue); text-transform: uppercase; font-size: var(--fs-small); letter-spacing: .06em; }
.location__info dd { margin: 0; font-weight: var(--fw-medium); }
.map { border: 2px solid var(--rd-ink); border-radius: var(--radius); overflow: hidden; min-height: 320px; box-shadow: 8px 8px 0 var(--rd-blue); }
.map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; }
.hours { border-collapse: collapse; }
.hours th, .hours td { text-align: left; padding: 2px var(--space-4) 2px 0; font-weight: var(--fw-medium); }
.hours th { font-weight: var(--fw-bold); }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: var(--space-5) auto 0; }
.faq details { border: 2px solid var(--rd-ink); border-radius: 16px; background: var(--rd-white); margin-bottom: var(--space-3); transition: box-shadow .2s var(--ease); }
.faq details[open] { box-shadow: 6px 6px 0 var(--rd-green); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--space-3) var(--space-6) var(--space-3) var(--space-4);
  font-weight: var(--fw-heavy); font-size: 1.125rem; color: var(--rd-blue); position: relative; min-height: 48px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%);
  font-size: 1.75rem; line-height: 1; color: var(--rd-ink); transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq summary:focus-visible { outline-offset: -4px; }
.faq .answer { padding: 0 var(--space-4) var(--space-3); }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; isolation: isolate; }
.cta-band h2 { font-size: calc(var(--fs-h2) * 1.15); }

/* ---------- Embed placeholders (forms) ---------- */
.embed-ph {
  border: 3px dashed var(--rd-blue); border-radius: var(--radius); background: var(--rd-tint);
  padding: var(--space-6) var(--space-4); text-align: center; color: var(--rd-ink);
}
.embed-ph strong { display: block; color: var(--rd-blue); font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.form-privacy { margin-top: var(--space-3); font-size: var(--fs-small); }

/* ---------- Checklist ---------- */
.checklist { list-style: none; padding: 0; }
.checklist li { position: relative; padding-left: 36px; margin-bottom: var(--space-2); font-weight: var(--fw-medium); }
.checklist li::before { content: ""; position: absolute; left: 0; top: .25em; width: 22px; height: 22px; border-radius: 6px; background: var(--rd-green); border: 2px solid var(--rd-ink); }
.checklist li::after { content: ""; position: absolute; left: 8px; top: calc(.25em + 4px); width: 6px; height: 11px; border: solid var(--rd-ink); border-width: 0 3px 3px 0; transform: rotate(45deg); }

.tag-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag-list li { border: 2px solid var(--rd-ink); border-radius: 999px; padding: var(--space-1) var(--space-3); font-weight: var(--fw-bold); background: var(--rd-white); }

/* ---------- Footer ---------- */
.site-footer { background: var(--rd-white); color: var(--rd-ink); border-top: 4px solid var(--rd-green); padding-top: var(--space-7); }
.site-footer a { color: var(--rd-ink); }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--rd-blue); }
.footer-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; } }
.footer-logo { display: inline-block; }
.footer-logo img { width: 150px; height: auto; }
.footer-tagline { margin-top: var(--space-3); }
.site-footer h2 { color: var(--rd-blue); font-size: 1.125rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--space-3); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: var(--space-2); }
.site-footer address { font-style: normal; }
.social { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--rd-ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--rd-green); transition: background .15s, color .15s, transform .15s; }
.social a:hover, .social a:focus-visible { background: var(--rd-green); color: var(--rd-ink); transform: translate(-1px, -1px); }
.social svg { width: 20px; height: 20px; fill: currentColor; }
.footer-legal { margin-top: var(--space-6); padding: var(--space-4) 0; border-top: 1px solid var(--rd-rule); font-size: var(--fs-small); }
.footer-legal ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }
.footer-legal p { margin: 0 0 var(--space-2); }

/* ---------- Conversion-page shell (free wash / thank you) ---------- */
.shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--rd-tint); }

.shell main { flex: 1; }
.shell__foot { background: var(--rd-white); color: var(--rd-ink); border-top: 4px solid var(--rd-green); padding: var(--space-4) 0; text-align: center; font-size: var(--fs-small); }
.shell__foot ul { list-style: none; padding: 0; margin: 0 0 var(--space-2); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-4); }
.shell__foot a { color: var(--rd-ink); font-weight: var(--fw-bold); }
.shell__foot a:hover, .shell__foot a:focus-visible { color: var(--rd-blue); }
.shell__foot p { margin: 0; }

/* ---------- Legal pages ---------- */
.legal { max-width: 780px; }
.legal h2 { font-size: var(--fs-h3); margin-top: var(--space-5); }
.legal address { font-style: normal; }

/* ---------- Scroll reveal (content always present without JS) ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal-bounce { opacity: 0; transform: translateY(40px) rotate(-2deg); transition: opacity .5s var(--ease), transform .6s cubic-bezier(.34,1.56,.64,1); }
.js .reveal-bounce.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .1s !important; }
.reveal-delay-2 { transition-delay: .2s !important; }
.reveal-delay-3 { transition-delay: .3s !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  
  .js .reveal, .js .reveal-bounce { opacity: 1; transform: none; }
}

/* ---------- Brand guide page ---------- */
.bg-swatches { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.swatch { border: 2px solid var(--rd-ink); border-radius: var(--radius); overflow: hidden; background: var(--rd-white); }
.swatch__chip { height: 120px; border-bottom: 2px solid var(--rd-ink); }
.swatch__body { padding: var(--space-3); }
.swatch__body code { font-weight: var(--fw-bold); }
.bg-demo { border: 2px dashed var(--rd-rule); border-radius: var(--radius); padding: var(--space-5); margin-bottom: var(--space-4); }
.bg-demo--dark { background: var(--rd-ink); color: var(--rd-white); border-color: var(--rd-rule-dark); }
.bg-demo--blue { background: var(--rd-blue); color: var(--rd-white); border-color: var(--rd-blue); }
.bg-logos { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.bg-logos figure { margin: 0; border: 2px solid var(--rd-ink); border-radius: var(--radius); padding: var(--space-4); display: grid; place-items: center; gap: var(--space-3); }
.bg-logos figcaption { font-weight: var(--fw-bold); text-align: center; }
.bg-logos .on-ink { background: var(--rd-ink); color: var(--rd-white); }
.contrast-table { width: 100%; border-collapse: collapse; }
.contrast-table th, .contrast-table td { border-bottom: 1px solid var(--rd-rule); padding: var(--space-2) var(--space-3); text-align: left; }
.contrast-table .sample { display: inline-block; padding: 2px 10px; border-radius: 6px; font-weight: var(--fw-bold); }
.state-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.state-row figure { margin: 0; text-align: center; }
.state-row figcaption { font-size: var(--fs-small); margin-top: var(--space-2); }
.btn.is-hover.btn--primary { transform: translate(-2px, -2px); box-shadow: var(--sticker-hover); }
.btn.is-press.btn--primary { transform: translate(3px, 3px); box-shadow: var(--sticker-press); }
.btn.is-hover.btn--secondary { background: var(--rd-blue); color: var(--rd-white); }
.btn.is-focus { outline: var(--focus); outline-offset: 3px; }
.space-demo { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.space-demo div { background: var(--rd-blue); }
.space-demo span { display: block; font-size: var(--fs-small); text-align: center; margin-top: 4px; }
.note-plan { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 3px dashed var(--rd-rule); }
.on-dark .text-link { color: var(--rd-white); }
.legal a, .legal address { overflow-wrap: anywhere; }
.shell h1 { font-size: clamp(2rem, 10vw, var(--fs-h1)); }

/* ==========================================================================
   Brand splash — the water splash from the logo. Bursts in ONCE when it
   scrolls into view (under 2s, no loop), then sits still.
   ========================================================================== */
.splash { position: absolute; pointer-events: none; z-index: 0; overflow: visible;
  filter: drop-shadow(5px 5px 0 var(--rd-ink)); }
.splash .b { fill: var(--splash-fill, var(--rd-blue)); }
.splash .w { fill: var(--rd-white); }
.splash .l, .splash .k { display: none; }
.on-dark .splash { --splash-fill: var(--rd-white); filter: drop-shadow(6px 6px 0 var(--rd-ink)); }
.on-dark .splash .w { fill: var(--rd-blue); }
.section--blue .splash { --splash-fill: var(--rd-white); filter: drop-shadow(5px 5px 0 var(--rd-ink)); }
.section--blue .splash .w { fill: var(--rd-blue); }

.splash .splash-stream, .splash .splash-drop { transform-box: fill-box; }
.splash .splash-stream { transform-origin: 100% 100%; }
.splash .splash-drop { transform-origin: 50% 50%; }
.splash .d1 { --dx: 6px;   --dy: 40px; }
.splash .d2 { --dx: 56px;  --dy: 8px; }
.splash .d3 { --dx: -44px; --dy: -44px; }
.splash .d4 { --dx: 82px;  --dy: 66px; }
.splash .d5 { --dx: 104px; --dy: 16px; }
.splash .d6 { --dx: 46px;  --dy: -90px; }

.js .splash .splash-stream { opacity: 0; transform: scale(.15) rotate(-24deg); }
.js .splash .splash-drop { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0); }
.js .splash.is-splashed .splash-stream { animation: splash-stream .75s cubic-bezier(.34, 1.56, .64, 1) forwards; }
.js .splash.is-splashed .splash-drop { animation: splash-drop .7s cubic-bezier(.34, 1.7, .64, 1) forwards; }
.js .splash.is-splashed .d1 { animation-delay: .30s; }
.js .splash.is-splashed .d2 { animation-delay: .38s; }
.js .splash.is-splashed .d3 { animation-delay: .46s; }
.js .splash.is-splashed .d4 { animation-delay: .52s; }
.js .splash.is-splashed .d5 { animation-delay: .60s; }
.js .splash.is-splashed .d6 { animation-delay: .68s; }
@keyframes splash-stream { 0% { opacity: 0; transform: scale(.15) rotate(-24deg); } 40% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes splash-drop { 0% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }

/* Placement */
.hero .splash--burst { right: max(3vw, calc((100vw - var(--max)) / 2)); top: 50%; height: min(78%, 300px); width: auto; transform: translateY(-50%); }

@media (max-width: 899px) {
  .hero .splash--burst { opacity: .35; right: -30px; height: 60%; }
}

/* Liquid section edges */

/* Neon glow on dark highlight words — modern, still keeps the offset shadow */
.on-dark .hl { text-shadow: 4px 4px 0 var(--rd-ink); }

@media (prefers-reduced-motion: reduce) {
  .js .splash .splash-stream, .js .splash .splash-drop { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* Droplet accents sit beside the heading, never on the text */

/* Wash Club section: white splash bursting in from the top-left corner,
   sized to the free space beside the centered heading (mirrors the CTA's bottom-right splash). */
.seam { position: relative; isolation: isolate; overflow: hidden; }
.seam > .container { position: relative; z-index: 1; }
.splash--club { width: clamp(0px, calc((100vw - 820px) / 2), 280px); height: auto; left: -1%; top: 20px; transform: scaleX(-1); }
/* Peeking out from behind a photo */

/* Framing the closing CTA */
/* Final CTA: splash bursts out of the bottom-right corner, as big as the space beside the text allows */
.cta-band .splash--cta { width: clamp(0px, calc((100vw - 700px) / 2), 520px); height: auto; top: auto; bottom: -6%; }

.cta-band .splash--cta-r { right: -2%; transform: none; }
.cta-band > .container { position: relative; z-index: 1; }
@media (max-width: 899px) {
  
  .splash--club { width: 120px; top: 12px; opacity: .3; }
  .cta-band .splash--cta { width: 180px; opacity: .25; bottom: -10%; right: -8%; }
  
}

/* Decorative splashes may bleed past the edge; never let them cause sideways scroll */
main { overflow-x: clip; }
.bg-demo > .splash { right: 10%; top: 40px; height: 220px; width: auto; }

/* Photo hero — keeps a dark overlay so white text stays readable */
 /* cinematic — suits the panoramic photo */

@media (max-width: 899px) {
  /* Tall phone photo: text sits over the sky, the couple stays clear below */
  
  
  
  
  
  
}

/* ---------- StoryBrand stakes: success vs. failure ---------- */
.stakes { display: grid; gap: var(--gap); max-width: 920px; margin: 0 auto var(--space-6); }
@media (min-width: 760px) { .stakes { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }
.stakes__card { border: 2px solid var(--rd-ink); border-radius: var(--radius); padding: var(--space-5) var(--space-4); background: var(--rd-white); }
.stakes__card h3 { margin-bottom: var(--space-3); }
.stakes__card ul { list-style: none; padding: 0; margin: 0; }
.stakes__card li { position: relative; padding: var(--space-2) 0 var(--space-2) 40px; font-weight: var(--fw-medium); }
.stakes__card li::before { content: ""; position: absolute; left: 0; top: .55em; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--rd-ink); }
.stakes__card--win { box-shadow: 8px 8px 0 var(--rd-green); }
.stakes__card--win h3 { color: var(--rd-blue); }
.stakes__card--win li::before { background: var(--rd-green); }
.stakes__card--win li::after { content: ""; position: absolute; left: 9px; top: calc(.55em + 5px); width: 7px; height: 12px; border: solid var(--rd-ink); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.stakes__card--lose { background: var(--rd-tint); box-shadow: 8px 8px 0 var(--rd-ink); }
.stakes__card--lose h3 { color: var(--rd-ink); }
.stakes__card--lose li { color: var(--rd-ink); }
.stakes__card--lose li::before { background: var(--rd-white); }
.stakes__card--lose li::after { content: "×"; position: absolute; left: 0; top: .55em; width: 26px; height: 26px; line-height: 26px; text-align: center; font-weight: var(--fw-heavy); font-size: 1.125rem; color: var(--rd-ink); }
/* Line break that only applies on desktop */
.br-desktop { display: none; }
@media (min-width: 900px) { .br-desktop { display: inline; } }

.splash--burst .splash-stream { transform-origin: 40% 30%; }

/* Light photo hero — white fade, dark text (bright like the real location) */

/* "We get it" section: full logo splash (with its curve) wrapping the right side of the copy */
.guide { overflow: hidden; }
.guide__inner { position: relative; }
/* Head sits just past the end of the headline; the curve arcs around the paragraph's right edge
   and its tail tucks under the last line — so it reads as wrapping the copy. */
.splash--wrap { left: calc(100% - 150px); top: -64px; height: calc(100% + 116px); width: auto; }
.guide { padding-bottom: calc(var(--section-pad) + 24px); }
.splash--wrap .splash-stream { transform-origin: 50% 100%; }
@media (max-width: 1199px) { .splash--wrap { display: none; } }

/* Hero headline pair — one sentence per line on wider screens */
.hero__h1-pair .line { display: block; }
@media (min-width: 1100px) {
  
  
  .hero__h1-pair .line { white-space: nowrap; }
  
}

/* ==========================================================================
   Tier color helper (menu colors) — used by the picker result + calculator
   ========================================================================== */
.tier--managers { --tier: var(--tier-managers); --tier-text: var(--rd-white); }
.tier--best     { --tier: var(--tier-best);     --tier-text: var(--rd-white); }
.tier--ultimate { --tier: var(--tier-ultimate); --tier-text: var(--rd-white); }
.tier--wsp      { --tier: var(--tier-wsp);      --tier-text: var(--rd-ink); }

/* ---------- Wash picker ---------- */
.picker { margin-top: var(--space-5); display: grid; gap: var(--space-4); }
.picker fieldset { border: 2px solid var(--rd-ink); border-radius: var(--radius); background: var(--rd-white); padding: var(--space-4); margin: 0; box-shadow: 6px 6px 0 var(--rd-blue); }
.picker legend { font-weight: var(--fw-heavy); font-size: 1.125rem; color: var(--rd-ink); padding: 0 var(--space-2); display: flex; align-items: center; gap: var(--space-2); }
.picker__num { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--rd-green); border: 2px solid var(--rd-ink); font-size: 1rem; }
.picker__opts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.picker__opts label { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: var(--space-2) var(--space-4); border: 2px solid var(--rd-ink); border-radius: 999px; font-weight: var(--fw-bold); cursor: pointer; transition: background .15s, color .15s, transform .15s, box-shadow .15s; }
.picker__opts input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.picker__opts label:hover { background: var(--rd-tint); }
.picker__opts label:has(input:checked) { background: var(--rd-blue); color: var(--rd-white); border-color: var(--rd-blue); box-shadow: 3px 3px 0 var(--rd-ink); transform: translate(-1px, -1px); }
.picker__opts label:has(input:focus-visible) { outline: var(--focus); outline-offset: 3px; }

.picker__card { border: 2px solid var(--rd-ink); border-radius: var(--radius); background: var(--rd-white); box-shadow: 8px 8px 0 var(--tier); overflow: hidden; animation: pop-in .45s cubic-bezier(.34, 1.56, .64, 1); }
.picker__card-head { background: var(--tier); color: var(--tier-text); padding: var(--space-4); border-bottom: 2px solid var(--rd-ink); }
.picker__card-head h3 { color: var(--tier-text); margin: 0; font-style: italic; font-size: 1.75rem; }
.picker__eyebrow { display: block; font-size: var(--fs-small); font-weight: var(--fw-heavy); text-transform: uppercase; letter-spacing: .08em; }
.picker__card-body { padding: var(--space-4); }
@keyframes pop-in { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- Savings calculator ---------- */
.calc { margin-top: var(--space-5); border: 2px solid var(--rd-ink); border-radius: var(--radius); padding: var(--space-5) var(--space-4); background: var(--rd-white); box-shadow: 8px 8px 0 var(--tier, var(--rd-green)); transition: box-shadow .25s; }
.calc__inputs { display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .calc__inputs { grid-template-columns: 1fr 1fr; align-items: end; } }
.calc label { display: block; font-weight: var(--fw-heavy); margin-bottom: var(--space-2); }
.calc output { color: var(--rd-blue); font-size: 1.25rem; }
.calc select { width: 100%; min-height: 48px; padding: 0 var(--space-3); font: inherit; font-weight: var(--fw-bold); border: 2px solid var(--rd-ink); border-radius: 12px; background: var(--rd-white); color: var(--rd-ink); }
.calc input[type="range"] { width: 100%; height: 44px; accent-color: var(--rd-blue); cursor: pointer; }
.calc__result { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: var(--space-5) 0 var(--space-4); text-align: center; }
.calc__col { border-radius: 16px; padding: var(--space-4) var(--space-2); background: var(--rd-tint); }
.calc__col--club { background: var(--rd-blue); color: var(--rd-white); }
.calc__label { display: block; font-weight: var(--fw-bold); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .06em; }
.calc__big { display: block; font-size: clamp(2.25rem, 6vw, 3.25rem); font-weight: var(--fw-heavy); line-height: 1.1; }
.calc[data-winner="club"] .calc__col--club { box-shadow: 5px 5px 0 var(--rd-green); }
.calc__verdict { grid-column: 1 / -1; margin: var(--space-2) 0 0; font-size: 1.125rem; font-weight: var(--fw-medium); }
.calc .fine { margin: var(--space-3) 0 0; }

/* ---------- Reviews ---------- */
.reviews__list { list-style: none; padding: 0; margin: var(--space-6) 0 var(--space-4); display: grid; gap: var(--gap); }
@media (min-width: 900px) { .reviews__list { grid-template-columns: repeat(3, 1fr); } }
.review { border: 2px solid var(--rd-ink); border-radius: var(--radius); padding: var(--space-5) var(--space-4); background: var(--rd-white); box-shadow: 8px 8px 0 var(--rd-green); }
.review:nth-child(2) { box-shadow: 8px 8px 0 var(--rd-blue); }
.review__stars { color: var(--rd-blue); font-size: 1.25rem; letter-spacing: .1em; margin-bottom: var(--space-2); }
.review__text { font-size: 1.0625rem; font-weight: var(--fw-medium); }
.review__who { font-weight: var(--fw-heavy); margin: 0; }

/* ---------- Hero headline: "squeegee reveal" ----------
   1) Line 1 fades in and HOLDS so it can be read.
   2) A glossy squeegee bar sweeps left→right and wipes line 2 into view — dirty → shiny.
   Text is always in the DOM. Reduced motion or no JS = final state. */
.wipe .line { position: relative; width: fit-content; max-width: 100%; }
.wipe--run .line:first-child { animation: line-in .5s ease-out .2s both; }
.wipe--run .line:last-child {
  -webkit-clip-path: inset(-20% 100% -20% 0); clip-path: inset(-20% 100% -20% 0);
  animation: squeegee-reveal 1.1s cubic-bezier(.65, 0, .35, 1) 1.5s forwards;
}
.wipe--run .line:last-child::after {
  content: ""; position: absolute; top: -12%; bottom: -12%; left: 0; width: 10px; border-radius: 6px; pointer-events: none; transform: translateX(-100%);
  background: linear-gradient(180deg, var(--rd-white), var(--rd-green));
  box-shadow: 0 0 18px color-mix(in srgb, var(--rd-green) 70%, transparent), -24px 0 30px color-mix(in srgb, var(--rd-white) 90%, transparent);
  opacity: 0; animation: squeegee-bar 1.1s cubic-bezier(.65, 0, .35, 1) 1.5s both;
}
@keyframes line-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes squeegee-reveal { to { -webkit-clip-path: inset(-20% -5% -20% 0); clip-path: inset(-20% -5% -20% 0); } }
@keyframes squeegee-bar { 0% { left: 0; opacity: 1; } 90% { left: 100%; opacity: 1; } 100% { left: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wipe--run .line, .wipe--run .line::after { animation: none !important; -webkit-clip-path: none !important; clip-path: none !important; } .wipe--run .line::after { display: none; } }
.review { display: flex; flex-direction: column; }
.review blockquote { margin: 0 0 var(--space-3); flex-grow: 1; }
.review blockquote p { margin: 0; }
.review__src { font-weight: var(--fw-medium); font-size: var(--fs-small); }

/* Two plain white sections in a row shouldn't double their padding */
.section:not(.section--tint):not(.section--blue):not(.section--dark) + .section:not(.section--tint):not(.section--blue):not(.section--dark) { padding-top: 0; }
.reviews__list { margin-bottom: 0; }

/* Picker: one question at a time */
.picker__progress { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin: 0; font-weight: var(--fw-bold); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .06em; color: var(--rd-blue); }
.picker__dots { display: inline-flex; gap: 6px; }
.picker__dots i { width: 28px; height: 6px; border-radius: 3px; background: var(--rd-rule); transition: background .25s; }
.picker__dots i.is-on { background: var(--rd-blue); }
.picker.is-stepped .picker__step:not([hidden]) { animation: pop-in .35s cubic-bezier(.34, 1.56, .64, 1); }
.picker__nav { display: flex; justify-content: center; gap: var(--space-4); }
.picker__nav button { background: none; border: 0; font: inherit; font-weight: var(--fw-bold); color: var(--rd-blue); cursor: pointer; min-height: 44px; padding: 0 var(--space-2); }
.picker__nav button:hover { text-decoration: underline; }
.picker__nav button[hidden] { display: none; }
.manage__list { list-style: none; padding: 0; margin: var(--space-4) 0 var(--space-5); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.manage__list li { border: 2px solid var(--rd-ink); border-radius: 999px; padding: var(--space-1) var(--space-4); font-weight: var(--fw-bold); background: var(--rd-white); }

/* ---------- Secondary page heroes — same photo hero as home ---------- */

/* Right-aligned photo hero (subject on the left of the photo) — fade runs from the right */

/* Wash Club hero: blue fade — the tunnel foam reads as water, and white text pops */

/* ---------- Every photo hero fills the screen (below the top bar + header) ---------- */
:root { --chrome: 114px; }               /* utility bar 36px + header 78px */
@media (max-width: 979px) { :root { --chrome: 106px; } }

/* Tablet landscape: not enough width beside his face — use the stacked layout (face top, text bottom) */

/* ==========================================================================
   Hero copy scales with the screen so it fills the space (all photo heroes)
   ========================================================================== */
@media (min-width: 900px) {
  
  
  

  /* Homepage (text left) */
  
  
  

  /* Secondary pages (text left) */
  
  
  
}
@media (min-width: 1200px) {
  /* Wash Club (text right) — fill the blue side */
  
  
  
}
@media (min-width: 1100px) {
  .hero__h1-pair .line { white-space: nowrap; }
}

/* Wash Club phones: tall photo — face upper-middle, text on the blue fade at the bottom */

/* Wash Club phones: shift the photo up so his face sits higher, clear of the headline */

/* ==========================================================================
   Split hero (Wash Club): clean photo left, solid brand-blue panel right,
   slanted seam, white splash bursting out of the seam.
   ========================================================================== */
.hero--split {
  position: relative; display: grid; grid-template-columns: 1fr; overflow: hidden; background: var(--rd-blue);
  min-height: calc(100vh - var(--chrome)); min-height: calc(100svh - var(--chrome));
}
.hero--split .hero__media { position: relative; inset: auto; z-index: 0; min-height: 52svh; }
.hero--split .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__panel { position: relative; z-index: 1; background: var(--rd-blue); color: var(--rd-white); display: flex; align-items: center; padding: var(--space-6) var(--gutter); }
.hero--split .hero__inner { position: relative; z-index: 1; padding: 0; max-width: 620px; }
.hero--split h1 { color: var(--rd-white); font-size: clamp(2.5rem, 9vw, 3.5rem); line-height: 1; margin-bottom: var(--space-4); }
.hero--split h1 .hl { color: var(--rd-green); }
.hero--split .eyebrow { color: var(--rd-green); }
.hero--split .hero__inner > p { color: var(--rd-white); font-size: 1.125rem; }
.hero__chip { display: inline-block; background: var(--rd-white); color: var(--rd-ink) !important; border: 2px solid var(--rd-ink); border-radius: 999px; padding: var(--space-1) var(--space-4); font-weight: var(--fw-bold); box-shadow: 4px 4px 0 var(--rd-green); margin: 0 0 var(--space-5) !important; font-size: 1.0625rem !important; }
.hero__chip strong { color: var(--rd-blue); font-weight: var(--fw-heavy); }
.hero--split .hero__inner > .btn { display: flex; width: fit-content; }
.splash--seam-split { --splash-fill: var(--rd-white); height: 140px; width: auto; right: 6%; top: -86px; filter: drop-shadow(5px 5px 0 var(--rd-ink)); z-index: 2; }
.hero--split .splash .w { fill: var(--rd-blue); }

@media (min-width: 900px) {
  .hero--split { grid-template-columns: 56fr 44fr; }
  .hero--split .hero__media { min-height: 0; }
  .hero__panel {
    margin-left: -9vw; padding: var(--space-7) max(var(--gutter), 5vw) var(--space-7) calc(9vw + var(--space-6));
    clip-path: polygon(9vw 0, 100% 0, 100% 100%, 0 100%);
  }
  .hero--split h1 { font-size: clamp(3rem, 5vw, 5.75rem); }
  .hero--split .hero__inner > p { font-size: clamp(1.125rem, 1.4vw, 1.5rem); line-height: 1.5; margin-bottom: var(--space-4); }
  .hero--split .eyebrow { font-size: clamp(.875rem, 1vw, 1.125rem); margin-bottom: var(--space-3); }
  .hero--split .btn { font-size: clamp(1rem, 1.15vw, 1.25rem); padding: clamp(14px, 1.2vw, 20px) clamp(28px, 2.4vw, 40px); }
  .splash--seam-split { height: clamp(150px, 15vw, 260px); left: 0; right: auto; top: 5%; transform: translateX(-10%); }
}
/* Split hero splash: bottom of the seam, bursting back over the photo — never on the copy */
.splash--seam-split { display: none; }
@media (min-width: 900px) {
  .hero__panel { overflow: visible; }
  .hero--split { overflow: hidden; }
  .splash--seam-split { display: block; top: auto; bottom: 4%; left: 0; height: clamp(150px, 14vw, 240px); transform: translateX(-62%) scaleX(-1); }
}
@media (max-width: 899px) {
  .hero--split .hero__media { min-height: 44svh; }
  .hero--split .hero__media img { object-position: 40% 30% !important; }
  .hero__panel { padding-top: var(--space-5); padding-bottom: var(--space-5); }
}

/* ---------- Before / after slider ---------- */
.ba__frame { position: relative; aspect-ratio: 4 / 3; border: 2px solid var(--rd-ink); border-radius: var(--radius); overflow: hidden; box-shadow: 8px 8px 0 var(--rd-green); background: var(--rd-tint); }
.ba__pane { position: absolute; inset: 0; display: grid; place-items: center; }
.ba__pane img { width: 100%; height: 100%; object-fit: cover; }
.ba__pane--after { background: repeating-linear-gradient(115deg, var(--rd-blue) 0 22px, var(--rd-stripe) 22px 44px); color: var(--rd-white); }
.ba__pane--before { background: repeating-linear-gradient(115deg, color-mix(in srgb, var(--rd-ink) 70%, var(--rd-white)) 0 22px, color-mix(in srgb, var(--rd-ink) 60%, var(--rd-white)) 22px 44px); color: var(--rd-white); clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

 
.ba__tag { position: absolute; top: var(--space-3); padding: 2px var(--space-3); border-radius: 999px; border: 2px solid var(--rd-ink); font-weight: var(--fw-heavy); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .06em; z-index: 2; }
.ba__tag--before { left: var(--space-3); background: var(--rd-white); color: var(--rd-ink); }
.ba__tag--after { right: var(--space-3); background: var(--rd-green); color: var(--rd-ink); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 4px; margin-left: -2px; background: var(--rd-white); box-shadow: 0 0 0 2px var(--rd-ink); z-index: 2; pointer-events: none; }
.ba__handle::after { content: "⟷"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: var(--rd-green); border: 2px solid var(--rd-ink); display: grid; place-items: center; font-weight: var(--fw-heavy); color: var(--rd-ink); box-shadow: 3px 3px 0 var(--rd-ink); }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; }
.ba__frame:has(.ba__range:focus-visible) { outline: var(--focus); outline-offset: 4px; }
.ba figcaption { margin-top: var(--space-3); text-align: center; }

/* ---------- Wash policies ---------- */
.policies { display: grid; gap: var(--gap); margin-top: var(--space-6); }
@media (min-width: 900px) { .policies { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }
.policy { background: var(--rd-white); border: 2px solid var(--rd-ink); border-radius: var(--radius); padding: var(--space-5) var(--space-4); }
.policy--stop { box-shadow: 8px 8px 0 var(--menu-red); }
.policy--care { box-shadow: 8px 8px 0 var(--menu-yellow); }
.policy__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.policy__head h3 { margin: 0; color: var(--rd-ink); }
.policy__icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: var(--fw-heavy); font-size: 1.25rem; border: 2px solid var(--rd-ink); }
.policy--stop .policy__icon { background: var(--menu-red); color: var(--rd-white); }
.policy--care .policy__icon { background: var(--menu-yellow); color: var(--rd-ink); }
.policy > p { font-size: var(--fs-small); }
.policy ul { list-style: none; padding: 0; margin: 0; columns: 1; }
.policy li { position: relative; padding: var(--space-2) 0 var(--space-2) 22px; border-bottom: 1px dashed var(--rd-rule); font-weight: var(--fw-medium); break-inside: avoid; }
.policy li:last-child { border-bottom: 0; }
.policy li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 8px; height: 8px; border-radius: 50%; }
.policy--stop li::before { background: var(--menu-red); }
.policy--care li::before { background: var(--rd-ink); }

/* Split hero: keep the phone version inside one screen */
@media (max-width: 899px) {
  .hero--split .hero__media { min-height: 38svh; }
  .hero--split h1 { font-size: clamp(2.25rem, 9vw, 3rem); margin-bottom: var(--space-3); }
  .hero--split .hero__inner > p { font-size: 1rem; margin-bottom: var(--space-3); }
  .hero__chip { margin-bottom: var(--space-4) !important; }
}
.ba__pane picture { position: absolute; inset: 0; }
.ba__pane--before:has(img) { background: none; }

/* ==========================================================================
   ONE hero headline size for every page (desktop). Change it here only.
   ========================================================================== */
:root { --hero-h1: clamp(3rem, 5vw, 5.75rem); }
@media (min-width: 900px) {
  .hero--split h1 { font-size: var(--hero-h1); line-height: 1; }
  .hero__h1-pair .line { white-space: normal; }
  
}
.ba__pane--after:has(img) { background: none; }
/* Shared size = what lets the homepage pair sit on 2 lines beside the photo */
:root { --hero-h1: clamp(2.75rem, 3.9vw, 4.25rem); }
@media (min-width: 1100px) { .hero__h1-pair .line { white-space: nowrap; }  }
/* Wash Club split: splash sits fully on the photo side near the seam */
@media (min-width: 900px) { .splash--seam-split { transform: translateX(-105%) scaleX(-1); bottom: 6%; } }
/* Wash Club split: splash in the bottom-right corner of the blue panel */
@media (min-width: 900px) {
  .hero--split .splash--seam-split { left: auto !important; top: auto !important; right: -2%; bottom: -4%; transform: none !important; height: clamp(170px, 17vw, 300px); }
  .hero__panel { overflow: hidden; }
}
.hero--split .hero__chip { margin-bottom: var(--space-4) !important; }

/* ---------- Split hero, sitewide ---------- */

.hero--split .hero__h1-pair .line { white-space: normal; }
.hero--split .wipe--run .line:last-child::after { background: linear-gradient(180deg, var(--rd-white), var(--rd-green)); }
@media (min-width: 900px) {
  .hero--split h1 { font-size: var(--hero-h1); }
  .hero--split .hero__inner { max-width: 640px; }
}

@media (max-width: 899px) {
  .hero--split .hero__media img[src*="hero-desktop"] { object-position: 50% 68% !important; }
  .hero--split .hero__media { min-height: 34svh; }
}

/* Facts bar: red so it stands apart from the blue hero panel (menu red — white text 5.0:1) */
.facts { background: var(--menu-red); border-top: 2px solid var(--rd-ink); border-bottom: 2px solid var(--rd-ink); }
.facts__icon { border-color: var(--rd-white); color: var(--rd-white); }
@media (min-width: 900px) { .facts li + li { border-left-color: color-mix(in srgb, var(--rd-white) 45%, transparent); } }
/* Hero corner splash = faint watermark behind the copy, never over it (all split heroes) */
.hero--split .splash--seam-split { z-index: 0 !important; opacity: .16; filter: none !important; }
.hero--split .hero__inner { z-index: 1; }
@media (max-width: 899px) { .hero--split .hero__media img[src*="hero-wash-club"] { object-position: 8% 45% !important; } }
@media (max-width: 899px) { .hero--split .hero__media img[src*="hero-desktop"] { object-position: 97% 45% !important; } }
/* Facts bar: ink (black) — neon green icons pop on it (10.8:1), white text 14.7:1 */
.facts { background: var(--rd-ink); border-top: 0; border-bottom: 4px solid var(--rd-green); }
.facts__icon { border-color: var(--rd-green); color: var(--rd-green); }
@media (min-width: 900px) { .facts li + li { border-left-color: var(--rd-rule-dark); } }

/* ==========================================================================
   Fundraising page — fun bits
   ========================================================================== */
.fund-stats { background: var(--rd-ink); color: var(--rd-white); border-bottom: 4px solid var(--rd-green); }
.fund-stats ul { list-style: none; margin: 0; padding: var(--space-5) 0; display: grid; gap: var(--space-4); text-align: center; }
@media (min-width: 700px) { .fund-stats ul { grid-template-columns: repeat(3, 1fr); gap: 0; } .fund-stats li + li { border-left: 1px solid var(--rd-rule-dark); } }
.fund-stats strong { display: block; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: var(--fw-heavy); line-height: 1; color: var(--rd-green); text-shadow: 3px 3px 0 var(--rd-blue); }
.fund-stats span { font-weight: var(--fw-bold); font-size: 1.125rem; }

/* Old way vs. Raindancer way */
.vs { display: grid; gap: var(--space-5); align-items: center; margin-top: var(--space-6); }
@media (min-width: 900px) { .vs { grid-template-columns: 1fr auto 1fr; gap: var(--space-4); } }
.vs__old, .vs__new { border: 2px solid var(--rd-ink); border-radius: var(--radius); padding: var(--space-5) var(--space-4); }
.vs__old { background: var(--rd-tint); transform: rotate(-1.5deg); box-shadow: 6px 6px 0 var(--rd-ink); }
.vs__new { background: var(--rd-white); transform: rotate(1.5deg); box-shadow: 8px 8px 0 var(--rd-green); }
.vs h3 { margin-bottom: var(--space-3); }
.vs__old h3 { color: var(--rd-ink); }
.vs ul { list-style: none; padding: 0; margin: 0; }
.vs li { position: relative; padding: var(--space-2) 0 var(--space-2) 36px; font-weight: var(--fw-medium); }
.vs__old li { text-decoration: line-through; text-decoration-color: var(--menu-red); text-decoration-thickness: 2px; }
.vs__old li::before { content: "✕"; position: absolute; left: 0; top: .45em; width: 24px; height: 24px; border-radius: 50%; background: var(--rd-white); border: 2px solid var(--rd-ink); display: grid; place-items: center; font-size: .75rem; font-weight: var(--fw-heavy); line-height: 1; }
.vs__new li::before { content: ""; position: absolute; left: 0; top: .45em; width: 24px; height: 24px; border-radius: 50%; background: var(--rd-green); border: 2px solid var(--rd-ink); }
.vs__new li::after { content: ""; position: absolute; left: 8px; top: calc(.45em + 4px); width: 6px; height: 11px; border: solid var(--rd-ink); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.vs__badge { justify-self: center; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--rd-blue); color: var(--rd-white); border: 2px solid var(--rd-ink); box-shadow: 4px 4px 0 var(--rd-green); font-weight: var(--fw-heavy); font-size: 1.5rem; transform: rotate(-8deg); }

/* Who we work with — tilted sticker pills in the menu colors */
.tag-list--stickers { justify-content: center; gap: var(--space-3); margin: var(--space-5) 0; }
.tag-list--stickers li { font-size: 1.0625rem; padding: var(--space-2) var(--space-4); box-shadow: 3px 3px 0 var(--rd-ink); transition: transform .2s var(--ease); }
.tag-list--stickers li:nth-child(5n+1) { background: var(--rd-green); transform: rotate(-3deg); }
.tag-list--stickers li:nth-child(5n+2) { background: var(--menu-yellow); transform: rotate(2deg); }
.tag-list--stickers li:nth-child(5n+3) { background: var(--rd-blue); color: var(--rd-white); transform: rotate(-2deg); }
.tag-list--stickers li:nth-child(5n+4) { background: var(--rd-white); transform: rotate(3deg); }
.tag-list--stickers li:nth-child(5n+5) { background: var(--menu-red); color: var(--rd-white); transform: rotate(-1deg); }
.tag-list--stickers li:hover { transform: rotate(0) scale(1.08); }
@media (prefers-reduced-motion: reduce) { .tag-list--stickers li:hover { transform: none; } }
/* Who we work with pills: straight, lift on hover */
.tag-list--stickers li, .tag-list--stickers li:nth-child(n) { transform: none; }
.tag-list--stickers li:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--rd-ink); }

/* ---------- Fundraising apply block ---------- */
.apply { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) { .apply { grid-template-columns: 5fr 6fr; gap: var(--space-7); } }
.apply__card { background: var(--rd-white); border: 2px solid var(--rd-ink); border-radius: var(--radius); padding: var(--space-4); box-shadow: 6px 6px 0 var(--rd-blue); margin: var(--space-4) 0; }
.apply__card h3 { font-size: 1.125rem; margin-bottom: var(--space-3); }
.apply__list { list-style: none; padding: 0; margin: 0; counter-reset: ap; }
.apply__list li { counter-increment: ap; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; font-weight: var(--fw-bold); border-bottom: 1px dashed var(--rd-rule); }
.apply__list li:last-child { border-bottom: 0; }
.apply__list li::before { content: counter(ap); flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--rd-green); border: 2px solid var(--rd-ink); font-weight: var(--fw-heavy); }
.apply__list span { font-weight: var(--fw-medium); color: var(--rd-ink); }
.apply__note { font-weight: var(--fw-bold); display: flex; align-items: center; gap: var(--space-2); }
.apply__note::before { content: "♥"; color: var(--menu-red); font-size: 1.25rem; }
.apply__form { background: var(--rd-white); border: 2px solid var(--rd-ink); border-radius: var(--radius); box-shadow: 10px 10px 0 var(--rd-green); overflow: hidden; }
.apply__form-head { display: flex; align-items: center; gap: var(--space-2); background: var(--rd-blue); color: var(--rd-white); padding: var(--space-3) var(--space-4); border-bottom: 2px solid var(--rd-ink); }
.apply__form-head h3 { color: var(--rd-white); margin: 0; font-size: 1.125rem; }
.apply__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--rd-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rd-green) 35%, transparent); }
.apply__form .embed-ph { border: 0; border-radius: 0; background: var(--rd-white); min-height: 360px; display: grid; place-content: center; }
.apply__form .form-privacy { padding: 0 var(--space-4) var(--space-4); margin: 0; }

/* ==========================================================================
   Accessibility preferences panel (js/a11y.js) — visitor display options only
   ========================================================================== */
.a11y__toggle {
  position: fixed; left: 0; bottom: 0; z-index: 900;
  width: 44px; height: 46px; display: grid; place-items: center; cursor: pointer;
  background: var(--rd-blue); color: var(--rd-white); border: 2px solid var(--rd-ink); border-left: 0; border-bottom: 0;
  border-radius: 0 16px 0 0; transition: width .2s var(--ease), height .2s var(--ease);
}
.a11y__toggle:hover, .a11y__toggle:focus-visible { width: 50px; height: 52px; }
.a11y__toggle:focus-visible { outline: var(--focus-on-dark); outline-offset: -5px; }
.a11y__toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.a11y__panel {
  position: fixed; left: var(--space-3); bottom: 60px; z-index: 901;
  width: min(360px, calc(100vw - 2 * var(--space-3))); max-height: calc(100vh - 100px); overflow: auto;
  background: var(--rd-white); color: var(--rd-ink); border: 2px solid var(--rd-ink); border-radius: var(--radius);
  box-shadow: 8px 8px 0 var(--rd-blue); padding: var(--space-4); font-size: 16px;
}
/* Phones: button lives in the top blue bar; panel drops down from the top */
.a11y--bar { display: contents; }
.a11y--bar .a11y__toggle { position: static; width: 36px; height: 36px; border: 0; border-radius: 0; background: transparent; flex-shrink: 0; }
.a11y--bar .a11y__toggle:hover, .a11y--bar .a11y__toggle:focus-visible { width: 36px; height: 36px; }
.a11y--bar .a11y__toggle svg { width: 22px; height: 22px; }
.a11y--bar .a11y__panel { top: 44px; bottom: auto; max-height: calc(100vh - 60px); }
@media (max-width: 699px) { .utility .container:has(.a11y__toggle) { justify-content: space-between; } }
.a11y__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.a11y__head h2 { font-size: 1.25rem; margin: 0; color: var(--rd-blue); text-shadow: none; }
.a11y__close { width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 2px solid var(--rd-ink); border-radius: 10px; cursor: pointer; color: var(--rd-ink); }
.a11y__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.a11y__grid { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.a11y__opt {
  width: 100%; min-height: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: var(--space-2); background: var(--rd-tint); color: var(--rd-ink); border: 2px solid var(--rd-ink); border-radius: 14px;
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-align: center; line-height: 1.2;
}
.a11y__opt svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.a11y__opt:hover { background: var(--rd-white); }
.a11y__opt.is-on { background: var(--rd-blue); color: var(--rd-white); box-shadow: 3px 3px 0 var(--rd-green); }
.a11y__status { font-size: 12px; font-weight: 500; }
.a11y__reset { width: 100%; min-height: 44px; background: var(--rd-white); border: 2px solid var(--rd-blue); color: var(--rd-blue); border-radius: 12px; font: inherit; font-weight: 800; cursor: pointer; }
.a11y__reset:hover { background: var(--rd-blue); color: var(--rd-white); }
.a11y__note { font-size: 13px; margin: var(--space-3) 0 0; }
.a11y__panel :focus-visible { outline: 3px solid var(--rd-blue); outline-offset: 2px; }
@media print { .a11y { display: none; } }

/* ---- What each option does (applied to <html>) ---- */
html.a11y-text-1 { font-size: 112.5%; }
html.a11y-text-2 { font-size: 125%; }
html.a11y-contrast { --rd-ink: var(--rd-black); --rd-tint: var(--rd-white); --rd-rule: var(--rd-black); --rd-blue: var(--rd-blue-deep); }
html.a11y-contrast main p, html.a11y-contrast main li, html.a11y-contrast main dd { color: inherit; font-weight: 600; }

html.a11y-contrast .splash { display: none; }
html.a11y-links a:not(.btn) { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px; }
html.a11y-font { --font: Verdana, Tahoma, "Segoe UI", sans-serif; }
html.a11y-font body { letter-spacing: .02em; }
html.a11y-spacing body { line-height: 1.9 !important; letter-spacing: .06em !important; word-spacing: .12em !important; }
html.a11y-spacing p, html.a11y-spacing li { margin-bottom: 1.2em; }
html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-still .reveal, html.a11y-still .reveal-bounce, html.a11y-still .splash .splash-stream, html.a11y-still .splash .splash-drop,
html.a11y-still .wipe .line { opacity: 1 !important; transform: none !important; -webkit-clip-path: none !important; clip-path: none !important; }
html.a11y-still .wipe .line::after { display: none !important; }
html.a11y-focus :focus-visible { outline: 4px solid var(--menu-yellow) !important; outline-offset: 3px !important; box-shadow: 0 0 0 8px var(--rd-ink) !important; }
.a11y__note a, .utility .a11y__note a { color: var(--rd-blue); font-weight: var(--fw-bold); min-height: 0; display: inline; }
.utility .a11y__panel a:hover { text-decoration: underline; }

/* ==========================================================================
   Free Wash landing page — photo + brand-blue gradient, form card, perks
   ========================================================================== */
.fw { position: relative; overflow: hidden; isolation: isolate; color: var(--rd-white); padding: var(--space-7) 0 var(--space-6); min-height: calc(100svh - 170px); }
.fw__bg { position: absolute; inset: 0; z-index: -2; }
.fw__bg { background: radial-gradient(ellipse at 85% 110%, color-mix(in srgb, var(--rd-green) 28%, transparent) 0%, transparent 45%), linear-gradient(135deg, var(--rd-blue) 0%, color-mix(in srgb, var(--rd-blue) 72%, var(--rd-ink)) 100%); }
.fw__splash { z-index: -1; opacity: .22; filter: none !important; --splash-fill: var(--rd-white); height: clamp(220px, 28vw, 420px); width: auto; right: -40px; bottom: -40px; }
.fw__splash .w { fill: var(--rd-blue); }
.fw__inner { max-width: 640px; text-align: center; }
.fw__badge { display: inline-block; margin: 0 0 var(--space-4); background: var(--rd-green); color: var(--rd-ink); border: 2px solid var(--rd-ink); border-radius: 999px; padding: var(--space-1) var(--space-4); font-weight: var(--fw-heavy); text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-small); box-shadow: 3px 3px 0 var(--rd-ink); }
.fw h1 { color: var(--rd-white); font-size: clamp(2.5rem, 7vw, 4.25rem); line-height: 1; margin-bottom: var(--space-3); }
.fw h1 .hl { color: var(--rd-green); }
.fw__lead { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); margin: 0 auto var(--space-5); max-width: 520px; }
.fw__card { background: var(--rd-white); color: var(--rd-ink); border: 2px solid var(--rd-ink); border-radius: var(--radius); box-shadow: 10px 10px 0 var(--rd-green); padding: var(--space-3); text-align: left; }
.fw__card .embed-ph { border: 2px dashed var(--rd-blue); min-height: 280px; display: grid; place-content: center; text-align: center; }
.fw__card .form-privacy { margin: var(--space-3) var(--space-2) var(--space-1); }
.fw__perks { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.fw__perks li { display: inline-flex; align-items: center; gap: var(--space-2); background: color-mix(in srgb, var(--rd-white) 14%, transparent); border: 2px solid color-mix(in srgb, var(--rd-white) 55%, transparent); border-radius: 999px; padding: var(--space-1) var(--space-4) var(--space-1) var(--space-1); font-weight: var(--fw-bold); }
.fw__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--rd-green); color: var(--rd-ink); }
.fw__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.shell:has(.fw) { background: var(--rd-blue); }

/* Top blue bar stays on scroll with the header (desktop + mobile) */
:root { --util-h: 36px; }
.utility { position: sticky; top: 0; z-index: 101; }
.utility .container { min-height: var(--util-h); height: var(--util-h); }
.site-header { top: var(--util-h); }

/* Solid blue hero — 404 + brand guide (no photo) */
.hero--solid { position: relative; overflow: hidden; background: var(--rd-blue); color: var(--rd-white); min-height: 60svh; display: flex; align-items: center; }
.hero--solid .hero__inner { position: relative; z-index: 1; max-width: 720px; padding: var(--space-8) 0; }
.hero--solid h1 { color: var(--rd-white); font-size: var(--hero-h1); line-height: 1; }
.hero--solid h1 .hl { color: var(--rd-green); }
.hero--solid .eyebrow { color: var(--rd-green); }
.hero--solid .splash--seam-split { z-index: 0; opacity: .16; filter: none; right: -2%; bottom: -4%; height: clamp(170px, 17vw, 300px); width: auto; }
.hero--solid .splash--seam-split { left: auto !important; top: auto !important; transform: none !important; display: block; }

/* Thank You — same shell as Free Wash */
.fw--thanks .fw__lead { max-width: 580px; }
.fw__card--steps { padding: var(--space-5) var(--space-4); }
.fw__card--steps h2 { font-size: var(--fs-h3); margin-bottom: var(--space-4); text-align: center; }
.fw__steps { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-3); }
.fw__steps li { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px dashed var(--rd-rule); }
.fw__steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.fw__steps .step__num { width: 48px; height: 48px; margin: 0; flex-shrink: 0; font-size: 1.25rem; }
.fw__steps h3 { font-size: 1.125rem; margin: 0 0 2px; }
.fw__steps p { margin: 0; }
.fw__hours { text-align: center; margin: var(--space-4) 0 var(--space-3); }
.fw--thanks h1 { font-size: clamp(1.75rem, 8vw, 4.25rem); }

/* ---------- Form embeds (Paperform) ---------- */
.form-embed { min-height: 360px; }
.apply__form .form-embed { padding: var(--space-4); }