/* Design tokens: reusable colors, spacing, shadows, and radius values for the whole site. */
:root {
  --color-ink: #10233d;
  --color-muted: #607288;
  --color-navy: #062242;
  --color-navy-soft: #0b315d;
  --color-blue: #087df2;
  --color-blue-dark: #064ea7;
  --color-eyebrow-light: #0055b3;
  --color-eyebrow-dark: #5fb3ff;
  --color-control-blue: var(--color-blue-dark);
  --color-control-blue-hover: var(--color-navy-soft);
  --color-sky: #dbeafe;
  --color-surface: #ffffff;
  --color-soft: #f3f6f9;
  --color-line: #dce6f0;
  --color-success: #22c55e;
  --color-success-ink: #166534;
  --color-success-soft: #dcfce7;
  --color-danger: #b91c1c;
  --color-danger-soft: #fee2e2;
  --color-star-light: #9c6200;
  --color-star-dark: #f5a700;
  --color-footer-text: #b9cce2;
  --color-footer-muted: #8aa6c5;
  --color-footer-heading: #5fb3ff;
  --color-footer-border: rgba(255, 255, 255, 0.1);
  --color-commercial-pill-border: #49647f;
  --color-instagram: #e4405f;
  --color-facebook: #1877f2;
  --shadow: 0 18px 42px rgba(10, 31, 57, 0.14);
  --shadow-soft: 0 10px 28px rgba(10, 31, 57, 0.08);
  --motion-duration-fast: 180ms;
  --motion-easing-standard: ease;
  --interaction-lift: -0.25rem;
  --color-photo-overlay: rgba(6, 34, 66, 0.94);
  --color-gallery-backdrop: rgba(6, 34, 66, 0.8);
  --page-content-max: 72.5rem;
  --reading-width: 42rem;
  --gallery-thumb-size: 4rem;
  --gallery-dialog-height: 90dvh;
  --story-hero-height: 34rem;
  --story-image-opacity: 0.54;

  /* Material 3 typeface tokens: one place to control the site's font family and core weights. */
  --md-ref-typeface-brand: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --md-ref-typeface-plain: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --md-ref-typeface-weight-regular: 400;
  --md-ref-typeface-weight-medium: 500;
  --md-ref-typeface-weight-bold: 700;

  /* Material 3 display tokens: best for large hero-style text. */
  --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-display-large-size: 3.5625rem;
  --md-sys-typescale-display-large-line-height: 4rem;
  --md-sys-typescale-display-large-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-display-large-tracking: 0rem;
  --md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-display-medium-size: 2.8125rem;
  --md-sys-typescale-display-medium-line-height: 3.25rem;
  --md-sys-typescale-display-medium-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-display-medium-tracking: 0rem;
  --md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-display-small-size: 2.25rem;
  --md-sys-typescale-display-small-line-height: 2.75rem;
  --md-sys-typescale-display-small-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-display-small-tracking: 0rem;

  /* Material 3 headline tokens: best for section titles and major content headings. */
  --md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-large-size: 2rem;
  --md-sys-typescale-headline-large-line-height: 2.5rem;
  --md-sys-typescale-headline-large-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-headline-large-tracking: 0rem;
  --md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-medium-size: 1.75rem;
  --md-sys-typescale-headline-medium-line-height: 2.25rem;
  --md-sys-typescale-headline-medium-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-headline-medium-tracking: 0rem;
  --md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-small-size: 1.5rem;
  --md-sys-typescale-headline-small-line-height: 2rem;
  --md-sys-typescale-headline-small-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-headline-small-tracking: 0rem;

  /* Material 3 title tokens: best for cards, panels, and compact section headings. */
  --md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-title-large-size: 1.375rem;
  --md-sys-typescale-title-large-line-height: 1.75rem;
  --md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-title-large-tracking: 0rem;
  --md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-title-medium-size: 1rem;
  --md-sys-typescale-title-medium-line-height: 1.5rem;
  --md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium);
  --md-sys-typescale-title-medium-tracking: 0.009375rem;
  --md-sys-typescale-title-small-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-title-small-size: 0.875rem;
  --md-sys-typescale-title-small-line-height: 1.25rem;
  --md-sys-typescale-title-small-weight: var(--md-ref-typeface-weight-medium);
  --md-sys-typescale-title-small-tracking: 0.00625rem;

  /* Material 3 body tokens: best for paragraphs and supporting copy. */
  --md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-large-size: 1rem;
  --md-sys-typescale-body-large-line-height: 1.5rem;
  --md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-body-large-tracking: 0.03125rem;
  --md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-medium-size: 0.875rem;
  --md-sys-typescale-body-medium-line-height: 1.25rem;
  --md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-body-medium-tracking: 0.015625rem;
  --md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-small-size: 0.75rem;
  --md-sys-typescale-body-small-line-height: 1rem;
  --md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-body-small-tracking: 0.025rem;

  /* Material 3 label tokens: best for buttons, badges, nav links, and small UI labels. */
  --md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-large-size: 0.875rem;
  --md-sys-typescale-label-large-line-height: 1.25rem;
  --md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);
  --md-sys-typescale-label-large-tracking: 0.00625rem;
  --md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-medium-size: 0.75rem;
  --md-sys-typescale-label-medium-line-height: 1rem;
  --md-sys-typescale-label-medium-weight: var(--md-ref-typeface-weight-medium);
  --md-sys-typescale-label-medium-tracking: 0.03125rem;
  --md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-small-size: 0.6875rem;
  --md-sys-typescale-label-small-line-height: 1rem;
  --md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-medium);
  --md-sys-typescale-label-small-tracking: 0.03125rem;

  /* Wash Bar aliases: simpler project tokens mapped over the Material 3 layer. */
  --font-sans: var(--md-ref-typeface-plain);
  --type-2xs: var(--md-sys-typescale-label-small-size);
  --type-xs: var(--md-sys-typescale-label-medium-size);
  --type-label: var(--md-sys-typescale-label-large-size);
  --type-sm: var(--md-sys-typescale-body-medium-size);
  --type-nav: var(--md-sys-typescale-label-large-size);
  --type-body: var(--md-sys-typescale-body-large-size);
  --type-lead: var(--md-sys-typescale-title-medium-size);
  --type-h3: var(--md-sys-typescale-title-large-size);
  --type-h2: var(--md-sys-typescale-headline-large-size);
  --type-h1: 2.65rem;
  --type-button: var(--md-sys-typescale-label-large-size);
  --type-caption: var(--md-sys-typescale-body-small-size);
  --line-tight: 1.08;
  --line-snug: 1.25;
  --line-normal: 1.5;
  --line-relaxed: 1.6;
  --weight-regular: var(--md-ref-typeface-weight-regular);
  --weight-medium: var(--md-ref-typeface-weight-medium);
  --weight-semibold: 600;
  --weight-bold: var(--md-ref-typeface-weight-bold);
  --weight-strong: 800;

  /* 8px spacing scale keeps layout decisions consistent across the page. */
  --space-05: 4px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --radius-card: 8px;
  --radius-panel: 16px;
  --radius-pill: 999px;
  --review-card-inline-size: min(82vw, 21rem);
  --review-featured-card-inline-size: min(88vw, 35rem);
}

/* Base reset: makes sizing predictable across browsers. */
* {
  box-sizing: border-box;
}

/* Keep native hidden states authoritative when component classes set display. */
[hidden] {
  display: none !important;
}

/*
  scroll-behavior: smooth is intentionally NOT set here.
  All smooth scrolling is controlled in script.js where prefers-reduced-motion
  can be checked. Setting it in CSS would bypass that accessibility check for
  any hash link not intercepted by JS (e.g. direct address bar navigation).
*/

:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 3px;
}

/* Global page defaults keep typography and background consistent. */
      body {
        margin: 0;
        padding-bottom: 72px;
        color: var(--color-ink);
        background: var(--color-soft);
        font-family: var(--font-sans);
        font-size: var(--type-body);
        line-height: var(--line-normal);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
      }

          body.menu-open {
            overflow: hidden;
          }

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

                  a {
                    color: inherit;
                  }

                :where([id]) {
                  scroll-margin-top: 88px;
                }

/* Container gives every section the same readable page width. */
    .container {
      width: min(100% - var(--space-4), 1160px);
      margin: 0 auto;
    }

/* Accessibility helper: hidden until focused, useful for keyboard navigation. */
    .skip-link {
      position: fixed;
      top: var(--space-2);
      left: var(--space-2);
      z-index: 100;
      padding: var(--space-1) var(--space-2);
      background: var(--color-surface);
      color: var(--color-navy);
      border: 2px solid var(--color-navy);
      border-radius: var(--radius-card);
      font-size: var(--type-label);
      font-weight: var(--weight-bold);
      line-height: var(--md-sys-typescale-label-large-line-height);
      text-decoration: none;
      transform: translateY(-160%);
    }

          .skip-link:focus {
            transform: translateY(0);
          }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
}

/* Header and navigation: mobile-first, with desktop layout added in media queries. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--color-line);
  backdrop-filter: blur(14px);
}

.no-js .site-header {
  position: static;
}

        .nav {
          display: grid;
          grid-template-columns: auto auto;
          min-height: 72px;
          align-items: center;
          justify-content: space-between;
          gap: var(--space-2);
        }

          .brand {
            display: inline-flex;
            align-items: center;
            gap: var(--space-1);
            color: var(--color-blue-dark);
            font-size: var(--md-sys-typescale-title-medium-size);
            font-weight: var(--weight-bold);
            line-height: var(--md-sys-typescale-title-medium-line-height);
            text-decoration: none;
          }

            .brand img {
              width: var(--space-5);
              height: var(--space-5);
              object-fit: contain;
            }

              .menu-toggle {
                display: none;
                width: var(--space-6);
                height: var(--space-6);
                align-items: center;
                justify-content: center;
                flex-direction: column;
                gap: var(--space-05);
                margin-left: auto;
                background: var(--color-surface);
                border: 1px solid var(--color-line);
                border-radius: var(--radius-card);
                cursor: pointer;
              }

                .menu-toggle span {
                  width: 20px;
                  height: 2px;
                  background: var(--color-ink);
                }

                  .nav-links {
                    position: static;
                    display: flex;
                    grid-column: 1 / -1;
                    flex-direction: column;
                    width: 100%;
                    margin: 0;
                    padding: 0 0 var(--space-1);
                    background: transparent;
                    border: 0;
                    box-shadow: none;
                    list-style: none;
                  }

                    .nav-contact-item {
                      display: none;
                    }

                      .js .menu-toggle {
                        display: flex;
                      }

                      .js .nav-links {
                        position: fixed;
                        top: 72px;
                        left: 0;
                        right: 0;
                        display: none;
                        width: auto;
                        padding: var(--space-1);
                        background: var(--color-surface);
                        border-bottom: 1px solid var(--color-line);
                        box-shadow: var(--shadow);
                        max-height: calc(100dvh - var(--space-10));
                        overflow-y: auto;
                        overscroll-behavior: contain;
                      }

                      .js .nav-links.is-open {
                        display: flex;
                      }

                        .nav-links a {
                          display: block;
                          padding: var(--space-2) 0;
                          color: var(--color-ink);
                          font-size: var(--type-nav);
                          font-weight: var(--weight-semibold);
                          line-height: var(--md-sys-typescale-label-large-line-height);
                          text-decoration: none;
                        }

                        .nav-links a:hover,
                        .nav-links a:focus-visible {
                          color: var(--color-blue);
                        }

                                .nav-links .nav-call {
                                  display: inline-flex;
                                  align-items: center;
                                  justify-content: center;
                                  min-height: var(--space-6);
                                  gap: var(--space-1);
                                  padding: 0 var(--space-2);
                                  color: var(--color-surface);
                                  background: var(--color-control-blue);
                                  border: 2px solid var(--color-control-blue);
                                  border-radius: var(--radius-pill);
                                  font-size: var(--type-nav);
                                  font-weight: var(--weight-bold);
                                  line-height: var(--md-sys-typescale-label-large-line-height);
                                  text-decoration: none;
                                }

.nav-links .nav-call:hover,
.nav-links .nav-call:focus-visible {
  color: var(--color-surface);
  background: var(--color-control-blue-hover);
  border-color: var(--color-control-blue-hover);
}

.nav-links a[aria-current] {
  color: var(--color-blue-dark);
  text-decoration: underline;
  text-underline-offset: var(--space-05);
}





/* Hero section: focuses the homepage on location, speed, and wash-and-fold conversion. */
  .hero {
    padding: var(--space-8) 0 var(--space-12);
    margin: 0;
    background: var(--color-navy);
    color: #ffffff;
  }

      .hero-grid {
        display: grid;
        gap: var(--space-4);
        align-items: center;
      }

          .eyebrow {
            display: inline-flex;
            width: fit-content;
            margin: 0 0 var(--space-2);
            padding: var(--space-1) var(--space-2);
                      background: rgba(8, 125, 242, 0.14);
            color: var(--color-eyebrow-light);
            border: 1px solid rgba(8, 125, 242, 0.24);
            border-radius: 999px;
            font-size: var(--type-xs);
            font-weight: var(--weight-bold);
            line-height: var(--md-sys-typescale-label-medium-line-height);
          }

          #franchise .eyebrow {
            color: var(--color-eyebrow-dark);
          }

                  .hero-badge {
                    display: inline-flex;
                    width: fit-content;
                    align-items: center;
                    gap: 8px;
                    margin: 0 0 var(--space-2);
                    padding: 8px 16px;
                    background: rgba(8, 125, 242, 0.14);
                    color: rgba(255, 255, 255, 0.9);
                    border: 1px solid rgba(255, 255, 255, 0.08);
                    border-radius: 16px;
                    font-size: var(--type-xs);
                    font-weight: var(--weight-bold);
                    line-height: var(--md-sys-typescale-label-medium-line-height);
                  }

                    .hero-badge::before {
                      width: 8px;
                      height: 8px;
                      flex: 0 0 auto;
                      content: "";
                      background: #10e73b;
                      border-radius: 999px;
                      box-shadow: 0 0 0 5px rgba(178, 251, 160, 0.16);
                    }




/* Text safety: prevents long words or labels from breaking the layout. */
  h1,
  h2,
  h3,
  p,
  dt {
    overflow-wrap: break-word;
  }

  h1,
  h2,
  h3,
  dt {
    margin: 0;
    line-height: var(--line-tight);
    letter-spacing: 0;
  }

h1 {
  max-width: 980px;
  font-family: var(--md-sys-typescale-display-large-font);
  font-size: var(--type-h1);
  font-weight: var(--weight-strong);
  letter-spacing: -0.03rem;
}

        h1 span {
          display: block;
          margin-top: var(--space-05);
          color: var(--color-blue);
        }

  h2 {
    font-family: var(--md-sys-typescale-headline-large-font);
    font-size: var(--type-h2);
    font-weight: var(--weight-strong);
    letter-spacing: -0.02rem;
  }

    h3,
    dt {
      font-family: var(--md-sys-typescale-title-large-font);
      font-size: var(--type-h3);
      font-weight: var(--weight-bold);
      letter-spacing: 0;
    }

        .hero-copy {
          max-width: 650px;
          margin: var(--space-3) 0 0;
          color: #c6d8ec;
          font-size: var(--type-lead);
          line-height: var(--line-relaxed);
        }

/* Equal-width action grids make the CTAs feel balanced beside the service highlights. */
    .hero-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-2);
      width: min(100%, 560px);
      margin-top: var(--space-4);
    }

        .franchise-actions {
          display: grid;
          grid-template-columns: 1fr;
          gap: var(--space-2);
          width: 100%;
          margin-top: var(--space-4);
        }

        .franchise-actions .button {
          width: 100%;
        }

/* Reusable button style used by hero, forms, cards, and CTA sections. */
.button {
  display: inline-flex;
  min-height: 48px;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-3);
  background: var(--color-control-blue);
  color: var(--color-surface);
  border: 1px solid var(--color-control-blue);
  border-radius: var(--radius-card);
  font-size: var(--type-button);
  font-weight: var(--weight-bold);
  line-height: var(--line-snug);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

      .button:hover,
      .button:focus-visible {
        background: var(--color-control-blue-hover);
        border-color: var(--color-control-blue-hover);
      }

/*
  button-secondary: ghost button for use on DARK backgrounds only (hero, final CTA).
  The white border and white text are intentional for dark contexts.
  Do not use on white or light backgrounds — the border becomes invisible.
  For light backgrounds, use button-outline instead.
*/
      .button-secondary {
        background: transparent;
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.34);
      }

      .button-outline {
        background: transparent;
        color: var(--color-blue-dark);
        border-color: var(--color-blue-dark);
      }

      .button-secondary:hover,
      .button-secondary:focus-visible {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.6);
      }

      .button-outline:hover,
      .button-outline:focus-visible {
        background: var(--color-blue-dark);
        color: #ffffff;
      }

/* Franchise primary CTA: the darker brand blue keeps its label at WCAG AA contrast. */
.franchise-primary-cta,
.franchise-primary-cta:hover,
.franchise-primary-cta:focus-visible {
  background: var(--color-blue-dark);
  border-color: var(--color-blue-dark);
}

.franchise-primary-cta:hover,
.franchise-primary-cta:focus-visible {
  border-color: var(--color-surface);
}

/* Hero image is hidden on small screens to keep the first mobile view focused on action. */
.hero-media {
  position: relative;
  display: none;
  overflow: hidden;
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow);
}

.hero-media img {
  width: 100%;
  aspect-ratio: 4 / 4;
  object-fit: cover;
}

.media-stat {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  width: 150px;
  padding: var(--space-2);
  background: var(--color-blue-dark);
  color: #ffffff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}

.media-stat strong,
.media-stat span {
  display: block;
}

.media-stat strong {
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: var(--md-sys-typescale-title-large-line-height);
}

.media-stat span {
  color: #dceafe;
  font-size: var(--type-caption);
  line-height: var(--md-sys-typescale-body-small-line-height);
}

/* Task cards route users to the most common jobs without forcing them to read the full page. */
.task-strip {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--space-5) * -1);
}

.task-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.task-card {
  display: grid;
  grid-template-rows: 40px auto auto;
  min-height: 128px;
  align-content: start;
  justify-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-2);
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  text-align: center;
  text-decoration: none;
  transition:
    transform var(--motion-duration-fast) var(--motion-easing-standard),
    border-color var(--motion-duration-fast) var(--motion-easing-standard),
    box-shadow var(--motion-duration-fast) var(--motion-easing-standard);
}

.task-card strong {
  display: flex;
  min-height: 2.4em;
  align-items: center;
  justify-content: center;
  font-size: var(--md-sys-typescale-title-small-size);
  font-weight: var(--weight-bold);
  line-height: var(--md-sys-typescale-title-small-line-height);
}

.task-card span:last-child {
  color: var(--color-muted);
  font-size: var(--type-caption);
  line-height: var(--md-sys-typescale-body-small-line-height);
}

.task-icon {
  position: relative;
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: var(--color-sky);
  color: var(--color-blue-dark);
  border-radius: 999px;
  line-height: 0;
  overflow: hidden;
  transition:
    background-color var(--motion-duration-fast) var(--motion-easing-standard),
    color var(--motion-duration-fast) var(--motion-easing-standard);
}

.task-card:focus-visible {
  border-color: var(--color-blue);
  box-shadow: var(--shadow);
}

.task-card:focus-visible .task-icon {
  background: var(--color-blue);
  color: var(--color-surface);
}

@media (hover: hover) and (pointer: fine) {
  .task-card:hover {
    border-color: var(--color-blue);
    box-shadow: var(--shadow);
    transform: translateY(var(--interaction-lift));
  }

  .task-card:hover .task-icon {
    background: var(--color-blue);
    color: var(--color-surface);
  }
}

/* Shared section grid: used for two-column content blocks once there is enough space. */
.section {
  padding: var(--space-7) 0;
}

          .split-section {
            padding-top: var(--space-6);
          }

              .audience-section {
                padding-top: var(--space-7);
                padding-bottom: var(--space-7);
              }

                .split-grid,
                .audience-grid,
                .enquiry-grid {
                  display: grid;
                  gap: var(--space-4);
                  align-items: center;
                }

                        .image-card {
                          position: relative;
                          aspect-ratio: 1 / 1;
                          overflow: hidden;
                          /*border-radius: var(--radius-panel);
                          box-shadow: var(--shadow);*/
                        }

                        .image-card img {
                          width: 100%;
                          height: 100%;
                          object-fit: cover;
                          object-position: center;
                        }

                        .image-stat {
                          position: absolute;
                          right: var(--space-6);
                          bottom: var(--space-7);
                          padding: var(--space-2) var(--space-3);
                          background: var(--color-blue-dark);
                          color: #ffffff;
                          border-radius: var(--radius-card);
                          box-shadow: var(--shadow);
                        }

                              .image-stat strong,
                              .image-stat span {
                                display: block;
                              }

                                .image-stat strong {
                                  font-size: var(--md-sys-typescale-title-large-size);
                                  line-height: var(--md-sys-typescale-title-large-line-height);
                                }

                                    .image-stat span {
                                      margin-top: var(--space-05);
                                      color: #dbeafe;
                                      font-size: var(--type-caption);
                                      line-height: var(--md-sys-typescale-body-small-line-height);
                                    }

                                        .section-copy p:not(.eyebrow),
                                        .section-heading p,
                                        .light-panel p,
                                        .dark-panel p,
                                        .franchise-panel p,
                                        .enquiry-grid p {
                                          color: var(--color-muted);
                                        }

                                            .section-copy p:not(.eyebrow),
                                            .section-heading p,
                                            .panel-copy p,
                                            .franchise-panel p,
                                            .enquiry-grid > div > p,
                                            .final-cta-inner p {
                                              max-width: 62ch;
                                              line-height: var(--line-relaxed);
                                            }







/* Service proof cards: short benefit tiles supporting practical laundry tasks. */
.proof-grid {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

  .proof-grid p {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-2);
    align-items: center;
    margin: 0;
    padding: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
  }

    .proof-icon {
      position: relative;
      display: inline-flex;
      grid-row: span 2;
      width: var(--space-6);
      height: var(--space-6);
      align-items: center;
      justify-content: center;
      background: var(--color-sky);
      color: var(--color-blue-dark);
      border-radius: 999px;
      line-height: 0;
      overflow: hidden;
    }

      .proof-icon svg,
      .task-icon svg,
      .proof-mini-grid span svg,
      .icon-list span svg {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        transform: translate(-50%, -50%);
        stroke-width: 2.4;
      }

        .proof-grid strong,
        .proof-grid p > span:not(.proof-icon) {
          display: block;
        }

        .proof-grid strong {
          font-size: var(--md-sys-typescale-title-small-size);
          font-weight: var(--weight-bold);
          line-height: var(--md-sys-typescale-title-small-line-height);
        }

            .proof-grid p > span:not(.proof-icon) {
              color: var(--color-muted);
              font-size: var(--type-caption);
              line-height: var(--md-sys-typescale-body-small-line-height);
            }







/* Who We Serve: static cards remain the fallback; JavaScript adds a mobile disclosure view. */
.who-we-serve-section {
  background: var(--color-soft);
}

.who-mobile-intro,
.who-accordion {
  display: none;
}

.js .who-we-serve-section .section-heading {
  margin-bottom: var(--space-3);
}

.js .who-desktop-intro {
  display: none;
}

.js .who-mobile-intro {
  display: block;
}

.js .who-we-serve-section .segment-grid {
  display: none;
}

.js .who-accordion {
  display: grid;
  gap: var(--space-1);
}

    .who-accordion-item {
      min-width: 0;
      background: var(--color-surface);
      border: 1px solid var(--color-line);
      border-radius: var(--radius-panel);
      box-shadow: var(--shadow-soft);
    }

      .who-accordion-heading {
        margin: 0;
      }

      .who-accordion-trigger {
        display: flex;
        width: 100%;
        min-height: var(--space-7);
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2);
        padding: var(--space-1) var(--space-2);
        background: transparent;
        color: var(--color-ink);
        border: 0;
        border-radius: var(--radius-panel);
        font: inherit;
        font-size: var(--type-body);
        font-weight: var(--weight-bold);
        line-height: var(--line-snug);
        text-align: left;
        cursor: pointer;
      }

        .who-accordion-trigger:hover,
        .who-accordion-trigger[aria-expanded="true"] {
          color: var(--color-blue-dark);
        }

        .who-accordion-trigger-content {
          display: flex;
          min-width: 0;
          flex: 1;
          align-items: center;
          gap: var(--space-2);
        }

            .who-accordion .segment-icon {
              width: var(--space-5);
              height: var(--space-5);
              flex: 0 0 auto;
            }

                .who-accordion .segment-icon svg {
                  width: var(--space-2);
                  height: var(--space-2);
                }

                  .who-accordion-chevron {
                    width: var(--space-3);
                    height: var(--space-3);
                    flex: 0 0 auto;
                    color: var(--color-blue-dark);
                    transition: transform var(--motion-duration-fast) var(--motion-easing-standard);
                  }

                  .who-accordion-trigger[aria-expanded="true"] .who-accordion-chevron {
                    transform: rotate(180deg);
                  }

                    .who-accordion-panel {
                      padding: var(--space-2);
                      color: var(--color-muted);
                      border-top: 1px solid var(--color-line);
                    }

                    .who-accordion-panel p {
                      margin: 0;
                      font-size: var(--type-sm);
                      line-height: var(--line-relaxed);
                    }

                          .segment-grid {
                            display: grid;
                            grid-template-columns: minmax(0, 1fr);
                            gap: var(--space-3);
                          }

                          .segment-card {
                            display: grid;
                            min-width: 0;
                            align-content: start;
                            gap: var(--space-2);
                            padding: var(--space-4);
                            background: var(--color-surface);
                            border-radius: var(--radius-panel);
                            box-shadow: var(--shadow-soft);
                          }

                          .segment-icon {
                            position: relative;
                            display: inline-flex;
                            width: var(--space-6);
                            height: var(--space-6);
                            align-items: center;
                            justify-content: center;
                            background: var(--color-sky);
                            color: var(--color-blue-dark);
                            border-radius: var(--radius-pill);
                            line-height: 0;
                            overflow: hidden;
                          }

                          .segment-icon svg {
                            width: var(--space-3);
                            height: var(--space-3);
                          }

                          .segment-card h3,
                          .segment-card p {
                            margin: 0;
                          }

                          .segment-card p {
                            color: var(--color-muted);
                            line-height: var(--line-relaxed);
                          }





/* Centered headings and shared lists remain reusable across Version 4 sections. */
.center {
  max-width: 720px;
  margin: 0 auto var(--space-4);
  text-align: center;
}

.center .eyebrow {
  margin-left: auto;
  margin-right: auto;
}

.section-heading.center p:not(.eyebrow) {
  margin-left: auto;
  margin-right: auto;
}

.icon-list,
.footer-grid ul {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.icon-list li {
  color: var(--color-muted);
  font-size: var(--type-sm);
  line-height: var(--md-sys-typescale-body-medium-line-height);
}


/* Audience panels separate walk-in customers from commercial customers. */
    .audience-section {
      background: var(--color-soft);
    }

        .dark-panel,
        .light-panel {
          min-height: 100%;
          padding: var(--space-4);
          border-radius: var(--radius-card);
          box-shadow: var(--shadow);
        }

                .section-heading:not(.center) {
                  max-width: 760px;
                  margin-bottom: var(--space-4);
                }

                    .dark-panel {
                      background: var(--color-navy);
                      color: #ffffff;
                    }

                        .dark-panel p {
                          color: #bfd2e7;
                        }

                          .dark-panel img {
                            width: 100%;
                            margin-top: auto;
                            border-radius: var(--radius-card);
                            aspect-ratio: 16 / 9;
                            object-fit: cover;
                          }

                              .audience-card {
                                display: grid;
                                align-content: stretch;
                                gap: var(--space-2);
                              }

                                .panel-copy {
                                  display: grid;
                                  gap: var(--space-2);
                                }

                                  .panel-copy > * {
                                    margin: 0;
                                  }

                                    .panel-copy h3 {
                                      max-width: 32ch;
                                      
                                    }

                                      .panel-copy p:not(.panel-kicker) {
                                        max-width: 50ch;
                                      }

                                .panel-kicker {
                                  margin: 0;
                                  color: inherit;
                                  font-size: var(--type-xs);
                                  font-weight: var(--weight-bold);
                                  line-height: var(--md-sys-typescale-label-medium-line-height);
                                  letter-spacing: 0;
                                  text-transform: uppercase;
                                }

                    .tag-list {
                      display: flex;
                      flex-wrap: wrap;
                      align-items: flex-start;
                      gap: var(--space-1);
                      margin: 0;
                      padding: 0;
                      list-style: none;
                    }

                          .tag-list li {
                            display: inline-flex;
                            min-height: var(--space-4);
                            align-items: center;
                            justify-content: center;
                            padding: var(--space-05) var(--space-2);
                            background: rgba(255, 255, 255, 0.08);
                            color: #dbeafe;
                            border: 1px solid rgba(255, 255, 255, 0.14);
                            border-radius: 999px;
                            font-size: 8px;
                            font-weight: var(--weight-medium);
                            line-height: var(--md-sys-typescale-label-medium-line-height);
                            white-space: nowrap;
                          }

.light-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
}




/* Compact proof chips give business users reassurance before asking them to enquire. */
.proof-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
  gap: var(--space-1);
  margin-top: 0;
}

.proof-mini-grid p {
  display: flex;
  min-height: var(--space-7);
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-1);
  background: #f8fbff;
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  font-size: var(--type-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--md-sys-typescale-body-medium-line-height);
}

.proof-mini-grid span {
  position: relative;
  display: inline-flex;
  width: var(--space-4);
  height: var(--space-4);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  background: var(--color-sky);
  color: var(--color-blue-dark);
  border-radius: 999px;
  line-height: 0;
  overflow: hidden;
}

.proof-mini-grid span svg {
  width: 18px;
  height: 18px;
}

.proof-mini-grid-dark p {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.16);
}

.proof-mini-grid-dark span {
  background: rgba(95, 179, 255, 0.18);
  color: #8fd3ff;
}

.icon-list {
  gap: var(--space-2);
  margin: 0;
}

.icon-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-ink);
  font-size: var(--type-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--md-sys-typescale-body-medium-line-height);
}

.icon-list span {
  position: relative;
  display: inline-flex;
  width: var(--space-6);
  height: var(--space-6);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  background: var(--color-sky);
  color: var(--color-blue-dark);
  border-radius: 999px;
  line-height: 0;
  overflow: hidden;
}






/* Commercial proof: industry categories and confirmed client groups stay scannable. */
.commercial-client-grid {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.commercial-client-grid .dark-panel {
  padding-block-end: var(--space-5);
}

.commercial-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.commercial-panel h3,
.commercial-panel p {
  margin: 0;
}

.commercial-panel .icon-list {
  flex: 1;
}

.commercial-client-groups {
  display: grid;
  gap: var(--space-4);
}

.commercial-client-group {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.commercial-client-group h4 {
  margin: 0;
  font-size: var(--type-body);
  font-weight: var(--weight-bold);
  line-height: var(--line-snug);
}

.commercial-client-group .tag-list {
  gap: var(--space-2);
}

.commercial-client-group .tag-list li {
  min-height: var(--space-6);
  max-width: 100%;
  padding: var(--space-1) var(--space-3);
  background: var(--color-navy-soft);
  color: var(--color-sky);
  border-color: var(--color-commercial-pill-border);
  border-radius: var(--radius-pill);
  font-size: var(--type-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  text-align: center;
  white-space: normal;
}

.commercial-panel .button {
  width: 100%;
}

.commercial-client-grid .dark-panel > .button {
  margin-top: var(--space-5);
}






/* Shared dark narrative copy also supports the franchise teaser. */

.journey-copy {
  max-width: 62ch;
}

.journey-copy h2 {
  max-width: 20ch;
  margin: var(--space-3) 0;
  color: var(--color-surface);
}

.journey-copy p {
  margin: 0;
  color: var(--color-sky);
  line-height: var(--line-relaxed);
}

.journey-copy p + p {
  margin-top: var(--space-2);
}






/* Community: two distinct paths for creative collaboration and local impact. */
.community-section {
  background: var(--color-soft);
}

.community-grid {
  display: grid;
  gap: var(--space-4);
}

.community-block {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-soft);
}

.community-block--creative {
  background: var(--color-surface);
}

.community-block--impact {
  background: var(--color-navy);
  color: var(--color-surface);
  border-color: var(--color-navy);
}

.community-block-copy {
  display: grid;
  gap: var(--space-2);
}

.community-block-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.community-icon {
  position: relative;
  display: inline-flex;
  width: var(--space-6);
  height: var(--space-6);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  background: var(--color-sky);
  color: var(--color-blue-dark);
  border-radius: 999px;
  line-height: 0;
}

.community-icon svg {
  width: var(--space-3);
  height: var(--space-3);
}

.community-block h3,
.community-block p {
  margin: 0;
}

.community-block p {
  max-width: 62ch;
  color: var(--color-muted);
  line-height: var(--line-relaxed);
}

.community-block--impact p {
  color: var(--color-sky);
}

.community-block .button {
  width: 100%;
}

.community-social-cta:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.light-panel .button {
  width: 100%;
  margin-top: var(--space-2);
}




/* Location selector: accessible tabs enhance a stacked no-JavaScript fallback. */
.locations-section {
  background: var(--color-surface);
}

.location-discovery-grid {
  display: grid;
  gap: var(--space-3);
}

.location-discovery-card {
  position: relative;
  display: grid;
  aspect-ratio: 4 / 3;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-navy-soft);
  color: var(--color-surface);
  text-decoration: none;
  box-shadow: var(--shadow-soft);
}

.location-discovery-card > img,
.location-discovery-placeholder {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.location-discovery-placeholder {
  display: grid;
  place-items: center;
  color: var(--color-sky);
}

.location-discovery-placeholder svg {
  width: var(--space-6);
  height: var(--space-6);
}

.location-discovery-copy {
  position: relative;
  align-self: end;
  padding: var(--space-8) var(--space-3) var(--space-3);
  background: linear-gradient(transparent, var(--color-photo-overlay) var(--space-8));
}

.location-discovery-copy h3 {
  margin: 0 0 var(--space-05);
  font-size: var(--type-h3);
  line-height: var(--line-snug);
}

.location-discovery-copy span {
  font-size: var(--type-body);
}

.location-discovery-card:hover h3,
.location-discovery-card:focus-visible h3 {
  text-decoration: underline;
  text-underline-offset: var(--space-05);
}


.location-photo-placeholder {
  display: grid;
  width: 100%;
  aspect-ratio: 4 / 3;
  place-items: center;
  color: var(--color-blue-dark);
  background: var(--color-soft);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
}


.location-status {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  margin-bottom: var(--space-2);
  padding: var(--space-05) var(--space-1);
  color: var(--color-success-ink);
  background: var(--color-success-soft);
  border-radius: 999px;
  font-size: var(--type-2xs);
  font-weight: var(--weight-bold);
  line-height: var(--md-sys-typescale-label-small-line-height);
  text-transform: uppercase;
}

.location-status.status-closed {
  color: var(--color-danger);
  background: var(--color-danger-soft);
}


.location-details {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-3) 0 0;
  padding: var(--space-2) 0 0;
  border-top: 1px solid var(--color-line);
}

.location-details div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-2);
}

.location-details dt {
  color: var(--color-ink);
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  line-height: var(--md-sys-typescale-label-medium-line-height);
}

.location-details dd {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--type-sm);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  text-align: right;
}

.location-details a {
  color: var(--color-blue-dark);
  font-weight: var(--weight-bold);
}

.location-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1);
  margin-top: var(--space-3);
}

.location-actions-single {
  grid-template-columns: minmax(0, 1fr);
}

.location-actions .button {
  width: 100%;
}



/* Franchise teaser: founder-led context and confirmed proof form a distinct high-consideration path. */
.story-hero {
  position: relative;
  display: grid;
  min-height: min(var(--story-hero-height), calc(100dvh - var(--space-10)));
  align-items: end;
  overflow: hidden;
  background: var(--color-navy);
  color: var(--color-surface);
}

.story-hero > img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--story-image-opacity);
}

.story-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, var(--color-photo-overlay));
}

.story-hero-copy {
  position: relative;
  z-index: 1;
  padding-block: var(--space-10) var(--space-8);
}

.story-hero h1 {
  max-width: var(--reading-width);
  margin: var(--space-2) 0;
  font-size: var(--type-h1);
  line-height: var(--line-tight);
}

.story-hero p,
.story-chapter p,
.story-photo-chapter p,
.story-growth p {
  max-width: var(--reading-width);
}

.story-hero p {
  margin: 0;
  color: var(--color-sky);
  font-size: var(--type-lead);
}

.story-reading-grid,
.story-photo-grid {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}

.story-chapter-number {
  margin: 0;
  color: var(--color-sky);
  font-size: var(--type-h1);
  font-weight: var(--weight-strong);
}

.story-lead {
  color: var(--color-ink);
  font-size: var(--type-lead);
  font-weight: var(--weight-semibold);
}

.story-values,
.story-people {
  background: var(--color-surface);
}

.story-value-grid,
.story-people-grid {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.story-value-grid article,
.story-people-grid p {
  margin: 0;
  padding: var(--space-3);
  background: var(--color-soft);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
}

.story-value-grid article > span {
  display: grid;
  width: var(--space-5);
  height: var(--space-5);
  place-items: center;
  color: var(--color-blue-dark);
  background: var(--color-sky);
  border-radius: var(--radius-pill);
}

.story-value-grid article svg {
  width: var(--space-3);
  height: var(--space-3);
}

.story-value-grid h3 {
  margin: var(--space-2) 0 var(--space-1);
}

.story-value-grid p,
.story-people-grid p {
  color: var(--color-muted);
}

.story-photo-grid > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}

.story-photo-grid .button {
  margin-top: var(--space-2);
}

.story-quote-section {
  background: var(--color-navy);
  color: var(--color-surface);
}

.story-quote-section blockquote {
  max-width: var(--reading-width);
  margin: 0;
  font-size: var(--type-h2);
  font-weight: var(--weight-strong);
  line-height: var(--line-snug);
}

.story-quote-section p {
  margin: var(--space-3) 0 0;
  color: var(--color-sky);
  font-weight: var(--weight-semibold);
}

/* Blog index and article pages share one readable editorial system. */
.blog-index-hero,
.blog-article-hero,
.article-body,
.related-articles {
  background: var(--color-surface);
}

.blog-index-heading,
.blog-article-heading {
  min-width: 0;
  max-width: var(--reading-width);
}

.blog-index-heading h1,
.blog-article-heading h1 {
  margin: var(--space-2) 0;
}

.blog-index-heading > p:not(.eyebrow),
.blog-standfirst {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--type-lead);
  line-height: var(--line-relaxed);
}

.blog-card-grid,
.related-article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.blog-card,
.related-article-card {
  min-width: 0;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}

.blog-card {
  position: relative;
  transition:
    transform var(--motion-duration-fast) var(--motion-easing-standard),
    border-color var(--motion-duration-fast) var(--motion-easing-standard),
    box-shadow var(--motion-duration-fast) var(--motion-easing-standard);
}

.blog-card:focus-within {
  border-color: var(--color-blue);
  box-shadow: var(--shadow);
  outline: 3px solid var(--color-blue);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .blog-card:hover {
    border-color: var(--color-blue);
    box-shadow: var(--shadow);
    transform: translateY(var(--interaction-lift));
  }
}

.blog-card img,
.related-article-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.blog-card-content,
.related-article-card-content {
  padding: var(--space-3);
}

.blog-category {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-eyebrow-light);
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  line-height: var(--md-sys-typescale-label-medium-line-height);
}

.blog-card h2,
.related-article-card h3 {
  font-size: var(--type-h3);
  line-height: var(--line-snug);
  overflow-wrap: anywhere;
}

.blog-card p,
.related-article-card p {
  margin: var(--space-2) 0;
  color: var(--color-muted);
  line-height: var(--line-relaxed);
}

.blog-card-link,
.related-article-link {
  display: inline-flex;
  min-height: var(--space-6);
  align-items: center;
  color: var(--color-blue-dark);
  font-weight: var(--weight-bold);
  text-decoration-thickness: 2px;
  text-underline-offset: var(--space-05);
}

.blog-card-link::after {
  position: absolute;
  inset: 0;
  content: "";
}

.blog-article-heading .breadcrumbs {
  margin-bottom: var(--space-4);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: var(--space-3) 0 0;
  color: var(--color-muted);
  font-size: var(--type-sm);
}

.article-meta span + span::before {
  content: "\2022";
  margin-right: var(--space-2);
  color: var(--color-blue-dark);
}

.blog-hero-media {
  margin: var(--space-5) 0 0;
}

.blog-hero-media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}

.article-copy {
  max-width: var(--reading-width);
  margin: 0 auto;
}

.article-copy > :first-child {
  margin-top: 0;
}

.article-copy h2 {
  margin: var(--space-6) 0 var(--space-2);
}

.article-copy h3 {
  margin: var(--space-4) 0 var(--space-1);
  font-size: var(--type-h3);
  line-height: var(--line-snug);
}

.article-copy p,
.article-copy li,
.article-copy dd,
.article-copy td,
.article-copy th {
  line-height: var(--line-relaxed);
}

.article-copy p,
.article-copy ul,
.article-copy ol {
  margin-block: var(--space-2);
}

.article-copy ul,
.article-copy ol {
  padding-left: var(--space-3);
}

.article-copy li + li {
  margin-top: var(--space-1);
}

.article-safety-note,
.washbar-experience {
  margin: var(--space-4) 0;
  padding: var(--space-3);
  background: var(--color-soft);
  border-left: var(--space-05) solid var(--color-blue-dark);
  border-radius: var(--radius-card);
}

.article-safety-note strong,
.washbar-experience strong {
  display: block;
  margin-bottom: var(--space-1);
}

.comparison-table-region {
  max-width: 100%;
  margin: var(--space-4) 0;
  overflow-x: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
}

.comparison-table {
  width: 100%;
  min-width: var(--reading-width);
  border-collapse: collapse;
  background: var(--color-surface);
}

.comparison-table th,
.comparison-table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}

.comparison-table thead th {
  color: var(--color-surface);
  background: var(--color-navy);
}

.comparison-table tbody th {
  width: 30%;
  color: var(--color-ink);
  background: var(--color-soft);
}

.comparison-table tr:last-child th,
.comparison-table tr:last-child td {
  border-bottom: 0;
}

.schedule-list {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

.schedule-list > div {
  padding: var(--space-3);
  background: var(--color-soft);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
}

.schedule-list dt {
  font-size: var(--type-h3);
  line-height: var(--line-snug);
}

.schedule-list dd {
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
}

.article-cta {
  background: var(--color-navy);
  color: var(--color-surface);
}

.article-cta-inner {
  display: grid;
  gap: var(--space-3);
  align-items: center;
}

.article-cta h2 {
  max-width: var(--reading-width);
}

.article-cta p {
  max-width: var(--reading-width);
  margin: var(--space-2) 0 0;
  color: var(--color-sky);
  line-height: var(--line-relaxed);
}

.article-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.related-articles .section-heading {
  max-width: var(--reading-width);
}

.js .story-reveal {
  opacity: 0;
  transform: translateY(var(--space-2));
  transition:
    opacity var(--motion-duration-fast) var(--motion-easing-standard),
    transform var(--motion-duration-fast) var(--motion-easing-standard);
}

.js .story-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.store-section {
  background: var(--color-surface);
}

.store-back-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-6);
  color: var(--color-blue-dark);
  font-size: var(--type-sm);
  font-weight: var(--weight-semibold);
}

.breadcrumbs {
  margin-bottom: var(--space-3);
  color: var(--color-muted);
  font-size: var(--type-sm);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.breadcrumbs li + li::before {
  content: "/";
  color: var(--color-muted);
}

.breadcrumbs a {
  color: var(--color-blue-dark);
  font-weight: var(--weight-semibold);
}

.breadcrumbs [aria-current="page"] {
  color: var(--color-ink);
}

.store-heading {
  margin-block: var(--space-3) var(--space-4);
}

.store-heading h1 {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--type-h1);
  line-height: var(--line-tight);
  overflow-wrap: break-word;
}

.location-street-name {
  margin: 0;
  color: var(--color-blue-dark);
  font-size: var(--md-sys-typescale-title-medium-size);
  font-weight: var(--weight-semibold);
  line-height: var(--line-normal);
}

.store-intro {
  max-width: var(--reading-width);
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  line-height: var(--line-relaxed);
}

.store-layout {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}

.store-gallery,
.store-information {
  min-width: 0;
}

.store-photo-main {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-soft);
  cursor: zoom-in;
}

.store-photo-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.store-photo-thumbnails,
.gallery-thumbnails {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: var(--space-05);
}

.store-photo-thumbnails li {
  flex: 0 0 var(--gallery-thumb-size);
}

.store-photo-thumbnails a,
.gallery-thumbnail {
  display: grid;
  width: var(--gallery-thumb-size);
  height: var(--gallery-thumb-size);
  flex: 0 0 var(--gallery-thumb-size);
  place-items: center;
  padding: 0;
  border: 2px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-soft);
  color: var(--color-blue-dark);
  font: inherit;
  font-weight: var(--weight-bold);
  text-decoration: none;
  cursor: pointer;
}

.store-photo-thumbnails img,
.gallery-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.gallery-thumbnail[aria-pressed="true"] {
  border-color: var(--color-blue-dark);
  box-shadow: 0 0 0 var(--space-05) var(--color-sky);
}

.gallery-thumbnail:focus-visible {
  outline-color: var(--color-blue-dark);
}

.store-information h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--type-h3);
}

.store-information address {
  font-style: normal;
  line-height: var(--line-relaxed);
}

.store-laundry {
  margin-top: var(--space-4);
}

.store-laundry h3 {
  margin-bottom: var(--space-1);
  font-size: var(--type-body);
}

.store-laundry p {
  margin: 0;
  color: var(--color-muted);
}

.store-map-link {
  display: inline-flex;
  margin-top: var(--space-2);
  color: var(--color-blue-dark);
  font-size: var(--type-sm);
  font-weight: var(--weight-semibold);
}

.store-faq {
  background: var(--color-soft);
}

.store-faq-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.store-faq-item {
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-line);
}

.store-faq-item h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--type-body);
}

.store-faq-item p {
  margin: 0;
  color: var(--color-muted);
  line-height: var(--line-relaxed);
}

.store-photo-placeholder {
  aspect-ratio: 1;
  height: auto;
}

.wash-fold-steps {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  margin: var(--space-4) 0;
  list-style: none;
  counter-reset: wash-step;
}

.wash-fold-steps li {
  display: grid;
  grid-template-columns: var(--space-4) minmax(0, 1fr);
  gap: var(--space-05) var(--space-2);
  align-content: start;
  counter-increment: wash-step;
}

.wash-fold-steps li::before {
  content: counter(wash-step, decimal-leading-zero);
  grid-row: span 2;
  color: var(--color-blue-dark);
  font-weight: var(--weight-bold);
}

.wash-fold-steps span {
  color: var(--color-muted);
  font-size: var(--type-sm);
  line-height: var(--line-relaxed);
}

body.gallery-open {
  overflow: hidden;
}

.gallery-dialog {
  position: fixed;
  width: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: auto;
  padding: var(--space-2);
  border: 0;
  background: var(--color-surface);
  color: var(--color-ink);
  overscroll-behavior: contain;
}

.gallery-dialog[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--space-2);
}

.gallery-dialog::backdrop {
  background: var(--color-gallery-backdrop);
}

.gallery-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
}

.gallery-toolbar h2 {
  margin: 0;
  font-size: var(--type-body);
}

.gallery-toolbar-controls {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.gallery-counter {
  min-width: var(--space-6);
  text-align: center;
  color: var(--color-muted);
  font-size: var(--type-sm);
}

.gallery-icon-button {
  display: inline-grid;
  place-items: center;
  width: var(--space-6);
  height: var(--space-6);
  padding: var(--space-1);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-blue-dark);
  font: inherit;
  font-size: var(--type-h3);
  cursor: pointer;
}

.gallery-icon-button:hover {
  background: var(--color-sky);
}

.gallery-stage {
  display: grid;
  min-height: 0;
  place-items: center;
  background: var(--color-soft);
}

.gallery-stage img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

.gallery-thumbnails {
  margin: 0;
}

.franchise-section {
  background-color: var(--color-navy);
  background-image: radial-gradient(
    circle at center,
    var(--color-footer-border) 0,
    transparent var(--space-1)
  );
  background-size: var(--space-4) var(--space-4);
  color: var(--color-surface);
}

    .franchise-panel {
      display: grid;
      gap: var(--space-5);
      align-items: center;
    }

    .franchise-section .journey-copy {
      max-width: none;
    }

.franchise-section .icon-list {
  margin-top: var(--space-4);
}

.franchise-section .icon-list li {
  color: var(--color-surface);
}

.franchise-panel > .segment-card {
  padding: var(--space-4);
}

.franchise-panel > .segment-card h3 {
  color: var(--color-blue);
  font-weight: var(--weight-strong);
}

.franchise-panel > .segment-card p {
  color: var(--color-ink);
  font-style: normal;
  font-weight: var(--weight-regular);
  line-height: var(--line-relaxed);
}

.quote-card {
  padding: var(--space-4);
  background: #ffffff;
  color: var(--color-ink);
  border-radius: var(--radius-card);
  transform: rotate(-3deg);
}

.quote-card p {
  color: var(--color-muted);
}


/* Review carousel: one featured story establishes hierarchy before supporting reviews. */
.reviews-section {
  background: var(--color-surface);
}

.reviews-heading-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.reviews-heading-row .section-heading {
  margin-bottom: 0;
}

.review-carousel-controls {
  display: flex;
  gap: var(--space-1);
}

.review-carousel-button {
  display: inline-flex;
  width: var(--space-6);
  height: var(--space-6);
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--color-surface);
  color: var(--color-blue-dark);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  cursor: pointer;
}

.review-carousel-button:hover,
.review-carousel-button:focus-visible {
  background: var(--color-blue-dark);
  color: var(--color-surface);
  border-color: var(--color-blue-dark);
}

.review-carousel-button:disabled {
  color: var(--color-muted);
  cursor: not-allowed;
  opacity: 0.45;
}

.review-carousel-button:disabled:hover {
  background: var(--color-surface);
  color: var(--color-muted);
  border-color: var(--color-line);
}

.review-carousel-button svg {
  width: var(--space-3);
  height: var(--space-3);
}

.review-carousel-viewport {
  overflow-x: auto;
  padding: var(--space-05) 0 var(--space-2);
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--color-line) transparent;
}

.review-carousel-track {
  display: flex;
  width: max-content;
  gap: var(--space-2);
}

.review-card {
  position: relative;
  display: grid;
  flex: 0 0 var(--review-card-inline-size);
  min-height: calc(var(--space-10) * 3);
  align-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  scroll-snap-align: start;
}

.review-card--featured {
  flex-basis: var(--review-featured-card-inline-size);
  background: var(--color-navy);
  color: var(--color-surface);
  border-color: var(--color-navy);
}

.review-stars {
  margin: 0 0 var(--space-2);
  color: var(--color-star-light);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
}

.review-card--featured .review-stars {
  color: var(--color-star-dark);
}

.review-card blockquote {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  line-height: var(--line-relaxed);
}

.review-card--featured blockquote {
  color: var(--color-surface);
  font-size: var(--type-lead);
}

.review-attribution {
  display: grid;
  gap: var(--space-05);
}

.review-attribution cite {
  color: inherit;
  font-style: normal;
  font-weight: var(--weight-bold);
}

.review-customer-type,
.review-source {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--type-xs);
  line-height: var(--md-sys-typescale-label-medium-line-height);
}

.review-card--featured .review-customer-type,
.review-card--featured .review-source {
  color: var(--color-sky);
}

.review-source a {
  font-weight: var(--weight-semibold);
}

/* Enquiries progressively enhance a native form; phone contact is always available. */
.enquiry-section {
  background: var(--color-soft);
}

.contact-panel {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}

.enquiry-options {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.enquiry-option {
  display: grid;
  min-height: var(--space-8);
  align-content: center;
  gap: var(--space-05);
  padding: var(--space-2);
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  transition:
    border-color var(--motion-duration-fast) var(--motion-easing-standard),
    box-shadow var(--motion-duration-fast) var(--motion-easing-standard),
    transform var(--motion-duration-fast) var(--motion-easing-standard);
}

.enquiry-option:focus-visible {
  border-color: var(--color-blue-dark);
  box-shadow: var(--shadow);
}

@media (hover: hover) and (pointer: fine) {
  .enquiry-option:hover {
    border-color: var(--color-blue-dark);
    box-shadow: var(--shadow);
    transform: translateY(var(--interaction-lift));
  }
}

.enquiry-option strong,
.enquiry-option span {
  display: block;
}

.enquiry-option strong {
  font-size: var(--type-body);
  line-height: var(--line-snug);
}

.enquiry-option span {
  color: var(--color-muted);
  font-size: var(--type-caption);
  line-height: var(--md-sys-typescale-body-small-line-height);
}

.contact-panel p {
  margin: 0;
}

.enquiry-field {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.enquiry-field label {
  color: var(--color-ink);
  font-weight: var(--weight-bold);
}

.optional-label {
  color: var(--color-muted);
  font-weight: var(--weight-regular);
}

.enquiry-field :is(input, select, textarea) {
  width: 100%;
  min-width: 0;
  min-height: var(--space-6);
  padding: var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--type-body);
  line-height: var(--line-normal);
}

.enquiry-field textarea {
  resize: vertical;
}

.enquiry-field [aria-invalid="true"] {
  border-color: var(--color-danger);
}

.enquiry-form .enquiry-field-error,
.enquiry-error-summary p,
.enquiry-error-summary {
  color: var(--color-danger);
  font-size: var(--type-sm);
  line-height: var(--line-normal);
}

.enquiry-error-summary {
  padding: var(--space-2);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-card);
  background: var(--color-danger-soft);
}

.enquiry-error-summary ul {
  margin-block: var(--space-1) 0;
  padding-inline-start: var(--space-3);
}

.enquiry-availability,
.enquiry-status,
.enquiry-fallback {
  font-size: var(--type-sm);
  line-height: var(--line-normal);
  overflow-wrap: anywhere;
}

.enquiry-status:empty {
  position: absolute;
}

.enquiry-status.is-error {
  color: var(--color-danger);
}

.enquiry-retry {
  min-height: var(--space-6);
  justify-self: start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-blue-dark);
  font: inherit;
  font-size: var(--type-sm);
  text-decoration: underline;
  text-underline-offset: var(--space-05);
  cursor: pointer;
}

.enquiry-call-alternative a,
.enquiry-fallback a {
  display: inline-flex;
  min-height: var(--space-6);
  align-items: center;
  color: var(--color-blue-dark);
}

.enquiry-submit {
  min-height: var(--space-6);
  gap: var(--space-1);
  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard);
}

.enquiry-submit:disabled {
  cursor: not-allowed;
  background: var(--color-muted);
  transform: none;
}

.enquiry-submit svg {
  width: var(--space-3);
  height: var(--space-3);
  flex: 0 0 auto;
}

.enquiry-submit .enquiry-submit-check {
  display: none;
}

.enquiry-submit.is-accepted {
  background: var(--color-success-ink);
}

.enquiry-submit.is-accepted .enquiry-submit-check {
  display: block;
}

.enquiry-submit.is-accepted .enquiry-submit-arrow {
  display: none;
}

/* Final CTA repeats the highest-value actions after the user has seen the offer. */
.final-cta {
  padding: var(--space-7) 0;
  background: var(--color-soft);
}

.final-cta-inner {
  padding: var(--space-7) var(--space-3);
  background: var(--color-blue-dark);
  color: #ffffff;
  border-radius: var(--radius-panel);
  text-align: center;
  box-shadow: var(--shadow);
}

.final-cta-inner p {
  max-width: 620px;
  margin: var(--space-2) auto 0;
  color: #dbeafe;
}

.final-cta .hero-actions {
  margin-right: auto;
  margin-left: auto;
}

.site-footer {
  padding: var(--space-7) 0 var(--space-3);
  background: var(--color-navy);
  color: var(--color-sky);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-4);
  row-gap: var(--space-5);
  align-items: start;
}

.footer-brand-column,
.footer-locations,
.footer-connect {
  grid-column: 1 / -1;
}

.footer-brand-column {
  max-width: 22rem;
}

.footer-summary {
  max-width: 20rem;
  margin: 0;
  line-height: var(--line-relaxed);
}

.footer-grid p,
.footer-grid a,
.footer-grid li {
  color: var(--color-footer-text);
  font-size: var(--type-sm);
  line-height: var(--md-sys-typescale-body-medium-line-height);
}

.footer-grid a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.footer-grid a:hover,
.footer-grid a:focus-visible {
  color: var(--color-surface);
}

.footer-grid h3 {
  margin: 0 0 var(--space-2);
  color: var(--color-footer-heading);
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  line-height: var(--md-sys-typescale-label-medium-line-height);
  letter-spacing: 0;
  text-transform: uppercase;
}

.footer-logo {
  margin-bottom: var(--space-3);
  color: var(--color-surface);
}

.footer-grid .footer-social-list {
  display: flex;
  gap: var(--space-1);
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

.footer-social-list .social-link {
  display: inline-flex;
  min-width: var(--space-6);
  min-height: var(--space-6);
  align-items: center;
  justify-content: center;
  color: var(--color-surface);
  border-radius: var(--radius-card);
}

.footer-social-list .social-link:hover,
.footer-social-list .social-link:focus-visible {
  color: var(--color-surface);
  opacity: 0.86;
}

.social-link--instagram {
  background: var(--color-instagram);
}

.social-link--facebook {
  background: var(--color-facebook);
}

.footer-social-list svg {
  width: var(--space-3);
  height: var(--space-3);
  stroke-width: 2.25;
}

.footer-grid .footer-contact-list {
  margin-top: var(--space-1);
}

.copyright {
  margin: var(--space-4) auto 0;
  padding-top: var(--space-3);
  color: var(--color-footer-muted);
  border-top: 1px solid var(--color-footer-border);
  text-align: center;
  font-size: var(--type-caption);
  line-height: var(--md-sys-typescale-body-small-line-height);
}

/* Mobile bottom bar keeps the most useful links reachable with one thumb. */
.mobile-cta-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: #ffffff;
  border-top: 1px solid var(--color-line);
  box-shadow: 0 -10px 28px rgba(10, 31, 57, 0.12);
}

.mobile-cta-bar a {
  display: inline-flex;
  min-height: var(--space-8);
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  line-height: var(--md-sys-typescale-label-medium-line-height);
  text-decoration: none;
}

.mobile-cta-bar a:hover,
.mobile-cta-bar a:focus-visible {
  color: var(--color-blue-dark);
}

/* Small tablet: repeated card grids get more breathing room in two columns. */
@media (min-width: 560px) {
  .blog-card-grid,
  .related-article-grid,
  .schedule-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-locations ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4);
  }

  .location-discovery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .task-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .segment-grid,
  .js .who-we-serve-section .segment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .who-we-serve-section .section-heading,
  .js .who-we-serve-section .section-heading {
    margin-bottom: var(--space-4);
  }

  .who-desktop-intro,
  .js .who-desktop-intro {
    display: block;
  }

  .who-mobile-intro,
  .js .who-mobile-intro,
  .who-accordion,
  .js .who-accordion {
    display: none;
  }

  .proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Tablet and up: remove mobile bottom padding and introduce multi-column page sections. */
@media (min-width: 721px) {
  .article-cta-inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .article-cta-actions {
    justify-content: flex-end;
  }

  .story-reading-grid {
    grid-template-columns: minmax(0, 0.4fr) minmax(0, 1.6fr);
  }

  .story-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .story-photo-grid--reverse > img {
    grid-column: 2;
  }

  .story-photo-grid--reverse > div {
    grid-column: 1;
    grid-row: 1;
  }

  .story-value-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .story-people-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .store-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }

  .store-faq-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .store-wash-fold .wash-fold-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-dialog {
    width: min(var(--page-content-max), calc(100% - var(--space-6)));
    height: var(--gallery-dialog-height);
    padding: var(--space-3);
    border-radius: var(--radius-panel);
  }
  :root {
    --type-h1: 3.05rem;
    --type-h2: var(--md-sys-typescale-display-small-size);
    --type-lead: 1.0625rem;
  }

  body {
    padding-bottom: 0;
  }

  .container {
    width: min(1160px, calc(100% - var(--space-6)));
  }

  .hero {
    padding: var(--space-10) 0 calc(var(--space-12) + var(--space-2));
  }

  .split-grid,
  .audience-grid,
  .enquiry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Audience/commercial cards share row structure so both panels feel balanced. */
  .audience-grid {
    align-items: stretch;
  }

  .audience-card {
    grid-template-rows:
      minmax(9rem, auto)
      minmax(3rem, auto)
      1fr
      auto;
    gap: var(--space-3);
  }

  .audience-card .panel-copy {
    align-content: start;
  }

  .audience-card .tag-list,
  .audience-card .proof-mini-grid,
  .light-panel .icon-list {
    align-self: start;
  }

  .dark-panel img {
    grid-row: 3 / 5;
    align-self: end;
    margin-top: 0;
  }

  .light-panel .button {
    align-self: end;
    margin-top: 0;
  }

  .commercial-panel .button {
    width: auto;
    align-self: flex-start;
  }

  .community-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .community-block .button {
    width: auto;
    justify-self: start;
  }

  .text-link {
    justify-content: flex-start;
  }

  .task-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .reviews-heading-row {
    flex-direction: row;
    align-items: end;
    justify-content: space-between;
  }

  .section {
    padding: var(--space-8) 0;
  }

  .split-section {
    padding-top: var(--space-7);
  }

  .audience-section {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }

  .mobile-cta-bar {
    display: none;
  }
}

/* Compact desktop: six audience cards form two rows of three. */
@media (min-width: 900px) {
  .segment-grid,
  .js .who-we-serve-section .segment-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Desktop: show the full navigation, hero image, and wider content grids. */
@media (min-width: 981px) {
  .store-wash-fold .wash-fold-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .location-discovery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  :root {
    --type-h1: var(--md-sys-typescale-display-large-size);
  }

  .no-js .site-header {
    position: sticky;
  }

  .nav {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: var(--space-10);
  }

  .menu-toggle,
  .js .menu-toggle {
    display: none;
  }

  .nav-links,
  .js .nav-links {
    position: static;
    display: flex;
    grid-column: auto;
    flex-direction: row;
    width: auto;
    justify-content: end;
    align-items: center;
    gap: var(--space-3);
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    max-height: none;
    overflow: visible;
  }

  .nav-links a {
    padding: 0;
  }

  .nav-contact-item {
    display: block;
  }

  .hero-media {
    display: block;
  }

  .hero-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .franchise-panel {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--space-6);
  }

  .franchise-panel > .segment-card {
    padding: var(--space-6);
  }

  .footer-grid {
    grid-template-columns:
      minmax(0, 1.4fr)
      minmax(6.5rem, 0.7fr)
      minmax(6.5rem, 0.75fr)
      minmax(8.25rem, 0.9fr)
      minmax(9.5rem, 1.05fr);
    column-gap: var(--space-4);
  }

  .footer-brand-column,
  .footer-locations,
  .footer-connect {
    grid-column: auto;
  }

  .footer-locations ul {
    grid-template-columns: 1fr;
  }
}

/* Respect users who prefer less animation or motion. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .task-card,
  .task-icon,
  .blog-card {
    transition: none;
  }

  .enquiry-option,
  .enquiry-submit {
    transition: none;
  }

  .who-accordion-chevron {
    transition: none;
  }

  .js .story-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .task-card:hover,
  .enquiry-option:hover,
  .blog-card:hover {
    transform: none;
  }
}