/* =============================================================
   The Dirty Hamper: shared stylesheet
   Brand palette drawn from the real logo: hot-pink + cyan laundry
   spilling from a hamper, with a lime-green "Dirty" script.
   Bold, playful, high-energy. Light base, deep-ink dark sections.
   Type: Bricolage Grotesque (display) + Plus Jakarta Sans (body).
   ============================================================= */

/* ---------- Fonts (self-hosted) ----------
   Served from our own origin so the Google Fonts stylesheet is not in the
   render path, and so no visitor IP is sent to Google on page load.
   Both files are the latin subset of the variable font, which is why one
   file covers the whole weight range. SIL Open Font License. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/bricolage-grotesque-latin.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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/plus-jakarta-sans-latin.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;
}

/* ---------- Design tokens ---------- */
:root {
  /* Brand magenta ramp (primary) */
  --brand-900: #6b0a44;
  --brand-800: #97105f;   /* text-safe magenta */
  --brand-700: #c1157e;   /* primary action (5.7:1 on white) */
  --brand-600: #de1c97;
  --brand-500: #f23fb0;
  --brand-300: #f894d3;
  --brand-100: #fbd3ec;
  --brand-50:  #fdecf7;

  /* Cyan ramp (secondary, logo blue) */
  --cyan-800: #0a7896;
  --cyan-700: #0c93b6;    /* text-safe cyan */
  --cyan-600: #12abcf;
  --cyan-500: #23c3e4;
  --cyan-100: #c9eff8;
  --cyan-50:  #e8fafd;

  /* Lime ramp (accent, logo "Dirty" script) */
  --lime-800: #3d7010;
  --lime-700: #4f8b15;
  --lime-600: #6ba525;
  --lime-500: #86cf3a;
  --lime-100: #e2f6c8;
  --lime-50:  #f1fbe2;

  /* Deep ink for dark sections */
  --ink-900: #160e19;
  --ink-800: #24182a;

  /* Ink + neutrals (contrast-checked on white) */
  --ink:        #1c141f;   /* headings */
  --body:       #3f3742;   /* body text */
  --muted:      #6a6069;   /* secondary text, ~5.9:1 on white */
  --bg:         #ffffff;
  --surface:    #fdf2f8;   /* faint pink-tinted neutral */
  --surface-2:  #f9e7f2;
  --border:     #efdfea;
  --border-strong: #ddc6d6;

  /* Semantic */
  --ok:    #2f8f1e;
  --warn:  #9a5b16;

  /* Brand gradients + glow */
  --grad-brand: linear-gradient(135deg, var(--brand-600), var(--cyan-500));
  --grad-brand-deep: linear-gradient(140deg, var(--brand-700), var(--cyan-600));
  --glow-brand: 0 10px 30px rgba(193, 21, 126, 0.30);

  /* Typography */
  --font-display: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Radii: one soft system */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* Shadows: tinted toward brand magenta, never pure black */
  --shadow-sm: 0 1px 2px rgba(60, 12, 45, 0.07), 0 2px 6px rgba(60, 12, 45, 0.05);
  --shadow-md: 0 6px 18px rgba(90, 14, 66, 0.10), 0 2px 6px rgba(90, 14, 66, 0.06);
  --shadow-lg: 0 18px 40px rgba(90, 14, 66, 0.16), 0 6px 14px rgba(90, 14, 66, 0.08);

  /* Motion: strong custom curves (Emil) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Layout */
  --container: 1180px;
  --header-h: 86px;

  /* z-scale (semantic, no magic 9999) */
  --z-sticky: 100;
  --z-menu: 200;
  --z-skip: 300;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 12px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  color: var(--body);
  background: var(--bg);
  line-height: 1.65;
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, picture { display: block; max-width: 100%; }
a { color: var(--brand-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
button, input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 800;
  text-wrap: balance;
}
p { text-wrap: pretty; }

h1 { font-size: clamp(2.6rem, 1.75rem + 3.9vw, 4.6rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(2rem, 1.5rem + 2.3vw, 3.15rem); }
h3 { font-size: clamp(1.3rem, 1.12rem + 0.8vw, 1.62rem); }

/* ---------- Accessibility helpers ---------- */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: var(--z-skip);
  background: var(--brand-700);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  transition: top 160ms var(--ease-out);
}
.skip-link:focus { top: 12px; }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.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;
}

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 0.6rem + 2vw, 2rem);
}
.section { padding-block: clamp(3.5rem, 2.5rem + 5vw, 6.5rem); }
.section--tight { padding-block: clamp(2.5rem, 2rem + 3vw, 4rem); }
.section--surface { background: var(--surface); }
.section--ink { background: var(--ink-900); color: #ece3ee; }
.section--ink h1, .section--ink h2, .section--ink h3 { color: #fff; }

.stack > * + * { margin-top: var(--space-4); }
.measure { max-width: 58ch; }
.center { text-align: center; margin-inline: auto; }
.lead { font-size: 1.1rem; color: var(--ink); font-weight: 600; margin-bottom: var(--space-3); }

.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.section-head.center { margin-inline: auto; }
.section-head p { color: var(--muted); font-size: 1.075rem; margin-top: var(--space-3); }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--cyan-800);
  background: var(--cyan-50);
  border: 1px solid var(--cyan-100);
  padding: 6px 13px;
  border-radius: var(--r-pill);
  margin-bottom: var(--space-4);
}
.kicker svg { width: 16px; height: 16px; color: var(--cyan-600); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--grad-brand);
  --btn-fg: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
  padding: 0.92rem 1.55rem;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  text-decoration: none;
  transition: transform 160ms var(--ease-out), background 180ms var(--ease-out),
              box-shadow 180ms var(--ease-out), border-color 180ms var(--ease-out);
  box-shadow: var(--glow-brand);
}
.btn svg { width: 19px; height: 19px; flex: none; }
.btn:hover { background: var(--grad-brand-deep); box-shadow: 0 14px 38px rgba(193, 21, 126, 0.42); transform: translateY(-2px); }
.btn:active { transform: scale(0.97); }

.btn--secondary {
  --btn-bg: #ffffff;
  --btn-fg: var(--brand-800);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.btn--secondary:hover { background: var(--surface); border-color: var(--brand-500); box-shadow: var(--shadow-md); transform: translateY(-2px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--brand-800);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--brand-50); box-shadow: none; transform: translateY(-1px); }

.btn--lg { padding: 1.05rem 1.85rem; font-size: 1.05rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out),
              background 200ms var(--ease-out);
}
.site-header.is-stuck {
  border-bottom-color: var(--border);
  box-shadow: 0 6px 20px rgba(13, 60, 56, 0.06);
}
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: #fff; }
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover { color: var(--ink); }
.brand-mark {
  width: 46px; height: 46px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
  flex: none;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-mark svg { width: 23px; height: 23px; }
.brand small {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-600);
  line-height: 1;
  margin-top: 3px;
}

/* Header lockup: real logo artwork (icon + wordmark), light backgrounds only */
.brand--logo { gap: 14px; }
.brand-logo-img { height: 68px; width: auto; display: block; flex: none; }
.brand-tag {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-700);
  white-space: nowrap;
  padding-top: 2px;
}

/* Primary nav */
.primary-nav { display: flex; align-items: center; gap: clamp(2px, 0.4vw, 6px); }
/* These links live in the nav only for the mobile menu; hide on desktop. */
.primary-nav .menu-cta,
.primary-nav .menu-phone,
.primary-nav .menu-only { display: none; }
.primary-nav a {
  position: relative;
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--body);
  text-decoration: none;
  white-space: nowrap;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  transition: color 160ms var(--ease-out), background 160ms var(--ease-out);
}
.primary-nav a:hover { color: var(--brand-800); background: var(--brand-50); }
.primary-nav a[aria-current="page"] { color: var(--brand-800); }
.primary-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 3px;
  height: 2px;
  background: var(--brand-600);
  border-radius: 2px;
}

.header-actions { display: flex; align-items: center; gap: var(--space-3); }
/* Phone is surfaced in the mobile menu and footer; keep the desktop bar to one CTA. */
.header-actions .header-phone { display: none; }
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.95rem;
  white-space: nowrap;
}
.header-phone svg { width: 17px; height: 17px; color: var(--brand-600); }
.header-phone:hover { color: var(--brand-700); }

/* Hamburger */
.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: #fff;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background 160ms var(--ease-out);
}
.nav-toggle:active { transform: scale(0.95); }
.nav-toggle svg { width: 22px; height: 22px; color: var(--ink); }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ---------- Mobile menu ---------- */
@media (max-width: 1180px) {
  .nav-toggle { display: inline-flex; }
  .header-actions .btn { display: none; }
  .primary-nav .menu-only { display: block; }

  .primary-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: var(--space-4);
    z-index: var(--z-menu);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: transform 220ms var(--ease-out), opacity 200ms var(--ease-out),
                visibility 0s linear 220ms;
  }
  .primary-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform 240ms var(--ease-out), opacity 200ms var(--ease-out);
  }
  .primary-nav a { font-size: 1.05rem; padding: 13px 14px; }
  .primary-nav a[aria-current="page"]::after { display: none; }
  .primary-nav a[aria-current="page"] { background: var(--brand-50); }
  .primary-nav .menu-cta {
    display: flex;
    margin-top: var(--space-3);
    color: #fff;
    background: var(--brand-700);
    text-align: center;
    justify-content: center;
  }
  .primary-nav .menu-cta:hover { background: var(--brand-800); }
  .primary-nav .menu-phone {
    display: flex;
    justify-content: center;
    margin-top: 4px;
    text-align: center;
    color: var(--brand-800);
  }
}
@media (prefers-reduced-motion: reduce) {
  .primary-nav { transition: opacity 120ms linear, visibility 0s; transform: none; }
  .primary-nav.is-open { transform: none; }
}

body.menu-open { overflow: hidden; }
.menu-scrim {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: rgba(13, 40, 38, 0.32);
  opacity: 0;
  visibility: hidden;
  z-index: var(--z-menu);
  transition: opacity 200ms var(--ease-out), visibility 0s linear 200ms;
}
.menu-scrim.is-open { opacity: 1; visibility: visible; transition: opacity 200ms var(--ease-out); }
@media (min-width: 1181px) { .menu-scrim { display: none; } }

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem); overflow: hidden; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 70% at 88% 8%, var(--brand-50), transparent 60%),
    radial-gradient(50% 60% at 6% 95%, var(--cyan-50), transparent 55%),
    radial-gradient(38% 44% at 50% 0%, var(--lime-50), transparent 60%);
  z-index: -1;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}
.hero-copy h1 { margin-bottom: var(--space-3); }
.hero-tagline { margin-bottom: var(--space-4); }
.hero-tagline span {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.7rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--brand-600);
  padding-bottom: 3px;
  background: linear-gradient(90deg, var(--brand-500), var(--cyan-500)) bottom left / 100% 3px no-repeat;
}
.hero-copy .lede { font-size: clamp(1.08rem, 1rem + 0.4vw, 1.28rem); color: var(--muted); max-width: 42ch; }
.hero-copy .btn-row { margin-top: var(--space-6); }
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
.hero-trust div { display: flex; align-items: center; gap: 9px; font-size: 0.9rem; font-weight: 600; color: var(--body); }
.hero-trust svg { width: 20px; height: 20px; color: var(--lime-700); flex: none; }

/* Hero visual: illustrated card */
.hero-visual { position: relative; }
.hero-card {
  position: relative;
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--grad-brand-deep);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  aspect-ratio: 4 / 4.4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(40% 30% at 80% 12%, rgba(255,255,255,0.22), transparent 60%);
  pointer-events: none;
}
.hero-illus { position: relative; z-index: 1; flex: 1; display: grid; place-items: stretch; margin-bottom: var(--space-4); }
.hero-illus svg { width: 78%; height: auto; max-width: 320px; }
.hero-illus img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: 0 14px 34px rgba(28, 8, 22, 0.30);
}
.hero-card-foot { position: relative; z-index: 1; color: #f6eef6; }
.hero-card-foot strong { display: block; font-family: var(--font-display); font-size: 1.35rem; color: #fff; letter-spacing: -0.01em; }
.hero-card-foot span { font-size: 0.92rem; color: #efe4f2; }

.hero-badge {
  position: absolute;
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 12px 15px;
  display: flex;
  align-items: center;
  gap: 11px;
  z-index: 2;
}
.hero-badge svg { width: 30px; height: 30px; flex: none; }
.hero-badge .hb-num { display: block; font-family: var(--font-display); font-weight: 700; color: var(--ink); line-height: 1; font-size: 1.05rem; }
.hero-badge .hb-label { display: block; margin-top: 3px; font-size: 0.78rem; color: var(--muted); line-height: 1.25; }
.hero-badge--tl { top: 6%; left: -7%; }
.hero-badge--br { bottom: -3%; right: -6%; }

/* ---------- Marquee / stat strip ---------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  text-align: center;
}
.stat-strip .stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem);
  color: var(--brand-700);
  letter-spacing: -0.02em;
}
.stat-strip .stat span { font-size: 0.92rem; color: var(--muted); font-weight: 500; }

/* ---------- Feature grid (why choose us) ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: var(--space-4);
}
.feature {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-5);
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out),
              border-color 220ms var(--ease-out);
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-100); }
.feature-icon {
  width: 50px; height: 50px;
  display: grid; place-items: center;
  background: var(--cyan-50);
  color: var(--cyan-800);
  border-radius: 13px;
  margin-bottom: var(--space-4);
}
.feature:nth-child(3n+2) .feature-icon { background: var(--lime-50); color: var(--lime-800); }
.feature:nth-child(3n) .feature-icon { background: var(--brand-50); color: var(--brand-700); }
.feature-icon svg { width: 26px; height: 26px; }
.feature h3 { font-size: 1.18rem; margin-bottom: var(--space-2); }
.feature p { color: var(--muted); font-size: 0.97rem; }

/* ---------- How it works (numbered process) ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 0.5rem + 2vw, 2.5rem);
  counter-reset: step;
  position: relative;
}
.step { position: relative; }
.step-num {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: #fff;
  background: var(--brand-700);
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-4);
  position: relative;
  z-index: 1;
}
.step:nth-child(2) .step-num { background: var(--cyan-700); }
.step:nth-child(3) .step-num { background: var(--lime-700); }
.step h3 { font-size: 1.25rem; margin-bottom: var(--space-2); }
.step p { color: var(--muted); }
/* connector line */
.steps::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 14%;
  right: 14%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--brand-300) 0 8px, transparent 8px 16px);
  z-index: 0;
}

/* ---------- What we clean (split) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}
.split--reverse .split-media { order: 2; }
.split-media { position: relative; }

/* Real logo artwork used as an authenticity stamp on a photo */
.brand-stamp {
  position: absolute;
  z-index: 2;
  top: -20px;
  right: -20px;
  width: clamp(110px, 6vw + 84px, 154px);
  padding: 10px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 34px rgba(22, 14, 25, 0.3), 0 2px 10px rgba(22, 14, 25, 0.14);
  transform: rotate(-8deg);
}
.brand-stamp img { display: block; width: 100%; height: auto; }
.chip-list { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--body);
}
.chip svg { width: 17px; height: 17px; color: var(--brand-600); }

/* Real photographic media */
.media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}
.media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media.is-tall { aspect-ratio: 4 / 5; }
.media.is-tall img { position: absolute; inset: 0; }
/* Product-shot media (transparent PNGs like the branded van) sit on a light field */
.media--contain { background: linear-gradient(150deg, var(--cyan-50), var(--brand-50)); box-shadow: var(--shadow-md); }
.media--contain img { object-fit: contain; padding: clamp(1.25rem, 0.5rem + 3vw, 2.5rem); }
/* Corner brand tab */
.media .media-tag {
  position: absolute;
  z-index: 1;
  left: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.78rem;
  color: #fff; background: rgba(28, 20, 31, 0.62);
  backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
  letter-spacing: 0.01em;
}
.media .media-tag svg { width: 15px; height: 15px; color: var(--lime-500); flex: none; }

/* ---------- Differentiators band ---------- */
.diff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
}
.diff { display: flex; gap: var(--space-3); align-items: flex-start; }
.diff-ic {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: #7fdff2;
}
.diff-ic svg { width: 23px; height: 23px; }
.diff h3 { font-size: 1.08rem; color: #fff; margin-bottom: 4px; }
.diff p { font-size: 0.93rem; color: #c6bac8; }

/* ---------- Pricing ---------- */
.price-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.price-table caption { caption-side: top; text-align: left; color: var(--muted); margin-bottom: var(--space-3); font-size: 0.95rem; }
.price-table th, .price-table td { padding: 1rem 1.15rem; text-align: left; }
.price-table thead th {
  background: var(--ink-900);
  color: #f6eef6;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
}
.price-table tbody tr + tr td { border-top: 1px solid var(--border); }
.price-table tbody tr:hover td { background: var(--surface); }
.price-table .svc { font-weight: 700; color: var(--ink); }
.price-table .turn { color: var(--muted); }
.price-table .rate { font-family: var(--font-display); font-weight: 700; color: var(--brand-700); font-size: 1.15rem; white-space: nowrap; }
.price-table .min { color: var(--muted); font-size: 0.9rem; white-space: nowrap; }
.price-note { color: var(--muted); font-size: 0.9rem; margin-top: var(--space-4); }

/* Pricing cards (alternative layout used on pricing preview) */
.price-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-4); }
.price-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-100); }
.price-card.is-featured { border-color: var(--brand-500); box-shadow: var(--shadow-md); }
.price-card .tag {
  align-self: flex-start;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--brand-700);
  background: var(--brand-50);
  border-radius: var(--r-pill);
  padding: 4px 11px;
  margin-bottom: var(--space-3);
}
.price-card h3 { font-size: 1.2rem; margin-bottom: 4px; }
.price-card .amount { font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: 2.3rem; letter-spacing: -0.02em; line-height: 1; margin: var(--space-3) 0 2px; }
.price-card .amount span { font-size: 1rem; font-weight: 600; color: var(--muted); }
.price-card .min-line { color: var(--muted); font-size: 0.9rem; margin-bottom: var(--space-4); }
.price-card ul { list-style: none; padding: 0; display: grid; gap: 9px; margin-bottom: var(--space-5); }
.price-card li { display: flex; gap: 9px; align-items: flex-start; font-size: 0.95rem; }
.price-card li svg { width: 18px; height: 18px; color: var(--brand-600); flex: none; margin-top: 2px; }
.price-card .btn { margin-top: auto; }

/* ---------- Service cards / commercial grid ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.svc-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-5);
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-100); }
.svc-card .svc-ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: var(--brand-50); color: var(--brand-700); margin-bottom: var(--space-3); }
.svc-card .svc-ic svg { width: 24px; height: 24px; }
.svc-card h3 { font-size: 1.1rem; margin-bottom: 5px; }
.svc-card p { color: var(--muted); font-size: 0.93rem; }

/* ---------- Testimonials ---------- */
.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); }
.quote {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-6) var(--space-5) var(--space-5);
  position: relative;
  display: flex;
  flex-direction: column;
}
.quote .stars { display: flex; gap: 3px; color: #e0a516; margin-bottom: var(--space-3); }
.quote .stars svg { width: 19px; height: 19px; }
.quote blockquote { font-size: 1.08rem; color: var(--ink); line-height: 1.55; font-weight: 500; }
.quote figcaption { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.quote .cite-name { display: block; font-weight: 700; color: var(--ink); font-family: var(--font-display); }
.quote .cite-role { display: block; margin-top: 2px; color: var(--muted); font-size: 0.9rem; }

/* ---------- Service area ---------- */
.city-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-2) var(--space-3);
  list-style: none;
  padding: 0;
}
.city-grid li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--body);
}
.city-grid svg { width: 16px; height: 16px; color: var(--cyan-600); flex: none; }

/* ZIP lookup */
.zip-lookup {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.zip-form { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.zip-form .field { flex: 1 1 180px; }
.zip-result {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 0.95rem;
  display: none;
}
.zip-result.is-shown { display: flex; align-items: center; gap: 10px; }
.zip-result svg { width: 20px; height: 20px; flex: none; }
.zip-result.ok { background: #e8f6ee; color: var(--ok); border: 1px solid #bfe6cd; }
.zip-result.no { background: #fdf1e3; color: var(--warn); border: 1px solid #f3d9b6; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-weight: 600; font-size: 0.92rem; color: var(--ink); }
.field .req { color: var(--brand-600); }
.field .hint { font-size: 0.82rem; color: var(--muted); font-weight: 500; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 0.82rem 1rem;
  background: #fff;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input::placeholder, .field textarea::placeholder { color: #5c6b67; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}
.field .error-msg { font-size: 0.82rem; color: #b4341f; font-weight: 600; display: none; }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: #d3492f; }
.field.has-error .error-msg { display: block; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-grid .full { grid-column: 1 / -1; }

.form-success {
  display: none;
  align-items: flex-start;
  gap: 13px;
  background: #e8f6ee;
  border: 1px solid #bfe6cd;
  color: #14572f;
  border-radius: var(--r-md);
  padding: var(--space-4) var(--space-5);
}
.form-success.is-shown { display: flex; }
.form-success svg { width: 24px; height: 24px; color: var(--ok); flex: none; margin-top: 2px; }
.form-success strong { display: block; color: var(--ok); font-family: var(--font-display); }

/* Shown only when the submission actually failed, so nobody is told their
   request went through when it did not. */
.form-error {
  display: none;
  align-items: flex-start;
  gap: 13px;
  background: #fdecec;
  border: 1px solid #f3c9c9;
  color: #7a1f1f;
  border-radius: var(--r-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}
.form-error.is-shown { display: flex; }
.form-error svg { width: 24px; height: 24px; color: #b32020; flex: none; margin-top: 2px; }
.form-error strong { display: block; color: #b32020; font-family: var(--font-display); }
.form-error a { color: #b32020; font-weight: 700; }

/* ---------- FAQ (native details/summary) ---------- */
.faq-list { display: grid; gap: var(--space-3); max-width: 760px; margin-inline: auto; }
.faq {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.faq[open] { border-color: var(--brand-100); box-shadow: var(--shadow-sm); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 1.15rem 1.3rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  color: var(--brand-700);
  transition: transform 220ms var(--ease-out);
}
.faq[open] summary .chev { transform: rotate(180deg); }
.faq .faq-body { padding: 0 1.3rem 1.3rem; color: var(--muted); }
.faq .faq-body p + p { margin-top: var(--space-3); }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  border-radius: var(--r-xl);
  padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  background: var(--grad-brand-deep);
  color: #ece3ee;
  overflow: hidden;
  text-align: center;
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(50% 60% at 85% 10%, rgba(255,255,255,0.14), transparent 60%),
    radial-gradient(45% 55% at 8% 100%, rgba(134, 207, 58, 0.30), transparent 60%);
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; margin-bottom: var(--space-3); }
.cta-band p { max-width: 52ch; margin-inline: auto; color: #f2e8f2; }
.cta-band .btn-row { justify-content: center; margin-top: var(--space-6); }
.cta-band .btn--secondary { --btn-fg: var(--brand-900); border-color: transparent; }
.cta-band .btn--ghost { --btn-fg: #fff; border: 1.5px solid rgba(255,255,255,0.4); }
.cta-band .btn--ghost:hover { background: rgba(255,255,255,0.12); }

/* ---------- Contact info / map ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: start; }
.info-list { list-style: none; padding: 0; margin-top: var(--space-5); display: grid; gap: var(--space-4); }
.info-list li { display: flex; gap: var(--space-3); align-items: flex-start; }
.info-list li > span { display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
.info-ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: var(--lime-50); color: var(--lime-800); border-radius: 12px; }
.info-ic svg { width: 22px; height: 22px; }
.info-ic--cyan { background: var(--cyan-50); color: var(--cyan-800); }
.info-ic--brand { background: var(--brand-50); color: var(--brand-700); }
.info-list .label { display: block; font-weight: 700; color: var(--ink); font-family: var(--font-display); font-size: 1.02rem; }
.info-list a { font-weight: 600; text-decoration: none; }
.info-list a:hover { text-decoration: underline; }
.info-list .muted { color: var(--muted); font-size: 0.95rem; }

.map-embed {
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  line-height: 0;
}
.map-embed iframe { display: block; width: 100%; height: 320px; border: 0; }

/* Hours table */
.hours { width: 100%; border-collapse: collapse; margin-top: var(--space-3); }
.hours th, .hours td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 0.96rem; }
.hours th { font-weight: 600; color: var(--body); }
.hours td { color: var(--muted); text-align: right; }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: none; }
.hours .closed { color: var(--warn); font-weight: 600; }

/* ---------- Footer ---------- */
.site-footer { position: relative; background: var(--ink-900); color: #cabecc; padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) var(--space-6); }
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-600), var(--cyan-500), var(--lime-500));
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.site-footer .brand { color: #fff; }
.site-footer .brand small { color: var(--brand-300); }
.site-footer .brand-mark { background: rgba(255,255,255,0.12); }
.footer-about p { color: #b7abb9; font-size: 0.95rem; margin-top: var(--space-4); max-width: 34ch; }
.footer-col h3 { font-family: var(--font-display); color: #fff; font-size: 1.02rem; margin-bottom: var(--space-4); letter-spacing: -0.01em; }
.footer-col ul { list-style: none; padding: 0; display: grid; gap: 11px; }
.footer-col a { color: #c3b7c5; text-decoration: none; font-size: 0.95rem; transition: color 150ms var(--ease-out); }
.footer-col a:hover { color: #fff; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; color: #c3b7c5; margin-bottom: 11px; }
.footer-contact svg { width: 18px; height: 18px; color: var(--brand-300); flex: none; margin-top: 3px; }
.footer-contact a { color: #c3b7c5; }

.woman-owned {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-4);
  padding: 7px 13px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-pill);
  font-size: 0.82rem;
  font-weight: 600;
  color: #ecdff0;
}
.woman-owned svg { width: 16px; height: 16px; color: #f0b8c8; }

.socials { display: flex; gap: 10px; margin-top: var(--space-4); }
.socials a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #d9cddb;
  transition: background 160ms var(--ease-out), transform 160ms var(--ease-out), color 160ms var(--ease-out);
}
.socials a:hover { background: var(--brand-600); color: #fff; transform: translateY(-2px); }
.socials a:active { transform: scale(0.95); }
.socials svg { width: 19px; height: 19px; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-6);
  font-size: 0.85rem;
  color: #9b909e;
}
.footer-bottom .fb-links { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.footer-bottom a { color: #9b909e; text-decoration: none; }
.footer-bottom a:hover { color: #fff; }

/* ---------- Page hero (interior pages) ---------- */
.page-hero { background: var(--surface); border-bottom: 1px solid var(--border); padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.page-hero .crumbs { font-size: 0.85rem; color: var(--muted); margin-bottom: var(--space-3); }
.page-hero .crumbs a { text-decoration: none; }
.page-hero .crumbs a:hover { text-decoration: underline; }
.page-hero h1 { margin-bottom: var(--space-3); }
.page-hero p { color: var(--muted); font-size: 1.1rem; max-width: 58ch; }

/* ---------- Scroll reveal (enhances an already-visible default) ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out); }
.js .reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.js .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 70ms; }
.js .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 140ms; }
.js .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 210ms; }
.js .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 280ms; }
.js .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 350ms; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn:active, .nav-toggle:active, .socials a:active { transform: none; }
  .btn:hover, .btn--secondary:hover, .btn--ghost:hover { transform: none; }
  .feature:hover, .svc-card:hover, .price-card:hover, .socials a:hover { transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 460px; margin-inline: auto; width: 100%; order: -1; }
  .hero-badge--tl { left: 2%; }
  .hero-badge--br { right: 2%; }
  .split { grid-template-columns: 1fr; }
  .split--reverse .split-media { order: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-4); }
  .brand-stamp { top: -14px; right: 12px; width: clamp(92px, 20vw, 118px); }
}
@media (max-width: 720px) {
  .steps { grid-template-columns: 1fr; gap: var(--space-5); }
  .steps::before { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .price-table { display: block; overflow-x: auto; white-space: nowrap; }
}
@media (max-width: 560px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .btn-row .btn { flex: 1 1 auto; }
}
@media (max-width: 380px) {
  .hero-badge { display: none; }
  .stat-strip { grid-template-columns: 1fr 1fr; }
}

/* ============ LEGAL PROSE (privacy, terms) ============ */
.legal-prose { max-width: 68ch; }
.legal-prose h2 {
  font-size: 1.25rem;
  margin: var(--space-8, 3rem) 0 var(--space-3);
  padding-top: var(--space-5, 1.5rem);
  border-top: 1px solid var(--brand-100);
}
.legal-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-prose p { color: var(--muted); margin: 0 0 var(--space-4); text-wrap: pretty; }
.legal-list { margin: 0 0 var(--space-4); padding-left: 1.15rem; color: var(--muted); }
.legal-list li { margin-bottom: var(--space-2); }
.legal-prose a { color: var(--brand-700); }