/* ==========================================================================
   My Hair Helpers — Design System
   Tokens sourced from DESIGN.md (reverse-engineered from the live Salient site).
   Zero dependencies. No framework. No preprocessor.
   ========================================================================== */

/* --- Fonts: self-hosted WOFF2 subsets (see _tools/fetch-fonts.mjs) --------- */

@font-face {
  font-family: 'Fredoka';
  src: url('../assets/fonts/fredoka-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2122, U+2190-21BB;
}
@font-face {
  font-family: 'Fredoka';
  src: url('../assets/fonts/fredoka-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2122;
}
@font-face {
  font-family: 'Nunito';
  src: url('../assets/fonts/nunito-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2122;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../assets/fonts/opensans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2122;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../assets/fonts/opensans-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2122;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Brand */
  --c-purple: #9241a7;
  --c-purple-deep: #8c3d99;
  --c-purple-vivid: #8224e3;
  --c-purple-tint: #f5eef8;

  --c-yellow: #ffe500;
  --c-yellow-warm: #fce300;
  --c-gold: #f4c322;

  --c-cyan: #32d6ff;
  --c-cyan-deep: #2ac4ea;
  --c-cyan-tint: #eafaff;

  --c-green: #29a83c;
  --c-green-deep: #2ba83d;
  --c-green-tint: #eef8f0;

  /* Neutrals */
  --c-ink: #333;
  --c-ink-deep: #2d2d2d;
  --c-slate: #6b6b6b;
  --c-border: #ddd;
  --c-surface: #f1f1f1;
  --c-surface-warm: #ecebe9;
  --c-white: #fff;

  /* Type families */
  --font-display: 'Fredoka', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-heading: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Type scale — fluid, clamps between mobile and desktop from DESIGN.md */
  --t-micro: 0.75rem;
  --t-caption: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --t-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --t-card: clamp(1.1875rem, 1.12rem + 0.34vw, 1.3125rem);
  --t-h4: clamp(1.3125rem, 1.23rem + 0.42vw, 1.5rem);
  --t-h3: clamp(1.5625rem, 1.42rem + 0.73vw, 1.875rem);
  --t-h2: clamp(1.875rem, 1.55rem + 1.63vw, 2.5rem);
  --t-h1: clamp(2.125rem, 1.66rem + 2.32vw, 3.25rem);
  --t-hero: clamp(2.375rem, 1.79rem + 2.93vw, 3.875rem);

  /* Spacing — 8px base */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Section rhythm — tighter on mobile, generous on desktop */
  --section-y: clamp(3rem, 2rem + 5vw, 6rem);

  /* Shape */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 2px 6px rgb(0 0 0 / 6%);
  --shadow-md: 0 6px 18px rgb(0 0 0 / 9%);
  --shadow-lg: 0 14px 40px rgb(146 65 167 / 16%);

  /* Layout */
  --container: 1180px;
  --gutter: clamp(1.25rem, 0.9rem + 1.7vw, 2rem);

  --transition: 180ms ease;
}

/* --- Reset ---------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--c-ink);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

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

button { cursor: pointer; }

h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

p, li { overflow-wrap: break-word; }

ul[class], ol[class] { list-style: none; padding: 0; }

/* --- Typography ----------------------------------------------------------- */

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--c-ink-deep);
}

.hero-title {
  font-family: var(--font-display);
  font-size: var(--t-hero);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: 1.18;
  color: var(--c-ink-deep);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.25;
  color: var(--c-ink-deep);
}

h4, .h4 {
  font-family: var(--font-heading);
  font-size: var(--t-h4);
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-ink-deep);
}

/* Uppercase eyebrow — a brand signature from the live site */
.eyebrow {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-purple);
  margin-bottom: var(--s-3);
}

.lede {
  font-size: var(--t-body-lg);
  color: var(--c-ink);
}

.muted { color: var(--c-slate); }

.text-center { text-align: center; }

a {
  color: var(--c-purple);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--c-purple-deep); }

/* Visible focus for keyboard users — accessibility requirement */
:focus-visible {
  outline: 3px solid var(--c-purple);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--s-4);
  z-index: 200;
  padding: var(--s-3) var(--s-5);
  background: var(--c-purple);
  color: var(--c-white);
  border-radius: 0 0 var(--r-md) var(--r-md);
  text-decoration: none;
  font-weight: 700;
}
.skip-link:focus { top: 0; color: var(--c-white); }

/* --- Layout --------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tint { background: var(--c-surface); }
.section--warm { background: var(--c-surface-warm); }
.section--purple {
  background: var(--c-purple);
  color: var(--c-white);
}
.section--purple h2,
.section--purple h3,
.section--purple .eyebrow { color: var(--c-white); }
/* .lede carries its own --c-ink, which is 2.12:1 on purple. Inherit instead. */
.section--purple .lede,
.section--purple p { color: var(--c-white); }
/* DESIGN.md rule 3: yellow is never text. On purple it measures 3.76:1 and fails AA. */
.section--purple a:not(.btn) { color: var(--c-white); text-decoration: underline; }

.section-head {
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: var(--s-7);
  text-align: center;
}
.section-head > p { margin-top: var(--s-4); }

.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.stack > * + * { margin-top: var(--s-4); }

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;               /* tap target — mobile UX / LPE */
  padding: var(--s-3) var(--s-6);
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  transition: background-color var(--transition), border-color var(--transition),
              color var(--transition), transform var(--transition),
              box-shadow var(--transition);
}

.btn--primary {
  background: var(--c-purple);
  color: var(--c-white);
}
.btn--primary:hover {
  background: var(--c-purple-deep);
  color: var(--c-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn--secondary {
  background: transparent;
  border-color: var(--c-purple);
  color: var(--c-purple);
}
.btn--secondary:hover {
  background: var(--c-purple);
  color: var(--c-white);
}

/* Phone CTA — highest-value action on the site. Yellow is reserved for this. */
.btn--call {
  background: var(--c-yellow);
  color: var(--c-ink-deep);
}
.btn--call:hover {
  background: var(--c-yellow-warm);
  color: var(--c-ink-deep);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn--ghost-light {
  background: transparent;
  border-color: var(--c-white);
  color: var(--c-white);
}
.btn--ghost-light:hover {
  background: var(--c-white);
  color: var(--c-purple);
}

.btn--lg { min-height: 56px; padding: var(--s-4) var(--s-7); font-size: 1rem; }
.btn--block { display: flex; width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.btn-row--center { justify-content: center; }

/* --- Header --------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 76px;
}

.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 64px; width: auto; }

.nav-toggle {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  background: transparent;
  border: 2px solid var(--c-border);
  border-radius: var(--r-sm);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--c-purple);
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list a {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--c-ink-deep);
  text-decoration: none;
  padding-block: var(--s-2);
  border-bottom: 2px solid transparent;
}
.nav-list a:hover,
.nav-list a[aria-current='page'] {
  color: var(--c-purple);
  border-bottom-color: var(--c-purple);
}

.header-actions { display: flex; align-items: center; gap: var(--s-3); }

/* --- Nav dropdown (Locations → four counties) -----------------------------
   Disclosure pattern: a real <button> with aria-expanded, not a hover menu.
   Hover-only menus cannot be opened by touch and are awkward by keyboard, and
   this one holds the four highest-intent pages on the site. */
.has-sub { position: relative; }
.sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding-block: var(--s-2);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--c-ink-deep);
}
.sub-toggle:hover, .sub-toggle[aria-expanded='true'] { color: var(--c-purple); }
.sub-toggle svg { transition: transform 0.2s ease; }
.sub-toggle[aria-expanded='true'] svg { transform: rotate(180deg); }
.sub-list { display: none; list-style: none; margin: 0; padding: 0; }
/* :focus-within means tabbing into the menu reveals it even with JS disabled. */
.sub-toggle[aria-expanded='true'] + .sub-list,
.has-sub:focus-within .sub-list { display: block; }
@media (prefers-reduced-motion: reduce) { .sub-toggle svg { transition: none; } }

/* Mobile navigation */
@media (max-width: 979px) {
  .nav-toggle { display: flex; }
  .site-nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--c-white);
    border-bottom: 1px solid var(--c-border);
    box-shadow: var(--shadow-md);
    padding: var(--s-4) var(--gutter) var(--s-6);
  }
  .site-nav[data-open='true'] { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list li + li { border-top: 1px solid var(--c-border); }
  .nav-list a { display: block; padding: var(--s-4) 0; border-bottom: none; }
  .header-actions .btn--secondary { display: none; }
}

@media (min-width: 980px) {
  .nav-toggle { display: none; }
  .site-nav { display: block !important; }

  /* Desktop: the submenu floats over the page. On mobile it stays in flow and
     simply pushes the rest of the nav down — a floating panel inside an already
     open mobile drawer is how menus end up unreachable on small screens. */
  .sub-list {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 15rem;
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    padding: var(--s-2);
    z-index: 60;
  }
  .sub-list a {
    display: block;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-sm);
    border-bottom: none;
    white-space: nowrap;
  }
  .sub-list a:hover { background: var(--c-purple-tint); }
}

@media (max-width: 979px) {
  .sub-toggle { width: 100%; justify-content: space-between; padding: var(--s-4) 0; }
  .sub-list { padding-bottom: var(--s-3); }
  .sub-list a { padding: var(--s-3) 0 var(--s-3) var(--s-4); font-size: 0.9375rem; }
  .sub-list li + li { border-top: 1px solid var(--c-border); }
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem);
  background: linear-gradient(160deg, var(--c-purple-tint) 0%, var(--c-white) 62%);
}

.hero-grid {
  display: grid;
  gap: var(--s-7);
  align-items: center;
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--s-8); }
}

.hero-title { color: var(--c-ink-deep); }
.hero-title strong { color: var(--c-purple); font-weight: 500; }

.hero-sub {
  margin-top: var(--s-5);
  font-size: var(--t-body-lg);
  max-width: 56ch;
}

.hero-media img {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--c-ink-deep);
  box-shadow: var(--shadow-sm);
}
.badge svg { color: var(--c-green); flex-shrink: 0; }

/* --- Trust list (green checks) — core conversion component ---------------- */

.trust-list { display: grid; gap: var(--s-3); }

.trust-list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--s-3);
  align-items: start;
}
.trust-list svg {
  color: var(--c-green);
  margin-top: 5px;
  flex-shrink: 0;
}

/* --- Cards ---------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-purple);
}

.card h3, .card h4 { margin-bottom: var(--s-3); }
.card p { margin-bottom: var(--s-4); }
.card .btn { margin-top: auto; align-self: flex-start; }

.card-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--s-4);
  border-radius: var(--r-pill);
  background: var(--c-purple-tint);
  color: var(--c-purple);
}
.card-icon--green { background: var(--c-green-tint); color: var(--c-green); }
.card-icon--cyan { background: var(--c-cyan-tint); color: var(--c-cyan-deep); }

/* Service cards use the client's own 2025 illustrated icons rather than line icons.
   Constrained by HEIGHT so the four line up regardless of each icon's own aspect ratio.
   The width/height attributes stay on the <img> so the box is reserved before decode — CLS 0. */
.card--service { text-align: center; }
.card--service picture { display: block; }
.card--service img { height: 116px; width: auto; margin: 0 auto var(--s-4); }
.card--service .btn { margin-top: auto; }
.card--service { display: flex; flex-direction: column; }

/* Mission / charity band */
.mission { text-align: center; }
.mission-logo { height: 124px; width: auto; margin: 0 auto var(--s-5); }
.mission blockquote { max-width: 62ch; margin-inline: auto; font-size: var(--t-body-lg); }
.charity-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-4); margin-top: var(--s-7); }
.charity-strip img { width: 100%; height: 200px; object-fit: cover; border-radius: var(--r-md); }

/* Service card with image */
.card--media { padding: 0; overflow: hidden; }
.card--media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card--media .card-body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }

/* --- Location card -------------------------------------------------------- */

.location-card {
  padding: var(--s-5);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-purple);
  border-radius: var(--r-md);
}
.location-card h3 {
  font-family: var(--font-heading);
  font-size: var(--t-card);
  font-weight: 700;
  margin-bottom: var(--s-2);
}
.location-card address {
  font-style: normal;
  color: var(--c-slate);
  margin-bottom: var(--s-3);
}

/* --- Stats ---------------------------------------------------------------- */

.stat { text-align: center; }
.stat dt {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 500;
  color: var(--c-purple);
  line-height: 1;
}
.section--purple .stat dt { color: var(--c-yellow); }
.stat dd {
  margin: var(--s-2) 0 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- Testimonial ---------------------------------------------------------- */

.testimonial {
  padding: var(--s-6);
  background: var(--c-white);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.testimonial blockquote { font-size: var(--t-body-lg); }
.testimonial figcaption {
  margin-top: var(--s-4);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--c-purple);
}
.stars { display: flex; gap: 2px; color: var(--c-gold); margin-bottom: var(--s-3); }

/* --- FAQ (native disclosure, no JS) --------------------------------------- */

.faq-item {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-white);
}
.faq-item + .faq-item { margin-top: var(--s-3); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--c-ink-deep);
  list-style: none;
  min-height: 48px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-purple);
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item > div { padding: 0 var(--s-5) var(--s-5); }

/* --- Forms ---------------------------------------------------------------- */

.field { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.field label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
}
.field .req { color: var(--c-purple); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  background: var(--c-white);
  border: 2px solid var(--c-border);
  border-radius: var(--r-sm);
  transition: border-color var(--transition);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--c-purple);
  outline: none;
}
.field input:user-invalid,
.field textarea:user-invalid { border-color: #c0392b; }

.field-hint { font-size: var(--t-caption); color: var(--c-slate); }

/* Honeypot — must stay visually hidden but not display:none (bots detect that) */
.hp-field {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* --- Breadcrumbs ---------------------------------------------------------- */

.breadcrumb {
  padding-block: var(--s-4);
  font-size: var(--t-caption);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
  margin: 0; padding: 0;
}
.breadcrumb li + li::before {
  content: '/';
  margin-right: var(--s-2);
  color: var(--c-border);
}
.breadcrumb a { color: var(--c-slate); }
.breadcrumb a:hover { color: var(--c-purple); }

/* --- Call bar (sticky mobile CTA) ----------------------------------------- */

.call-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  gap: var(--s-2);
  padding: var(--s-2);
  background: var(--c-white);
  border-top: 1px solid var(--c-border);
  box-shadow: 0 -4px 16px rgb(0 0 0 / 8%);
}
.call-bar .btn { flex: 1; font-size: 0.8125rem; padding-inline: var(--s-3); }

@media (min-width: 768px) { .call-bar { display: none; } }
@media (max-width: 767px) { body { padding-bottom: 72px; } }

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  padding-block: var(--s-8) var(--s-6);
  background: var(--c-ink-deep);
  color: #cfcfcf;
}
.site-footer h2, .site-footer h3 {
  color: var(--c-white);
  font-family: var(--font-heading);
  font-size: var(--t-card);
  font-weight: 700;
  margin-bottom: var(--s-4);
}
.site-footer a { color: #cfcfcf; text-decoration: none; }
.site-footer a:hover { color: var(--c-yellow); text-decoration: underline; }
/* .site-footer a would otherwise repaint the yellow call button light grey — 1.22:1. */
.site-footer .btn--call, .site-footer .btn--call:hover { color: var(--c-ink-deep); }
.site-footer ul { display: grid; gap: var(--s-2); list-style: none; padding: 0; }

.footer-grid {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.footer-bottom {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid rgb(255 255 255 / 12%);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--t-caption);
}

/* --- City links grid ------------------------------------------------------ */

.city-links {
  display: grid;
  gap: var(--s-2) var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  list-style: none;
  padding: 0;
  font-size: var(--t-caption);
}

/* --- Utilities ------------------------------------------------------------ */

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-6 { margin-bottom: var(--s-6); }

/* --- Motion preferences --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover,
  .btn:hover { transform: none; }
}

/* --- Print ---------------------------------------------------------------- */

@media print {
  .site-header, .call-bar, .site-footer, .btn { display: none !important; }
  body { color: #000; }
}


/* ==========================================================================
   COUNTY PAGES — Orange, San Diego, Riverside, Los Angeles
   Merged in from the standalone ads build 2026-08-18, when the two sites were
   consolidated into one. These four pages replaced /locations/.

   Everything below was previously inlined per-page in build-adsite.mjs. It lives
   here now because build-pages.mjs renders every page through one shell and does
   not inject per-page <style>. Same rules, one copy, cached across the site.

   DESIGN.md rules still apply, and two of them were learned the hard way here:
     · Never let a container rule repaint a .btn (shipped twice at 1.22:1).
     · GREEN #29a83c is 3.11:1 on white — icon, border and fill only, never text.
   ========================================================================== */
/* Landing-page-only styles. Small enough to inline; not worth a second request. */
/* Logo. 56px → 64px on mobile, 76px from 900px up.
   The source is 190x95, so at 76px tall it renders 152px wide — still inside the
   1x asset, with logo-380 covering 2x displays, so it grows without softening.
   Kept smaller on mobile on purpose: the header sits directly above the form,
   and every pixel of header height pushes the thing that converts further down
   the fold. The width/height attributes stay 190x95 — they are what reserves the
   box and keeps CLS at zero, and the declared height was already wrong once on
   this project (190x77) which reflowed the header on every page. */
@media(min-width:900px){.lp-hero{padding-block:clamp(2rem,1.2rem + 4vw,3.5rem);background:linear-gradient(160deg,var(--c-purple-tint) 0%,#fff 62%)}
.lp-grid{display:grid;gap:2rem;align-items:start}
/* Mobile-first base: single column, so the DOM order IS the visual order —
   hero copy, then the booking form, then the Q&A underneath it. Declared BEFORE
   the media query so the desktop rules below win on equal specificity. */
.lp-faq-inline{margin-top:2.75rem}
.lp-faq-inline h2{font-size:clamp(1.35rem,1.2rem + .6vw,1.75rem)}

@media(min-width:900px){
  /* Two columns, two rows:  [ hero copy | form ]
                             [ Q&A       | form ]

     Placement is explicit grid-area, NOT the order property — see
     treatmentFaqInline(). DOM order stays copy → form → Q&A, which is already
     right for mobile and for a screen reader; desktop only repositions.

     THE FORM SPANS BOTH ROWS, and that span is the whole trick. Without it,
     row 1 contains both the copy AND the 9-field form, so row 1 is as tall as
     the form — and the Q&A, sitting in row 2, does not begin until below the
     entire form. That leaves a large dead gap under the hero copy and the Q&A
     stops reading as part of the hero at all. Spanning the form means row 1 is
     only as tall as the copy, so the Q&A starts directly beneath it. */
  /* ROW SIZING IS LOAD-BEARING. The form spans rows 1-2 and is much taller than
     the hero copy. With "auto auto", the browser distributes the spanning item's
     surplus height ACROSS both rows it spans — so row 1 grows far beyond the
     copy it contains, and the Q&A gets pushed down behind a large empty gap.
     "max-content 1fr" pins row 1 to exactly the height of the copy and sends all
     surplus to row 2, so the Q&A starts immediately beneath the text. 1fr means
     minmax(auto,1fr), so a Q&A taller than the form still grows rather than
     clipping. */
  .lp-grid{grid-template-columns:1.05fr .95fr;gap:0 3rem;grid-template-rows:max-content 1fr}
  .lp-hero-copy{grid-column:1;grid-row:1}
  .lp-form-card{grid-column:2;grid-row:1 / span 2;align-self:start}
  /* Gap between the end of the hero copy and the Q&A heading.
     History, because it was adjusted blind twice: 2.5rem → 1.5rem (tight) →
     2rem, which was only an 8px step and read as no change at all. 3rem is a
     visible increment. Anything under about 0.75rem of difference is not worth
     shipping as a "spacing tweak" — nobody can see it. */
  .lp-faq-inline{grid-column:1;grid-row:2;margin-top:3rem}
}
.lp-form-card{background:#fff;border:1px solid var(--c-border);border-radius:var(--r-lg);padding:clamp(1.25rem,1rem + 1vw,1.75rem);box-shadow:var(--shadow-md)}
.lp-form-card h2{font-size:1.375rem;margin-bottom:.25rem}
.lp-or{display:flex;align-items:center;gap:.75rem;margin:1.25rem 0;color:var(--c-slate);font-size:.875rem}
.lp-or::before,.lp-or::after{content:"";flex:1;height:1px;background:var(--c-border)}
.lp-bigcall{display:flex;flex-direction:column;align-items:center;gap:.2rem;background:var(--c-yellow);color:var(--c-ink-deep);border-radius:var(--r-md);padding:.9rem 1rem;text-decoration:none;font-family:var(--font-heading);font-weight:700}
.lp-bigcall span{font-size:1.5rem;letter-spacing:.01em}
.lp-bigcall small{font-weight:400;font-size:.8125rem;opacity:.8}
.city-cloud{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.city-cloud li{list-style:none;font-size:.8125rem;padding:.3rem .7rem;border:1px solid var(--c-border);border-radius:var(--r-pill);color:var(--c-slate)}

/* ── Brand colour ───────────────────────────────────────────────────────────
   DESIGN.md rules, all four of which this block obeys:
     1. Purple is the only colour allowed on a primary CTA.
     2. GREEN MEANS "NATURAL". Reserve it for the chemical-free promise,
        guarantees and checkmarks — never as a generic success colour.
     3. Yellow is never text (1.2:1 on white). Background/fill only.
     5. A container rule must NEVER repaint a .btn. Two shipped bugs came from
        this exact mistake (1.22:1 and 1.27:1), so every link rule below is
        scoped a:not(.btn).

   Measured, because this project has a history of introducing a contrast bug
   while fixing another:
     purple #9241a7 on white ............. 5.90:1  AA pass
     purple #9241a7 on tint #f5eef8 ...... 5.22:1  AA pass
     ink    #333333 on tint #f5eef8 ..... 11.07:1  AAA
     slate  #6b6b6b on tint #f5eef8 ...... 4.68:1  AA pass, but thin — which is
             why the city chips below use --c-ink rather than --c-slate.
     GREEN  #29a83c on white ............. 3.11:1  ✗ FAILS AA for text.
             Green is therefore used ONLY as icon, border and tint background
             here. It never carries a word. */

/* Tinted sections carry the brand instead of neutral grey. --c-surface (#f1f1f1)
   is correct for the 84-page site's long-form reading; on a five-page paid site
   the purple is what makes it recognisably theirs at a glance. */
/* Scoped: on the ads build every page was a county page, so this was global.
   Site-wide it would repaint every tinted section on all 87 pages. */
.county .section--tint{background:var(--c-purple-tint)}

/* Section headings in brand purple. Scoped so the white-on-purple closing block
   is untouched — .section--purple already sets its own h2 colour. */
/* Scoped for the same reason — this would otherwise recolour every h2 on the site. */
.county .section:not(.section--purple) h2{color:var(--c-purple)}


/* GREEN = the chemical-free promise, per rule 2. This is the badge that carries
   it, so this is the badge that gets the colour. */
.badge--natural{background:var(--c-green-tint);border-color:var(--c-green)}

/* Town chips: white on the purple tint so they read as objects, purple hairline,
   ink text for contrast headroom. */
.city-cloud li{background:#fff;border-color:#e0cfe6;color:var(--c-ink)}

/* FAQ cards. .faq-item supplies the white card and the purple +/- expander from
   styles.css; this only tints the question row so the stack reads as one block. */
.faq-item summary:hover,.faq-item summary:focus-visible{background:var(--c-purple-tint);border-radius:var(--r-md)}
.faq-item[open] summary{color:var(--c-purple)}

/* The form card is the conversion target — give it a purple edge so the eye lands
   there, matching the purple left border location cards already carry. */
.lp-form-card{border-top:4px solid var(--c-purple)}

/* ── Family slideshow ───────────────────────────────────────────────────────
   Scroll-snap does the work. Fixed 1:1 slides mean the layout is settled before
   any photo decodes, so this adds nothing to CLS. */
.family-sec{background:var(--c-purple-tint)}
.fam{position:relative;margin-top:1.5rem}
.fam-track{display:flex;gap:1rem;list-style:none;padding:.25rem;margin:0;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.fam-track:focus-visible{outline:2px solid var(--c-purple);outline-offset:3px;border-radius:var(--r-md)}
.fam-slide{flex:0 0 min(280px,72vw);scroll-snap-align:center}
.fam-slide img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow-sm)}
.fam-ctl{display:flex;gap:.5rem;justify-content:center;margin-top:1rem}
.fam-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--c-border);background:#fff;color:var(--c-purple);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,transform .2s ease}
.fam-btn:hover{border-color:var(--c-purple);background:var(--c-purple-tint);transform:translateY(-1px)}
.fam-btn:focus-visible{outline:2px solid var(--c-purple);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  .fam-track{scroll-behavior:auto}
  .fam-btn{transition:none}
  .fam-btn:hover{transform:none}
}

/* Appointment-time radios. A real fieldset/legend, unlike the live form's bare
   inputs — and 44px rows so a thumb can hit them. */
.field--radios{border:0;padding:0;margin-bottom:1rem}
.field--radios legend{font-family:var(--font-heading);font-weight:700;font-size:.9375rem;color:var(--c-ink-deep);padding:0;margin-bottom:.4rem}
.radio-row{display:flex;align-items:center;gap:.6rem;min-height:44px;padding:0 .7rem;border:1px solid var(--c-border);border-radius:var(--r-md);cursor:pointer;font-size:.9375rem}
.radio-row + .radio-row{margin-top:.4rem}
.radio-row input{accent-color:var(--c-purple);width:1.15rem;height:1.15rem;flex:0 0 auto}
.radio-row:has(input:checked){border-color:var(--c-purple);background:var(--c-purple-tint)}
.radio-row:focus-within{outline:2px solid var(--c-purple);outline-offset:2px}

/* Icons: green carries "natural", purple carries everything else. */
.badge{gap:.5rem}
.badge .mhh-ico{color:var(--c-purple)}
.badge--natural .mhh-ico{color:var(--c-green)}

/* ── Motion ─────────────────────────────────────────────────────────────────
   Brief: "small animations that won't slow the site down… kid friendly."
   The rules that keeps that promise:

   1. TRANSFORM AND OPACITY ONLY. Both are handled by the compositor, so they
      never trigger layout or paint. Animating width/top/margin here would risk
      the CLS 0 this build holds — the homepage of the main site already lost
      83 Lighthouse points once to a layout-shift bug.
   2. NOTHING ABOVE THE FOLD ANIMATES ITS SIZE OR POSITION IN FLOW. The icons
      bob inside space already reserved for them, so nothing moves around them.
   3. NO JAVASCRIPT. Zero bytes, nothing to parse, no effect on TBT.
   4. NO will-change. It forces a permanent compositor layer per element,
      which costs memory on exactly the cheap phones this traffic arrives on.
      A running transform gets promoted automatically anyway.
   5. Long and small — 5s, 3px. Perceptible as "alive", not as "distracting",
      and a parent panicking at 9pm should never be competing with the page.

   Total cost: four ~16px SVGs per page on the compositor. No main-thread work. */
@keyframes mhh-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes mhh-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}

.badge .mhh-ico{animation:mhh-bob 5s ease-in-out infinite}
.badge:nth-child(2) .mhh-ico{animation-delay:.7s}
.badge:nth-child(3) .mhh-ico{animation-delay:1.4s}
.badge:nth-child(4) .mhh-ico{animation-delay:2.1s}
/* The leaf sways rather than bobs — it is the "natural" mark, and a leaf moving
   in air reads friendlier than one bouncing. */
.badge--natural .mhh-ico{animation:mhh-sway 6s ease-in-out infinite;transform-origin:50% 80%}

/* Interaction only — costs nothing until a finger or cursor arrives. */
.location-card:hover{transform:translateY(-2px)}
.faq-item summary::after{display:inline-block}
.faq-item[open] summary::after{transform:rotate(180deg)}
.city-cloud li{transition:transform .2s ease,border-color .2s ease}
.city-cloud li:hover{transform:translateY(-1px);border-color:var(--c-purple)}

/* Honour the OS setting. The accessibility statement on the main site promises
   this, and a promise in a document that the code does not keep is worse than
   not making it. Vestibular disorders are not an edge case. */
@media (prefers-reduced-motion: reduce){
  .badge .mhh-ico,.badge--natural .mhh-ico{animation:none}
      }
/* Region chooser on the main page. Whole card is the target — a panicking parent
   should not have to hit a text link. */
@media(min-width:640px){/* Per-salon phone on a location card. Scoped a:not(.btn) throughout this sheet —
   a container rule that repaints a .btn has silently broken the yellow call
   button's contrast twice on this project (1.22:1 and 1.27:1). */
.location-card .salon-tel{display:inline-flex;align-items:center;gap:.4rem;margin-top:.5rem;font-family:var(--font-heading);font-weight:700;font-size:1.0625rem;color:var(--c-purple);text-decoration:none}
.location-card .salon-tel:hover,.location-card .salon-tel:focus-visible{text-decoration:underline}
.location-card address{font-style:normal}
.form-error{border:1px solid #b3261e;background:#fdecea;color:#7f1d1a;border-radius:var(--r-md);padding:.85rem 1rem;margin-bottom:1rem;font-size:.9375rem}
/* Preview-only. Present ONLY while the Turnstile test key is in use; a real site
   key removes the markup entirely. Deliberately ugly — it must never be mistaken
   for part of the design or quietly shipped. */
/* In-home step list. Numbered <ol> so the order is conveyed to a screen reader by
   the element itself, not only by the purple circles. */

/* Test-mode captcha banner. Present ONLY while a Cloudflare test key is in use;
   a live 0x key removes the markup entirely. Deliberately ugly — it must never
   be mistaken for part of the design. */
.captcha-warn{border:2px solid #b3261e;background:#fdecea;color:#7f1d1a;border-radius:var(--r-md);padding:.8rem 1rem;margin-bottom:1rem;font-size:.8125rem;line-height:1.5}
.captcha-warn code{background:#fff;padding:.1rem .35rem;border-radius:4px;display:inline-block;margin-top:.25rem}