/* ==========================================================================
   Southern Star Coin Laundry — site.css
   One stylesheet for every page. No framework, no icon font.

   Table of contents
     1. Tokens
     2. Base and reset
     3. Typography
     4. Layout: container, sections, section headers
     5. Icons and buttons
     6. Header and navigation
     7. Hero
     8. Why us (feature cards)
     9. Stats band
    10. Services
    11. About / How it works
    12. Pricing band (glass cards)
    13. Reviews
    14. Book a pickup (contact block + form)
    15. FAQ
    16. Footer
    17. Secondary pages: page hero, tabs, price list, hours table, map, CTA band
    18. Utilities
    19. Hover (fine pointers only) and reduced motion
    20. Pricing page (pricing.html)
    21. Contact page (contact.html)
    22. Direction C, "neighbourhood signage": the look (tokens, fonts,
        colours, surfaces). It overrides the older colour values above.
   ========================================================================== */


/* 1. Tokens
   ========================================================================== */
:root {
  /* "Fresh & clean": deep teal for trust, aqua for highlights, warm coral for the
     Call buttons. --blue keeps its name but is the deep teal. Contrast ratios are
     WCAG 2.x, measured by script. */
  --blue: #0E7C86;          /* deep teal: links, eyebrows, icons, secondary buttons (white text 4.95:1) */
  --blue-dark: #0A5F67;     /* teal hover / pressed (white text 7.4:1) */
  --blue-soft: #EDF7F8;     /* teal tint: light button hover, note boxes (teal text 4.5:1) */
  --aqua: #6FD9CF;          /* highlights on dark only: eyebrows, stat numbers, check icons (4.6:1+ on every dark surface) */
  --aqua-deep: #0B7268;     /* aqua-family icons on light tints */
  --cta: #FF6B4A;           /* warm coral: the Call buttons, with --ink text (6.0:1) */
  --cta-hover: #FF8466;     /* lighter on hover so the dark label gains contrast (7.0:1) */
  --cta-deep: #C23E1F;      /* coral-family icons on light tints */
  --navy: #0B2A3A;          /* deep sea navy: footer, dark band base */
  --navy-deep: #082230;     /* photo overlays */
  --navy-mid: #0D4654;
  --teal-end: #0C545E;      /* lightest stop of the dark bands: aqua 5.1:1, amber 4.8:1 */
  --ink: #0F1F2A;           /* headings */
  --text: #35505C;          /* body: 8.0:1 on --bg */
  --muted: #557481;         /* secondary text: 4.7:1 on --bg, 5.0:1 on white */
  --bg: #F3F9F9;
  --card: #FFFFFF;
  --line: #DCE9EB;
  --amber: #F7B733;         /* only the "Most popular" badge, the pricing eyebrow and rating stars */
  --amber-dark: #D9980E;
  --radius: 20px;
  --radius-sm: 12px;
  --pill: 999px;
  --shadow: 0 10px 30px rgba(11, 42, 58, .08);
  --shadow-lg: 0 24px 60px rgba(11, 42, 58, .18);
  --font: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --header-h: 72px;
  --container: 1200px;
  --gutter: 24px;
  --section-pad: clamp(64px, 9vw, 112px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dark-gradient: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 55%, var(--teal-end) 100%);
}

@media (max-width: 39.999em) {
  :root { --gutter: 16px; --header-h: 64px; }
}


/* 2. Base and reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--card);
  -webkit-font-smoothing: antialiased;
  /* break-word (not anywhere) so flex and grid items never shrink to one letter;
     the long email address opts back in to "anywhere" (section 18) */
  overflow-wrap: break-word;
}

img, svg, iframe { display: block; max-width: 100%; }

a { color: var(--blue); }
a, button, [role="button"], summary { touch-action: manipulation; }
/* Phone numbers in running text never split at the hyphens */
a[href^="tel:"]:not(.btn):not(.book__phone) { white-space: nowrap; }

button, input, select, textarea { font: inherit; color: inherit; }

/* Anchor offset for the sticky header lives on html (scroll-padding-top) only;
   adding scroll-margin on targets as well doubled it */

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
.hero :focus-visible,
.section--dark :focus-visible,
.site-footer :focus-visible { outline-color: #fff; }


/* 3. Typography
   ========================================================================== */
h1, h2, h3, h4 { margin: 0; color: var(--ink); line-height: 1.15; letter-spacing: -.02em; }
h1 { font-size: clamp(2.4rem, 5.5vw, 4.25rem); font-weight: 700; line-height: 1.05; }
h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }   /* avoids one-word last lines where supported */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--blue);
}
.eyebrow::after { content: ""; width: 40px; height: 2px; background: currentColor; border-radius: 2px; }
.eyebrow--amber { color: var(--amber); }
.eyebrow--white { color: #fff; }
.eyebrow--aqua { color: var(--aqua); }   /* on dark bands only */


/* 4. Layout
   Breakpoints are in em (16px = 1em by default), so layouts stack when people raise
   their browser text size. Grid tracks use minmax(0, …) so a long word wraps
   instead of widening the page.
   ========================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
  /* viewport-fit=cover: keep content clear of the notch in landscape */
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.section { padding: var(--section-pad) 0; }
.section--light { background: var(--bg); }
.section--white { background: var(--card); }
.section--dark { background: var(--dark-gradient); color: #fff; }
.section--dark h2, .section--dark h3 { color: #fff; }

.section__head { max-width: 760px; margin-bottom: 44px; }
.section__title { margin: 10px 0 12px; }
.section__lead { font-size: 1.15rem; margin: 0; color: var(--text); }
.section--dark .section__lead { color: rgba(255, 255, 255, .82); }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section__head--center .eyebrow { justify-content: center; }
/* Centred eyebrows get a line on both sides so the word sits on the centre line */
.section__head--center .eyebrow::before { content: ""; width: 40px; height: 2px; background: currentColor; border-radius: 2px; }


/* 5. Icons and buttons
   ========================================================================== */
.icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--fill { fill: currentColor; stroke: none; }
.icon--sm { width: 20px; height: 20px; }
.icon--xl { width: 84px; height: 84px; stroke-width: 1.4; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 2px solid transparent;
  border-radius: var(--pill);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: transform .12s var(--ease), background-color .15s, color .15s, border-color .15s, box-shadow .15s;
}
.btn:active { transform: scale(.97); }
.btn .icon { width: 20px; height: 20px; }

.btn--cta { background: var(--cta); color: var(--ink); box-shadow: 0 8px 22px rgba(255, 107, 74, .32); }
.btn--blue { background: var(--blue); color: #fff; }
.btn--light { background: #fff; color: var(--blue); }
.btn--outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn--outline-blue { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn--block { width: 100%; }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: .95rem; }

/* Circle buttons (reviews prev/next) */
.circle-btn {
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: transform .12s var(--ease), background-color .15s, opacity .15s;
}
.circle-btn:active { transform: scale(.94); }
.circle-btn:disabled { opacity: .4; cursor: default; }
.circle-btn--light { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.circle-btn--blue { background: var(--blue); color: #fff; box-shadow: 0 10px 24px rgba(14, 124, 134, .3); }

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
}
.link-arrow .icon { width: 18px; height: 18px; }


/* 6. Header and navigation
   ========================================================================== */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid transparent;
  transition: box-shadow .2s var(--ease), border-color .2s;
}
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(11, 42, 58, .08); border-color: var(--line); }

.nav { position: relative; display: flex; align-items: center; gap: 16px; min-height: var(--header-h); }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  min-width: 0;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
.brand__mark { width: 40px; height: 40px; flex: none; }
.brand__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.brand__name, .brand__tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand__name { font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; }
.brand__tag { font-size: .78rem; font-weight: 500; color: var(--muted); margin-top: 2px; }

.nav__links ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.nav__links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--pill);
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.nav__links a:active { background: var(--bg); }

.nav__actions { display: flex; align-items: center; gap: 8px; flex: none; }

.btn--call { min-height: 48px; padding: 0 20px; flex: none; }
.btn--call__short { display: none; }

.nav__toggle {
  display: none;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
}
.nav__toggle:active { transform: scale(.94); }
.nav__toggle .icon--close { display: none; }
.site-header.is-open .nav__toggle .icon--menu { display: none; }
.site-header.is-open .nav__toggle .icon--close { display: block; }

@media (max-width: 68.749em) {
  .nav__links a { padding: 0 10px; }
  /* Short "Call" label until the full number fits without squeezing the brand */
  .btn--call__full { display: none; }
  .btn--call__short { display: inline; }
}

@media (max-width: 61.999em) {
  .nav__toggle { display: inline-flex; }
  .btn--call__full { display: none; }
  .btn--call__short { display: inline; }
  .btn--call { padding: 0 16px; min-height: 44px; }
  .nav { gap: 12px; }

  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 8px var(--gutter) 16px;
    padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 24px 40px rgba(11, 42, 58, .14);
    /* The panel scrolls on its own when it is taller than the screen (phones in landscape) */
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .site-header.is-open .nav__links { display: block; }
  .nav__links ul { flex-direction: column; gap: 2px; }
  .nav__links a { min-height: 48px; padding: 0 12px; font-size: 1.1rem; border-radius: var(--radius-sm); }

  /* No JavaScript (or site.js failed to load): a short, non-sticky header with the
     links in wrapping rows, so the menu is reachable and never covers the page */
  html:not(.js) .site-header { position: static; }
  html:not(.js) .nav__links { display: block; position: static; box-shadow: none; border: 0; padding: 0 0 10px; width: 100%; max-height: none; overflow: visible; }
  html:not(.js) .nav__links ul { flex-direction: row; flex-wrap: wrap; gap: 0 4px; }
  html:not(.js) .nav__links a { min-height: 44px; padding: 0 10px; font-size: 1rem; }
  html:not(.js) .nav { flex-wrap: wrap; }
  html:not(.js) .nav__links { order: 3; }   /* brand and Call on the first row */
  html:not(.js) .nav__toggle { display: none; }
}
@media (max-width: 61.999em) and (max-height: 500px) {
  .nav__links a { min-height: 44px; }
}

@media (max-width: 39.999em) {
  .brand__name { font-size: 1.1rem; }
  .brand__tag { font-size: .75rem; }   /* 12px floor */
}
@media (max-width: 23.749em) {
  .brand__mark { width: 36px; height: 36px; }
  .brand__name { font-size: 1.05rem; }
  .brand__tag { display: none; }
  .btn--call { padding: 0 12px; min-width: 44px; }
  .btn--call__short { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .btn--call .icon { width: 22px; height: 22px; }
}
/* Very narrow screens or large text: the business name wraps, it is never cut off */
@media (max-width: 18.749em) {
  .nav { gap: 8px; }
  .brand { gap: 8px; }
  .brand__name { white-space: normal; line-height: 1.05; }
}


/* 7. Hero
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 90vh;
  min-height: 90svh;
  padding: clamp(48px, 6vw, 80px) 0;
  background: var(--navy-deep);
  color: #fff;
}
/* Layers, back to front: still photo (the LCP image and the fallback), the
   looping video once js/site.js starts it, then the colour overlay that keeps
   the white text readable. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--navy-deep);
  background-image: url("../img/hero-washer-1920.jpg");
  background-image: image-set(url("../img/hero-washer-1920.webp") type("image/webp"), url("../img/hero-washer-1920.jpg") type("image/jpeg"));
  background-position: 70% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
  opacity: 0;
  transition: opacity .8s var(--ease);
}
.hero__video.is-playing { opacity: 1; }
/* Dark where the text sits (left), lighter over the machine (right) */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(8, 34, 48, .94) 0%, rgba(11, 52, 66, .9) 38%, rgba(13, 70, 84, .74) 62%, rgba(12, 84, 94, .42) 100%);
}
.hero__pause {
  position: absolute;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: 16px;
  z-index: 1;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(8, 34, 48, .55);
  color: #fff;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.hero__pause[hidden] { display: none; }
.hero__pause .icon { width: 18px; height: 18px; }
.hero__pause .hero__play-icon { display: none; }
.hero__pause[aria-pressed="true"] .hero__pause-icon { display: none; }
.hero__pause[aria-pressed="true"] .hero__play-icon { display: block; }
.hero__pause:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .hero__pause:hover { background: rgba(8, 34, 48, .8); }
}
/* One column on phones and tablets: the text crosses the whole width, so the
   overlay is evenly dark, and a portrait crop keeps the machine in frame */
@media (max-width: 61.999em) {
  .hero__bg {
    background-image: url("../img/hero-washer-960.jpg");
    background-image: image-set(url("../img/hero-washer-960.webp") type("image/webp"), url("../img/hero-washer-960.jpg") type("image/jpeg"));
  }
  .hero__bg::after { background: linear-gradient(180deg, rgba(8, 34, 48, .9) 0%, rgba(11, 52, 66, .88) 100%); }
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 48px;
  align-items: center;
}
.hero h1 { margin: 22px 0 20px; color: #fff; max-width: 12ch; }
/* Small descriptive line inside the H1 (search phrase), above the display line */
.hero__kicker {
  display: block;
  margin-bottom: 12px;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .01em;
  color: var(--aqua);
}
.hero__lead {
  max-width: 58ch;
  margin: 0 0 24px;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: rgba(255, 255, 255, .88);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 16px 6px 12px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--pill);
  background: rgba(255, 255, 255, .12);
  font-weight: 500;
  font-size: .95rem;
  color: #fff;
}
.chip__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 0 4px rgba(111, 217, 207, .28); flex: none; }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.checklist .icon { width: 26px; height: 26px; color: var(--aqua); margin-top: 1px; }
.checklist strong { display: block; font-weight: 600; color: #fff; }
.checklist small { display: block; font-size: .95rem; color: rgba(255, 255, 255, .78); }

/* The buttons sit right under the lead so both are on the first screen */
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }

/* Floating card composition (desktop only) */
.hero__visual { position: relative; height: 480px; }
.hero__orb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 45% 45%, rgba(111, 217, 207, .34), rgba(111, 217, 207, 0) 68%);
  filter: blur(12px);
  pointer-events: none;
}
.float-card {
  position: absolute;
  padding: 20px 22px;
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.float-card--rating { top: 28px; right: 24px; width: 250px; }
/* The three cards are staggered so they never share a horizontal band:
   rating ~28–140, price badge ~199–284, address ~327–464 (of 480) */
.float-card--address { left: 0; bottom: 16px; width: 300px; }
.float-card__big { font-size: 2.6rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--ink); margin: 0; }
.star-glyph { color: var(--amber); }
.float-card__label { margin: 6px 0 0; font-size: .95rem; color: var(--muted); font-weight: 500; }
.float-card__row { display: flex; align-items: center; gap: 12px; }
.float-card__icon {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.float-card__icon--star { background: #FFF1CC; color: #B7700A; }   /* rating gold, 3.5:1 */
.float-card__icon--teal { background: #D6EEF0; color: var(--blue); }
.float-card strong { display: block; font-weight: 600; color: var(--ink); }
.float-card .link-arrow { min-height: 44px; margin-top: 2px; }
.float-badge {
  position: absolute;
  right: 0;
  bottom: 196px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 16px;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 20px 50px rgba(8, 34, 48, .45);
}
.float-badge__icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, .16); display: flex; align-items: center; justify-content: center; flex: none; }
.float-badge__value { font-size: 1.6rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.float-badge__label { font-size: .9rem; color: #fff; margin-top: 4px; white-space: nowrap; }

@media (max-width: 61.999em) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__visual { display: none; }
  .hero h1 { max-width: none; }
}
@media (max-width: 29.999em) {
  .hero__actions .btn { width: 100%; }
}
/* Phones in landscape: a compact hero so the buttons are near the first screen */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 0; padding: 32px 0; }
  .hero h1 { font-size: clamp(2rem, 5vw, 2.4rem); margin: 14px 0 12px; }
}


/* 8. Why us (feature cards)
   ========================================================================== */
.feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }

.feature-card {
  padding: 32px 24px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  text-align: center;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.feature-card h3 { margin: 0 0 8px; font-size: 1.2rem; }
.feature-card p { margin: 0; font-size: .98rem; color: var(--muted); }
.feature-card--left { text-align: left; }
.feature-card--left .icon-circle { margin-left: 0; }

.icon-circle {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-circle .icon { width: 28px; height: 28px; }
.icon-circle--teal { background: #D6EEF0; color: var(--blue); }        /* 4.1:1 */
.icon-circle--aqua { background: #DFF6F3; color: var(--aqua-deep); }   /* 5.1:1 */
.icon-circle--coral { background: #FFE4DC; color: var(--cta-deep); }   /* 4.3:1 */
.icon-circle--sea { background: #E2ECF1; color: var(--navy); }         /* 12.4:1 */

@media (max-width: 61.999em) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 39.999em) {
  .feature-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* Phones: icon beside the text, so four short cards are not four screens */
  .feature-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 2px 16px; align-items: start; text-align: left; padding: 20px; }
  .feature-card .icon-circle { grid-row: span 2; width: 56px; height: 56px; margin: 0; }
  .feature-card h3 { margin: 4px 0 2px; }
}


/* 9. Stats band
   ========================================================================== */
.stats { background: var(--dark-gradient); color: #fff; padding: clamp(48px, 6vw, 80px) 0; }
.stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
/* Every value box is one big-number line tall and its text sits on the bottom,
   so the labels and notes line up even where the value is set smaller */
.stat__value {
  display: flex;
  align-items: flex-end;
  min-height: calc(clamp(2rem, 3.4vw, 2.9rem) * 1.05);
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--aqua);
}
.stat__value--sm { font-size: clamp(1.7rem, 2.6vw, 2.25rem); }
.stat__label { margin-top: 8px; font-weight: 600; font-size: 1.1rem; }
.stat__note { margin: 2px 0 0; font-size: .95rem; color: rgba(255, 255, 255, .76); }

/* Two columns until four fit without squeezing "5 AM – 11 PM" */
@media (max-width: 61.999em) { .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 29.999em) {
  .stats__grid { gap: 28px 16px; }
  .stat__value { font-size: 1.75rem; min-height: calc(1.75rem * 1.05); }
  .stat__value--sm { font-size: 1.4rem; }
  .stat__label { font-size: 1rem; }
}
/* Large text on a phone: one stat per row */
@media (max-width: 18.749em) { .stats__grid { grid-template-columns: minmax(0, 1fr); } }


/* 10. Services
   ========================================================================== */
.services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }

.service-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.service-card__media {
  position: relative;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-card__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* White tile in the card's own hue (the media block sets `color`), so each card
     stays one colour instead of adding a second accent */
  background: #fff;
  color: inherit;
  box-shadow: 0 6px 16px rgba(11, 42, 58, .10);
}
/* Photo cards: the picture fills the media area, the badge stays on top */
.service-card__media--photo { overflow: hidden; }
.service-card__photo,
.service-card__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.service-card__photo img,
img.service-card__photo { object-fit: cover; }
.service-card__media--photo .service-card__badge { z-index: 1; }
.service-card__body { padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.service-card h3 { margin: 0; }
.service-card p { margin: 0; }
.service-card .link-arrow { margin-top: auto; padding-top: 4px; }

/* Three tints in diagonal order (teal, aqua, coral / aqua, coral, teal) */
.media--teal { background: linear-gradient(135deg, #E6F5F6 0%, #C9E8EB 100%); color: var(--blue); }
.media--aqua { background: linear-gradient(135deg, #E6F9F5 0%, #C3EEE5 100%); color: var(--aqua-deep); }
.media--coral { background: linear-gradient(135deg, #FFF0EA 0%, #FFD3C4 100%); color: var(--cta-deep); }

@media (max-width: 61.999em) { .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 39.999em) {
  .services-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .service-card__media { height: 112px; }
  .service-card__media--photo { height: 190px; }
  .service-card__media .icon--xl { width: 56px; height: 56px; }
}


/* 11. About / How it works
   ========================================================================== */
.how__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.how__intro { font-size: 1.1rem; margin: 0 0 32px; }
.how__subtitle { font-size: 1.05rem; font-weight: 600; color: var(--text); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 20px; }

.steps { list-style: none; margin: 0; padding: 0; }
.step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; padding-bottom: 32px; }
.step:last-child { padding-bottom: 0; }
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 64px;
  bottom: 0;
  border-left: 2px dashed #B9D3D8;
}
.step__num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
  color: #fff;
  box-shadow: 0 10px 24px rgba(11, 42, 58, .14);
}
.step__num--teal { background: var(--blue); }
.step__num--aqua { background: var(--aqua); color: var(--ink); }
.step__num--coral { background: var(--cta); color: var(--ink); }
.step h3 { margin: 14px 0 6px; }
.step p { margin: 0; }

.how__visual { position: relative; padding-bottom: 120px; } /* the hours card overlaps only the lower part of the photo */
/* The gradient shows (with the alt text) if the photo fails to load */
.how__photo { margin-left: 120px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: linear-gradient(135deg, #E6F5F6, #C9E8EB); color: var(--text); font-size: .9rem; }
.how__photo picture { display: block; }
.how__photo img { width: 100%; height: 460px; object-fit: cover; object-position: 50% 8%; }

.hours-card {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(360px, 100%);
  padding: 22px 24px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-lg);
}
.hours-card h3 { margin: 0 0 4px; font-size: 1.15rem; }
.hours-card__note { margin: 0 0 12px; font-size: .9rem; color: var(--muted); }

.hours-table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.hours-table th { width: 3.4em; padding: 8px 0; text-align: left; font-weight: 600; color: var(--ink); }
.hours-table td { padding: 8px 0; text-align: right; color: var(--text); }
.hours-table tr + tr { border-top: 1px solid var(--line); }
.hours-table--lg { font-size: 1.05rem; }
.hours-table--lg th, .hours-table--lg td { padding: 12px 0; }

@media (max-width: 61.999em) {
  .how__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .how__visual { padding-bottom: 0; }
  .how__photo { margin-left: 0; }
  .how__photo img { height: 280px; }
  .hours-card { position: relative; width: auto; margin: -56px 16px 0; }
}


/* 12. Pricing band (glass cards)
   ========================================================================== */
.pricing { position: relative; isolation: isolate; overflow: hidden; }
.pricing::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -10%;
  top: -20%;
  width: 60vw;
  height: 60vw;
  max-width: 720px;
  max-height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(111, 217, 207, .14), rgba(111, 217, 207, 0) 65%);
  pointer-events: none;
}

.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 16px; align-items: stretch; }

.glass {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px 28px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
}
.glass--featured { border-color: rgba(111, 217, 207, .75); background: rgba(255, 255, 255, .12); box-shadow: 0 24px 60px rgba(8, 34, 48, .35); }
.glass__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 14px;
  border-radius: var(--pill);
  background: var(--amber);
  color: var(--navy);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
}
.glass h3 { margin: 0 0 4px; font-size: 1.35rem; text-align: center; color: #fff; }
.glass__sub { margin: 0 0 20px; text-align: center; font-size: .95rem; color: rgba(255, 255, 255, .86); }
.price { margin: 0 0 22px; text-align: center; line-height: 1; }
.price__from { margin-right: 2px; font-size: 1.05rem; font-weight: 500; color: rgba(255, 255, 255, .8); }
.price__amount { font-size: clamp(2.6rem, 4vw, 3.4rem); font-weight: 700; letter-spacing: -.02em; }
.price__unit { margin-left: 4px; font-size: 1.05rem; font-weight: 500; color: rgba(255, 255, 255, .82); }
.glass ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; align-content: start; flex: 1; }
.glass li { display: flex; gap: 10px; align-items: flex-start; color: rgba(255, 255, 255, .92); }
.glass li .icon { width: 20px; height: 20px; margin-top: 4px; color: var(--aqua); }
.pricing__note { margin: 28px 0 0; text-align: center; font-size: .95rem; color: rgba(255, 255, 255, .86); }

@media (max-width: 61.999em) {
  .price-grid { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin: 0 auto; gap: 32px; }
}


/* 13. Reviews
   ========================================================================== */
.reviews__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.reviews__head .section__head { margin-bottom: 0; }
.reviews__nav { display: flex; gap: 12px; padding-bottom: 6px; }

.rating-line { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-weight: 600; color: var(--ink); }
.stars { position: relative; display: inline-flex; gap: 2px; color: #C9D9DD; line-height: 0; }
.stars .icon { width: 22px; height: 22px; }
.stars__fill { position: absolute; left: 0; top: 0; display: inline-flex; gap: 2px; overflow: hidden; white-space: nowrap; color: var(--amber); }
.stars--sm .icon { width: 16px; height: 16px; }

.reviews__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(85%, 352px);   /* the next card always peeks in */
  gap: 24px;
  margin-top: 36px;
  padding: 8px 2px 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 2px;
  -webkit-overflow-scrolling: touch;
}
/* The arrows drive the row only with JavaScript; without it they are hidden and
   the row keeps its scrollbar */
.js .reviews__track { scrollbar-width: none; }
.js .reviews__track::-webkit-scrollbar { display: none; }
html:not(.js) .reviews__nav { display: none; }

.review-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  scroll-snap-align: start;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.review-card__head { display: flex; align-items: center; gap: 14px; }
.review-card__name { display: block; font-weight: 600; color: var(--ink); }
.review-card__text { margin: 0; color: var(--text); }
.review-card__source { display: flex; align-items: center; gap: 6px; margin-top: auto; font-size: .9rem; font-weight: 500; color: var(--muted); }
.review-card__source .icon { width: 16px; height: 16px; }

.avatar {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
}
.avatar--teal { background: var(--blue); }                    /* white 4.95:1 */
.avatar--aqua { background: var(--aqua); color: var(--ink); }  /* 9.3:1 */
.avatar--coral { background: var(--cta); color: var(--ink); }  /* 6.0:1 */
.avatar--sea { background: var(--navy); }                     /* white 14:1 */

.reviews__cta { margin-top: 8px; display: flex; justify-content: center; }


/* 14. Book a pickup (contact block + form)
   ========================================================================== */
.book { position: relative; isolation: isolate; overflow: hidden; background: var(--navy-deep); color: #fff; }
.book__bg {
  position: absolute;
  inset: -16px;
  z-index: -1;
  background:
    linear-gradient(105deg, rgba(8, 34, 48, .94) 0%, rgba(13, 70, 84, .9) 55%, rgba(12, 84, 94, .9) 100%),
    url("../img/laundromat_img.jpg") center / cover no-repeat;
  filter: blur(3px) saturate(.9);
  transform: scale(1.04);
}
.book__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.book__phone {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 8px 0 20px;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
  text-decoration: none;
}
.book__phone .icon { width: 36px; height: 36px; color: var(--aqua); }
.contact-links { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 6px; }
.contact-links a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: #fff;
  font-weight: 500;
  text-decoration: none;
}
.contact-links .icon { color: rgba(255, 255, 255, .7); }

.hours-summary {
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 16px;
  background: rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.hours-summary h3 { margin: 0 0 10px; font-size: 1.05rem; color: #fff; }
.hours-summary dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; font-size: .98rem; }
.hours-summary dt { font-weight: 600; color: #fff; }
.hours-summary dd { margin: 0; color: rgba(255, 255, 255, .84); }
.hours-summary__note { margin: 12px 0 0; font-size: .9rem; color: rgba(255, 255, 255, .8); }
@media (max-width: 18.749em) {   /* large text: day above hours */
  .hours-summary dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hours-summary dd { margin-bottom: 8px; }
}

.form-card { padding: 32px; border-radius: var(--radius); background: #fff; color: var(--ink); box-shadow: var(--shadow-lg); }
.form-card h3 { margin: 0 0 6px; font-size: 1.5rem; }
.form-card__intro { margin: 0 0 22px; color: var(--muted); font-size: .98rem; }

.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-weight: 600; font-size: .95rem; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid #BFD3D8;
  border-radius: var(--radius-sm);
  background: #F7FBFB;
  color: var(--ink);
  font-size: 16px; /* 16px minimum: iOS does not zoom the page */
  line-height: 1.4;
}
.field textarea { min-height: 112px; resize: vertical; }
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2335505C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 1; }   /* 4.8:1 on #F7FBFB */
.field :is(input, select, textarea):focus-visible { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); background: #fff; }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
.form-note { margin: 14px 0 0; font-size: .9rem; color: var(--muted); }
.form-fallback { margin: 12px 0 0; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--blue-soft); color: var(--text); font-size: .95rem; }
.form-fallback a { font-weight: 600; }

@media (max-width: 61.999em) {
  .book__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 29.999em) {
  .form-card { padding: 24px 20px; }
  .form-row { grid-template-columns: minmax(0, 1fr); }
}


/* 15. FAQ
   ========================================================================== */
.faq-list { max-width: 860px; margin: 0 auto; display: grid; gap: 14px; }
.faq { border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 18px 24px;
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  user-select: none;
  -webkit-user-select: none;
  border-radius: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq summary .icon { color: var(--muted); transition: transform .2s var(--ease); }
.faq[open] summary .icon { transform: rotate(180deg); }
.faq summary:focus-visible { outline-offset: -3px; }
.faq__body { padding: 0 24px 22px; color: var(--text); }
.faq__body p { margin: 0; }
.faq__body p + p { margin-top: 10px; }


/* 16. Footer
   ========================================================================== */
/* The top rule marks the end of the page where a dark band runs into the footer */
.site-footer { background: var(--navy); color: rgba(255, 255, 255, .78); padding: 64px 0 28px; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); font-size: 1rem; border-top: 1px solid rgba(255, 255, 255, .1); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.6fr); gap: 40px 32px; }
.footer__brand .brand { color: #fff; margin-right: 0; }
.footer__brand .brand__tag { color: rgba(255, 255, 255, .7); }
.footer__brand p { margin: 16px 0 0; max-width: 34ch; }
.site-footer h4 { margin: 0 0 14px; font-size: 1.05rem; color: #fff; letter-spacing: 0; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0; }
.site-footer a { display: inline-flex; align-items: center; gap: 10px; min-width: 44px; min-height: 44px; color: rgba(255, 255, 255, .82); text-decoration: none; transition: color .15s; }
.site-footer .icon { width: 20px; height: 20px; color: rgba(255, 255, 255, .6); }
.footer__contact { min-width: 0; }
.footer__contact li { display: flex; gap: 10px; align-items: flex-start; padding: 2px 0; }
.footer__contact .icon { margin-top: 12px; }
.footer__contact span { display: block; padding: 10px 0; }
.footer__contact span a { padding: 0; margin: 0; }
.footer__bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); text-align: center; font-size: .95rem; }
.footer__bottom p { margin: 0; }

@media (max-width: 61.999em) { .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 34.999em) { .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }


/* 17. Secondary pages
   ========================================================================== */
/* Page hero (pricing.html, contact.html) */
.page-hero { padding: clamp(48px, 7vw, 80px) 0; background: var(--dark-gradient); color: #fff; }
.page-hero h1 { font-size: clamp(2rem, 4vw, 3rem); color: #fff; margin: 10px 0 12px; }
.page-hero p:not(.eyebrow) { margin: 0; max-width: 60ch; font-size: 1.15rem; color: rgba(255, 255, 255, .84); }

/* Tabs (pricing.html). Without JS every panel is visible with its own title. */
.tabs__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.tabs__tab {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: #fff;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color .15s, color .15s, border-color .15s, transform .12s var(--ease);
}
.tabs__tab:active { transform: scale(.97); }
.tabs__tab[aria-selected="true"] { background: var(--blue); color: #fff; border-color: var(--blue); }
.tabs__panel-title { margin: 32px 0 8px; font-size: 1.4rem; }
.js .tabs__list { display: flex; }
.js .tabs__panel-title { display: none; }
html:not(.js) .tabs__list { display: none; }

/* Price list rows */
.price-list { list-style: none; margin: 0; padding: 0; }
.price-list__group { margin: 28px 0 6px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.price-list__group:first-child { margin-top: 0; }
.price-row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.price-row__name { font-weight: 500; color: var(--ink); }
.price-row__note { display: block; margin-top: 2px; font-size: .9rem; font-weight: 400; color: var(--muted); }
.price-row__price { flex: none; text-align: right; font-weight: 700; color: var(--ink); white-space: nowrap; }
.price-row__multi { display: block; font-size: .9rem; font-weight: 500; color: var(--muted); }
.price-row--special { margin-top: 12px; padding: 14px 16px; border: 1px solid #FFCDBD; border-radius: var(--radius-sm); background: #FFF1EC; }
.price-row--special .price-row__note { color: var(--text); }   /* 7.8:1 on the coral tint */
.tag { display: inline-block; margin-right: 8px; padding: 2px 10px; border-radius: var(--pill); background: var(--cta); color: var(--ink); font-size: .78rem; font-weight: 700; vertical-align: middle; }

/* Generic white card */
.card { padding: 28px; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); border: 1px solid var(--line); }
.card h2, .card h3 { margin-bottom: 12px; }
.card--light { background: var(--bg); border: 0; box-shadow: none; }

/* Two-column helper */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 61.999em) { .split { grid-template-columns: minmax(0, 1fr); } }

/* Map embed (contact.html) */
.map-embed { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 16 / 10; background: var(--bg); }
.map-embed iframe { width: 100%; height: 100%; border: 0; }

/* Call / Email / Directions row */
.action-row { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 29.999em) { .action-row .btn { width: 100%; } }

/* CTA band */
.cta-band { text-align: center; }
.cta-band .section__head { margin: 0 auto 28px; }
.cta-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 29.999em) { .cta-band__actions .btn { width: 100%; } }

/* Redirect pages (about.html, service.html) */
.redirect { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 48px var(--gutter); }


/* 18. Utilities
   ========================================================================== */
.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;
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.nowrap { white-space: nowrap; }
/* Keeps a short phrase ("10 AM – 5 PM,", "Fur Trim +$14.95") on one line when it fits,
   and still lets it wrap inside itself with very large text */
.keep { display: inline-block; }
[hidden] { display: none !important; }
/* The long email address may break anywhere (the <wbr> before @ is tried first) */
.contact-links a, .footer__contact a[href^="mailto:"], .contact-list__email { overflow-wrap: anywhere; }


/* 19. Press feedback, hover (fine pointers only) and reduced motion
   ========================================================================== */
/* Touch screens get no hover, so every tappable thing answers the press itself
   (.btn, .circle-btn, .nav__toggle, .nav__links a and .tabs__tab have their own) */
.faq summary:active { background: var(--bg); }
.link-arrow:active, .book__phone:active, .contact-links a:active, .contact-list a:active,
.brand:active, .steps a:active, .faq__body a:active, .form-note a:active,
.form-fallback a:active, .price-panel__note a:active, .price-effective a:active,
.hours-footnote a:active, .hours-summary__note a:active, .redirect a:not(.btn):active { opacity: .7; }
.site-footer a:active { color: #fff; }

@media (hover: hover) and (pointer: fine) {
  .btn--cta:hover { background: var(--cta-hover); box-shadow: 0 10px 26px rgba(255, 107, 74, .4); }
  .btn--blue:hover { background: var(--blue-dark); }
  .btn--light:hover { background: var(--blue-soft); }
  .btn--outline:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
  .btn--outline-blue:hover { background: var(--blue-soft); }
  .nav__links a:hover { background: var(--bg); color: var(--ink); }
  .nav__toggle:hover { background: var(--line); }
  .link-arrow:hover { color: var(--blue-dark); text-decoration: underline; }
  .feature-card:hover, .service-card:hover, .review-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(11, 42, 58, .12); }
  .circle-btn--light:hover:not(:disabled) { background: var(--bg); }
  .circle-btn--blue:hover:not(:disabled) { background: var(--blue-dark); }
  .faq summary:hover { color: var(--blue); }
  .site-footer a:hover { color: #fff; }
  .contact-links a:hover { text-decoration: underline; }
  .tabs__tab:hover:not([aria-selected="true"]) { border-color: var(--blue); color: var(--blue); }
  .float-card .link-arrow:hover { color: var(--blue-dark); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .book__bg { filter: none; transform: none; }
  .hero__video, .hero__pause { display: none; }
}


/* 20. Pricing page (pricing.html)
   ========================================================================== */
/* Wash & Fold card: two prices side by side, a check list and the buttons */
.wf-card {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 32px 48px;
  align-items: center;
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}
.wf-card__prices { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.wf-price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 22px;
  border-radius: 16px;
  background: var(--bg);
  border: 1px solid var(--line);
}
.wf-price--featured { background: var(--blue-soft); border-color: #BFE3E6; }
.wf-price__label { font-weight: 600; color: var(--ink); }
.wf-price__amount { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.wf-price--featured .wf-price__amount { color: var(--blue); }
.wf-price__unit { margin-left: 2px; font-size: 1.05rem; font-weight: 500; color: var(--text); letter-spacing: 0; }
.wf-price__sub { font-size: .92rem; color: var(--text); }
.wf-card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.wf-card__list li { display: flex; gap: 10px; align-items: flex-start; color: var(--text); }
.wf-card__list .icon { width: 22px; height: 22px; margin-top: 2px; color: var(--blue); }
.wf-card__actions { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--line); }

/* Tabbed price list panel */
.price-panel { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.price-panel .tabs__list { margin-bottom: 20px; }
.price-panel .price-row:last-child { border-bottom: 0; }
.price-panel .price-row--special { border-bottom: 0; }
.price-panel .tabs__panel-title { margin-top: 36px; }
.price-panel .tabs__panel:first-of-type .tabs__panel-title { margin-top: 0; }
.price-panel__note, .price-effective {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 24px 0 0;
  font-size: .95rem;
  color: var(--text);
}
.price-panel__note { padding: 14px 16px; border-radius: var(--radius-sm); background: var(--bg); }
.price-panel__note .icon, .price-effective .icon { width: 20px; height: 20px; margin-top: 2px; color: var(--blue); }
.price-effective { justify-content: center; text-align: center; }

@media (max-width: 61.999em) {
  .wf-card { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px; }
}
@media (max-width: 39.999em) {
  .wf-card { padding: 22px 18px; }
  .wf-card__prices { grid-template-columns: minmax(0, 1fr); }
  .wf-price { padding: 18px; }
  .price-panel { padding: 20px 16px; }
  .price-row { gap: 12px; padding: 12px 0; }
  .price-row--special { padding: 12px 14px; }   /* must follow .price-row */
  .price-row__name { font-size: .98rem; }
  .price-row__price { font-size: .98rem; }
}
@media (max-width: 23.749em) {
  .price-row { flex-direction: column; gap: 2px; }
  .price-row__price { text-align: left; }
}


/* 21. Contact page (contact.html)
   ========================================================================== */
.split--contact { align-items: stretch; }
.contact-card .eyebrow { margin-bottom: 4px; }
.contact-card .section__title { margin: 10px 0 20px; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.contact-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 18px; }
.contact-list li { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.contact-list .icon-circle { width: 48px; height: 48px; margin: 0; flex: none; }
.contact-list .icon-circle .icon { width: 22px; height: 22px; }
.contact-list li > div { min-width: 0; padding-top: 2px; }
.contact-list__label { display: block; font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.contact-list a { display: inline-block; min-height: 44px; padding: 6px 0; font-weight: 500; color: var(--ink); text-decoration: none; }
.contact-list span a { min-height: 0; padding: 0; color: var(--blue); font-weight: 600; }
.contact-list__email { font-size: .95rem; overflow-wrap: anywhere; }  /* breaks at the <wbr> before @ when it must */
.contact-list li > div > span:not(.contact-list__label) { display: block; padding: 6px 0; color: var(--text); }
.split--contact .map-embed { aspect-ratio: auto; min-height: 360px; }

.hours-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px; align-items: stretch; }
.store-hours { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 36px 24px; }
.store-hours .icon-circle { margin-bottom: 16px; }
.store-hours h3 { margin: 0 0 10px; }
.store-hours__big { margin: 0; font-size: 1.25rem; font-weight: 600; color: var(--ink); }
.store-hours__time { margin: 2px 0 12px; font-size: clamp(1.9rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--blue); }
.store-hours__note { margin: 0; font-size: .95rem; color: var(--text); }
.attendant-hours h3 { margin: 0 0 4px; }
.attendant-hours__note { margin: 0 0 14px; font-size: .95rem; color: var(--muted); }
.attendant-hours .hours-table th { width: 7.5em; }
.hours-footnote { margin: 24px 0 0; text-align: center; font-size: .95rem; color: var(--text); }

@media (max-width: 61.999em) {
  .hours-grid { grid-template-columns: minmax(0, 1fr); }
  .split--contact .map-embed { min-height: 300px; }
}
@media (max-width: 39.999em) {
  .contact-card { padding: 24px 20px; }
  .store-hours { padding: 28px 20px; }
  .attendant-hours { padding: 22px 18px; }
  .attendant-hours .hours-table { font-size: .98rem; }
  .attendant-hours .hours-table th { width: 6.5em; }
}

/* Fixes shared with index.html: the white form card sits inside a dark band, so its
   heading must not inherit the band's white heading colour; and inline text links in
   notes get a 44px tall hit area via padding (padding on inline elements does not
   change line spacing). */
.section--dark .form-card h3 { color: var(--ink); }
.price-panel__note a, .price-effective a, .hours-footnote a, .store-hours__note a,
.form-note a, .form-fallback a, .faq__body a, .hours-summary__note a, .step p a { padding: 13px 0; }
.contact-list span a { display: inline-flex; align-items: center; min-height: 44px; }

/* ==========================================================================
   22. Direction C: "Neighbourhood signage"
   Warm cream paper, one soft denim blue for the big fields (hero overlay,
   stats, pricing and booking bands, footer), a brick-red "open sign" for the
   one action colour, and a sunflower spark (hero chip and kicker, the wavy
   underline, checks, stat figures, stars, stamps). The site owner chose
   this design on Oct 26, 2026, in blue instead of its original bottle
   green, and lighter than the steel blue before it: MT found the first
   cobalt "too saturated" and the steel/navy "so dark".
   Display: Fraunces (variable: opsz, SOFT, WONK, wght). Text/UI: Hanken
   Grotesk. Small radii, hairline borders, hard offset "sign-board" shadows,
   printed uppercase section labels, a faint paper grain on the backgrounds.
   This part comes last and overrides the colours and surfaces in sections
   1–21 above. Every colour is a token in the :root below: to recolour the
   site, override those tokens (in :root) and nothing else.
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/fraunces-latin-full-normal.woff2") format("woff2-variations"),
       url("../fonts/fraunces-latin-full-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 1. Tokens. Contrast ratios are WCAG 2.x against the flat token colours.
   -------------------------------------------------------------------------- */
:root {
  /* Brand field (soft denim, light enough not to read dark, calm enough not to read loud) */
  --blue: #3A6496;           /* brand: links, icons, icon rings, step numbers, secondary buttons, selected tab, card borders, logo disc. White on it 6.1:1; on cream 5.0:1, on paper 5.7:1 */
  --blue-dark: #2E527E;      /* brand pressed / hover; the edge under brand buttons. White 8.0:1 */
  --blue-soft: #E4ECF4;      /* pale denim tint: light-button hover, note boxes, featured Wash & Fold box. Brand on it 5.1:1 */
  --aqua-deep: var(--blue);  /* (name kept) icons on light tints */
  --navy: #2E527E;           /* footer (one calm step deeper than the bands), one review avatar. Footer text (78% white) 5.6:1, brand tag (70%) 4.9:1 */
  --navy-deep: #2C4F7A;      /* behind the hero photo and the booking photo before they load */
  --navy-mid: #345B8B;       /* (name kept, not used by this layer) */
  --teal-end: #386092;       /* (name kept, not used by this layer) */
  --band-1: #386092;         /* bands (stats, pricing, booking, page heroes): lightest stop, top left, and the flat fallback. White 6.45:1; 86% white notes 5.3:1; --aqua labels 4.8:1; stat figures (--amber, large) 4.3:1 */
  --band-2: #345B8B;         /* bands: middle stop */
  --band-3: #305583;         /* bands: darkest stop, bottom right */
  --dark-gradient: var(--grain), linear-gradient(162deg, var(--band-1) 0%, var(--band-2) 58%, var(--band-3) 100%), var(--band-1);

  /* Hero overlay over the washer photo / video. Desktop runs left to right:
     deep under the text, a light 22% veil over the machine on the right.
     The photo's left side is bright, so these print lighter than they read
     here. Measured over the still and 5 video frames at 320-1440 px: white
     lead >= 6.1:1, kicker >= 4.6:1, checklist notes >= 5.4:1 */
  --hero-shade-1: rgba(29, 72, 124, .9); /* desktop, left edge (under the text) */
  --hero-shade-2: rgba(27, 71, 124, .9); /* desktop, 40% across */
  --hero-shade-3: rgba(40, 82, 132, .74); /* desktop, 64% across (still covers the lead's right end) */
  --hero-shade-4: rgba(90, 132, 178, .22); /* desktop, right edge: light and airy, the washer shows */
  --hero-shade-phone-1: rgba(29, 73, 126, .9); /* phones and tablets: top */
  --hero-shade-phone-2: rgba(29, 74, 128, .89); /* phones and tablets: bottom */
  --hero-pause-bg: rgba(36, 66, 104, .55); /* video pause button */
  --hero-pause-bg-hover: rgba(36, 66, 104, .8); /* video pause button, mouse hover */
  --book-shade-1: rgba(30, 68, 116, .95); /* booking band over the shop photo, left (under the text) */
  --book-shade-2: rgba(33, 73, 123, .93); /* middle */
  --book-shade-3: rgba(58, 100, 150, .86); /* right, under the form card: the dryers show through */

  /* Ink and paper */
  --ink: #1D2733;            /* blue-black: headings, dark labels, chip text. 12.4:1 on cream */
  --text: #3A4553;           /* slate body text: 8.0:1 on cream, 9.0:1 on paper */
  --muted: #5B6573;          /* secondary text: 4.85:1 on cream, 5.5:1 on paper */
  --bg: #F1E8D6;            /* cream: page bands, note boxes, menu-button fill */
  --card: #FBF6EB;          /* paper: body, white sections, cards, header */
  --line: #D8C8A8;          /* tan hairline: card borders, dotted rows */
  --field-bg: #FFFDF6;      /* form fields */
  --field-line: #A78C4E;    /* form field borders: 3.2:1 on the white form card */

  /* Spark (sunflower: C's mustard is too dark to read on a lighter blue) */
  --amber: #FFCD4A;          /* hero chip and kicker, checks, stat figures, stamps, footer rule. Ink on it 10.1:1 */
  --amber-dark: #D9A21C;     /* rating stars on paper (C's mustard weight, 2.1:1 on paper; "4.2 on Google" carries the rating in text) */
  --aqua: #F9DC8A;           /* pale butter: small labels on the bands and the wavy underline. 4.8:1 on --band-1 */
  --stamp-line: #8F6008;     /* dashed edge of the "Most popular" and "Special" stamps */
  --star-empty: #A3B1C1;     /* unfilled part of the rating stars (2.0:1 on paper, darker than the gold fill so the 4.2 reads) */

  /* Action (brick-red "open sign") */
  --cta: #C23A1C;           /* the one action colour (Call / Book / Send): white label 5.4:1; logo dot */
  --cta-hover: #A6300F;     /* action, mouse hover: white 6.9:1 */
  --cta-deep: #A8341A;      /* action-family icons on light tints */
  --cta-edge: #98301A;       /* border and hard edge under the action buttons (was #7E2410) */
  --cta-edge-hover: #82280F; /* the same edge on mouse hover */
  --cta-tint: #F8E7DD;      /* "Special" price row background */
  --label: #B5330F;         /* printed section labels and price-list group names on light: 5.0:1 on cream */

  /* Logo: round badge, cream star, brick dot (the inline SVG fills match) */
  --logo-disc: var(--blue);   /* logo badge (header and footer) */
  --logo-star: #F6E7C6;       /* logo star (cream) */
  --logo-dot: var(--cta);     /* small dot at the logo's top right */

  /* Photo fallbacks (shown only while a photo loads or if it fails) */
  --tint-brand-1: #E4ECF4;   /* brand tint, light (service card / How-it-works photo boxes) */
  --tint-brand-2: #CEDCEB;   /* brand tint, dark */
  --tint-paper-1: #F3EAD6;  /* paper tint, light */
  --tint-paper-2: #E8D9B6;  /* paper tint, dark */
  --tint-cta-1: #F6E0D5;    /* brick tint, light */
  --tint-cta-2: #EFC9B6;    /* brick tint, dark */

  /* Hard "sign-board" shadows and see-through edges */
  --shadow: 3px 4px 0 rgba(58, 100, 150, .13); /* cards */
  --shadow-lg: 5px 7px 0 rgba(58, 100, 150, .18); /* framed cards: hours, form, price boards, Wash & Fold */
  --shadow-hover: 5px 8px 0 rgba(58, 100, 150, .16); /* cards lifting on mouse hover */
  --shadow-featured: 6px 8px 0 rgba(24, 52, 90, .3); /* featured price board: it sits on the denim band, where a brick or light-blue tint disappears */
  --shadow-num: 2px 3px 0 rgba(58, 100, 150, .3); /* How-it-works step numbers */
  --menu-shadow: 0 24px 40px rgba(46, 82, 126, .14); /* phone menu panel */
  --edge-brand: rgba(58, 100, 150, .3); /* edge under outline buttons on paper */
  --edge-brand-soft: rgba(58, 100, 150, .26); /* edge under the light review arrow */
  --rule-brand: rgba(58, 100, 150, .5); /* dotted line between the How-it-works steps */
  --chip-line: rgba(29, 39, 51, .35); /* hero chip border */
  --hours-line: rgba(255, 240, 205, .4); /* rim of the hours box on the booking band */

  /* Paper grain: the design's speckle (its 5% multiply overlay, without the
     overlay's flat 2.5% darkening), laid over section backgrounds as a layer */
  --grain: url("data:image/png;base64,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") 0 0 / 110px 110px repeat;

  /* Shape and type */
  --radius: 9px;
  --radius-sm: 7px;
  --pill: 8px;              /* no full pills: tags and slab buttons */
  --font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --logo-disc-footer: #4A74A6; /* footer logo badge: a lighter denim so it stands off the footer (1.65:1; C's green had 1.5:1); cream star on it 3.95:1 */
}

/* 2. Paper base and grain
   -------------------------------------------------------------------------- */
html { background: var(--bg); }
body { background: var(--grain), var(--card); }
.section--light { background: var(--grain), var(--bg); }
.section--white { background: var(--grain), var(--card); }

/* 3. Typography: serif headlines, sans labels
   -------------------------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.08;
  font-variation-settings: "opsz" 120, "SOFT" 40, "WONK" 1, "wght" 600;
}
.section__title, .hero h1, .page-hero h1 { letter-spacing: -.01em; }
.hero h1 { font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1, "wght" 620; }
.brand__name {
  font-family: var(--font-serif);
  font-weight: 650;
  font-variation-settings: "opsz" 30, "SOFT" 50, "WONK" 1, "wght" 650;
  letter-spacing: 0;
}

/* Section label: a printed uppercase sign-label above every section heading */
.eyebrow {
  gap: 10px;
  margin-bottom: 12px;
  font-family: var(--font);
  font-weight: 800;
  font-size: .8rem;
  line-height: 1.3;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--label);
}
.eyebrow::after, .section__head--center .eyebrow::before { display: none; }
.eyebrow--white { color: #fff; }
.eyebrow--aqua, .eyebrow--amber { color: var(--aqua); }   /* on the dark bands */

/* 4. Logo: round badge, cream star, brick dot
   -------------------------------------------------------------------------- */
.brand__disc { fill: var(--logo-disc); }
.brand__star { fill: var(--logo-star); }
.brand__dot { fill: var(--logo-dot); }

/* 5. Header: paper signboard
   -------------------------------------------------------------------------- */
.site-header { background: var(--grain), var(--card); border-bottom: 1px solid var(--line); }
.site-header.is-scrolled { box-shadow: 0 2px 0 var(--line); border-color: var(--line); }
@media (max-width: 61.999em) {
  .nav__links { background: var(--card); box-shadow: var(--menu-shadow); }
}

/* 6. Buttons: slabs with a hard "painted edge" that they press into
   -------------------------------------------------------------------------- */
.btn { border-radius: var(--pill); border-width: 2px; font-weight: 700; }
.btn--cta { background: var(--cta); color: #fff; border-color: var(--cta-edge); box-shadow: 3px 3px 0 var(--cta-edge); }
.btn--blue { background: var(--blue); color: #fff; border-color: var(--blue-dark); box-shadow: 3px 3px 0 var(--blue-dark); }
.btn--light { background: var(--card); color: var(--blue); border-color: var(--blue); box-shadow: 3px 3px 0 var(--blue); }
.btn--outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.btn--outline-blue,
.glass .btn--outline { background: var(--card); color: var(--blue); border-color: var(--blue); box-shadow: 3px 3px 0 var(--edge-brand); }
.btn--cta:active, .btn--blue:active, .btn--light:active, .btn--outline-blue:active, .glass .btn--outline:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 transparent;
}
.btn--call { border-radius: var(--pill); }

/* 7. Hero: washer photo / video full-bleed under a brand overlay, sunflower
   spark, wavy underline under the headline. No floating cards.
   -------------------------------------------------------------------------- */
.hero__bg::after {
  background:
    var(--grain),
    linear-gradient(100deg, var(--hero-shade-1) 0%, var(--hero-shade-2) 40%, var(--hero-shade-3) 64%, var(--hero-shade-4) 100%);
}
@media (max-width: 61.999em) {
  .hero__bg::after { background: var(--grain), linear-gradient(180deg, var(--hero-shade-phone-1) 0%, var(--hero-shade-phone-2) 100%); }
}
.hero__pause { background: var(--hero-pause-bg); }
@media (hover: hover) and (pointer: fine) {
  .hero__pause:hover { background: var(--hero-pause-bg-hover); }
}
.hero__kicker {
  font-family: var(--font);
  font-size: clamp(.8rem, 1.1vw, .9rem);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--amber);
}
/* The wavy underline is a mask, so its colour is a token */
.hero h1::after {
  content: "";
  display: block;
  width: min(62%, 280px);
  height: 13px;
  margin-top: 16px;
  background: var(--aqua);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='13' viewBox='0 0 280 13'%3E%3Cpath d='M3 8 Q 20 2 37 8 T 71 8 T 105 8 T 139 8 T 173 8 T 207 8 T 241 8 T 277 7' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='13' viewBox='0 0 280 13'%3E%3Cpath d='M3 8 Q 20 2 37 8 T 71 8 T 105 8 T 139 8 T 173 8 T 207 8 T 241 8 T 277 7' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / contain;
}
.chip {
  border: 2px solid var(--chip-line);
  border-radius: var(--pill);
  background: var(--amber);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: .01em;
}
.chip__dot { width: 8px; height: 8px; background: var(--ink); box-shadow: none; }
.checklist .icon { color: var(--amber); }

/* 8. Why us: flat paper cards, hairline border, hard shadow, one brand
   icon ring instead of four pastel circles
   -------------------------------------------------------------------------- */
.feature-card { background: var(--card); border: 1.5px solid var(--line); box-shadow: var(--shadow); }
.icon-circle,
.icon-circle--teal, .icon-circle--aqua, .icon-circle--coral, .icon-circle--sea {
  background: var(--card);
  border: 2px solid var(--blue);
  color: var(--blue);
}

/* 9. Stats band: flat brand field, sunflower figures
   -------------------------------------------------------------------------- */
.stat__value {
  color: var(--amber);
  font-family: var(--font-serif);
  font-variation-settings: "opsz" 110, "SOFT" 30, "wght" 640;
  letter-spacing: -.01em;
}

/* 10. Services: 5 cards as a 2 + 3 bento on desktop, flat photo cards
   -------------------------------------------------------------------------- */
.service-card { border: 1.5px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.service-card__badge { display: none; }
.media--teal { background: linear-gradient(135deg, var(--tint-brand-1), var(--tint-brand-2)); color: var(--blue); }
.media--aqua { background: linear-gradient(135deg, var(--tint-paper-1), var(--tint-paper-2)); color: var(--blue); }
.media--coral { background: linear-gradient(135deg, var(--tint-cta-1), var(--tint-cta-2)); color: var(--cta-deep); }
@media (min-width: 62em) {
  .services-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px; }
  .services-grid > .service-card:nth-child(1),
  .services-grid > .service-card:nth-child(2) { grid-column: span 3; }
  .services-grid > .service-card:nth-child(3),
  .services-grid > .service-card:nth-child(4),
  .services-grid > .service-card:nth-child(5) { grid-column: span 2; }
  .services-grid > .service-card:nth-child(1) .service-card__media--photo,
  .services-grid > .service-card:nth-child(2) .service-card__media--photo { height: 240px; }
}

/* 11. How it works: brand step numbers, dotted connector, framed hours card
   -------------------------------------------------------------------------- */
.step__num { border-radius: 50%; box-shadow: var(--shadow-num); }
.step__num--teal, .step__num--aqua, .step__num--coral { background: var(--blue); color: #fff; }
.step:not(:last-child)::before { border-left: 2px dotted var(--rule-brand); }
.how__photo { border: 2px solid var(--blue); background: linear-gradient(135deg, var(--tint-brand-1), var(--tint-brand-2)); }
.hours-card { border: 2px solid var(--blue); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-lg); }

/* 12. Pricing: flat brand band, solid paper "price boards", stamped badge
   -------------------------------------------------------------------------- */
.pricing::before { display: none; }
.glass {
  border: 2px solid var(--blue);
  border-radius: var(--radius);
  background: var(--card);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.glass--featured { border-color: var(--cta); background: var(--card); box-shadow: var(--shadow-featured); }
.glass h3 { color: var(--ink); }
.glass__sub { color: var(--muted); }
.price__from, .price__unit { color: var(--text); }
.price__amount {
  color: var(--ink);
  font-family: var(--font-serif);
  font-variation-settings: "opsz" 120, "SOFT" 40, "wght" 640;
}
.glass li { color: var(--text); }
.glass li .icon { color: var(--blue); }
.glass__badge {
  padding: 6px 13px;
  border: 2px dashed var(--stamp-line);
  border-radius: 6px;
  background: var(--amber);
  color: var(--ink);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  transform: translate(-50%, -55%) rotate(-3deg);
}

/* 13. Reviews: flat cards, brand / sunflower / brick avatars, slab arrows
   -------------------------------------------------------------------------- */
.review-card { border: 1.5px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.avatar {
  border-radius: 10px;
  font-family: var(--font-serif);
  font-variation-settings: "opsz" 40, "SOFT" 40, "wght" 640;
}
.avatar--teal { background: var(--blue); color: #fff; }
.avatar--aqua { background: var(--amber); color: var(--ink); }
.avatar--coral { background: var(--cta); color: #fff; }
.avatar--sea { background: var(--navy); color: #fff; }
.stars { color: var(--star-empty); }
.stars__fill { color: var(--amber); }
.circle-btn { border-radius: var(--radius); }
.circle-btn--blue { background: var(--blue); color: #fff; box-shadow: 3px 3px 0 var(--blue-dark); }
.circle-btn--light { background: var(--card); color: var(--ink); border: 2px solid var(--blue); box-shadow: 3px 3px 0 var(--edge-brand-soft); }

/* 14. Book a pickup: brand overlay on the shop photo, solid hours box,
   framed form
   -------------------------------------------------------------------------- */
.book__bg {
  background:
    linear-gradient(105deg, var(--book-shade-1) 0%, var(--book-shade-2) 55%, var(--book-shade-3) 100%),
    url("../img/laundromat_img.jpg") center / cover no-repeat;
}
.book__phone .icon { color: var(--amber); }
.hours-summary {
  border: 1.5px solid var(--hours-line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.form-card { border: 2px solid var(--blue); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.field input, .field select, .field textarea {
  border: 1.5px solid var(--field-line);
  border-radius: var(--radius-sm);
  background: var(--field-bg);
}
.field :is(input, select, textarea):focus-visible { outline-color: var(--blue); border-color: var(--blue); background: #fff; }
.form-fallback { background: var(--blue-soft); }

/* 15. FAQ: flat paper cards, hairline border
   -------------------------------------------------------------------------- */
.faq { border: 1.5px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.faq summary, .faq summary:focus-visible { border-radius: var(--radius); }

/* 16. Footer: deep signboard with a sunflower top rule
   -------------------------------------------------------------------------- */
.site-footer { background: var(--grain), var(--navy); border-top: 3px solid var(--amber); }

/* 17. Secondary pages: page hero, tag tabs, dotted price rows, stamps
   -------------------------------------------------------------------------- */
.page-hero h1 { color: #fff; }
.tabs__tab { border: 1.5px solid var(--line); border-radius: var(--pill); background: var(--card); }
.tabs__tab[aria-selected="true"] { background: var(--blue); color: #fff; border-color: var(--blue); }
.price-list__group { color: var(--label); letter-spacing: .1em; }
.price-row { border-bottom: 1.5px dotted var(--line); }
.price-row--special { border: 1.5px dashed var(--cta); border-radius: var(--radius-sm); background: var(--cta-tint); }
.tag {
  border: 1.5px dashed var(--stamp-line);
  border-radius: 6px;
  background: var(--amber);
  color: var(--ink);
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.card { border: 1.5px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card--light { border: 0; box-shadow: none; }
.wf-card { border: 2px solid var(--blue); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.wf-price { border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.wf-price--featured { border-color: var(--blue); background: var(--blue-soft); }
.wf-price--featured .wf-price__amount { color: var(--blue); }
.wf-price__amount { font-family: var(--font-serif); font-variation-settings: "opsz" 110, "SOFT" 40, "wght" 640; }
.wf-card__list .icon { color: var(--blue); }
.price-panel { border: 1.5px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.price-panel__note { background: var(--bg); border-radius: var(--radius-sm); }
.map-embed { border: 2px solid var(--blue); border-radius: var(--radius); box-shadow: var(--shadow); }
.hours-table tr + tr { border-top: 1.5px dotted var(--line); }
.store-hours__time, .store-hours__big { color: var(--blue); }
.store-hours__time { font-family: var(--font-serif); font-variation-settings: "opsz" 110, "SOFT" 40, "wght" 640; }

/* 18. Hover: fine pointers only
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .btn--cta:hover { background: var(--cta-hover); border-color: var(--cta-edge-hover); box-shadow: 4px 4px 0 var(--cta-edge-hover); }
  .btn--cta:active:hover { box-shadow: 0 0 0 transparent; }
  .btn--blue:hover { background: var(--blue-dark); }
  .btn--light:hover { background: var(--blue-soft); }
  .btn--outline-blue:hover,
  .glass .btn--outline:hover { background: var(--blue-soft); border-color: var(--blue); }
  .feature-card:hover, .service-card:hover, .review-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
  .circle-btn--blue:hover:not(:disabled) { background: var(--blue-dark); }
  .circle-btn--light:hover:not(:disabled) { background: var(--blue-soft); }
  .tabs__tab:hover:not([aria-selected="true"]) { border-color: var(--blue); color: var(--blue); }
}

/* Rules the blue palette needs (a token cannot reach them)
   -------------------------------------------------------------------------- */
/* Hero lead: 88% white in site.css. Full white lets the hero overlay sit
   lighter while the lead keeps >= 6:1 (at 88% it would be ~5.4:1). */
.hero__lead { color: #fff; }
/* Small white notes on the bands and in the hero: 76-78% white in
   site.css; 86% gives them margin (stat notes 5.3:1 on --band-1, hero
   checklist notes >= 5.4:1 over every frame). */
.stat__note, .checklist small { color: rgba(255, 255, 255, .86); }
/* Rating stars on paper: deeper gold (sunflower is 1.4:1 on paper) */
.stars__fill { color: var(--amber-dark); }
/* Footer logo badge: the brand disc is only 1.3:1 against the footer */
.site-footer .brand__disc { fill: var(--logo-disc-footer); }