:root {
  --color-primary: #0f172a;
  --color-accent: #f59e0b;
  --font-heading: Fraunces, serif;
  --font-body: Inter, ui-sans-serif, system-ui, sans-serif;

  --color-ink: #0b1324;
  --color-ink-soft: #475569;
  --color-ink-faint: #94a3b8;
  --color-surface: #fafaf9;
  --color-surface-2: #ffffff;
  --color-surface-warm: #f6f0e6;
  --color-line: rgba(15, 23, 42, 0.08);
  --color-line-strong: rgba(15, 23, 42, 0.14);

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 14px 36px -12px rgba(15, 23, 42, 0.15);
  --shadow-lg: 0 40px 80px -30px rgba(15, 23, 42, 0.35);

  --radius-sm: 0.6rem;
  --radius: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;

  --container: 1160px;
  --content: 68ch;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Button colour tokens — decoupled from --color-primary so filled buttons
     can have an independent brand colour (e.g. orange CTAs on a navy brand).
     Both resolve through the primary by default, so existing renders are
     byte-identical until a brand_button_bg / brand_button_fg override is set. */
  --btn-primary-bg: var(--color-primary);
  --btn-primary-fg: #fff;

  /* Menu-bar background — factored out of the .nav background shorthand so
     brand_menu_bg overrides can flip the header without touching surface.
     Resolves to the same color-mix expression that was previously hardcoded. */
  --menu-bg: color-mix(in srgb, var(--color-surface) 82%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-surface);
  line-height: 1.65;
  font-feature-settings: "ss01", "cv11";
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  letter-spacing: -0.022em;
  line-height: 1.08;
  margin: 0 0 0.5em;
  color: var(--color-primary);
  font-weight: 600;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.5rem, 5.2vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  font-weight: 600;
  font-variation-settings: "opsz" 144, "SOFT" 40;
}
h2 { font-size: clamp(1.85rem, 3.4vw, 2.75rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.015em; }
p  { margin: 0 0 1em; color: var(--color-ink-soft); }
a  { color: var(--color-primary); text-decoration: none; transition: color 0.18s var(--ease); }
a:hover { color: var(--color-accent); }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--color-accent); color: var(--color-ink); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }

/* -------- Typography helpers -------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.05);
  color: var(--color-primary);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.eyebrow::before {
  content: ""; width: 0.4rem; height: 0.4rem; border-radius: 99px;
  background: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}
.eyebrow--accent { background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--color-primary); }
.lede { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--color-ink-soft); max-width: 44rem; }
.hr-mini { display: block; width: 3rem; height: 2px; background: var(--color-accent); border: 0; margin: 1.5rem 0; }

/* -------- Buttons -------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  font-weight: 600; font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
              background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--btn-primary-bg); color: var(--btn-primary-fg);
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--btn-primary-bg) 60%, transparent);
}
.btn-primary:hover {
  background: var(--color-ink);
  color: #fff;
  box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--btn-primary-bg) 70%, transparent);
}
.btn-accent {
  background: var(--color-accent); color: var(--color-ink);
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--color-accent) 60%, transparent);
}
.btn-accent:hover {
  filter: brightness(1.05);
  box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--color-accent) 70%, transparent);
}
.btn-ghost {
  background: transparent; color: var(--color-primary); border-color: var(--color-line-strong);
}
.btn-ghost:hover { border-color: var(--color-primary); background: rgba(15, 23, 42, 0.03); }
.btn-arrow::after {
  content: "→"; transition: transform 0.2s var(--ease); display: inline-block;
}
.btn-arrow:hover::after { transform: translateX(3px); }

/* -------- Nav -------- */
.nav {
  position: sticky; top: 0; z-index: 30;
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  background: var(--menu-bg);
  border-bottom: 1px solid var(--color-line);
}
.nav:has(.proof-strip) { border-bottom: none; }
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 0; gap: 1rem;
}
.nav-brand {
  display: inline-flex; align-items: center; gap: 0.65rem;
  font-family: var(--font-heading); font-size: 1.15rem; font-weight: 600;
  color: var(--color-primary);
  max-width: 60%; min-width: 0;
  letter-spacing: -0.01em;
}
.nav-brand > span:last-child {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-brand--logo img {
  display: block; height: 32px; width: auto; max-width: 160px;
  object-fit: contain; border-radius: 6px;
}
.nav-brand__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 35%, transparent), color-mix(in srgb, var(--color-accent) 12%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 30%, transparent);
  font-family: var(--font-heading); font-size: 0.82rem; font-weight: 700;
  color: var(--color-primary); letter-spacing: 0.02em;
}
.nav-links { display: flex; gap: 1.5rem; align-items: center; }
.nav-links a {
  position: relative;
  color: var(--color-ink-soft); font-size: 0.95rem; font-weight: 500;
  padding: 0.35rem 0;
}
.nav-links a:hover { color: var(--color-primary); }
.nav-links a.is-active { color: var(--color-primary); }
.nav-links a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--color-accent); border-radius: 2px;
}
.nav-cta { margin-left: 0.75rem; }

/* Desktop nav Call button — sits left of the primary "Book now" CTA so the
   phone number is the operator's first conversion path. Ghost styling by
   default; themes can restyle. The label, icon, and number are spans so
   the button can collapse to "icon + Call" on tighter widths.
   Inherits `.btn` padding (0.9rem 1.6rem) so it stacks the same height as
   the adjacent .nav-cta primary CTA. */
.nav-call {
  margin-left: auto;             /* push toward the right alongside nav-cta */
  font-feature-settings: "tnum";
  white-space: nowrap;
}
.nav-call__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
}
.nav-call__icon svg { display: block; }
.nav-call__label { font-weight: 600; }
.nav-call__num {
  color: var(--color-primary);
  font-weight: 700;
  letter-spacing: 0.005em;
}
.nav-call:hover .nav-call__num { color: var(--color-accent); }
/* Tight desktop / large tablet — drop the phone number, keep the icon
   and "Call" label. */
@media (max-width: 1080px) {
  .nav-call__num { display: none; }
}
/* Just before mobile breakpoint — drop the visible label too, leave
   icon-only. Padding stays unchanged so the height matches the primary CTA. */
@media (max-width: 880px) and (min-width: 721px) {
  .nav-call__label { display: none; }
}

/* Mobile-panel call link inside the <details> drawer. */
.nav-cta-mobile--call {
  background: transparent !important;
  color: var(--color-primary) !important;
  border: 1px solid var(--color-line-strong);
  font-feature-settings: "tnum";
}

/* Mobile nav: native <details> hamburger. */
.nav-toggle { display: none; }
@media (max-width: 720px) {
  .nav-inner { padding: 0.7rem 0; }
  .nav-links { display: none; }
  .nav-cta { display: none; }
  /* Mobile uses the bottom-fixed sticky-call instead of the desktop nav
     Call button — never both at once. */
  .nav-call { display: none; }
  .nav-toggle {
    display: block; position: relative;
    margin-left: auto;
  }
  /* Bug fix: when open, raise above the rolling proof-strip (which is a
     later DOM sibling inside .nav and would otherwise paint on top). */
  .nav-toggle[open] { z-index: 1; }
  .nav-toggle > summary {
    list-style: none; cursor: pointer;
    width: 44px; height: 44px; border-radius: 12px;
    border: 1px solid var(--color-line-strong);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-surface-2);
  }
  .nav-toggle > summary::-webkit-details-marker { display: none; }
  .nav-toggle > summary::after {
    content: ""; width: 18px; height: 2px; background: var(--color-primary);
    box-shadow: 0 -5px 0 var(--color-primary), 0 5px 0 var(--color-primary);
    transition: transform 0.2s var(--ease);
  }
  .nav-toggle[open] > summary::after { background: transparent; box-shadow: none; }
  .nav-toggle[open] > summary::before {
    content: "✕"; color: var(--color-primary); font-size: 1.1rem; font-weight: 500;
    position: absolute; inset: 0; display: grid; place-items: center;
  }
  .nav-toggle[open] > summary { position: relative; }
  .nav-mobile-panel {
    position: absolute; right: 0; top: calc(100% + 0.5rem);
    background: var(--color-surface-2);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 0.75rem;
    min-width: 14rem;
    display: grid; gap: 0.1rem;
  }
  .nav-mobile-panel a {
    display: block; padding: 0.65rem 0.85rem; border-radius: 0.55rem;
    color: var(--color-primary); font-size: 0.98rem; font-weight: 500;
  }
  .nav-mobile-panel a:hover,
  .nav-mobile-panel a.is-active { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
  .nav-mobile-panel .nav-cta-mobile {
    display: inline-flex; justify-content: center; margin-top: 0.35rem;
    padding: 0.75rem 1rem; border-radius: 999px;
    background: var(--color-primary); color: #fff; font-weight: 600;
  }
}

/* -------- Hero -------- */
.hero {
  position: relative;
  padding: 5.5rem 0 4.5rem;
  background:
    radial-gradient(1200px 520px at 12% -10%, color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--color-surface) 100%);
  overflow: hidden;
}
.hero::after {
  /* Fine dotted grid overlay — premium paper feel */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.6), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.6), transparent 70%);
}
.hero > .container { position: relative; z-index: 1; }

.hero--split .hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 900px) {
  .hero--split .hero-grid { grid-template-columns: 1fr; }
  .hero { padding: 3.5rem 0 3rem; }
}
.hero h1 { margin-bottom: 1.25rem; }
.hero-lede { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--color-ink-soft); max-width: 34rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.hero-meta {
  display: flex; gap: 1.5rem; margin-top: 2.25rem; flex-wrap: wrap;
  color: var(--color-ink-soft); font-size: 0.9rem;
}
.hero-meta strong { color: var(--color-primary); }

/* Proof-row track wrapper: transparent by default so the inner spans behave
   as direct children of .proof-row. Themes that marquee the proof-strip
   override this to a flex container with an animation. */
.proof-row__track { display: contents; }
.proof-row__dupe  { display: none; }

/* Hero-art: a deliberate decorative/functional panel when no image is available. */
.hero-art {
  position: relative;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--color-accent) 35%, transparent), transparent 55%),
    radial-gradient(120% 80% at 100% 100%, color-mix(in srgb, var(--color-primary) 85%, #000 0%), var(--color-primary) 70%);
}
.hero-art--image {
  background-color: #111;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-art__tint {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, transparent 40%, rgba(10, 16, 28, 0.72) 100%),
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 55%);
}
.hero-art__quote {
  position: absolute; inset: auto 1.5rem 1.5rem; z-index: 2;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(8px);
  padding: 1.25rem 1.35rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.hero-art__stars {
  display: inline-flex; gap: 0.2rem; margin-bottom: 0.5rem;
  color: var(--color-accent); font-size: 0.95rem;
}
.hero-art__text {
  font-family: var(--font-heading); color: var(--color-ink);
  font-size: 1.05rem; line-height: 1.35; margin: 0 0 0.6rem;
  letter-spacing: -0.01em;
}
.hero-art__author { color: var(--color-ink-soft); font-size: 0.8rem; margin: 0; }
.hero-art__rating-chip {
  position: absolute; top: 1.25rem; left: 1.25rem; z-index: 2;
  background: rgba(255,255,255,0.96);
  color: var(--color-ink);
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  font-size: 0.82rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.hero-art__rating-chip .star { color: var(--color-accent); }
.hero-art__decor {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 14px);
  mix-blend-mode: overlay; opacity: 0.6;
}

/* Fallback simple hero (no split). */
.hero--simple h1 { max-width: 20ch; }
.hero--simple .hero-lede { max-width: 38rem; }

/* Breadcrumb — service detail pages render this inside .hero--simple which
   has a dark scrim. Force white text + semi-transparent separators so the
   breadcrumb is always legible regardless of the underlying hero colour/image. */
.hero--simple .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  margin-bottom: 1rem;
  color: rgba(255, 255, 255, 0.75);
}
.hero--simple .breadcrumb a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: color 0.15s ease;
}
.hero--simple .breadcrumb a:hover { color: #fff; text-decoration: underline; }
.hero--simple .breadcrumb [aria-current="page"] { color: rgba(255, 255, 255, 0.55); }

/* -------- Proof strip -------- */
.proof-strip {
  padding: 1.25rem 0;
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.proof-row {
  display: flex; flex-wrap: wrap; gap: clamp(1rem, 4vw, 3rem);
  align-items: center; justify-content: center;
  color: var(--color-ink-soft); font-size: 0.88rem;
}
.proof-row strong { color: var(--color-primary); font-weight: 600; }
.proof-row .dot { width: 4px; height: 4px; border-radius: 99px; background: var(--color-line-strong); }
@media (max-width: 540px) { .proof-row .dot { display: none; } }

/* -------- Sections -------- */
.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section-alt { background: var(--color-surface-2); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.section-warm {
  background:
    radial-gradient(800px 300px at 100% 0%, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 60%),
    var(--color-surface-warm);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.section-dark {
  background:
    radial-gradient(900px 400px at 10% 0%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 60%),
    var(--color-primary);
  color: #e2e8f0;
}
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark p { color: rgba(255,255,255,0.72); }
.section-dark .eyebrow { background: rgba(255,255,255,0.08); color: #fff; }

.section-title { max-width: 40rem; margin-bottom: 3rem; }
.section-title h2 { margin: 0.5rem 0 0.75rem; }
.section-title p  { color: var(--color-ink-soft); font-size: 1.05rem; margin: 0; }
.section-title--center { margin-inline: auto; text-align: center; }

/* -------- Grids + cards -------- */
.grid-2 { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
  position: relative;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-line));
}
.card h3 { margin-bottom: 0.5rem; }
.card p  { color: var(--color-ink-soft); margin: 0; }

.card-service { display: flex; flex-direction: column; gap: 0.5rem; }
.card-service__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-bottom: 0.25rem;
}
.card-service__num {
  font-family: var(--font-heading); color: var(--color-accent);
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em;
}
.card-service__price {
  font-family: var(--font-heading); color: var(--color-primary);
  font-size: 1rem; font-weight: 500;
}
.card-service ul {
  list-style: none; padding: 0; margin: 0.9rem 0 0;
  display: grid; gap: 0.4rem;
}
.card-service li {
  position: relative; padding-left: 1.25rem;
  color: var(--color-ink-soft); font-size: 0.92rem;
}
.card-service li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 0.4rem; height: 0.4rem; border-radius: 99px; background: var(--color-accent);
}

/* Keep the legacy .card-icon chip available (used by simple services). */
.card-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 28%, transparent), color-mix(in srgb, var(--color-accent) 8%, transparent));
  color: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 600; font-size: 1rem;
  margin-bottom: 1.25rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 30%, transparent);
}

/* -------- Feature-split (about etc) -------- */
.feature-split {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1.1fr 0.9fr; align-items: center;
}
.feature-split--reverse .feature-split__body { order: 2; }
@media (max-width: 860px) { .feature-split { grid-template-columns: 1fr; } }
.feature-split__art {
  position: relative; border-radius: var(--radius-lg); aspect-ratio: 5/4;
  overflow: hidden; box-shadow: var(--shadow-md);
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--color-accent) 30%, transparent), transparent 55%),
    linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 88%, #000), var(--color-primary));
}
.feature-split__art.feature-split__art--image {
  background-color: #111;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.feature-split__art.feature-split__art--image::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 45%, rgba(10, 16, 28, 0.6) 100%),
    radial-gradient(120% 80% at 100% 100%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 55%);
}
.count-up {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.feature-split__badge {
  position: absolute; inset: auto auto 1.25rem 1.25rem;
  background: rgba(255,255,255,0.96); color: var(--color-ink);
  padding: 0.85rem 1rem; border-radius: var(--radius);
  box-shadow: var(--shadow-sm); display: grid; gap: 0.1rem;
  font-size: 0.85rem;
}
.feature-split__badge strong {
  font-family: var(--font-heading); font-size: 1.3rem; color: var(--color-primary);
  letter-spacing: -0.02em;
}

/* -------- Stat row -------- */
.stat-row {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  padding: 2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  background: var(--color-surface-2);
}
.stat-row__item { text-align: center; padding: 0.5rem; }
.stat-row__value {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1; letter-spacing: -0.02em;
}
.stat-row__label {
  margin-top: 0.35rem; color: var(--color-ink-soft);
  font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase;
}

/* -------- About-page narrative + callouts -------- */
.about-long .about-long__body {
  max-width: 42rem;
  margin: 0 auto;
}
.about-long .about-long__body p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-ink);
  margin: 0 0 1.1rem;
}
.about-long .about-long__body p:last-child { margin-bottom: 0; }

.about-callout .about-callout__inner {
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
}
.about-callout .eyebrow { display: inline-block; }
.about-callout__quote {
  margin: 0.85rem 0 0;
  font-size: clamp(1.25rem, 1.6vw, 1.6rem);
  line-height: 1.45;
  font-family: var(--font-heading, inherit);
  color: var(--color-ink);
  font-style: italic;
  position: relative;
  padding: 0 1rem;
}
.about-callout__quote::before,
.about-callout__quote::after {
  content: '"';
  color: color-mix(in srgb, var(--color-accent) 60%, var(--color-ink) 0);
  font-size: 1.4em;
  line-height: 0;
  vertical-align: -0.18em;
}
.about-callout__quote::before { margin-right: 0.15em; }
.about-callout__quote::after  { margin-left: 0.15em; }
.about-callout__body {
  margin: 0.75rem 0 0;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--color-ink);
}

/* -------- Values --------
   .value-grid (singular) is the legacy general-service / package-template
   selector. .values-grid (plural) is the new template-family selector
   emitted by why-choose-us + why-choose-clinic section modules. Plural
   matches the project's BEM "container is plural" convention everywhere
   else (.faq-list, .case-studies__list, .process-steps__list). */
.value-grid,
.values-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.value {
  background: var(--color-surface-2);
  border: 1px solid var(--color-line); border-radius: var(--radius);
  padding: 1.25rem 1.35rem; display: flex; gap: 0.9rem; align-items: flex-start;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.value:hover { border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-line)); transform: translateY(-2px); }
.value__glyph {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px;
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
  color: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 600;
}
.value h3 { font-size: 1rem; margin: 0 0 0.2rem; }
.value p { font-size: 0.9rem; margin: 0; }

/* -------- Testimonials -------- */
.testimonials {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}
/* Centre cards when there are fewer than 4 */
.testimonials--sparse {
  grid-template-columns: repeat(auto-fit, minmax(280px, 420px));
  justify-content: center;
}
.testimonial {
  background: var(--color-surface-2);
  border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  padding: 1.75rem; position: relative; display: flex; flex-direction: column; gap: 0.9rem;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
}
.testimonial:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-line));
}
.testimonial__stars {
  color: var(--color-accent); font-size: 1rem; letter-spacing: 0.1em;
}
.testimonial__text {
  font-family: var(--font-heading);
  font-size: 1.1rem; line-height: 1.45; color: var(--color-primary);
  margin: 0; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.testimonial__text--expanded {
  display: block; overflow: visible; -webkit-line-clamp: unset;
}
.testimonial__readmore {
  background: none; border: none; padding: 0; margin-top: -0.25rem;
  color: var(--color-accent); font-size: 0.82rem; font-weight: 600;
  cursor: pointer; align-self: flex-start; letter-spacing: 0.02em;
  text-decoration: underline; text-underline-offset: 2px;
}
.testimonial__readmore:hover { opacity: 0.75; }
.testimonial__author {
  display: flex; align-items: center; gap: 0.75rem; margin-top: auto;
  color: var(--color-ink-soft); font-size: 0.88rem;
}
.testimonial__avatar {
  width: 36px; height: 36px; border-radius: 99px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 40%, transparent), color-mix(in srgb, var(--color-primary) 20%, transparent));
  color: var(--color-primary); font-family: var(--font-heading); font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
}
.testimonial__author strong { color: var(--color-primary); font-weight: 600; }

/* -------- FAQ --------
   .faq is the legacy general-service / package-template selector.
   .faq-list is the new template-family selector emitted by
   faq-trade-specific + faq-clinical section modules. Co-selected so
   both share the same accordion + theme cascade. */
.faq,
.faq-list { display: grid; gap: 0.75rem; max-width: 52rem; margin: 0 auto; }
.faq details,
.faq-list details {
  background: var(--color-surface-2); border: 1px solid var(--color-line);
  border-radius: var(--radius); padding: 0.25rem 1.25rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.faq details[open],
.faq-list details[open] {
  border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-line));
  box-shadow: var(--shadow-sm);
}
.faq summary,
.faq-list summary {
  list-style: none; cursor: pointer;
  padding: 1rem 0.25rem; padding-right: 2.25rem;
  font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600;
  color: var(--color-primary); position: relative;
  letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker,
.faq-list summary::-webkit-details-marker { display: none; }
.faq summary::after,
.faq-list summary::after {
  content: "+"; position: absolute; right: 0.25rem; top: 50%;
  transform: translateY(-50%); font-size: 1.4rem; font-weight: 400;
  color: var(--color-accent); transition: transform 0.2s var(--ease);
  line-height: 1;
}
.faq details[open] summary::after,
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p,
.faq-list details p { margin: 0 0 1rem; color: var(--color-ink-soft); }

/* -------- CTA band -------- */
.cta-band {
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 5vw, 3.5rem);
  background:
    radial-gradient(600px 300px at 0% 0%, color-mix(in srgb, var(--color-accent) 28%, transparent), transparent 60%),
    radial-gradient(600px 300px at 100% 100%, color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 60%),
    linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 80%, #000));
  color: #fff;
  display: grid; grid-template-columns: 1.2fr auto; gap: 2rem; align-items: center;
  box-shadow: var(--shadow-lg);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.7), transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.7), transparent 85%);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; margin: 0 0 0.4rem; max-width: 22ch; }
.cta-band p  { color: rgba(255,255,255,0.78); max-width: 38rem; margin: 0; }
.cta-band .btn-primary { background: var(--color-accent); color: var(--color-ink); box-shadow: none; }
.cta-band .btn-primary:hover { background: #fff; color: var(--color-ink); }
.cta-band .btn-ghost { border-color: rgba(255,255,255,0.35); color: #fff; }
.cta-band .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.08); color: #fff; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-self: end; }
@media (max-width: 780px) {
  .cta-band { grid-template-columns: 1fr; }
  .cta-band__actions { justify-self: start; }
}

/* -------- Contact -------- */
.contact {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 820px) { .contact { grid-template-columns: 1fr; } }

/* -------- Opening Hours block (shared helper) --------
 * Sits to the left of contact/booking forms across every family form
 * section. Empty when content.hours is unset. */
.opening-hours {
  margin: 1.25rem 0 0;
}
.opening-hours__eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-bottom: 0.5rem;
}
.opening-hours__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
  font-size: 0.9rem;
  color: var(--color-ink);
  max-width: 22rem;
}
.opening-hours__list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}
.opening-hours__list .day {
  font-weight: 600;
}
.opening-hours__list .time {
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
}
.opening-hours__text {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  max-width: 32ch;
}
.contact-block { font-size: 0.98rem; color: var(--color-ink-soft); margin: 0; }
.contact-block dt { font-weight: 600; color: var(--color-primary); margin-top: 1rem; letter-spacing: 0.02em; font-size: 0.78rem; text-transform: uppercase; }
.contact-block dd { margin: 0.25rem 0 0; color: var(--color-ink); font-size: 1rem; }
.contact-block dd a { color: var(--color-ink); border-bottom: 1px solid var(--color-line-strong); transition: border-color 0.2s var(--ease); }
.contact-block dd a:hover { border-color: var(--color-accent); color: var(--color-accent); }

.contact-card {
  background: var(--color-surface-2); border: 1px solid var(--color-line);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-sm);
}
.contact-form { display: grid; gap: 0.85rem; }
.contact-form label { font-size: 0.8rem; font-weight: 600; color: var(--color-primary); letter-spacing: 0.02em; }
.contact-form input,
.contact-form textarea {
  /* min-width:0 + border-box keep date/time inputs (which have a wide
     intrinsic min-width from the picker UI) from overflowing their grid
     column — without it they render slightly wider than the text fields. */
  width: 100%; min-width: 0; box-sizing: border-box; padding: 0.85rem 1rem;
  border: 1px solid var(--color-line-strong); border-radius: 0.75rem;
  font: inherit; color: var(--color-ink); background: var(--color-surface);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none; border-color: var(--color-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 16%, transparent);
}
.contact-form textarea { min-height: 7rem; resize: vertical; }
/* Uniform field height: WebKit/Safari renders <input type="date"|"time">
   ~4px taller than text inputs (the native control has a larger intrinsic
   min-height), so the "Preferred date"/"Preferred time" fields looked
   slightly taller than the others on mobile. Force one explicit height on
   all contact-form inputs (box-sizing:border-box is already set above;
   textarea is excluded so it keeps its min-height + resize). Equalising
   "up" to the date/time height preserves the custom calendar/clock icons
   (avoids appearance:none, which would strip them). */
.contact-form input { height: 3.25rem; }
/* Prevent iOS Safari from auto-zooming the page when a field gains focus.
   iOS zooms whenever a focused input's font-size is < 16px, and the per-theme
   contact-form rules set the field text to ~0.8rem (12.8px). Force >=16px on
   mobile only (desktop keeps the refined 0.8rem). !important so it beats the
   later [data-theme="…"] .contact-form input font-size overrides regardless
   of source order. Covers input + textarea + select. */
@media (max-width: 720px) {
  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    font-size: 16px !important;
  }
}
/* Date/time inputs: mobile Safari (and some mobile browsers) render the
   NATIVE date/time control sized to its own intrinsic width/height,
   ignoring width:100% + height — so the fields came out wider AND taller
   than the text fields on a real device. appearance:none strips the native
   control so the input obeys the normal box model and matches the text
   fields exactly. The custom ::-webkit-calendar-picker-indicator below
   still renders the calendar/clock glyph. */
.contact-form input[type="date"],
.contact-form input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
}
.contact-form .btn { justify-self: start; margin-top: 0.25rem; }

/* Date + time inputs: replace the native (black) calendar / clock indicator
 * with a CSS-masked SVG coloured by var(--color-ink) — same as the form's
 * label/text colour. This guarantees visibility against any customer's
 * --color-surface (light OR dark), and is independent of the visitor's
 * OS dark-mode preference. Earlier color-scheme:light approach failed for
 * dark-themed customers because we hardcoded a light scheme regardless of
 * the actual form background.
 *
 * Technique: hide the native icon's bitmap (background-image:none), set
 * a solid background-color = the desired icon colour, then use mask-image
 * to cut the icon shape out of that coloured rectangle. The result is a
 * calendar/clock glyph in the customer's text colour. */
.contact-form input[type="date"]::-webkit-calendar-picker-indicator,
.contact-form input[type="time"]::-webkit-calendar-picker-indicator {
  background-image: none;
  background-color: var(--color-ink);
  width: 16px;
  height: 16px;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.15s ease;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.contact-form input[type="date"]::-webkit-calendar-picker-indicator {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M11 1.5h-1V0H8.5v1.5h-3V0H4v1.5H2.5A1.5 1.5 0 001 3v10.5A1.5 1.5 0 002.5 15h11A1.5 1.5 0 0015 13.5V3a1.5 1.5 0 00-1.5-1.5H12V0h-1v1.5zM2.5 5h11v8.5h-11V5z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M11 1.5h-1V0H8.5v1.5h-3V0H4v1.5H2.5A1.5 1.5 0 001 3v10.5A1.5 1.5 0 002.5 15h11A1.5 1.5 0 0015 13.5V3a1.5 1.5 0 00-1.5-1.5H12V0h-1v1.5zM2.5 5h11v8.5h-11V5z'/></svg>");
}
.contact-form input[type="time"]::-webkit-calendar-picker-indicator {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1a7 7 0 100 14A7 7 0 008 1zm0 12.5A5.5 5.5 0 118 2.5a5.5 5.5 0 010 11zM8.75 4h-1.5v4.31l3.04 1.83.77-1.28-2.31-1.39V4z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1a7 7 0 100 14A7 7 0 008 1zm0 12.5A5.5 5.5 0 118 2.5a5.5 5.5 0 010 11zM8.75 4h-1.5v4.31l3.04 1.83.77-1.28-2.31-1.39V4z'/></svg>");
}
.contact-form input[type="date"]:hover::-webkit-calendar-picker-indicator,
.contact-form input[type="time"]:hover::-webkit-calendar-picker-indicator,
.contact-form input[type="date"]:focus::-webkit-calendar-picker-indicator,
.contact-form input[type="time"]:focus::-webkit-calendar-picker-indicator {
  opacity: 1;
}

/* -------- Footer -------- */
.footer {
  background:
    radial-gradient(900px 260px at 50% 0%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 70%),
    var(--color-surface-2);
  border-top: 1px solid var(--color-line);
  padding: 4rem 0 2rem;
  color: var(--color-ink-soft); font-size: 0.92rem;
}
.footer-grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  padding-bottom: 2.5rem; border-bottom: 1px solid var(--color-line);
}
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand__name {
  font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600;
  color: var(--color-primary); margin: 0 0 0.6rem; letter-spacing: -0.01em;
}
.footer-brand__tag { max-width: 22rem; margin: 0 0 1rem; color: var(--color-ink-soft); }
.footer-col h4 {
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 600;
  color: var(--color-primary); letter-spacing: 0.12em; text-transform: uppercase;
  margin: 0 0 0.85rem;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.footer-col a { color: var(--color-ink-soft); font-size: 0.92rem; }
.footer-col a:hover { color: var(--color-accent); }
.footer-hours-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55; margin-top: 0.4rem; }
.footer-bottom {
  padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between;
  color: var(--color-ink-faint); font-size: 0.82rem;
}
/* Bug fix: centre copyright text when items stack on narrow viewports. */
@media (max-width: 520px) {
  .footer-bottom { justify-content: center; text-align: center; }
}

/* -------- Scroll-triggered reveal (IntersectionObserver via reveal.js) --------
   Initial state hides element; .is-in (set by JS when in viewport) restores
   it with a staggered ease. Direction variants: default = up; data-from="left"
   = slide in from the left; data-from="right" = from the right. Honors
   prefers-reduced-motion (JS short-circuits + CSS below). */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.reveal[data-from="left"]  { transform: translateX(-40px); }
.reveal[data-from="right"] { transform: translateX(40px); }
.reveal[data-from="up-lg"] { transform: translateY(44px); }
.reveal.is-in { opacity: 1; transform: translate(0, 0); }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* -------- Blog index -------- */
.post-list { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.post-card {
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: 1.5rem 1.5rem 1.75rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
}
.post-card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-line));
}
.post-card__meta { color: var(--color-ink-faint); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.post-card h3 { margin: 0; font-size: 1.18rem; line-height: 1.25; }
.post-card p { margin: 0; }

/* -------- Empty state -------- */
.empty {
  padding: 2.5rem; text-align: center;
  background: var(--color-surface-2); border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-lg); color: var(--color-ink-soft);
}

/* -------- Utility -------- */
.stack-sm > * + * { margin-top: 0.5rem; }
.stack   > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 1.5rem; }
.mt-2 { margin-top: 2rem; }
.mt-4 { margin-top: 3rem; }

/* -------- Map embed (landing) -------- */
.map-section { padding-block: 5rem; }
:is([data-package="multipage"], [data-package="advanced"]) .map-section { padding-block: 3.5rem; }
:is([data-package="multipage"], [data-package="advanced"]) .map-embed { aspect-ratio: 21 / 9; margin-top: 1.75rem; max-width: 960px; margin-inline: auto; }
:is([data-package="multipage"], [data-package="advanced"]) .map-section .section-title h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
@media (max-width: 640px) {
  :is([data-package="multipage"], [data-package="advanced"]) .map-embed { aspect-ratio: 4 / 3; }
}
.map-embed {
  position: relative;
  margin-top: 2.5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-md);
  aspect-ratio: 16 / 9;
  background: var(--color-surface-warm);
}
.map-embed iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
  display: block;
  filter: saturate(0.9);
}
@media (max-width: 640px) {
  .map-embed { aspect-ratio: 4 / 3; }
}

/* -------- Trust bar (landing) -------- */
.trust-bar {
  background: var(--color-surface-warm);
  border-block: 1px solid var(--color-line);
  padding: 1rem 0;
  font-size: 0.92rem;
  color: var(--color-ink-soft);
}
.trust-bar__row {
  display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem;
  align-items: center; justify-content: center; text-align: center;
}
.trust-bar__item { display: inline-flex; gap: 0.45rem; align-items: baseline; }
.trust-bar__item strong { color: var(--color-primary); font-weight: 600; }
.trust-bar__stars { color: var(--color-accent); letter-spacing: 0.08em; }
.trust-bar__item + .trust-bar__item { position: relative; padding-left: 0; }

/* -------- Masthead strip (press-editorial) -------- */
.masthead-strip {
  display: none;
  background: var(--color-primary);
  color: var(--color-surface, #fff);
  padding: 0.55rem 0;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: 'Public Sans', Inter, sans-serif;
}
.masthead-strip__row {
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem;
  align-items: center; justify-content: space-between;
}
.masthead-strip__name { letter-spacing: 0.3em; font-weight: 700; }
[data-theme="press-editorial"] .masthead-strip { display: block; }

/* -------- Marquee (garden-bistro) -------- */
.marquee {
  overflow: hidden;
  padding: 1.5rem 0;
  border-block: 1px solid var(--color-line);
  background: var(--color-surface-warm);
}
.marquee__row {
  display: flex; gap: 3rem;
  white-space: nowrap;
  animation: marquee-scroll 40s linear infinite;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.8vw, 2.25rem);
  color: var(--color-primary);
  letter-spacing: -0.01em;
  will-change: transform;
}
.marquee__row span { display: inline-block; padding-right: 3rem; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__row { animation: none; }
}

/* ============================================================
   THEME: midnight-lounge
   Dark luxe barbershop/lounge. Brass accents on near-black.
   ============================================================ */
[data-theme="midnight-lounge"] {
  --color-primary: #f2e7c9;           /* warm ivory foreground */
  --color-accent: #d4a24c;            /* brass */
  --color-ink: #f2e7c9;
  --color-ink-soft: #b5ad97;
  --color-ink-faint: #7a7465;
  --color-surface: #0b0d14;
  --color-surface-2: #121520;
  --color-surface-warm: #171b29;
  /* Theme-local intermediate stops kept literal so the brand-colour
   * picker (Page bg / Alt section bg) leaves them untouched. They land
   * between --color-surface and --color-surface-2 and don't derive
   * cleanly from either via color-mix — preserving the original
   * literal values keeps the default render byte-identical. */
  --ml-cta-stop: #1a1f30;             /* .cta-band first gradient stop */
  --ml-input-bg: #0f1320;             /* .contact-form input/textarea */
  --ml-hero-stop: #0d1019;            /* .hero linear gradient first stop */
  --ml-hero-fog: rgba(12, 15, 26, 0.8); /* .hero radial gradient fog colour */
  --ml-trust-bar-top: #0f131f;        /* .trust-bar gradient top */
  --ml-trust-bar-bottom: #0c1019;     /* .trust-bar gradient bottom */
  --color-line: rgba(212, 162, 76, 0.14);
  --color-line-strong: rgba(212, 162, 76, 0.28);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 20px 50px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 45px 90px rgba(0, 0, 0, 0.7);
}
[data-theme="midnight-lounge"] body { background: var(--color-surface); color: var(--color-ink); }
[data-theme="midnight-lounge"] p { color: var(--color-ink-soft); }
[data-theme="midnight-lounge"] h1 { font-style: italic; font-weight: 500; }
[data-theme="midnight-lounge"] h2 { font-weight: 500; }
[data-theme="midnight-lounge"] .nav {
  /* Was: rgba(11, 13, 20, 0.85). color-mix derivation lands on the
   * same value when --color-surface = #0b0d14 (theme default), and
   * responds to the brand-colour picker for Page background. */
  background: color-mix(in srgb, var(--color-surface) 85%, transparent);
  border-bottom: 1px solid var(--color-line);
}
[data-theme="midnight-lounge"] .nav-links a { color: var(--color-ink-soft); }
[data-theme="midnight-lounge"] .nav-links a:hover,
[data-theme="midnight-lounge"] .nav-links a.is-active { color: var(--color-accent); }
[data-theme="midnight-lounge"] .nav-brand { color: var(--color-ink); }
[data-theme="midnight-lounge"] .nav-brand__mark {
  background: linear-gradient(135deg, rgba(212, 162, 76, 0.35), rgba(212, 162, 76, 0.1));
  box-shadow: inset 0 0 0 1px rgba(212, 162, 76, 0.35);
  color: var(--color-accent);
}
[data-theme="midnight-lounge"] .btn-primary { background: var(--color-accent); color: #0b0d14; }
[data-theme="midnight-lounge"] .btn-primary:hover { background: #f0d186; color: #0b0d14; }
[data-theme="midnight-lounge"] .btn-ghost { color: var(--color-ink); border-color: var(--color-line-strong); }
[data-theme="midnight-lounge"] .btn-ghost:hover { background: rgba(212, 162, 76, 0.1); color: var(--color-accent); border-color: var(--color-accent); }
[data-theme="midnight-lounge"] .hero {
  background:
    radial-gradient(1100px 520px at 18% -10%, rgba(212, 162, 76, 0.18), transparent 60%),
    radial-gradient(900px 520px at 100% 10%, var(--ml-hero-fog), transparent 60%),
    linear-gradient(180deg, var(--ml-hero-stop) 0%, var(--color-surface) 100%);
}
[data-theme="midnight-lounge"] .hero::after {
  background-image: radial-gradient(rgba(212, 162, 76, 0.08) 1px, transparent 1px);
}
[data-theme="midnight-lounge"] .eyebrow { background: rgba(212, 162, 76, 0.08); color: var(--color-accent); }
[data-theme="midnight-lounge"] .eyebrow::before { background: var(--color-accent); }
[data-theme="midnight-lounge"] .section-alt,
[data-theme="midnight-lounge"] .section-warm { background: var(--color-surface-2); border-color: var(--color-line); }
[data-theme="midnight-lounge"] .proof-strip { background: var(--color-surface-2); border-color: var(--color-line); }
[data-theme="midnight-lounge"] .proof-row { color: var(--color-ink-soft); }
[data-theme="midnight-lounge"] .proof-row strong { color: var(--color-accent); }
[data-theme="midnight-lounge"] .card,
[data-theme="midnight-lounge"] .testimonial,
[data-theme="midnight-lounge"] .value,
[data-theme="midnight-lounge"] .post-card,
[data-theme="midnight-lounge"] .stat-row,
[data-theme="midnight-lounge"] .contact-card,
[data-theme="midnight-lounge"] .faq details,
[data-theme="midnight-lounge"] .faq-list details,
[data-theme="midnight-lounge"] .empty {
  background: var(--color-surface-2); border-color: var(--color-line);
}
[data-theme="midnight-lounge"] .card-service__num { color: var(--color-accent); }
[data-theme="midnight-lounge"] .value__glyph { background: rgba(212, 162, 76, 0.12); color: var(--color-accent); }
[data-theme="midnight-lounge"] .testimonial__text { color: var(--color-ink); }
[data-theme="midnight-lounge"] .stat-row__value { color: var(--color-accent); }
[data-theme="midnight-lounge"] .stat-row__label { color: var(--color-ink-soft); }
[data-theme="midnight-lounge"] .section-title p,
[data-theme="midnight-lounge"] .hero-lede,
[data-theme="midnight-lounge"] .lede { color: var(--color-ink-soft); }
[data-theme="midnight-lounge"] .hero-art { box-shadow: 0 40px 80px rgba(0, 0, 0, 0.7); }
[data-theme="midnight-lounge"] .hero-art__quote,
[data-theme="midnight-lounge"] .hero-art__rating-chip,
[data-theme="midnight-lounge"] .feature-split__badge {
  /* Was: rgba(18, 21, 32, 0.92). Derives from --color-surface-2
   * (#121520 theme default) — picker-responsive on Alt section bg. */
  background: color-mix(in srgb, var(--color-surface-2) 92%, transparent); color: var(--color-ink);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
[data-theme="midnight-lounge"] .hero-art__text { color: var(--color-ink); }
[data-theme="midnight-lounge"] .hero-art__author { color: var(--color-ink-soft); }
[data-theme="midnight-lounge"] .hero-art__stars,
[data-theme="midnight-lounge"] .testimonial__stars,
[data-theme="midnight-lounge"] .hero-art__rating-chip .star,
[data-theme="midnight-lounge"] .feature-split__badge strong { color: var(--color-accent); }
[data-theme="midnight-lounge"] .cta-band {
  /* First gradient stop (--ml-cta-stop) intentionally stays literal
   * so the CTA band keeps its dark luxe identity even when the Page
   * background picker is flipped light. Second stop (--color-surface)
   * IS picker-responsive — when operator chooses a light Page bg, the
   * gradient fades into that bg instead of pure black for a softer
   * transition into surrounding sections. */
  background:
    radial-gradient(600px 300px at 0% 0%, rgba(212, 162, 76, 0.28), transparent 60%),
    radial-gradient(600px 300px at 100% 100%, rgba(212, 162, 76, 0.14), transparent 60%),
    linear-gradient(135deg, var(--ml-cta-stop), var(--color-surface));
}
[data-theme="midnight-lounge"] .footer {
  /* Was: #0b0d14 literal. Now reads --color-surface — picker-responsive
   * on Page background. */
  background:
    radial-gradient(900px 260px at 50% 0%, rgba(212, 162, 76, 0.08), transparent 70%),
    var(--color-surface);
  border-top: 1px solid var(--color-line);
  color: var(--color-ink-soft);
}
[data-theme="midnight-lounge"] .footer-brand__name,
[data-theme="midnight-lounge"] .footer-col h4 { color: var(--color-ink); }
[data-theme="midnight-lounge"] .footer-col a { color: var(--color-ink-soft); }
[data-theme="midnight-lounge"] .footer-col a:hover { color: var(--color-accent); }
[data-theme="midnight-lounge"] .footer-bottom { color: var(--color-ink-faint); border-color: var(--color-line); }
[data-theme="midnight-lounge"] .contact-form input,
[data-theme="midnight-lounge"] .contact-form textarea {
  /* --ml-input-bg kept literal so form inputs retain their dark
   * identity (legibility on white form labels). If we ever decide form
   * inputs should also flip light with the picker, switch this to
   * var(--color-surface-2). */
  background: var(--ml-input-bg); border-color: var(--color-line-strong); color: var(--color-ink);
}
[data-theme="midnight-lounge"] .nav-mobile-panel { background: var(--color-surface-2); border-color: var(--color-line); }
[data-theme="midnight-lounge"] .nav-mobile-panel a { color: var(--color-ink); }
/* Bug fix: CTA anchor inherits var(--color-ink) = ivory from the rule above,
   which matches the button background (also ivory = var(--color-primary)).
   Explicitly set dark text so it contrasts against the ivory button. */
[data-theme="midnight-lounge"] .nav-mobile-panel .nav-cta-mobile { color: #0b0d14; }
[data-theme="midnight-lounge"] .nav-toggle > summary { background: var(--color-surface-2); border-color: var(--color-line-strong); }
[data-theme="midnight-lounge"] .nav-toggle > summary::after,
[data-theme="midnight-lounge"] .nav-toggle > summary::before { color: var(--color-ink); background: var(--color-ink); box-shadow: 0 -5px 0 var(--color-ink), 0 5px 0 var(--color-ink); }
[data-theme="midnight-lounge"] .nav-toggle[open] > summary::after { background: transparent; box-shadow: none; }
/* Brass hairline above each section */
[data-theme="midnight-lounge"] .section + .section { border-top: 1px solid rgba(212, 162, 76, 0.1); }

/* ============================================================
   THEME: press-editorial
   Cream paper with ink body and tracked uppercase titles.
   ============================================================ */
[data-theme="press-editorial"] {
  --color-primary: #0f0d0a;
  --color-accent: #c2925a;             /* warm tan */
  --color-ink: #161311;
  --color-ink-soft: #4a4540;
  --color-ink-faint: #8a8278;
  --color-surface: #f5eee0;            /* cream paper */
  --color-surface-2: #fbf7ec;
  --color-surface-warm: #ede2c8;
  --color-line: rgba(22, 19, 17, 0.14);
  --color-line-strong: rgba(22, 19, 17, 0.28);
  --font-heading: '"Playfair Display", Fraunces, serif';
  --font-body: 'Inter, ui-sans-serif, system-ui, sans-serif';
  --radius: 0.35rem;
  --radius-sm: 0.25rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.6rem;
}
[data-theme="press-editorial"] body { background: var(--color-surface); color: var(--color-ink); font-family: var(--font-body); }
[data-theme="press-editorial"] h1 { font-family: 'Playfair Display', Fraunces, serif; font-weight: 800; letter-spacing: -0.03em; }
[data-theme="press-editorial"] h2 { font-family: 'Playfair Display', Fraunces, serif; font-weight: 700; }
[data-theme="press-editorial"] h3 { font-family: 'Playfair Display', Fraunces, serif; font-weight: 700; }
[data-theme="press-editorial"] .nav {
  background: rgba(245, 238, 224, 0.94);
  border-bottom: 2px solid var(--color-primary);
}
[data-theme="press-editorial"] .nav-brand { font-family: 'Playfair Display', serif; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }
[data-theme="press-editorial"] .nav-links a { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; font-weight: 600; }
[data-theme="press-editorial"] .eyebrow {
  background: transparent; padding: 0; border-bottom: 1px solid var(--color-primary);
  border-radius: 0; color: var(--color-primary); letter-spacing: 0.2em; font-weight: 700;
  padding-bottom: 0.35rem;
}
[data-theme="press-editorial"] .eyebrow::before { display: none; }
[data-theme="press-editorial"] .hero { background: var(--color-surface); padding-top: 4rem; padding-bottom: 4rem; }
[data-theme="press-editorial"] .hero::after { display: none; }
[data-theme="press-editorial"] .hero h1 { font-size: clamp(3rem, 7vw, 6rem); text-transform: none; }
[data-theme="press-editorial"] .section { border-top: 1px solid var(--color-line-strong); }
[data-theme="press-editorial"] .section:first-of-type { border-top: 0; }
[data-theme="press-editorial"] .section + .section { border-top: 1px solid var(--color-line-strong); }
[data-theme="press-editorial"] .section-alt { background: var(--color-surface-2); border-color: var(--color-line-strong); }
[data-theme="press-editorial"] .section-warm { background: var(--color-surface-warm); border-color: var(--color-line-strong); }
[data-theme="press-editorial"] .section-title h2 {
  font-size: clamp(2.4rem, 4vw, 3.5rem);
}
[data-theme="press-editorial"] .card,
[data-theme="press-editorial"] .testimonial,
[data-theme="press-editorial"] .value,
[data-theme="press-editorial"] .post-card,
[data-theme="press-editorial"] .stat-row,
[data-theme="press-editorial"] .contact-card,
[data-theme="press-editorial"] .faq details,
[data-theme="press-editorial"] .faq-list details {
  background: var(--color-surface-2); border-color: var(--color-line-strong);
  box-shadow: none;
}
[data-theme="press-editorial"] .card-service__num,
[data-theme="press-editorial"] .value__glyph { color: var(--color-accent); background: transparent; box-shadow: none; font-size: 1.05rem; }
[data-theme="press-editorial"] .card-service__price { font-family: 'Playfair Display', serif; color: var(--color-primary); }
[data-theme="press-editorial"] .proof-strip { background: var(--color-primary); border: 0; color: var(--color-surface); }
[data-theme="press-editorial"] .proof-row { color: var(--color-surface-warm); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; }
[data-theme="press-editorial"] .proof-row strong { color: var(--color-accent); }
[data-theme="press-editorial"] .proof-row .dot { background: rgba(255,255,255,0.3); }
[data-theme="press-editorial"] .hero-art,
[data-theme="press-editorial"] .feature-split__art { border-radius: var(--radius); }
[data-theme="press-editorial"] .hero-art--image,
[data-theme="press-editorial"] .feature-split__art--image { filter: grayscale(0.6) contrast(1.05); }
[data-theme="press-editorial"] .testimonial__text { font-family: 'Playfair Display', serif; font-style: italic; }
[data-theme="press-editorial"] .cta-band {
  background: var(--color-primary); color: var(--color-surface-warm);
  border-radius: var(--radius);
}
[data-theme="press-editorial"] .cta-band h2 { color: var(--color-surface); }
[data-theme="press-editorial"] .cta-band .btn-primary { background: var(--color-accent); color: var(--color-primary); }
[data-theme="press-editorial"] .cta-band .btn-primary:hover { background: #e5b877; }
[data-theme="press-editorial"] .footer {
  background: var(--color-surface-warm);
  border-top: 2px solid var(--color-primary);
}
[data-theme="press-editorial"] .footer-col h4 { text-transform: uppercase; letter-spacing: 0.16em; }
[data-theme="press-editorial"] .btn-primary { background: var(--color-primary); color: var(--color-surface); border-radius: var(--radius); }
[data-theme="press-editorial"] .btn-ghost { border-radius: var(--radius); border-color: var(--color-primary); color: var(--color-primary); }
[data-theme="press-editorial"] .btn-ghost:hover { background: var(--color-primary); color: var(--color-surface-warm); }
[data-theme="press-editorial"] .hero-art__quote,
[data-theme="press-editorial"] .hero-art__rating-chip,
[data-theme="press-editorial"] .feature-split__badge { border-radius: var(--radius); }
[data-theme="press-editorial"] .nav-brand__mark { border-radius: 0; background: var(--color-primary); color: var(--color-surface-warm); box-shadow: none; }

/* ============================================================
   THEME: garden-bistro
   Warm pastels, rounded, soft-serif, marquee motif.
   ============================================================ */
[data-theme="garden-bistro"] {
  --color-primary: #2f4a3a;           /* forest/sage */
  --color-accent: #e39b7a;            /* warm peach */
  --color-ink: #2a2520;
  --color-ink-soft: #5a5248;
  --color-ink-faint: #a69e93;
  --color-surface: #faf5ec;           /* cream */
  --color-surface-2: #ffffff;
  --color-surface-warm: #f1e7d3;
  --color-line: rgba(47, 74, 58, 0.12);
  --color-line-strong: rgba(47, 74, 58, 0.22);
  --font-heading: '"DM Serif Display", Fraunces, serif';
  --radius-sm: 0.85rem;
  --radius: 1.5rem;
  --radius-lg: 2rem;
  --radius-xl: 2.5rem;
}
[data-theme="garden-bistro"] body { background: var(--color-surface); color: var(--color-ink); }
[data-theme="garden-bistro"] h1, [data-theme="garden-bistro"] h2, [data-theme="garden-bistro"] h3 {
  font-family: 'DM Serif Display', Fraunces, serif;
  font-weight: 400; letter-spacing: -0.01em;
}
[data-theme="garden-bistro"] h1 { font-style: italic; }
[data-theme="garden-bistro"] .nav {
  background: rgba(250, 245, 236, 0.88);
  border-bottom: 1px solid var(--color-line);
}
[data-theme="garden-bistro"] .nav-brand { font-family: 'DM Serif Display', serif; font-style: italic; font-weight: 400; font-size: 1.25rem; }
[data-theme="garden-bistro"] .nav-links a { font-size: 0.92rem; }
[data-theme="garden-bistro"] .nav-links a.is-active::after { background: var(--color-accent); }
[data-theme="garden-bistro"] .eyebrow {
  background: color-mix(in srgb, var(--color-accent) 20%, transparent);
  color: var(--color-primary); letter-spacing: 0.06em; text-transform: none;
  font-style: italic; font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 0.9rem;
}
[data-theme="garden-bistro"] .eyebrow::before { background: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent); }
[data-theme="garden-bistro"] .hero {
  background:
    radial-gradient(900px 400px at 10% 0%, color-mix(in srgb, var(--color-accent) 30%, transparent), transparent 60%),
    radial-gradient(900px 400px at 100% 100%, color-mix(in srgb, var(--color-primary) 15%, transparent), transparent 60%),
    var(--color-surface);
}
[data-theme="garden-bistro"] .hero::after { display: none; }
[data-theme="garden-bistro"] .hero h1 {
  font-style: italic; font-weight: 400; font-size: clamp(3rem, 6.5vw, 5rem);
}
[data-theme="garden-bistro"] .btn { border-radius: 999px; }
[data-theme="garden-bistro"] .btn-primary { background: var(--color-accent); color: var(--color-primary); }
[data-theme="garden-bistro"] .btn-primary:hover { background: #eba988; color: var(--color-primary); }
[data-theme="garden-bistro"] .btn-ghost { border-color: var(--color-primary); color: var(--color-primary); }
[data-theme="garden-bistro"] .btn-ghost:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
[data-theme="garden-bistro"] .section-alt { background: var(--color-surface-warm); border-color: var(--color-line); }
[data-theme="garden-bistro"] .section-warm { background: var(--color-surface-2); border-color: var(--color-line); }
[data-theme="garden-bistro"] .card,
[data-theme="garden-bistro"] .testimonial,
[data-theme="garden-bistro"] .value,
[data-theme="garden-bistro"] .post-card,
[data-theme="garden-bistro"] .stat-row,
[data-theme="garden-bistro"] .contact-card,
[data-theme="garden-bistro"] .faq details,
[data-theme="garden-bistro"] .faq-list details,
[data-theme="garden-bistro"] .empty {
  background: var(--color-surface-2);
  border-color: var(--color-line);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px -20px rgba(47, 74, 58, 0.25);
}
[data-theme="garden-bistro"] .card:hover,
[data-theme="garden-bistro"] .post-card:hover,
[data-theme="garden-bistro"] .testimonial:hover {
  transform: translateY(-4px) rotate(-0.4deg);
}
[data-theme="garden-bistro"] .card-service__num { color: var(--color-accent); }
[data-theme="garden-bistro"] .card-service__price { font-family: 'DM Serif Display', serif; color: var(--color-primary); }
[data-theme="garden-bistro"] .hero-art, [data-theme="garden-bistro"] .feature-split__art { border-radius: var(--radius-lg); }
[data-theme="garden-bistro"] .proof-strip { background: var(--color-surface-warm); border-color: var(--color-line); }
[data-theme="garden-bistro"] .stat-row__value { color: var(--color-primary); }
[data-theme="garden-bistro"] .testimonial__text { font-style: italic; font-family: 'DM Serif Display', serif; }
[data-theme="garden-bistro"] .cta-band {
  background:
    radial-gradient(600px 300px at 0% 0%, color-mix(in srgb, var(--color-accent) 50%, transparent), transparent 60%),
    linear-gradient(135deg, var(--color-primary), #1e3a2a);
  border-radius: var(--radius-xl);
  color: #fff;
}
[data-theme="garden-bistro"] .cta-band h2 { color: #fff; font-style: italic; }
[data-theme="garden-bistro"] .cta-band .btn-primary { background: var(--color-accent); color: var(--color-primary); }
[data-theme="garden-bistro"] .cta-band .btn-primary:hover { background: #fff; }
[data-theme="garden-bistro"] .footer { background: var(--color-surface-warm); border-top: 1px solid var(--color-line); }
[data-theme="garden-bistro"] .marquee {
  background: var(--color-primary); color: var(--color-surface);
  border-color: transparent;
  padding: 1.1rem 0;
}
[data-theme="garden-bistro"] .marquee__row {
  font-family: 'DM Serif Display', serif; font-style: italic;
  color: var(--color-surface);
  font-size: clamp(1.3rem, 2.8vw, 2.2rem);
  gap: 2.25rem;
}
[data-theme="garden-bistro"] .marquee__row span::after {
  content: " ✦ "; color: var(--color-accent); margin-left: 2rem;
}
[data-theme="garden-bistro"] .nav-brand__mark { background: color-mix(in srgb, var(--color-accent) 35%, transparent); color: var(--color-primary); }
[data-theme="garden-bistro"] .value__glyph { background: color-mix(in srgb, var(--color-accent) 22%, transparent); color: var(--color-primary); }

/* ============================================================
   Landing-page refinements, per ui-ux-pro-max design-system
   recommendations (2026-04-15 pass). Scoped with a body class? No —
   landing is single-page; safe to apply globally since the affected
   components only render on landing (masthead-strip, trust-bar) or
   are theme-level polish.
   ============================================================ */

/* -- default: sharper trust bar -- */
.trust-bar__item strong { font-variant-numeric: tabular-nums; }

/* -- midnight-lounge: liquid-glass nav + morphing gradient hero -- */
[data-theme="midnight-lounge"] .nav {
  backdrop-filter: saturate(1.2) blur(18px);
  -webkit-backdrop-filter: saturate(1.2) blur(18px);
  background: rgba(11, 13, 20, 0.55);
}
[data-theme="midnight-lounge"] .hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 520px at var(--blob-x, 15%) var(--blob-y, 0%), rgba(212, 162, 76, 0.22), transparent 60%),
    radial-gradient(800px 500px at calc(100% - var(--blob-x, 15%)) calc(100% - var(--blob-y, 0%)), rgba(60, 80, 140, 0.25), transparent 60%),
    linear-gradient(180deg, var(--ml-hero-stop) 0%, var(--color-surface) 100%);
  animation: midnight-morph 24s ease-in-out infinite alternate;
}
@keyframes midnight-morph {
  0%   { --blob-x: 15%;  --blob-y: 0%; }
  50%  { --blob-x: 45%;  --blob-y: 30%; }
  100% { --blob-x: 20%;  --blob-y: 10%; }
}
@property --blob-x { syntax: '<percentage>'; inherits: false; initial-value: 15%; }
@property --blob-y { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@media (prefers-reduced-motion: reduce) {
  [data-theme="midnight-lounge"] .hero { animation: none; }
}
[data-theme="midnight-lounge"] .hero-art {
  box-shadow: 0 45px 90px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(212, 162, 76, 0.18);
}
[data-theme="midnight-lounge"] .trust-bar {
  /* Kept literal via theme-local vars — small surface, dark identity
   * accent that should stay dark even when picker flips backgrounds. */
  background: linear-gradient(180deg, var(--ml-trust-bar-top), var(--ml-trust-bar-bottom));
  border-color: rgba(212, 162, 76, 0.14);
  color: var(--color-ink-soft);
}
[data-theme="midnight-lounge"] .trust-bar__item strong { color: var(--color-accent); }
[data-theme="midnight-lounge"] .trust-bar__stars { color: var(--color-accent); }

/* -- press-editorial: Libre Bodoni display + numbered kickers + ink-red accent -- */
[data-theme="press-editorial"] {
  --color-accent: #9a2a2a;              /* deeper editorial oxblood */
}
[data-theme="press-editorial"] body { font-family: 'Public Sans', Inter, ui-sans-serif, system-ui, sans-serif; }
[data-theme="press-editorial"] h1,
[data-theme="press-editorial"] h2,
[data-theme="press-editorial"] h3,
[data-theme="press-editorial"] .nav-brand {
  font-family: 'Libre Bodoni', 'Playfair Display', Fraunces, serif;
}
[data-theme="press-editorial"] h1 { font-weight: 700; letter-spacing: -0.025em; line-height: 1.02; }
[data-theme="press-editorial"] .section-title { counter-increment: press-section; position: relative; }
[data-theme="press-editorial"] .section-title .eyebrow::before {
  content: "№ " counter(press-section, decimal-leading-zero) " / ";
  margin-right: 0.35rem; opacity: 0.7;
}
[data-theme="press-editorial"] main,
[data-theme="press-editorial"] body { counter-reset: press-section; }
[data-theme="press-editorial"] .trust-bar {
  background: var(--color-primary); color: #f5eee0;
  font-family: 'Public Sans', Inter, sans-serif;
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
}
[data-theme="press-editorial"] .trust-bar__item strong { color: #f5eee0; }
[data-theme="press-editorial"] .trust-bar__stars { color: #e5b877; }
[data-theme="press-editorial"] .cta-band .btn-primary,
[data-theme="press-editorial"] .btn-primary { background: var(--color-accent); color: #fff; }
[data-theme="press-editorial"] .btn-primary:hover { background: #b83a3a; }
[data-theme="press-editorial"] .card-service__num { color: var(--color-accent); }

/* -- garden-bistro: block-based color alternation + bigger rhythm -- */
[data-theme="garden-bistro"] .hero { padding-top: 6rem; padding-bottom: 6rem; }
[data-theme="garden-bistro"] .section { padding-top: 5.5rem; padding-bottom: 5.5rem; }
[data-theme="garden-bistro"] #services { background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface)); }
[data-theme="garden-bistro"] #about.section-alt { background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); }
[data-theme="garden-bistro"] #testimonials .section { background: var(--color-surface-warm); }
[data-theme="garden-bistro"] .trust-bar {
  background: color-mix(in srgb, var(--color-accent) 25%, var(--color-surface));
  border-color: transparent;
  color: var(--color-primary);
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 1.05rem;
}
[data-theme="garden-bistro"] .trust-bar__item strong { color: var(--color-primary); }
[data-theme="garden-bistro"] .hero h1 { font-size: clamp(3.2rem, 7vw, 5.5rem); }
[data-theme="garden-bistro"] .cta-band { padding: 4.5rem 3rem; }

/* ============================================================
   press-editorial × multipage — cinematic fixed-background hero
   The whole hero section becomes a full-bleed image pinned in place;
   page content scrolls up over it. Hero content is overlaid on top
   with an ink scrim for legibility. Masthead strip, nav, and trust
   bar on this page all get transparent/dark treatments to fit.
   ============================================================ */
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .hero {
  position: relative;
  min-height: min(86vh, 780px);
  padding: 0;
  overflow: hidden;
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-color: #0f0d0a;
  color: #f5eee0;
  border-top: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
}
/* iOS Safari can't do fixed attachment reliably — fall back to a pinned
   absolute layer on touch-only viewports. */
@supports (-webkit-touch-callout: none) {
  [data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .hero {
    background-attachment: scroll;
  }
}
@media (hover: none) and (pointer: coarse) {
  [data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .hero {
    background-attachment: scroll;
  }
}
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 13, 10, 0.2) 0%, rgba(15, 13, 10, 0.55) 45%, rgba(15, 13, 10, 0.8) 100%),
    linear-gradient(90deg, rgba(15, 13, 10, 0.6), rgba(15, 13, 10, 0.25) 45%, rgba(15, 13, 10, 0.1) 100%);
}
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .hero::after { display: none; }
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .hero > .container {
  position: relative; z-index: 1;
  display: flex;
  align-items: flex-end;
  min-height: inherit;
  padding-block: 4rem;
}
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .hero-grid {
  display: block; /* collapse the split; one big column */
  max-width: 820px;
}
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .hero-grid > .reveal { width: 100%; }
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .hero .eyebrow {
  background: transparent;
  color: #f5eee0;
  border: 0;
  border-bottom: 1px solid rgba(245, 238, 224, 0.5);
  border-radius: 0;
  padding: 0 0 0.4rem 0;
  letter-spacing: 0.24em;
  display: inline-block;
}
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .hero h1 {
  color: #f5eee0;
  font-size: clamp(2.55rem, 6.375vw, 5.525rem); /* -15% from 3/7.5/6.5 */
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-top: 1.5rem;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35);
}
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .hero-lede {
  color: rgba(245, 238, 224, 0.86);
  max-width: 56ch;
  font-size: 1.1rem;
}
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .hero-cta { margin-top: 2rem; }
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .hero .btn-primary {
  background: var(--color-accent); color: #fff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .hero .btn-primary:hover { background: #b83a3a; }
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .hero .btn-ghost {
  color: #f5eee0;
  border-color: rgba(245, 238, 224, 0.5);
}
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .hero .btn-ghost:hover {
  background: rgba(245, 238, 224, 0.1); color: #fff; border-color: #f5eee0;
}
/* Sub-page heroes (services / about / contact) — same fixed-image
   treatment as the homepage but centered + 10% shorter. Each sub-page
   template passes its own --hero-bg inline via {{hero_bg_*}} tokens. */
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple {
  position: relative;
  padding: 0;
  overflow: hidden;
  min-height: min(77.4vh, 702px); /* -10% from the homepage's 86vh / 780px */
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-color: #0f0d0a;
  color: #f5eee0;
  border-top: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  filter: grayscale(0.2) contrast(1.02); /* tone-match the homepage image */
}
@supports (-webkit-touch-callout: none) {
  [data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple { background-attachment: scroll; }
}
@media (hover: none) and (pointer: coarse) {
  [data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple { background-attachment: scroll; }
}
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(180deg, rgba(15, 13, 10, 0.6) 0%, rgba(15, 13, 10, 0.65) 50%, rgba(15, 13, 10, 0.8) 100%),
    linear-gradient(90deg, rgba(15, 13, 10, 0.4), rgba(15, 13, 10, 0.3) 50%, rgba(15, 13, 10, 0.4) 100%);
}
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple::after { display: none; }
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple > .container {
  position: relative; z-index: 1;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-block: 3rem;
  max-width: 860px;
}
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple .eyebrow {
  background: transparent;
  color: #f5eee0;
  border: 0;
  border-bottom: 1px solid rgba(245, 238, 224, 0.5);
  border-radius: 0;
  padding: 0 0 0.4rem 0;
  letter-spacing: 0.24em;
  display: inline-block;
  margin-inline: auto;
}
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple h1 {
  color: #f5eee0;
  font-size: clamp(2.3rem, 5.4vw, 4.8rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-top: 1.25rem;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35);
}
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple .hero-lede {
  color: #f5eee0;
  max-width: 56ch;
  margin: 1rem auto 0;
  font-size: 1.1rem;
  line-height: 1.55;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.5);
}

/* Restore the original hero-meta styling on press-editorial × multipage —
   a soft rule-bordered meta row above the CTAs, not a marquee. */
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .hero-meta {
  color: rgba(245, 238, 224, 0.72);
  border-top: 1px solid rgba(245, 238, 224, 0.18);
  margin-top: 2rem;
  padding-top: 1rem;
}
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .hero-meta strong { color: #f5eee0; }

/* Marquee proof-strip — the section BELOW the hero that surfaces the same
   rating / years / locality info. Continuous right-to-left scroll in the
   theme's ink band. Seamless loop via duplicated track (display:inline-flex
   on __track + __dupe, translate 0 → -50%). */
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .proof-strip {
  overflow: hidden;
  padding: 0;
}
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .proof-strip > .container {
  max-width: none;
  padding-inline: 0;
}
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .proof-row {
  white-space: nowrap;
  gap: 0;
  padding: 0.95rem 0;
  justify-content: flex-start;
  flex-wrap: nowrap;
  display: block;
}
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .proof-row .dot { display: none; }
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .proof-row__track {
  display: inline-flex;
  align-items: center;
  gap: 3rem;
  animation: proof-marquee 44s linear infinite;
  will-change: transform;
}
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .proof-row__track > span {
  flex-shrink: 0;
  padding-right: 3rem;
  position: relative;
}
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .proof-row__track > span + span::before,
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .proof-row__dupe::before,
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .proof-row__dupe > span + span::before {
  content: "◆";
  color: var(--color-accent);
  opacity: 0.85;
  margin-right: 3rem;
}
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .proof-row__dupe {
  display: inline-flex;
  align-items: center;
  gap: 3rem;
}
@keyframes proof-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .proof-row__track { animation: none; }
}
/* Hide the split-hero art tablet — image is the whole canvas now. */
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .hero .hero-art { display: none; }
/* Nav + masthead get transparent treatments over the image. */
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .masthead-strip {
  position: relative; z-index: 2;
}
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .nav {
  background: rgba(15, 13, 10, 0.55);
  backdrop-filter: saturate(1.2) blur(14px);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  border-bottom: 0;
}
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .nav-brand,
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .nav-links a {
  color: #f5eee0;
}
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .nav-links a.is-active,
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .nav-links a:hover {
  color: #fff;
}
[data-theme="press-editorial"]:is([data-package="multipage"], [data-package="advanced"]) .nav-brand__mark {
  background: rgba(245, 238, 224, 0.12);
  color: #f5eee0;
}

/* ============================================================
   MULTIPAGE — universal cinematic-hero treatment
   Applies across every theme: full-bleed fixed-background hero on the
   homepage (.hero--split) and sub-pages (.hero--simple, centered +
   ~10% shorter), dark frosted nav, and a marquee proof-strip below
   the hero. Per-theme tints come from the --hero-scrim-* and --hero-
   accent custom properties in the theme overrides directly below.
   ============================================================ */
:is([data-package="multipage"], [data-package="advanced"]) {
  --hero-scrim-top: rgba(15, 13, 10, 0.2);
  --hero-scrim-mid: rgba(15, 13, 10, 0.55);
  --hero-scrim-bot: rgba(15, 13, 10, 0.8);
  --hero-scrim-sidewash: rgba(15, 13, 10, 0.55);
  --hero-ink: #f5eee0;
  --hero-ink-soft: rgba(245, 238, 224, 0.86);
  --hero-rule: rgba(245, 238, 224, 0.5);
  --hero-accent: var(--color-accent);
}
:is([data-package="multipage"], [data-package="advanced"]) .hero,
:is([data-package="multipage"], [data-package="advanced"]) .hero--simple {
  position: relative;
  padding: 0;
  overflow: hidden;
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-color: #0f0d0a;
  color: var(--hero-ink);
}
@supports (-webkit-touch-callout: none) {
  :is([data-package="multipage"], [data-package="advanced"]) .hero,
  :is([data-package="multipage"], [data-package="advanced"]) .hero--simple { background-attachment: scroll; }
}
@media (hover: none) and (pointer: coarse) {
  :is([data-package="multipage"], [data-package="advanced"]) .hero,
  :is([data-package="multipage"], [data-package="advanced"]) .hero--simple { background-attachment: scroll; }
}
:is([data-package="multipage"], [data-package="advanced"]) .hero::before,
:is([data-package="multipage"], [data-package="advanced"]) .hero--simple::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(180deg, var(--hero-scrim-top) 0%, var(--hero-scrim-mid) 45%, var(--hero-scrim-bot) 100%),
    linear-gradient(90deg, var(--hero-scrim-sidewash), rgba(15, 13, 10, 0.15) 45%, rgba(15, 13, 10, 0.1) 100%);
}
:is([data-package="multipage"], [data-package="advanced"]) .hero::after,
:is([data-package="multipage"], [data-package="advanced"]) .hero--simple::after { display: none; }

/* Homepage hero — text anchored to the bottom-left, image dominates */
:is([data-package="multipage"], [data-package="advanced"]) .hero.hero--split {
  min-height: min(86vh, 780px);
}
:is([data-package="multipage"], [data-package="advanced"]) .hero.hero--split > .container {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end;
  min-height: inherit; padding-block: 4rem;
}
:is([data-package="multipage"], [data-package="advanced"]) .hero.hero--split .hero-grid { display: block; max-width: 820px; }
:is([data-package="multipage"], [data-package="advanced"]) .hero.hero--split .hero-grid > .reveal { width: 100%; }
:is([data-package="multipage"], [data-package="advanced"]) .hero.hero--split .hero-art { display: none; }

/* Sub-page heroes — centered, 10% shorter than homepage */
:is([data-package="multipage"], [data-package="advanced"]) .hero--simple {
  min-height: min(77.4vh, 702px);
}
:is([data-package="multipage"], [data-package="advanced"]) .hero--simple > .container {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  min-height: inherit; padding-block: 3rem; max-width: 860px;
}

/* Typography over scrim */
:is([data-package="multipage"], [data-package="advanced"]) .hero h1,
:is([data-package="multipage"], [data-package="advanced"]) .hero--simple h1 {
  color: var(--hero-ink);
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35);
  line-height: 1.05;
}
:is([data-package="multipage"], [data-package="advanced"]) .hero.hero--split h1 { font-size: clamp(2.55rem, 6.375vw, 5.525rem); letter-spacing: -0.025em; margin-top: 1.5rem; }
:is([data-package="multipage"], [data-package="advanced"]) .hero--simple h1      { font-size: clamp(2.3rem, 5.4vw, 4.8rem); letter-spacing: -0.02em; margin-top: 1.25rem; }
:is([data-package="multipage"], [data-package="advanced"]) .hero .hero-lede,
:is([data-package="multipage"], [data-package="advanced"]) .hero--simple .hero-lede {
  color: var(--hero-ink-soft);
  max-width: 56ch;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55);
}
:is([data-package="multipage"], [data-package="advanced"]) .hero--simple .hero-lede { margin: 1rem auto 0; }
:is([data-package="multipage"], [data-package="advanced"]) .hero .eyebrow,
:is([data-package="multipage"], [data-package="advanced"]) .hero--simple .eyebrow {
  background: transparent;
  color: var(--hero-ink);
  border: 0;
  border-bottom: 1px solid var(--hero-rule);
  border-radius: 0;
  padding: 0 0 0.4rem 0;
  letter-spacing: 0.24em;
  display: inline-block;
}
:is([data-package="multipage"], [data-package="advanced"]) .hero--simple .eyebrow { margin-inline: auto; }
:is([data-package="multipage"], [data-package="advanced"]) .hero-meta {
  color: var(--hero-ink-soft);
  border-top: 1px solid var(--hero-rule);
  margin-top: 2rem;
  padding-top: 1rem;
}
:is([data-package="multipage"], [data-package="advanced"]) .hero-meta strong { color: var(--hero-ink); }
:is([data-package="multipage"], [data-package="advanced"]) .hero .btn-ghost {
  color: var(--hero-ink);
  border-color: var(--hero-rule);
}
:is([data-package="multipage"], [data-package="advanced"]) .hero .btn-ghost:hover {
  background: rgba(245, 238, 224, 0.1);
  color: #fff;
  border-color: var(--hero-ink);
}

/* Transparent frosted nav over the image */
:is([data-package="multipage"], [data-package="advanced"]) .nav {
  background: rgba(15, 13, 10, 0.55);
  backdrop-filter: saturate(1.2) blur(14px);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  border-bottom: 0;
}
:is([data-package="multipage"], [data-package="advanced"]) .nav-brand,
:is([data-package="multipage"], [data-package="advanced"]) .nav-links a { color: var(--hero-ink); }
:is([data-package="multipage"], [data-package="advanced"]) .nav-links a.is-active,
:is([data-package="multipage"], [data-package="advanced"]) .nav-links a:hover { color: #fff; }
:is([data-package="multipage"], [data-package="advanced"]) .nav-brand__mark {
  background: rgba(245, 238, 224, 0.12);
  color: var(--hero-ink);
}

/* Marquee proof-strip below the hero */
:is([data-package="multipage"], [data-package="advanced"]) .proof-strip {
  overflow: hidden;
  padding: 0;
}
:is([data-package="multipage"], [data-package="advanced"]) .proof-strip > .container {
  max-width: none;
  padding-inline: 0;
}
:is([data-package="multipage"], [data-package="advanced"]) .proof-row {
  white-space: nowrap;
  gap: 0;
  padding: 0.95rem 0;
  justify-content: flex-start;
  flex-wrap: nowrap;
  display: block;
}
:is([data-package="multipage"], [data-package="advanced"]) .proof-row .dot { display: none; }
:is([data-package="multipage"], [data-package="advanced"]) .proof-row__track {
  display: inline-flex;
  align-items: center;
  gap: 3rem;
  animation: proof-marquee 44s linear infinite;
  will-change: transform;
}
:is([data-package="multipage"], [data-package="advanced"]) .proof-row__track > span {
  flex-shrink: 0;
  padding-right: 3rem;
  position: relative;
}
:is([data-package="multipage"], [data-package="advanced"]) .proof-row__track > span + span::before,
:is([data-package="multipage"], [data-package="advanced"]) .proof-row__dupe::before,
:is([data-package="multipage"], [data-package="advanced"]) .proof-row__dupe > span + span::before {
  content: "◆";
  color: var(--hero-accent);
  opacity: 0.85;
  margin-right: 3rem;
}
:is([data-package="multipage"], [data-package="advanced"]) .proof-row__dupe {
  display: inline-flex;
  align-items: center;
  gap: 3rem;
}
@media (prefers-reduced-motion: reduce) {
  :is([data-package="multipage"], [data-package="advanced"]) .proof-row__track { animation: none; }
}

/* Scroll-gated hero copy: each element drops down from -50px → 0 and
   fades in. h1 lands first, subhead at 80ms, CTA at 160ms. Full reveal
   completes at ~900ms after first paint. The outer reveal container only
   carries parallax translation so child transforms stay independent of
   scroll-driven drift. */
:is([data-package="multipage"], [data-package="advanced"]) .hero .reveal[data-trigger="scroll"],
:is([data-package="multipage"], [data-package="advanced"]) .hero--simple > .container.reveal[data-trigger="scroll"] {
  transform: translateY(var(--parallax-y, 0px));
  transition: transform 0s linear;
  will-change: transform;
}
:is([data-package="multipage"], [data-package="advanced"]) .hero .reveal[data-trigger="scroll"] > *,
:is([data-package="multipage"], [data-package="advanced"]) .hero--simple > .container.reveal[data-trigger="scroll"] > * {
  opacity: 0;
  transform: translateY(-50px);
  /* ~900ms reveal: 750ms move + 700ms fade, out-expo easing for natural drop. */
  transition: opacity 700ms ease-out,
              transform 750ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}
:is([data-package="multipage"], [data-package="advanced"]) .hero .reveal[data-trigger="scroll"].is-in > *,
:is([data-package="multipage"], [data-package="advanced"]) .hero--simple > .container.reveal[data-trigger="scroll"].is-in > * {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger: h1 first (0ms), subhead (80ms), CTA/meta (160ms), extras (240ms, 320ms). */
:is([data-package="multipage"], [data-package="advanced"]) .hero .reveal[data-trigger="scroll"].is-in > :nth-child(1),
:is([data-package="multipage"], [data-package="advanced"]) .hero--simple > .container.reveal[data-trigger="scroll"].is-in > :nth-child(1) { transition-delay: 0ms; }
:is([data-package="multipage"], [data-package="advanced"]) .hero .reveal[data-trigger="scroll"].is-in > :nth-child(2),
:is([data-package="multipage"], [data-package="advanced"]) .hero--simple > .container.reveal[data-trigger="scroll"].is-in > :nth-child(2) { transition-delay: 80ms; }
:is([data-package="multipage"], [data-package="advanced"]) .hero .reveal[data-trigger="scroll"].is-in > :nth-child(3),
:is([data-package="multipage"], [data-package="advanced"]) .hero--simple > .container.reveal[data-trigger="scroll"].is-in > :nth-child(3) { transition-delay: 160ms; }
:is([data-package="multipage"], [data-package="advanced"]) .hero .reveal[data-trigger="scroll"].is-in > :nth-child(4),
:is([data-package="multipage"], [data-package="advanced"]) .hero--simple > .container.reveal[data-trigger="scroll"].is-in > :nth-child(4) { transition-delay: 240ms; }
:is([data-package="multipage"], [data-package="advanced"]) .hero .reveal[data-trigger="scroll"].is-in > :nth-child(5),
:is([data-package="multipage"], [data-package="advanced"]) .hero--simple > .container.reveal[data-trigger="scroll"].is-in > :nth-child(5) { transition-delay: 320ms; }
@media (prefers-reduced-motion: reduce) {
  :is([data-package="multipage"], [data-package="advanced"]) .hero .reveal[data-trigger="scroll"] > *,
  :is([data-package="multipage"], [data-package="advanced"]) .hero--simple > .container.reveal[data-trigger="scroll"] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Landing hero text reveal — tightened to ~60ms so headline is
   effectively immediate after first paint (was 0.7s). Only overrides
   the hero reveal; scroll-triggered reveals on other sections keep
   the standard 0.7s for a pleasant scroll experience. */
[data-package="landing"] .hero .reveal {
  transition: opacity 60ms var(--ease), transform 60ms var(--ease);
}

/* ---- Per-theme multipage tints ---- */

/* default — warm brown ink scrim, amber separators */
[data-theme="default"]:is([data-package="multipage"], [data-package="advanced"]),
html:not([data-theme]):is([data-package="multipage"], [data-package="advanced"]) {
  --hero-scrim-top: rgba(38, 24, 10, 0.15);
  --hero-scrim-mid: rgba(38, 24, 10, 0.5);
  --hero-scrim-bot: rgba(30, 20, 10, 0.8);
  --hero-scrim-sidewash: rgba(30, 20, 10, 0.5);
}
:is([data-package="multipage"], [data-package="advanced"]):not([data-theme]) .proof-strip,
html:not([data-theme]):is([data-package="multipage"], [data-package="advanced"]) .proof-strip {
  background: #1a140c;
  color: #fdf8e8;
}

/* midnight-lounge — near-black with extra brass glow at the edges */
[data-theme="midnight-lounge"]:is([data-package="multipage"], [data-package="advanced"]) {
  --hero-scrim-top: rgba(11, 13, 20, 0.08);
  --hero-scrim-mid: rgba(11, 13, 20, 0.32);
  --hero-scrim-bot: rgba(7, 9, 14, 0.60);
  --hero-scrim-sidewash: rgba(11, 13, 20, 0.30);
  --hero-ink: #f2e7c9;
  --hero-ink-soft: rgba(242, 231, 201, 0.86);
  --hero-rule: rgba(212, 162, 76, 0.35);
}
[data-theme="midnight-lounge"]:is([data-package="multipage"], [data-package="advanced"]) .proof-strip {
  background: #0b0d14;
  color: #f2e7c9;
}
[data-theme="midnight-lounge"]:is([data-package="multipage"], [data-package="advanced"]) .nav {
  background: rgba(11, 13, 20, 0.6);
}

/* garden-bistro — deep forest scrim, peach accent */
[data-theme="garden-bistro"]:is([data-package="multipage"], [data-package="advanced"]) {
  --hero-scrim-top: rgba(26, 46, 34, 0.25);
  --hero-scrim-mid: rgba(26, 46, 34, 0.55);
  --hero-scrim-bot: rgba(14, 30, 22, 0.85);
  --hero-scrim-sidewash: rgba(26, 46, 34, 0.5);
  --hero-ink: #faf5ec;
  --hero-ink-soft: rgba(250, 245, 236, 0.86);
  --hero-rule: rgba(250, 245, 236, 0.5);
  --hero-accent: #e39b7a;
}
[data-theme="garden-bistro"]:is([data-package="multipage"], [data-package="advanced"]) .proof-strip {
  background: #1a2e22;
  color: #faf5ec;
}
[data-theme="garden-bistro"]:is([data-package="multipage"], [data-package="advanced"]) .proof-row strong { color: #faf5ec; }
[data-theme="garden-bistro"]:is([data-package="multipage"], [data-package="advanced"]) .nav {
  background: rgba(26, 46, 34, 0.55);
}

/* press-editorial overrides stay in its earlier block (masthead,
   oxblood separators, numbered kickers, etc.). */

/* ============================================================
   EXPERIMENT — midnight-lounge × multipage × homepage only
   The hero image becomes a page-level fixed background behind every
   section, scrim-tinted so copy stays readable. Sub-pages don't have
   --hero-bg on body, so the var resolves to none and they render as
   before.

   Uses a position:fixed ::before on body (instead of
   background-attachment:fixed) so the effect works identically on
   mobile — where fixed attachment is unreliable and cover against a
   full-page-height body scales the image enormously.
   ============================================================ */
[data-theme="midnight-lounge"]:is([data-package="multipage"], [data-package="advanced"]) body[style*="--hero-bg"] {
  /* Was: #0b0d14. var-driven now — picker-responsive on Page bg.
   * Exact when --color-surface = #0b0d14 (theme default). */
  background-color: var(--color-surface);
  position: relative;
  min-height: 100vh;
}
[data-theme="midnight-lounge"]:is([data-package="multipage"], [data-package="advanced"]) body[style*="--hero-bg"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: var(--hero-bg, none);
  background-size: 82% auto;
  background-position: center;
  background-repeat: no-repeat;
  /* Was: #0b0d14. Scrim behind the fixed hero image — picker-responsive. */
  background-color: var(--color-surface);
  pointer-events: none;
}
@media (max-width: 640px) {
  [data-theme="midnight-lounge"]:is([data-package="multipage"], [data-package="advanced"]) body[style*="--hero-bg"]::before {
    background-size: 123% auto;
  }
}
[data-theme="midnight-lounge"]:is([data-package="multipage"], [data-package="advanced"]) body[style*="--hero-bg"] .hero {
  background-image: none;
  background-color: transparent;
}
[data-theme="midnight-lounge"]:is([data-package="multipage"], [data-package="advanced"]) body[style*="--hero-bg"] .section,
[data-theme="midnight-lounge"]:is([data-package="multipage"], [data-package="advanced"]) body[style*="--hero-bg"] .section-alt,
[data-theme="midnight-lounge"]:is([data-package="multipage"], [data-package="advanced"]) body[style*="--hero-bg"] .section-warm,
[data-theme="midnight-lounge"]:is([data-package="multipage"], [data-package="advanced"]) body[style*="--hero-bg"] .proof-strip {
  /* Was: rgba(11, 13, 20, 0.82). Translucent overlay above the fixed
   * hero image. Picker-responsive — when operator picks a light Page
   * bg, sections become translucent-light instead of translucent-dark
   * (frosted-glass effect over the hero photo, in the operator's
   * chosen colour). Exact when --color-surface = #0b0d14. */
  background-color: color-mix(in srgb, var(--color-surface) 82%, transparent);
}
[data-theme="midnight-lounge"]:is([data-package="multipage"], [data-package="advanced"]) body[style*="--hero-bg"] .footer {
  /* Was: rgba(11, 13, 20, 0.92). Same pattern as sections — picker
   * responsive. Exact at theme default. */
  background-color: color-mix(in srgb, var(--color-surface) 92%, transparent);
}

/* ============================================================
   THEME: structural-mono
   Sans-only, ink-on-warm-white, single brand accent. Confident
   geometry over decoration. Numbered hairline rows replace cards.
   Built for trades whose competence reads through structure:
   electricians, plumbers, builders, mechanics, fabricators.
   ============================================================ */

[data-theme="structural-mono"] {
  /* Tinted-near-whites + structural neutrals. Deep charcoal-blue ink. */
  --color-primary: #0e131c;            /* used as heading colour by base */
  --color-ink: #0e131c;
  --color-ink-soft: #5e6573;            /* structural mid-tone — also grid lines */
  --color-ink-faint: #9ba1ad;
  --color-surface: #f9f7f3;             /* warm-tinted near-white, never #fff */
  --color-surface-2: #f3efe8;           /* alternate band, slightly cooler */
  --color-surface-warm: #f3efe8;
  --color-line: rgba(14, 19, 28, 0.10);
  --color-line-strong: rgba(14, 19, 28, 0.20);

  --shadow-sm: 0 1px 2px rgba(14, 19, 28, 0.04);
  --shadow-md: 0 8px 24px -12px rgba(14, 19, 28, 0.12);
  --shadow-lg: 0 32px 64px -32px rgba(14, 19, 28, 0.28);

  /* Sharper edges than the warm-rounded default. */
  --radius-sm: 0.25rem;
  --radius: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
}

[data-theme="structural-mono"] body {
  background: var(--color-surface);
  color: var(--color-ink);
  font-feature-settings: "ss01", "cv11", "tnum";
  /* Slightly tighter line-height for a more deliberate text block. */
  line-height: 1.55;
}

/* Sans-only. Inter Tight (or Inter) for both heading + body. The font link
   in generate.ts ships Inter Tight @ 600/700/800. */
[data-theme="structural-mono"] h1,
[data-theme="structural-mono"] h2,
[data-theme="structural-mono"] h3,
[data-theme="structural-mono"] h4 {
  font-family: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.028em;
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.08;
  text-wrap: balance;
}
[data-theme="structural-mono"] h1 { font-weight: 800; }

/* Modular scale: 1.25 ratio steps. Display sizes are large + assertive. */
[data-theme="structural-mono"] .hero h1 {
  font-size: clamp(2.5rem, 5.4vw + 0.5rem, 4.5rem);
  letter-spacing: -0.034em;
}
[data-theme="structural-mono"] .section-title h2,
[data-theme="structural-mono"] .feature-split h2,
[data-theme="structural-mono"] .cta-band h2 {
  font-size: clamp(1.75rem, 2.8vw + 0.5rem, 2.5rem);
}

/* Eyebrow — small-caps tracked, leading mono number ("01 — Services").
   The base eyebrow already has the structural shape; we restyle here. */
[data-theme="structural-mono"] .eyebrow {
  background: transparent;
  color: var(--color-ink-soft);
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "tnum", "ss01";
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  position: relative;
}
[data-theme="structural-mono"] .eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--color-ink-soft);
  margin: 0;
}

/* ---------------------------------------- Nav */
[data-theme="structural-mono"] .nav {
  background: rgba(249, 247, 243, 0.86);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease);
}
/* Reveal hairline once the user scrolls past the top. Modern browsers get a
   true scroll-driven animation; older browsers fall back to a permanently
   visible hairline (better than a permanently invisible one). */
@supports (animation-timeline: scroll()) {
  [data-theme="structural-mono"] .nav {
    animation: structural-mono-nav-hairline 1ms linear both;
    animation-timeline: scroll(root);
    animation-range: 0 80px;
  }
  @keyframes structural-mono-nav-hairline {
    to { border-bottom-color: var(--color-line); }
  }
}
@supports not (animation-timeline: scroll()) {
  [data-theme="structural-mono"] .nav { border-bottom-color: var(--color-line); }
}
[data-theme="structural-mono"] .nav-brand {
  color: var(--color-ink);
  font-family: "Inter Tight", "Inter", ui-sans-serif, sans-serif;
  font-weight: 700;
  letter-spacing: -0.014em;
}
[data-theme="structural-mono"] .nav-brand__mark {
  background: var(--color-ink);
  color: var(--color-surface);
  border-radius: var(--radius-sm);
  box-shadow: none;
  font-family: "Inter Tight", "Inter", ui-sans-serif, sans-serif;
  font-weight: 700;
}
[data-theme="structural-mono"] .nav-links a {
  color: var(--color-ink-soft);
  font-weight: 500;
  letter-spacing: -0.005em;
}
[data-theme="structural-mono"] .nav-links a:hover { color: var(--color-ink); }
[data-theme="structural-mono"] .nav-links a.is-active { color: var(--color-ink); }
[data-theme="structural-mono"] .nav-links a.is-active::after {
  background: var(--color-accent);
  height: 2px;
  border-radius: 0;
}

/* ---------------------------------------- Buttons */
[data-theme="structural-mono"] .btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: color 120ms var(--ease), background-color 120ms var(--ease), border-color 120ms var(--ease);
  /* No translate on hover. Color-only. */
}
[data-theme="structural-mono"] .btn-primary {
  background: var(--color-ink);
  color: var(--color-surface);
  box-shadow: none;
}
[data-theme="structural-mono"] .btn-primary:hover {
  background: var(--color-accent);
  color: var(--color-surface);
}
[data-theme="structural-mono"] .btn-ghost {
  background: transparent;
  border: 1px solid var(--color-line-strong);
  color: var(--color-ink);
}
[data-theme="structural-mono"] .btn-ghost:hover {
  background: transparent;
  border-color: var(--color-ink);
  color: var(--color-ink);
}
[data-theme="structural-mono"] .btn-arrow::after {
  content: " →";
  display: inline-block;
  margin-left: 0.35em;
  transition: transform 120ms var(--ease);
}
[data-theme="structural-mono"] .btn-arrow:hover::after { transform: translateX(2px); }

/* ---------------------------------------- Hero */
[data-theme="structural-mono"] .hero {
  background: var(--color-surface);
  padding: clamp(96px, 12vw, 144px) 0 clamp(64px, 8vw, 96px);
  position: relative;
  overflow: hidden;
}
[data-theme="structural-mono"] .hero::before {
  /* Visible structural rule — single thin vertical guide on the right edge. */
  content: "";
  position: absolute;
  top: clamp(96px, 12vw, 144px);
  right: clamp(24px, 5vw, 64px);
  bottom: clamp(64px, 8vw, 96px);
  width: 1px;
  background: var(--color-line);
  z-index: 0;
}
/* Index marker ("01 / 04" pinned to the structural rule) is defined in the
   multipage block further down — non-multipage packages have a different
   page count, so no base-level ::after content here. */
@media (max-width: 768px) {
  [data-theme="structural-mono"] .hero::before,
  [data-theme="structural-mono"] .hero::after { display: none; }
}
[data-theme="structural-mono"] .hero-art { display: none; }   /* type-led; no hero photo */
[data-theme="structural-mono"] .hero-grid {
  display: block;
  max-width: 880px;
  position: relative;
  z-index: 2;
}
[data-theme="structural-mono"] .hero h1 {
  margin: 0.6rem 0 1.25rem;
}
[data-theme="structural-mono"] .hero-lede {
  font-size: clamp(1.05rem, 0.4vw + 1rem, 1.2rem);
  color: var(--color-ink-soft);
  max-width: 56ch;
  line-height: 1.55;
  margin: 0 0 1.75rem;
}
[data-theme="structural-mono"] .hero-cta {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}
[data-theme="structural-mono"] .hero-meta {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-line);
  color: var(--color-ink-soft);
  font-size: 0.875rem;
  font-feature-settings: "tnum";
}

/* ---------------------------------------- Trust band (proof-strip) */
[data-theme="structural-mono"] .proof-strip {
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding: 28px 0;
}
[data-theme="structural-mono"] .proof-row {
  color: var(--color-ink-soft);
  font-feature-settings: "tnum";
  font-size: 0.92rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  justify-content: space-between;
  align-items: center;
}
[data-theme="structural-mono"] .proof-row__track {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  width: 100%;
  justify-content: space-between;
  /* Disable the marquee (used by press-editorial × multipage). */
  animation: none !important;
  transform: none !important;
}
[data-theme="structural-mono"] .proof-row__dupe { display: none; }
[data-theme="structural-mono"] .proof-row > span:not(.dot),
[data-theme="structural-mono"] .proof-row__track > span:not(.dot) {
  flex: 1 1 200px;
  padding: 0 24px;
  border-left: 1px solid var(--color-line);
  text-align: left;
}
[data-theme="structural-mono"] .proof-row > span:first-child,
[data-theme="structural-mono"] .proof-row__track > span:first-child { border-left: 0; padding-left: 0; }
[data-theme="structural-mono"] .proof-row .dot { display: none; }   /* dividers via border-left now */
[data-theme="structural-mono"] .proof-row strong { color: var(--color-ink); font-weight: 700; }
@media (max-width: 600px) {
  [data-theme="structural-mono"] .proof-row > span:not(.dot),
  [data-theme="structural-mono"] .proof-row__track > span:not(.dot) {
    flex-basis: 100%;
    border-left: 0;
    border-top: 1px solid var(--color-line);
    padding: 12px 0;
  }
  [data-theme="structural-mono"] .proof-row > span:first-child,
  [data-theme="structural-mono"] .proof-row__track > span:first-child { border-top: 0; padding-top: 0; }
}

/* ---------------------------------------- Sections */
[data-theme="structural-mono"] .section { padding: clamp(80px, 9vw, 112px) 0; }
[data-theme="structural-mono"] .section-alt {
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding: clamp(96px, 11vw, 132px) 0 clamp(64px, 7vw, 88px);   /* asymmetric */
}
[data-theme="structural-mono"] .section-warm {
  background: var(--color-surface-2);
  padding: clamp(72px, 8vw, 100px) 0;
}
[data-theme="structural-mono"] .section-title { max-width: 64ch; }
[data-theme="structural-mono"] .section-title--center { max-width: 64ch; }
[data-theme="structural-mono"] .section-title h2 { margin: 0.6rem 0 0.85rem; }
[data-theme="structural-mono"] .section-title p,
[data-theme="structural-mono"] .lede {
  color: var(--color-ink-soft);
  font-size: 1.05rem;
  max-width: 60ch;
}

/* ---------------------------------------- Service rows
   Existing markup: <article class="card card-service card-service--compact">
   contains .card-service__num, h3, p. We collapse the grid into a vertical
   stack of hairline-divided rows. The number is large + mono on the left;
   title and oneliner align beside it. NOT cards. */
[data-theme="structural-mono"] .grid-3 {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 2rem;
}
[data-theme="structural-mono"] .card-service {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--color-line);
  border-radius: 0;
  box-shadow: none;
  padding: clamp(20px, 3vw, 32px) 0;
  /* Two columns. Col 1 holds the leading mono number AND the price tag
     stacked underneath. Col 2 takes the title, description, and any
     highlights list. The head spans all rows so vertical stacking on the
     right doesn't push the number column out of alignment. */
  display: grid;
  grid-template-columns: 80px 1fr;
  column-gap: clamp(16px, 2vw, 32px);
  row-gap: 0.5rem;
  align-items: baseline;
  transition: background-color 120ms var(--ease);
}
[data-theme="structural-mono"] .card-service:last-child { border-bottom: 1px solid var(--color-line); }
[data-theme="structural-mono"] .card-service:hover { background-color: rgba(14, 19, 28, 0.025); }
[data-theme="structural-mono"] .card-service__head {
  grid-column: 1;
  grid-row: 1 / -1;            /* span every row in col 1 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0;
}
[data-theme="structural-mono"] .card-service > h3,
[data-theme="structural-mono"] .card-service > p,
[data-theme="structural-mono"] .card-service > ul {
  grid-column: 2;
}
[data-theme="structural-mono"] .card-service__price {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "tnum";
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-ink-soft);
  letter-spacing: 0;
  background: transparent;
  border: 0;
  padding: 0;
}
/* Highlights list — strip default disc, render as a sparse comma-feel row. */
[data-theme="structural-mono"] .card-service > ul {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}
[data-theme="structural-mono"] .card-service > ul li {
  position: relative;
  padding-left: 12px;
}
[data-theme="structural-mono"] .card-service > ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 4px;
  height: 1px;
  background: var(--color-ink-faint);
}
[data-theme="structural-mono"] .card-service__num {
  font-family: "Inter Tight", "Inter", ui-sans-serif, sans-serif;
  font-feature-settings: "tnum";
  font-size: clamp(2rem, 3.6vw + 0.4rem, 3rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--color-ink-faint);
  line-height: 1;
}
[data-theme="structural-mono"] .card-service h3 {
  font-size: clamp(1.15rem, 0.8vw + 0.95rem, 1.4rem);
  margin: 0 0 0.4rem;
  font-weight: 700;
  letter-spacing: -0.018em;
}
[data-theme="structural-mono"] .card-service p {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 0.98rem;
  max-width: 60ch;
}
@media (max-width: 600px) {
  [data-theme="structural-mono"] .card-service {
    grid-template-columns: 56px 1fr;
    gap: 16px;
    padding: 18px 0;
  }
  [data-theme="structural-mono"] .card-service__num { font-size: 1.5rem; }
}

/* ---------------------------------------- Feature split (about teaser) */
[data-theme="structural-mono"] .feature-split {
  border-top: 1px solid var(--color-line);
  padding-top: clamp(48px, 6vw, 72px);
  align-items: start;
}
[data-theme="structural-mono"] .feature-split__art {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: none;
}
[data-theme="structural-mono"] .feature-split__art--hero-bg {
  /* Even when a hero_bg is supplied, structural-mono uses a flat panel,
     not the photo. We hide the bg-image overlay. */
  background-image: none !important;
}

/* ---------------------------------------- Stats / count-up */
[data-theme="structural-mono"] .stat-row {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  border-radius: 0;
  box-shadow: none;
  padding: clamp(40px, 5vw, 64px) 0;
}
[data-theme="structural-mono"] .stat-row__value {
  font-family: "Inter Tight", "Inter", ui-sans-serif, sans-serif;
  font-feature-settings: "tnum";
  font-size: clamp(2.25rem, 4vw + 0.5rem, 3.5rem);
  letter-spacing: -0.034em;
  font-weight: 700;
  color: var(--color-ink);
}
[data-theme="structural-mono"] .stat-row__label {
  color: var(--color-ink-soft);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ---------------------------------------- Testimonials, FAQs, contact, footer */
[data-theme="structural-mono"] .testimonial,
[data-theme="structural-mono"] .post-card,
[data-theme="structural-mono"] .contact-card,
[data-theme="structural-mono"] .empty,
[data-theme="structural-mono"] .value {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: none;
}
[data-theme="structural-mono"] .testimonial__text { color: var(--color-ink); font-style: normal; }
[data-theme="structural-mono"] .testimonial__author { color: var(--color-ink-soft); }
[data-theme="structural-mono"] .testimonial__stars,
[data-theme="structural-mono"] .hero-art__stars,
[data-theme="structural-mono"] .stat-row__value strong { color: var(--color-accent); }

[data-theme="structural-mono"] .faq details,
[data-theme="structural-mono"] .faq-list details {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  border-radius: 0;
  padding: 0;
}
[data-theme="structural-mono"] .faq details summary,
[data-theme="structural-mono"] .faq-list details summary {
  padding: clamp(20px, 2.5vw, 28px) 0;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.012em;
}
[data-theme="structural-mono"] .faq details summary::after,
[data-theme="structural-mono"] .faq-list details summary::after { color: var(--color-ink-soft); }
[data-theme="structural-mono"] .faq details[open] summary,
[data-theme="structural-mono"] .faq-list details[open] summary { color: var(--color-ink); }
[data-theme="structural-mono"] .faq details p,
[data-theme="structural-mono"] .faq-list details p { padding: 0 0 clamp(16px, 2vw, 24px); margin: 0; max-width: 70ch; }

[data-theme="structural-mono"] .cta-band {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: clamp(32px, 4vw, 56px);
}
[data-theme="structural-mono"] .cta-band h2 { font-size: clamp(1.5rem, 2.4vw + 0.5rem, 2.25rem); margin: 0 0 0.6rem; }
[data-theme="structural-mono"] .cta-band p { margin: 0; color: var(--color-ink-soft); }

[data-theme="structural-mono"] .footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
  color: var(--color-ink-soft);
}
[data-theme="structural-mono"] .footer h4 {
  font-family: "Inter Tight", "Inter", ui-sans-serif, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
[data-theme="structural-mono"] .footer-brand__name {
  color: var(--color-ink);
  font-family: "Inter Tight", "Inter", ui-sans-serif, sans-serif;
  font-weight: 700;
  letter-spacing: -0.012em;
}
[data-theme="structural-mono"] .footer-brand__tag { color: var(--color-ink-soft); font-style: normal; }
[data-theme="structural-mono"] .footer ul a { color: var(--color-ink-soft); }
[data-theme="structural-mono"] .footer ul a:hover { color: var(--color-ink); }
[data-theme="structural-mono"] .footer-bottom {
  border-top: 1px solid var(--color-line);
  color: var(--color-ink-faint);
  font-size: 0.85rem;
}

/* ---------------------------------------- Sticky mobile call CTA
   Element rendered by generate.ts only when the customer has a phone number
   on file. Visible on every theme below 768px wide — the primary mobile
   conversion path. Themes can restyle (background / colour / radius) but
   should not hide it. */
.sticky-call {
  display: none;                             /* desktop default: hidden */
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 60;
  background: var(--color-primary);
  color: var(--color-surface, #fff);
  text-decoration: none;
  text-align: center;
  padding: 14px 20px;
  border-radius: 999px;                      /* pill by default; structural-mono squares this */
  font-weight: 700;
  letter-spacing: -0.012em;
  box-shadow: 0 12px 32px -10px rgba(15, 23, 42, 0.45);
  font-feature-settings: "tnum";
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 56px;                          /* 44pt+ tap target with generous padding */
}
.sticky-call__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
}
.sticky-call__icon svg { display: block; }
.sticky-call__label { font-weight: 700; }
.sticky-call__num   { font-weight: 600; opacity: 0.86; }
.sticky-call:hover  { background: var(--color-accent); color: #fff; }

@media (max-width: 720px) {
  .sticky-call { display: inline-flex; }
  /* Reserve room above the footer only when the sticky-call pill is actually
     in the DOM (renderStickyCall returns '' when c.phone is missing). */
  body:has(.sticky-call) { padding-bottom: 92px; }
}

/* Theme-specific restyles — square edges + theme accent on structural-mono. */
[data-theme="structural-mono"] .sticky-call {
  background: var(--color-ink);
  color: var(--color-surface);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px -10px rgba(14, 19, 28, 0.45);
}
[data-theme="structural-mono"] .sticky-call:hover { background: var(--color-accent); color: var(--color-surface); }
[data-theme="midnight-lounge"] .sticky-call {
  background: var(--color-accent);
  color: #0b0d14;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}
[data-theme="midnight-lounge"] .sticky-call:hover { background: #f0d186; color: #0b0d14; }
[data-theme="press-editorial"] .sticky-call {
  background: var(--color-primary);
  color: var(--color-surface);
}
[data-theme="garden-bistro"] .sticky-call {
  background: var(--color-primary);
  color: var(--color-surface, #fef9f1);
  border-radius: 999px;
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="structural-mono"] .btn-arrow::after { transition: none; }
}

/* ---------------------------------------- Reveal-on-scroll
   The structural-mono lane is content-first: every element renders at full
   opacity by default, regardless of JS state. The other themes use
   `.reveal { opacity: 0 }` + JS-triggered `.is-in { opacity: 1 }`. We override
   that so a slow CDN, blocked JS, or a missed IntersectionObserver tick can
   never blank the hero. The lane gets a single, optional 240ms fade-in
   applied to elements we explicitly want to animate (currently none — the
   brief specifies static hero, no parallax). */
[data-theme="structural-mono"] .reveal,
[data-theme="structural-mono"] .reveal[data-from],
[data-theme="structural-mono"] .reveal[data-from="up-lg"] {
  opacity: 1;
  transform: none;
  transition: opacity 240ms var(--ease);
}
[data-theme="structural-mono"] .reveal.is-in,
[data-theme="structural-mono"] .reveal.is-visible,
[data-theme="structural-mono"] .reveal.is-revealed {
  opacity: 1;
  transform: none;
}
/* Belt-and-braces: the parallax script writes inline `transform: translate3d(...)`
   onto reveals tagged with `data-parallax`. Force-zero so the hero never
   slides off as the user scrolls — the brief is explicit: no parallax. */
[data-theme="structural-mono"] .reveal[data-parallax] {
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="structural-mono"] .reveal { transition: none; opacity: 1; }
}

/* Hide marquee + masthead-strip that other themes attach (they target a
   specific theme via [data-theme="..."] but if a future template imports
   the wrong partial the structural-mono lane stays clean). */
[data-theme="structural-mono"] .marquee,
[data-theme="structural-mono"] .masthead-strip { display: none; }

/* ============================================================
   structural-mono × multipage — undo the multipage default hero
   ============================================================
   The multipage package defaults to a cinematic image-led hero: full-bleed
   background photo, dark scrim layered on top, cream-on-dark typography
   (`--hero-ink: #f5eee0`). That works for warm/dark themes; it actively
   fights this lane. We restore the type-led, light-surface treatment.
   Specificity is bumped via the dual-attribute selector so we win over the
   `:is([data-package="multipage"], [data-package="advanced"]) .hero h1` rules below the theme cascade. */

[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) {
  /* Hero is image-led when a `--hero-bg` is supplied; type-led otherwise.
     `--hero-ink` defaults to LIGHT (cream) for the photo case. The
     no-image fallback below flips it to dark. */
  --hero-ink: #fafaf6;
  --hero-ink-soft: rgba(250, 250, 246, 0.86);
  --hero-rule: rgba(250, 250, 246, 0.32);
  --hero-accent: var(--color-accent);
  /* Scrim: a sharp top-left vignette that dims the photo enough for
     light type to read at AA contrast without crushing the image. */
  --hero-scrim-top: rgba(8, 12, 18, 0.36);
  --hero-scrim-mid: rgba(8, 12, 18, 0.62);
  --hero-scrim-bot: rgba(8, 12, 18, 0.78);
  --hero-scrim-sidewash: rgba(8, 12, 18, 0.55);
}
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) .hero,
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple {
  /* Inherit the multipage package's default background-image / fixed-attach
     behaviour — those rules already apply `background-image: var(--hero-bg)`
     and the necessary scrim layering via ::before. */
  color: var(--hero-ink);
  border-top: 0;
  border-bottom: 0;
}
/* No hero image supplied — fall back to the type-led warm-white treatment.
   Body has `style="--hero-bg: url(...)"` only when content.hero_image is set;
   in the absence of that inline style we flip ink back to dark. */
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body:not([style*="--hero-bg"]):not(:has(.hero[style*="--hero-bg"])) {
  --hero-ink: var(--color-ink);
  --hero-ink-soft: var(--color-ink-soft);
  --hero-rule: var(--color-line);
  --hero-scrim-top: transparent;
  --hero-scrim-mid: transparent;
  --hero-scrim-bot: transparent;
  --hero-scrim-sidewash: transparent;
}
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body:not([style*="--hero-bg"]):not(:has(.hero[style*="--hero-bg"])) .hero,
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body:not([style*="--hero-bg"]):not(:has(.hero[style*="--hero-bg"])) .hero--simple {
  background-image: none;
  background-color: var(--color-surface);
  background-attachment: scroll;
  min-height: 0;
}

/* Structural vertical rule on the right edge of the hero — visible on both
   image-led and type-led paths but tinted to suit the surface behind it.
   This *replaces* the multipage default ::before scrim painter, since we
   want our own thin guide instead of a scrim layer here. */
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) .hero::before {
  content: "";
  position: absolute;
  top: clamp(96px, 12vw, 144px);
  right: clamp(24px, 5vw, 64px);
  bottom: clamp(64px, 8vw, 96px);
  left: auto;
  width: 1px;
  height: auto;
  background: var(--hero-rule);
  background-image: none;
  filter: none;
  z-index: 1;
}
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) .hero::after {
  content: "01 / 04";
  /* Re-declare display so the package-level `display: none` (line ~1650)
     does not win the per-property cascade and hide the marker. */
  display: block;
  position: absolute;
  top: clamp(96px, 12vw, 144px);
  right: clamp(24px, 5vw, 64px);
  transform: translate(50%, -8px);
  background: transparent;
  padding: 0 8px;
  font-family: "Inter Tight", "Inter", ui-sans-serif, sans-serif;
  font-feature-settings: "tnum";
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--hero-ink-soft);
  z-index: 2;
}
/* The image-led variant overlays the index marker on the photo — give it a
   subtle dark plate so it stays legible regardless of what's behind it. */
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body:is([style*="--hero-bg"], :has(.hero[style*="--hero-bg"])) .hero::after {
  background: rgba(8, 12, 18, 0.55);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 4px 10px;
  transform: translate(50%, 0);
}

/* Image-led hero: paint the scrim on a separate ::after-equivalent layer.
   The multipage package's default ::before is overridden above (we use it
   for the rule); we use a different mechanism — gradient on the hero
   element's own background — to layer the scrim above the photo. */
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body:is([style*="--hero-bg"], :has(.hero[style*="--hero-bg"])) .hero,
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body:is([style*="--hero-bg"], :has(.hero[style*="--hero-bg"])) .hero--simple {
  background-image:
    linear-gradient(180deg,
      var(--hero-scrim-top) 0%,
      var(--hero-scrim-mid) 50%,
      var(--hero-scrim-bot) 100%),
    var(--hero-bg);
  background-size: cover, cover;
  background-position: center, center;
  background-attachment: scroll, scroll;
  background-color: #0c1117;
}
@media (min-width: 1024px) {
  /* On larger screens, fix the photo for the parallax-feel typical to the
     existing multipage themes. */
  [data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body:is([style*="--hero-bg"], :has(.hero[style*="--hero-bg"])) .hero,
  [data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body:is([style*="--hero-bg"], :has(.hero[style*="--hero-bg"])) .hero--simple {
    background-attachment: scroll, fixed;
  }
}

[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple::before {
  /* Undo only the package-default scrim painter — keep `content: ""` so the
     structural vertical rule defined above still renders on sub-pages. */
  background: none;
  background-image: none;
}
@media (max-width: 768px) {
  [data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) .hero::before,
  [data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) .hero::after { display: none; }
}
/* Sub-page index markers. */
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body:has(.nav-links a[href="services.html"].is-active) .hero::after,
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body[data-page="services"] .hero::after { content: "02 / 04"; }
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body:has(.nav-links a[href="about.html"].is-active) .hero::after,
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body[data-page="about"] .hero::after { content: "03 / 04"; }
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body:has(.nav-links a[href="contact.html"].is-active) .hero::after,
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body[data-page="contact"] .hero::after { content: "04 / 04"; }

/* Image-led hero needs more vertical breathing room — restore the
   package default min-height. Type-led path keeps the natural flow. */
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body:is([style*="--hero-bg"], :has(.hero[style*="--hero-bg"])) .hero.hero--split {
  min-height: min(86vh, 720px);
  padding: clamp(96px, 12vw, 168px) 0 clamp(96px, 10vw, 132px);
}
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body:is([style*="--hero-bg"], :has(.hero[style*="--hero-bg"])) .hero--simple {
  min-height: min(58vh, 520px);
  padding: clamp(96px, 12vw, 144px) 0 clamp(64px, 8vw, 96px);
}
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body:not([style*="--hero-bg"]):not(:has(.hero[style*="--hero-bg"])) .hero.hero--split,
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body:not([style*="--hero-bg"]):not(:has(.hero[style*="--hero-bg"])) .hero--simple {
  min-height: 0;
  padding: clamp(96px, 12vw, 144px) 0 clamp(64px, 8vw, 96px);
}
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) .hero.hero--split > .container,
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple > .container {
  position: relative; z-index: 2;
  min-height: 0;
  padding-block: 0;
  display: block;
  text-align: left;
  align-items: flex-start;
}
/* Type colours follow `--hero-ink` so the same rule covers both image-led
   (light cream) and type-led (dark ink) paths. */
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) .hero h1,
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple h1 {
  color: var(--hero-ink);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
  font-size: clamp(2.5rem, 5.4vw + 0.5rem, 4.5rem);
  letter-spacing: -0.034em;
  margin-top: 0.6rem;
}
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body:not([style*="--hero-bg"]):not(:has(.hero[style*="--hero-bg"])) .hero h1,
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body:not([style*="--hero-bg"]):not(:has(.hero[style*="--hero-bg"])) .hero--simple h1 {
  text-shadow: none;
}
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) .hero .hero-lede,
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple .hero-lede {
  color: var(--hero-ink-soft);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
  margin: 0 0 1.75rem;
}
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body:not([style*="--hero-bg"]):not(:has(.hero[style*="--hero-bg"])) .hero .hero-lede,
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body:not([style*="--hero-bg"]):not(:has(.hero[style*="--hero-bg"])) .hero--simple .hero-lede {
  text-shadow: none;
}
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) .hero .eyebrow,
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple .eyebrow {
  background: transparent;
  color: var(--hero-ink-soft);
  border: 0;
  border-radius: 0;
  padding: 0;
  letter-spacing: 0.18em;
}
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) .hero .eyebrow::before,
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple .eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--hero-ink-soft);
  margin-right: 0.65rem;
  vertical-align: middle;
}
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) .hero .hero-meta {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hero-rule);
  color: var(--hero-ink-soft);
  font-size: 0.875rem;
  font-feature-settings: "tnum";
}
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) .hero-meta strong {
  color: var(--hero-ink);
}
/* Hero buttons over the photo: keep the dark fill (always readable on a
   scrim) but flip the ghost button to a light translucent panel so it
   reads against the image. */
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body:is([style*="--hero-bg"], :has(.hero[style*="--hero-bg"])) .hero .btn-primary {
  background: var(--color-ink);
  color: var(--color-surface);
}
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body:is([style*="--hero-bg"], :has(.hero[style*="--hero-bg"])) .hero .btn-primary:hover {
  background: var(--color-accent);
  color: var(--color-surface);
}
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body:is([style*="--hero-bg"], :has(.hero[style*="--hero-bg"])) .hero .btn-ghost {
  background: rgba(250, 250, 246, 0.08);
  border: 1px solid rgba(250, 250, 246, 0.32);
  color: var(--hero-ink);
  backdrop-filter: blur(6px);
}
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body:is([style*="--hero-bg"], :has(.hero[style*="--hero-bg"])) .hero .btn-ghost:hover {
  background: rgba(250, 250, 246, 0.16);
  border-color: rgba(250, 250, 246, 0.6);
  color: var(--hero-ink);
}
/* Sub-page heroes use the same light treatment, plus the index marker
   tracks the page (services = 02, about = 03, contact = 04). */
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple {
  border-bottom: 1px solid var(--color-line);
}
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) .nav {
  border-bottom-color: var(--color-line);    /* always show, never transparent */
}

/* Image-led nav: dim translucent panel over the photo so the brand + nav
   links read as the lighter material against the scrim. */
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body:is([style*="--hero-bg"], :has(.hero[style*="--hero-bg"])) .nav {
  background: rgba(8, 12, 18, 0.55);
  border-bottom-color: rgba(250, 250, 246, 0.18);
  backdrop-filter: saturate(1.4) blur(12px);
}
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body:is([style*="--hero-bg"], :has(.hero[style*="--hero-bg"])) .nav-brand,
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body:is([style*="--hero-bg"], :has(.hero[style*="--hero-bg"])) .nav-links a,
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body:is([style*="--hero-bg"], :has(.hero[style*="--hero-bg"])) .nav-links a.is-active {
  color: var(--hero-ink);
}
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body:is([style*="--hero-bg"], :has(.hero[style*="--hero-bg"])) .nav-brand__mark {
  background: rgba(250, 250, 246, 0.16);
  color: var(--hero-ink);
  box-shadow: inset 0 0 0 1px rgba(250, 250, 246, 0.28);
}
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body:is([style*="--hero-bg"], :has(.hero[style*="--hero-bg"])) .nav-links a:hover {
  color: var(--color-accent);
}

/* Desktop Call button — flipped: dark fill, light text. Reads as the
   inverse of the surrounding ghost links and stands out as the call
   action without competing visually with the primary "Book" CTA (which
   stays the same dark fill — the two pair as a tight inverted-pill set). */
[data-theme="structural-mono"] .nav-call {
  background: var(--color-ink);
  border: 1px solid var(--color-ink);
  color: var(--color-surface);
}
[data-theme="structural-mono"] .nav-call .nav-call__num {
  color: var(--color-surface);
  opacity: 0.92;
}
[data-theme="structural-mono"] .nav-call:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-surface);
}
[data-theme="structural-mono"] .nav-call:hover .nav-call__num { color: var(--color-surface); opacity: 1; }
/* Image-led: the dark Call button already reads against the scrim, but
   give it a sharper border so it doesn't disappear into the dark nav panel. */
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body:is([style*="--hero-bg"], :has(.hero[style*="--hero-bg"])) .nav-call {
  background: var(--color-ink);
  border-color: rgba(250, 250, 246, 0.32);
  color: var(--hero-ink);
}
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body:is([style*="--hero-bg"], :has(.hero[style*="--hero-bg"])) .nav-call .nav-call__num {
  color: var(--hero-ink);
}
/* Trust band (proof-strip) sits directly under the hero on the homepage —
   when the hero is now light, the proof-strip needs the matching surface. */
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) .proof-strip {
  background: var(--color-surface);
}

/* Defuse the multipage hero's "scroll-up reveal" — the package wraps the
   hero text in a `.reveal[data-trigger="scroll"]` whose CHILDREN start at
   opacity:0 + translateY(-420px) + blur(6px) and only un-hide when JS
   adds `.is-in`. The structural-mono lane is type-led + static, so we
   force every child visible immediately. */
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) .hero .reveal[data-trigger="scroll"],
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple > .container.reveal[data-trigger="scroll"] {
  transform: none !important;
}
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) .hero .reveal[data-trigger="scroll"] > *,
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple > .container.reveal[data-trigger="scroll"] > * {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

/* ============================================================
   TEMPLATE-FAMILY UNIVERSAL HOOKS (Phase 1)
   Hooks emitted by every production family's section modules and
   referenced from across the section registry. Additive — these
   stack on top of the existing .btn / .hero / .faq / .value-grid
   cascade so every [data-theme] + [data-package] combination
   continues to inherit correctly.
   See: 00_project_control/website_builder/TEMPLATE_FAMILY_CSS_BRIEF.md
   ============================================================ */

/* .btn-xl — larger hero / final-CTA size. Used by every family's
   primary hero and final-CTA pair. Layers on top of .btn so the
   existing primary / ghost / accent / arrow / theme cascade (incl.
   structural-mono's square corners, midnight-lounge's brass fill,
   garden-bistro's peach hover) applies unchanged. */
.btn-xl {
  padding: 1.1rem 1.85rem;
  font-size: 1.05rem;
  font-weight: 700;
  min-height: 52px;                       /* >= 48px tap target with breathing room */
  letter-spacing: -0.006em;
}
@media (max-width: 540px) {
  .btn-xl {                                /* mobile-first: comfortable thumb target, full width by default */
    padding: 1.05rem 1.45rem;
    font-size: 1rem;
    min-height: 50px;
  }
}

/* .hero-subhead — sub-headline under the H1, before the hero CTA row.
   Heavier than .hero-lede (which is the longer body-tone paragraph
   inside the existing hero scaffolds) but lighter than the H1.
   Emitted by hero-call-first / hero-brand-lifestyle / hero-visual-led
   / hero-clinic-credibility — one line per family. */
.hero-subhead {
  font-size: clamp(1.1rem, 1.4vw + 0.4rem, 1.35rem);
  line-height: 1.5;
  color: var(--color-ink-soft);
  max-width: 56ch;
  margin: 0 0 1.5rem;
  text-wrap: pretty;
}
/* Multipage cinematic hero: subhead sits over the scrim with light
   ink and a subtle text-shadow for legibility, matching .hero-lede. */
:is([data-package="multipage"], [data-package="advanced"]) .hero .hero-subhead,
:is([data-package="multipage"], [data-package="advanced"]) .hero--simple .hero-subhead {
  color: var(--hero-ink-soft);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55);
}
:is([data-package="multipage"], [data-package="advanced"]) .hero--simple .hero-subhead { margin-inline: auto; }
/* structural-mono type-led hero (no --hero-bg): subhead returns to dark ink. */
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body:not([style*="--hero-bg"]):not(:has(.hero[style*="--hero-bg"])) .hero .hero-subhead,
[data-theme="structural-mono"]:is([data-package="multipage"], [data-package="advanced"]) body:not([style*="--hero-bg"]):not(:has(.hero[style*="--hero-bg"])) .hero--simple .hero-subhead {
  color: var(--color-ink-soft);
  text-shadow: none;
}

/* ============================================================
   TEMPLATE-FAMILY — urgent-local (Phase 2)
   Convert "right now" intent. Phone-call primacy, trust density,
   mobile-first. Theme-aware via existing tokens — emergency strips
   tint with --color-accent so every theme keeps urgency.
   Spec: TEMPLATE_FAMILY_CSS_BRIEF.md §"Family 1 — urgent-local".
   Section coverage: hero-call-first, trust-strip-credentials,
   services-grid-compact (+ .services-grid / --compact),
   emergency-band (+ --247 variant) + emergency-status-strip,
   reviews-3up, service-area-suburbs, contact-form-quick,
   faq-trade-specific (.section--faq), final-cta-call (+ __inner),
   footer-nap (+ __grid / __legal), sticky-mobile-call-bar.
   Mobile-first throughout; @media (min-width) for upscaling.
   ============================================================ */

/* --- .hero--call-first ---------------------------------------
   Text-led hero, no media tile, phone number prominent. On the
   multipage cinematic-hero package, neutralise the fixed-bg image
   and dark scrim so the call number reads as the conversion path. */
.hero.hero--call-first .hero-art,
.hero.hero--call-first .feature-split__art { display: none; }
.hero.hero--call-first { padding: 4.5rem 0 3.5rem; }
.hero.hero--call-first h1 { max-width: 22ch; }
.hero.hero--call-first .hero-cta { margin-top: 1.5rem; }
:is([data-package="multipage"], [data-package="advanced"]) .hero.hero--call-first {
  background-image: none;
  min-height: 0;
  color: var(--color-ink);
}
:is([data-package="multipage"], [data-package="advanced"]) .hero.hero--call-first::before { content: none; }
:is([data-package="multipage"], [data-package="advanced"]) .hero.hero--call-first h1,
:is([data-package="multipage"], [data-package="advanced"]) .hero.hero--call-first .hero-subhead,
:is([data-package="multipage"], [data-package="advanced"]) .hero.hero--call-first .eyebrow {
  color: inherit; text-shadow: none;
}
:is([data-package="multipage"], [data-package="advanced"]) .hero.hero--call-first .eyebrow {
  background: rgba(15, 23, 42, 0.05);
  border: 0;
}
@media (max-width: 720px) {
  .hero.hero--call-first { padding: 3rem 0 2.5rem; }
  /* Stack hero CTAs full-width on mobile — call button must dominate. */
  .hero.hero--call-first .hero-cta { flex-direction: column; align-items: stretch; }
  .hero.hero--call-first .hero-cta .btn { justify-content: center; width: 100%; }
}

/* --- .trust-strip / __row / .trust-pill ----------------------
   Sits directly under the hero. Dark contrast band on light themes
   so the trust pills read as a deliberate break from the hero.
   On structural-mono / midnight-lounge the band tints differently
   (theme overrides further down). */
.trust-strip {
  padding: 0.95rem 0;
  background:
    radial-gradient(900px 280px at 50% 0%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 70%),
    var(--color-primary);
  color: #f5eee0;
  border-block: 1px solid var(--color-line);
}
.trust-strip__row {
  display: flex; flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  align-items: center; justify-content: center;
}
.trust-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  font-feature-settings: "tnum";
}
.trust-pill strong { color: var(--color-accent); font-weight: 700; }

/* --- .services-grid + .services-grid--compact + .card-service--compact -
   Dense numbered list. 1/2/3-col responsive. No media tile.
   .card-service scaffold is existing; --compact tightens padding +
   typography for trade-confident density. */
.section--services-compact { padding: clamp(2.75rem, 5vw, 4.5rem) 0; }
.services-grid {
  display: grid; gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .services-grid--compact { grid-template-columns: repeat(3, 1fr); } }
.card-service--compact {
  padding: 1.25rem 1.35rem;
}
.card-service--compact .card-service__head { margin-bottom: 0.35rem; }
.card-service--compact .card-service__num {
  font-size: 1.05rem; letter-spacing: 0.08em;
}
.card-service--compact h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.card-service--compact p  { font-size: 0.93rem; margin: 0; }

/* --- .emergency-band + __inner + __copy + --247 -------------
   Bold full-bleed strip tinted with --color-accent. -247 variant
   intensifies the wash and bumps the headline size. */
.emergency-band {
  background:
    radial-gradient(720px 220px at 0% 50%, color-mix(in srgb, var(--color-accent) 30%, transparent), transparent 60%),
    color-mix(in srgb, var(--color-accent) 18%, var(--color-surface));
  border-block: 1px solid color-mix(in srgb, var(--color-accent) 32%, var(--color-line));
  padding: 1.25rem 0;
}
.emergency-band__inner {
  display: grid; gap: 1rem 1.5rem;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 720px) {
  .emergency-band__inner { grid-template-columns: 1fr auto; }
}
.emergency-band__copy { display: grid; gap: 0.15rem; }
.emergency-band__copy strong {
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--color-primary);
  letter-spacing: -0.012em;
  line-height: 1.15;
}
.emergency-band__copy span {
  color: var(--color-ink-soft);
  font-size: 0.92rem;
}
.emergency-band--247 {
  background:
    radial-gradient(720px 220px at 0% 50%, color-mix(in srgb, var(--color-accent) 44%, transparent), transparent 60%),
    color-mix(in srgb, var(--color-accent) 28%, var(--color-surface));
  border-block-color: color-mix(in srgb, var(--color-accent) 50%, var(--color-line));
}
.emergency-band--247 .emergency-band__copy strong { font-size: clamp(1.15rem, 1.6vw, 1.4rem); }
@media (max-width: 640px) {
  .emergency-band__inner { text-align: center; justify-items: center; }
  .emergency-band .btn   { width: 100%; max-width: 22rem; justify-content: center; }
}

/* --- .emergency-status + __row + __dot + __text -------------
   Thin "open now / responding" indicator strip rendered as a
   floating element on the urgent-local emergency-mode variant. */
.emergency-status {
  padding: 0.6rem 0;
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface-2));
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 26%, var(--color-line));
  font-size: 0.92rem;
}
.emergency-status__row {
  display: flex; align-items: center; justify-content: center;
  gap: 0.55rem;
  color: var(--color-primary);
}
.emergency-status__text { color: var(--color-ink-soft); }
.emergency-status__text strong { color: var(--color-primary); font-weight: 700; }
.emergency-status__dot {
  width: 0.6rem; height: 0.6rem;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px color-mix(in srgb, #22c55e 24%, transparent);
  animation: emergency-pulse 1.8s ease-in-out infinite;
}
@keyframes emergency-pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, #22c55e 24%, transparent); }
  50%      { box-shadow: 0 0 0 10px color-mix(in srgb, #22c55e 8%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .emergency-status__dot { animation: none; }
}

/* --- .reviews-3up grid ---------------------------------------
   3-up at desktop, stacks on mobile. .testimonial scaffold already
   styled; we only own the grid container. */
.reviews-3up__grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .reviews-3up__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .reviews-3up__grid { grid-template-columns: repeat(3, 1fr); align-items: start; } }

/* --- .section--service-area ---------------------------------- */
.section--service-area .section-title { margin-bottom: 1.5rem; }
.section--service-area p { color: var(--color-ink-soft); margin: 0.4rem 0 0; }

/* --- .section--contact-quick + .contact-quick__grid + __copy + .contact-form--quick ----
   Two-col on desktop (copy left, form right), stack on mobile. */
.contact-quick__grid {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 880px) {
  .contact-quick__grid { grid-template-columns: 1fr 1fr; }
}
.contact-quick__copy h2 { margin: 0.4rem 0 0.55rem; }
.contact-quick__copy p  { max-width: 38ch; color: var(--color-ink-soft); }
.contact-form--quick {
  background: var(--color-surface-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--shadow-sm);
}
.contact-form--quick label { display: grid; gap: 0.3rem; }
.contact-form--quick label > span {
  font-size: 0.8rem; font-weight: 600;
  color: var(--color-primary); letter-spacing: 0.02em;
}
.contact-form--quick select {
  width: 100%; padding: 0.85rem 1rem;
  border: 1px solid var(--color-line-strong); border-radius: 0.75rem;
  font: inherit; color: var(--color-ink); background: var(--color-surface);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.contact-form--quick select:focus {
  outline: none; border-color: var(--color-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 16%, transparent);
}

/* --- .section--faq (urgent-local) ----------------------------
   No bespoke surface today — the section composer adds .section-alt
   when contrast is needed. Hook reserved for future per-family
   tuning without forcing edits elsewhere. */
.section--faq { /* reserved hook — inherits .section + .faq-list */ }

/* --- .section--final-cta-call + .final-cta-call__inner ------- */
.section--final-cta-call .final-cta-call__inner {
  display: grid; gap: 1.5rem;
  grid-template-columns: 1fr;
  align-items: center;
  text-align: center;
  justify-items: center;
}
@media (min-width: 780px) {
  .section--final-cta-call .final-cta-call__inner {
    grid-template-columns: 1fr auto;
    text-align: left;
    justify-items: start;
  }
}
.section--final-cta-call .final-cta-call__inner h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  margin: 0.4rem 0 0.25rem;
  max-width: 22ch;
}
.section--final-cta-call .final-cta-call__inner p {
  margin: 0; color: var(--color-ink-soft);
}
.section--final-cta-call .final-cta-call__inner .btn { width: 100%; max-width: 22rem; justify-content: center; }
@media (min-width: 780px) {
  .section--final-cta-call .final-cta-call__inner .btn { width: auto; max-width: none; }
}

/* --- .footer--nap + __grid + __legal -------------------------
   3-col footer with NAP focus, legal row beneath. Uses the same
   token palette as the universal .footer scaffold (which renders
   for general-service) so family + general look at home together. */
.footer--nap {
  padding: clamp(2.5rem, 5vw, 4rem) 0 1.5rem;
  background:
    radial-gradient(900px 260px at 50% 0%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 70%),
    var(--color-surface-2);
  border-top: 1px solid var(--color-line);
  color: var(--color-ink-soft);
}
.footer--nap .footer__grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--color-line);
  margin-bottom: 1.25rem;
  font-size: 0.92rem;
}
.footer--nap .footer__grid strong {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--color-primary);
  display: block;
  margin-bottom: 0.45rem;
  letter-spacing: -0.01em;
}
.footer--nap .footer__grid p { margin: 0.25rem 0; }
.footer--nap .footer__grid a {
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-line-strong);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.footer--nap .footer__grid a:hover { color: var(--color-accent); border-color: var(--color-accent); }
.footer--nap .footer__legal { color: var(--color-ink-faint); font-size: 0.82rem; }
.footer--nap .footer__legal small { display: inline-block; }

/* --- .sticky-mobile-call-bar + __btn -------------------------
   Fixed-bottom pill on mobile, hidden ≥ 720px. Full-width call
   button. Shares visual DNA with the existing .sticky-call utility
   (themes pick that up); this is the family-section equivalent. */
.sticky-mobile-call-bar { display: none; }
@media (max-width: 720px) {
  .sticky-mobile-call-bar {
    display: block;
    position: fixed;
    left: 12px; right: 12px; bottom: 12px;
    z-index: 60;
  }
  /* Reserve floor space only when the bar is in the DOM. */
  body:has(.sticky-mobile-call-bar) { padding-bottom: 96px; }
}
.sticky-mobile-call-bar__btn {
  display: flex; align-items: center; justify-content: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.95rem 1.25rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.006em;
  box-shadow: 0 12px 32px -10px rgba(15, 23, 42, 0.45);
  text-decoration: none;
  min-height: 54px;
  font-feature-settings: "tnum";
}
.sticky-mobile-call-bar__btn:hover { background: var(--color-accent); color: #fff; }

/* --- Theme tuning for urgent-local surfaces (Phase 2 only — wider
       theme cross-check lives in Phase 6) -------------------- */
[data-theme="midnight-lounge"] .trust-strip {
  background:
    radial-gradient(900px 280px at 50% 0%, rgba(212, 162, 76, 0.16), transparent 70%),
    var(--color-surface-2);
  color: var(--color-ink);
  border-color: var(--color-line);
}
[data-theme="midnight-lounge"] .trust-pill {
  background: rgba(212, 162, 76, 0.08);
  border-color: rgba(212, 162, 76, 0.28);
  color: var(--color-ink);
}
[data-theme="midnight-lounge"] .trust-pill strong { color: var(--color-accent); }
[data-theme="midnight-lounge"] .footer--nap {
  background:
    radial-gradient(900px 260px at 50% 0%, rgba(212, 162, 76, 0.08), transparent 70%),
    #0b0d14;
  border-top: 1px solid var(--color-line);
  color: var(--color-ink-soft);
}
[data-theme="midnight-lounge"] .footer--nap .footer__grid strong { color: var(--color-ink); }
[data-theme="midnight-lounge"] .footer--nap .footer__grid a { color: var(--color-ink); }
[data-theme="midnight-lounge"] .sticky-mobile-call-bar__btn {
  background: var(--color-accent);
  color: #0b0d14;
}
[data-theme="structural-mono"] .trust-strip {
  background: var(--color-ink);
  color: var(--color-surface);
  border-block: 1px solid var(--color-line-strong);
}
[data-theme="structural-mono"] .trust-pill {
  background: rgba(250, 250, 246, 0.06);
  border-color: rgba(250, 250, 246, 0.18);
  color: var(--color-surface);
  border-radius: var(--radius-sm);
}
[data-theme="structural-mono"] .trust-pill strong { color: var(--color-accent); }
[data-theme="structural-mono"] .emergency-band,
[data-theme="structural-mono"] .emergency-band--247 {
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-accent);
  border-bottom: 1px solid var(--color-line);
}
[data-theme="structural-mono"] .emergency-band__copy strong { color: var(--color-ink); }
[data-theme="structural-mono"] .sticky-mobile-call-bar__btn {
  background: var(--color-ink);
  color: var(--color-surface);
  border-radius: var(--radius-sm);
}
[data-theme="structural-mono"] .footer--nap {
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
}
[data-theme="press-editorial"] .trust-strip {
  background: var(--color-primary);
  color: var(--color-surface);
  border-radius: 0;
  font-family: 'Public Sans', Inter, sans-serif;
}
[data-theme="press-editorial"] .trust-pill {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-surface) 32%, transparent);
  color: var(--color-surface);
  border-radius: var(--radius);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.74rem;
}
[data-theme="garden-bistro"] .trust-strip {
  background:
    radial-gradient(900px 280px at 50% 0%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 70%),
    var(--color-primary);
  color: var(--color-surface);
}
[data-theme="garden-bistro"] .trust-pill {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--color-surface);
}

/* ============================================================
   TEMPLATE-FAMILY — appointment-personal-care (Phase 3)
   Brand-led, booking-first. Personality + warmth — looks like the
   shop. Prices shown. Booking primary CTA.
   Spec: TEMPLATE_FAMILY_CSS_BRIEF.md §"Family 3".
   Section coverage: hero-brand-lifestyle (+ __inner),
   quick-booking-strip (+ __row), about-brand (+ __grid),
   services-pricing-menu (+ .pricing-menu / .pricing-row / __title
   / __price), gallery-brand (+ __grid / __tile), team-section
   (+ .team-section__bio), booking-embed (+ __inner),
   contact-location (+ __grid), final-cta-book (+ __inner / __actions),
   sticky-mobile-book-bar (+ __btn).
   ============================================================ */

/* --- .hero--brand-lifestyle + __inner -----------------------
   Brand visual hero. Uses inline `--hero-bg` from the section
   emitter for the cover image. Always applies image-as-background +
   scrim regardless of package, so landing customers get the same
   shop-feel as multipage. */
.hero.hero--brand-lifestyle {
  position: relative;
  padding: clamp(96px, 12vw, 144px) 0 clamp(72px, 9vw, 112px);
  min-height: min(72vh, 640px);
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  background-color: #1a1818;
  color: #f5eee0;
  overflow: hidden;
}
.hero.hero--brand-lifestyle::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(180deg, rgba(15, 13, 10, 0.25) 0%, rgba(15, 13, 10, 0.5) 55%, rgba(15, 13, 10, 0.78) 100%),
    linear-gradient(90deg, rgba(15, 13, 10, 0.45), rgba(15, 13, 10, 0.15) 60%, rgba(15, 13, 10, 0.05) 100%);
}
.hero.hero--brand-lifestyle::after { display: none; }
.hero.hero--brand-lifestyle > .container {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end;
  min-height: inherit;
}
.hero-brand-lifestyle__inner { max-width: 720px; }
.hero.hero--brand-lifestyle .hero-art { display: none; }
.hero.hero--brand-lifestyle h1 {
  color: #f5eee0;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.4);
  font-size: clamp(2.4rem, 5.4vw, 4.25rem);
  margin: 1.25rem 0 1rem;
}
.hero.hero--brand-lifestyle .hero-subhead {
  color: rgba(245, 238, 224, 0.86);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55);
}
.hero.hero--brand-lifestyle .eyebrow {
  background: transparent;
  color: #f5eee0;
  border: 0;
  border-bottom: 1px solid rgba(245, 238, 224, 0.5);
  border-radius: 0;
  padding: 0 0 0.35rem 0;
  letter-spacing: 0.24em;
}
.hero.hero--brand-lifestyle .eyebrow::before { display: none; }
.hero.hero--brand-lifestyle .hero-cta { margin-top: 1.75rem; }
.hero.hero--brand-lifestyle .btn-ghost {
  background: rgba(245, 238, 224, 0.08);
  border-color: rgba(245, 238, 224, 0.4);
  color: #f5eee0;
  backdrop-filter: blur(6px);
}
.hero.hero--brand-lifestyle .btn-ghost:hover {
  background: rgba(245, 238, 224, 0.16);
  border-color: #f5eee0;
}
@supports (-webkit-touch-callout: none) {
  .hero.hero--brand-lifestyle { background-attachment: scroll; }
}
@media (hover: none) and (pointer: coarse) {
  .hero.hero--brand-lifestyle { background-attachment: scroll; }
}
@media (min-width: 1024px) {
  .hero.hero--brand-lifestyle { background-attachment: fixed; }
}
@media (max-width: 720px) {
  .hero.hero--brand-lifestyle { padding: 4rem 0 3rem; min-height: min(64vh, 520px); }
  .hero.hero--brand-lifestyle .hero-cta { flex-direction: column; align-items: stretch; }
  .hero.hero--brand-lifestyle .hero-cta .btn { width: 100%; justify-content: center; }
}

/* --- .quick-booking-strip + __row ----------------------------
   Full-width strip directly under hero: Book + Call + Directions.
   Equal-width on mobile (stacked), inline-centered on tablet+. */
.quick-booking-strip {
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-line);
  padding: 1rem 0;
}
.quick-booking-strip__row {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: 1fr;
}
.quick-booking-strip__row .btn { justify-content: center; }
@media (max-width: 639px) {
  .quick-booking-strip__row .btn { width: 100%; }
}
@media (min-width: 640px) {
  .quick-booking-strip__row {
    display: flex; flex-wrap: wrap; gap: 0.75rem;
    justify-content: center;
  }
}

/* --- .section--about-brand + .about-brand__grid ------------- */
.section--about-brand .about-brand__grid {
  max-width: 56rem;
  margin: 0 auto;
}
.section--about-brand .about-brand__grid h2 { margin: 0.5rem 0 0.85rem; }
.section--about-brand .about-brand__grid p {
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 60ch;
}
.section--about-brand .about-brand__grid p + p { margin-top: 1rem; }

/* --- .section--pricing-menu + .pricing-menu + .pricing-row ---
   Menu-style price list (not card grid). Dashed leader between
   service name and price (border-bottom on each row). Two-col flex:
   title on left, price right-aligned. */
.pricing-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
}
.pricing-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.95rem 0;
  border-bottom: 1px dashed var(--color-line-strong);
}
.pricing-row:last-child { border-bottom: 0; }
.pricing-row__title { flex: 1 1 0; min-width: 0; }
.pricing-row__title h3 {
  margin: 0 0 0.15rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.pricing-row__title p {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}
.pricing-row__price {
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-primary);
  font-feature-settings: "tnum";
  letter-spacing: -0.012em;
  white-space: nowrap;
}
@media (max-width: 540px) {
  .pricing-row { flex-wrap: wrap; gap: 0.35rem 1rem; }
  .pricing-row__title { flex: 1 1 100%; }
  .pricing-row__price { font-size: 1rem; }
}

/* --- .section--gallery-brand + __grid + __tile -------------- */
.gallery-brand__grid {
  display: grid; gap: 0.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .gallery-brand__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .gallery-brand__grid { grid-template-columns: repeat(3, 1fr); } }
.gallery-brand__tile {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--color-surface-2);
  position: relative;
  box-shadow: var(--shadow-sm);
}
.gallery-brand__tile img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.45s var(--ease);
}
.gallery-brand__tile:hover img { transform: scale(1.04); }

/* --- .section--team + .team-section__bio ------------------- */
.section--team .team-section__bio {
  max-width: 52rem;
  margin: 0 auto;
  text-align: center;
}
.section--team .team-section__bio p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-ink);
}

/* --- .section--booking-embed + .booking-embed__inner --------
   CTA container — copy + Book button. */
.section--booking-embed .booking-embed__inner {
  display: grid; gap: 1.5rem;
  grid-template-columns: 1fr;
  align-items: center;
  text-align: center;
  justify-items: center;
}
.section--booking-embed h2 {
  margin: 0.4rem 0 0.25rem;
  font-size: clamp(1.65rem, 3vw, 2.25rem);
}
.section--booking-embed p { color: var(--color-ink-soft); margin: 0; max-width: 44ch; }
.section--booking-embed .booking-embed__inner .btn {
  width: 100%; max-width: 22rem; justify-content: center;
}
@media (min-width: 780px) {
  .section--booking-embed .booking-embed__inner {
    grid-template-columns: 1fr auto;
    text-align: left;
    justify-items: start;
  }
  .section--booking-embed .booking-embed__inner .btn { width: auto; max-width: none; }
}

/* --- .section--contact-location + .contact-location__grid --- */
.section--contact-location .contact-location__grid {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 880px) {
  .section--contact-location .contact-location__grid { grid-template-columns: 1fr 1fr; }
}
.section--contact-location p { margin: 0.45rem 0; }
.section--contact-location p strong { color: var(--color-primary); font-weight: 600; }
.section--contact-location p a:not(.btn) {
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-line-strong);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.section--contact-location p a:not(.btn):hover {
  color: var(--color-accent); border-color: var(--color-accent);
}

/* --- .section--final-cta-book + __inner + __actions --------- */
.section--final-cta-book .final-cta-book__inner {
  display: grid; gap: 1.5rem;
  grid-template-columns: 1fr;
  align-items: center;
  text-align: center;
  justify-items: center;
}
.section--final-cta-book h2 {
  margin: 0.4rem 0 0.25rem;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  max-width: 22ch;
}
.section--final-cta-book p { margin: 0; color: var(--color-ink-soft); }
.final-cta-book__actions {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  justify-content: center;
}
@media (max-width: 540px) {
  .final-cta-book__actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 22rem; }
  .final-cta-book__actions .btn { width: 100%; justify-content: center; }
}

/* --- .sticky-mobile-book-bar + __btn ------------------------ */
.sticky-mobile-book-bar { display: none; }
@media (max-width: 720px) {
  .sticky-mobile-book-bar {
    display: block;
    position: fixed;
    left: 12px; right: 12px; bottom: 12px;
    z-index: 60;
  }
  body:has(.sticky-mobile-book-bar) { padding-bottom: 96px; }
}
.sticky-mobile-book-bar__btn {
  display: flex; align-items: center; justify-content: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.95rem 1.25rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.006em;
  box-shadow: 0 12px 32px -10px rgba(15, 23, 42, 0.45);
  text-decoration: none;
  min-height: 54px;
}
.sticky-mobile-book-bar__btn:hover { background: var(--color-accent); color: #fff; }

/* --- Theme tuning for appointment-personal-care surfaces ---- */
[data-theme="midnight-lounge"] .quick-booking-strip {
  background: var(--color-surface-2);
  border-bottom-color: var(--color-line);
}
[data-theme="midnight-lounge"] .pricing-row { border-bottom-color: var(--color-line); }
[data-theme="midnight-lounge"] .pricing-row__price { color: var(--color-accent); }
[data-theme="midnight-lounge"] .gallery-brand__tile { background: var(--color-surface-2); }
[data-theme="midnight-lounge"] .sticky-mobile-book-bar__btn {
  background: var(--color-accent); color: #0b0d14;
}
[data-theme="structural-mono"] .quick-booking-strip {
  background: var(--color-surface);
  border-bottom-color: var(--color-line);
}
[data-theme="structural-mono"] .pricing-row {
  border-bottom: 1px solid var(--color-line);   /* solid hairline, not dashed */
}
[data-theme="structural-mono"] .pricing-row__price {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "tnum";
  color: var(--color-ink);
}
[data-theme="structural-mono"] .gallery-brand__tile {
  border-radius: var(--radius-sm);
  box-shadow: none;
  border: 1px solid var(--color-line);
}
[data-theme="structural-mono"] .sticky-mobile-book-bar__btn {
  background: var(--color-ink); color: var(--color-surface);
  border-radius: var(--radius-sm);
}
[data-theme="press-editorial"] .pricing-row__price {
  font-family: 'Playfair Display', Fraunces, serif;
  color: var(--color-primary);
}
[data-theme="press-editorial"] .gallery-brand__tile img { filter: grayscale(0.4) contrast(1.05); }
[data-theme="garden-bistro"] .pricing-row__price {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  color: var(--color-primary);
}
[data-theme="garden-bistro"] .gallery-brand__tile { border-radius: var(--radius); }

/* ============================================================
   TEMPLATE-FAMILY — portfolio-project (Phase 4)
   Sell the workmanship. Show outcomes. Quote-led, calm pacing,
   craft-confident. Photos are the hero — generous tiles, lots
   of breathing room.
   Spec: TEMPLATE_FAMILY_CSS_BRIEF.md §"Family 2".
   Section coverage: hero-visual-led (+ __inner),
   intro-credibility (+ __grid / __badge / __metric / __label),
   services-grid-visual (+ .services-grid--visual /
   .card-service--visual + __media / __body / __highlights),
   gallery-projects (+ __grid / .gallery-tile),
   process-steps (+ __list / .process-step / __num),
   reviews-grid (+ .testimonial--grid),
   contact-form-quote (+ .contact-quote__grid / __copy /
   .contact-form--quote), final-cta-quote (+ __inner),
   case-studies-detailed (+ __list / .case-study / __media / __body).
   ============================================================ */

/* --- .hero--visual-led + __inner ----------------------------
   Image-led hero — outcome-focused headline, quote CTA primary.
   Calmer scrim than brand-lifestyle so the photo (typically a
   completed project) reads as evidence rather than mood. */
.hero.hero--visual-led {
  position: relative;
  padding: clamp(108px, 13vw, 168px) 0 clamp(80px, 10vw, 128px);
  min-height: min(78vh, 720px);
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  background-color: #1c1d1a;
  color: #f5eee0;
  overflow: hidden;
}
.hero.hero--visual-led::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(180deg, rgba(20, 20, 20, 0.2) 0%, rgba(20, 20, 20, 0.45) 55%, rgba(20, 20, 20, 0.72) 100%),
    linear-gradient(90deg, rgba(20, 20, 20, 0.55), rgba(20, 20, 20, 0.2) 50%, rgba(20, 20, 20, 0.05) 100%);
}
.hero.hero--visual-led::after { display: none; }
.hero.hero--visual-led > .container {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end;
  min-height: inherit;
}
.hero-visual-led__inner { max-width: 760px; }
.hero.hero--visual-led .hero-art { display: none; }
.hero.hero--visual-led h1 {
  color: #f5eee0;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.4);
  font-size: clamp(2.5rem, 5.6vw, 4.5rem);
  margin: 1.25rem 0 1rem;
  max-width: 22ch;
}
.hero.hero--visual-led .hero-subhead {
  color: rgba(245, 238, 224, 0.9);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.5);
  max-width: 56ch;
}
.hero.hero--visual-led .eyebrow {
  background: transparent;
  color: #f5eee0;
  border: 0;
  border-bottom: 1px solid rgba(245, 238, 224, 0.5);
  border-radius: 0;
  padding: 0 0 0.35rem 0;
  letter-spacing: 0.24em;
}
.hero.hero--visual-led .eyebrow::before { display: none; }
.hero.hero--visual-led .hero-cta { margin-top: 1.75rem; }
.hero.hero--visual-led .btn-ghost {
  background: rgba(245, 238, 224, 0.08);
  border-color: rgba(245, 238, 224, 0.4);
  color: #f5eee0;
}
.hero.hero--visual-led .btn-ghost:hover {
  background: rgba(245, 238, 224, 0.16);
  border-color: #f5eee0;
}
@supports (-webkit-touch-callout: none) {
  .hero.hero--visual-led { background-attachment: scroll; }
}
@media (hover: none) and (pointer: coarse) {
  .hero.hero--visual-led { background-attachment: scroll; }
}
@media (min-width: 1024px) {
  .hero.hero--visual-led { background-attachment: fixed; }
}
@media (max-width: 720px) {
  .hero.hero--visual-led { padding: 5rem 0 4rem; min-height: min(70vh, 580px); }
}

/* --- .section--intro-credibility + __grid + __badge --------
   Copy + single big stat badge. 2-col on desktop, stacks mobile.
   Badge uses --color-accent for the metric so themes carry colour. */
.section--intro-credibility .intro-credibility__grid {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 880px) {
  .section--intro-credibility .intro-credibility__grid {
    grid-template-columns: 1.4fr 1fr;
  }
}
.section--intro-credibility h2 { margin: 0.5rem 0 0.85rem; }
.section--intro-credibility p {
  font-size: 1.05rem; line-height: 1.7;
  max-width: 60ch;
  color: var(--color-ink-soft);
}
.section--intro-credibility .btn { margin-top: 1rem; }
.intro-credibility__badge {
  display: grid; gap: 0.4rem;
  padding: clamp(1.75rem, 3.5vw, 2.25rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  background: var(--color-surface-2);
  box-shadow: var(--shadow-sm);
  text-align: center;
  justify-self: stretch;
}
.intro-credibility__metric {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: -0.024em;
  line-height: 1;
}
.intro-credibility__label {
  font-size: 0.84rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  font-weight: 600;
}

/* --- .services-grid--visual + .card-service--visual + media/body/highlights ---
   Card grid with photo tile on top, body + highlights below.
   2 col tablet, 3 col desktop. Mobile single-col. */
@media (min-width: 600px) { .services-grid--visual { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .services-grid--visual { grid-template-columns: repeat(3, 1fr); } }
.card-service--visual {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card-service__media {
  display: block;
  aspect-ratio: 4 / 3;
  background-image: var(--service-image);
  background-size: cover;
  background-position: center;
  background-color: var(--color-surface-warm);
}
.card-service__body { padding: 1.5rem 1.5rem 1.75rem; }
.card-service__body .card-service__head { margin-bottom: 0.45rem; }
.card-service__highlights {
  list-style: none;
  padding: 0;
  margin: 0.85rem 0 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.card-service__highlights li {
  display: inline-flex; align-items: center;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  color: var(--color-primary);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  border: 1px solid color-mix(in srgb, var(--color-accent) 22%, transparent);
}

/* --- .section--gallery-projects + __grid + .gallery-tile --- */
.gallery-projects__grid {
  display: grid; gap: 0.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 540px) { .gallery-projects__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .gallery-projects__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .gallery-projects__grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.gallery-tile {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-surface-warm);
  position: relative;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.gallery-tile img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease), filter 0.3s var(--ease);
}
.gallery-tile:hover img { transform: scale(1.05); filter: brightness(1.04); }

/* --- .section--process + .process-steps__list + .process-step + __num ---
   Numbered 3-5 step stepper. Vertical on mobile, horizontal on
   tablet+. Generous spacing — craft-led pacing, no urgency. */
.process-steps__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: clamp(1rem, 3vw, 1.75rem);
  grid-template-columns: 1fr;
  counter-reset: process-step;
}
@media (min-width: 760px) {
  .process-steps__list { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
.process-step {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: auto 1fr;
  align-items: start;
  padding: 1.25rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
}
.process-step h3 { margin: 0 0 0.35rem; font-size: 1.05rem; letter-spacing: -0.012em; }
.process-step p  { margin: 0; color: var(--color-ink-soft); font-size: 0.95rem; }
.process-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  font-feature-settings: "tnum";
  flex-shrink: 0;
}
@media (min-width: 760px) {
  .process-step { grid-template-columns: 1fr; gap: 1rem; }
  .process-step__num { width: 3rem; height: 3rem; font-size: 1.15rem; }
}

/* --- .section--reviews-grid + .reviews-grid + .testimonial--grid ---
   2-col grid on desktop, fuller card than the 3up variant. */
.section--reviews-grid .reviews-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 880px) {
  .section--reviews-grid .reviews-grid { grid-template-columns: repeat(2, 1fr); align-items: start; }
}
.testimonial--grid { padding: 2rem; }
.testimonial--grid .testimonial__text {
  font-size: 1.18rem;
  line-height: 1.5;
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}

/* --- .section--contact-quote + __grid + __copy + .contact-form--quote ---
   Two-col copy + form on desktop. Longer fieldset than --quick. */
.section--contact-quote .contact-quote__grid {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 880px) {
  .section--contact-quote .contact-quote__grid { grid-template-columns: 1fr 1.1fr; }
}
.contact-quote__copy h2 { margin: 0.4rem 0 0.55rem; }
.contact-quote__copy p  { max-width: 40ch; color: var(--color-ink-soft); }
.contact-form--quote {
  background: var(--color-surface-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--shadow-sm);
}
.contact-form--quote label { display: grid; gap: 0.3rem; }
.contact-form--quote label > span {
  font-size: 0.8rem; font-weight: 600;
  color: var(--color-primary); letter-spacing: 0.02em;
}
.contact-form--quote select {
  width: 100%; padding: 0.85rem 1rem;
  border: 1px solid var(--color-line-strong); border-radius: 0.75rem;
  font: inherit; color: var(--color-ink); background: var(--color-surface);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.contact-form--quote select:focus {
  outline: none; border-color: var(--color-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 16%, transparent);
}

/* --- .section--final-cta-quote + __inner -------------------- */
.section--final-cta-quote .final-cta-quote__inner {
  display: grid; gap: 1.5rem;
  grid-template-columns: 1fr;
  align-items: center;
  text-align: center;
  justify-items: center;
}
.section--final-cta-quote h2 {
  margin: 0.4rem 0 0.25rem;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  max-width: 24ch;
}
.section--final-cta-quote p { margin: 0; color: var(--color-ink-soft); }
.section--final-cta-quote .final-cta-quote__inner .btn { width: 100%; max-width: 22rem; justify-content: center; }
@media (min-width: 780px) {
  .section--final-cta-quote .final-cta-quote__inner {
    grid-template-columns: 1fr auto;
    text-align: left;
    justify-items: start;
  }
  .section--final-cta-quote .final-cta-quote__inner .btn { width: auto; max-width: none; }
}

/* --- .section--case-studies + __list + .case-study + __media + __body ---
   Advanced-package variant. Full-width project write-ups with hero
   photo + body. Alternates image-left / image-right at desktop. */
.section--case-studies .case-studies__list {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}
.case-study {
  display: grid; gap: clamp(1.25rem, 4vw, 2.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 880px) {
  .case-study { grid-template-columns: 1.15fr 1fr; }
  .case-study:nth-child(even) .case-study__media { order: 2; }
}
.case-study__media {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-surface-warm);
  box-shadow: var(--shadow-md);
}
.case-study__media img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.case-study:hover .case-study__media img { transform: scale(1.02); }
.case-study__body h3 {
  margin: 0 0 0.65rem;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  letter-spacing: -0.018em;
}
.case-study__body p {
  margin: 0 0 1.25rem;
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 56ch;
  color: var(--color-ink-soft);
}

/* --- Theme tuning for portfolio-project surfaces ------------- */
[data-theme="midnight-lounge"] .intro-credibility__badge {
  background: var(--color-surface-2);
  border-color: var(--color-line);
}
[data-theme="midnight-lounge"] .card-service__media {
  background-color: var(--color-surface-2);
}
[data-theme="midnight-lounge"] .card-service__highlights li {
  background: rgba(212, 162, 76, 0.10);
  border-color: rgba(212, 162, 76, 0.25);
  color: var(--color-ink);
}
[data-theme="midnight-lounge"] .process-step {
  background: var(--color-surface-2);
  border-color: var(--color-line);
}
[data-theme="midnight-lounge"] .process-step__num {
  background: rgba(212, 162, 76, 0.14);
  color: var(--color-accent);
}
[data-theme="midnight-lounge"] .gallery-tile {
  background: var(--color-surface-2);
  box-shadow: var(--shadow-md);
}
[data-theme="structural-mono"] .intro-credibility__badge {
  background: var(--color-surface);
  border-color: var(--color-line);
  border-radius: var(--radius);
  box-shadow: none;
}
[data-theme="structural-mono"] .intro-credibility__metric {
  font-family: "Inter Tight", "Inter", ui-sans-serif, sans-serif;
  color: var(--color-ink);
  font-weight: 800;
}
[data-theme="structural-mono"] .gallery-tile {
  border-radius: var(--radius-sm);
  box-shadow: none;
  border: 1px solid var(--color-line);
}
[data-theme="structural-mono"] .gallery-tile:hover img { transform: scale(1.03); }
[data-theme="structural-mono"] .process-step {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--color-line);
  border-radius: 0;
  padding: clamp(20px, 3vw, 32px) 0;
  grid-template-columns: auto 1fr;
}
[data-theme="structural-mono"] .process-step:last-child { border-bottom: 1px solid var(--color-line); }
[data-theme="structural-mono"] .process-step__num {
  background: transparent;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-family: "Inter Tight", "Inter", ui-sans-serif, sans-serif;
  font-weight: 700;
}
[data-theme="structural-mono"] .card-service--visual {
  border-radius: var(--radius);
}
[data-theme="structural-mono"] .card-service__highlights li {
  background: transparent;
  border-color: var(--color-line-strong);
  color: var(--color-ink-soft);
  border-radius: var(--radius-sm);
  font-weight: 600;
}
[data-theme="press-editorial"] .gallery-tile img { filter: grayscale(0.45) contrast(1.06); }
[data-theme="press-editorial"] .case-study__media img { filter: grayscale(0.4) contrast(1.05); }
[data-theme="press-editorial"] .intro-credibility__metric {
  font-family: 'Playfair Display', Fraunces, serif;
  color: var(--color-accent);
}
[data-theme="garden-bistro"] .intro-credibility__metric {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
}
[data-theme="garden-bistro"] .process-step {
  border-radius: var(--radius);
  box-shadow: 0 10px 30px -20px rgba(47, 74, 58, 0.25);
}

/* ============================================================
   TEMPLATE-FAMILY — health-clinic (Phase 5)
   Calm, credible, practitioner-led. Compliance-aware: NO loud
   strips, NO urgency colours, NO emergency-band reuse. Generous
   whitespace, restrained motion, plain English.
   Spec: TEMPLATE_FAMILY_CSS_BRIEF.md §"Family 4".
   Section coverage: hero-clinic-credibility (.hero--clinic),
   conditions-treated-grid (+ .conditions-grid / .condition-card),
   why-choose-clinic (.section--why-clinic; reuses .values-grid),
   services-grid-clinical (+ .services-grid--clinical /
   .card-service--clinical), process-what-to-expect
   (.section--process-clinic; reuses .process-steps__list),
   reviews-3up-clinical (+ .section--reviews-clinical /
   .testimonial--clinical), faq-clinical (.section--faq-clinical;
   reuses .faq-list), footer-nap-credentials (+ __credentials),
   sticky-mobile-book-call-bar (+ __btn--book / __btn--call).
   ============================================================ */

/* --- .hero--clinic ------------------------------------------
   Restrained credibility hero. When --hero-bg is supplied, a soft
   light scrim + image; when absent, type-led on the page surface.
   No fixed-attach drama; calm scroll. Two-CTA layout retained. */
.hero.hero--clinic {
  position: relative;
  padding: clamp(80px, 10vw, 128px) 0 clamp(56px, 7vw, 88px);
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  background-color: var(--color-surface);
  overflow: hidden;
}
.hero.hero--clinic::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-surface) 80%, transparent) 0%,
    color-mix(in srgb, var(--color-surface) 70%, transparent) 60%,
    color-mix(in srgb, var(--color-surface) 96%, transparent) 100%);
}
/* No --hero-bg → no scrim needed, just the calm surface. */
.hero.hero--clinic:not([style*="--hero-bg"])::before { background: none; }
.hero.hero--clinic::after { display: none; }
.hero.hero--clinic > .container { position: relative; z-index: 1; max-width: 920px; }
.hero.hero--clinic .hero-art { display: none; }
.hero.hero--clinic h1 {
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
  letter-spacing: -0.02em;
  margin: 0.8rem 0 0.85rem;
  max-width: 22ch;
  color: var(--color-primary);
}
.hero.hero--clinic .hero-subhead {
  color: var(--color-ink-soft);
  font-size: clamp(1.1rem, 1.3vw + 0.4rem, 1.3rem);
  text-shadow: none;
  max-width: 58ch;
}
.hero.hero--clinic .eyebrow {
  /* Inherit default eyebrow chip; no editorial overrides. */
}
.hero.hero--clinic .hero-cta { margin-top: 1.5rem; }
:is([data-package="multipage"], [data-package="advanced"]) .hero.hero--clinic .hero-subhead {
  color: var(--color-ink-soft);
  text-shadow: none;
}
@media (max-width: 720px) {
  .hero.hero--clinic .hero-cta { flex-direction: column; align-items: stretch; }
  .hero.hero--clinic .hero-cta .btn { width: 100%; justify-content: center; }
}

/* --- .section--conditions + .conditions-grid + .condition-card ---
   2-col tablet, 3-4 col desktop. Quiet cards — icon optional, title
   + short plain-English description. */
.conditions-grid {
  display: grid; gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .conditions-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .conditions-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .conditions-grid { grid-template-columns: repeat(4, 1fr); } }
.condition-card {
  padding: 1.25rem 1.35rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  transition: border-color 0.2s var(--ease);
}
.condition-card:hover {
  border-color: color-mix(in srgb, var(--color-accent) 25%, var(--color-line));
}
.condition-card h3 {
  margin: 0 0 0.4rem;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--color-primary);
}
.condition-card p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--color-ink-soft);
  line-height: 1.55;
}

/* --- .section--why-clinic ---
   Calm tuning over the universal .values-grid. */
.section--why-clinic .values-grid { gap: 0.85rem; }

/* --- .services-grid--clinical + .card-service--clinical ----
   Treatment list: title + price + 1-line description. Quieter
   than --compact (which lives in urgent-local) — wider rows,
   less aggressive typography. */
@media (min-width: 600px) { .services-grid--clinical { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .services-grid--clinical { grid-template-columns: repeat(3, 1fr); } }
.card-service--clinical {
  padding: 1.5rem 1.6rem;
  background: var(--color-surface-2);
}
.card-service--clinical h3 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-primary);
}
.card-service--clinical > p {
  margin: 0 0 0.6rem;
  color: var(--color-ink-soft);
  font-size: 0.94rem;
  line-height: 1.55;
}
.card-service--clinical .card-service__price {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-weight: 500;
  font-feature-settings: "tnum";
  letter-spacing: 0;
  font-size: 0.95rem;
}
.card-service--clinical ul {
  margin: 0.65rem 0 0;
  padding-left: 1rem;
  list-style: square;
  color: var(--color-ink-soft);
}
.card-service--clinical ul li { font-size: 0.88rem; margin-bottom: 0.2rem; }

/* --- .section--process-clinic ---
   Reuses .process-steps__list + .process-step (Phase 4) but
   slightly less assertive. */
.section--process-clinic .process-steps__list { gap: clamp(0.85rem, 2.5vw, 1.5rem); }
.section--process-clinic .process-step__num {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-primary);
  font-weight: 600;
}

/* --- .section--reviews-clinical + .testimonial--clinical ----
   Subdued review styling. No huge stars (we reduce them visually);
   let the words breathe. Frames patient experience, not outcome. */
.section--reviews-clinical .reviews-3up__grid { gap: 1.5rem; }
.testimonial--clinical {
  background: var(--color-surface-2);
  border: 1px solid var(--color-line);
  box-shadow: none;
  padding: 1.75rem 1.85rem;
}
.testimonial--clinical .testimonial__stars {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  opacity: 0.7;
  color: var(--color-ink-soft);
}
.testimonial--clinical .testimonial__text {
  font-size: 1.05rem;
  font-family: var(--font-body);
  color: var(--color-ink);
  font-style: italic;
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
  letter-spacing: 0;
}
.testimonial--clinical .testimonial__author { color: var(--color-ink-soft); }
.testimonial--clinical:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
  border-color: var(--color-line);
}

/* --- .section--faq-clinical ---
   Inherits .section + .section-alt + .faq-list. No bespoke surface
   beyond the inherited alt-band tone. */
.section--faq-clinical { /* reserved hook */ }

/* --- .footer--nap-credentials + .footer__grid + __credentials + __legal ---
   NAP grid + AHPRA / registration row + legal line. */
.footer--nap-credentials {
  padding: clamp(2.5rem, 5vw, 4rem) 0 1.5rem;
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-line);
  color: var(--color-ink-soft);
}
.footer--nap-credentials .footer__grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-line);
  margin-bottom: 1.25rem;
  font-size: 0.92rem;
}
.footer--nap-credentials .footer__grid strong {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--color-primary);
  display: block;
  margin-bottom: 0.45rem;
  letter-spacing: -0.01em;
}
.footer--nap-credentials .footer__grid p { margin: 0.25rem 0; }
.footer--nap-credentials .footer__grid a {
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-line-strong);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.footer--nap-credentials .footer__grid a:hover { color: var(--color-accent); border-color: var(--color-accent); }
.footer--nap-credentials .footer__credentials {
  padding-bottom: 1rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-line);
  font-size: 0.82rem;
  color: var(--color-ink-soft);
  letter-spacing: 0.01em;
}
.footer--nap-credentials .footer__credentials small { display: inline-block; }
.footer--nap-credentials .footer__legal {
  color: var(--color-ink-faint);
  font-size: 0.8rem;
}
.footer--nap-credentials .footer__legal small { display: inline-block; }

/* --- .sticky-mobile-book-call-bar + __btn--book + __btn--call ---
   Mobile-only floating bar with two equal-width buttons (Book + Call).
   Book is primary, Call is ghost-on-surface. */
.sticky-mobile-book-call-bar { display: none; }
@media (max-width: 720px) {
  .sticky-mobile-book-call-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    position: fixed;
    left: 12px; right: 12px; bottom: 12px;
    z-index: 60;
  }
  body:has(.sticky-mobile-book-call-bar) { padding-bottom: 96px; }
}
.sticky-mobile-book-call-bar__btn {
  display: flex; align-items: center; justify-content: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.85rem 0.85rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  box-shadow: 0 12px 32px -10px rgba(15, 23, 42, 0.4);
  text-decoration: none;
  min-height: 52px;
  white-space: nowrap;
}
.sticky-mobile-book-call-bar__btn--book {
  background: var(--color-primary);
  color: #fff;
}
.sticky-mobile-book-call-bar__btn--book:hover { background: var(--color-accent); color: #fff; }
.sticky-mobile-book-call-bar__btn--call {
  background: var(--color-surface-2);
  color: var(--color-primary);
  border: 1px solid var(--color-line-strong);
  box-shadow: 0 8px 24px -10px rgba(15, 23, 42, 0.3);
}
.sticky-mobile-book-call-bar__btn--call:hover {
  border-color: var(--color-primary);
  background: var(--color-surface);
}

/* --- Theme tuning for health-clinic surfaces -----------------
   Theme cascade keeps the calm posture — no flashing strips, no
   urgency colours on any theme. */
[data-theme="midnight-lounge"] .condition-card {
  background: var(--color-surface-2);
  border-color: var(--color-line);
}
[data-theme="midnight-lounge"] .card-service--clinical {
  background: var(--color-surface-2);
  border-color: var(--color-line);
}
[data-theme="midnight-lounge"] .testimonial--clinical {
  background: var(--color-surface-2);
  border-color: var(--color-line);
}
[data-theme="midnight-lounge"] .footer--nap-credentials {
  background: #0b0d14;
  border-top: 1px solid var(--color-line);
  color: var(--color-ink-soft);
}
[data-theme="midnight-lounge"] .footer--nap-credentials .footer__grid strong,
[data-theme="midnight-lounge"] .footer--nap-credentials .footer__grid a { color: var(--color-ink); }
[data-theme="midnight-lounge"] .sticky-mobile-book-call-bar__btn--book {
  background: var(--color-accent); color: #0b0d14;
}
[data-theme="midnight-lounge"] .sticky-mobile-book-call-bar__btn--call {
  background: var(--color-surface-2); color: var(--color-ink); border-color: var(--color-line-strong);
}
[data-theme="structural-mono"] .condition-card {
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border-color: var(--color-line);
}
[data-theme="structural-mono"] .card-service--clinical {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--color-line);
  border-radius: 0;
  padding: clamp(20px, 3vw, 28px) 0;
  display: block;
}
[data-theme="structural-mono"] .services-grid--clinical {
  display: flex; flex-direction: column; gap: 0;
}
[data-theme="structural-mono"] .card-service--clinical:last-child {
  border-bottom: 1px solid var(--color-line);
}
[data-theme="structural-mono"] .testimonial--clinical {
  background: var(--color-surface);
  border-radius: var(--radius);
}
[data-theme="structural-mono"] .testimonial--clinical .testimonial__text {
  font-style: normal;
  color: var(--color-ink);
}
[data-theme="structural-mono"] .sticky-mobile-book-call-bar__btn--book {
  background: var(--color-ink); color: var(--color-surface);
  border-radius: var(--radius-sm);
}
[data-theme="structural-mono"] .sticky-mobile-book-call-bar__btn--call {
  background: var(--color-surface); color: var(--color-ink);
  border-radius: var(--radius-sm);
  border-color: var(--color-line-strong);
}
[data-theme="press-editorial"] .condition-card {
  background: var(--color-surface-2);
  border-color: var(--color-line-strong);
  border-radius: var(--radius);
  box-shadow: none;
}
[data-theme="press-editorial"] .card-service--clinical { box-shadow: none; }
[data-theme="press-editorial"] .testimonial--clinical .testimonial__text {
  font-family: 'Playfair Display', Fraunces, serif;
}
[data-theme="garden-bistro"] .condition-card { border-radius: var(--radius); }
[data-theme="garden-bistro"] .card-service--clinical { border-radius: var(--radius); }
[data-theme="garden-bistro"] .testimonial--clinical .testimonial__text {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
}

/* ============================================================
   TEMPLATE-FAMILY — theme cross-check (Phase 6)
   Tactical fixes where the family cascade collides with theme
   overrides. Phases 2-5 each ship inline midnight-lounge /
   structural-mono / press-editorial / garden-bistro tweaks for
   the surfaces they introduce; this block handles the residual
   gaps and the family-hero typography handoff on the editorial
   themes (press-editorial / garden-bistro).
   ============================================================ */

/* --- press-editorial: family-hero typography handoff -------
   Press-editorial uses Libre Bodoni / Playfair for h1. Family
   heroes (.hero--brand-lifestyle, .hero--visual-led, .hero--clinic)
   set their own font-size; let the editorial serif win + keep
   the cream-on-ink scrim. */
[data-theme="press-editorial"] .hero.hero--brand-lifestyle h1,
[data-theme="press-editorial"] .hero.hero--visual-led h1 {
  font-family: 'Libre Bodoni', 'Playfair Display', Fraunces, serif;
  font-weight: 700;
  letter-spacing: -0.028em;
}
[data-theme="press-editorial"] .hero.hero--clinic h1 {
  font-family: 'Libre Bodoni', 'Playfair Display', Fraunces, serif;
  font-weight: 700;
  letter-spacing: -0.024em;
  color: var(--color-primary);
}
[data-theme="press-editorial"] .hero.hero--call-first h1 {
  font-family: 'Libre Bodoni', 'Playfair Display', Fraunces, serif;
  font-weight: 700;
}
/* Editorial heroes filter the photo for the press-cover look. */
[data-theme="press-editorial"] .hero.hero--brand-lifestyle,
[data-theme="press-editorial"] .hero.hero--visual-led {
  background-blend-mode: luminosity;
  background-color: #1a140c;
}
[data-theme="press-editorial"] .hero.hero--brand-lifestyle::before,
[data-theme="press-editorial"] .hero.hero--visual-led::before {
  background:
    linear-gradient(180deg, rgba(15, 13, 10, 0.35) 0%, rgba(15, 13, 10, 0.55) 55%, rgba(15, 13, 10, 0.78) 100%),
    linear-gradient(90deg, rgba(15, 13, 10, 0.55), rgba(15, 13, 10, 0.2) 60%, rgba(15, 13, 10, 0.1) 100%);
}
[data-theme="press-editorial"] .hero.hero--clinic {
  background-image: var(--hero-bg);
  border-top: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
}
[data-theme="press-editorial"] .hero.hero--clinic::before {
  background: linear-gradient(180deg,
    rgba(245, 238, 224, 0.85) 0%,
    rgba(245, 238, 224, 0.7) 55%,
    rgba(245, 238, 224, 0.95) 100%);
}

/* --- garden-bistro: family-hero typography handoff --------
   Garden-bistro uses DM Serif Display italic. Family heroes
   override h1 sizes; let DM Serif italic carry through. */
[data-theme="garden-bistro"] .hero.hero--brand-lifestyle h1,
[data-theme="garden-bistro"] .hero.hero--visual-led h1,
[data-theme="garden-bistro"] .hero.hero--clinic h1,
[data-theme="garden-bistro"] .hero.hero--call-first h1 {
  font-family: 'DM Serif Display', Fraunces, serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.012em;
}

/* --- emergency-band: editorial / pastel theme variants -----
   press-editorial: ink band with oxblood pulse, editorial type.
   garden-bistro: warm-peach calm rather than urgency-red, so the
   urgent-local family on bistro themes still feels distinct
   without breaking the pastel surface palette. */
[data-theme="press-editorial"] .emergency-band {
  background: var(--color-primary);
  color: var(--color-surface);
  border-color: var(--color-accent);
}
[data-theme="press-editorial"] .emergency-band__copy strong {
  color: var(--color-surface);
  font-family: 'Libre Bodoni', 'Playfair Display', Fraunces, serif;
}
[data-theme="press-editorial"] .emergency-band__copy span { color: rgba(245, 238, 224, 0.78); }
[data-theme="press-editorial"] .emergency-band--247 {
  background: var(--color-primary);
  border-block-color: var(--color-accent);
}
[data-theme="press-editorial"] .emergency-status {
  background: var(--color-primary);
  color: var(--color-surface);
  border-bottom-color: var(--color-accent);
}
[data-theme="press-editorial"] .emergency-status__row,
[data-theme="press-editorial"] .emergency-status__text strong { color: var(--color-surface); }
[data-theme="garden-bistro"] .emergency-band {
  background:
    radial-gradient(720px 220px at 0% 50%, color-mix(in srgb, var(--color-accent) 40%, transparent), transparent 60%),
    color-mix(in srgb, var(--color-accent) 22%, var(--color-surface));
  border-block-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-line));
  border-radius: 0;
}
[data-theme="garden-bistro"] .emergency-band--247 {
  background:
    radial-gradient(720px 220px at 0% 50%, color-mix(in srgb, var(--color-accent) 55%, transparent), transparent 60%),
    color-mix(in srgb, var(--color-accent) 34%, var(--color-surface));
}
[data-theme="garden-bistro"] .emergency-band__copy strong {
  color: var(--color-primary);
  font-family: 'DM Serif Display', serif;
  font-style: italic;
}

/* --- midnight-lounge: emergency-band re-tinted for dark bg --
   Default emergency-band rule color-mixes accent (brass) over
   --color-surface which is #0b0d14 (dark) — gives a too-dim
   strip. Re-tune so the band reads as a confident brass band
   on the dark theme. */
[data-theme="midnight-lounge"] .emergency-band {
  background:
    radial-gradient(720px 220px at 0% 50%, rgba(212, 162, 76, 0.35), transparent 60%),
    var(--color-surface-2);
  border-block: 1px solid rgba(212, 162, 76, 0.35);
}
[data-theme="midnight-lounge"] .emergency-band--247 {
  background:
    radial-gradient(720px 220px at 0% 50%, rgba(212, 162, 76, 0.5), transparent 60%),
    var(--color-surface-warm);
  border-block-color: rgba(212, 162, 76, 0.5);
}
[data-theme="midnight-lounge"] .emergency-band__copy strong { color: var(--color-ink); }
[data-theme="midnight-lounge"] .emergency-band__copy span   { color: var(--color-ink-soft); }
[data-theme="midnight-lounge"] .emergency-status {
  background: var(--color-surface-2);
  border-bottom-color: var(--color-line-strong);
}

/* --- structural-mono: family-hero handoff ---------------------
   The multipage cinematic-hero override block at line ~2604 already
   handles `.hero` + `.hero--simple` on structural-mono × multipage.
   Family heroes (.hero--brand-lifestyle / .hero--visual-led /
   .hero--clinic) have higher specificity and were already winning,
   but we need to ensure the brand_lifestyle / visual_led image hero
   on structural-mono still uses the lane's Inter Tight typography. */
[data-theme="structural-mono"] .hero.hero--brand-lifestyle h1,
[data-theme="structural-mono"] .hero.hero--visual-led h1,
[data-theme="structural-mono"] .hero.hero--clinic h1,
[data-theme="structural-mono"] .hero.hero--call-first h1 {
  font-family: "Inter Tight", "Inter", ui-sans-serif, sans-serif;
  letter-spacing: -0.034em;
  font-weight: 800;
}
[data-theme="structural-mono"] .hero.hero--brand-lifestyle .eyebrow,
[data-theme="structural-mono"] .hero.hero--visual-led .eyebrow {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "tnum", "ss01";
}
/* structural-mono uses no fixed-attach (lane is content-first; the
   .hero rule at line ~2118 puts a vertical rule and no parallax). */
[data-theme="structural-mono"] .hero.hero--brand-lifestyle,
[data-theme="structural-mono"] .hero.hero--visual-led {
  background-attachment: scroll !important;
  border-radius: 0;
}

/* --- midnight-lounge: family-hero subhead carry-through ----- */
[data-theme="midnight-lounge"] .hero.hero--clinic h1 { color: var(--color-ink); }
[data-theme="midnight-lounge"] .hero.hero--clinic .hero-subhead { color: var(--color-ink-soft); }

/* --- universal: hero-cta on family heroes wraps on tablet --
   The hero CTA pair (.btn-primary + .btn-ghost both btn-xl) can
   collide at the 540-720px range on the call-first / clinic
   heroes. Force wrap. */
@media (min-width: 540px) and (max-width: 720px) {
  .hero.hero--call-first .hero-cta,
  .hero.hero--clinic .hero-cta {
    flex-wrap: wrap;
  }
  .hero.hero--call-first .hero-cta .btn,
  .hero.hero--clinic .hero-cta .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* --- press-editorial: trust-pill tone (Phase 2 used a tint that
       collided with the masthead-strip's text-transform: uppercase
       on press-editorial; explicit override so the pill body remains
       proportional). ----- */
[data-theme="press-editorial"] .trust-strip__row { gap: 0.5rem 1rem; }
[data-theme="press-editorial"] .trust-pill {
  font-family: 'Public Sans', Inter, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.45rem 0.95rem;
}

/* --- garden-bistro: sticky bar accent tweak ---
   Default bar uses var(--color-primary) which is forest sage —
   on bistro that pairs with peach accent for hover. Same pattern
   as other themes; just confirming the rule applies. */
[data-theme="garden-bistro"] .sticky-mobile-call-bar__btn,
[data-theme="garden-bistro"] .sticky-mobile-book-bar__btn,
[data-theme="garden-bistro"] .sticky-mobile-book-call-bar__btn--book {
  background: var(--color-primary);
  color: var(--color-surface);
}
[data-theme="garden-bistro"] .sticky-mobile-call-bar__btn:hover,
[data-theme="garden-bistro"] .sticky-mobile-book-bar__btn:hover,
[data-theme="garden-bistro"] .sticky-mobile-book-call-bar__btn--book:hover {
  background: var(--color-accent);
  color: var(--color-primary);
}

/* ============================================================
   TEMPLATE-FAMILY POLISH PASS (Phase 8 — operator-requested)
   1. Uniformity within sections — equal heights / aspect ratios /
      padding across siblings in grids (tiles, cards, pills, buttons,
      photos).
   2. Scroll-in reveal animations on 2 sections per family. CSS-only
      via the existing .reveal cascade (the family shell already
      loads reveal.js + IntersectionObserver wires .is-in). We add
      per-section opt-in via [data-section] selectors so the family-
      composed pages animate without needing section-emitter changes.
   3. Clickable-pop animation — buttons / cards / tiles / pills
      lift + shadow-up on hover (pop-up) AND get a one-shot scale-in
      on first viewport entry (pop-in via animation-timeline:view()
      where supported, graceful no-op elsewhere).
   ============================================================ */

/* ----- (1) UNIFORMITY ------------------------------------------------- */

/* Grids of cards / tiles: align siblings to identical visible heights so
   the row reads as a deliberate set, not a ragged stack. align-items
   stretch + .card / .testimonial / .condition-card / .value flex column
   layout keeps internal CTAs (when present) on a shared baseline. */
.services-grid,
.services-grid--compact,
.services-grid--visual,
.services-grid--clinical,
.reviews-3up__grid,
.reviews-grid,
.conditions-grid,
.values-grid,
.gallery-projects__grid,
.gallery-brand__grid {
  align-items: stretch;
}
.services-grid > .card,
.services-grid > .card-service,
.reviews-3up__grid > .testimonial,
.reviews-grid > .testimonial,
.values-grid > .value,
.conditions-grid > .condition-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.services-grid > .card-service h3,
.services-grid > .card-service p,
.conditions-grid > .condition-card h3,
.conditions-grid > .condition-card p,
.values-grid > .value h3,
.values-grid > .value p,
.reviews-3up__grid > .testimonial blockquote,
.reviews-grid > .testimonial blockquote {
  text-wrap: pretty;
}
.services-grid > .card-service > p,
.conditions-grid > .condition-card > p {
  flex-grow: 1;          /* pushes any trailing element to the card's bottom edge */
}

/* Tiles (gallery / project) — uniform aspect ratio per family-tile-type.
   The existing per-family rules already set ratios; we lock them in via
   !important against any inline overrides and harmonise object-fit. */
.gallery-tile,
.gallery-brand__tile {
  display: block;
}
.gallery-tile img,
.gallery-brand__tile img,
.case-study__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Trust pills — uniform height + matching min-width so the row reads as
   a balanced strip rather than a string of different-length chips. */
.trust-strip__row .trust-pill {
  min-height: 36px;
  min-width: 7rem;
  justify-content: center;
}

/* Buttons within a section's CTA cluster — equal height so the row reads
   as a unified pair / trio (Call + Quote, Book + Call + Directions,
   Book + Call, etc.). .btn-xl already sets min-height; mirror for plain
   .btn within hero / quick-booking / final-cta groups so the pairing
   matches visually. */
.hero-cta .btn,
.quick-booking-strip__row .btn,
.final-cta-book__actions .btn,
.final-cta-call__inner .btn {
  min-height: 48px;
}
.hero-cta .btn-xl,
.final-cta-call__inner .btn-xl,
.final-cta-book__actions .btn-xl {
  min-height: 52px;
}

/* Pricing-menu rows — equal vertical rhythm regardless of description
   length (longer descriptions wrap; rows still align). */
.pricing-row { min-height: 56px; }

/* Practitioners + team — center the bio block at a consistent max width
   so successive members read as the same kind of card. */
.team-section__bio,
.practitioners-grid__bio,
.practitioners-grid__placeholder {
  max-width: 52rem;
  margin: 0 auto;
  text-align: center;
}

/* Process step cards — equal-height across the row so the numbered
   sequence reads as a deliberate stepper, not a height-varying stack. */
.process-steps__list > .process-step {
  height: 100%;
  display: grid;          /* preserves the existing 2-col `num + body` layout */
}

/* ----- (3) SCROLL-IN REVEAL ANIMATIONS ------------------------------ */
/*
   The family-shell already loads reveal.js (renderFamilyShell wires it).
   reveal.js targets elements with class="reveal" and toggles .is-in via
   IntersectionObserver. Section emitters currently set .reveal on
   why-choose-us .value items but nowhere else. To animate sections
   without touching section-emitters, we drive the animation from CSS
   using [data-section] selectors + animation-timeline: view() (supported
   in Chromium / Safari 17+; falls through silently elsewhere where
   sections just appear without the rise — no broken layout). Two
   sections per family get the entrance:
   - urgent-local:                trust-strip-credentials + services-grid-compact
   - portfolio-project:           intro-credibility + gallery-projects
   - appointment-personal-care:   quick-booking-strip + services-pricing-menu
   - health-clinic:               conditions-treated-grid + practitioners-grid
*/

@supports (animation-timeline: view()) {
  /* Container fades up on viewport entry — used as the "section is here"
     framing animation for each chosen section per family. */
  @keyframes family-rise-in {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes family-slide-in-left {
    from { opacity: 0; transform: translateX(-44px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes family-slide-in-right {
    from { opacity: 0; transform: translateX(44px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  /* urgent-local: trust strip slides in from the left, service tiles
     stagger-rise on entry. */
  [data-section="trust-strip-credentials"] {
    animation: family-slide-in-left both;
    animation-timeline: view();
    animation-range: entry 0% cover 22%;
  }
  [data-section="services-grid-compact"] .services-grid > * {
    animation: family-rise-in both;
    animation-timeline: view();
    animation-range: entry 5% cover 30%;
  }
  [data-section="services-grid-compact"] .services-grid > *:nth-child(2) { animation-delay: 60ms; }
  [data-section="services-grid-compact"] .services-grid > *:nth-child(3) { animation-delay: 120ms; }
  [data-section="services-grid-compact"] .services-grid > *:nth-child(4) { animation-delay: 180ms; }
  [data-section="services-grid-compact"] .services-grid > *:nth-child(n+5) { animation-delay: 240ms; }

  /* portfolio-project: intro-credibility slides in from the right (the
     stat badge sits on the right column); gallery tiles stagger-rise. */
  [data-section="intro-credibility"] .intro-credibility__badge {
    animation: family-slide-in-right both;
    animation-timeline: view();
    animation-range: entry 0% cover 28%;
  }
  [data-section="intro-credibility"] .intro-credibility__grid > div:first-child {
    animation: family-slide-in-left both;
    animation-timeline: view();
    animation-range: entry 0% cover 28%;
  }
  [data-section="gallery-projects"] .gallery-projects__grid > .gallery-tile {
    animation: family-rise-in both;
    animation-timeline: view();
    animation-range: entry 5% cover 28%;
  }
  [data-section="gallery-projects"] .gallery-projects__grid > .gallery-tile:nth-child(2) { animation-delay: 50ms; }
  [data-section="gallery-projects"] .gallery-projects__grid > .gallery-tile:nth-child(3) { animation-delay: 100ms; }
  [data-section="gallery-projects"] .gallery-projects__grid > .gallery-tile:nth-child(4) { animation-delay: 150ms; }
  [data-section="gallery-projects"] .gallery-projects__grid > .gallery-tile:nth-child(n+5) { animation-delay: 200ms; }

  /* appointment-personal-care: quick-booking-strip slides in from above
     (rise); pricing-menu rows stagger-rise. */
  [data-section="quick-booking-strip"] {
    animation: family-rise-in both;
    animation-timeline: view();
    animation-range: entry 0% cover 18%;
  }
  [data-section="services-pricing-menu"] .pricing-menu > .pricing-row {
    animation: family-slide-in-left both;
    animation-timeline: view();
    animation-range: entry 5% cover 32%;
  }
  [data-section="services-pricing-menu"] .pricing-menu > .pricing-row:nth-child(2) { animation-delay: 45ms; }
  [data-section="services-pricing-menu"] .pricing-menu > .pricing-row:nth-child(3) { animation-delay: 90ms; }
  [data-section="services-pricing-menu"] .pricing-menu > .pricing-row:nth-child(4) { animation-delay: 135ms; }
  [data-section="services-pricing-menu"] .pricing-menu > .pricing-row:nth-child(n+5) { animation-delay: 180ms; }

  /* health-clinic: conditions-grid + practitioners-grid stagger-rise.
     No emergency-loud slides — the family's compliance posture is
     "calm pacing, no aggressive motion". */
  [data-section="conditions-treated-grid"] .conditions-grid > .condition-card {
    animation: family-rise-in both;
    animation-timeline: view();
    animation-range: entry 5% cover 28%;
  }
  [data-section="conditions-treated-grid"] .conditions-grid > .condition-card:nth-child(2) { animation-delay: 55ms; }
  [data-section="conditions-treated-grid"] .conditions-grid > .condition-card:nth-child(3) { animation-delay: 110ms; }
  [data-section="conditions-treated-grid"] .conditions-grid > .condition-card:nth-child(4) { animation-delay: 165ms; }
  [data-section="conditions-treated-grid"] .conditions-grid > .condition-card:nth-child(n+5) { animation-delay: 220ms; }
  [data-section="practitioners-grid"] .practitioners-grid__bio,
  [data-section="practitioners-grid"] .practitioners-grid__placeholder {
    animation: family-rise-in both;
    animation-timeline: view();
    animation-range: entry 0% cover 25%;
  }

  /* prefers-reduced-motion — skip all family scroll animations. */
  @media (prefers-reduced-motion: reduce) {
    [data-section="trust-strip-credentials"],
    [data-section="services-grid-compact"] .services-grid > *,
    [data-section="intro-credibility"] .intro-credibility__badge,
    [data-section="intro-credibility"] .intro-credibility__grid > div:first-child,
    [data-section="gallery-projects"] .gallery-projects__grid > .gallery-tile,
    [data-section="quick-booking-strip"],
    [data-section="services-pricing-menu"] .pricing-menu > .pricing-row,
    [data-section="conditions-treated-grid"] .conditions-grid > .condition-card,
    [data-section="practitioners-grid"] .practitioners-grid__bio,
    [data-section="practitioners-grid"] .practitioners-grid__placeholder {
      animation: none;
    }
  }
}

/* ----- (4) CLICKABLE POP --------------------------------------------- */
/*
   Two layers of motion on anything the operator considers clickable:
   - Hover-pop: a small lift + shadow-up on pointer hover (no animation
     on touch-only devices via @media (hover: hover)).
   - First-view pop-in: a one-shot subtle scale-up as the element enters
     the viewport (animation-timeline: view(), feature-gated).
*/

/* Targets — every clickable surface across the family layouts: */
@media (hover: hover) {
  .nav-cta:hover,
  .nav-call:hover,
  .nav-cta-mobile:hover,
  .nav-brand:hover,
  .btn:hover,
  .trust-pill:hover,
  .card:hover,
  .card-service:hover,
  .card-service--compact:hover,
  .card-service--visual:hover,
  .card-service--clinical:hover,
  .condition-card:hover,
  .gallery-tile:hover,
  .gallery-brand__tile:hover,
  .pricing-row:hover,
  .process-step:hover,
  .value:hover,
  .testimonial:hover,
  .testimonial--grid:hover,
  .case-study:hover,
  .sticky-mobile-call-bar__btn:hover,
  .sticky-mobile-book-bar__btn:hover,
  .sticky-mobile-book-call-bar__btn:hover {
    transition:
      transform 220ms var(--ease),
      box-shadow 220ms var(--ease),
      border-color 220ms var(--ease),
      filter 220ms var(--ease);
  }

  /* Pop intensity per element type. */
  .btn:hover                                { transform: translateY(-2px) scale(1.015); }
  .nav-cta:hover, .nav-call:hover           { transform: translateY(-1px) scale(1.02); }
  .trust-pill:hover                         { transform: translateY(-1px) scale(1.03); border-color: color-mix(in srgb, var(--color-accent) 60%, transparent); }
  .card-service:hover,
  .card-service--compact:hover,
  .card-service--clinical:hover             { transform: translateY(-3px) scale(1.008); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-line)); }
  .card-service--visual:hover               { transform: translateY(-4px) scale(1.006); box-shadow: var(--shadow-lg); }
  .condition-card:hover                     { transform: translateY(-3px); border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-line)); }
  .gallery-tile:hover, .gallery-brand__tile:hover {
    transform: translateY(-3px) scale(1.008);
    box-shadow: var(--shadow-md);
  }
  .gallery-tile:hover img, .gallery-brand__tile:hover img {
    /* Image-zoom is handled by the existing per-family rule; we boost it. */
    transform: scale(1.06);
    filter: brightness(1.06);
  }
  .pricing-row:hover { transform: translateX(2px); }
  .pricing-row:hover .pricing-row__price { color: var(--color-accent); }
  .process-step:hover                       { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
  .value:hover                              { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
  .testimonial:hover, .testimonial--grid:hover { transform: translateY(-3px) scale(1.005); box-shadow: var(--shadow-md); }
  .case-study:hover                         { transform: translateY(-2px); }
  .sticky-mobile-call-bar__btn:hover,
  .sticky-mobile-book-bar__btn:hover,
  .sticky-mobile-book-call-bar__btn:hover   { transform: translateY(-2px) scale(1.02); }
}

/* Clinical compliance: testimonials in the clinic family deliberately
   don't lift (subdued posture). Re-suppress here so the hover-pop block
   above doesn't reintroduce motion that Phase 5 explicitly removed. */
.testimonial--clinical:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
  border-color: var(--color-line);
}

/* First-view pop-in for clickable surfaces — feature-gated. */
@supports (animation-timeline: view()) {
  @keyframes family-pop-in {
    from { transform: scale(0.96); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
  }
  .btn-xl,
  [data-section] .trust-pill,
  [data-section] .pricing-row__price,
  .emergency-band .btn,
  .quick-booking-strip__row .btn,
  .booking-embed__inner .btn,
  .final-cta-call__inner .btn,
  .final-cta-book__actions .btn {
    animation: family-pop-in both;
    animation-timeline: view();
    animation-range: entry 0% cover 18%;
  }
  @media (prefers-reduced-motion: reduce) {
    .btn-xl,
    [data-section] .trust-pill,
    [data-section] .pricing-row__price,
    .emergency-band .btn,
    .quick-booking-strip__row .btn,
    .booking-embed__inner .btn,
    .final-cta-call__inner .btn,
    .final-cta-book__actions .btn {
      animation: none;
    }
  }
}

/* Active / press feedback — universal, no feature gate. Gives every
   clickable surface a tactile depress on tap so touch users get
   feedback even where hover isn't available. */
.btn:active,
.nav-cta:active,
.nav-call:active,
.nav-cta-mobile:active,
.trust-pill:active,
.card-service:active,
.condition-card:active,
.value:active,
.gallery-tile:active,
.gallery-brand__tile:active,
.pricing-row:active,
.process-step:active,
.testimonial:active,
.sticky-mobile-call-bar__btn:active,
.sticky-mobile-book-bar__btn:active,
.sticky-mobile-book-call-bar__btn:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 60ms;
}

/* ============================================================
   THEME: heritage-stamp
   Heritage shopfront stamp — Oswald uppercase + Raleway on
   warm cream. Stark stamped-black wordmark anchor, section-
   marker flanking hairlines, monochrome B&W imagery, sharp-
   rectangle CTAs, dark footer band.
   ============================================================ */

[data-theme="heritage-stamp"] {
  --color-primary: #1c1a16;             /* warm near-black — headings + ink */
  --color-ink: #1c1a16;
  --color-ink-soft: #4d4a44;            /* secondary text */
  --color-ink-faint: #7a7773;           /* metadata */
  --color-surface: #f6f3ec;             /* warm cream — page background */
  --color-surface-2: #ebe6d9;           /* alternate band, slightly cooler */
  --color-surface-warm: #faf7f1;        /* lightest cream — testimonial cards / hero */
  --color-surface-deep: #1c1a16;        /* footer band + stamp wordmark fill */
  --color-accent: #7a6647;              /* warm bronze — eyebrow, icon fill, hairline accents */
  --color-line: rgba(28, 26, 22, 0.10);
  --color-line-strong: rgba(28, 26, 22, 0.22);
  --font-heading: '"Oswald", "Arial Narrow", sans-serif';
  --font-body: 'Raleway, ui-sans-serif, system-ui, sans-serif';
  /* Sharp-rectangle geometry — stamp aesthetic */
  --radius-sm: 0.125rem;
  --radius: 0.125rem;
  --radius-lg: 0.25rem;
  --radius-xl: 0.5rem;
  --shadow-sm: 0 1px 3px rgba(28, 26, 22, 0.06);
  --shadow-md: 0 8px 24px -8px rgba(28, 26, 22, 0.14);
  --shadow-lg: 0 24px 56px -16px rgba(28, 26, 22, 0.22);
}

[data-theme="heritage-stamp"] body {
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: Raleway, ui-sans-serif, system-ui, sans-serif;
}

[data-theme="heritage-stamp"] h1,
[data-theme="heritage-stamp"] h2,
[data-theme="heritage-stamp"] h3,
[data-theme="heritage-stamp"] h4 {
  font-family: 'Oswald', "Arial Narrow", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-primary);
}

/* Tracked uppercase Oswald for h1/h2. h3 eyebrow-style uses 0.18em. */
[data-theme="heritage-stamp"] h1 { font-weight: 700; letter-spacing: 0.08em; }
[data-theme="heritage-stamp"] h3 { letter-spacing: 0.18em; font-weight: 500; }

/* ---------------------------------------- Eyebrow — flanking hairlines (the section marker) */
[data-theme="heritage-stamp"] .eyebrow {
  background: transparent;
  color: var(--color-accent);
  font-family: Raleway, ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  position: relative;
}
/* Left hairline via ::before */
[data-theme="heritage-stamp"] .eyebrow::before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 1px;
  background: var(--color-accent);
  flex-shrink: 0;
}
/* Right hairline via ::after */
[data-theme="heritage-stamp"] .eyebrow::after {
  content: "";
  display: inline-block;
  width: 40px;
  height: 1px;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* ---------------------------------------- Section titles — flanking hairlines */
[data-theme="heritage-stamp"] .section-title h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
}
[data-theme="heritage-stamp"] .section-title h2::before,
[data-theme="heritage-stamp"] .section-title h2::after {
  content: "";
  flex: 0 0 40px;
  height: 1px;
  border-top: 1px solid var(--color-accent);
}

/* ---------------------------------------- Nav */
[data-theme="heritage-stamp"] .nav {
  background: rgba(246, 243, 236, 0.92);
  backdrop-filter: saturate(1.2) blur(12px);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  border-bottom: 1px solid var(--color-line);
}
[data-theme="heritage-stamp"] .nav-links a {
  color: var(--color-ink-soft);
  font-family: Raleway, ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
}
[data-theme="heritage-stamp"] .nav-links a:hover,
[data-theme="heritage-stamp"] .nav-links a.is-active { color: var(--color-primary); }
[data-theme="heritage-stamp"] .nav-links a.is-active::after { background: var(--color-accent); height: 2px; border-radius: 0; }
[data-theme="heritage-stamp"] .nav-brand { color: var(--color-primary); }

/* THE stamped wordmark — the single most identifying motif.
   Renders as a stark black-stamp rectangle with cream Oswald type inside. */
[data-theme="heritage-stamp"] .nav-brand__mark {
  background: var(--color-surface-deep);
  color: var(--color-surface);
  border-radius: 2px;
  box-shadow: none;
  font-family: 'Oswald', "Arial Narrow", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 8px;
}

/* ---------------------------------------- Buttons — sharp rectangle, 1px border, invert on hover */
[data-theme="heritage-stamp"] .btn {
  border-radius: var(--radius-sm);
  font-family: Raleway, ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.88rem;
  transition: background-color 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease);
}
[data-theme="heritage-stamp"] .btn-primary {
  background: var(--color-primary);
  color: var(--color-surface);
  border-color: var(--color-primary);
  box-shadow: none;
}
[data-theme="heritage-stamp"] .btn-primary:hover {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
[data-theme="heritage-stamp"] .btn-ghost {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
[data-theme="heritage-stamp"] .btn-ghost:hover {
  background: var(--color-primary);
  color: var(--color-surface);
  border-color: var(--color-primary);
}
/* Force hero ghost buttons to ink-on-cream for heritage-stamp. Covers
   ALL hero variants and ALL packages:
     - multipage / advanced default hero (`.hero .btn-ghost`) — package
       rule at line ~1885 sets `color: var(--hero-ink)` which is cream
       on light themes = invisible.
     - `.hero.hero--brand-lifestyle .btn-ghost` (appointment family
       standalone, line ~3630) — cream-on-cream-rgba designed for the
       dark-scrim hero that heritage-stamp doesn't use.
     - `.hero .btn.btn-ghost.btn-xl` (family-overlay xl variant).

   `!important` is used because the package-level rule wins on a
   pure-class specificity comparison with `[data-theme] .hero
   .btn-ghost` when the package selector also uses `:is()` (which
   tiebreaks one way or the other depending on cascade position).
   The simplest robust answer is to mark the colour + border-color +
   background as theme-locked. */
[data-theme="heritage-stamp"] .hero .btn.btn-ghost,
[data-theme="heritage-stamp"] .hero .btn.btn-ghost.btn-xl,
[data-theme="heritage-stamp"] .hero .btn.btn-ghost.btn-arrow,
[data-theme="heritage-stamp"] .hero.hero--brand-lifestyle .btn-ghost {
  background: transparent !important;
  color: var(--color-primary) !important;
  border: 1px solid var(--color-primary) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-shadow: none;
}
[data-theme="heritage-stamp"] .hero .btn.btn-ghost:hover,
[data-theme="heritage-stamp"] .hero .btn.btn-ghost.btn-xl:hover,
[data-theme="heritage-stamp"] .hero .btn.btn-ghost.btn-arrow:hover,
[data-theme="heritage-stamp"] .hero.hero--brand-lifestyle .btn-ghost:hover {
  background: var(--color-primary) !important;
  color: var(--color-surface) !important;
  border-color: var(--color-primary) !important;
}
/* Hero h1 + eyebrow + subhead colour overrides for the brand-lifestyle
   hero — the section's defaults set cream text on the assumption of a
   dark scrim; heritage-stamp's lighter hero needs ink text instead. */
[data-theme="heritage-stamp"] .hero.hero--brand-lifestyle h1 {
  color: var(--color-primary);
  text-shadow: none;
}
[data-theme="heritage-stamp"] .hero.hero--brand-lifestyle .hero-subhead {
  color: var(--color-ink-soft);
  text-shadow: none;
}
[data-theme="heritage-stamp"] .hero.hero--brand-lifestyle .eyebrow {
  color: var(--color-accent);
  border-bottom: none;
}
/* Replace the section's default dark gradient scrim
   (rgba(15, 13, 10, 0.25 → 0.78) defined at line ~3594) with a light
   cream scrim. Without this override, the dark scrim keeps the hero
   dark even when the rest of heritage-stamp expects ink-on-cream
   contrast — so the ink-border ghost CTA "See our services" reads as
   "black on dark photo" and disappears.

   Cream gradient lets the sepia-treated photo bleed through with
   reduced saturation while keeping enough luminance for ink text to
   read at 4.5:1 contrast. Vertical fade keeps the bottom-third
   slightly brighter where the CTA row sits. */
[data-theme="heritage-stamp"] .hero.hero--brand-lifestyle::before {
  background:
    linear-gradient(180deg,
      rgba(246, 243, 236, 0.55) 0%,
      rgba(246, 243, 236, 0.72) 55%,
      rgba(246, 243, 236, 0.86) 100%),
    linear-gradient(90deg,
      rgba(246, 243, 236, 0.18),
      rgba(246, 243, 236, 0.08) 60%,
      rgba(246, 243, 236, 0.02) 100%);
}
/* Background-color fallback (when the photo URL fails to load): the
   default `.hero.hero--brand-lifestyle` sets `background-color: #1a1818`
   (a near-black) — flip to cream so heritage-stamp's hero degrades
   to cream-on-cream, not black-on-cream-text. */
[data-theme="heritage-stamp"] .hero.hero--brand-lifestyle {
  background-color: var(--color-surface);
  color: var(--color-ink);
}
[data-theme="heritage-stamp"] .btn-arrow::after { content: " →"; display: inline-block; margin-left: 0.35em; transition: transform 120ms var(--ease); }
[data-theme="heritage-stamp"] .btn-arrow:hover::after { transform: translateX(2px); }

/* ---------------------------------------- Hero — light cream, no overlay */
[data-theme="heritage-stamp"] .hero {
  background: var(--color-surface-warm);
  /* Landing package: overrides default gradient. */
}
/* Multipage package imposes a full-bleed photo hero with a dark scrim via
   ::before. Remove the scrim so heritage-stamp stays cream. */
[data-theme="heritage-stamp"] .hero::before { display: none; }
[data-theme="heritage-stamp"] .hero::after { display: none; }
/* Multipage hero also uses background-image: var(--hero-bg). Override to cream. */
[data-theme="heritage-stamp"]:is([data-package="multipage"], [data-package="advanced"]) .hero,
[data-theme="heritage-stamp"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple {
  background: var(--color-surface-warm) !important;
  background-image: none !important;
  color: var(--color-ink);
  min-height: min(72vh, 640px);
}
/* Restore ink colors overridden by multipage hero-ink tokens */
[data-theme="heritage-stamp"]:is([data-package="multipage"], [data-package="advanced"]) .hero h1,
[data-theme="heritage-stamp"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple h1 {
  color: var(--color-primary);
  text-shadow: none;
  letter-spacing: 0.08em;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-family: 'Oswald', "Arial Narrow", sans-serif;
  text-transform: uppercase;
}
[data-theme="heritage-stamp"]:is([data-package="multipage"], [data-package="advanced"]) .hero .hero-lede,
[data-theme="heritage-stamp"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple .hero-lede {
  color: var(--color-ink-soft);
  text-shadow: none;
}
[data-theme="heritage-stamp"]:is([data-package="multipage"], [data-package="advanced"]) .hero .eyebrow,
[data-theme="heritage-stamp"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple .eyebrow {
  /* Restore inline-flex so the theme's ::before/::after flanking hairlines
     remain inline pseudo-marks. The package's hero rule sets inline-block,
     which would let the pseudo-elements expand to full width. */
  display: inline-flex;
  color: var(--color-accent);
  border-bottom: none;
}
[data-theme="heritage-stamp"]:is([data-package="multipage"], [data-package="advanced"]) .hero .hero-meta,
[data-theme="heritage-stamp"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple .hero-meta {
  color: var(--color-ink-soft);
  border-top: 1px solid var(--color-line);
}
[data-theme="heritage-stamp"] .hero h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); letter-spacing: 0.08em; }
[data-theme="heritage-stamp"] .hero-lede { color: var(--color-ink-soft); }
[data-theme="heritage-stamp"] .hero-cta { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
[data-theme="heritage-stamp"] .hero-meta { color: var(--color-ink-soft); border-top: 1px solid var(--color-line); }
[data-theme="heritage-stamp"] .hero-art { box-shadow: none; border: 1px solid var(--color-line); }

/* ---------------------------------------- Proof / trust strip */
[data-theme="heritage-stamp"] .proof-strip {
  background: var(--color-surface-2);
  border-color: var(--color-line);
}
[data-theme="heritage-stamp"] .proof-row { color: var(--color-ink-soft); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; font-weight: 600; }
[data-theme="heritage-stamp"] .proof-row strong { color: var(--color-primary); }

/* ---------------------------------------- Sections */
[data-theme="heritage-stamp"] .section-alt,
[data-theme="heritage-stamp"] .section-warm { background: var(--color-surface-2); border-color: var(--color-line); }
[data-theme="heritage-stamp"] .section + .section { border-top: 1px solid var(--color-line); }
[data-theme="heritage-stamp"] .section-title p,
[data-theme="heritage-stamp"] .lede { color: var(--color-ink-soft); }

/* ---------------------------------------- Cards, testimonials, values */
[data-theme="heritage-stamp"] .card,
[data-theme="heritage-stamp"] .testimonial,
[data-theme="heritage-stamp"] .value,
[data-theme="heritage-stamp"] .post-card,
[data-theme="heritage-stamp"] .stat-row,
[data-theme="heritage-stamp"] .contact-card,
[data-theme="heritage-stamp"] .faq details,
[data-theme="heritage-stamp"] .faq-list details,
[data-theme="heritage-stamp"] .empty {
  background: var(--color-surface-warm);
  border-color: var(--color-line-strong);
  border-radius: var(--radius);
  box-shadow: none;
}
[data-theme="heritage-stamp"] .card:hover,
[data-theme="heritage-stamp"] .post-card:hover { border-color: var(--color-accent); }
[data-theme="heritage-stamp"] .card-service__num { color: var(--color-accent); font-family: 'Oswald', "Arial Narrow", sans-serif; }

/* Dotted-leader rows for service price listings — the classic shop menu pattern */
[data-theme="heritage-stamp"] .card-service__price {
  font-family: Raleway, ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  color: var(--color-ink-soft);
  border-bottom: 1px dotted var(--color-line-strong);
  padding-bottom: 0.25rem;
}
[data-theme="heritage-stamp"] .value__glyph {
  background: transparent;
  color: var(--color-accent);
  box-shadow: none;
  border: 1px solid var(--color-line-strong);
  border-radius: 0;
}

/* ---------------------------------------- Testimonials */
[data-theme="heritage-stamp"] .testimonial__text {
  color: var(--color-ink);
  font-style: italic;
}
[data-theme="heritage-stamp"] .testimonial__stars { color: var(--color-accent); }
[data-theme="heritage-stamp"] .hero-art__quote,
[data-theme="heritage-stamp"] .hero-art__rating-chip,
[data-theme="heritage-stamp"] .feature-split__badge {
  background: var(--color-surface-warm);
  color: var(--color-ink);
  border: 1px solid var(--color-line-strong);
  box-shadow: none;
  border-radius: var(--radius);
}
[data-theme="heritage-stamp"] .hero-art__text { color: var(--color-ink); }
[data-theme="heritage-stamp"] .hero-art__author { color: var(--color-ink-soft); }
[data-theme="heritage-stamp"] .hero-art__stars,
[data-theme="heritage-stamp"] .hero-art__rating-chip .star,
[data-theme="heritage-stamp"] .feature-split__badge strong { color: var(--color-accent); }

/* ---------------------------------------- Stats */
[data-theme="heritage-stamp"] .stat-row__value { color: var(--color-primary); font-family: 'Oswald', "Arial Narrow", sans-serif; font-weight: 700; }
[data-theme="heritage-stamp"] .stat-row__label { color: var(--color-ink-soft); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; font-weight: 600; }

/* ---------------------------------------- CTA band */
[data-theme="heritage-stamp"] .cta-band {
  background: var(--color-surface-deep);
  color: var(--color-surface);
  border-radius: var(--radius);
  border-top: 1px solid var(--color-accent);
}
[data-theme="heritage-stamp"] .cta-band h2 { color: var(--color-surface); }
[data-theme="heritage-stamp"] .cta-band .btn-primary {
  background: var(--color-surface);
  color: var(--color-primary);
  border-color: var(--color-surface);
}
[data-theme="heritage-stamp"] .cta-band .btn-primary:hover {
  background: transparent;
  color: var(--color-surface);
  border-color: var(--color-surface);
}

/* ---------------------------------------- Footer — dark band with bronze accent top-rule */
[data-theme="heritage-stamp"] .footer {
  background: var(--color-surface-deep);
  color: var(--color-surface);
  border-top: 2px solid var(--color-accent);
}
[data-theme="heritage-stamp"] .footer-brand__name { color: var(--color-surface); font-family: 'Oswald', "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: 0.1em; }
[data-theme="heritage-stamp"] .footer-col h4 { color: var(--color-surface); font-family: Raleway, ui-sans-serif, system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; font-weight: 600; }
[data-theme="heritage-stamp"] .footer-col a { color: rgba(246, 243, 236, 0.65); }
[data-theme="heritage-stamp"] .footer-col a:hover { color: var(--color-surface); }
[data-theme="heritage-stamp"] .footer-bottom { color: rgba(246, 243, 236, 0.4); border-color: rgba(246, 243, 236, 0.12); }

/* ---------------------------------------- Contact form */
[data-theme="heritage-stamp"] .contact-form input,
[data-theme="heritage-stamp"] .contact-form textarea {
  background: var(--color-surface-warm);
  border-color: var(--color-line-strong);
  color: var(--color-ink);
  border-radius: var(--radius);
}
[data-theme="heritage-stamp"] .contact-form input:focus,
[data-theme="heritage-stamp"] .contact-form textarea:focus { border-color: var(--color-accent); outline: none; }

/* ---------------------------------------- Mobile nav panel */
[data-theme="heritage-stamp"] .nav-mobile-panel { background: var(--color-surface); border-color: var(--color-line); }
[data-theme="heritage-stamp"] .nav-mobile-panel a { color: var(--color-ink); }
/* Bug fix: CTA anchor inherits var(--color-ink) = near-black from the rule above,
   which matches the button background (also near-black = var(--color-primary)).
   Explicitly set warm-cream text so it contrasts against the dark button. */
[data-theme="heritage-stamp"] .nav-mobile-panel .nav-cta-mobile { color: var(--color-surface); }
[data-theme="heritage-stamp"] .nav-toggle > summary { background: var(--color-surface); border-color: var(--color-line-strong); }
[data-theme="heritage-stamp"] .nav-toggle > summary::after,
[data-theme="heritage-stamp"] .nav-toggle > summary::before { color: var(--color-primary); background: var(--color-primary); box-shadow: 0 -5px 0 var(--color-primary), 0 5px 0 var(--color-primary); }
[data-theme="heritage-stamp"] .nav-toggle[open] > summary::after { background: transparent; box-shadow: none; }

/* ---------------------------------------- Monochrome imagery — B&W filter; lifts on hover */
[data-theme="heritage-stamp"] .hero-art img,
[data-theme="heritage-stamp"] .feature-split__art img,
[data-theme="heritage-stamp"] .post-card img,
[data-theme="heritage-stamp"] .gallery-brand img {
  filter: grayscale(1) contrast(1.05);
  transition: filter 240ms var(--ease);
}
[data-theme="heritage-stamp"] .hero-art img:hover,
[data-theme="heritage-stamp"] .feature-split__art img:hover,
[data-theme="heritage-stamp"] .post-card img:hover,
[data-theme="heritage-stamp"] .gallery-brand img:hover {
  filter: grayscale(0.5) contrast(1.05);
}

/* ---------------------------------------- Family overlay touch-ups */
[data-theme="heritage-stamp"] .btn-xl {
  background: var(--color-primary);
  color: var(--color-surface);
  border-radius: var(--radius-sm);
  font-family: 'Oswald', "Arial Narrow", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
[data-theme="heritage-stamp"] .trust-strip { border-color: var(--color-line); }
[data-theme="heritage-stamp"] .trust-pill { border-color: var(--color-line-strong); background: var(--color-surface-warm); color: var(--color-ink); border-radius: var(--radius); }
[data-theme="heritage-stamp"] .emergency-band { background: var(--color-surface-deep); color: var(--color-surface); }
[data-theme="heritage-stamp"] .services-grid-compact .card-service { border-color: var(--color-line-strong); }
[data-theme="heritage-stamp"] .footer-nap { color: rgba(246, 243, 236, 0.75); }
[data-theme="heritage-stamp"] .sticky-mobile-call-bar { background: var(--color-surface-deep); color: var(--color-surface); border-radius: 0; }
[data-theme="heritage-stamp"] .sticky-call {
  background: var(--color-primary);
  color: var(--color-surface);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px -10px rgba(28, 26, 22, 0.5);
}
[data-theme="heritage-stamp"] .sticky-call:hover {
  background: var(--color-accent);
  color: var(--color-surface);
}

/* Trust bar */
[data-theme="heritage-stamp"] .trust-bar {
  background: var(--color-surface-2);
  border-color: var(--color-line);
  color: var(--color-ink-soft);
}
[data-theme="heritage-stamp"] .trust-bar__item strong { color: var(--color-primary); }

/* ============================================================
   HERITAGE-STAMP — quick-booking-strip button sizing
   ------------------------------------------------------------
   Operator wants the menu-bar buttons and the section-below-hero
   buttons (`.quick-booking-strip .btn`) to be the same size. The
   nav-bar buttons are intentionally 25% smaller than the body .btn
   defaults (per call-buttons.css comment at line ~55) — size the
   strip buttons down to match the nav scale: padding 0.675rem
   1.2rem, font 0.7125rem, gap 0.4125rem.
   ============================================================ */
[data-theme="heritage-stamp"] .quick-booking-strip .btn {
  padding: 0.675rem 1.2rem;
  font-size: 0.7125rem;
  gap: 0.4125rem;
  font-weight: 600;
}

/* ============================================================
   HERITAGE-STAMP — hero image as page-level fixed backdrop
   ------------------------------------------------------------
   When the customer has supplied a hero image, that image becomes
   a fixed full-viewport background behind the entire page, treated
   with a black-and-white sepia filter so it reads as a vintage
   shopfront photograph. Sections sit on top as translucent cream
   panels so headlines + body copy stay legible while the
   photograph reads through every band of the page.

   Implementation: a position:fixed pseudo-element on <body> renders
   the image rather than `background-attachment: fixed` — the
   pseudo path works identically on mobile (where fixed-attachment
   is unreliable in iOS Safari and scales unpredictably against a
   full-document-height body). Same approach midnight-lounge uses
   for its homepage backdrop block above.

   Triggered by `body[style*="--hero-bg"]` — generate.ts emits the
   inline `style="--hero-bg: url('...')"` only when content.hero_image
   is set, so customers without a hero photo render the original
   cream-on-cream heritage-stamp aesthetic unchanged.
   ============================================================ */
[data-theme="heritage-stamp"] body[style*="--hero-bg"] {
  /* Transparent body so the position:fixed ::before pseudo (z-index: -1)
     can paint through. The pseudo itself carries a cream fallback for
     when the image is still loading. Without this, body's solid bg
     would obscure the pseudo since a z:-1 child paints behind a
     positioned parent's background-color. */
  background-color: transparent;
  position: relative;
  min-height: 100vh;
}
[data-theme="heritage-stamp"] body[style*="--hero-bg"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: var(--hero-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-surface);
  /* Black-and-white sepia: fully desaturate, warm with a 55% sepia
     tint, slight contrast boost, brightness pulled in 8% so the
     cream section overlays above remain legible regardless of the
     source image's exposure. */
  filter: grayscale(1) sepia(0.55) contrast(1.06) brightness(0.92);
  pointer-events: none;
}
/* Hero loses its own surface treatment so the page backdrop bleeds
   through, but a thin cream overlay keeps the hero headline + CTAs
   readable against whatever luminance the photo lands at. */
[data-theme="heritage-stamp"] body[style*="--hero-bg"] .hero,
[data-theme="heritage-stamp"] body[style*="--hero-bg"] .hero--simple {
  background-image: none;
  background-color: color-mix(in srgb, var(--color-surface) 70%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
/* Multipage / advanced hero override (added in the QA fix loop above)
   used `!important` to suppress the package's default dark scrim. When
   --hero-bg is on body we want the cream surface to be translucent so
   the page backdrop shows through — also with `!important` so the
   specificity ladder is matched. */
[data-theme="heritage-stamp"]:is([data-package="multipage"], [data-package="advanced"]) body[style*="--hero-bg"] .hero,
[data-theme="heritage-stamp"]:is([data-package="multipage"], [data-package="advanced"]) body[style*="--hero-bg"] .hero--simple {
  background: color-mix(in srgb, var(--color-surface) 70%, transparent) !important;
  background-image: none !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
/* Hero-art panel (the split-hero right-side image card on landing /
   advanced) is suppressed when the page-level backdrop is in play —
   the body image is the visual; a duplicate inside the hero would
   compete and read as redundant. */
[data-theme="heritage-stamp"] body[style*="--hero-bg"] .hero-art {
  display: none;
}
/* Sections become translucent cream so the photograph reads through
   every band of the page but body text + cards stay legible. Sectons
   carrying their own card chrome (hairline borders, the dotted-leader
   service rows) sit on top of the translucent surface unchanged. */
[data-theme="heritage-stamp"] body[style*="--hero-bg"] .section,
[data-theme="heritage-stamp"] body[style*="--hero-bg"] .section-alt,
[data-theme="heritage-stamp"] body[style*="--hero-bg"] .section-warm,
[data-theme="heritage-stamp"] body[style*="--hero-bg"] .proof-strip {
  background-color: color-mix(in srgb, var(--color-surface) 88%, transparent);
}
/* Footer keeps its dark-band identity as the page anchor, but lets a
   hint of the backdrop bleed through so the photo carries from top
   of page to bottom. */
[data-theme="heritage-stamp"] body[style*="--hero-bg"] .footer {
  background-color: color-mix(in srgb, var(--color-surface-deep) 92%, transparent);
}
/* Nav stays opaque so the brand stamp + nav links don't ghost over
   the photograph at scroll-top. */
[data-theme="heritage-stamp"] body[style*="--hero-bg"] .nav {
  background-color: color-mix(in srgb, var(--color-surface) 94%, transparent);
}

/* ============================================================
   THEME: heraldry-noir
   Vintage trade-shop poster — Abril Fatface italic + Inter,
   gold-rule flanking section headings, drenched coal surface,
   sharp-rectangle CTAs, em-dash hero ornament, 85% hero
   overlay. Sister theme to midnight-lounge but ceremonial /
   trade-shop where midnight is lounge / cocktail.
   ============================================================ */

[data-theme="heraldry-noir"] {
  --color-primary: #eae8df;             /* warm bone-paper — headings + ink */
  --color-ink: #eae8df;
  --color-ink-soft: #c9bdac;            /* secondary text */
  --color-ink-faint: #8a8a8a;           /* metadata */
  --color-surface: #111111;             /* deep coal — page background */
  --color-surface-2: #1c1c1c;           /* alternating section / card base */
  --color-surface-warm: #221c16;        /* warm-tinted dark — stained-wood feel */
  --color-accent: #bbaa98;              /* gold-leaf — hairline rules, CTA borders */
  --color-accent-bright: #cfc3b7;       /* lighter gold-leaf — CTA hover fill */
  --color-line: #bbaa98;                /* hairline gold rule (1px) */
  --color-line-strong: #cfc3b7;         /* double-rule outer line (ceremonial) */
  --font-heading: '"Abril Fatface", "Playfair Display", Georgia, serif';
  --font-body: 'Inter, ui-sans-serif, system-ui, sans-serif';
  /* Sharp rectangle — no rounding anywhere */
  --radius-sm: 0;
  --radius: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 16px 40px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 40px 80px rgba(0, 0, 0, 0.75);
}

[data-theme="heraldry-noir"] body {
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

[data-theme="heraldry-noir"] p { color: var(--color-ink-soft); }

[data-theme="heraldry-noir"] h1,
[data-theme="heraldry-noir"] h2,
[data-theme="heraldry-noir"] h3,
[data-theme="heraldry-noir"] h4 {
  font-family: 'Abril Fatface', "Playfair Display", Georgia, serif;
  font-weight: 400;
  color: var(--color-primary);
  line-height: 1.1;
}

/* ---------------------------------------- Eyebrow — tracked uppercase Inter, flanking gold hairlines */
[data-theme="heraldry-noir"] .eyebrow {
  background: transparent;
  color: var(--color-accent);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  position: relative;
}
[data-theme="heraldry-noir"] .eyebrow::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 1px;
  background: var(--color-accent);
  flex-shrink: 0;
}
[data-theme="heraldry-noir"] .eyebrow::after {
  content: "";
  display: inline-block;
  width: 30px;
  height: 1px;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* THE signature: flanking hairline gold rules on ALL section titles.
   Centered variant (section-title--center) uses flex so hairlines sit
   on the same line as the text. Non-centered defaults to block display
   with the hairlines as separate lines below via padding-top decoration
   — but we still apply flex so even left-anchored headings show flanking
   lines; the text just anchors left and the right line fills the gap. */
[data-theme="heraldry-noir"] .section-title h2 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  flex-wrap: nowrap;
}
[data-theme="heraldry-noir"] .section-title--center h2 {
  justify-content: center;
  text-align: center;
}
[data-theme="heraldry-noir"] .section-title h2::before,
[data-theme="heraldry-noir"] .section-title h2::after {
  content: "";
  flex: 0 1 20%;
  min-width: 16px;
  height: 0;
  border-top: 1px solid var(--color-accent);
}
/* Centered variant gets 30% each side per brief */
[data-theme="heraldry-noir"] .section-title--center h2::before,
[data-theme="heraldry-noir"] .section-title--center h2::after {
  flex: 0 1 30%;
}

/* ---------------------------------------- Nav */
[data-theme="heraldry-noir"] .nav {
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  backdrop-filter: saturate(1.1) blur(16px);
  -webkit-backdrop-filter: saturate(1.1) blur(16px);
  border-bottom: 1px solid rgba(187, 170, 152, 0.18);
}
[data-theme="heraldry-noir"] .nav-links a {
  color: var(--color-ink-soft);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
}
[data-theme="heraldry-noir"] .nav-links a:hover,
[data-theme="heraldry-noir"] .nav-links a.is-active { color: var(--color-accent); }
[data-theme="heraldry-noir"] .nav-links a.is-active::after { background: var(--color-accent); height: 1px; border-radius: 0; }
[data-theme="heraldry-noir"] .nav-brand { color: var(--color-primary); }
[data-theme="heraldry-noir"] .nav-brand__mark {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 0;
  box-shadow: none;
  font-family: 'Abril Fatface', "Playfair Display", Georgia, serif;
  font-style: italic;
}

/* ---------------------------------------- Buttons — sharp rectangle, gold rule, fills on hover */
[data-theme="heraldry-noir"] .btn { border-radius: 0; }
[data-theme="heraldry-noir"] .btn-primary {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  box-shadow: none;
}
[data-theme="heraldry-noir"] .btn-primary:hover {
  background: var(--color-accent-bright);
  color: var(--color-surface);
  border-color: var(--color-accent-bright);
}
[data-theme="heraldry-noir"] .btn-ghost {
  color: var(--color-ink-soft);
  border: 1px solid var(--color-accent);
}
[data-theme="heraldry-noir"] .btn-ghost:hover {
  background: rgba(187, 170, 152, 0.12);
  color: var(--color-accent);
  border-color: var(--color-accent);
}
[data-theme="heraldry-noir"] .btn-arrow::after { content: " →"; display: inline-block; margin-left: 0.35em; transition: transform 120ms var(--ease); }
[data-theme="heraldry-noir"] .btn-arrow:hover::after { transform: translateX(2px); }

/* ---------------------------------------- Hero — 85% coal overlay, triple-stack rhythm */
[data-theme="heraldry-noir"] .hero {
  background:
    linear-gradient(rgba(17, 17, 17, 0.85), rgba(17, 17, 17, 0.85)),
    linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface) 100%);
  position: relative;
  overflow: hidden;
}
/* When the customer has a hero image, render it on a ::before pseudo
   so we can apply a sepia filter ONLY to the photo without tinting
   the headline + CTAs (CSS `filter` on the parent would cascade to
   text). The 85% coal overlay moves to ::after, sitting above the
   filtered photo. Hero content sits above both via z-index.

   Matches both placements of `--hero-bg`:
     - body-level (multipage / landing / advanced default heroes,
       set by generate.ts renderHeroImageVar)
     - hero-element-level (standalone family heroes like
       hero-brand-lifestyle which emit `style="--hero-bg: ..."`
       directly on the <section class="hero">)

   `background-attachment: fixed` pins the photo to the viewport so
   the photo stays static as visitors scroll the hero out of view —
   cinematic "page passing over the photograph" effect. iOS Safari
   historically ignores fixed-attachment with cover sizing and falls
   back to scroll; accepted as a mobile-only graceful degradation.

   Sepia treatment: `grayscale(1) sepia(0.55) contrast(1.05)
   brightness(0.92)` matches heritage-stamp's filter for visual
   consistency — desaturate fully, then warm with sepia tint, slight
   contrast boost, brightness pulled in so the 85% overlay reads
   correctly. */
[data-theme="heraldry-noir"] body[style*="--hero-bg"] .hero,
[data-theme="heraldry-noir"] .hero[style*="--hero-bg"] {
  background: var(--color-surface);
}
[data-theme="heraldry-noir"] body[style*="--hero-bg"] .hero::before,
[data-theme="heraldry-noir"] .hero[style*="--hero-bg"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  filter: grayscale(1) sepia(0.55) contrast(1.05) brightness(0.92);
  pointer-events: none;
}
[data-theme="heraldry-noir"] body[style*="--hero-bg"] .hero::after,
[data-theme="heraldry-noir"] .hero[style*="--hero-bg"]::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(17, 17, 17, 0.85);
  pointer-events: none;
}
[data-theme="heraldry-noir"] body[style*="--hero-bg"] .hero > *,
[data-theme="heraldry-noir"] .hero[style*="--hero-bg"] > * {
  position: relative;
  z-index: 2;
}
[data-theme="heraldry-noir"] .hero::after { display: none; }
/* Re-enable the ::after overlay when --hero-bg is present (the line
   above disables the default proof-dots ::after for the no-photo
   case; we need it back as the coal scrim when a photo is on). */
[data-theme="heraldry-noir"] body[style*="--hero-bg"] .hero::after,
[data-theme="heraldry-noir"] .hero[style*="--hero-bg"]::after {
  display: block;
}
/* Em-dash ornament on the hero eyebrow label: "———  LABEL  ———" vintage handbill style.
   letter-spacing: -0.1em tightens the triple-dash to read as a single ornamental mark. */
[data-theme="heraldry-noir"] .hero .eyebrow::before {
  content: "———";
  letter-spacing: -0.1em;
  color: var(--color-accent);
  font-size: 1em;
  background: none;
  width: auto;
  height: auto;
  flex-shrink: 0;
}
[data-theme="heraldry-noir"] .hero .eyebrow::after {
  content: "———";
  letter-spacing: -0.1em;
  color: var(--color-accent);
  font-size: 1em;
  background: none;
  width: auto;
  height: auto;
  flex-shrink: 0;
}
/* Capitalize italic display headline — the marquee word. NOT uppercase. */
[data-theme="heraldry-noir"] .hero h1 {
  font-style: italic;
  text-transform: capitalize;
  font-weight: 400;
  font-size: clamp(2.75rem, 5.5vw, 5rem);
  color: var(--color-primary);
}
[data-theme="heraldry-noir"] .hero-lede {
  color: var(--color-ink-soft);
}
[data-theme="heraldry-noir"] .hero-cta { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
[data-theme="heraldry-noir"] .hero-meta { color: var(--color-ink-faint); border-top: 1px solid rgba(187, 170, 152, 0.18); }
[data-theme="heraldry-noir"] .hero-art {
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.7);
}

/* ---------------------------------------- Proof / trust strip */
[data-theme="heraldry-noir"] .proof-strip {
  background: var(--color-surface-2);
  border-color: rgba(187, 170, 152, 0.18);
}
[data-theme="heraldry-noir"] .proof-row { color: var(--color-ink-soft); }
[data-theme="heraldry-noir"] .proof-row strong { color: var(--color-accent); }

/* ---------------------------------------- Sections */
[data-theme="heraldry-noir"] .section-alt,
[data-theme="heraldry-noir"] .section-warm { background: var(--color-surface-2); border-color: rgba(187, 170, 152, 0.12); }
[data-theme="heraldry-noir"] .section + .section { border-top: 1px solid rgba(187, 170, 152, 0.10); }
[data-theme="heraldry-noir"] .section-title p,
[data-theme="heraldry-noir"] .lede { color: var(--color-ink-soft); }

/* ---------------------------------------- Cards, testimonials, values */
[data-theme="heraldry-noir"] .card,
[data-theme="heraldry-noir"] .testimonial,
[data-theme="heraldry-noir"] .value,
[data-theme="heraldry-noir"] .post-card,
[data-theme="heraldry-noir"] .stat-row,
[data-theme="heraldry-noir"] .contact-card,
[data-theme="heraldry-noir"] .faq details,
[data-theme="heraldry-noir"] .faq-list details,
[data-theme="heraldry-noir"] .empty {
  background: var(--color-surface-2);
  border-color: rgba(187, 170, 152, 0.18);
  border-radius: 0;
  box-shadow: none;
}
[data-theme="heraldry-noir"] .card:hover,
[data-theme="heraldry-noir"] .post-card:hover { border-color: var(--color-accent); }
[data-theme="heraldry-noir"] .card-service__num { color: var(--color-accent); }
[data-theme="heraldry-noir"] .card-service__price { color: var(--color-ink-soft); font-weight: 700; }
[data-theme="heraldry-noir"] .value__glyph { background: rgba(187, 170, 152, 0.10); color: var(--color-accent); border-radius: 0; }

/* ---------------------------------------- Testimonials */
[data-theme="heraldry-noir"] .testimonial__text { color: var(--color-ink); font-style: italic; font-family: 'Abril Fatface', "Playfair Display", Georgia, serif; font-weight: 400; }
[data-theme="heraldry-noir"] .testimonial__stars { color: var(--color-accent); }
[data-theme="heraldry-noir"] .hero-art__quote,
[data-theme="heraldry-noir"] .hero-art__rating-chip,
[data-theme="heraldry-noir"] .feature-split__badge {
  background: color-mix(in srgb, var(--color-surface-2) 92%, transparent);
  color: var(--color-ink);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  border-radius: 0;
}
[data-theme="heraldry-noir"] .hero-art__text { color: var(--color-ink); }
[data-theme="heraldry-noir"] .hero-art__author { color: var(--color-ink-soft); }
[data-theme="heraldry-noir"] .hero-art__stars,
[data-theme="heraldry-noir"] .hero-art__rating-chip .star,
[data-theme="heraldry-noir"] .feature-split__badge strong { color: var(--color-accent); }

/* ---------------------------------------- Stats */
[data-theme="heraldry-noir"] .stat-row__value { color: var(--color-accent); }
[data-theme="heraldry-noir"] .stat-row__label { color: var(--color-ink-soft); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; font-weight: 600; }

/* ---------------------------------------- CTA band */
[data-theme="heraldry-noir"] .cta-band {
  background:
    linear-gradient(135deg, var(--color-surface-warm), var(--color-surface-2));
  border-top: 1px solid var(--color-accent);
  border-bottom: 1px solid var(--color-accent);
  border-radius: 0;
}
[data-theme="heraldry-noir"] .cta-band h2 { color: var(--color-primary); font-style: italic; }
[data-theme="heraldry-noir"] .cta-band .btn-primary {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}
[data-theme="heraldry-noir"] .cta-band .btn-primary:hover {
  background: var(--color-accent-bright);
  color: var(--color-surface);
  border-color: var(--color-accent-bright);
}

/* ---------------------------------------- Footer — stays drenched coal, gold rule top */
[data-theme="heraldry-noir"] .footer {
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-accent);
  color: var(--color-ink-soft);
}
[data-theme="heraldry-noir"] .footer-brand__name { color: var(--color-primary); font-family: 'Abril Fatface', "Playfair Display", Georgia, serif; font-style: italic; }
[data-theme="heraldry-noir"] .footer-col h4 { color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; font-weight: 700; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
[data-theme="heraldry-noir"] .footer-col a { color: var(--color-ink-soft); }
[data-theme="heraldry-noir"] .footer-col a:hover { color: var(--color-accent); }
[data-theme="heraldry-noir"] .footer-bottom { color: var(--color-ink-faint); border-color: rgba(187, 170, 152, 0.14); }

/* ---------------------------------------- Contact form */
[data-theme="heraldry-noir"] .contact-form input,
[data-theme="heraldry-noir"] .contact-form textarea {
  background: var(--color-surface);
  border-color: rgba(187, 170, 152, 0.28);
  color: var(--color-ink);
  border-radius: 0;
}
[data-theme="heraldry-noir"] .contact-form input:focus,
[data-theme="heraldry-noir"] .contact-form textarea:focus { border-color: var(--color-accent); outline: none; }

/* ---------------------------------------- Mobile nav panel */
[data-theme="heraldry-noir"] .nav-mobile-panel { background: var(--color-surface-2); border-color: rgba(187, 170, 152, 0.18); }
[data-theme="heraldry-noir"] .nav-mobile-panel a { color: var(--color-ink); }
/* Bug fix: CTA anchor inherits var(--color-ink) = bone/cream from the rule above,
   which matches the button background (also bone = var(--color-primary)).
   Explicitly set deep-coal text so it contrasts against the pale button. */
[data-theme="heraldry-noir"] .nav-mobile-panel .nav-cta-mobile { color: var(--color-surface); }
[data-theme="heraldry-noir"] .nav-toggle > summary { background: var(--color-surface-2); border-color: rgba(187, 170, 152, 0.28); }
[data-theme="heraldry-noir"] .nav-toggle > summary::after,
[data-theme="heraldry-noir"] .nav-toggle > summary::before { color: var(--color-ink); background: var(--color-ink); box-shadow: 0 -5px 0 var(--color-ink), 0 5px 0 var(--color-ink); }
[data-theme="heraldry-noir"] .nav-toggle[open] > summary::after { background: transparent; box-shadow: none; }

/* ---------------------------------------- Family overlay touch-ups */
[data-theme="heraldry-noir"] .btn-xl {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 0;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}
[data-theme="heraldry-noir"] .btn-xl:hover {
  background: var(--color-accent-bright);
  color: var(--color-surface);
  border-color: var(--color-accent-bright);
}
[data-theme="heraldry-noir"] .trust-strip { border-color: rgba(187, 170, 152, 0.18); }
[data-theme="heraldry-noir"] .trust-pill { border-color: rgba(187, 170, 152, 0.28); background: transparent; color: var(--color-ink); border-radius: 0; }
[data-theme="heraldry-noir"] .emergency-band { background: var(--color-surface-2); color: var(--color-ink); border-top: 1px solid var(--color-accent); }
[data-theme="heraldry-noir"] .footer-nap { color: var(--color-ink-soft); }
[data-theme="heraldry-noir"] .sticky-mobile-call-bar { background: var(--color-surface-2); color: var(--color-primary); border-top: 1px solid var(--color-accent); border-radius: 0; }
[data-theme="heraldry-noir"] .sticky-call {
  background: var(--color-accent);
  color: var(--color-surface);
  border-radius: 0;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}
[data-theme="heraldry-noir"] .sticky-call:hover {
  background: var(--color-accent-bright);
  color: var(--color-surface);
}

/* Trust bar */
[data-theme="heraldry-noir"] .trust-bar {
  background: var(--color-surface-2);
  border-color: rgba(187, 170, 152, 0.18);
  color: var(--color-ink-soft);
}
[data-theme="heraldry-noir"] .trust-bar__item strong { color: var(--color-accent); }
[data-theme="heraldry-noir"] .trust-bar__stars { color: var(--color-accent); }

/* Multipage / advanced hero eyebrow — restore inline-flex so the theme's
   ::before/::after em-dash and flanking hairline pseudo-elements remain
   inline marks. The package's `[data-package="multipage"] .hero .eyebrow`
   rule sets inline-block, which would let the pseudo-elements expand to
   full width and break the heraldry-noir handbill ornament. */
[data-theme="heraldry-noir"]:is([data-package="multipage"], [data-package="advanced"]) .hero .eyebrow,
[data-theme="heraldry-noir"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple .eyebrow {
  display: inline-flex;
  color: var(--color-accent);
  border: 0;
  padding: 0;
}

/* ============================================================
   THEME: salon-arc
   Soft cream salon — Cormorant Garamond italic accents on warm
   cream, curved CSS-only hero arc + mirrored footer arc, oval
   portrait crops, stadium FAQ pill, half-pill blog cards,
   circular service portraits, bronze-on-cream palette.
   Built for hair salons, day spas, nail studios, brow/lash bars,
   bridal services, boutique wellness.

   DNA brief: /tmp/unique-beauty-brief.md (2026-05-26)
   Reference: uniquebeautystyle.com
   ============================================================ */

/* ---------------------------------------- CSS variable tokens */
[data-theme="salon-arc"] {
  --ubs-bg:           #F1EEE6;   /* page surface — warm cream */
  --ubs-bg-alt:       #FFFFFF;   /* component band surface — white interruptor */
  --ubs-bg-deep:      #DBD8CF;   /* hero gradient bottom stop — deeper cream */
  --ubs-ink:          #27272A;   /* body + headings — charcoal */
  --ubs-bronze:       #685E4F;   /* links + brand accent + button text */
  --ubs-bronze-deep:  #635849;   /* hover-state ink, footer micro-text */
  --ubs-taupe:        #CBC1B3;   /* button hover bg, soft chip */
  --ubs-border:       #CEC4B7;   /* hairlines, dividers */
  --ubs-muted:        #B6AA99;   /* secondary labels, eyebrow text fill */
  --ubs-strip:        #27272A;   /* thin footer legal strip */
  /* Nav background — frosted cream (94% opacity over backdrop-blur). Operator
     can override via brand_overrides.menu_bg; the override renders at the
     same opacity by using rgba(R,G,B,0.94) derived from the override hex. */
  --ubs-nav-bg:       rgba(241, 238, 230, 0.94);

  /* Map to shared design-token names so generic components pick up
     salon-arc palette without per-component overrides. */
  --color-primary: #685E4F;
  --color-ink: #27272A;
  --color-ink-soft: #685E4F;
  --color-ink-faint: #B6AA99;
  --color-surface: #F1EEE6;
  --color-surface-2: #FFFFFF;
  --color-surface-warm: #F1EEE6;
  --color-surface-deep: #27272A;
  --color-accent: #685E4F;
  --color-line: rgba(206, 196, 183, 0.5);
  --color-line-strong: #CEC4B7;
  --font-heading: '"Cormorant Garamond", Georgia, "Times New Roman", serif';
  --font-body: '"DM Sans", ui-sans-serif, system-ui, sans-serif';

  /* Soft geometry — the curved arc motif means nothing is ever sharp. */
  --radius-sm: 0.5rem;
  --radius: 1rem;
  --radius-lg: 1.25rem;
  --radius-xl: 100px;

  /* Soft elevation — warm shadows on cream */
  --shadow-sm: 0 2px 8px rgba(39, 39, 42, 0.04);
  --shadow-md: 0 8px 24px rgba(39, 39, 42, 0.06);
  --shadow-lg: 0 24px 56px rgba(39, 39, 42, 0.08);
}

/* ---------------------------------------- Root — clip horizontal overflow
   The salon-arc hero arc and footer arc both use a `left: -10%; right: -10%`
   pseudo-element trick to push the rounded-corner meeting points off-screen
   (see the comments at .hero::after near line 6549 and .footer-warm::before
   near line 7300). Without clipping at the root, those overhangs cause a
   horizontal scrollbar and a visible white strip past the right viewport
   edge. Both `html` and `body` need `overflow-x: hidden`: applying it only
   to `html` (which carries the data-theme attribute) causes browsers to
   transfer the scroll container to `body`, leaving the white strip visible.
   Setting it on both clips the arc overhangs at both layers while leaving
   vertical scroll intact. Scoped to this theme so other themes are untouched. */
[data-theme="salon-arc"] {
  overflow-x: hidden;
}
/* ---------------------------------------- Body */
[data-theme="salon-arc"] body {
  /* Body painted WHITE so the cream hero's curved bottom corners reveal
     white beneath, producing a visible scallop. Sections paint their own
     backgrounds (.section = cream, .section-alt = white) so body color
     only shows in the hero's curved cut-out — by design. */
  background: var(--ubs-bg-alt);
  color: var(--ubs-ink);
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.5;
  /* Clip arc-pseudo horizontal overhangs. `overflow-x: hidden` on html
     alone (line above) transfers the scroll container to body in most
     browsers, leaving the white strip visible. Setting it here too seals
     that gap on mobile. */
  overflow-x: hidden;
}

[data-theme="salon-arc"] p {
  color: var(--ubs-ink);
  font-weight: 300;
}

/* ---------------------------------------- Display headings — Cormorant Garamond */
[data-theme="salon-arc"] h1,
[data-theme="salon-arc"] h2,
[data-theme="salon-arc"] h3 {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  color: var(--ubs-ink);
  letter-spacing: 0.1px;
}

[data-theme="salon-arc"] h1 {
  font-size: 88px;
  line-height: 1em;
}

[data-theme="salon-arc"] h2 {
  font-size: 60px;
  line-height: 1.1em;
}

[data-theme="salon-arc"] h3 {
  font-size: 40px;
  line-height: 1.2em;
}

/* UI headings — DM Sans */
[data-theme="salon-arc"] h4 {
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 21px;
  font-weight: 400;
  color: var(--ubs-ink);
}

[data-theme="salon-arc"] h5 {
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ubs-bronze);
}

[data-theme="salon-arc"] h6 {
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--ubs-ink);
}

/* Responsive type scale (1024px breakpoint — no change from desktop) */
@media (max-width: 1024px) {
  [data-theme="salon-arc"] h1 { font-size: 65px; }
  [data-theme="salon-arc"] h2 { font-size: 45px; }
  [data-theme="salon-arc"] h3 { font-size: 32px; }
  [data-theme="salon-arc"] body { font-size: 16px; }
}

@media (max-width: 780px) {
  [data-theme="salon-arc"] h1 { font-size: 48px; }
  [data-theme="salon-arc"] h2 { font-size: 36px; }
  [data-theme="salon-arc"] h3 { font-size: 26px; }
  [data-theme="salon-arc"] body { font-size: 15px; }
}

/* ---------------------------------------- THE signature: italic-accent mid-heading
   The generator emits <em> around the emphasis word; this rule ensures
   it reads as Cormorant Garamond italic at the same size and color. */
[data-theme="salon-arc"] h1 em,
[data-theme="salon-arc"] h2 em,
[data-theme="salon-arc"] h3 em {
  font-style: italic;
  font-weight: inherit;
  color: inherit;
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

/* ---------------------------------------- Section eyebrow */
[data-theme="salon-arc"] .eyebrow {
  background: transparent;
  color: var(--ubs-bronze);
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0;
  border: 0;
  display: inline-block;
  margin-bottom: 16px;
}

/* ---------------------------------------- Hero — cream gradient, CSS arc bottom edge
   The hero uses a linear-gradient cream background (not a dark-scrim photo overlay).
   The curved bottom edge is a ::after pseudo shaped with border-radius ellipse
   technique: 50% 50% 0 0 / 100% 100% 0 0 creates a single upward-curving arc. */
/* Hero arc — mirrors the footer arc technique exactly: a pseudo-element
   that overhangs the viewport sides (left: -10%; right: -10%), with rounded
   corners producing the curve. The overhang puts the corner-meeting points
   off-screen so the visible portion reads as one smooth arc with no sharp
   corner-meets-edge transition. The pseudo paints WHITE (var(--ubs-bg-alt))
   — same color as the body — so it reads as the white surface biting up
   into the cream hero.

   Critical: body MUST be white (set in the body rule near line 6432) so
   that when the pseudo overhang clips at viewport edges, the body color
   showing past the pseudo edges blends seamlessly.

   Critical: overflow MUST be visible so the pseudo can extend past the
   hero's bounding box (overhang is achieved via negative left/right).
   The hero gradient stays clipped to the hero box visually because the
   pseudo paints over it. */
[data-theme="salon-arc"] .hero,
[data-theme="salon-arc"] .hero--split {
  background: linear-gradient(180deg, var(--ubs-bg) 0%, var(--ubs-bg-deep) 100%);
  position: relative;
  padding-bottom: 7rem; /* room so the pseudo doesn't crowd hero content */
  color: var(--ubs-ink);
  overflow: visible !important;
}

/* Suppress the default dark scrim overlay that multipage/advanced use by default.
   The salon-arc hero is light cream — no dark overlay needed. */
[data-theme="salon-arc"] .hero::before,
[data-theme="salon-arc"] .hero--split::before {
  display: none !important;
}

/* The arc itself: white pseudo at bottom of hero, overhanging the sides,
   with rounded TOP corners. Reads as white biting up into the cream.
   Geometry: identical recipe to the footer arc but mirrored vertically. */
[data-theme="salon-arc"] .hero::after,
[data-theme="salon-arc"] .hero--split::after {
  content: "";
  /* display: block !important — necessary because the package-scoped rule
     `:is([data-package="multipage"], [data-package="advanced"]) .hero::after
     { display: none }` (line ~1823) hides the pseudo for all themes on
     multipage/advanced. Same-specificity, my rule is later, but the package
     rule explicitly sets display:none while my rule didn't — so display:none
     cascaded through. !important + explicit display:block ensures the
     pseudo renders. */
  display: block !important;
  position: absolute;
  /* top: auto !important — necessary because the base .hero::after rule
     (line 299) sets `inset: 0` which cascades `top: 0`. With top + bottom
     + height all set, browsers ignore `bottom` and place the pseudo at
     the top of the hero. Explicit `top: auto` forces the browser to
     honor `bottom: -1px; height: 120px` and anchor at the bottom. */
  top: auto !important;
  left: -10%;
  right: -10%;
  bottom: -1px; /* avoid sub-pixel gap with section below */
  height: 120px;
  background: var(--ubs-bg-alt); /* white */
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  pointer-events: none;
  z-index: 5; /* above hero gradient AND above the section below in normal flow */
  -webkit-mask-image: none;
  mask-image: none;
}

@media (max-width: 780px) {
  [data-theme="salon-arc"] .hero,
  [data-theme="salon-arc"] .hero--split {
    padding-bottom: 4rem;
  }
  [data-theme="salon-arc"] .hero::after,
  [data-theme="salon-arc"] .hero--split::after {
    height: 70px;
  }
}

/* Hero simple variant (subpages) — lighter treatment, still cream */
[data-theme="salon-arc"] .hero--simple {
  background: var(--ubs-bg);
  color: var(--ubs-ink);
}
[data-theme="salon-arc"] .hero--simple::before { display: none !important; }
[data-theme="salon-arc"] .hero--simple::after  { display: none; }

/* Hero text colors — restore ink on cream */
[data-theme="salon-arc"] .hero h1,
[data-theme="salon-arc"] .hero--split h1 {
  color: var(--ubs-ink);
  text-shadow: none;
  font-size: clamp(2.5rem, 6vw, 5.5rem);
}

[data-theme="salon-arc"] .hero .hero-lede,
[data-theme="salon-arc"] .hero--split .hero-lede {
  color: var(--ubs-ink);
  opacity: 0.75;
  text-shadow: none;
}

[data-theme="salon-arc"] .hero .eyebrow,
[data-theme="salon-arc"] .hero--split .eyebrow {
  color: var(--ubs-bronze);
  border: 0;
  padding: 0;
  background: transparent;
  display: inline-block;
}

[data-theme="salon-arc"] .hero .hero-meta,
[data-theme="salon-arc"] .hero--split .hero-meta {
  color: var(--ubs-ink);
  border-top: 1px solid var(--ubs-border);
}

/* Hero art — soft rectangle crop with warm shadow */
[data-theme="salon-arc"] .hero-art {
  box-shadow: 0 32px 64px rgba(39, 39, 42, 0.08);
}

[data-theme="salon-arc"] .hero-art img {
  border-radius: 30px;
  object-fit: cover;
}

/* Multipage/advanced hero overrides: suppress default photo-background
   treatment and restore cream-on-ink contract.
   NOTE: background-color + background-image are set separately so the two
   !important declarations do not cancel each other. Do NOT add
   background-image:none after a background: gradient — that wipes the gradient. */
[data-theme="salon-arc"]:is([data-package="multipage"], [data-package="advanced"]) .hero,
[data-theme="salon-arc"]:is([data-package="multipage"], [data-package="advanced"]) .hero--split {
  background-color: var(--ubs-bg) !important;
  background-image: linear-gradient(180deg, var(--ubs-bg) 0%, var(--ubs-bg-deep) 100%) !important;
  color: var(--ubs-ink);
  min-height: min(56vh, 520px);
}

[data-theme="salon-arc"]:is([data-package="multipage"], [data-package="advanced"]) .hero h1,
[data-theme="salon-arc"]:is([data-package="multipage"], [data-package="advanced"]) .hero--split h1 {
  color: var(--ubs-ink);
  text-shadow: none;
}

[data-theme="salon-arc"]:is([data-package="multipage"], [data-package="advanced"]) .hero .hero-lede,
[data-theme="salon-arc"]:is([data-package="multipage"], [data-package="advanced"]) .hero--split .hero-lede {
  color: var(--ubs-ink);
  opacity: 0.75;
  text-shadow: none;
}

[data-theme="salon-arc"]:is([data-package="multipage"], [data-package="advanced"]) .hero .eyebrow,
[data-theme="salon-arc"]:is([data-package="multipage"], [data-package="advanced"]) .hero--split .eyebrow {
  display: inline-block;
  color: var(--ubs-bronze);
  border: 0;
  padding: 0;
  background: transparent;
}

/* ---------------------------------------- Hero model portrait overlay
   Right-anchored transparent portrait; bottom deliberately extends beyond
   the hero edge. The arc pseudo (z-index:5) provides the visual clip —
   the model (z-index:2) appears behind the arc, so the arc masks the
   bottom portion, replicating an overflow:hidden clip without breaking
   the arc's overflow:visible requirement. */

[data-theme="salon-arc"] .hero-model {
  position: absolute;
  right: 4%;
  bottom: 22%;  /* operator-tuned 2026-05-27: was -8% (image sat too low);
                   raised by 30 percentage points so the face sits
                   inside the visible hero rather than the lower body
                   clipping past the edge. The arc pseudo (z-index:5)
                   still masks anything that extends below. */
  width: 40%;   /* desktop: model takes ~40% of hero width */
  max-width: 480px;
  height: auto;
  z-index: 2;   /* above hero bg gradient, below arc (z-index:5) and any nav */
  pointer-events: none;  /* doesn't intercept clicks on hero CTAs */

  /* CSS-blend fallback when bg-removal failed and the cached image
     still has a white background. mix-blend-mode:multiply makes white
     pixels transparent over the cream salon-arc surface. For proper
     transparent PNGs this is a no-op (alpha already correct). */
  mix-blend-mode: multiply;
}

/* Tablet: shrink the model so it doesn't crowd the copy */
@media (max-width: 1024px) {
  [data-theme="salon-arc"] .hero-model {
    width: 32%;
    right: 2%;
    bottom: 24%;  /* same 30pp lift as desktop (was -6%) */
  }
}

/* Mobile: hide the partial-body image entirely — it gets weird at
   small widths. Hero reverts to typographic-only. */
@media (max-width: 780px) {
  [data-theme="salon-arc"] .hero-model {
    display: none;
  }
}

/* ---------------------------------------- Navigation — centered logo (3-column grid)
   Brief spec §4.2: nav links left, wordmark center, CTA right.
   The template puts .nav-brand inside .nav-inner before .nav-links so we
   reorder visually via CSS order property on the flex children. */
[data-theme="salon-arc"] .nav {
  background: var(--ubs-nav-bg);
  backdrop-filter: saturate(1.1) blur(12px);
  -webkit-backdrop-filter: saturate(1.1) blur(12px);
  border-bottom: 1px solid transparent;
}

/* Override .nav-inner from flex → 3-col grid so brand can sit in center.
   Scoped with :not([data-logo-left]) so when the operator picks
   `logo_position='left'` in the lead settings (which emits data-logo-left
   on <html>), the salon-arc nav falls back to the base flex layout where
   the brand sits at the start — same as every other theme. Without this
   scope, salon-arc ignored the operator's left-position choice because
   the grid pinned the brand to column 2 unconditionally. */
[data-theme="salon-arc"]:not([data-logo-left]) .nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;
  padding: 0 0;
}

/* nav-links: left column, left-aligned */
[data-theme="salon-arc"]:not([data-logo-left]) .nav-links {
  grid-column: 1;
  justify-self: start;
}

/* nav-brand: center column */
[data-theme="salon-arc"]:not([data-logo-left]) .nav-brand {
  grid-column: 2;
  justify-self: center;
  padding: 0 2rem;
}

/* nav-actions: right column, right-aligned */
[data-theme="salon-arc"]:not([data-logo-left]) .nav-actions {
  grid-column: 3;
  justify-self: end;
}

/* nav-toggle (mobile hamburger) — keep it at the end on mobile */
[data-theme="salon-arc"]:not([data-logo-left]) .nav-toggle {
  grid-column: 3;
  justify-self: end;
}

/* Mobile: the floating logo (nav-brand--logo) is absolutely-positioned by
   call-buttons.css at ≤720px. The `padding: 0 2rem` from the .nav-brand
   center-column rule above sets 64px of horizontal padding inside the
   brand wrapper. With box-sizing:border-box this collapses the content box
   to 0px, making the logo image render at 0×0 and disappear. Remove the
   padding at mobile so the content box has room for the logo image.
   Also remove grid-column/justify-self so they don't interfere with the
   absolute-positioned floating logo. */
@media (max-width: 720px) {
  [data-theme="salon-arc"]:not([data-logo-left]) .nav-brand--logo {
    padding: 0;
    grid-column: unset;
    justify-self: unset;
  }
}

/* Scrolled state — hairline appears */
[data-theme="salon-arc"] .nav.is-scrolled {
  border-bottom-color: var(--ubs-border);
}

[data-theme="salon-arc"] .nav-links a {
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ubs-bronze);
  text-decoration: none;
  position: relative;
}

/* Underline-from-left hover animation */
[data-theme="salon-arc"] .nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--ubs-bronze);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

[data-theme="salon-arc"] .nav-links a:hover::after,
[data-theme="salon-arc"] .nav-links a.is-active::after {
  transform: scaleX(1);
}

[data-theme="salon-arc"] .nav-links a:hover,
[data-theme="salon-arc"] .nav-links a.is-active {
  color: var(--ubs-bronze-deep);
}

[data-theme="salon-arc"] .nav-brand {
  color: var(--ubs-ink);
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

/* ---------------------------------------- Buttons — full pill, cream/bronze palette
   (Detailed overrides in call-buttons.css; these cover the shared .btn class.) */
[data-theme="salon-arc"] .btn {
  border-radius: 100px;
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  transition: background-color 200ms ease, border-color 200ms ease;
}

[data-theme="salon-arc"] .btn-primary {
  /* --btn-primary-bg is set by renderCustomBrandStyle when the operator overrides
     the "Book btn bg" colour. Falls back to --ubs-bronze (the theme default). */
  background: var(--btn-primary-bg, var(--ubs-bronze));
  color: var(--btn-primary-fg, var(--ubs-bg));
  border-color: var(--btn-primary-bg, var(--ubs-bronze));
  box-shadow: none;
}

[data-theme="salon-arc"] .btn-primary:hover {
  background: var(--ubs-bronze-deep);
  border-color: var(--ubs-bronze-deep);
  color: var(--btn-primary-fg, var(--ubs-bg));
}

[data-theme="salon-arc"] .btn-ghost {
  background: transparent;
  color: var(--ubs-bronze);
  border: 1px solid var(--ubs-bronze);
}

[data-theme="salon-arc"] .btn-ghost:hover {
  background: var(--ubs-taupe);
  border-color: var(--ubs-taupe);
  color: var(--ubs-bronze);
}

/* nav Call-button background override (--btn-call-bg set by renderCustomBrandStyle
   when the operator fills in the "Call btn bg" colour in the brand panel).
   Scoped tightly to .nav .nav-call so ghost buttons elsewhere are unaffected.
   Default (--btn-call-bg unset) = transparent + bronze border (existing look).
   When set: filled pill matching the chosen colour. Text uses --btn-primary-fg
   (cream, also operator-controlled) so colour pairs stay AA-contrast.
   The operator is expected to choose a sufficiently dark bg for the cream text,
   or set --btn-primary-fg to a contrasting colour. AA guidance noted in the UI. */
[data-theme="salon-arc"] .nav .nav-call {
  background: var(--btn-call-bg, transparent);
  border-color: var(--btn-call-bg, var(--ubs-bronze));
  color: var(--btn-primary-fg, var(--ubs-bronze));
}

[data-theme="salon-arc"] .nav .nav-call:hover {
  background: color-mix(in srgb, var(--btn-call-bg, var(--ubs-taupe)) 88%, black 12%);
  border-color: color-mix(in srgb, var(--btn-call-bg, var(--ubs-taupe)) 88%, black 12%);
}

/* Hero CTAs: ink-colored ghost button so they read on cream */
[data-theme="salon-arc"] .hero .btn-ghost,
[data-theme="salon-arc"] .hero--split .btn-ghost {
  background: transparent !important;
  color: var(--ubs-bronze) !important;
  border: 1px solid var(--ubs-bronze) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-shadow: none;
}

[data-theme="salon-arc"] .hero .btn-ghost:hover,
[data-theme="salon-arc"] .hero--split .btn-ghost:hover {
  background: var(--ubs-taupe) !important;
  border-color: var(--ubs-taupe) !important;
  color: var(--ubs-bronze) !important;
}

[data-theme="salon-arc"] .btn-arrow::after {
  content: " →";
  display: inline-block;
  margin-left: 0.35em;
  transition: transform 120ms ease;
}

[data-theme="salon-arc"] .btn-arrow:hover::after {
  transform: translateX(2px);
}

/* ---------------------------------------- Alternating sections */
/* Body rule lives at the top of the salon-arc block (~line 6432) and is
   intentionally white (var(--ubs-bg-alt)) so the hero's curved cut-out
   reveals white below. Do NOT re-paint body cream here. */

[data-theme="salon-arc"] .section {
  background: var(--ubs-bg);
}

[data-theme="salon-arc"] .section-alt,
[data-theme="salon-arc"] .section-warm {
  background: var(--ubs-bg-alt);
  border-color: var(--ubs-border);
}

[data-theme="salon-arc"] .section-title p,
[data-theme="salon-arc"] .lede {
  color: var(--ubs-ink);
  opacity: 0.75;
}

/* ---------------------------------------- Cards, testimonials, values, FAQs */
[data-theme="salon-arc"] .card,
[data-theme="salon-arc"] .testimonial,
[data-theme="salon-arc"] .value,
[data-theme="salon-arc"] .post-card,
[data-theme="salon-arc"] .stat-row,
[data-theme="salon-arc"] .contact-card,
[data-theme="salon-arc"] .faq details,
[data-theme="salon-arc"] .faq-list details,
[data-theme="salon-arc"] .empty {
  background: var(--ubs-bg-alt);
  border-color: var(--ubs-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

[data-theme="salon-arc"] .card:hover,
[data-theme="salon-arc"] .post-card:hover {
  border-color: var(--ubs-bronze);
  box-shadow: var(--shadow-lg);
}

/* Service cards — circle portrait motif */
[data-theme="salon-arc"] .card-service__num {
  color: var(--ubs-bronze);
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

/* Service-circle portrait thumbnails (oval shape as of 2026-05-27)
   5-up row: 240×320px desktop / 200×270px tablet / 160×220px mobile
   border-radius:50% on unequal w×h renders a portrait ellipse, not a circle.
   Hover scale + border ring retained. */
[data-theme="salon-arc"] .services-circle-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  padding: 0;
  list-style: none;
}

[data-theme="salon-arc"] .service-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

[data-theme="salon-arc"] .service-circle__thumb {
  width: 240px;
  height: 320px;
  /* Vertical pill: 9999px clamps to min(width/2, height/2) = 120px on
     each corner, producing a full semicircle top + bottom with straight
     vertical sides (same shape language as the .btn pill, rotated 90°).
     50% gave an oval (radius scaled per axis). Operator preference
     2026-05-28. */
  border-radius: 9999px;
  overflow: hidden;
  object-fit: cover;
  border: 1px solid transparent;
  /* Transition removed — the flip card handles interaction state.
     The thumb is now inside .service-circle__front so it fills the full
     front face; hover behaviour is handled by the flip animation above. */
}

/* Legacy: when no flip card wrapping exists (pre-Req4 builds) retain the
   hover scale on bare thumbs for back-compat. The specificity is lower
   than .service-circle__flip-inner rules so flip builds are unaffected. */
[data-theme="salon-arc"] .service-circle > .service-circle__thumb:hover {
  transform: scale(1.04);
  border-color: var(--ubs-border);
  box-shadow: 0 8px 24px rgba(39, 39, 42, 0.10);
}

[data-theme="salon-arc"] .service-circle__label {
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ubs-bronze);
  text-align: center;
}

/* Service circle anchor wrapper — reset link styles, flex child */
[data-theme="salon-arc"] .service-circle__link {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Hover scale on thumb for legacy (non-flip) link wrappers. The flip card
   is now the primary hover target; this rule only fires on bare .service-circle__thumb
   elements that are a direct child of .service-circle__link (none in current output). */
[data-theme="salon-arc"] .service-circle__link:hover > .service-circle > .service-circle__thumb {
  transform: scale(1.04);
  border-color: var(--ubs-border);
  box-shadow: 0 8px 24px rgba(39, 39, 42, 0.10);
}

[data-theme="salon-arc"] .service-circle__link:hover .service-circle__label {
  color: var(--ubs-bronze-deep);
}

@media (max-width: 1024px) {
  [data-theme="salon-arc"] .service-circle__thumb { width: 200px; height: 270px; }
}

@media (max-width: 780px) {
  [data-theme="salon-arc"] .service-circle__thumb { width: 160px; height: 220px; }
  [data-theme="salon-arc"] .services-circle-row { gap: 16px; }
}

/* ---------------------------------------- Service card flip
   Structure (see renderServicesCompact in generate.ts):
     .service-circle  — outer container (column flex, centres label)
       .service-circle__flip  — 3-D flip scene (perspective parent)
         .service-circle__flip-inner  — rotates on hover/focus
           .service-circle__front  — front face: pill image
           .service-circle__back   — back face: summary text (cream/bronze palette)
       .service-circle__label  — service title (below the flip scene)

   Accessibility:
     - The flip scene wrapper carries tabindex=0 + role=group so keyboard users
       can focus it and see the back via :focus-within.
     - On touch: tap focuses the element, revealing the back. A second tap
       follows the parent anchor link (if present).
     - prefers-reduced-motion: no 3-D transform; back revealed via opacity
       crossfade instead. Content is always present in the DOM for AT.
*/

[data-theme="salon-arc"] .service-circle__flip {
  width: 240px;
  height: 320px;
  perspective: 900px;
  /* Minimum 44×44 px touch target per WCAG 2.5.5 — satisfied by the full
     pill (240×320). tabindex set on the element in HTML. */
  cursor: pointer;
}

[data-theme="salon-arc"] .service-circle__flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  transform-style: preserve-3d;
  transition: transform 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Trigger flip on hover, keyboard focus, or JS-added .is-flipped class
   (used by Playwright to capture the back face in screenshots). */
[data-theme="salon-arc"] .service-circle:hover .service-circle__flip-inner,
[data-theme="salon-arc"] .service-circle__flip:focus-within .service-circle__flip-inner,
[data-theme="salon-arc"] .service-circle__flip.is-flipped .service-circle__flip-inner {
  transform: rotateY(180deg);
}

[data-theme="salon-arc"] .service-circle__front,
[data-theme="salon-arc"] .service-circle__back {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

/* Front face: the existing pill image */
[data-theme="salon-arc"] .service-circle__front {
  /* No background — the .service-circle__thumb fills it */
}

/* Back face: summary text on cream/bronze palette.
   AA contrast: #27272A text on #F1EEE6 bg = 13.4:1 (well above 4.5:1).
   The back is rotated 180° so it hides behind the front until flipped. */
[data-theme="salon-arc"] .service-circle__back {
  background: var(--ubs-bg, #F1EEE6);
  border: 1px solid var(--ubs-border, #CEC4B7);
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  text-align: center;
  gap: 12px;
}

[data-theme="salon-arc"] .service-circle__back-eyebrow {
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ubs-bronze, #685E4F);
}

[data-theme="salon-arc"] .service-circle__back-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ubs-ink, #27272A);
  /* Clamp to ~6 lines; long summaries are already trimmed in the renderer */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

/* ── Responsive back face ── */
@media (max-width: 1024px) {
  [data-theme="salon-arc"] .service-circle__flip { width: 200px; height: 270px; }
  [data-theme="salon-arc"] .service-circle__back { padding: 22px 16px; }
  [data-theme="salon-arc"] .service-circle__back-text { font-size: 15px; }
}

@media (max-width: 780px) {
  [data-theme="salon-arc"] .service-circle__flip { width: 160px; height: 220px; }
  [data-theme="salon-arc"] .service-circle__back { padding: 16px 12px; gap: 8px; }
  [data-theme="salon-arc"] .service-circle__back-text { font-size: 13px; -webkit-line-clamp: 5; }
  [data-theme="salon-arc"] .service-circle__back-eyebrow { font-size: 9px; }
}

/* ── prefers-reduced-motion: crossfade instead of 3-D rotation ── */
@media (prefers-reduced-motion: reduce) {
  [data-theme="salon-arc"] .service-circle__flip-inner {
    transition: none;
    transform: none !important;  /* never rotate */
  }

  [data-theme="salon-arc"] .service-circle__front,
  [data-theme="salon-arc"] .service-circle__back {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    transition: opacity 200ms ease;
  }

  [data-theme="salon-arc"] .service-circle__back {
    /* Hidden by default; revealed by opacity */
    opacity: 0;
    transform: none;  /* override the rotateY(180deg) */
  }

  /* Reveal back on hover/focus/is-flipped via opacity */
  [data-theme="salon-arc"] .service-circle:hover .service-circle__back,
  [data-theme="salon-arc"] .service-circle__flip:focus-within .service-circle__back,
  [data-theme="salon-arc"] .service-circle__flip.is-flipped .service-circle__back {
    opacity: 1;
  }

  /* Hide front on hover/focus/is-flipped */
  [data-theme="salon-arc"] .service-circle:hover .service-circle__front,
  [data-theme="salon-arc"] .service-circle__flip:focus-within .service-circle__front,
  [data-theme="salon-arc"] .service-circle__flip.is-flipped .service-circle__front {
    opacity: 0;
  }
}

/* ---------------------------------------- Stats row — Cormorant 88px numbers, DM Sans labels */
[data-theme="salon-arc"] .stat-row__value {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-size: 88px;
  font-weight: 400;
  color: var(--ubs-ink);
  line-height: 1;
}

[data-theme="salon-arc"] .stat-row__label {
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ubs-bronze);
  margin-top: 12px;
}

@media (max-width: 780px) {
  [data-theme="salon-arc"] .stat-row__value { font-size: 56px; }
}

/* ---------------------------------------- Reviews / testimonials — two rounded-rect cards */
[data-theme="salon-arc"] .testimonial {
  background: var(--ubs-bg-alt);
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(39, 39, 42, 0.06);
  padding: 32px;
  border: none;
}

[data-theme="salon-arc"] .testimonial__text {
  color: var(--ubs-ink);
  font-size: 17px;
  font-weight: 300;
  font-style: normal;
}

[data-theme="salon-arc"] .testimonial__stars,
[data-theme="salon-arc"] .hero-art__stars,
[data-theme="salon-arc"] .hero-art__rating-chip .star,
[data-theme="salon-arc"] .feature-split__badge strong {
  color: var(--ubs-bronze);
}

[data-theme="salon-arc"] .hero-art__quote,
[data-theme="salon-arc"] .hero-art__rating-chip,
[data-theme="salon-arc"] .feature-split__badge {
  background: var(--ubs-bg-alt);
  color: var(--ubs-ink);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius);
}

[data-theme="salon-arc"] .hero-art__text  { color: var(--ubs-ink); }
[data-theme="salon-arc"] .hero-art__author { color: var(--ubs-bronze); }

/* ---------------------------------------- FAQ — stadium pill container
   Full border-radius 1000px creates a stadium shape when the container
   is wider than tall. On mobile the radius drops to 48px to stay legible. */
[data-theme="salon-arc"] .faq-pill {
  background: var(--ubs-bg-alt);
  border-radius: 1000px;
  padding: 80px 96px;
  box-shadow: 0 10px 40px rgba(39, 39, 42, 0.05);
}

@media (max-width: 780px) {
  [data-theme="salon-arc"] .faq-pill {
    padding: 48px 32px;
    border-radius: 48px;
  }
}

/* FAQ accordion items inside the pill */
[data-theme="salon-arc"] .faq details,
[data-theme="salon-arc"] .faq-list details {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--ubs-border);
}

[data-theme="salon-arc"] .faq details summary,
[data-theme="salon-arc"] .faq-list details summary {
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  color: var(--ubs-ink);
  font-weight: 500;
}

/* ---------------------------------------- Blog cards — half-pill arch top
   Card top corners: border-radius 1000px 1000px 0 0 (pure half-stadium).
   Card bottom corners: 0 (square). The image fills the pill-arch div. */
[data-theme="salon-arc"] .post-card,
[data-theme="salon-arc"] .blog-card {
  background: var(--ubs-bg-alt);
  border-radius: 0;
  box-shadow: 0 6px 20px rgba(39, 39, 42, 0.05);
  transition: transform 220ms ease-out, box-shadow 220ms ease-out;
  overflow: hidden;
}

[data-theme="salon-arc"] .post-card:hover,
[data-theme="salon-arc"] .blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(39, 39, 42, 0.10);
  border-color: var(--ubs-border);
}

[data-theme="salon-arc"] .post-card .thumb,
[data-theme="salon-arc"] .blog-card .thumb,
[data-theme="salon-arc"] .post-card__thumb,
[data-theme="salon-arc"] .blog-card__thumb {
  border-radius: 1000px 1000px 0 0; /* half-pill arch */
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

[data-theme="salon-arc"] .post-card__thumb img,
[data-theme="salon-arc"] .blog-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1000px 1000px 0 0;
}

[data-theme="salon-arc"] .post-card__category,
[data-theme="salon-arc"] .blog-card__category {
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ubs-bronze);
}

/* ---------------------------------------- Feature image crops — vertical pill
   Portrait pill: border-radius 9999px clamps to min(width/2, height/2) =
   width/2 on a 4:5 aspect → full semicircle top + bottom, straight
   vertical sides. Matches the .service-circle__thumb pill language.
   The .feature-split__art div itself also gets the same radius so the
   placeholder gradient (shown when no image is supplied) reads as
   the same pill motif.
   2026-05-28: was `border-radius: 50% / 50%` (oval) — operator pivot
   to pill across all salon-arc portraits. */
[data-theme="salon-arc"] .feature-img-portrait,
[data-theme="salon-arc"] .feature-split__art img {
  border-radius: 9999px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 480px;
  max-width: 100%;
}

[data-theme="salon-arc"] .feature-split__art {
  border-radius: 9999px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(39, 39, 42, 0.08);
  max-width: 480px;
}

[data-theme="salon-arc"] .feature-img-landscape {
  border-radius: 240px / 180px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 640px;
  max-width: 100%;
}

/* ---------------------------------------- Instagram grid — 4-up squares, hover overlay */
[data-theme="salon-arc"] .instagram-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 780px) {
  [data-theme="salon-arc"] .instagram-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

[data-theme="salon-arc"] .instagram-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0; /* square: no border-radius */
}

[data-theme="salon-arc"] .instagram-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 200ms ease;
}

[data-theme="salon-arc"] .instagram-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 200ms ease;
}

[data-theme="salon-arc"] .instagram-tile:hover::after {
  opacity: 1;
}

[data-theme="salon-arc"] .instagram-tile:hover img {
  transform: scale(1.04);
}

/* ---------------------------------------- Proof / trust strip */
[data-theme="salon-arc"] .proof-strip {
  background: var(--ubs-bg-alt);
  border-color: var(--ubs-border);
}

[data-theme="salon-arc"] .proof-row {
  color: var(--ubs-ink);
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 14px;
}

[data-theme="salon-arc"] .proof-row strong { color: var(--ubs-bronze); }

/* ---------------------------------------- CTA band */
[data-theme="salon-arc"] .cta-band {
  background: var(--ubs-bg);
  border-top: 1px solid var(--ubs-border);
  border-bottom: 1px solid var(--ubs-border);
  border-radius: 0;
}

[data-theme="salon-arc"] .cta-band h2 {
  color: var(--ubs-ink);
}

[data-theme="salon-arc"] .cta-band .btn-primary {
  background: var(--ubs-bronze);
  color: var(--ubs-bg);
  border-color: var(--ubs-bronze);
}

[data-theme="salon-arc"] .cta-band .btn-primary:hover {
  background: var(--ubs-bronze-deep);
  border-color: var(--ubs-bronze-deep);
}

/* ---------------------------------------- Footer — two-layer: cream contacts + dark legal strip
   The "footer-warm" class wraps the hours/location/contacts 3-column block.
   It has the mirrored arc on its ::before — an inverted version of the hero arc. */
[data-theme="salon-arc"] .footer-warm {
  position: relative;
  padding-top: 64px;
  padding-bottom: 64px;
  background: var(--ubs-bg);
}

/* Convex arc: cream footer bulges UP into the white section above, with the
   dome peak in the middle and lower at the sides. Inverted from the original
   concave version per operator request (2026-05-26). Geometry: same overhang
   trick (±10%) so the side endpoints fall off-screen and the visible portion
   reads as one smooth arc — only the direction of the dome flipped. The
   pseudo paints cream and extends UPWARD via `bottom: 100%` so it overlays
   the bottom strip of the section above. */
[data-theme="salon-arc"] .footer-warm::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 100%; /* anchor pseudo's BOTTOM to the footer's TOP → extends UPWARD */
  height: 120px;
  background: var(--ubs-bg); /* CREAM, continuous with footer below */
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; /* rounded TOP corners — dome bulges up */
  pointer-events: none;
  z-index: 1; /* paint above the section above's normal-flow background */
}

@media (max-width: 780px) {
  [data-theme="salon-arc"] .footer-warm {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  [data-theme="salon-arc"] .footer-warm::before {
    height: 70px;
  }
}

/* Hours / Location / Contacts 3-column block */
[data-theme="salon-arc"] .footer-nap-block {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 80px;
  padding-top: 80px;
  padding-bottom: 64px;
}

@media (max-width: 1024px) {
  [data-theme="salon-arc"] .footer-nap-block { gap: 48px; }
}

@media (max-width: 780px) {
  [data-theme="salon-arc"] .footer-nap-block {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

[data-theme="salon-arc"] .footer-nap-col__eyebrow {
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ubs-bronze);
  margin-bottom: 24px;
}

[data-theme="salon-arc"] .footer-nap-col p,
[data-theme="salon-arc"] .footer-nap-col address {
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 300;
  color: var(--ubs-ink);
  font-style: normal;
}

/* Main footer — cream surface with mirrored arc at top.
   The template uses .footer (not .footer-warm), so we apply the arc
   treatment directly to .footer via ::before. The arc pulls the section
   above's background (#FFFFFF white from the map/last section-alt) down
   into the cream footer as a convex bump — the bracketing motif. */
[data-theme="salon-arc"] .footer {
  background: var(--ubs-bg);
  color: var(--ubs-ink);
  border-top: none;
  position: relative;
  padding-top: 56px;  /* dome now extends ABOVE the footer, not into it */
}

/* Convex arc: cream footer bulges UP into the white section above. Dome
   peak in the middle, dips at the sides. Inverted from the original
   concave version per operator request (2026-05-26). Same ±10% overhang
   trick so corner-meeting points fall off-screen — only the direction
   of the dome is flipped. */
[data-theme="salon-arc"] .footer::before {
  content: "";
  position: absolute;
  left: -3%;   /* small overhang only — more of the curve falls inside the
                  viewport so the visible peak-to-edge depth is most of the
                  pseudo's height (was -10%, which pushed the corner-meeting
                  points so far off-screen that the visible portion read flat
                  at low heights). */
  right: -3%;
  bottom: 100%;  /* anchor pseudo's BOTTOM to footer's TOP → extends UPWARD */
  height: 40px;  /* dome height — operator-tuned 2026-05-27: 100 → 56 → 28
                    flattened too much. Bumping back to 40 + halving overhang
                    restores ~27px visible peak-to-edge depth while keeping
                    intrusion into the map section above modest. */
  background: var(--ubs-bg); /* CREAM, continuous with the footer below */
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; /* rounded TOP corners */
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 780px) {
  [data-theme="salon-arc"] .footer {
    padding-top: 36px;
  }
  [data-theme="salon-arc"] .footer::before {
    height: 24px;
  }
}

[data-theme="salon-arc"] .footer-brand__name {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  color: var(--ubs-ink);
  font-size: 24px;
  font-weight: 400;
}

[data-theme="salon-arc"] .footer-brand__tag {
  color: var(--ubs-bronze);
}

[data-theme="salon-arc"] .footer-col h4 {
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ubs-bronze);
}

[data-theme="salon-arc"] .footer-col a {
  color: var(--ubs-ink);
  opacity: 0.7;
}

[data-theme="salon-arc"] .footer-col a:hover {
  color: var(--ubs-bronze);
  opacity: 1;
}

/* Dark thin footer strip — 48px desktop / 64px mobile, charcoal background */
[data-theme="salon-arc"] .footer-bottom {
  background: var(--ubs-strip); /* #27272A charcoal */
  color: var(--ubs-muted);      /* #B6AA99 muted ash — quiet secondary */
  border-top: none;
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 16px 0;   /* ~48px total with border-box */
}

@media (max-width: 780px) {
  [data-theme="salon-arc"] .footer-bottom { padding: 24px 0; }
}

[data-theme="salon-arc"] .footer-nap { color: var(--ubs-bronze); }

/* ---------------------------------------- Contact form */
[data-theme="salon-arc"] .contact-form input,
[data-theme="salon-arc"] .contact-form textarea {
  background: var(--ubs-bg-alt);
  border-color: var(--ubs-border);
  color: var(--ubs-ink);
  border-radius: var(--radius-sm);
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 300;
}

[data-theme="salon-arc"] .contact-form input:focus,
[data-theme="salon-arc"] .contact-form textarea:focus {
  border-color: var(--ubs-bronze);
  outline: none;
}

/* ---------------------------------------- Mobile nav panel */
[data-theme="salon-arc"] .nav-mobile-panel {
  background: var(--ubs-bg);
  border-color: var(--ubs-border);
}

[data-theme="salon-arc"] .nav-mobile-panel a {
  color: var(--ubs-ink);
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

[data-theme="salon-arc"] .nav-toggle > summary {
  background: var(--ubs-bg);
  border-color: var(--ubs-border);
}

[data-theme="salon-arc"] .nav-toggle > summary::after,
[data-theme="salon-arc"] .nav-toggle > summary::before {
  color: var(--ubs-ink);
  background: var(--ubs-ink);
  box-shadow: 0 -5px 0 var(--ubs-ink), 0 5px 0 var(--ubs-ink);
}

[data-theme="salon-arc"] .nav-toggle[open] > summary::after {
  background: transparent;
  box-shadow: none;
}

/* ---------------------------------------- Values / .value cards */
[data-theme="salon-arc"] .value__glyph {
  background: rgba(104, 94, 79, 0.08);
  color: var(--ubs-bronze);
  box-shadow: none;
  border: 1px solid var(--ubs-border);
  border-radius: var(--radius);
}

/* ---------------------------------------- Family overlay touch-ups */
[data-theme="salon-arc"] .btn-xl {
  background: var(--ubs-bronze);
  color: var(--ubs-bg);
  border-radius: 100px;
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 500;
}

[data-theme="salon-arc"] .btn-xl:hover {
  background: var(--ubs-bronze-deep);
  color: var(--ubs-bg);
}

[data-theme="salon-arc"] .trust-strip { border-color: var(--ubs-border); }

[data-theme="salon-arc"] .trust-pill {
  border-color: var(--ubs-border);
  background: var(--ubs-bg-alt);
  color: var(--ubs-ink);
  border-radius: 100px;
}

[data-theme="salon-arc"] .emergency-band {
  background: var(--ubs-ink);
  color: var(--ubs-bg);
}

[data-theme="salon-arc"] .services-grid-compact .card-service {
  border-color: var(--ubs-border);
}

[data-theme="salon-arc"] .sticky-mobile-call-bar {
  background: var(--ubs-bg-alt);
  color: var(--ubs-ink);
  border-radius: 100px 100px 0 0;
}

[data-theme="salon-arc"] .sticky-call {
  background: var(--ubs-bronze);
  color: var(--ubs-bg);
  border-radius: 100px;
  box-shadow: 0 8px 24px rgba(104, 94, 79, 0.3);
}

[data-theme="salon-arc"] .sticky-call:hover {
  background: var(--ubs-bronze-deep);
  color: var(--ubs-bg);
}

/* Trust bar */
[data-theme="salon-arc"] .trust-bar {
  background: var(--ubs-bg-alt);
  border-color: var(--ubs-border);
  color: var(--ubs-ink);
}

[data-theme="salon-arc"] .trust-bar__item strong { color: var(--ubs-bronze); }
[data-theme="salon-arc"] .trust-bar__stars { color: var(--ubs-bronze); }

/* ---------------------------------------- Reveal-on-scroll (brief §9.I)
   Sections and cards fade up from 16px on scroll-into-view. The reveal.js
   script in _shared/ handles IntersectionObserver + .is-visible toggling. */
[data-theme="salon-arc"] [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-theme="salon-arc"] [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger siblings in a row: 80ms per item */
[data-theme="salon-arc"] [data-reveal][data-delay="1"] { transition-delay: 80ms; }
[data-theme="salon-arc"] [data-reveal][data-delay="2"] { transition-delay: 160ms; }
[data-theme="salon-arc"] [data-reveal][data-delay="3"] { transition-delay: 240ms; }
[data-theme="salon-arc"] [data-reveal][data-delay="4"] { transition-delay: 320ms; }

/* ---------------------------------------- Contact card */
[data-theme="salon-arc"] .contact-card {
  background: var(--ubs-bg-alt);
  border-color: var(--ubs-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

/* ---------------------------------------- Section + section divider
   The arc IS the visual divider between hero and the first section.
   Suppress the hairline entirely under salon-arc so it doesn't compete
   with the arc chrome. Other themes are unaffected (they default to the
   global .section + .section border-top defined earlier in this file).
   NOTE: the hero is .hero/.hero--split, not .section, so the first
   post-hero section does NOT match .section + .section. We explicitly
   target .hero + .section to cover that boundary too. */
[data-theme="salon-arc"] .section + .section,
[data-theme="salon-arc"] .hero + .section,
[data-theme="salon-arc"] .hero--split + .section {
  border-top: none !important;
}

/* ---------------------------------------- FIX 1 (2026-05-26): Hide the proof-strip
   under-nav info carousel for salon-arc. The strip (reviews · years · locality)
   was rendering inside the <header> between the nav and the hero. Other themes
   keep their proof-strip. The salon-arc section heading / hero copy carries
   that social proof adequately without the extra info-bar. */
[data-theme="salon-arc"] .proof-strip {
  display: none !important;
}

/* ---------------------------------------- FIX 3 (2026-05-26): Circle-row container
   The .grid-3 wrapper around  must revert to a plain block so
   the inner .services-circle-row flex layout controls the spacing, not the grid. */
[data-theme="salon-arc"] .grid-3:has(.services-circle-row) {
  display: block;
}

/* ---------------------------------------- FIX 4 (2026-05-26): Hide the rating
   badge overlaid on the feature-split art (the oval about-photo block on the
   home page). The badge was rendering incorrectly over the oval crop. Other
   themes keep their rating badge. Rating is still surfaced in the hero-meta
   strip and proof-strip for themes that render those. */
[data-theme="salon-arc"] .feature-split__badge {
  display: none !important;
}

/* ==========================================================================
   Instagram Feed — bento grid section
   Applied to multipage + advanced packages when instagram_posts are present.
   Layout: 2 large portrait tiles (indices 0-1, grid-column spans 2 rows each)
   + 6 small square tiles (indices 2-7, filling 3 columns × 2 rows on the right).
   ========================================================================== */

/* ── Base layout ── */
.ig-feed {
  --ig-gap: 12px;
}

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

.ig-feed__bento {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--ig-gap);
  aspect-ratio: 5 / 2.4;
  margin-top: 48px;
}

.ig-feed__tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm, 8px);
  display: block;
  background: var(--color-surface-2, #eee);
  text-decoration: none;
  color: inherit;
}

.ig-feed__tile--large {
  grid-row: span 2;
}

.ig-feed__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 300ms ease;
}

.ig-feed__tile:hover img {
  transform: scale(1.05);
}

/* Video play-button chip — top-right corner */
.ig-feed__play {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #fff;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.55);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  pointer-events: none;
  line-height: 1;
  padding-left: 2px; /* optical centering of ▶ glyph */
}

/* Caption overlay — bottom of tile */
.ig-feed__caption {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  color: #fff;
  font-size: 11px;
  line-height: 1.4;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  pointer-events: none;
}

/* ── Mobile: collapse to 2-column masonry-ish grid ── */
@media (max-width: 780px) {
  .ig-feed__bento {
    grid-template-columns: repeat(3, 1fr);
    aspect-ratio: unset;
    grid-auto-rows: 100px;
  }
  .ig-feed__tile--large {
    grid-row: span 2;
  }
}

@media (max-width: 480px) {
  .ig-feed__bento {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 120px;
  }
}

/* ── Salon-arc theme override ──
   Softer corners, gentler hover scale. Section sits on the cream page
   background (.section vs .section-alt) so it naturally reads as a warm
   "latest posts" block without an alt background conflict.            */
[data-theme="salon-arc"] .ig-feed__tile {
  border-radius: 12px;
}

[data-theme="salon-arc"] .ig-feed__tile:hover img {
  transform: scale(1.03);
  transition: transform 400ms var(--ease, ease);
}

[data-theme="salon-arc"] .ig-feed__title {
  font-family: var(--ubs-heading, 'Cormorant Garamond', serif);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Salon-arc italic accent: <em> inside .ig-feed__title gets the italic serif */
[data-theme="salon-arc"] .ig-feed__title em {
  font-style: italic;
  font-weight: 500;
}

/* ============================================================
   THEME: spotless — luminous aqua / liquid light
   Designed for premium residential and commercial cleaning.
   Mood: pristine, calm, spa-grade. Cool, sophisticated, airy.
   ============================================================ */

/* ---- Palette tokens ---------------------------------------- */
[data-theme="spotless"] {
  /* Core surfaces */
  --spl-surface:       #F4FAFB;   /* aqua-tinted near-white page surface */
  --spl-surface-alt:   #E6F4F3;   /* soft mint-aqua alternate band */
  --spl-surface-wash:  #D5ECEC;   /* deeper aqua wash — contrast band */
  --spl-surface-deep:  #0E2A2E;   /* deep teal — dark CTA / footer band */

  /* Ink */
  --spl-ink:           #0E2A2E;   /* body + headings — deep teal-charcoal */
  --spl-ink-soft:      #3F5D61;   /* secondary labels, lede text */
  --spl-ink-faint:     #7FA0A3;   /* placeholders, footnotes */

  /* Accent — bright cyan for fills (buttons, chips, progress) */
  --spl-accent:        #0FB5C4;   /* fill accent — always pair with dark ink OR white */
  --spl-accent-deep:   #0A7C8A;   /* text/link accent on light bg (passes AA 4.5:1) */
  --spl-accent-hover:  #0D9FAD;   /* button hover state */
  --spl-accent-pale:   #C8EEF2;   /* very pale tint — chip backgrounds, tags */

  /* Lines */
  --spl-line:          rgba(14, 42, 46, 0.08);
  --spl-line-strong:   rgba(14, 42, 46, 0.14);

  /* Shadows — cool-tinted */
  --spl-shadow-sm:     0 4px 12px -4px rgba(14, 42, 46, 0.10);
  --spl-shadow-md:     0 18px 44px -16px rgba(14, 42, 46, 0.18);
  --spl-shadow-lg:     0 32px 72px -24px rgba(14, 42, 46, 0.22);

  /* Nav */
  --spl-nav-bg:        rgba(244, 250, 251, 0.95);

  /* Map to shared design-token names */
  --color-primary:       #0A7C8A;
  --color-accent:        #0FB5C4;
  --color-ink:           #0E2A2E;
  --color-ink-soft:      #3F5D61;
  --color-ink-faint:     #7FA0A3;
  --color-surface:       #F4FAFB;
  --color-surface-2:     #E6F4F3;
  --color-surface-warm:  #D5ECEC;
  --color-surface-deep:  #0E2A2E;
  --color-line:          rgba(14, 42, 46, 0.08);
  --color-line-strong:   rgba(14, 42, 46, 0.14);

  /* Typography */
  --font-heading: '"Sora", ui-sans-serif, system-ui, sans-serif';
  --font-body:    '"Inter", ui-sans-serif, system-ui, sans-serif';

  /* Geometry — medium-soft, not pill */
  --radius-sm: 0.5rem;
  --radius:    0.9rem;
  --radius-lg: 1.4rem;
  --radius-xl: 2.2rem;

  /* Elevation */
  --shadow-sm: var(--spl-shadow-sm);
  --shadow-md: var(--spl-shadow-md);
  --shadow-lg: var(--spl-shadow-lg);
}

/* ---- Clip horizontal overflow (ripple arc pseudo overhangs) */
[data-theme="spotless"],
[data-theme="spotless"] body {
  overflow-x: hidden;
}

/* ---- Body -------------------------------------------------- */
[data-theme="spotless"] body {
  background: var(--spl-surface);
  color: var(--spl-ink);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  overflow-x: hidden;
}

[data-theme="spotless"] p {
  color: var(--spl-ink-soft);
  line-height: 1.55;
  max-width: 68ch;
}

/* ---- Headings — Sora geometric ----------------------------- */
[data-theme="spotless"] h1,
[data-theme="spotless"] h2,
[data-theme="spotless"] h3 {
  font-family: 'Sora', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  color: var(--spl-ink);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

[data-theme="spotless"] h1 {
  font-size: clamp(2.6rem, 5.5vw, 4.8rem);
  font-weight: 700;
  letter-spacing: -0.04em;
}

[data-theme="spotless"] h2 {
  font-size: clamp(1.85rem, 3.5vw, 3.2rem);
  font-weight: 600;
}

[data-theme="spotless"] h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.85rem);
  font-weight: 600;
}

[data-theme="spotless"] h4 {
  font-family: 'Sora', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--spl-ink);
}

[data-theme="spotless"] h5 {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--spl-accent-deep);
}

[data-theme="spotless"] h6 {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--spl-ink-soft);
}

/* Mono numerals for stats, hours, phone */
[data-theme="spotless"] .stat-value,
[data-theme="spotless"] .stats-band__value,
[data-theme="spotless"] .hero-meta time,
[data-theme="spotless"] .trust-bar__item strong {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ---- Section eyebrow --------------------------------------- */
[data-theme="spotless"] .eyebrow {
  background: var(--spl-accent-pale);
  color: var(--spl-accent-deep);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35em 0.85em;
  border-radius: var(--radius);
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-bottom: 1.1rem;
}

/* Droplet dot indicator — the spotless signature list/eyebrow motif */
[data-theme="spotless"] .eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 8px;
  background: var(--spl-accent);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  flex-shrink: 0;
}

/* ---- Droplet dots on unordered lists ----------------------- */
[data-theme="spotless"] ul:not([class]) li::marker,
[data-theme="spotless"] .feature-list li::marker {
  color: var(--spl-accent);
}

[data-theme="spotless"] ul:not([class]) li,
[data-theme="spotless"] .feature-list li {
  padding-left: 0.25rem;
}

/* ---- NAV --------------------------------------------------- */
[data-theme="spotless"] .nav {
  /* Fully opaque so the light hero background does not bleed through and
     reduce perceived link contrast. Was rgba(244,250,251,0.95). */
  background: #F4FAFB;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--spl-line-strong);
  box-shadow: 0 2px 8px -2px rgba(14, 42, 46, 0.08);
}

[data-theme="spotless"] .nav__logo { color: var(--spl-ink); }
[data-theme="spotless"] .nav__logo strong { color: var(--spl-ink); }

[data-theme="spotless"] .nav__link {
  /* Was --spl-ink-soft (#3F5D61) — too faint on the light nav bg.
     Switch to full --spl-ink (#0E2A2E) + weight 600 for WCAG AA ≥4.5:1. */
  color: var(--spl-ink);
  font-weight: 600;
}
[data-theme="spotless"] .nav__link:hover { color: var(--spl-accent-deep); }
[data-theme="spotless"] .nav__link:focus-visible {
  outline: 2px solid var(--spl-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

[data-theme="spotless"] .nav__cta,
[data-theme="spotless"] .nav .btn-primary {
  background: var(--spl-accent);
  color: var(--spl-surface-deep);
  border-radius: var(--radius);
  padding: 0.55em 1.4em;
  font-weight: 600;
  font-size: 0.9rem;
  border: none;
  transition: background 0.18s ease;
}
[data-theme="spotless"] .nav__cta:hover,
[data-theme="spotless"] .nav .btn-primary:hover {
  background: var(--spl-accent-hover);
}

/* Mobile hamburger button — spotless override for legible icon on light bg */
[data-theme="spotless"] .nav-toggle > summary {
  border-color: var(--spl-line-strong);
  background: var(--spl-surface-alt);
}
[data-theme="spotless"] .nav-toggle > summary::after {
  background: var(--spl-ink);
  box-shadow: 0 -5px 0 var(--spl-ink), 0 5px 0 var(--spl-ink);
}
[data-theme="spotless"] .nav-toggle[open] > summary::before {
  color: var(--spl-ink);
}

/* Mobile panel — explicitly use spotless ink so links are clearly legible */
[data-theme="spotless"] .nav-mobile-panel {
  background: #F4FAFB;
  border-color: var(--spl-line-strong);
}
[data-theme="spotless"] .nav-mobile-panel a {
  color: var(--spl-ink);
  font-weight: 600;
}
[data-theme="spotless"] .nav-mobile-panel a:hover,
[data-theme="spotless"] .nav-mobile-panel a.is-active {
  background: rgba(15, 181, 196, 0.12);
  color: var(--spl-accent-deep);
}
[data-theme="spotless"] .nav-mobile-panel .nav-cta-mobile {
  background: var(--spl-accent);
  color: var(--spl-surface-deep);
  font-weight: 700;
}

/* ---- HERO — clean-sweep radial light-wash, no photo needed  */
[data-theme="spotless"] .hero,
[data-theme="spotless"] .hero--split {
  background-color: var(--spl-surface);
  background-image:
    radial-gradient(ellipse 75% 70% at 28% 30%,
      rgba(15, 181, 196, 0.16) 0%,
      rgba(15, 181, 196, 0.06) 50%,
      transparent 78%),
    radial-gradient(ellipse 55% 55% at 78% 65%,
      rgba(10, 124, 138, 0.07) 0%,
      transparent 65%),
    linear-gradient(170deg, var(--spl-surface) 0%, var(--spl-surface-alt) 100%);
  position: relative;
  padding-bottom: 7.5rem;
  color: var(--spl-ink);
  overflow: visible !important;
}

/* Suppress the default dark scrim — hero is light */
[data-theme="spotless"] .hero::before,
[data-theme="spotless"] .hero--split::before {
  display: none !important;
}

/* ---- Clean-sweep divider — confident concave arc at hero base
   A clearly visible concave arc that reads as a "freshly swept" sweep,
   not a subtle hairline. Height 140px so it has real presence without
   being decorative noise. The arc colour matches the services section
   background so the transition looks composed and intentional. */
[data-theme="spotless"] .hero::after,
[data-theme="spotless"] .hero--split::after {
  content: "";
  display: block !important;
  position: absolute;
  top: auto !important;
  left: -12%;
  right: -12%;
  bottom: -1px;
  height: 140px;
  background: var(--spl-surface-alt);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  pointer-events: none;
  z-index: 5;
  -webkit-mask-image: none;
  mask-image: none;
}

@media (max-width: 780px) {
  [data-theme="spotless"] .hero,
  [data-theme="spotless"] .hero--split { padding-bottom: 5.5rem; }
  [data-theme="spotless"] .hero::after,
  [data-theme="spotless"] .hero--split::after { height: 80px; }
}

/* Suppress default ::after on multipage and advanced package heroes
   (they normally render a dark gradient scrim) and restore ours */
[data-theme="spotless"]:is([data-package="multipage"], [data-package="advanced"]) .hero,
[data-theme="spotless"]:is([data-package="multipage"], [data-package="advanced"]) .hero--split {
  background-color: var(--spl-surface) !important;
  background-image:
    radial-gradient(ellipse 75% 70% at 28% 30%,
      rgba(15, 181, 196, 0.16) 0%,
      rgba(15, 181, 196, 0.06) 50%,
      transparent 78%),
    radial-gradient(ellipse 55% 55% at 78% 65%,
      rgba(10, 124, 138, 0.07) 0%,
      transparent 65%),
    linear-gradient(170deg, var(--spl-surface) 0%, var(--spl-surface-alt) 100%) !important;
  color: var(--spl-ink);
  min-height: min(52vh, 480px);
}

/* ---- Hero text colours + stronger heading scale ----------- */
[data-theme="spotless"] .hero h1,
[data-theme="spotless"] .hero--split h1 {
  color: var(--spl-ink);
  text-shadow: none;
  font-size: clamp(2.9rem, 6vw, 5.4rem);
  letter-spacing: -0.045em;
  line-height: 1.09;
}

[data-theme="spotless"] .hero .hero-lede,
[data-theme="spotless"] .hero--split .hero-lede {
  color: var(--spl-ink-soft);
  text-shadow: none;
  opacity: 1;
}

[data-theme="spotless"] .hero .eyebrow,
[data-theme="spotless"] .hero--split .eyebrow {
  display: inline-flex;
}

[data-theme="spotless"] .hero .hero-meta,
[data-theme="spotless"] .hero--split .hero-meta {
  color: var(--spl-ink-soft);
  border-top: 1px solid var(--spl-line-strong);
}

[data-theme="spotless"]:is([data-package="multipage"], [data-package="advanced"]) .hero h1,
[data-theme="spotless"]:is([data-package="multipage"], [data-package="advanced"]) .hero--split h1 {
  color: var(--spl-ink);
  text-shadow: none;
  font-size: clamp(2.9rem, 6vw, 5.4rem);
  letter-spacing: -0.045em;
  line-height: 1.09;
}

[data-theme="spotless"]:is([data-package="multipage"], [data-package="advanced"]) .hero .hero-lede,
[data-theme="spotless"]:is([data-package="multipage"], [data-package="advanced"]) .hero--split .hero-lede {
  color: var(--spl-ink-soft);
  text-shadow: none;
  opacity: 1;
}

/* ---- Hero art — premium no-image fallback ------------------
   When .hero-art--image is absent (no hero_image supplied) the
   base gradient already shows. When --image IS the class but the
   bg-image src is a placeholder/broken, the fallback below kicks
   in: a layered aqua wash with a subtle CSS-only water-arc motif
   so an absent image reads intentional, never broken. */
[data-theme="spotless"] .hero-art {
  box-shadow: var(--spl-shadow-lg);
  /* On-brand aqua gradient for no-image state */
  background:
    radial-gradient(ellipse 110% 90% at 30% 20%,
      rgba(15, 181, 196, 0.22) 0%,
      rgba(15, 181, 196, 0.08) 50%,
      transparent 80%),
    radial-gradient(ellipse 80% 100% at 100% 80%,
      rgba(10, 124, 138, 0.14) 0%,
      transparent 65%),
    linear-gradient(155deg, var(--spl-surface-alt) 0%, var(--spl-surface-wash) 100%);
}

/* Water-arc motif on the no-image hero-art panel */
[data-theme="spotless"] .hero-art:not(.hero-art--image)::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 200% 60% at 50% 110%,
      rgba(15, 181, 196, 0.18) 0%,
      transparent 55%),
    radial-gradient(ellipse 160% 50% at 50% 130%,
      rgba(10, 124, 138, 0.11) 0%,
      transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* Second arc — higher, lighter, offset */
[data-theme="spotless"] .hero-art:not(.hero-art--image)::after {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: 22%;
  height: 55%;
  background: rgba(15, 181, 196, 0.065);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  pointer-events: none;
  z-index: 0;
}

[data-theme="spotless"] .hero-art img {
  border-radius: var(--radius-lg);
  object-fit: cover;
}

/* --image state: keep bg-cover, suppress fallback arc pseudo */
[data-theme="spotless"] .hero-art.hero-art--image::before { display: none; }
[data-theme="spotless"] .hero-art.hero-art--image {
  background:
    radial-gradient(ellipse 110% 90% at 30% 20%,
      rgba(15, 181, 196, 0.12) 0%,
      transparent 60%),
    var(--spl-surface-alt);
}

/* ---- Simple hero (subpages) -------------------------------- */
[data-theme="spotless"] .hero--simple {
  background: var(--spl-surface-alt);
  color: var(--spl-ink);
}
[data-theme="spotless"] .hero--simple::before { display: none !important; }
[data-theme="spotless"] .hero--simple::after  { display: none; }

/* ---- Sections ---------------------------------------------- */
[data-theme="spotless"] .section {
  background: var(--spl-surface-alt);
}

[data-theme="spotless"] .section-alt,
[data-theme="spotless"] .section--alt {
  background: var(--spl-surface);
}

/* Section dividers — suppress hairlines between sections;
   the alternating colour bands carry the visual rhythm. */
[data-theme="spotless"] .section + .section,
[data-theme="spotless"] .hero + .section,
[data-theme="spotless"] .hero--split + .section {
  border-top: none;
}

/* "Ripple" divider at the top of alternate bands.
   Applied via CSS clip on .section elements that follow another section. */
[data-theme="spotless"] .section + .section::before,
[data-theme="spotless"] .section-alt + .section::before,
[data-theme="spotless"] .section--alt + .section::before {
  content: "";
  display: block;
  position: absolute;
  top: -40px;
  left: -8%;
  right: -8%;
  height: 82px;
  background: inherit;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  pointer-events: none;
  z-index: 1;
}

/* Ensure sections have position relative for the ripple pseudo */
[data-theme="spotless"] .section {
  position: relative;
}

/* ---- Band transitions: clean-sweep arc on dark bands -------
   The stats band (section--dark / section-dark) and the CTA band
   each get a top-arc sweep so the transition from light to dark
   has the same signature curve as the hero base. This makes the
   motif appear at 2–3 transition points across the page, giving
   the design a distinct, memorable rhythm. */
[data-theme="spotless"] .stats-band,
[data-theme="spotless"] .section--stats,
[data-theme="spotless"] .section--dark,
[data-theme="spotless"] .section-dark {
  position: relative;
  overflow: visible;
}

[data-theme="spotless"] .stats-band::before,
[data-theme="spotless"] .section--stats::before,
[data-theme="spotless"] .section--dark::before,
[data-theme="spotless"] .section-dark::before {
  content: "";
  display: block;
  position: absolute;
  top: -70px;
  left: -12%;
  right: -12%;
  height: 140px;
  background: var(--spl-surface-deep);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  pointer-events: none;
  z-index: 0;
}

/* Deep band — for stats/CTA/footer contrast */
[data-theme="spotless"] .section--dark,
[data-theme="spotless"] .section-dark {
  background: var(--spl-surface-deep);
  color: var(--spl-surface);
}

[data-theme="spotless"] .section--dark h2,
[data-theme="spotless"] .section-dark h2,
[data-theme="spotless"] .section--dark h3,
[data-theme="spotless"] .section-dark h3 {
  color: var(--spl-surface);
}

[data-theme="spotless"] .section--dark p,
[data-theme="spotless"] .section-dark p {
  color: rgba(244, 250, 251, 0.8);
}

/* ---- CTAs and buttons -------------------------------------- */
[data-theme="spotless"] .btn,
[data-theme="spotless"] .btn-primary,
[data-theme="spotless"] a.btn,
[data-theme="spotless"] a.btn-primary {
  background: var(--spl-accent);
  color: var(--spl-surface-deep);
  border: none;
  border-radius: var(--radius);
  padding: 0.8em 2em;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  display: inline-block;
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
  box-shadow: 0 4px 16px rgba(15, 181, 196, 0.25);
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
}

[data-theme="spotless"] .btn:hover,
[data-theme="spotless"] .btn-primary:hover,
[data-theme="spotless"] a.btn:hover,
[data-theme="spotless"] a.btn-primary:hover {
  background: var(--spl-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(15, 181, 196, 0.35);
}

[data-theme="spotless"] .btn:focus-visible,
[data-theme="spotless"] .btn-primary:focus-visible {
  outline: 2px solid var(--spl-accent);
  outline-offset: 3px;
}

[data-theme="spotless"] .btn-secondary,
[data-theme="spotless"] a.btn-secondary {
  background: transparent;
  color: var(--spl-accent-deep);
  border: 2px solid var(--spl-accent);
  border-radius: var(--radius);
  padding: 0.75em 1.85em;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  display: inline-block;
  transition: background 0.18s ease, color 0.18s ease;
  min-height: 44px;
  min-width: 44px;
}

[data-theme="spotless"] .btn-secondary:hover,
[data-theme="spotless"] a.btn-secondary:hover {
  background: var(--spl-accent-pale);
  color: var(--spl-accent-deep);
}

/* ---- Links ------------------------------------------------- */
[data-theme="spotless"] a {
  color: var(--spl-accent-deep);
  text-decoration: none;
}
[data-theme="spotless"] a:hover {
  text-decoration: underline;
  color: var(--spl-accent-deep);
}
[data-theme="spotless"] a:focus-visible {
  outline: 2px solid var(--spl-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- Trust strip ------------------------------------------ */
[data-theme="spotless"] .trust-strip {
  border-color: var(--spl-line-strong);
}

[data-theme="spotless"] .trust-pill {
  background: var(--spl-accent-pale);
  color: var(--spl-accent-deep);
  border: 1px solid rgba(15, 181, 196, 0.2);
  border-radius: var(--radius);
  font-weight: 600;
}

/* ---- Services — airy hairline-divided rows (no identical card grids) */
[data-theme="spotless"] .card-service {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--spl-line);
  border-radius: 0;
  box-shadow: none;
  padding: 2rem 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 2rem;
  align-items: start;
  transition: background 0.15s ease;
}

[data-theme="spotless"] .card-service:first-child {
  border-top: 1px solid var(--spl-line);
}

[data-theme="spotless"] .card-service:hover {
  background: var(--spl-surface-wash);
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  border-radius: var(--radius);
  border-color: transparent;
}

[data-theme="spotless"] .card-service h3,
[data-theme="spotless"] .card-service .card-service__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--spl-ink);
  margin: 0 0 0.35rem;
  letter-spacing: -0.02em;
}

[data-theme="spotless"] .card-service p {
  color: var(--spl-ink-soft);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}

/* Price hint — mono, right-aligned */
[data-theme="spotless"] .card-service .card-service__price,
[data-theme="spotless"] .card-service .price-hint {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-weight: 600;
  color: var(--spl-accent-deep);
  font-size: 0.95rem;
  white-space: nowrap;
  align-self: start;
  padding-top: 0.1rem;
}

/* Droplet dot before each service title */
[data-theme="spotless"] .card-service h3::before,
[data-theme="spotless"] .card-service .card-service__title::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 9px;
  background: var(--spl-accent);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  margin-right: 0.65rem;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Compact services grid (home page snippet) */
[data-theme="spotless"] .services-grid-compact .card-service {
  padding: 1.25rem 0;
}

/* ---- Stats band -------------------------------------------- */
[data-theme="spotless"] .stats-band,
[data-theme="spotless"] .section--stats {
  background: var(--spl-surface-deep);
  color: var(--spl-surface);
  /* Content sits above the sweep-arc pseudo element */
  isolation: isolate;
}

[data-theme="spotless"] .stats-band > *,
[data-theme="spotless"] .section--stats > * {
  position: relative;
  z-index: 1;
}

[data-theme="spotless"] .stats-band__value,
[data-theme="spotless"] .stat-value {
  font-family: 'Sora', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 700;
  color: var(--spl-accent);
  letter-spacing: -0.04em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

[data-theme="spotless"] .stats-band__label,
[data-theme="spotless"] .stat-label {
  color: rgba(244, 250, 251, 0.7);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-top: 0.3rem;
}

/* ---- Testimonials — featured-quote treatment ---------------
   Premium single-quote band: the first testimonial renders as a
   large centred featured quote; the remaining 1–2 render as
   smaller supporting quotes in a row below it. No carousel,
   no identical pale card grid. Strong hierarchy and contrast. */

/* Override the default 3-up grid in favour of a stacked layout */
[data-theme="spotless"] .testimonials,
[data-theme="spotless"] .testimonials--sparse {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  grid-template-columns: unset;
  justify-content: unset;
  max-width: 860px;
  margin: 0 auto;
}

/* Make supporting quotes (2nd, 3rd) sit side by side */
[data-theme="spotless"] .testimonials > .testimonial:not(:first-child) {
  flex: 1 1 0;
}

/* Container to hold the 2nd and 3rd testimonials in a row */
[data-theme="spotless"] .testimonials > .testimonial:nth-child(2) {
  display: grid;
}

/* Wrap the non-featured quotes in a sub-row using CSS grid auto-placement.
   We use a pseudo-wrapper trick: sibling selectors on the testimonials div. */
[data-theme="spotless"] .testimonials:has(> .testimonial:nth-child(2)) {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
}

[data-theme="spotless"] .testimonials > .testimonial:first-child {
  grid-row: 1;
  grid-column: 1;
}

/* Supporting quotes side by side in row 2 */
[data-theme="spotless"] .testimonials:has(> .testimonial:nth-child(2)) > .testimonial:not(:first-child) {
  grid-row: 2;
  grid-column: 1;
}

/* Two-column sub-grid for supporting quotes in row 2 */
[data-theme="spotless"] .testimonials:has(> .testimonial:nth-child(2)) {
  grid-template-columns: 1fr;
}

/* Simpler approach: use display:flex + flex-wrap for the full container */
[data-theme="spotless"] .testimonials {
  display: block;
}

/* ---- FEATURED QUOTE — first testimonial ------------------- */
[data-theme="spotless"] .testimonial:first-child {
  /* Deep teal surface for dramatic contrast */
  background: var(--spl-surface-deep);
  border: none;
  border-radius: var(--radius-xl);
  padding: 3rem 3.5rem;
  box-shadow: var(--spl-shadow-lg);
  position: relative;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

/* Aqua wash behind the featured quote */
[data-theme="spotless"] .testimonial:first-child::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 100% at 10% 0%,
      rgba(15, 181, 196, 0.14) 0%,
      transparent 60%),
    radial-gradient(ellipse 70% 70% at 90% 100%,
      rgba(15, 181, 196, 0.08) 0%,
      transparent 55%);
  pointer-events: none;
}

/* Large decorative opening quote mark */
[data-theme="spotless"] .testimonial:first-child::after {
  content: "\201C";
  position: absolute;
  top: -0.15em;
  left: 2.5rem;
  font-family: 'Sora', ui-sans-serif, system-ui, sans-serif;
  font-size: 9rem;
  line-height: 1;
  color: rgba(15, 181, 196, 0.18);
  pointer-events: none;
  user-select: none;
}

[data-theme="spotless"] .testimonial:first-child .testimonial__stars {
  color: var(--spl-accent);
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 1;
}

[data-theme="spotless"] .testimonial:first-child .testimonial__text {
  font-family: 'Sora', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.2rem, 2.2vw, 1.65rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--spl-surface);
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
  position: relative;
  z-index: 1;
  margin-bottom: 1.75rem;
}

[data-theme="spotless"] .testimonial:first-child .testimonial__author {
  border-top: 1px solid rgba(244, 250, 251, 0.12);
  padding-top: 1.25rem;
  margin-top: 0;
  color: rgba(244, 250, 251, 0.7);
  position: relative;
  z-index: 1;
}

[data-theme="spotless"] .testimonial:first-child .testimonial__author strong {
  color: var(--spl-surface);
  font-weight: 600;
}

[data-theme="spotless"] .testimonial:first-child .testimonial__avatar {
  background: rgba(15, 181, 196, 0.22);
  color: var(--spl-accent);
  border: 1px solid rgba(15, 181, 196, 0.3);
}

/* "Read more" not needed on the featured quote — hide it */
[data-theme="spotless"] .testimonial:first-child .testimonial__readmore {
  display: none;
}

/* ---- SUPPORTING QUOTES — 2nd and 3rd testimonials ---------
   Rendered as a 2-column row of quieter, light-bg cards with
   stronger left-border accent and better contrast than the
   default pale card grid. */
[data-theme="spotless"] .testimonials-support-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

[data-theme="spotless"] .testimonial:not(:first-child) {
  background: var(--spl-surface);
  border: none;
  border-left: 3px solid var(--spl-accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 1.65rem 1.75rem;
  box-shadow: var(--spl-shadow-sm);
  display: inline-flex;
  flex-direction: column;
  gap: 0.65rem;
  width: 100%;
  box-sizing: border-box;
}

[data-theme="spotless"] .testimonial:not(:first-child) .testimonial__stars {
  color: var(--spl-accent);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
}

[data-theme="spotless"] .testimonial:not(:first-child) .testimonial__text {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.97rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--spl-ink);
  -webkit-line-clamp: 5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: 0;
}

[data-theme="spotless"] .testimonial:not(:first-child) .testimonial__author {
  color: var(--spl-ink-soft);
  font-size: 0.85rem;
  margin-top: auto;
}

[data-theme="spotless"] .testimonial:not(:first-child) .testimonial__author strong {
  color: var(--spl-ink);
  font-weight: 600;
}

[data-theme="spotless"] .testimonial:not(:first-child) .testimonial__avatar {
  width: 30px;
  height: 30px;
  font-size: 0.82rem;
  background: var(--spl-accent-pale);
  color: var(--spl-accent-deep);
}

/* Lay out 2nd and 3rd quotes side by side using float/flex trick:
   since the DOM structure is a flat list inside .testimonials,
   we use adjacent sibling selectors + flex on their parent. */
[data-theme="spotless"] .testimonials {
  /* Reset to normal block flow */
}

[data-theme="spotless"] .testimonials > .testimonial:nth-child(2) {
  /* Start a new sub-row context using display:flex trick */
}

/* Two-column layout for the supporting quotes:
   Use a CSS grid auto-placement by targeting 2nd onward */
[data-theme="spotless"] .testimonials {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 1.25rem;
}

[data-theme="spotless"] .testimonials > .testimonial:first-child {
  grid-column: 1;
  grid-row: 1;
}

/* Supporting quotes: 2-up sub-grid using named-line placement */
[data-theme="spotless"] .testimonials:has(> .testimonial:nth-child(2)) {
  grid-template-columns: 1fr 1fr;
}

[data-theme="spotless"] .testimonials > .testimonial:first-child {
  grid-column: 1 / -1;  /* span both columns */
  grid-row: 1;
}

[data-theme="spotless"] .testimonials > .testimonial:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}

[data-theme="spotless"] .testimonials > .testimonial:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}

/* Mobile: stack all */
@media (max-width: 640px) {
  [data-theme="spotless"] .testimonials,
  [data-theme="spotless"] .testimonials:has(> .testimonial:nth-child(2)) {
    grid-template-columns: 1fr;
  }
  [data-theme="spotless"] .testimonials > .testimonial:nth-child(2),
  [data-theme="spotless"] .testimonials > .testimonial:nth-child(3) {
    grid-column: 1;
    grid-row: auto;
  }
  [data-theme="spotless"] .testimonial:first-child {
    padding: 2rem 1.75rem;
  }
  [data-theme="spotless"] .testimonial:first-child::after {
    font-size: 6rem;
    left: 1.5rem;
  }
}

/* ---- card-review / testimonial-card (legacy selectors) ---- */
[data-theme="spotless"] .card-review,
[data-theme="spotless"] .testimonial-card {
  background: var(--spl-surface);
  border: none;
  border-left: 3px solid var(--spl-accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 1.65rem 1.75rem;
  box-shadow: var(--spl-shadow-sm);
}

[data-theme="spotless"] .card-review__stars,
[data-theme="spotless"] .stars {
  color: var(--spl-accent);
}

[data-theme="spotless"] .card-review__text,
[data-theme="spotless"] .testimonial-card blockquote {
  color: var(--spl-ink);
  font-size: 0.97rem;
  line-height: 1.55;
}

[data-theme="spotless"] .card-review__author,
[data-theme="spotless"] .testimonial-card cite {
  font-weight: 600;
  color: var(--spl-ink);
  font-size: 0.88rem;
}

/* ---- Feature split ----------------------------------------- */
[data-theme="spotless"] .feature-split__badge {
  background: var(--spl-accent-pale);
  color: var(--spl-accent-deep);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 0.3em 0.8em;
  display: inline-block;
}

/* ---- Values / About --------------------------------------- */
[data-theme="spotless"] .card-value,
[data-theme="spotless"] .values-card {
  background: var(--spl-surface);
  border: 1px solid var(--spl-line);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--spl-shadow-sm);
}

[data-theme="spotless"] .card-value h3,
[data-theme="spotless"] .values-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

/* ---- FAQ --------------------------------------------------- */
[data-theme="spotless"] .faq-item {
  border-bottom: 1px solid var(--spl-line-strong);
  padding: 1.5rem 0;
}

[data-theme="spotless"] .faq-item:first-child {
  border-top: 1px solid var(--spl-line-strong);
}

[data-theme="spotless"] .faq-item summary,
[data-theme="spotless"] .faq-question {
  font-family: 'Sora', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  color: var(--spl-ink);
  cursor: pointer;
  font-size: 1.02rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
  padding: 0.25rem 0;
  letter-spacing: -0.01em;
  min-height: 44px;
}

/* Droplet dot before each FAQ question */
[data-theme="spotless"] .faq-item summary::before,
[data-theme="spotless"] .faq-question::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 8px;
  background: var(--spl-accent);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  flex-shrink: 0;
  margin-right: 0.5rem;
  opacity: 0.8;
}

[data-theme="spotless"] .faq-item summary::after,
[data-theme="spotless"] .faq-question::after {
  content: "+";
  font-size: 1.35rem;
  color: var(--spl-accent-deep);
  font-weight: 300;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--spl-line-strong);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}

[data-theme="spotless"] .faq-item summary:hover::after,
[data-theme="spotless"] .faq-question:hover::after {
  background: var(--spl-accent-pale);
  border-color: var(--spl-accent);
}

[data-theme="spotless"] details[open] .faq-item summary::after,
[data-theme="spotless"] details[open] summary::after {
  content: "−";
  background: var(--spl-accent-pale);
  border-color: var(--spl-accent);
}

[data-theme="spotless"] .faq-answer,
[data-theme="spotless"] .faq-item p {
  color: var(--spl-ink-soft);
  margin: 0.85rem 0 0.35rem 1.1rem;
  font-size: 0.97rem;
  line-height: 1.65;
}

/* Global FAQ overrides (details element without .faq-item wrapper) */
[data-theme="spotless"] details {
  border-bottom: 1px solid var(--spl-line-strong);
  padding: 1.35rem 0;
}

[data-theme="spotless"] details:first-of-type {
  border-top: 1px solid var(--spl-line-strong);
}

[data-theme="spotless"] details summary {
  font-family: 'Sora', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  color: var(--spl-ink);
  cursor: pointer;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.1rem 0;
  min-height: 44px;
}

[data-theme="spotless"] details summary::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 8px;
  background: var(--spl-accent);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  flex-shrink: 0;
  opacity: 0.8;
}

[data-theme="spotless"] details summary::after {
  content: "+";
  font-size: 1.25rem;
  color: var(--spl-accent-deep);
  font-weight: 300;
  margin-left: auto;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--spl-line-strong);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}

[data-theme="spotless"] details[open] summary::after {
  content: "−";
  background: var(--spl-accent-pale);
  border-color: var(--spl-accent);
}

[data-theme="spotless"] details > p {
  margin: 0.85rem 0 0.35rem 1.1rem;
  color: var(--spl-ink-soft);
  font-size: 0.97rem;
  line-height: 1.65;
}

/* ---- Contact form ----------------------------------------- */
[data-theme="spotless"] .contact-card {
  background: var(--spl-surface);
  border: 1px solid var(--spl-line-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--spl-shadow-md);
  padding: 2.5rem;
}

[data-theme="spotless"] input,
[data-theme="spotless"] textarea,
[data-theme="spotless"] select {
  background: var(--spl-surface);
  color: var(--spl-ink);
  border: 1.5px solid var(--spl-line-strong);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.97rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  min-height: 44px;
}

[data-theme="spotless"] input::placeholder,
[data-theme="spotless"] textarea::placeholder {
  color: var(--spl-ink-faint);
}

[data-theme="spotless"] input:focus,
[data-theme="spotless"] textarea:focus,
[data-theme="spotless"] select:focus {
  outline: none;
  border-color: var(--spl-accent);
  box-shadow: 0 0 0 3px rgba(15, 181, 196, 0.15);
}

/* ---- Trust bar (review row) -------------------------------- */
[data-theme="spotless"] .trust-bar {
  background: var(--spl-surface-wash);
  border-top: 1px solid var(--spl-line);
  border-bottom: 1px solid var(--spl-line);
}

[data-theme="spotless"] .trust-bar__stars { color: var(--spl-accent); }
[data-theme="spotless"] .trust-bar__item strong { color: var(--spl-accent-deep); }

/* ---- Footer ----------------------------------------------- */
[data-theme="spotless"] footer,
[data-theme="spotless"] .footer-warm,
[data-theme="spotless"] .site-footer {
  background: var(--spl-surface-deep);
  color: rgba(244, 250, 251, 0.75);
}

[data-theme="spotless"] footer h3,
[data-theme="spotless"] .footer-warm h3,
[data-theme="spotless"] .site-footer h3,
[data-theme="spotless"] footer .nav__logo,
[data-theme="spotless"] .footer-warm .nav__logo {
  color: var(--spl-surface);
}

[data-theme="spotless"] footer a,
[data-theme="spotless"] .footer-warm a,
[data-theme="spotless"] .site-footer a {
  color: rgba(244, 250, 251, 0.75);
  text-decoration: none;
}

[data-theme="spotless"] footer a:hover,
[data-theme="spotless"] .footer-warm a:hover,
[data-theme="spotless"] .site-footer a:hover {
  color: var(--spl-accent);
  text-decoration: underline;
}

[data-theme="spotless"] .footer-nap,
[data-theme="spotless"] .footer__nap {
  color: rgba(244, 250, 251, 0.75);
}

[data-theme="spotless"] .footer-bottom,
[data-theme="spotless"] .footer__bottom {
  border-top: 1px solid rgba(244, 250, 251, 0.10);
  color: rgba(244, 250, 251, 0.45);
  font-size: 0.78rem;
}

/* ---- Sticky call bar --------------------------------------- */
[data-theme="spotless"] .sticky-mobile-call-bar {
  background: var(--spl-surface-deep);
}

[data-theme="spotless"] .sticky-call {
  background: var(--spl-accent);
  color: var(--spl-surface-deep);
  border-radius: var(--radius-lg);
  font-weight: 600;
}

[data-theme="spotless"] .sticky-call:hover {
  background: var(--spl-accent-hover);
}

/* ---- Emergency band --------------------------------------- */
[data-theme="spotless"] .emergency-band {
  background: var(--spl-surface-deep);
  color: var(--spl-accent);
}

/* ---- Proof strip ------------------------------------------ */
[data-theme="spotless"] .proof-strip {
  background: var(--spl-surface-wash);
  border-bottom: 1px solid var(--spl-line);
}

/* ---- Reveal animations (calm: fade + tiny lift) ----------- */
[data-theme="spotless"] [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

[data-theme="spotless"] [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-theme="spotless"] [data-reveal][data-delay="1"] { transition-delay: 80ms; }
[data-theme="spotless"] [data-reveal][data-delay="2"] { transition-delay: 160ms; }
[data-theme="spotless"] [data-reveal][data-delay="3"] { transition-delay: 240ms; }
[data-theme="spotless"] [data-reveal][data-delay="4"] { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  [data-theme="spotless"] [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---- Instagram feed --------------------------------------- */
[data-theme="spotless"] .ig-feed__tile {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

[data-theme="spotless"] .ig-feed__tile:hover img {
  transform: scale(1.04);
}

[data-theme="spotless"] .ig-feed__title {
  font-family: 'Sora', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ---- Services: override grid-3 to single-column row list
   The landing/multipage template wraps card-service in .grid-3
   (3-col auto-fit). For spotless we want airy hairline-divided rows,
   not card tiles. Force single-column and remove the grid gap. */
[data-theme="spotless"] .grid-3:has(.card-service),
[data-theme="spotless"] .services-grid:has(.card-service),
[data-theme="spotless"] .services-grid--compact:has(.card-service) {
  display: block;
}

/* card-service__head: in the hairline-row layout the head contains
   the title + price. We fold it into the row grid naturally. */
[data-theme="spotless"] .card-service__head {
  display: contents; /* lets title and price participate in the row grid */
}

/* Make the card a clean 2-col row: [title+desc] [price] */
[data-theme="spotless"] .card-service {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 0.15rem 2rem;
  align-items: start;
  padding: 1.65rem 0;
  border-bottom: 1px solid var(--spl-line);
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

[data-theme="spotless"] .card-service:first-child {
  border-top: 1px solid var(--spl-line);
}

[data-theme="spotless"] .card-service__price {
  grid-column: 2;
  grid-row: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  color: var(--spl-accent-deep);
  font-size: 0.9rem;
  white-space: nowrap;
  align-self: start;
  padding-top: 0.18rem;
}

[data-theme="spotless"] .card-service h3 {
  grid-column: 1;
  grid-row: 1;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--spl-ink);
  margin: 0;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
}

[data-theme="spotless"] .card-service p {
  grid-column: 1;
  grid-row: 2;
  color: var(--spl-ink-soft);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
  max-width: 60ch;
}

/* ---- Section-warm — uses surface-wash (#D5ECEC deeper aqua) */
[data-theme="spotless"] .section-warm {
  background: var(--spl-surface-wash);
  border-color: var(--spl-line);
}

/* ---- Hero-art overrides: light card, keep contrast on light bg */
[data-theme="spotless"] .hero-art__tint {
  background:
    linear-gradient(180deg, transparent 50%, rgba(14, 42, 46, 0.45) 100%),
    radial-gradient(120% 80% at 0% 0%, rgba(15, 181, 196, 0.14), transparent 55%);
}

[data-theme="spotless"] .hero-art__quote {
  background: rgba(244, 250, 251, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--spl-line-strong);
}

[data-theme="spotless"] .hero-art__text {
  font-family: 'Sora', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.97rem;
  color: var(--spl-ink);
}

[data-theme="spotless"] .hero-art__author {
  color: var(--spl-ink-soft);
}

[data-theme="spotless"] .hero-art__stars,
[data-theme="spotless"] .hero-art__rating-chip .star {
  color: var(--spl-accent);
}

[data-theme="spotless"] .hero-art__rating-chip {
  background: rgba(244, 250, 251, 0.96);
  color: var(--spl-ink);
  border: 1px solid var(--spl-line);
}

/* ---- Section heading (section-title) ----------------------- */
[data-theme="spotless"] .section-title h2,
[data-theme="spotless"] .section-title--center h2 {
  color: var(--spl-ink);
}

[data-theme="spotless"] .section-title p,
[data-theme="spotless"] .section-title--center p {
  color: var(--spl-ink-soft);
}

/* ---- Lede (hero + section lead paragraph) ------------------ */
[data-theme="spotless"] .lede {
  color: var(--spl-ink-soft);
  font-size: 1.08rem;
  line-height: 1.6;
}

/* ---- Feature split: keep text contrast on light sections --- */
[data-theme="spotless"] .feature-split__body h2,
[data-theme="spotless"] .feature-split__body h3 {
  color: var(--spl-ink);
}

/* ---- About / feature art: premium aqua no-image fallback -- */
[data-theme="spotless"] .feature-split__art {
  border-radius: var(--radius-lg);
  box-shadow: var(--spl-shadow-md);
  overflow: hidden;
  /* On-brand aqua wash when no image supplied */
  background:
    radial-gradient(ellipse 110% 80% at 20% 15%,
      rgba(15, 181, 196, 0.20) 0%,
      rgba(15, 181, 196, 0.06) 55%,
      transparent 80%),
    radial-gradient(ellipse 90% 90% at 90% 90%,
      rgba(10, 124, 138, 0.12) 0%,
      transparent 60%),
    linear-gradient(150deg, var(--spl-surface-alt) 0%, var(--spl-surface-wash) 100%);
}

/* Water-arc motif on feature-split no-image panel */
[data-theme="spotless"] .feature-split__art:not(.feature-split__art--image)::before {
  content: "";
  position: absolute;
  left: -25%;
  right: -25%;
  bottom: 18%;
  height: 60%;
  background: rgba(15, 181, 196, 0.07);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  pointer-events: none;
  z-index: 0;
}

/* Second arc — lower, slightly stronger */
[data-theme="spotless"] .feature-split__art:not(.feature-split__art--image)::after {
  content: "";
  position: absolute;
  left: -30%;
  right: -30%;
  bottom: 0;
  height: 45%;
  background: rgba(10, 124, 138, 0.08);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  pointer-events: none;
  z-index: 0;
}

/* --image class: keep bg-cover behaviour, suppress arc motif */
[data-theme="spotless"] .feature-split__art.feature-split__art--image {
  background:
    linear-gradient(180deg, transparent 45%, rgba(14, 42, 46, 0.5) 100%),
    radial-gradient(120% 80% at 100% 100%, rgba(15, 181, 196, 0.14), transparent 55%);
}
[data-theme="spotless"] .feature-split__art.feature-split__art--image::before,
[data-theme="spotless"] .feature-split__art.feature-split__art--image::after {
  display: none;
}

/* ---- Map / "Find us" section ------------------------------ */
[data-theme="spotless"] .map-section {
  background: var(--spl-surface-alt);
  border-top: 1px solid var(--spl-line-strong);
  border-bottom: 1px solid var(--spl-line-strong);
}

/* The map iframe container — give it shape + shadow so it doesn't
   look like a raw embedded blob */
[data-theme="spotless"] .map-section iframe,
[data-theme="spotless"] .map-embed iframe {
  border-radius: var(--radius-lg);
  box-shadow: var(--spl-shadow-md);
  overflow: hidden;
  display: block;
  width: 100%;
}

/* Address block beneath the map */
[data-theme="spotless"] .map-section address,
[data-theme="spotless"] .map-embed address,
[data-theme="spotless"] .map-nap {
  color: var(--spl-ink-soft);
  font-size: 0.97rem;
  font-style: normal;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  align-items: center;
  padding: 1.1rem 0 0.25rem;
}

[data-theme="spotless"] .map-section address strong,
[data-theme="spotless"] .map-embed address strong {
  color: var(--spl-ink);
  font-weight: 600;
}

/* Hours line — use accent-deep */
[data-theme="spotless"] .map-hours {
  color: var(--spl-accent-deep);
  font-weight: 500;
}

/* "Find us" section title */
[data-theme="spotless"] .map-section .section-title h2,
[data-theme="spotless"] .map-section h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
}

/* ---- Proof strip ------------------------------------------ */
[data-theme="spotless"] .proof-strip {
  border-color: var(--spl-line);
}

/* ---- CTA band (typically .section--dark or final CTA) ------ */
[data-theme="spotless"] .cta-band,
[data-theme="spotless"] .section--cta {
  background: var(--spl-surface-deep);
  color: var(--spl-surface);
}

[data-theme="spotless"] .cta-band h2,
[data-theme="spotless"] .section--cta h2 {
  color: var(--spl-surface);
}

[data-theme="spotless"] .cta-band p,
[data-theme="spotless"] .section--cta p {
  color: rgba(244, 250, 251, 0.75);
}

/* ---- Button ghost (secondary) visible on light + dark ------ */
[data-theme="spotless"] .btn-ghost,
[data-theme="spotless"] a.btn-ghost {
  background: transparent;
  border: 1.5px solid var(--spl-line-strong);
  color: var(--spl-ink-soft);
  border-radius: var(--radius);
  padding: 0.78em 1.85em;
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  display: inline-block;
  min-height: 44px;
  transition: border-color 0.18s ease, color 0.18s ease;
}

[data-theme="spotless"] .btn-ghost:hover,
[data-theme="spotless"] a.btn-ghost:hover {
  border-color: var(--spl-accent);
  color: var(--spl-accent-deep);
}

/* Btn ghost on dark band */
[data-theme="spotless"] .section--dark .btn-ghost,
[data-theme="spotless"] .section-dark .btn-ghost,
[data-theme="spotless"] footer .btn-ghost {
  border-color: rgba(244, 250, 251, 0.25);
  color: rgba(244, 250, 251, 0.8);
}

[data-theme="spotless"] .section--dark .btn-ghost:hover,
[data-theme="spotless"] footer .btn-ghost:hover {
  border-color: var(--spl-accent);
  color: var(--spl-surface);
}

/* ============================================================
   Privacy page + cookie banner (Phase Privacy-01, 2026-06-08)
   Theme-agnostic neutral styling so it reads cleanly on every
   palette we ship. No theme-specific overrides — palette-aware
   tokens (var(--color-ink)) keep it in sync with the active
   look.
   ============================================================ */

.privacy-body { background: var(--color-surface, #fafaf7); color: var(--color-ink, #18181b); }

.privacy-topbar {
  border-bottom: 1px solid color-mix(in srgb, var(--color-ink, #18181b) 12%, transparent);
  padding: 1.25rem 0;
}
.privacy-topbar__home {
  color: var(--color-ink, #18181b);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}
.privacy-topbar__home:hover { text-decoration: underline; }

.privacy-main { padding: 3rem 0 4rem; }
.privacy-main .container { max-width: 760px; }

.privacy-policy__header { margin-bottom: 2rem; }
.privacy-policy__header h1 { font-size: clamp(1.75rem, 2.5vw, 2.5rem); margin: 0.25rem 0 0.5rem; }
.privacy-policy__meta { color: var(--color-ink-soft, #52525b); font-size: 0.95rem; margin: 0; }

.privacy-policy__section { margin: 2rem 0; }
.privacy-policy__section h2 {
  font-size: 1.15rem;
  margin: 0 0 0.6rem;
  letter-spacing: -0.005em;
}
.privacy-policy__section p,
.privacy-policy__section li {
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--color-ink, #18181b);
}
.privacy-policy__section ul { padding-left: 1.2rem; margin: 0.5rem 0 1rem; }
.privacy-policy__section li { margin: 0.35rem 0; }
.privacy-policy__section a { color: var(--color-accent, var(--color-primary, #b45309)); }
.privacy-policy__section code {
  background: color-mix(in srgb, var(--color-ink, #18181b) 7%, transparent);
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  font-size: 0.88em;
}
.privacy-policy__facts {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  border-left: 3px solid color-mix(in srgb, var(--color-ink, #18181b) 15%, transparent);
  padding-left: 1rem;
}
.privacy-policy__contact { border-top: 1px solid color-mix(in srgb, var(--color-ink, #18181b) 12%, transparent); padding-top: 1.5rem; }

.privacy-foot {
  border-top: 1px solid color-mix(in srgb, var(--color-ink, #18181b) 10%, transparent);
  padding: 1.25rem 0;
  color: var(--color-ink-soft, #52525b);
  font-size: 0.85rem;
}
.privacy-foot a { color: var(--color-ink, #18181b); }

.footer__privacy a { color: inherit; }
.footer__privacy a:hover { text-decoration: underline; }

/* ---- Cookie banner ----
   Bottom-fixed, neutral slate. Works on light + dark themes
   because the inner card uses solid slate-900 with off-white
   text — independent of palette. Visually subtle, non-blocking,
   never overlaps a sticky-call pill (sticky-call uses bottom:1rem,
   banner uses bottom:0 full-width). Auto-hidden by JS via the
   `[hidden]` attribute when dismissed. */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: rgba(15, 23, 42, 0.97);
  color: #e2e8f0;
  border-top: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.9rem;
  line-height: 1.45;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.85rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
}
.cookie-banner__msg { margin: 0; flex: 1 1 320px; min-width: 0; }
.cookie-banner__link { color: #f8fafc; text-decoration: underline; }
.cookie-banner__link:hover { color: #fff; }
.cookie-banner__btn {
  background: #f8fafc;
  color: #0f172a;
  border: 0;
  padding: 0.55rem 1.1rem;
  font: inherit;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.cookie-banner__btn:hover { background: #fff; }
.cookie-banner__btn:focus-visible { outline: 2px solid #fde68a; outline-offset: 2px; }
@media (max-width: 520px) {
  .cookie-banner__inner { padding: 0.75rem 1rem; }
  .cookie-banner__msg { font-size: 0.85rem; }
}

/* --- AU compliance additions (Phase AU-02) --- */
/* ABN + licence line in footer-nap */
.footer__abn,
.footer__license { margin: 0.2rem 0; font-size: 0.78rem; color: var(--color-ink-soft, #52525b); }

/* Copyright line at the foot of footer-nap */
.footer__copy { margin: 0.5rem 0 0; font-size: 0.72rem; color: var(--color-ink-faint, #a1a1aa); text-align: center; }
/* AWS attribution line — sits below copyright */
.footer__attribution { margin: 0.2rem 0 0; font-size: 0.72rem; color: var(--color-ink-faint, #a1a1aa); text-align: center; }
.footer__attribution a { color: inherit; text-decoration: none; }
.footer__attribution a:hover { text-decoration: underline; }

/* APP 5 collection notice beneath form fields */
.form__notice { margin: 0.75rem 0 0; font-size: 0.78rem; color: var(--color-ink-soft, #52525b); line-height: 1.5; }
.form__notice a { color: inherit; text-decoration: underline; }
.form__notice a:hover { color: var(--color-accent, #f59e0b); }

/* Terms link styling mirrors the privacy link in footer-bottom */
.lc-footer__terms { color: inherit; opacity: 0.7; font-size: 0.78rem; text-decoration: none; }
.lc-footer__terms:hover { opacity: 1; }

/* ============================================================
   THEME: bright-bubbly
   Sky & Foam — friendly domestic cleaning lane
   Warm coral accent, bubble motifs, pill geometry, Quicksand + Nunito.
   DISTINCT from spotless: warm not cool, pills not ripples, bubbly not minimal.

   Block structure:
     1. CSS custom properties (design tokens)
     2. Body + overflow
     3. Typography
     4. Eyebrow / pill chips
     5. Bubble cluster motifs (CSS-only, keyframe float)
     6. NAV
     7. Hero — warm sky-wash + bubble cluster
     8. Hero art — sky→coral gradient + bubble circles (no-image fallback)
     9. Sections — alt, warm, deep bands
    10. CTAs / buttons (pill shape)
    11. Links
    12. Trust strip
    13. Services — bubbly rounded cards with pill price tags
    14. Stats band — cheerful deep-navy
    15. Testimonials — featured speech-bubble quote + supporting
    16. Values / About
    17. FAQ
    18. Contact form
    19. Map / Find us
    20. Footer
    21. Sticky call bar
    22. Reveal animations + reduced-motion guard
   ============================================================ */

/* ---- 1. Design tokens ------------------------------------- */
[data-theme="bright-bubbly"] {
  /* Core surfaces — sky-tinted, warm-leaning */
  --bb-surface:       #F2F8FD;   /* soft sky-tinted near-white page surface */
  --bb-surface-2:     #E4F1FB;   /* pale sky alternate band */
  --bb-surface-warm:  #FBEFE9;   /* faint peach warm band — variety */
  --bb-surface-deep:  #143A5C;   /* friendly deep navy-sky — footer/CTA */

  /* Ink */
  --bb-ink:           #16314A;   /* warm navy-slate — body + headings */
  --bb-ink-soft:      #4A6376;   /* secondary labels, lede text */
  --bb-ink-faint:     #8AA3B5;   /* placeholders, footnotes (non-text use) */

  /* Primary warm accent — SUNNY CORAL */
  --bb-accent:        #FF7A59;   /* fill accent: pair with deep ink for AA */
  --bb-accent-text:   #C2350F;   /* coral-as-TEXT on light bg — AA 5.15:1 */
  --bb-accent-hover:  #F06040;   /* button hover — slightly deeper coral */
  --bb-accent-pale:   #FFE5DC;   /* very pale coral tint — chips, tags */

  /* Secondary accent — sky blue (links, bubble outlines) */
  --bb-sky:           #2E96D6;   /* decorative / icon use */
  --bb-sky-text:      #1A6A9A;   /* sky-as-TEXT on light bg — AA 5.49:1 */
  --bb-sky-pale:      #D6EDFA;   /* pale sky chip bg */

  /* Lines */
  --bb-line:          rgba(22, 49, 74, 0.08);
  --bb-line-strong:   rgba(22, 49, 74, 0.14);

  /* Shadows — warm-tinted, slightly generous blur */
  --bb-shadow-sm:     0 4px 14px -3px rgba(22, 49, 74, 0.10);
  --bb-shadow-md:     0 16px 40px -12px rgba(22, 49, 74, 0.16);
  --bb-shadow-lg:     0 28px 64px -20px rgba(22, 49, 74, 0.20);

  /* Nav */
  --bb-nav-bg:        rgba(242, 248, 253, 0.95);

  /* Map to shared design-token names used by shared components */
  --color-primary:       #C2350F;
  --color-accent:        #FF7A59;
  --color-ink:           #16314A;
  --color-ink-soft:      #4A6376;
  --color-ink-faint:     #8AA3B5;
  --color-surface:       #F2F8FD;
  --color-surface-2:     #E4F1FB;
  --color-surface-warm:  #FBEFE9;
  --color-surface-deep:  #143A5C;
  --color-line:          rgba(22, 49, 74, 0.08);
  --color-line-strong:   rgba(22, 49, 74, 0.14);

  /* Typography */
  --font-heading: '"Quicksand", ui-sans-serif, system-ui, sans-serif';
  --font-body:    '"Nunito", ui-sans-serif, system-ui, sans-serif';

  /* Geometry — VERY rounded: pill buttons, soft cards */
  --radius-sm: 0.6rem;
  --radius:    1.2rem;
  --radius-lg: 1.8rem;
  --radius-xl: 999px;    /* full pill */

  /* Elevation */
  --shadow-sm: var(--bb-shadow-sm);
  --shadow-md: var(--bb-shadow-md);
  --shadow-lg: var(--bb-shadow-lg);
}

/* ---- 2. Body + overflow ------------------------------------ */
[data-theme="bright-bubbly"],
[data-theme="bright-bubbly"] body {
  overflow-x: hidden;
}

[data-theme="bright-bubbly"] body {
  background: var(--bb-surface);
  color: var(--bb-ink);
  font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
}

[data-theme="bright-bubbly"] p {
  color: var(--bb-ink-soft);
  line-height: 1.6;
  max-width: 68ch;
}

/* ---- 3. Typography — Quicksand headings + Nunito body ------ */
[data-theme="bright-bubbly"] h1,
[data-theme="bright-bubbly"] h2,
[data-theme="bright-bubbly"] h3 {
  font-family: 'Quicksand', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  color: var(--bb-ink);
  letter-spacing: -0.01em;
  line-height: 1.18;
}

[data-theme="bright-bubbly"] h1 {
  font-size: clamp(2.5rem, 5.5vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

[data-theme="bright-bubbly"] h2 {
  font-size: clamp(1.8rem, 3.4vw, 3.0rem);
  font-weight: 700;
}

[data-theme="bright-bubbly"] h3 {
  font-size: clamp(1.2rem, 2.2vw, 1.75rem);
  font-weight: 600;
}

[data-theme="bright-bubbly"] h4 {
  font-family: 'Quicksand', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--bb-ink);
}

[data-theme="bright-bubbly"] h5 {
  font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bb-accent-text);
}

[data-theme="bright-bubbly"] h6 {
  font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bb-ink-soft);
}

/* Mono numerals for stats, hours, phone */
[data-theme="bright-bubbly"] .stat-value,
[data-theme="bright-bubbly"] .stats-band__value,
[data-theme="bright-bubbly"] .hero-meta time,
[data-theme="bright-bubbly"] .trust-bar__item strong {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ---- 4. Eyebrow / pill chips ------------------------------ */
[data-theme="bright-bubbly"] .eyebrow {
  background: var(--bb-accent-pale);
  color: var(--bb-accent-text);
  font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4em 1.1em;
  border-radius: var(--radius-xl);  /* full pill */
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin-bottom: 1.1rem;
}

/* Bubble dot before eyebrow — small circle, the bb signature */
[data-theme="bright-bubbly"] .eyebrow::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--bb-accent);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Bullet markers on plain lists */
[data-theme="bright-bubbly"] ul:not([class]) li::marker,
[data-theme="bright-bubbly"] .feature-list li::marker {
  color: var(--bb-accent);
}

[data-theme="bright-bubbly"] ul:not([class]) li,
[data-theme="bright-bubbly"] .feature-list li {
  padding-left: 0.25rem;
}

/* ---- 5. Bubble cluster motifs (CSS-only) ------------------- */

/* Keyframe: gentle float/bob. Static if prefers-reduced-motion. */
@keyframes bb-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

@keyframes bb-float-delay {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}

/* A reusable bubble-cluster pseudo approach:
   Sections that want the motif get position:relative and
   their ::before / ::after draw bubble circles.
   Kept to pseudo elements only — no extra DOM. */

/* Hero bubble cluster (upper-right decorative area) */
[data-theme="bright-bubbly"] .hero::before {
  content: "";
  position: absolute;
  top: 8%;
  right: 4%;
  width: 220px;
  height: 220px;
  background: transparent;
  border-radius: 50%;
  box-shadow:
    /* big bubble */
    0 0 0 2px rgba(255, 122, 89, 0.18),
    /* medium bubble offset */
    -60px 30px 0 -20px rgba(46, 150, 214, 0.14),
    -60px 30px 0 -18px rgba(46, 150, 214, 0.12),
    /* small bubble */
    40px 80px 0 -30px rgba(255, 122, 89, 0.22),
    40px 80px 0 -28px rgba(255, 122, 89, 0.16),
    /* tiny accent bubble */
    -20px 110px 0 -38px rgba(46, 150, 214, 0.20);
  pointer-events: none;
  z-index: 0;
  animation: bb-float 6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="bright-bubbly"] .hero::before {
    animation: none !important;
  }
}

/* Section-alt bubble accent (lower-left corner) */
[data-theme="bright-bubbly"] .section-alt::before,
[data-theme="bright-bubbly"] .section--alt::before {
  content: "";
  position: absolute;
  bottom: 5%;
  left: 2%;
  width: 140px;
  height: 140px;
  background: transparent;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px rgba(46, 150, 214, 0.12),
    50px -30px 0 -25px rgba(255, 122, 89, 0.14),
    -20px 50px 0 -35px rgba(46, 150, 214, 0.16);
  pointer-events: none;
  z-index: 0;
  animation: bb-float-delay 7s ease-in-out infinite 1.5s;
}

[data-theme="bright-bubbly"] .section-alt,
[data-theme="bright-bubbly"] .section--alt {
  position: relative;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="bright-bubbly"] .section-alt::before,
  [data-theme="bright-bubbly"] .section--alt::before {
    animation: none !important;
  }
}

/* ---- 6. NAV ----------------------------------------------- */
[data-theme="bright-bubbly"] .nav {
  /* Fully opaque so the light hero background does not bleed through and
     reduce perceived link contrast. Was rgba(242,248,253,0.95). */
  background: #F2F8FD;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bb-line-strong);
  box-shadow: 0 2px 8px -2px rgba(22, 49, 74, 0.08);
}

[data-theme="bright-bubbly"] .nav__logo { color: var(--bb-ink); }
[data-theme="bright-bubbly"] .nav__logo strong { color: var(--bb-ink); }

[data-theme="bright-bubbly"] .nav__link {
  /* Was --bb-ink-soft (#4A6376) — too faint on the light nav bg.
     Switch to full --bb-ink (#16314A) + weight 600 for WCAG AA ≥4.5:1. */
  color: var(--bb-ink);
  font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
}
[data-theme="bright-bubbly"] .nav__link:hover { color: var(--bb-accent-text); }
[data-theme="bright-bubbly"] .nav__link:focus-visible {
  outline: 2px solid var(--bb-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Nav CTA — pill shape */
[data-theme="bright-bubbly"] .nav__cta,
[data-theme="bright-bubbly"] .nav .btn-primary {
  background: var(--bb-accent);
  color: var(--bb-ink);
  border-radius: var(--radius-xl);
  padding: 0.55em 1.5em;
  font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  border: none;
  transition: background 0.18s ease;
}
[data-theme="bright-bubbly"] .nav__cta:hover,
[data-theme="bright-bubbly"] .nav .btn-primary:hover {
  background: var(--bb-accent-hover);
}

/* Mobile hamburger button — bright-bubbly override for legible icon on light bg */
[data-theme="bright-bubbly"] .nav-toggle > summary {
  border-color: var(--bb-line-strong);
  background: var(--bb-surface-2);
}
[data-theme="bright-bubbly"] .nav-toggle > summary::after {
  background: var(--bb-ink);
  box-shadow: 0 -5px 0 var(--bb-ink), 0 5px 0 var(--bb-ink);
}
[data-theme="bright-bubbly"] .nav-toggle[open] > summary::before {
  color: var(--bb-ink);
}

/* Mobile panel — explicitly use bright-bubbly ink so links are clearly legible */
[data-theme="bright-bubbly"] .nav-mobile-panel {
  background: #F2F8FD;
  border-color: var(--bb-line-strong);
}
[data-theme="bright-bubbly"] .nav-mobile-panel a {
  color: var(--bb-ink);
  font-weight: 600;
}
[data-theme="bright-bubbly"] .nav-mobile-panel a:hover,
[data-theme="bright-bubbly"] .nav-mobile-panel a.is-active {
  background: rgba(255, 122, 89, 0.10);
  color: var(--bb-accent-text);
}
[data-theme="bright-bubbly"] .nav-mobile-panel .nav-cta-mobile {
  background: var(--bb-accent);
  color: var(--bb-ink);
  font-weight: 700;
}

/* ---- 7. Hero — warm sky-wash + bubble cluster -------------- */
[data-theme="bright-bubbly"] .hero,
[data-theme="bright-bubbly"] .hero--split {
  background-color: var(--bb-surface);
  background-image:
    /* warm sky radial wash */
    radial-gradient(ellipse 70% 65% at 25% 30%,
      rgba(46, 150, 214, 0.13) 0%,
      rgba(46, 150, 214, 0.04) 55%,
      transparent 80%),
    /* faint coral warmth upper-right */
    radial-gradient(ellipse 45% 50% at 82% 20%,
      rgba(255, 122, 89, 0.09) 0%,
      transparent 65%),
    linear-gradient(165deg, var(--bb-surface) 0%, var(--bb-surface-2) 100%);
  position: relative;
  padding-bottom: 6.5rem;
  color: var(--bb-ink);
  overflow: visible !important;
}

/* Suppress the default dark scrim — hero is light */
[data-theme="bright-bubbly"] .hero::after,
[data-theme="bright-bubbly"] .hero--split::after {
  display: none !important;
}

/* ::before used for bubble cluster (defined in section 5 above) */

@media (max-width: 780px) {
  [data-theme="bright-bubbly"] .hero,
  [data-theme="bright-bubbly"] .hero--split {
    padding-bottom: 4.5rem;
  }
  [data-theme="bright-bubbly"] .hero::before {
    width: 130px;
    height: 130px;
    right: 2%;
    top: 5%;
  }
}

/* Multipage/advanced hero variants */
[data-theme="bright-bubbly"]:is([data-package="multipage"], [data-package="advanced"]) .hero,
[data-theme="bright-bubbly"]:is([data-package="multipage"], [data-package="advanced"]) .hero--split {
  background-color: var(--bb-surface) !important;
  background-image:
    radial-gradient(ellipse 70% 65% at 25% 30%,
      rgba(46, 150, 214, 0.13) 0%,
      rgba(46, 150, 214, 0.04) 55%,
      transparent 80%),
    radial-gradient(ellipse 45% 50% at 82% 20%,
      rgba(255, 122, 89, 0.09) 0%,
      transparent 65%),
    linear-gradient(165deg, var(--bb-surface) 0%, var(--bb-surface-2) 100%) !important;
  color: var(--bb-ink);
  min-height: min(52vh, 480px);
}

/* Hero text */
[data-theme="bright-bubbly"] .hero h1,
[data-theme="bright-bubbly"] .hero--split h1 {
  color: var(--bb-ink);
  text-shadow: none;
  font-size: clamp(2.7rem, 6vw, 5.0rem);
  letter-spacing: -0.025em;
  line-height: 1.12;
}

[data-theme="bright-bubbly"] .hero .hero-lede,
[data-theme="bright-bubbly"] .hero--split .hero-lede {
  color: var(--bb-ink-soft);
  text-shadow: none;
  opacity: 1;
}

[data-theme="bright-bubbly"] .hero .eyebrow,
[data-theme="bright-bubbly"] .hero--split .eyebrow {
  display: inline-flex;
}

[data-theme="bright-bubbly"] .hero .hero-meta,
[data-theme="bright-bubbly"] .hero--split .hero-meta {
  color: var(--bb-ink-soft);
  border-top: 1px solid var(--bb-line-strong);
}

[data-theme="bright-bubbly"]:is([data-package="multipage"], [data-package="advanced"]) .hero h1,
[data-theme="bright-bubbly"]:is([data-package="multipage"], [data-package="advanced"]) .hero--split h1 {
  color: var(--bb-ink);
  text-shadow: none;
  font-size: clamp(2.7rem, 6vw, 5.0rem);
  letter-spacing: -0.025em;
  line-height: 1.12;
}

[data-theme="bright-bubbly"]:is([data-package="multipage"], [data-package="advanced"]) .hero .hero-lede,
[data-theme="bright-bubbly"]:is([data-package="multipage"], [data-package="advanced"]) .hero--split .hero-lede {
  color: var(--bb-ink-soft);
  text-shadow: none;
  opacity: 1;
}

/* Simple hero (subpages) */
[data-theme="bright-bubbly"] .hero--simple {
  background: var(--bb-surface-2);
  color: var(--bb-ink);
}
[data-theme="bright-bubbly"] .hero--simple::before { display: none !important; }
[data-theme="bright-bubbly"] .hero--simple::after  { display: none !important; }

/* ---- 8. Hero art — sky→coral gradient + bubble motif ------- */
[data-theme="bright-bubbly"] .hero-art {
  box-shadow: var(--bb-shadow-lg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  /* On-brand sky→coral gradient for no-image state */
  background:
    radial-gradient(ellipse 100% 80% at 20% 15%,
      rgba(46, 150, 214, 0.22) 0%,
      rgba(46, 150, 214, 0.08) 50%,
      transparent 75%),
    radial-gradient(ellipse 70% 80% at 90% 85%,
      rgba(255, 122, 89, 0.18) 0%,
      transparent 60%),
    linear-gradient(148deg, var(--bb-surface-2) 0%, var(--bb-surface-warm) 100%);
}

/* Bubble circles on hero-art no-image panel */
[data-theme="bright-bubbly"] .hero-art:not(.hero-art--image)::before {
  content: "";
  position: absolute;
  top: 20%;
  right: 12%;
  width: 90px;
  height: 90px;
  background: transparent;
  border-radius: 50%;
  box-shadow:
    0 0 0 3px rgba(255, 122, 89, 0.22),
    -55px 35px 0 -15px rgba(46, 150, 214, 0.18),
    -55px 35px 0 -13px rgba(46, 150, 214, 0.10),
    25px 65px 0 -25px rgba(255, 122, 89, 0.26);
  pointer-events: none;
  z-index: 1;
  animation: bb-float 5.5s ease-in-out infinite 0.5s;
}

/* Larger translucent fill bubble — lower-left */
[data-theme="bright-bubbly"] .hero-art:not(.hero-art--image)::after {
  content: "";
  position: absolute;
  bottom: 10%;
  left: 8%;
  width: 120px;
  height: 120px;
  background: rgba(46, 150, 214, 0.08);
  border-radius: 50%;
  border: 2px solid rgba(46, 150, 214, 0.14);
  pointer-events: none;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="bright-bubbly"] .hero-art:not(.hero-art--image)::before {
    animation: none !important;
  }
}

[data-theme="bright-bubbly"] .hero-art img {
  border-radius: var(--radius-lg);
  object-fit: cover;
}

/* --image state: sky→coral overlay */
[data-theme="bright-bubbly"] .hero-art.hero-art--image::before,
[data-theme="bright-bubbly"] .hero-art.hero-art--image::after {
  display: none;
}

[data-theme="bright-bubbly"] .hero-art.hero-art--image {
  background:
    radial-gradient(ellipse 100% 80% at 20% 15%,
      rgba(46, 150, 214, 0.12) 0%,
      transparent 60%),
    var(--bb-surface-2);
}

/* Hero-art overlay elements */
[data-theme="bright-bubbly"] .hero-art__tint {
  background:
    linear-gradient(180deg, transparent 50%, rgba(20, 58, 92, 0.40) 100%),
    radial-gradient(120% 80% at 0% 0%, rgba(46, 150, 214, 0.12), transparent 55%);
}

[data-theme="bright-bubbly"] .hero-art__quote {
  background: rgba(242, 248, 253, 0.96);
  border: 1px solid var(--bb-line-strong);
  border-radius: var(--radius-lg);
}

[data-theme="bright-bubbly"] .hero-art__text {
  font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.97rem;
  color: var(--bb-ink);
}

[data-theme="bright-bubbly"] .hero-art__author { color: var(--bb-ink-soft); }

[data-theme="bright-bubbly"] .hero-art__stars,
[data-theme="bright-bubbly"] .hero-art__rating-chip .star {
  color: var(--bb-accent);
}

[data-theme="bright-bubbly"] .hero-art__rating-chip {
  background: rgba(242, 248, 253, 0.96);
  color: var(--bb-ink);
  border: 1px solid var(--bb-line);
  border-radius: var(--radius-xl);
}

/* ---- 9. Sections ------------------------------------------- */
[data-theme="bright-bubbly"] .section {
  background: var(--bb-surface-2);
  position: relative;
}

[data-theme="bright-bubbly"] .section-alt,
[data-theme="bright-bubbly"] .section--alt {
  background: var(--bb-surface);
}

[data-theme="bright-bubbly"] .section-warm {
  background: var(--bb-surface-warm);
  border-color: var(--bb-line);
}

/* No hairlines between sections — alternating bands carry rhythm */
[data-theme="bright-bubbly"] .section + .section,
[data-theme="bright-bubbly"] .hero + .section,
[data-theme="bright-bubbly"] .hero--split + .section {
  border-top: none;
}

/* Deep band — dark navy for stats/CTA/footer contrast */
[data-theme="bright-bubbly"] .section--dark,
[data-theme="bright-bubbly"] .section-dark {
  background: var(--bb-surface-deep);
  color: var(--bb-surface);
  position: relative;
}

[data-theme="bright-bubbly"] .section--dark h2,
[data-theme="bright-bubbly"] .section-dark h2,
[data-theme="bright-bubbly"] .section--dark h3,
[data-theme="bright-bubbly"] .section-dark h3 {
  color: var(--bb-surface);
}

[data-theme="bright-bubbly"] .section--dark p,
[data-theme="bright-bubbly"] .section-dark p {
  color: rgba(242, 248, 253, 0.82);
}

/* Section headings */
[data-theme="bright-bubbly"] .section-title h2,
[data-theme="bright-bubbly"] .section-title--center h2 {
  color: var(--bb-ink);
}

[data-theme="bright-bubbly"] .section-title p,
[data-theme="bright-bubbly"] .section-title--center p {
  color: var(--bb-ink-soft);
}

[data-theme="bright-bubbly"] .lede {
  color: var(--bb-ink-soft);
  font-size: 1.08rem;
  line-height: 1.65;
}

/* ---- 10. CTAs and buttons — PILL shaped -------------------- */
[data-theme="bright-bubbly"] .btn,
[data-theme="bright-bubbly"] .btn-primary,
[data-theme="bright-bubbly"] a.btn,
[data-theme="bright-bubbly"] a.btn-primary {
  background: var(--bb-accent);
  color: var(--bb-ink);
  border: none;
  border-radius: var(--radius-xl);   /* full pill */
  padding: 0.85em 2.2em;
  font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.97rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  display: inline-block;
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
  box-shadow: 0 4px 18px rgba(255, 122, 89, 0.28);
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
}

[data-theme="bright-bubbly"] .btn:hover,
[data-theme="bright-bubbly"] .btn-primary:hover,
[data-theme="bright-bubbly"] a.btn:hover,
[data-theme="bright-bubbly"] a.btn-primary:hover {
  background: var(--bb-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(255, 122, 89, 0.35);
}

[data-theme="bright-bubbly"] .btn:focus-visible,
[data-theme="bright-bubbly"] .btn-primary:focus-visible {
  outline: 2px solid var(--bb-accent);
  outline-offset: 3px;
}

[data-theme="bright-bubbly"] .btn-secondary,
[data-theme="bright-bubbly"] a.btn-secondary {
  background: transparent;
  color: var(--bb-sky-text);
  border: 2px solid var(--bb-sky);
  border-radius: var(--radius-xl);
  padding: 0.80em 2.0em;
  font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.97rem;
  text-decoration: none;
  display: inline-block;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  min-height: 44px;
  min-width: 44px;
}

[data-theme="bright-bubbly"] .btn-secondary:hover,
[data-theme="bright-bubbly"] a.btn-secondary:hover {
  background: var(--bb-sky-pale);
  color: var(--bb-sky-text);
  border-color: var(--bb-sky-text);
}

/* Ghost button */
[data-theme="bright-bubbly"] .btn-ghost,
[data-theme="bright-bubbly"] a.btn-ghost {
  background: transparent;
  border: 2px solid var(--bb-line-strong);
  color: var(--bb-ink-soft);
  border-radius: var(--radius-xl);
  padding: 0.82em 2.0em;
  font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.97rem;
  text-decoration: none;
  display: inline-block;
  min-height: 44px;
  transition: border-color 0.18s ease, color 0.18s ease;
}

[data-theme="bright-bubbly"] .btn-ghost:hover,
[data-theme="bright-bubbly"] a.btn-ghost:hover {
  border-color: var(--bb-accent);
  color: var(--bb-accent-text);
}

/* Ghost on dark band */
[data-theme="bright-bubbly"] .section--dark .btn-ghost,
[data-theme="bright-bubbly"] .section-dark .btn-ghost,
[data-theme="bright-bubbly"] footer .btn-ghost {
  border-color: rgba(242, 248, 253, 0.3);
  color: rgba(242, 248, 253, 0.85);
}

[data-theme="bright-bubbly"] .section--dark .btn-ghost:hover,
[data-theme="bright-bubbly"] footer .btn-ghost:hover {
  border-color: var(--bb-accent);
  color: var(--bb-surface);
}

/* CTA band */
[data-theme="bright-bubbly"] .cta-band,
[data-theme="bright-bubbly"] .section--cta {
  background: var(--bb-surface-deep);
  color: var(--bb-surface);
}

[data-theme="bright-bubbly"] .cta-band h2,
[data-theme="bright-bubbly"] .section--cta h2 {
  color: var(--bb-surface);
}

[data-theme="bright-bubbly"] .cta-band p,
[data-theme="bright-bubbly"] .section--cta p {
  color: rgba(242, 248, 253, 0.80);
}

/* ---- 11. Links --------------------------------------------- */
[data-theme="bright-bubbly"] a {
  color: var(--bb-sky-text);
  text-decoration: none;
}
[data-theme="bright-bubbly"] a:hover {
  text-decoration: underline;
  color: var(--bb-sky-text);
}
[data-theme="bright-bubbly"] a:focus-visible {
  outline: 2px solid var(--bb-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---- 12. Trust strip -------------------------------------- */
[data-theme="bright-bubbly"] .trust-strip {
  border-color: var(--bb-line-strong);
}

[data-theme="bright-bubbly"] .trust-pill {
  background: var(--bb-accent-pale);
  color: var(--bb-accent-text);
  border: 1px solid rgba(255, 122, 89, 0.2);
  border-radius: var(--radius-xl);  /* pill */
  font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
}

[data-theme="bright-bubbly"] .trust-bar {
  background: var(--bb-surface-warm);
  border-top: 1px solid var(--bb-line);
  border-bottom: 1px solid var(--bb-line);
}

[data-theme="bright-bubbly"] .trust-bar__stars { color: var(--bb-accent); }
[data-theme="bright-bubbly"] .trust-bar__item strong { color: var(--bb-accent-text); }

[data-theme="bright-bubbly"] .proof-strip {
  background: var(--bb-surface-warm);
  border-bottom: 1px solid var(--bb-line);
}

/* ---- 13. Services — bubbly rounded cards + pill prices ------ */

/* Override 3-column auto-fit grid: bubbly uses rounded CARDS
   (one per row on desktop, full-width), not the spotless hairline rows.
   This is a deliberately different affordance. */
[data-theme="bright-bubbly"] .grid-3:has(.card-service),
[data-theme="bright-bubbly"] .services-grid:has(.card-service),
[data-theme="bright-bubbly"] .services-grid--compact:has(.card-service) {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

[data-theme="bright-bubbly"] .card-service {
  background: var(--bb-surface);
  border: 1.5px solid var(--bb-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--bb-shadow-sm);
  padding: 1.5rem 1.75rem;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 0.2rem 1.5rem;
  align-items: start;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

[data-theme="bright-bubbly"] .card-service:hover {
  box-shadow: var(--bb-shadow-md);
  border-color: rgba(255, 122, 89, 0.25);
  transform: translateY(-2px);
}

/* Bubble dot marker before each service title */
[data-theme="bright-bubbly"] .card-service h3::before,
[data-theme="bright-bubbly"] .card-service .card-service__title::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  background: var(--bb-accent);
  border-radius: 50%;
  margin-right: 0.6rem;
  vertical-align: middle;
  flex-shrink: 0;
}

[data-theme="bright-bubbly"] .card-service h3,
[data-theme="bright-bubbly"] .card-service .card-service__title {
  font-family: 'Quicksand', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--bb-ink);
  margin: 0 0 0.3rem;
  display: flex;
  align-items: center;
  grid-column: 1;
  grid-row: 1;
}

[data-theme="bright-bubbly"] .card-service p {
  grid-column: 1;
  grid-row: 2;
  color: var(--bb-ink-soft);
  font-size: 0.94rem;
  line-height: 1.55;
  margin: 0;
  max-width: 62ch;
}

/* Price tag — pill shaped */
[data-theme="bright-bubbly"] .card-service .card-service__price,
[data-theme="bright-bubbly"] .card-service .price-hint {
  grid-column: 2;
  grid-row: 1;
  font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--bb-accent-text);
  background: var(--bb-accent-pale);
  border-radius: var(--radius-xl);
  padding: 0.25em 0.9em;
  white-space: nowrap;
  align-self: start;
}

[data-theme="bright-bubbly"] .card-service__head {
  display: contents;
}

/* Compact grid variant */
[data-theme="bright-bubbly"] .services-grid-compact .card-service {
  padding: 1.1rem 1.4rem;
}

/* ---- 14. Stats band — deep navy, cheerful counts ----------- */
[data-theme="bright-bubbly"] .stats-band,
[data-theme="bright-bubbly"] .section--stats {
  background: var(--bb-surface-deep);
  color: var(--bb-surface);
  isolation: isolate;
  position: relative;
}

[data-theme="bright-bubbly"] .stats-band > *,
[data-theme="bright-bubbly"] .section--stats > * {
  position: relative;
  z-index: 1;
}

[data-theme="bright-bubbly"] .stats-band__value,
[data-theme="bright-bubbly"] .stat-value {
  font-family: 'Quicksand', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.4rem, 4vw, 3.8rem);
  font-weight: 700;
  color: var(--bb-accent);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

[data-theme="bright-bubbly"] .stats-band__label,
[data-theme="bright-bubbly"] .stat-label {
  color: rgba(242, 248, 253, 0.72);
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 0.3rem;
  letter-spacing: 0.01em;
}

/* ---- 15. Testimonials — featured speech-bubble + supporting -
   A warm coral featured card with a large rounded speech-bubble
   quote, plus 1-2 supporting quotes in a subdued sky-tinted card.
   Clearly bubbly and warm, not the spotless cool-deep treatment. */

/* Container: stacked layout, not the default 3-up grid */
[data-theme="bright-bubbly"] .testimonials,
[data-theme="bright-bubbly"] .testimonials--sparse {
  display: block;
}

/* Featured quote layout: 2-col grid if 2+ testimonials */
[data-theme="bright-bubbly"] .testimonials {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

[data-theme="bright-bubbly"] .testimonials > .testimonial:first-child {
  grid-column: 1;
  grid-row: 1;
}

[data-theme="bright-bubbly"] .testimonials:has(> .testimonial:nth-child(2)) {
  grid-template-columns: 1fr 1fr;
}

[data-theme="bright-bubbly"] .testimonials > .testimonial:first-child {
  grid-column: 1 / -1;
  grid-row: 1;
}

[data-theme="bright-bubbly"] .testimonials > .testimonial:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}

[data-theme="bright-bubbly"] .testimonials > .testimonial:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}

/* Mobile: stack all */
@media (max-width: 640px) {
  [data-theme="bright-bubbly"] .testimonials,
  [data-theme="bright-bubbly"] .testimonials:has(> .testimonial:nth-child(2)) {
    grid-template-columns: 1fr;
  }
  [data-theme="bright-bubbly"] .testimonials > .testimonial:nth-child(2),
  [data-theme="bright-bubbly"] .testimonials > .testimonial:nth-child(3) {
    grid-column: 1;
    grid-row: auto;
  }
  [data-theme="bright-bubbly"] .testimonial:first-child {
    padding: 2rem 1.5rem;
  }
  [data-theme="bright-bubbly"] .testimonial:first-child::after {
    font-size: 5rem;
    left: 1.25rem;
  }
}

/* FEATURED QUOTE — warm coral card with big rounded speech-bubble */
[data-theme="bright-bubbly"] .testimonial:first-child {
  background: var(--bb-surface-warm);
  border: 2px solid rgba(255, 122, 89, 0.18);
  border-radius: var(--radius-lg);
  padding: 2.75rem 3rem;
  box-shadow: var(--bb-shadow-md);
  position: relative;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

/* Warm coral radial wash behind featured quote */
[data-theme="bright-bubbly"] .testimonial:first-child::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 90% at 5% 0%,
      rgba(255, 122, 89, 0.10) 0%,
      transparent 55%),
    radial-gradient(ellipse 70% 70% at 95% 100%,
      rgba(46, 150, 214, 0.08) 0%,
      transparent 50%);
  pointer-events: none;
}

/* Large rounded speech-bubble opening quote mark */
[data-theme="bright-bubbly"] .testimonial:first-child::after {
  content: "\201C";
  position: absolute;
  top: -0.1em;
  left: 2rem;
  font-family: 'Quicksand', ui-sans-serif, system-ui, sans-serif;
  font-size: 8rem;
  line-height: 1;
  color: rgba(255, 122, 89, 0.20);
  pointer-events: none;
  user-select: none;
}

[data-theme="bright-bubbly"] .testimonial:first-child .testimonial__stars {
  color: var(--bb-accent);
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.55rem;
  position: relative;
  z-index: 1;
}

[data-theme="bright-bubbly"] .testimonial:first-child .testimonial__text {
  font-family: 'Quicksand', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.15rem, 2.1vw, 1.55rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--bb-ink);
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  position: relative;
  z-index: 1;
  margin-bottom: 1.5rem;
}

[data-theme="bright-bubbly"] .testimonial:first-child .testimonial__author {
  border-top: 1px solid var(--bb-line-strong);
  padding-top: 1.1rem;
  margin-top: 0;
  color: var(--bb-ink-soft);
  position: relative;
  z-index: 1;
}

[data-theme="bright-bubbly"] .testimonial:first-child .testimonial__author strong {
  color: var(--bb-ink);
  font-weight: 700;
}

[data-theme="bright-bubbly"] .testimonial:first-child .testimonial__avatar {
  background: rgba(255, 122, 89, 0.15);
  color: var(--bb-accent-text);
  border: 1px solid rgba(255, 122, 89, 0.25);
}

[data-theme="bright-bubbly"] .testimonial:first-child .testimonial__readmore {
  display: none;
}

/* SUPPORTING QUOTES — sky-tinted, softly rounded, pill-ish border */
[data-theme="bright-bubbly"] .testimonial:not(:first-child) {
  background: var(--bb-surface-2);
  border: 1.5px solid var(--bb-line);
  border-top: 3px solid var(--bb-sky);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.65rem;
  box-shadow: var(--bb-shadow-sm);
  display: inline-flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
  box-sizing: border-box;
}

[data-theme="bright-bubbly"] .testimonial:not(:first-child) .testimonial__stars {
  color: var(--bb-accent);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
}

[data-theme="bright-bubbly"] .testimonial:not(:first-child) .testimonial__text {
  font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.97rem;
  font-weight: 400;
  line-height: 1.58;
  color: var(--bb-ink);
  -webkit-line-clamp: 5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

[data-theme="bright-bubbly"] .testimonial:not(:first-child) .testimonial__author {
  color: var(--bb-ink-soft);
  font-size: 0.85rem;
  margin-top: auto;
}

[data-theme="bright-bubbly"] .testimonial:not(:first-child) .testimonial__author strong {
  color: var(--bb-ink);
  font-weight: 700;
}

[data-theme="bright-bubbly"] .testimonial:not(:first-child) .testimonial__avatar {
  width: 30px;
  height: 30px;
  font-size: 0.82rem;
  background: var(--bb-sky-pale);
  color: var(--bb-sky-text);
}

/* Legacy review selectors */
[data-theme="bright-bubbly"] .card-review,
[data-theme="bright-bubbly"] .testimonial-card {
  background: var(--bb-surface-2);
  border: 1.5px solid var(--bb-line);
  border-top: 3px solid var(--bb-sky);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.65rem;
  box-shadow: var(--bb-shadow-sm);
}

[data-theme="bright-bubbly"] .card-review__stars,
[data-theme="bright-bubbly"] .stars {
  color: var(--bb-accent);
}

[data-theme="bright-bubbly"] .card-review__text,
[data-theme="bright-bubbly"] .testimonial-card blockquote {
  color: var(--bb-ink);
  font-size: 0.97rem;
  line-height: 1.58;
}

[data-theme="bright-bubbly"] .card-review__author,
[data-theme="bright-bubbly"] .testimonial-card cite {
  font-weight: 700;
  color: var(--bb-ink);
  font-size: 0.88rem;
}

/* ---- 16. Values / About cards ----------------------------- */
[data-theme="bright-bubbly"] .card-value,
[data-theme="bright-bubbly"] .values-card {
  background: var(--bb-surface);
  border: 1.5px solid var(--bb-line);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--bb-shadow-sm);
}

[data-theme="bright-bubbly"] .card-value h3,
[data-theme="bright-bubbly"] .values-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

/* Feature split */
[data-theme="bright-bubbly"] .feature-split__body h2,
[data-theme="bright-bubbly"] .feature-split__body h3 {
  color: var(--bb-ink);
}

[data-theme="bright-bubbly"] .feature-split__badge {
  background: var(--bb-accent-pale);
  color: var(--bb-accent-text);
  border-radius: var(--radius-xl);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.3em 0.9em;
  display: inline-block;
}

/* Feature split art — sky→coral no-image fallback */
[data-theme="bright-bubbly"] .feature-split__art {
  border-radius: var(--radius-lg);
  box-shadow: var(--bb-shadow-md);
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(ellipse 110% 80% at 20% 15%,
      rgba(46, 150, 214, 0.18) 0%,
      rgba(46, 150, 214, 0.05) 55%,
      transparent 80%),
    radial-gradient(ellipse 80% 80% at 85% 85%,
      rgba(255, 122, 89, 0.14) 0%,
      transparent 60%),
    linear-gradient(148deg, var(--bb-surface-2) 0%, var(--bb-surface-warm) 100%);
}

[data-theme="bright-bubbly"] .feature-split__art.feature-split__art--image {
  background:
    linear-gradient(180deg, transparent 45%, rgba(20, 58, 92, 0.45) 100%),
    radial-gradient(120% 80% at 100% 100%, rgba(46, 150, 214, 0.12), transparent 55%);
}
[data-theme="bright-bubbly"] .feature-split__art.feature-split__art--image::before,
[data-theme="bright-bubbly"] .feature-split__art.feature-split__art--image::after {
  display: none;
}

/* ---- 17. FAQ ---------------------------------------------- */
[data-theme="bright-bubbly"] .faq-item {
  border-bottom: 1px solid var(--bb-line-strong);
  padding: 1.5rem 0;
}

[data-theme="bright-bubbly"] .faq-item:first-child {
  border-top: 1px solid var(--bb-line-strong);
}

[data-theme="bright-bubbly"] .faq-item summary,
[data-theme="bright-bubbly"] .faq-question {
  font-family: 'Quicksand', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  color: var(--bb-ink);
  cursor: pointer;
  font-size: 1.02rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
  padding: 0.25rem 0;
  min-height: 44px;
}

/* Bubble dot before each FAQ question */
[data-theme="bright-bubbly"] .faq-item summary::before,
[data-theme="bright-bubbly"] .faq-question::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--bb-accent);
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 0.5rem;
  opacity: 0.85;
}

[data-theme="bright-bubbly"] .faq-item summary::after,
[data-theme="bright-bubbly"] .faq-question::after {
  content: "+";
  font-size: 1.3rem;
  color: var(--bb-accent-text);
  font-weight: 400;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background: var(--bb-accent-pale);
  border: 1.5px solid rgba(255, 122, 89, 0.25);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}

[data-theme="bright-bubbly"] .faq-item summary:hover::after,
[data-theme="bright-bubbly"] .faq-question:hover::after {
  background: var(--bb-accent);
  border-color: var(--bb-accent);
  color: var(--bb-ink);
}

[data-theme="bright-bubbly"] details[open] .faq-item summary::after,
[data-theme="bright-bubbly"] details[open] summary::after {
  content: "\2212";
  background: var(--bb-accent);
  border-color: var(--bb-accent);
  color: var(--bb-ink);
}

[data-theme="bright-bubbly"] .faq-answer,
[data-theme="bright-bubbly"] .faq-item p {
  color: var(--bb-ink-soft);
  margin: 0.85rem 0 0.35rem 1.1rem;
  font-size: 0.97rem;
  line-height: 1.65;
}

/* Global FAQ (details element without .faq-item wrapper) */
[data-theme="bright-bubbly"] details {
  border-bottom: 1px solid var(--bb-line-strong);
  padding: 1.35rem 0;
}

[data-theme="bright-bubbly"] details:first-of-type {
  border-top: 1px solid var(--bb-line-strong);
}

[data-theme="bright-bubbly"] details summary {
  font-family: 'Quicksand', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  color: var(--bb-ink);
  cursor: pointer;
  font-size: 1.02rem;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.1rem 0;
  min-height: 44px;
}

[data-theme="bright-bubbly"] details summary::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--bb-accent);
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.85;
}

[data-theme="bright-bubbly"] details summary::after {
  content: "+";
  font-size: 1.25rem;
  color: var(--bb-accent-text);
  font-weight: 400;
  margin-left: auto;
  width: 30px;
  height: 30px;
  background: var(--bb-accent-pale);
  border: 1.5px solid rgba(255, 122, 89, 0.25);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}

[data-theme="bright-bubbly"] details[open] summary::after {
  content: "\2212";
  background: var(--bb-accent);
  border-color: var(--bb-accent);
  color: var(--bb-ink);
}

[data-theme="bright-bubbly"] details > p {
  margin: 0.85rem 0 0.35rem 1.1rem;
  color: var(--bb-ink-soft);
  font-size: 0.97rem;
  line-height: 1.65;
}

/* ---- 18. Contact form ------------------------------------- */
[data-theme="bright-bubbly"] .contact-card {
  background: var(--bb-surface);
  border: 1.5px solid var(--bb-line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--bb-shadow-md);
  padding: 2.5rem;
}

[data-theme="bright-bubbly"] input,
[data-theme="bright-bubbly"] textarea,
[data-theme="bright-bubbly"] select {
  background: var(--bb-surface);
  color: var(--bb-ink);
  border: 1.5px solid var(--bb-line-strong);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.97rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  min-height: 44px;
}

[data-theme="bright-bubbly"] input::placeholder,
[data-theme="bright-bubbly"] textarea::placeholder {
  color: var(--bb-ink-faint);
}

[data-theme="bright-bubbly"] input:focus,
[data-theme="bright-bubbly"] textarea:focus,
[data-theme="bright-bubbly"] select:focus {
  outline: none;
  border-color: var(--bb-accent);
  box-shadow: 0 0 0 3px rgba(255, 122, 89, 0.14);
}

/* ---- 19. Map / Find us ------------------------------------ */
[data-theme="bright-bubbly"] .map-section {
  background: var(--bb-surface-2);
  border-top: 1px solid var(--bb-line-strong);
  border-bottom: 1px solid var(--bb-line-strong);
}

[data-theme="bright-bubbly"] .map-section iframe,
[data-theme="bright-bubbly"] .map-embed iframe {
  border-radius: var(--radius-lg);
  box-shadow: var(--bb-shadow-md);
  overflow: hidden;
  display: block;
  width: 100%;
}

[data-theme="bright-bubbly"] .map-section address,
[data-theme="bright-bubbly"] .map-embed address,
[data-theme="bright-bubbly"] .map-nap {
  color: var(--bb-ink-soft);
  font-size: 0.97rem;
  font-style: normal;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  align-items: center;
  padding: 1.1rem 0 0.25rem;
}

[data-theme="bright-bubbly"] .map-section address strong,
[data-theme="bright-bubbly"] .map-embed address strong {
  color: var(--bb-ink);
  font-weight: 700;
}

[data-theme="bright-bubbly"] .map-hours {
  color: var(--bb-accent-text);
  font-weight: 600;
}

[data-theme="bright-bubbly"] .map-section .section-title h2,
[data-theme="bright-bubbly"] .map-section h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
}

/* ---- 20. Footer ------------------------------------------- */
[data-theme="bright-bubbly"] footer,
[data-theme="bright-bubbly"] .footer-warm,
[data-theme="bright-bubbly"] .site-footer {
  background: var(--bb-surface-deep);
  color: rgba(242, 248, 253, 0.78);
}

[data-theme="bright-bubbly"] footer h3,
[data-theme="bright-bubbly"] .footer-warm h3,
[data-theme="bright-bubbly"] .site-footer h3,
[data-theme="bright-bubbly"] footer .nav__logo,
[data-theme="bright-bubbly"] .footer-warm .nav__logo {
  color: var(--bb-surface);
}

[data-theme="bright-bubbly"] footer a,
[data-theme="bright-bubbly"] .footer-warm a,
[data-theme="bright-bubbly"] .site-footer a {
  color: rgba(242, 248, 253, 0.78);
  text-decoration: none;
}

[data-theme="bright-bubbly"] footer a:hover,
[data-theme="bright-bubbly"] .footer-warm a:hover,
[data-theme="bright-bubbly"] .site-footer a:hover {
  color: var(--bb-accent);
  text-decoration: underline;
}

[data-theme="bright-bubbly"] .footer-nap,
[data-theme="bright-bubbly"] .footer__nap {
  color: rgba(242, 248, 253, 0.78);
}

[data-theme="bright-bubbly"] .footer-bottom,
[data-theme="bright-bubbly"] .footer__bottom {
  border-top: 1px solid rgba(242, 248, 253, 0.10);
  color: rgba(242, 248, 253, 0.45);
  font-size: 0.78rem;
}

/* ---- 21. Sticky call bar ---------------------------------- */
[data-theme="bright-bubbly"] .sticky-mobile-call-bar {
  background: var(--bb-surface-deep);
}

[data-theme="bright-bubbly"] .sticky-call {
  background: var(--bb-accent);
  color: var(--bb-ink);
  border-radius: var(--radius-xl);
  font-weight: 700;
}

[data-theme="bright-bubbly"] .sticky-call:hover {
  background: var(--bb-accent-hover);
}

[data-theme="bright-bubbly"] .emergency-band {
  background: var(--bb-surface-deep);
  color: var(--bb-accent);
}

/* ---- 22. Reveal animations + reduced-motion guard ---------- */
[data-theme="bright-bubbly"] [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-theme="bright-bubbly"] [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-theme="bright-bubbly"] [data-reveal][data-delay="1"] { transition-delay: 75ms; }
[data-theme="bright-bubbly"] [data-reveal][data-delay="2"] { transition-delay: 150ms; }
[data-theme="bright-bubbly"] [data-reveal][data-delay="3"] { transition-delay: 225ms; }
[data-theme="bright-bubbly"] [data-reveal][data-delay="4"] { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  [data-theme="bright-bubbly"] [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-theme="bright-bubbly"] .hero::before,
  [data-theme="bright-bubbly"] .section-alt::before,
  [data-theme="bright-bubbly"] .section--alt::before,
  [data-theme="bright-bubbly"] .hero-art:not(.hero-art--image)::before {
    animation: none !important;
  }
}

/* Instagram feed */
[data-theme="bright-bubbly"] .ig-feed__tile {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

[data-theme="bright-bubbly"] .ig-feed__tile:hover img {
  transform: scale(1.04);
}

[data-theme="bright-bubbly"] .ig-feed__title {
  font-family: 'Quicksand', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
}
/* ---- end bright-bubbly ------------------------------------ */

/* ============================================================
   THEME: harbour-mist
   Elegant dusty slate-blue for home services and cleaning.
   Palette: dusty slate #3F5963 brand, #FBFCFC near-white surface,
   #222428 ink, #6F7B80 body text. Quattrocento serif headings,
   Epilogue body, Smooch Sans display/eyebrows, Poppins UI.
   Signature: diagonal hero clip-path, image-flip service cards,
   rotated marquee strip, frosted floating nav.
   ============================================================ */

/* ---- 1. Design tokens ------------------------------------- */
[data-theme="harbour-mist"] {
  /* Brand palette */
  --hm-brand:          #3F5963;   /* dusty slate-blue: nav bar, buttons, footer */
  --hm-brand-dark:     #34474F;   /* hover / deeper shade */
  --hm-brand-muted:    #7E98A3;   /* lighter slate accent */
  --hm-brand-mist:     #9CAEB5;   /* lightest slate — borders, muted text */

  /* Ink */
  --hm-ink:            #222428;   /* slightly slate-tinted dark — headings */
  --hm-ink-body:       #6F7B80;   /* body text (slate-tinted grey) */
  --hm-ink-soft:       #54595F;   /* secondary text */

  /* Surfaces */
  --hm-surface:        #FBFCFC;   /* page surface — NOT pure white */
  --hm-surface-alt:    #F2F4F5;   /* cool light grey — card / section-alt bg */
  --hm-surface-deep:   #3F5963;   /* dark slate — footer, overlays */

  /* Lines / borders */
  --hm-line:           #DDE2E4;
  --hm-line-alpha:     rgba(63, 89, 99, 0.10);

  /* Shadow tokens */
  --hm-shadow-sm:      0 2px 8px -2px rgba(34, 40, 46, 0.09);
  --hm-shadow-card:    0 4px 20px -6px rgba(34, 40, 46, 0.14);
  --hm-shadow-float:   0 40px 120px -40px rgba(34, 40, 46, 0.23);

  /* Radius */
  --hm-radius-sm:      10px;
  --hm-radius:         20px;      /* cards, rectangular buttons */
  --hm-radius-xl:      200px;     /* pill CTAs, eyebrow chips, rating pills */

  /* Container */
  --hm-container:      1140px;

  /* Map to shared tokens so base rules still fire */
  --color-primary:     #3F5963;
  --color-accent:      #3F5963;
  --color-ink:         #222428;
  --color-ink-soft:    #6F7B80;
  --color-ink-faint:   #9CAEB5;
  --color-surface:     #FBFCFC;
  --color-surface-2:   #F2F4F5;
  --color-surface-warm: #F2F4F5;
  --color-line:        rgba(63, 89, 99, 0.10);
  --color-line-strong: rgba(63, 89, 99, 0.18);

  /* Font stack tokens */
  --font-heading: '"Quattrocento", Georgia, serif';
  --font-body:    '"Epilogue", ui-sans-serif, system-ui, sans-serif';

  /* Geometry */
  --radius-sm:  10px;
  --radius:     20px;
  --radius-lg:  20px;
  --radius-xl:  200px;

  /* Elevation */
  --shadow-sm: var(--hm-shadow-sm);
  --shadow-md: var(--hm-shadow-card);
  --shadow-lg: var(--hm-shadow-float);

  /* Button tokens */
  --btn-primary-bg: var(--hm-brand);
  --btn-primary-fg: #FBFCFC;
  --menu-bg: var(--hm-brand);

  /* Hero photo overlay (tint/haze). Driven by the Brand-colours "Hero" control.
     --hm-hero-tint-rgb : the tint COLOUR (default = brand). Operator-overridable.
     --hm-hero-ink-rgb  : neutral dark used at top/bottom for text legibility.
     --hm-hero-strength : brand-hue intensity 0..1 (0 = no colour on the hero).
     --hm-hero-clarity  : photo sharpness 0..1 (1 = completely clear/sharp,
                          0 = completely blurred). Blur = 22px * (1 - clarity).
     Tint alpha = base * strength; ink alpha = base (legibility, constant). */
  --hm-hero-tint-rgb: 63, 89, 99;
  --hm-hero-ink-rgb:  34, 36, 40;
  --hm-hero-strength: 0.8;
  --hm-hero-clarity:  1;
}

/* ---- 2. Clip overflow (marquee only — NOT html/body, which would break sticky nav) */
/* overflow-x: clip does NOT create a scroll container, so position:sticky on .nav keeps working.
   The marquee's own container clips its horizontal overflow independently (see section 9). */
[data-theme="harbour-mist"],
[data-theme="harbour-mist"] body {
  overflow-x: clip;
}

/* ---- 3. Body --------------------------------------------- */
[data-theme="harbour-mist"] body {
  background: var(--hm-surface);
  color: var(--hm-ink-body);
  font-family: 'Epilogue', ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  /* No overflow-x here — clip on <html> is sufficient and does not block sticky */
}

[data-theme="harbour-mist"] p {
  color: var(--hm-ink-body);
  line-height: 1.6;
  max-width: 68ch;
}

/* ---- 4. Headings — Quattrocento serif --------------------- */
[data-theme="harbour-mist"] h1,
[data-theme="harbour-mist"] h2,
[data-theme="harbour-mist"] h3 {
  font-family: 'Quattrocento', Georgia, serif;
  color: var(--hm-ink);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

[data-theme="harbour-mist"] h1 {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

[data-theme="harbour-mist"] h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.9rem);
  font-weight: 700;
}

[data-theme="harbour-mist"] h3 {
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  font-weight: 700;
}

[data-theme="harbour-mist"] h4 {
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--hm-ink);
}

/* Display / eyebrow font — Smooch Sans condensed */
[data-theme="harbour-mist"] h5 {
  font-family: 'Smooch Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hm-brand-muted);
}

[data-theme="harbour-mist"] h6 {
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--hm-ink-soft);
}

/* ---- 5. Section eyebrow — Smooch Sans condensed uppercase -- */
[data-theme="harbour-mist"] .eyebrow {
  font-family: 'Smooch Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hm-brand-muted);
  background: transparent;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.9rem;
}

/* Tick mark before eyebrow */
[data-theme="harbour-mist"] .eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 2px;
  background: var(--hm-brand-muted);
  flex-shrink: 0;
}

/* ---- 6. TOP CONTACT BAR ----------------------------------- */
/* Reference layout: full-width #3F5963 slate strip.
   LEFT: phone number (Call or text) + location pin + locality.
   RIGHT: small navigation links (About Us · Work With Us · Privacy & Terms).
   Poppins 500, 0.78rem, near-white text. */
.hm-topbar {
  display: none;   /* hidden by default; shown for harbour-mist */
  background: var(--hm-brand);
  color: rgba(251, 252, 252, 0.82);
}

[data-theme="harbour-mist"] .hm-topbar {
  display: block;
  /* The hero pulls up behind the header (position:relative), which would paint
     OVER this static strip. Give the slate top bar a positioned stacking order
     above the hero + nav so it stays visible as the topmost strip. */
  position: relative;
  z-index: 40;
}

.hm-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.3rem 0;
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  max-width: var(--hm-container);
  margin: 0 auto;
  padding-inline: 1.5rem;
}

/* Left group: phone + divider + locality */
.hm-topbar__left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Right group: small nav links */
.hm-topbar__right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-shrink: 0;
}

.hm-topbar__right a {
  color: rgba(251, 252, 252, 0.75);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 500;
  transition: color 0.15s ease;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.hm-topbar__right a:hover {
  color: #FBFCFC;
}

.hm-topbar__divider {
  opacity: 0.35;
  flex-shrink: 0;
}

.hm-topbar__locality {
  display: flex;
  align-items: center;
  gap: 0.3em;
  color: rgba(251, 252, 252, 0.82);
}

/* Location pin icon before locality */
.hm-topbar__locality::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 13px;
  background: currentColor;
  opacity: 0.7;
  /* SVG location pin shape via clip-path */
  clip-path: path('M5 0C2.24 0 0 2.24 0 5c0 3.75 5 8 5 8s5-4.25 5-8C10 2.24 7.76 0 5 0zm0 6.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z');
  transform: scale(0.9);
  transform-origin: center;
}

.hm-topbar__phone {
  color: rgba(251, 252, 252, 0.92);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s ease;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.hm-topbar__phone::before {
  content: "Call or text  ";
  font-weight: 400;
  opacity: 0.78;
}

.hm-topbar__phone:hover {
  color: #FBFCFC;
}

/* Hide the secondary nav links on very small screens to avoid overflow */
@media (max-width: 640px) {
  .hm-topbar__right {
    display: none;
  }
  .hm-topbar__phone::before {
    display: none;
  }
}

/* ---- 7. NAV — transparent at top, frosted when scrolled ---- */
/* AT TOP OF PAGE: transparent background so the hero image shows through.
   Nav text + logo are DARK (#222428) for contrast against the light scrim
   added by the hero ::before gradient (rgba(251,252,252,0.78) top→transparent).
   WCAG AA check: #222428 on rgba(251,252,252,0.78) blended over hero image.
   Effective scrim bg ≈ #F5F7F7 → contrast #222428/#F5F7F7 ≈ 13.5:1 (AAA). ✓

   WHEN SCROLLED (.is-scrolled applied by inline JS):
   Frosted near-white background rgba(251,252,252,0.82) + blur(10px).
   Nav text: slate ink (#222428) — same as at-top, no visual jump.
   WCAG AA: #222428 on rgba(251,252,252,0.82) → ≈ #F2F4F4 → contrast ≈ 14.1:1 (AAA). ✓
*/

[data-theme="harbour-mist"] .nav {
  /* At-top: fully transparent background, dark text */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Scrolled state — frosted near-white, dark text (unchanged) */
[data-theme="harbour-mist"] .nav.is-scrolled {
  background: rgba(251, 252, 252, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hm-line);
  box-shadow: 0 2px 12px -4px rgba(34, 40, 46, 0.08);
}

/* At-top state: brand/logo is DARK with a soft light halo (no scrim — keeps the
   nav background fully transparent while staying readable over the hero). */
[data-theme="harbour-mist"] .nav:not(.is-scrolled) .nav-brand,
[data-theme="harbour-mist"] .nav:not(.is-scrolled) .nav__logo,
[data-theme="harbour-mist"] .nav:not(.is-scrolled) .nav-brand--monogram {
  color: var(--hm-ink);
  text-shadow: 0 1px 12px rgba(251, 252, 252, 0.6), 0 0 2px rgba(251, 252, 252, 0.55);
}

[data-theme="harbour-mist"] .nav:not(.is-scrolled) .nav-brand--monogram .nav-brand__mark {
  background: rgba(34, 36, 40, 0.08);
  color: var(--hm-ink);
}

/* Scrolled state: brand/logo stays slate ink */
[data-theme="harbour-mist"] .nav.is-scrolled .nav-brand,
[data-theme="harbour-mist"] .nav.is-scrolled .nav__logo {
  color: var(--hm-ink);
}

/* Base nav brand colour (fallback / mobile) — dark slate ink */
[data-theme="harbour-mist"] .nav-brand,
[data-theme="harbour-mist"] .nav__logo {
  color: var(--hm-ink);
  transition: color 0.3s ease;
}

/* At-top nav links: DARK text with a soft light halo (transparent nav bg). */
[data-theme="harbour-mist"] .nav:not(.is-scrolled) .nav-links a,
[data-theme="harbour-mist"] .nav:not(.is-scrolled) .nav__link {
  color: var(--hm-ink);
  text-shadow: 0 1px 12px rgba(251, 252, 252, 0.6), 0 0 2px rgba(251, 252, 252, 0.55);
}

[data-theme="harbour-mist"] .nav:not(.is-scrolled) .nav-links a:hover,
[data-theme="harbour-mist"] .nav:not(.is-scrolled) .nav__link:hover,
[data-theme="harbour-mist"] .nav:not(.is-scrolled) .nav-links a.is-active {
  color: var(--hm-brand);
}

/* Scrolled nav links: slate ink (same as at-top — consistent) */
[data-theme="harbour-mist"] .nav.is-scrolled .nav-links a,
[data-theme="harbour-mist"] .nav.is-scrolled .nav__link {
  color: var(--hm-ink);
}

[data-theme="harbour-mist"] .nav.is-scrolled .nav-links a:hover,
[data-theme="harbour-mist"] .nav.is-scrolled .nav__link:hover,
[data-theme="harbour-mist"] .nav.is-scrolled .nav-links a.is-active {
  color: var(--hm-brand);
}

[data-theme="harbour-mist"] .nav-links a,
[data-theme="harbour-mist"] .nav__link {
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--hm-ink);
  text-decoration: none;
  transition: color 0.15s ease;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Brand wordmark: elegant cursive script (Dancing Script 700) when rendered
   as text (i.e. no customer logo image). This applies only when there is no
   <img> inside .nav-brand — customer sites with an uploaded logo image are
   unaffected because their logo img src overrides the font rendering.
   WCAG AA: var(--hm-ink) #222428 on nav scrim (#F5F7F7) ≈ 13.5:1 (AAA). ✓ */
[data-theme="harbour-mist"] .nav-brand:not(:has(img)),
[data-theme="harbour-mist"] .nav__logo:not(:has(img)) {
  font-family: 'Dancing Script', cursive;
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: 0.01em;
  line-height: 1;
}

/* Poppins UI — nav links 500 weight, title-case ----------------------- */

/* Primary pill CTA in nav — "Book" / "Request a quote" — filled slate always */
[data-theme="harbour-mist"] .nav .btn-primary,
[data-theme="harbour-mist"] .nav-cta {
  background: var(--hm-brand);
  color: #FBFCFC;
  border-radius: var(--hm-radius-xl);
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.55em 1.5em;
  border: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: background 0.18s ease;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

[data-theme="harbour-mist"] .nav .btn-primary:hover,
[data-theme="harbour-mist"] .nav-cta:hover {
  background: var(--hm-brand-dark);
}

/* Phone / Call CTA pill in nav — white background, slate text.
   WCAG AA: #3F5963 on #FBFCFC = ~7.0:1 (AA+). */
[data-theme="harbour-mist"] .nav .nav-call,
[data-theme="harbour-mist"] .nav-call.btn-ghost {
  background: #FBFCFC !important;
  color: var(--hm-brand) !important;
  border: none !important;
  border-radius: var(--hm-radius-xl) !important;
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  padding: 0.55em 1.5em !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: background 0.18s ease, color 0.18s ease !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

[data-theme="harbour-mist"] .nav .nav-call:hover,
[data-theme="harbour-mist"] .nav-call.btn-ghost:hover {
  background: var(--hm-surface-alt) !important;
  color: var(--hm-brand-dark) !important;
}

/* Mobile hamburger legibility */
[data-theme="harbour-mist"] .nav-toggle > summary {
  border-color: var(--hm-line);
  background: var(--hm-surface-alt);
}
[data-theme="harbour-mist"] .nav-toggle > summary::after {
  background: var(--hm-ink);
  box-shadow: 0 -5px 0 var(--hm-ink), 0 5px 0 var(--hm-ink);
}
[data-theme="harbour-mist"] .nav-toggle[open] > summary::before {
  color: var(--hm-ink);
}

/* Mobile panel */
[data-theme="harbour-mist"] .nav-mobile-panel {
  background: #FBFCFC;
  border-color: var(--hm-line);
}
[data-theme="harbour-mist"] .nav-mobile-panel a {
  color: var(--hm-ink);
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  min-height: 44px;
  display: flex;
  align-items: center;
}
[data-theme="harbour-mist"] .nav-mobile-panel a:hover {
  background: rgba(63, 89, 99, 0.08);
  color: var(--hm-brand);
}
[data-theme="harbour-mist"] .nav-mobile-panel .nav-cta-mobile {
  background: var(--hm-brand);
  color: #FBFCFC;
  border-radius: var(--hm-radius-xl);
  font-weight: 600;
}

/* ---- 8. HERO — SMALLER + SVG WAVE BOTTOM DIVIDER ---------- */
/* Full-bleed hero with slate overlay and subtle SVG wave bottom edge.
   The home hero (.hero--split) is pulled UP behind the topbar+nav using a
   negative margin-top equal to --hm-header-h (set by inline JS; fallback 130px
   for the nav alone). Padding-top is increased by the same amount so hero
   content still clears the nav. This keeps topbar+nav in normal flow (sticky
   works) while the hero photo fills the space behind the transparent nav.
   Sub-page .hero--simple heroes do NOT get the pull-up (handled separately).
   Mobile: shallower wave (less amplitude SVG). */
[data-theme="harbour-mist"] .hero,
[data-theme="harbour-mist"] .hero--split {
  position: relative;
  /* No-image fallback: medium slate-mist treatment — refined and airy. */
  background-color: var(--hm-brand-muted);
  background-image:
    linear-gradient(
      175deg,
      #C8D8DC 0%,
      #A4BCC4 30%,
      var(--hm-brand-muted) 60%,
      var(--hm-brand) 100%
    );
  background-size: cover;
  background-position: center;
  color: #FBFCFC;
  /* Pull the hero UP behind the transparent nav/topbar so the nav overlays
     the hero photo, not the white page background.
     --hm-header-h is set by the inline JS below (fallback: 130px for nav alone).
     padding-top is increased by the same amount to push content below the nav. */
  margin-top: calc(-1 * var(--hm-header-h, 130px));
  padding-top: calc(2rem + var(--hm-header-h, 130px));
  padding-bottom: 4.4rem;       /* leaves room for the ~70px wave */
  min-height: 0 !important;     /* override multipage min-height: min(86vh, 780px) */
  /* No clip-path — wave SVG handles the bottom shape */
  clip-path: none;
  overflow: visible;
}

/* Tighten the hero content stack so the section is compact (operator: ~30% smaller). */
[data-theme="harbour-mist"] .hero .hero-grid > *,
[data-theme="harbour-mist"] .hero--split .hero-grid > * {
  margin-top: 0.55rem;
  margin-bottom: 0;
}
[data-theme="harbour-mist"] .hero .hero-lede,
[data-theme="harbour-mist"] .hero--split .hero-lede {
  margin-top: 0.6rem;
}
[data-theme="harbour-mist"] .hero .hero-cta,
[data-theme="harbour-mist"] .hero--split .hero-cta {
  margin-top: 1rem;
}

/* SVG wave divider at hero bottom.
   Implemented as a real inline <svg class="hm-hero-wave"> element (injected by
   generate.ts for harbour-mist only). Using a real element instead of ::after
   background-image guarantees rendering across all Chromium/WebKit/Firefox builds
   without SVG data-URI encoding pitfalls.
   Symmetric arch: edges at y=50, centre peak at y=8 in the 70px viewBox.
   The #FBFCFC fill creates a clear upward arch — page surface "emerging" from hero.
   z-index 2 sits above hero content (z-index 1). */
.hm-hero-wave {
  display: none;  /* hidden by default; shown for harbour-mist only */
}
[data-theme="harbour-mist"] .hm-hero-wave {
  display: block;
  position: absolute;
  bottom: -1px;   /* -1px to seal any sub-pixel gap */
  left: 0;
  width: 100%;
  height: 70px;
  pointer-events: none;
  z-index: 2;
}

/* Keep ::after as a no-op for harbour-mist (real element handles the wave) */
[data-theme="harbour-mist"] .hero::after,
[data-theme="harbour-mist"] .hero--split::after {
  content: "";
  display: none;
}

/* Hero top scrim: light-to-transparent gradient covering the top ~120px.
   Sits BEHIND the nav (z-index 1) and ABOVE the hero image/bg (z-index 0).
   Makes the nav's dark text (#222428) clearly readable at the very top of the page.
   WCAG AA: #222428 on rgba(251,252,252,0.78) ≈ #F5F7F7 → contrast ≈ 13.5:1 (AAA). ✓
   Does NOT obscure the hero image — gradient fades to transparent at ~120px. */
/* Operator: nav background must be COMPLETELY transparent at the top — no scrim.
   The hero top is left untouched; nav-text readability is handled by a soft
   light text-halo on the at-top nav text instead of a background wash. */
[data-theme="harbour-mist"] .hero::before,
[data-theme="harbour-mist"] .hero--split::before {
  display: none !important;
}

/* Full-bleed layout for harbour-mist: suppress the 2-column hero-grid split.
   The hero content (headline + CTAs) sits in a single left-aligned column
   at the lower portion of the hero where the gradient is darkest (best contrast).
   We push the content down via flex column + margin-top: auto so it anchors
   towards the bottom of the hero area, matching the reference layout. */
[data-theme="harbour-mist"] .hero > .container,
[data-theme="harbour-mist"] .hero--split > .container {
  /* Operator: smaller hero. Don't stretch the container to a min-height — let it
     hug its content so the hero height = content + the (reduced) padding. */
  display: block;
  min-height: 0;
}

[data-theme="harbour-mist"] .hero .hero-grid,
[data-theme="harbour-mist"] .hero--split .hero-grid {
  display: block;
  max-width: 620px;
  padding-bottom: 1rem;
}

/* When a hero image is set: full-bleed photo + slate overlay tint (~0.65).
   The overlay keeps white headline text at WCAG AA over any photo.
   Photo on the element; the colour overlay + photo blur live on ::before
   (desktop) so the hero text stays sharp. */
[data-theme="harbour-mist"] body[style*="--hero-bg"] .hero,
[data-theme="harbour-mist"] body[style*="--hero-bg"] .hero--split,
[data-theme="harbour-mist"] .hero[style*="--hero-bg"],
[data-theme="harbour-mist"] .hero--split[style*="--hero-bg"] {
  background-color: var(--hm-brand);
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
}

/* Desktop hero overlay + photo blur on ::before so the hero TEXT stays sharp.
   The tint gradient is the visible colour overlay; backdrop-filter blurs the
   hero's background photo behind it (clarity 1 = no blur, 0 = 22px blur).
   Content (.container) is lifted to z-index:1 so it sits above this overlay.
   Mobile uses the fixed body::before instead (see the max-width:640 block). */
@media (min-width: 641px) {
  [data-theme="harbour-mist"] body[style*="--hero-bg"] .hero--split::before,
  [data-theme="harbour-mist"] .hero--split[style*="--hero-bg"]::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      linear-gradient(to bottom,
        rgba(var(--hm-hero-ink-rgb),  0.16) 0%,
        rgba(var(--hm-hero-tint-rgb), calc(0.80 * var(--hm-hero-strength))) 58%,
        rgba(var(--hm-hero-ink-rgb),  0.62) 100%);
    -webkit-backdrop-filter: blur(calc(22px * (1 - var(--hm-hero-clarity))));
    backdrop-filter: blur(calc(22px * (1 - var(--hm-hero-clarity))));
  }
  [data-theme="harbour-mist"] .hero--split[style*="--hero-bg"] > .container,
  [data-theme="harbour-mist"] body[style*="--hero-bg"] .hero--split > .container {
    position: relative;
    z-index: 1;
  }
}

/* Hero text — light on slate */
[data-theme="harbour-mist"] .hero h1,
[data-theme="harbour-mist"] .hero--split h1 {
  color: #FBFCFC;
  text-shadow: 0 2px 16px rgba(34, 40, 46, 0.28);
  /* Operator: smaller hero — reduced headline so the section is ~30% shorter. */
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.08;
  font-weight: 700;
}

[data-theme="harbour-mist"] .hero .hero-lede,
[data-theme="harbour-mist"] .hero--split .hero-lede {
  color: rgba(251, 252, 252, 0.82);
  text-shadow: none;
  opacity: 1;
}

[data-theme="harbour-mist"] .hero .eyebrow,
[data-theme="harbour-mist"] .hero--split .eyebrow {
  color: rgba(251, 252, 252, 0.72);
  font-family: 'Smooch Sans', ui-sans-serif, system-ui, sans-serif;
}

[data-theme="harbour-mist"] .hero .eyebrow::before,
[data-theme="harbour-mist"] .hero--split .eyebrow::before {
  background: rgba(251, 252, 252, 0.55);
}

/* Hero meta — rating / locality */
[data-theme="harbour-mist"] .hero-meta,
[data-theme="harbour-mist"] .hero-meta span {
  color: rgba(251, 252, 252, 0.80);
}

/* Hero CTA buttons — pill shaped */
[data-theme="harbour-mist"] .hero .btn-primary,
[data-theme="harbour-mist"] .hero--split .btn-primary {
  background: #FBFCFC;
  color: var(--hm-brand);
  border-radius: var(--hm-radius-xl);
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  min-height: 44px;
  padding: 0.7em 1.8em;
  border: none;
  transition: background 0.18s ease, color 0.18s ease;
}

[data-theme="harbour-mist"] .hero .btn-primary:hover,
[data-theme="harbour-mist"] .hero--split .btn-primary:hover {
  background: var(--hm-surface-alt);
}

[data-theme="harbour-mist"] .hero .btn-ghost,
[data-theme="harbour-mist"] .hero--split .btn-ghost {
  background: transparent;
  color: #FBFCFC;
  border: 2px solid rgba(251, 252, 252, 0.55);
  border-radius: var(--hm-radius-xl);
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  min-height: 44px;
  padding: 0.7em 1.8em;
  transition: border-color 0.18s ease, background 0.18s ease;
}

[data-theme="harbour-mist"] .hero .btn-ghost:hover,
[data-theme="harbour-mist"] .hero--split .btn-ghost:hover {
  background: rgba(251, 252, 252, 0.12);
  border-color: rgba(251, 252, 252, 0.80);
}

/* hero-art (floating quote card) on the slate hero */
[data-theme="harbour-mist"] .hero-art {
  background: rgba(63, 89, 99, 0.55);
  border: 1px solid rgba(251, 252, 252, 0.18);
  border-radius: var(--hm-radius);
}

[data-theme="harbour-mist"] .hero-art__quote {
  background: rgba(251, 252, 252, 0.10);
  border-radius: var(--hm-radius-sm);
}

[data-theme="harbour-mist"] .hero-art__text { color: rgba(251, 252, 252, 0.90); }
[data-theme="harbour-mist"] .hero-art__author { color: rgba(251, 252, 252, 0.65); }

/* Multipage/advanced hero background + sizing — shared across home + sub-page.
   The base [data-theme="harbour-mist"] .hero rule above sets min-height:0 !important
   which overrides the multipage default min-height:min(86vh,780px). */
[data-theme="harbour-mist"]:is([data-package="multipage"], [data-package="advanced"]) .hero,
[data-theme="harbour-mist"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple {
  background-color: var(--hm-brand-muted);
  background-image:
    linear-gradient(175deg, #C8D8DC 0%, #A4BCC4 30%, var(--hm-brand-muted) 60%, var(--hm-brand) 100%);
  color: #FBFCFC;
  clip-path: none;
  padding-bottom: 4.2rem;   /* room for the ~70px wave */
  min-height: 0 !important;
}

/* Sub-page simple hero: fixed padding-top (no nav pull-up — the topbar+nav sit
   above the page content for sub-pages, which is fine/expected). */
[data-theme="harbour-mist"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple {
  padding-top: 1.5rem;
  /* Reset the pull-up applied by the base .hero/.hero--split rule above */
  margin-top: 0;
}

/* Home hero (.hero--split) in multipage: apply the nav pull-up so the hero
   extends behind the topbar+nav. Padding-top already set by the base rule
   (calc(2rem + var(--hm-header-h, 130px))). Override to use 1.5rem base
   so the multipage home hero is slightly more compact. */
[data-theme="harbour-mist"]:is([data-package="multipage"], [data-package="advanced"]) .hero--split {
  margin-top: calc(-1 * var(--hm-header-h, 130px));
  padding-top: calc(1.5rem + var(--hm-header-h, 130px));
}

[data-theme="harbour-mist"]:is([data-package="multipage"], [data-package="advanced"]) .hero h1,
[data-theme="harbour-mist"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple h1 {
  color: #FBFCFC;
  text-shadow: 0 2px 12px rgba(34, 40, 46, 0.26);
  /* Operator: smaller hero. This multipage-scoped rule (0,3,0) must carry the
     headline size, or the base multipage .hero h1 (also 0,3,0) wins over the
     general harbour-mist .hero--split h1 (0,2,0). */
  font-size: clamp(1.9rem, 3.2vw, 2.9rem) !important;
  line-height: 1.1 !important;
}

/* Suppress scrim (::before) on sub-page SIMPLE hero only.
   The home .hero--split keeps its scrim for dark-nav-text legibility at top. */
[data-theme="harbour-mist"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple::before {
  display: none !important;
}

/* Mobile hero: shallower wave amplitude */
@media (max-width: 780px) {
  [data-theme="harbour-mist"] .hero,
  [data-theme="harbour-mist"] .hero--split {
    clip-path: none;
    padding-bottom: 4.5rem;
  }
  /* Mobile: shallower wave height on the real SVG element */
  [data-theme="harbour-mist"] .hm-hero-wave {
    height: 50px;
  }
}

/* ---- 9. ROTATED MARQUEE STRIP ----------------------------- */
/* Harbour-mist signature: full-bleed slate band, condensed uppercase text,
   rotated ~-3deg on its own stacking context, scrolling indefinitely.
   Reduced-motion: animation is removed; text still visible, static. */
.hm-marquee {
  display: none;  /* hidden by default; shown for harbour-mist only */
}

[data-theme="harbour-mist"] .hm-marquee {
  display: block;
  background: var(--hm-brand);
  overflow: hidden;
  padding: 1.25rem 0;  /* reduced from 2.5rem — slims the band so it sits cleanly below hero */
  transform: rotate(-3deg);
  transform-origin: center center;
  /* Positive margin-top ensures the marquee starts BELOW the hero wave.
     Previously -0.5rem pulled the band up into the hero by ~50px.
     4rem gives ~64px clearance from the hero's bottom edge to the marquee top. */
  margin-top: 4rem;
  margin-bottom: -0.5rem;
  /* Extend past viewport edges so rotation doesn't leave gaps */
  margin-inline: -5vw;
  width: calc(100% + 10vw);
  position: relative;
  z-index: 1;
  /* Ensure no body overflow-x shows */
}

[data-theme="harbour-mist"] .hm-marquee__track {
  display: flex;
  gap: 0;
  white-space: nowrap;
  animation: hm-marquee-scroll 38s linear infinite;
  font-family: 'Smooch Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.1rem, 2.2vw, 1.8rem);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(251, 252, 252, 0.80);
  will-change: transform;
}

[data-theme="harbour-mist"] .hm-marquee__track span {
  display: inline-block;
  padding-right: 3rem;
}

@keyframes hm-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="harbour-mist"] .hm-marquee__track {
    animation: none;
  }
}

/* ---- 10. BUTTONS (global) --------------------------------- */
[data-theme="harbour-mist"] .btn-primary {
  background: var(--hm-brand);
  color: #FBFCFC;
  border-radius: var(--hm-radius-xl);
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  border: none;
  padding: 0.7em 1.8em;
  min-height: 44px;
  transition: background 0.18s ease;
}

[data-theme="harbour-mist"] .btn-primary:hover {
  background: var(--hm-brand-dark);
}

[data-theme="harbour-mist"] .btn-ghost {
  background: transparent;
  color: var(--hm-brand);
  border: 2px solid var(--hm-brand);
  border-radius: var(--hm-radius-xl);
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  padding: 0.7em 1.8em;
  min-height: 44px;
  transition: background 0.18s ease, color 0.18s ease;
}

[data-theme="harbour-mist"] .btn-ghost:hover {
  background: var(--hm-brand);
  color: #FBFCFC;
}

/* ---- 11. SECTION COLOURS ---------------------------------- */
[data-theme="harbour-mist"] .section-alt,
[data-theme="harbour-mist"] .section-warm {
  background: var(--hm-surface-alt);
  border-color: var(--hm-line);
}

[data-theme="harbour-mist"] .section-title p {
  color: var(--hm-ink-body);
}

/* ---- 11b. .grid-3 container reset for harbour-mist -------- */
/* When .grid-3 contains .hm-services-grid, the outer .grid-3 should not
   impose its own 3-column layout — the inner .hm-services-grid owns the grid. */
[data-theme="harbour-mist"] .grid-3:has(.hm-services-grid) {
  display: block;
  gap: 0;
}

/* Fallback for browsers without :has() — the hm-services-grid is
   a full-width block child, so setting the outer grid to display:contents
   would collapse it. Instead override grid-template-columns so the
   outer .grid-3 single cell spans full width. */
@supports not selector(:has(.hm-services-grid)) {
  [data-theme="harbour-mist"] .grid-3 {
    display: block;
  }
}

/* ---- 12. SERVICE FLIP CARDS (harbour-mist image grid) ----- */
/* 2-column grid (larger cards). Front: service image + CENTRED title overlay.
   Back (hover/focus): summary text + "Learn more" link.
   Flip axis: rotateX (flip-up — card flips upward to reveal back).
   prefers-reduced-motion: crossfade fallback.
   Tab-stops on each card for keyboard users. 44px touch target on back CTA. */

.hm-services-grid {
  display: none;  /* hidden by default; shown only for harbour-mist */
}

[data-theme="harbour-mist"] .hm-services-grid {
  display: grid;
  /* 2-wide columns — larger cards */
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
  margin-top: 2.5rem;
}

/* Mobile stays 1 column */
@media (max-width: 560px) {
  [data-theme="harbour-mist"] .hm-services-grid {
    grid-template-columns: 1fr;
  }
}

/* Flip scene container */
[data-theme="harbour-mist"] .hm-card__flip {
  position: relative;
  border-radius: var(--hm-radius);
  overflow: hidden;
  /* Slightly taller aspect ratio for 2-wide layout */
  aspect-ratio: 16 / 10;
  cursor: pointer;
  /* Perspective for 3D flip */
  perspective: 900px;
  box-shadow: var(--hm-shadow-card);
  outline: none;
}

[data-theme="harbour-mist"] .hm-card__flip:focus-visible {
  outline: 3px solid var(--hm-brand-muted);
  outline-offset: 3px;
}

/* Inner wrapper: flips in 3D — rotateX (flip-up) */
[data-theme="harbour-mist"] .hm-card__flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
  /* flip-up: transform-origin at the bottom edge */
  transform-origin: center bottom;
}

/* Flip trigger: hover OR focus-within — rotateX (flip-up) */
[data-theme="harbour-mist"] .hm-card__flip:hover .hm-card__flip-inner,
[data-theme="harbour-mist"] .hm-card__flip:focus-within .hm-card__flip-inner {
  transform: rotateX(-180deg);
}

/* Front face */
[data-theme="harbour-mist"] .hm-card__front {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--hm-radius);
  overflow: hidden;
}

/* Service image */
[data-theme="harbour-mist"] .hm-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: var(--hm-radius);
}

/* Placeholder when no image — very light slate-mist panel, airy and elegant.
   Uses near-white tones with a gentle slate tint so the page reads light.
   Darkest stop is #9CAEB5 (brand-mist) — still well above mid-brightness.
   The title label uses a bottom gradient for legibility (see .hm-card__title-label).
   Contrast: dark ink #222428 on #C8D5D9 = 8.9:1 (AAA). We keep the label
   white (#FBFCFC) and rely on the bottom gradient strip for contrast.
   White on darkest stop #9CAEB5 = 3.7:1 (AA large text, font-size 1.05rem). */
[data-theme="harbour-mist"] .hm-card__img--placeholder {
  width: 100%;
  height: 100%;
  border-radius: var(--hm-radius);
  background-image:
    radial-gradient(ellipse at 22% 28%, rgba(251, 252, 252, 0.30) 0%, transparent 50%),
    radial-gradient(ellipse at 78% 72%, rgba(63, 89, 99, 0.10) 0%, transparent 40%),
    linear-gradient(145deg, #D6E3E8 0%, #C0D2D9 45%, #A8BFC7 80%, var(--hm-brand-mist) 100%);
}

/* Light-haze overlay on the front image — a soft airy translucent veil
   consistent with the harbour-mist light aesthetic (frosted/misty look).
   Replaces the prior dark slate wash so photos read with a fresh, bright
   feel. The label's own dark radial vignette (see .hm-card__title-label)
   handles text contrast independently, so white label text stays AA-legible
   over any photo underneath the haze.
   Contrast check (worst-case mid-tone photo, L≈0.18):
     Vignette centre rgba(34,36,40,0.55) blended → effective L ≈ 0.091
     White #FBFCFC (L=0.980) on effective L=0.091 → ratio ≈ 7.3:1  (AA ✓)
   When no image is present (placeholder), this overlay is transparent
   because the placeholder already uses the mist gradient directly. */
[data-theme="harbour-mist"] .hm-card__overlay {
  position: absolute;
  inset: 0;
  /* Soft top-to-bottom light haze: slightly denser at top, airier at base.
     Near-white surface tone (#FBFCFC) so the overlay reads mist-like. */
  background: linear-gradient(
    to bottom,
    rgba(251, 252, 252, 0.32) 0%,
    rgba(251, 252, 252, 0.14) 100%
  );
  border-radius: var(--hm-radius);
}

/* When the card uses the placeholder (no image), suppress the extra overlay
   so the mist gradient reads on its own — the overlay would just darken it. */
[data-theme="harbour-mist"] .hm-card__front:has(.hm-card__img--placeholder) .hm-card__overlay {
  background: transparent;
}

/* :has() fallback — browsers without :has() get slightly different (overlay stays), no content breaks */

/* Title label on front card — CENTRED both axes (requested).
   Absolute positioned in the centre of the card (top/left/right/bottom: 0,
   display:flex, align-items:center, justify-content:center).
   Background: a centred dark radial vignette behind the text — unchanged
   from the prior dark-overlay version so white text stays WCAG AA over
   the new light-haze overlay. The vignette provides its own independent
   contrast regardless of whether the overlay above it is light or dark.
   Contrast: #FBFCFC on vignette-centre L≈0.091 → 7.3:1 (AA ✓, AAA for
   large text). text-shadow provides additional depth. */
[data-theme="harbour-mist"] .hm-card__title-label {
  position: absolute;
  inset: 0;   /* cover the full card face */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.2rem;
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #FBFCFC;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  /* Dark radial vignette keeps white text AA-legible over the light-haze photo */
  background: radial-gradient(ellipse at 50% 50%, rgba(34, 36, 40, 0.55) 0%, rgba(34, 36, 40, 0.20) 60%, transparent 100%);
  text-shadow: 0 2px 12px rgba(20, 24, 28, 0.70);
  border-radius: var(--hm-radius);
  /* Not at bottom: inset 0 covers full card */
}

/* Back face — starts at rotateX(180deg) (below the card plane), flips into view */
[data-theme="harbour-mist"] .hm-card__back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Flipped 180deg around X axis (flip-up): back starts "underneath" */
  transform: rotateX(180deg);
  transform-origin: center bottom;
  background: var(--hm-brand);
  border-radius: var(--hm-radius);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 1.4rem 1.6rem;
  gap: 0.6rem;
  /* Item 2: accommodate longer back-face copy — scroll if it overflows */
  overflow-y: auto;
}

[data-theme="harbour-mist"] .hm-card__back-title {
  font-family: 'Quattrocento', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #FBFCFC;
  line-height: 1.2;
  margin: 0;
}

[data-theme="harbour-mist"] .hm-card__back-summary {
  font-family: 'Epilogue', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9rem;
  color: rgba(251, 252, 252, 0.80);
  line-height: 1.5;
  margin: 0;
  max-width: 100%;
}

[data-theme="harbour-mist"] .hm-card__learn {
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(251, 252, 252, 0.90);
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color 0.15s ease;
}

[data-theme="harbour-mist"] .hm-card__learn:hover {
  color: #FBFCFC;
}

/* Reduced-motion: crossfade instead of rotateX (flip-up) */
@media (prefers-reduced-motion: reduce) {
  [data-theme="harbour-mist"] .hm-card__flip-inner {
    transition: none;
    transform: none !important;
    transform-origin: unset;
  }
  /* Show back via opacity instead of rotateX */
  [data-theme="harbour-mist"] .hm-card__back {
    transform: none;
    transform-origin: unset;
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  [data-theme="harbour-mist"] .hm-card__flip:hover .hm-card__back,
  [data-theme="harbour-mist"] .hm-card__flip:focus-within .hm-card__back {
    opacity: 1;
  }
  [data-theme="harbour-mist"] .hm-card__front {
    transform: none;
    transform-origin: unset;
    opacity: 1;
    transition: opacity 0.25s ease;
  }
  [data-theme="harbour-mist"] .hm-card__flip:hover .hm-card__front,
  [data-theme="harbour-mist"] .hm-card__flip:focus-within .hm-card__front {
    opacity: 0;
  }
}

/* ---- 12b. SERVICE CARD GROW-IN REVEAL ANIMATION (Item 3) --
   The outer .hm-card__flip wrapper receives the .reveal class from generate.ts.
   It grows from 0.82 scale to full size as it scrolls into view.
   The inner .hm-card__flip-inner handles the rotateX flip — these are
   separate elements so the two transforms don't conflict.
   transform-origin: center so scale is centred on the card.
   Stagger: data-delay attribute drives transition-delay per card. */
[data-theme="harbour-mist"] .hm-card__flip.reveal {
  opacity: 0;
  transform: scale(0.82);
  transform-origin: center center;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="harbour-mist"] .hm-card__flip.reveal.is-in {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays — left-to-right per card (data-delay 0,1,2,3) */
[data-theme="harbour-mist"] .hm-card__flip.reveal[data-delay="0"] { transition-delay: 0ms; }
[data-theme="harbour-mist"] .hm-card__flip.reveal[data-delay="1"] { transition-delay: 100ms; }
[data-theme="harbour-mist"] .hm-card__flip.reveal[data-delay="2"] { transition-delay: 200ms; }
[data-theme="harbour-mist"] .hm-card__flip.reveal[data-delay="3"] { transition-delay: 300ms; }

/* Reduced-motion: show cards immediately at full size, no transform */
@media (prefers-reduced-motion: reduce) {
  [data-theme="harbour-mist"] .hm-card__flip.reveal {
    opacity: 1 !important;
    transform: scale(1) !important;
    transition: none !important;
  }
}

/* ---- 13. TRUST BAR ---------------------------------------- */
[data-theme="harbour-mist"] .trust-bar {
  background: var(--hm-surface-alt);
  border-block: 1px solid var(--hm-line);
}

[data-theme="harbour-mist"] .trust-bar__item {
  color: var(--hm-ink-soft);
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.88rem;
}

[data-theme="harbour-mist"] .trust-bar__item strong {
  color: var(--hm-brand);
}

[data-theme="harbour-mist"] .trust-bar__stars {
  color: var(--hm-brand-muted);
}

/* ---- 14. CARDS -------------------------------------------- */
[data-theme="harbour-mist"] .card,
[data-theme="harbour-mist"] .card-service,
[data-theme="harbour-mist"] .value,
[data-theme="harbour-mist"] .faq details,
[data-theme="harbour-mist"] .faq-list details {
  background: #FBFCFC;
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-radius);
  box-shadow: var(--hm-shadow-sm);
}

[data-theme="harbour-mist"] .card:hover {
  box-shadow: var(--hm-shadow-card);
}

[data-theme="harbour-mist"] .card-service h3,
[data-theme="harbour-mist"] .card h3 {
  color: var(--hm-ink);
  font-family: 'Quattrocento', Georgia, serif;
}

[data-theme="harbour-mist"] .card-service p,
[data-theme="harbour-mist"] .card p {
  color: var(--hm-ink-body);
}

/* ---- 15. VALUE ICONS ------------------------------------- */
[data-theme="harbour-mist"] .value__glyph {
  background: rgba(63, 89, 99, 0.10);
  color: var(--hm-brand);
  border-radius: var(--hm-radius);
}

[data-theme="harbour-mist"] .value h3 {
  color: var(--hm-ink);
  font-family: 'Quattrocento', Georgia, serif;
}

[data-theme="harbour-mist"] .value p {
  color: var(--hm-ink-body);
}

/* ---- 16. STATS BAND --------------------------------------- */
[data-theme="harbour-mist"] .stat-row,
[data-theme="harbour-mist"] .stats-band {
  background: var(--hm-brand);
  box-shadow: var(--hm-shadow-float);
}

[data-theme="harbour-mist"] .stat-row__value,
[data-theme="harbour-mist"] .stats-band__value {
  font-family: 'Smooch Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 600;
  color: #FBFCFC;
  line-height: 1;
  letter-spacing: -0.02em;
}

[data-theme="harbour-mist"] .stat-row__label,
[data-theme="harbour-mist"] .stats-band__label {
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.85rem;
  color: rgba(251, 252, 252, 0.72);
}

/* ---- 17. TESTIMONIALS (static — no JS carousel) ----------- */
[data-theme="harbour-mist"] .testimonial {
  background: #FBFCFC;
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-radius);
  box-shadow: var(--hm-shadow-sm);
}

[data-theme="harbour-mist"] .testimonial__text {
  color: var(--hm-ink);
  font-family: 'Quattrocento', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.55;
}

[data-theme="harbour-mist"] .testimonial__author {
  color: var(--hm-ink-soft);
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
}

[data-theme="harbour-mist"] .testimonial__stars {
  color: var(--hm-brand-muted);
}

/* ---- 18. FAQ --------------------------------------------- */
[data-theme="harbour-mist"] .faq details summary {
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  color: var(--hm-ink);
  min-height: 44px;
}

[data-theme="harbour-mist"] .faq details[open] summary {
  color: var(--hm-brand);
}

[data-theme="harbour-mist"] .faq details p {
  color: var(--hm-ink-body);
}

/* Item 5: FAQ box resting shadow + hover pop.
   Resting: slight shadow so boxes have gentle presence.
   Hover: lift + stronger shadow. Transition tasteful (150ms).
   WCAG: no color change; purely decorative lift. */
[data-theme="harbour-mist"] .faq details,
[data-theme="harbour-mist"] .faq-list details {
  box-shadow: 0 2px 10px -4px rgba(34, 40, 46, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

[data-theme="harbour-mist"] .faq details:hover,
[data-theme="harbour-mist"] .faq-list details:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(34, 40, 46, 0.20);
}

/* FAQ scroll-reveal: each question rises + fades up from the bottom as it
   enters the viewport (reveal.js adds .is-in; markup carries data-from="up-lg"
   for a larger pop + a staggered data-delay). Override the snappy 0.15s hover
   transition so the ENTRANCE animates opacity + transform smoothly; the higher
   specificity (details.reveal) wins for the resting/entrance state, while the
   :hover rule above still governs the hover lift. */
[data-theme="harbour-mist"] .faq details.reveal {
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), box-shadow 0.18s ease;
}

/* ---- 19. FEATURE SPLIT (about section) ------------------- */
/* No-image fallback: very light slate-mist panel, consistent with the hero
   and service-card no-image treatment. Airy and elegant.
   When a real feature image IS present (.feature-split__art--image), the
   `background-image` from the inline style replaces our gradient — a tint
   overlay from renderFeatureArtClass picks up naturally. */
[data-theme="harbour-mist"] .feature-split__art {
  border-radius: var(--hm-radius);
  background-image:
    radial-gradient(ellipse at 25% 35%, rgba(251, 252, 252, 0.28) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 72%, rgba(63, 89, 99, 0.12) 0%, transparent 42%),
    linear-gradient(145deg, #D2E1E6 0%, #B8CDD4 45%, #A0B9C2 80%, var(--hm-brand-mist) 100%);
}

[data-theme="harbour-mist"] .hr-mini {
  border-color: var(--hm-line);
  opacity: 1;
}

/* ---- 19b. ABOUT SECTION DIRECTIONAL REVEAL (Item 4) -------
   Text block slides in from the left, image panel from the right.
   Both elements already carry the .reveal class in the templates.
   The IntersectionObserver in reveal.js adds .is-in when they enter view.
   These rules override the default .reveal fade-up for harbour-mist only. */
[data-theme="harbour-mist"] .feature-split__body.reveal {
  opacity: 0;
  transform: translateX(-44px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="harbour-mist"] .feature-split__body.reveal.is-in {
  opacity: 1;
  transform: translateX(0);
}

[data-theme="harbour-mist"] .feature-split__art.reveal {
  opacity: 0;
  transform: translateX(44px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="harbour-mist"] .feature-split__art.reveal.is-in {
  opacity: 1;
  transform: translateX(0);
}

/* Reduced-motion: show immediately, no directional slide */
@media (prefers-reduced-motion: reduce) {
  [data-theme="harbour-mist"] .feature-split__body.reveal,
  [data-theme="harbour-mist"] .feature-split__art.reveal {
    opacity: 1 !important;
    transform: translateX(0) !important;
    transition: none !important;
  }
}

/* ---- 20. CONTACT CARD ------------------------------------ */
[data-theme="harbour-mist"] .contact-card {
  background: var(--hm-surface-alt);
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-radius);
  box-shadow: var(--hm-shadow-card);
}

[data-theme="harbour-mist"] .contact-form input,
[data-theme="harbour-mist"] .contact-form textarea,
[data-theme="harbour-mist"] .contact-form select {
  background: #FBFCFC;
  border: 1px solid var(--hm-line);
  border-radius: 10px;
  color: var(--hm-ink);
  font-size: 1rem;
}

[data-theme="harbour-mist"] .contact-form input:focus,
[data-theme="harbour-mist"] .contact-form textarea:focus {
  border-color: var(--hm-brand-muted);
  outline: 2px solid rgba(63, 89, 99, 0.25);
  outline-offset: 0;
}

[data-theme="harbour-mist"] .contact-form label {
  color: var(--hm-ink-soft);
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
}

/* ---- 21. PROOF / RATING STRIP ---------------------------- */
[data-theme="harbour-mist"] .proof-strip {
  background: var(--hm-surface-alt);
  border-color: var(--hm-line);
}

[data-theme="harbour-mist"] .proof-row { color: var(--hm-ink-soft); }
[data-theme="harbour-mist"] .proof-row strong { color: var(--hm-brand); }

/* ---- 22. FOOTER ------------------------------------------ */
[data-theme="harbour-mist"] .footer,
[data-theme="harbour-mist"] .site-footer,
[data-theme="harbour-mist"] .footer-warm {
  background: var(--hm-brand);
  color: rgba(251, 252, 252, 0.78);
  border-top: none;
}

[data-theme="harbour-mist"] .footer-brand__name,
[data-theme="harbour-mist"] .footer h3,
[data-theme="harbour-mist"] .footer-warm h3,
[data-theme="harbour-mist"] .site-footer h3,
[data-theme="harbour-mist"] .footer .nav__logo,
[data-theme="harbour-mist"] .footer-warm .nav__logo {
  color: #FBFCFC;
  font-family: 'Quattrocento', Georgia, serif;
}

[data-theme="harbour-mist"] .footer h4,
[data-theme="harbour-mist"] .footer-warm h4,
[data-theme="harbour-mist"] .site-footer h4 {
  color: rgba(251, 252, 252, 0.90);
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

[data-theme="harbour-mist"] .footer p,
[data-theme="harbour-mist"] .footer-warm p,
[data-theme="harbour-mist"] .site-footer p {
  color: rgba(251, 252, 252, 0.72);
}

[data-theme="harbour-mist"] .footer a,
[data-theme="harbour-mist"] .footer-warm a,
[data-theme="harbour-mist"] .site-footer a {
  color: rgba(251, 252, 252, 0.78);
  text-decoration: none;
  transition: color 0.15s ease;
}

[data-theme="harbour-mist"] .footer a:hover,
[data-theme="harbour-mist"] .footer-warm a:hover,
[data-theme="harbour-mist"] .site-footer a:hover {
  color: #FBFCFC;
  text-decoration: underline;
}

[data-theme="harbour-mist"] .footer-nap,
[data-theme="harbour-mist"] .footer__nap {
  color: rgba(251, 252, 252, 0.72);
}

[data-theme="harbour-mist"] .footer-bottom,
[data-theme="harbour-mist"] .footer__bottom {
  border-top: 1px solid rgba(251, 252, 252, 0.12);
  color: rgba(251, 252, 252, 0.45);
  font-size: 0.78rem;
}

/* ---- 23. STICKY CALL BAR --------------------------------- */
[data-theme="harbour-mist"] .sticky-mobile-call-bar {
  background: var(--hm-brand-dark);
}

[data-theme="harbour-mist"] .sticky-call {
  background: var(--hm-brand);
  color: #FBFCFC;
  border-radius: var(--hm-radius-xl);
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  min-height: 44px;
}

[data-theme="harbour-mist"] .sticky-call:hover {
  background: var(--hm-brand-dark);
}

/* ---- 24. SECTION TITLE HEADINGS — CENTRED for services ---- */
[data-theme="harbour-mist"] .section-title h2 {
  color: var(--hm-ink);
}

[data-theme="harbour-mist"] .section-title p {
  color: var(--hm-ink-body);
}

/* Services section: eyebrow + heading centred — Item 1 */
[data-theme="harbour-mist"] #services .section-title,
[data-theme="harbour-mist"] #services .section-title--center {
  text-align: center;
  margin-inline: auto;
  /* If used as flex container, centre children on cross axis */
  align-items: center;
}

/* Eyebrow is inline-flex; justify-content centres the tick + text within it.
   text-align: center on the parent already centres it as a block. */
[data-theme="harbour-mist"] #services .section-title .eyebrow {
  justify-content: center;
}

/* h2 and p inside services section-title: block-level, inherit text-align:center */
[data-theme="harbour-mist"] #services .section-title h2,
[data-theme="harbour-mist"] #services .section-title p {
  text-align: center;
  margin-inline: auto;
}

/* ---- 24b. CTA BAND — near-white text + near-white button ---- */
/* Band heading and subtext: near-white (#FBFCFC) on slate band (#3F5963).
   WCAG AA: #FBFCFC on #3F5963 = 5.9:1 (AA+). */
[data-theme="harbour-mist"] .cta-band {
  background: var(--hm-brand);
}

[data-theme="harbour-mist"] .cta-band h2 {
  color: #FBFCFC;
}

[data-theme="harbour-mist"] .cta-band p {
  color: rgba(251, 252, 252, 0.82);
}

/* Primary Book/Request CTA in the band: near-white bg, slate text.
   WCAG AA: #3F5963 on #FBFCFC ≈ 7.0:1 (AA+). */
[data-theme="harbour-mist"] .cta-band .btn-primary {
  background: #FBFCFC;
  color: var(--hm-brand);
  border-radius: var(--hm-radius-xl);
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  border: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background 0.18s ease, color 0.18s ease;
}

[data-theme="harbour-mist"] .cta-band .btn-primary:hover {
  background: var(--hm-surface-alt);
  color: var(--hm-brand-dark);
}

[data-theme="harbour-mist"] .cta-band .btn-ghost {
  border-color: rgba(251, 252, 252, 0.45);
  color: #FBFCFC;
}

[data-theme="harbour-mist"] .cta-band .btn-ghost:hover {
  border-color: #FBFCFC;
  background: rgba(251, 252, 252, 0.10);
}

/* ---- 25. REVEAL ANIMATIONS + REDUCED MOTION -------------- */
[data-theme="harbour-mist"] [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-theme="harbour-mist"] [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-theme="harbour-mist"] [data-reveal][data-delay="1"] { transition-delay: 80ms; }
[data-theme="harbour-mist"] [data-reveal][data-delay="2"] { transition-delay: 160ms; }
[data-theme="harbour-mist"] [data-reveal][data-delay="3"] { transition-delay: 240ms; }
[data-theme="harbour-mist"] [data-reveal][data-delay="4"] { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  [data-theme="harbour-mist"] [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-theme="harbour-mist"] .hm-marquee__track {
    animation: none !important;
  }
}

/* ---- 26. INSTAGRAM FEED ---------------------------------- */
[data-theme="harbour-mist"] .ig-feed__tile {
  border-radius: var(--hm-radius);
  overflow: hidden;
}

[data-theme="harbour-mist"] .ig-feed__tile:hover img {
  transform: scale(1.04);
}

[data-theme="harbour-mist"] .ig-feed__title {
  font-family: 'Quattrocento', Georgia, serif;
}

/* ---- 27. FOOTER SCROLL-REVEAL (fixed-behind-content) ------- */
/* The footer is positioned FIXED at the bottom of the viewport, behind the
   page content (z-index below the main content wrapper). The main content
   block gets a bottom-margin equal to the footer height so the layout still
   has the correct total scroll height — the footer is only "revealed" once
   the user has scrolled all the way to the bottom.

   Implementation:
   - footer: position:fixed; bottom:0; left:0; right:0; z-index:0
   - .hm-page-content (a wrapper div added by generate.ts around the main
     content, ABOVE the footer): position:relative; z-index:1; background:
     var(--hm-surface) so it covers the fixed footer when not at bottom.
     margin-bottom: equal to footer's estimated height.

   Mobile gate: only applies at ≥ 560px (--hm-footer-reveal-on). On mobile
   the fixed approach can be fragile with viewport address bars and bouncing
   scroll, so below the breakpoint the footer reverts to normal in-flow.

   Footer height: ~360px desktop (content), ~280px estimated minimum.
   We use CSS custom property --hm-footer-h for responsive sizing.

   WCAG: the fixed footer is still in the DOM, accessible by tab order and
   screen readers. Only the visual presentation changes. */

/* Footer reveal is DESKTOP/TABLET only (>=641px). On mobile the footer is a
   normal in-flow footer (operator: mobile = pinned hero only, no footer reveal). */
@media (min-width: 641px) {
  [data-theme="harbour-mist"] .footer,
  [data-theme="harbour-mist"] .site-footer,
  [data-theme="harbour-mist"] .footer-warm {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;   /* behind .hm-page-content (z-index:1) */
    /* Override any border-top that creates a gap */
    border-top: none;
  }

  /* The page-content wrapper (injected by generate.ts for harbour-mist).
     Sits above the fixed footer. Solid surface background hides the footer
     until the user has scrolled enough to expose it.
     bottom-margin = footer estimated height so scroll stops at correct position. */
  [data-theme="harbour-mist"] .hm-page-content {
    position: relative;
    z-index: 1;
    background: var(--hm-surface);
    /* Always cover the full viewport so SHORT pages (e.g. the services/about/
       contact sub-pages) still hide the fixed footer behind the page surface.
       Without this, a page shorter than the viewport leaves empty space below
       the content where the fixed footer shows through at the top. */
    min-height: 100vh;
    /* Estimated footer height — should be ~360px.
       CSS can't know the exact rendered height without JS, so we use a
       generous estimate. If the footer is taller on some builds, the gap
       is invisible (fixed footer is still below). A JS snippet in the
       template adjusts this at runtime for accuracy. */
    margin-bottom: var(--hm-footer-margin, 360px);
  }
}

/* ---- Mobile (≤640px): pinned hero photo + short hero + compact footer ---
   APPROACH (option 3): the home hero is capped at 44svh so it is always
   shorter than (viewportH − footerH). The transparent hero sits entirely
   ABOVE the fixed footer and never reveals it; the opaque .hm-page-content
   wrapper (which starts AFTER the hero in the DOM on index.html) covers the
   footer once the user scrolls past it.

   Geometry proof (iPhone SE, 375×667 — tightest case):
     hero cap   = 44svh ≈ 293px
     footer cap ≈ 310px  (brand row ~70px + cols row ~115px + bottom ~40px + 28px pad)
     293 + 310 = 603 < 667 ✓ (64px of clear space at scroll 0)

   Implementation:
   - body::before: fixed pseudo shows the hero photo at exactly --hm-hero-h
     (set by setHeroH() JS). Covers only the hero region, not the footer.
   - .hero--split: transparent + position:relative so its content renders
     above the fixed photo layer.
   - .hero--split height capped at 44svh (svh fallback to 44vh for older iOS).
   - Content inside the hero scaled down so everything fits — verified not clipped.
   - Footer grid: 3-column on mobile, footer-brand spans all 3, footer-cols each
     get 1 column so they fit in ONE row and the footer is compact (~280-320px).
   - Footer CTA band: centred, single column.

   Desktop is UNCHANGED — all rules below are scoped to (max-width: 640px).
   Other themes are UNAFFECTED — all selectors include [data-theme="harbour-mist"].
   WCAG: colour contrast unchanged; prefers-reduced-motion respected (the pinned
   photo is static, not animated). */
@media (max-width: 640px) {
  /* MOBILE: pin the hero photo only. The footer is a normal in-flow footer here
     (the footer reveal is DESKTOP-only — see the min-width:641px gate above).
     The hero photo is a body-root fixed ::before at z-index:0 (the iOS-reliable
     form of position:fixed). The hero is transparent so the photo shows through;
     the page-content wrapper is transparent but kept above the photo (z-index:1)
     so its opaque sections scroll over the pinned photo; the footer sits above
     the photo too and scrolls in normally at the bottom. With no fixed footer on
     mobile there is nothing to clash with the pinned hero. */

  /* Fixed hero photo at the body root. Oversized by 32px each side so the
     clarity blur (filter) doesn't fade to transparent at the viewport edges. */
  [data-theme="harbour-mist"] body[style*="--hero-bg"]::before {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    top: -32px !important;
    left: -32px !important;
    width: calc(100vw + 64px) !important;
    height: calc(100vh + 64px) !important;
    height: calc(100svh + 64px) !important;
    background-image:
      linear-gradient(to bottom,
        rgba(var(--hm-hero-ink-rgb),  0.18) 0%,
        rgba(var(--hm-hero-tint-rgb), calc(0.82 * var(--hm-hero-strength))) 58%,
        rgba(var(--hm-hero-ink-rgb),  0.66) 100%),
      var(--hero-bg) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    -webkit-filter: blur(calc(22px * (1 - var(--hm-hero-clarity)))) !important;
    filter: blur(calc(22px * (1 - var(--hm-hero-clarity)))) !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }
  /* Hero transparent so the fixed photo shows through. */
  [data-theme="harbour-mist"] body[style*="--hero-bg"] .hero--split,
  [data-theme="harbour-mist"] .hero--split[style*="--hero-bg"] {
    background-image: none !important;
    background-color: transparent !important;
  }
  /* No-photo heroes keep their slate gradient and just scroll. */
  [data-theme="harbour-mist"] .hero--split:not([style*="--hero-bg"]) {
    background-attachment: scroll !important;
  }

  /* Page wrapper: transparent ONLY over the hero (so the pinned photo shows
     through there), then opaque surface from the hero's bottom edge downward.
     The opaque lower portion covers the fixed photo as you scroll AND fills the
     gap between the hero's white wave and the next section (the rotated marquee
     has a 4rem top margin) — without it that gap leaks the photo and the white
     wave looks detached/floating. --hm-hero-h is measured by setHeroH() in the
     template JS; 60vh is a sane fallback before/without JS. */
  [data-theme="harbour-mist"] .hm-page-content {
    position: relative;
    z-index: 1;
    background: linear-gradient(
      to bottom,
      transparent 0,
      transparent var(--hm-hero-h, 60vh),
      var(--hm-surface) var(--hm-hero-h, 60vh)
    );
  }
  /* Footer: normal in-flow, above the fixed photo. */
  [data-theme="harbour-mist"] .footer,
  [data-theme="harbour-mist"] .site-footer,
  [data-theme="harbour-mist"] .footer-warm {
    position: relative;
    z-index: 1;
  }

  /* CTA band: stack to one column and centre the text + button. */
  [data-theme="harbour-mist"] .cta-band {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  [data-theme="harbour-mist"] .cta-band h2,
  [data-theme="harbour-mist"] .cta-band p {
    margin-left: auto;
    margin-right: auto;
  }
  [data-theme="harbour-mist"] .cta-band__actions {
    display: flex;
    justify-content: center;
    width: 100%;
  }
}

/* ---- end harbour-mist ------------------------------------- */
/* ===== BEGIN GENERATED THEME CLONES (clone-harbour-theme.mjs) =====
   Generated siblings of harbour-mist. Re-run the script to regenerate;
   do NOT hand-edit between these markers. ===== */

/* ============================================================
   THEME: amber-coast
   Warm light-brown (bronze) for home services and cleaning.
   Palette: bronze #685E4F brand, #FBF7F3 warm-white surface,
   #2B2420 warm ink. Cormorant Garamond serif headings,
   Manrope body/UI, Bebas Neue display/eyebrows, Sacramento script wordmark.
   Signature: DOWNWARD hero wave (valley), straight (un-rotated) marquee.
   ============================================================ */

/* ---- 1. Design tokens ------------------------------------- */
[data-theme="amber-coast"] {
  /* Brand palette */
  --hm-brand:          #685E4F;   /* dusty slate-blue: nav bar, buttons, footer */
  --hm-brand-dark:     #534B3E;   /* hover / deeper shade */
  --hm-brand-muted:    #968B79;   /* lighter slate accent */
  --hm-brand-mist:     #C4BAA8;   /* lightest slate — borders, muted text */

  /* Ink */
  --hm-ink:            #2B2420;   /* slightly slate-tinted dark — headings */
  --hm-ink-body:       #7A6E66;   /* body text (slate-tinted grey) */
  --hm-ink-soft:       #5C534C;   /* secondary text */

  /* Surfaces */
  --hm-surface:        #FBF7F3;   /* page surface — NOT pure white */
  --hm-surface-alt:    #F4ECE4;   /* cool light grey — card / section-alt bg */
  --hm-surface-deep:   #685E4F;   /* dark slate — footer, overlays */

  /* Lines / borders */
  --hm-line:           #E7DCD2;
  --hm-line-alpha:     rgba(104, 94, 79, 0.10);

  /* Shadow tokens */
  --hm-shadow-sm:      0 2px 8px -2px rgba(34, 40, 46, 0.09);
  --hm-shadow-card:    0 4px 20px -6px rgba(34, 40, 46, 0.14);
  --hm-shadow-float:   0 40px 120px -40px rgba(34, 40, 46, 0.23);

  /* Radius */
  --hm-radius-sm:      10px;
  --hm-radius:         20px;      /* cards, rectangular buttons */
  --hm-radius-xl:      200px;     /* pill CTAs, eyebrow chips, rating pills */

  /* Container */
  --hm-container:      1140px;

  /* Map to shared tokens so base rules still fire */
  --color-primary:     #685E4F;
  --color-accent:      #685E4F;
  --color-ink:         #2B2420;
  --color-ink-soft:    #7A6E66;
  --color-ink-faint:   #C4BAA8;
  --color-surface:     #FBF7F3;
  --color-surface-2:   #F4ECE4;
  --color-surface-warm: #F4ECE4;
  --color-line:        rgba(104, 94, 79, 0.10);
  --color-line-strong: rgba(104, 94, 79, 0.18);

  /* Font stack tokens */
  --font-heading: '"Cormorant Garamond", Georgia, serif';
  --font-body:    '"Manrope", ui-sans-serif, system-ui, sans-serif';

  /* Geometry */
  --radius-sm:  10px;
  --radius:     20px;
  --radius-lg:  20px;
  --radius-xl:  200px;

  /* Elevation */
  --shadow-sm: var(--hm-shadow-sm);
  --shadow-md: var(--hm-shadow-card);
  --shadow-lg: var(--hm-shadow-float);

  /* Button tokens */
  --btn-primary-bg: var(--hm-brand);
  --btn-primary-fg: #FBF7F3;
  --menu-bg: var(--hm-brand);

  /* Hero photo overlay (tint/haze). Driven by the Brand-colours "Hero" control.
     --hm-hero-tint-rgb : the tint COLOUR (default = brand). Operator-overridable.
     --hm-hero-ink-rgb  : neutral dark used at top/bottom for text legibility.
     --hm-hero-strength : brand-hue intensity 0..1 (0 = no colour on the hero).
     --hm-hero-clarity  : photo sharpness 0..1 (1 = completely clear/sharp,
                          0 = completely blurred). Blur = 22px * (1 - clarity).
     Tint alpha = base * strength; ink alpha = base (legibility, constant). */
  --hm-hero-tint-rgb: 104, 94, 79;
  --hm-hero-ink-rgb:  43, 36, 32;
  --hm-hero-strength: 0.8;
  --hm-hero-clarity:  1;
}

/* ---- 2. Clip overflow (marquee only — NOT html/body, which would break sticky nav) */
/* overflow-x: clip does NOT create a scroll container, so position:sticky on .nav keeps working.
   The marquee's own container clips its horizontal overflow independently (see section 9). */
[data-theme="amber-coast"],
[data-theme="amber-coast"] body {
  overflow-x: clip;
}

/* ---- 3. Body --------------------------------------------- */
[data-theme="amber-coast"] body {
  background: var(--hm-surface);
  color: var(--hm-ink-body);
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  /* No overflow-x here — clip on <html> is sufficient and does not block sticky */
}

[data-theme="amber-coast"] p {
  color: var(--hm-ink-body);
  line-height: 1.6;
  max-width: 68ch;
}

/* ---- 4. Headings — Quattrocento serif --------------------- */
[data-theme="amber-coast"] h1,
[data-theme="amber-coast"] h2,
[data-theme="amber-coast"] h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--hm-ink);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

[data-theme="amber-coast"] h1 {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

[data-theme="amber-coast"] h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.9rem);
  font-weight: 700;
}

[data-theme="amber-coast"] h3 {
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  font-weight: 700;
}

[data-theme="amber-coast"] h4 {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--hm-ink);
}

/* Display / eyebrow font — Smooch Sans condensed */
[data-theme="amber-coast"] h5 {
  font-family: 'Bebas Neue', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hm-brand-muted);
}

[data-theme="amber-coast"] h6 {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--hm-ink-soft);
}

/* ---- 5. Section eyebrow — Smooch Sans condensed uppercase -- */
[data-theme="amber-coast"] .eyebrow {
  font-family: 'Bebas Neue', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hm-brand-muted);
  background: transparent;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.9rem;
}

/* Tick mark before eyebrow */
[data-theme="amber-coast"] .eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 2px;
  background: var(--hm-brand-muted);
  flex-shrink: 0;
}

/* ---- 6. TOP CONTACT BAR ----------------------------------- */
/* Reference layout: full-width #685E4F slate strip.
   LEFT: phone number (Call or text) + location pin + locality.
   RIGHT: small navigation links (About Us · Work With Us · Privacy & Terms).
   Poppins 500, 0.78rem, near-white text. */
.hm-topbar {
  display: none;   /* hidden by default; shown for harbour-mist */
  background: var(--hm-brand);
  color: rgba(251, 247, 243, 0.82);
}

[data-theme="amber-coast"] .hm-topbar {
  display: block;
  /* The hero pulls up behind the header (position:relative), which would paint
     OVER this static strip. Give the slate top bar a positioned stacking order
     above the hero + nav so it stays visible as the topmost strip. */
  position: relative;
  z-index: 40;
}

.hm-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.3rem 0;
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  max-width: var(--hm-container);
  margin: 0 auto;
  padding-inline: 1.5rem;
}

/* Left group: phone + divider + locality */
.hm-topbar__left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Right group: small nav links */
.hm-topbar__right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-shrink: 0;
}

.hm-topbar__right a {
  color: rgba(251, 247, 243, 0.75);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 500;
  transition: color 0.15s ease;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.hm-topbar__right a:hover {
  color: #FBF7F3;
}

.hm-topbar__divider {
  opacity: 0.35;
  flex-shrink: 0;
}

.hm-topbar__locality {
  display: flex;
  align-items: center;
  gap: 0.3em;
  color: rgba(251, 247, 243, 0.82);
}

/* Location pin icon before locality */
.hm-topbar__locality::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 13px;
  background: currentColor;
  opacity: 0.7;
  /* SVG location pin shape via clip-path */
  clip-path: path('M5 0C2.24 0 0 2.24 0 5c0 3.75 5 8 5 8s5-4.25 5-8C10 2.24 7.76 0 5 0zm0 6.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z');
  transform: scale(0.9);
  transform-origin: center;
}

.hm-topbar__phone {
  color: rgba(251, 247, 243, 0.92);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s ease;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.hm-topbar__phone::before {
  content: "Call or text  ";
  font-weight: 400;
  opacity: 0.78;
}

.hm-topbar__phone:hover {
  color: #FBF7F3;
}

/* Hide the secondary nav links on very small screens to avoid overflow */
@media (max-width: 640px) {
  .hm-topbar__right {
    display: none;
  }
  .hm-topbar__phone::before {
    display: none;
  }
}

/* ---- 7. NAV — transparent at top, frosted when scrolled ---- */
/* AT TOP OF PAGE: transparent background so the hero image shows through.
   Nav text + logo are DARK (#2B2420) for contrast against the light scrim
   added by the hero ::before gradient (rgba(251, 247, 243,0.78) top→transparent).
   WCAG AA check: #2B2420 on rgba(251, 247, 243,0.78) blended over hero image.
   Effective scrim bg ≈ #F7F1EB → contrast #2B2420/#F7F1EB ≈ 13.5:1 (AAA). ✓

   WHEN SCROLLED (.is-scrolled applied by inline JS):
   Frosted near-white background rgba(251, 247, 243,0.82) + blur(10px).
   Nav text: slate ink (#2B2420) — same as at-top, no visual jump.
   WCAG AA: #2B2420 on rgba(251, 247, 243,0.82) → ≈ #F2F4F4 → contrast ≈ 14.1:1 (AAA). ✓
*/

[data-theme="amber-coast"] .nav {
  /* At-top: fully transparent background, dark text */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Scrolled state — frosted near-white, dark text (unchanged) */
[data-theme="amber-coast"] .nav.is-scrolled {
  background: rgba(251, 247, 243, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hm-line);
  box-shadow: 0 2px 12px -4px rgba(34, 40, 46, 0.08);
}

/* At-top state: brand/logo is DARK with a soft light halo (no scrim — keeps the
   nav background fully transparent while staying readable over the hero). */
[data-theme="amber-coast"] .nav:not(.is-scrolled) .nav-brand,
[data-theme="amber-coast"] .nav:not(.is-scrolled) .nav__logo,
[data-theme="amber-coast"] .nav:not(.is-scrolled) .nav-brand--monogram {
  color: var(--hm-ink);
  text-shadow: 0 1px 12px rgba(251, 247, 243, 0.6), 0 0 2px rgba(251, 247, 243, 0.55);
}

[data-theme="amber-coast"] .nav:not(.is-scrolled) .nav-brand--monogram .nav-brand__mark {
  background: rgba(43, 36, 32, 0.08);
  color: var(--hm-ink);
}

/* Scrolled state: brand/logo stays slate ink */
[data-theme="amber-coast"] .nav.is-scrolled .nav-brand,
[data-theme="amber-coast"] .nav.is-scrolled .nav__logo {
  color: var(--hm-ink);
}

/* Base nav brand colour (fallback / mobile) — dark slate ink */
[data-theme="amber-coast"] .nav-brand,
[data-theme="amber-coast"] .nav__logo {
  color: var(--hm-ink);
  transition: color 0.3s ease;
}

/* At-top nav links: DARK text with a soft light halo (transparent nav bg). */
[data-theme="amber-coast"] .nav:not(.is-scrolled) .nav-links a,
[data-theme="amber-coast"] .nav:not(.is-scrolled) .nav__link {
  color: var(--hm-ink);
  text-shadow: 0 1px 12px rgba(251, 247, 243, 0.6), 0 0 2px rgba(251, 247, 243, 0.55);
}

[data-theme="amber-coast"] .nav:not(.is-scrolled) .nav-links a:hover,
[data-theme="amber-coast"] .nav:not(.is-scrolled) .nav__link:hover,
[data-theme="amber-coast"] .nav:not(.is-scrolled) .nav-links a.is-active {
  color: var(--hm-brand);
}

/* Scrolled nav links: slate ink (same as at-top — consistent) */
[data-theme="amber-coast"] .nav.is-scrolled .nav-links a,
[data-theme="amber-coast"] .nav.is-scrolled .nav__link {
  color: var(--hm-ink);
}

[data-theme="amber-coast"] .nav.is-scrolled .nav-links a:hover,
[data-theme="amber-coast"] .nav.is-scrolled .nav__link:hover,
[data-theme="amber-coast"] .nav.is-scrolled .nav-links a.is-active {
  color: var(--hm-brand);
}

[data-theme="amber-coast"] .nav-links a,
[data-theme="amber-coast"] .nav__link {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--hm-ink);
  text-decoration: none;
  transition: color 0.15s ease;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Brand wordmark: elegant cursive script (Dancing Script 700) when rendered
   as text (i.e. no customer logo image). This applies only when there is no
   <img> inside .nav-brand — customer sites with an uploaded logo image are
   unaffected because their logo img src overrides the font rendering.
   WCAG AA: var(--hm-ink) #2B2420 on nav scrim (#F7F1EB) ≈ 13.5:1 (AAA). ✓ */
[data-theme="amber-coast"] .nav-brand:not(:has(img)),
[data-theme="amber-coast"] .nav__logo:not(:has(img)) {
  font-family: 'Sacramento', cursive;
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: 0.01em;
  line-height: 1;
}

/* Poppins UI — nav links 500 weight, title-case ----------------------- */

/* Primary pill CTA in nav — "Book" / "Request a quote" — filled slate always */
[data-theme="amber-coast"] .nav .btn-primary,
[data-theme="amber-coast"] .nav-cta {
  background: var(--hm-brand);
  color: #FBF7F3;
  border-radius: var(--hm-radius-xl);
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.55em 1.5em;
  border: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: background 0.18s ease;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

[data-theme="amber-coast"] .nav .btn-primary:hover,
[data-theme="amber-coast"] .nav-cta:hover {
  background: var(--hm-brand-dark);
}

/* Phone / Call CTA pill in nav — white background, slate text.
   WCAG AA: #685E4F on #FBF7F3 = ~7.0:1 (AA+). */
[data-theme="amber-coast"] .nav .nav-call,
[data-theme="amber-coast"] .nav-call.btn-ghost {
  background: #FBF7F3 !important;
  color: var(--hm-brand) !important;
  border: none !important;
  border-radius: var(--hm-radius-xl) !important;
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  padding: 0.55em 1.5em !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: background 0.18s ease, color 0.18s ease !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

[data-theme="amber-coast"] .nav .nav-call:hover,
[data-theme="amber-coast"] .nav-call.btn-ghost:hover {
  background: var(--hm-surface-alt) !important;
  color: var(--hm-brand-dark) !important;
}

/* Mobile hamburger legibility */
[data-theme="amber-coast"] .nav-toggle > summary {
  border-color: var(--hm-line);
  background: var(--hm-surface-alt);
}
[data-theme="amber-coast"] .nav-toggle > summary::after {
  background: var(--hm-ink);
  box-shadow: 0 -5px 0 var(--hm-ink), 0 5px 0 var(--hm-ink);
}
[data-theme="amber-coast"] .nav-toggle[open] > summary::before {
  color: var(--hm-ink);
}

/* Mobile panel */
[data-theme="amber-coast"] .nav-mobile-panel {
  background: #FBF7F3;
  border-color: var(--hm-line);
}
[data-theme="amber-coast"] .nav-mobile-panel a {
  color: var(--hm-ink);
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  min-height: 44px;
  display: flex;
  align-items: center;
}
[data-theme="amber-coast"] .nav-mobile-panel a:hover {
  background: rgba(104, 94, 79, 0.08);
  color: var(--hm-brand);
}
[data-theme="amber-coast"] .nav-mobile-panel .nav-cta-mobile {
  background: var(--hm-brand);
  color: #FBF7F3;
  border-radius: var(--hm-radius-xl);
  font-weight: 600;
}

/* ---- 8. HERO — SMALLER + SVG WAVE BOTTOM DIVIDER ---------- */
/* Full-bleed hero with slate overlay and subtle SVG wave bottom edge.
   The home hero (.hero--split) is pulled UP behind the topbar+nav using a
   negative margin-top equal to --hm-header-h (set by inline JS; fallback 130px
   for the nav alone). Padding-top is increased by the same amount so hero
   content still clears the nav. This keeps topbar+nav in normal flow (sticky
   works) while the hero photo fills the space behind the transparent nav.
   Sub-page .hero--simple heroes do NOT get the pull-up (handled separately).
   Mobile: shallower wave (less amplitude SVG). */
[data-theme="amber-coast"] .hero,
[data-theme="amber-coast"] .hero--split {
  position: relative;
  /* No-image fallback: medium slate-mist treatment — refined and airy. */
  background-color: var(--hm-brand-muted);
  background-image:
    linear-gradient(
      175deg,
      #C8D8DC 0%,
      #A4BCC4 30%,
      var(--hm-brand-muted) 60%,
      var(--hm-brand) 100%
    );
  background-size: cover;
  background-position: center;
  color: #FBF7F3;
  /* Pull the hero UP behind the transparent nav/topbar so the nav overlays
     the hero photo, not the white page background.
     --hm-header-h is set by the inline JS below (fallback: 130px for nav alone).
     padding-top is increased by the same amount to push content below the nav. */
  margin-top: calc(-1 * var(--hm-header-h, 130px));
  padding-top: calc(2rem + var(--hm-header-h, 130px));
  padding-bottom: 4.4rem;       /* leaves room for the ~70px wave */
  min-height: 0 !important;     /* override multipage min-height: min(86vh, 780px) */
  /* No clip-path — wave SVG handles the bottom shape */
  clip-path: none;
  overflow: visible;
}

/* Tighten the hero content stack so the section is compact (operator: ~30% smaller). */
[data-theme="amber-coast"] .hero .hero-grid > *,
[data-theme="amber-coast"] .hero--split .hero-grid > * {
  margin-top: 0.55rem;
  margin-bottom: 0;
}
[data-theme="amber-coast"] .hero .hero-lede,
[data-theme="amber-coast"] .hero--split .hero-lede {
  margin-top: 0.6rem;
}
[data-theme="amber-coast"] .hero .hero-cta,
[data-theme="amber-coast"] .hero--split .hero-cta {
  margin-top: 1rem;
}

/* SVG wave divider at hero bottom.
   Implemented as a real inline <svg class="hm-hero-wave"> element (injected by
   generate.ts for harbour-mist only). Using a real element instead of ::after
   background-image guarantees rendering across all Chromium/WebKit/Firefox builds
   without SVG data-URI encoding pitfalls.
   Symmetric arch: edges at y=50, centre peak at y=8 in the 70px viewBox.
   The #FBF7F3 fill creates a clear upward arch — page surface "emerging" from hero.
   z-index 2 sits above hero content (z-index 1). */
.hm-hero-wave {
  display: none;  /* hidden by default; shown for harbour-mist only */
}
[data-theme="amber-coast"] .hm-hero-wave {
  display: block;
  position: absolute;
  bottom: -1px;   /* -1px to seal any sub-pixel gap */
  left: 0;
  width: 100%;
  height: 70px;
  pointer-events: none;
  z-index: 2;
}

/* Keep ::after as a no-op for harbour-mist (real element handles the wave) */
[data-theme="amber-coast"] .hero::after,
[data-theme="amber-coast"] .hero--split::after {
  content: "";
  display: none;
}

/* Hero top scrim: light-to-transparent gradient covering the top ~120px.
   Sits BEHIND the nav (z-index 1) and ABOVE the hero image/bg (z-index 0).
   Makes the nav's dark text (#2B2420) clearly readable at the very top of the page.
   WCAG AA: #2B2420 on rgba(251, 247, 243,0.78) ≈ #F7F1EB → contrast ≈ 13.5:1 (AAA). ✓
   Does NOT obscure the hero image — gradient fades to transparent at ~120px. */
/* Operator: nav background must be COMPLETELY transparent at the top — no scrim.
   The hero top is left untouched; nav-text readability is handled by a soft
   light text-halo on the at-top nav text instead of a background wash. */
[data-theme="amber-coast"] .hero::before,
[data-theme="amber-coast"] .hero--split::before {
  display: none !important;
}

/* Full-bleed layout for harbour-mist: suppress the 2-column hero-grid split.
   The hero content (headline + CTAs) sits in a single left-aligned column
   at the lower portion of the hero where the gradient is darkest (best contrast).
   We push the content down via flex column + margin-top: auto so it anchors
   towards the bottom of the hero area, matching the reference layout. */
[data-theme="amber-coast"] .hero > .container,
[data-theme="amber-coast"] .hero--split > .container {
  /* Operator: smaller hero. Don't stretch the container to a min-height — let it
     hug its content so the hero height = content + the (reduced) padding. */
  display: block;
  min-height: 0;
}

[data-theme="amber-coast"] .hero .hero-grid,
[data-theme="amber-coast"] .hero--split .hero-grid {
  display: block;
  max-width: 620px;
  padding-bottom: 1rem;
}

/* When a hero image is set: full-bleed photo + slate overlay tint (~0.65).
   The overlay keeps white headline text at WCAG AA over any photo.
   Photo on the element; the colour overlay + photo blur live on ::before
   (desktop) so the hero text stays sharp. */
[data-theme="amber-coast"] body[style*="--hero-bg"] .hero,
[data-theme="amber-coast"] body[style*="--hero-bg"] .hero--split,
[data-theme="amber-coast"] .hero[style*="--hero-bg"],
[data-theme="amber-coast"] .hero--split[style*="--hero-bg"] {
  background-color: var(--hm-brand);
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
}

/* Desktop hero overlay + photo blur on ::before so the hero TEXT stays sharp.
   The tint gradient is the visible colour overlay; backdrop-filter blurs the
   hero's background photo behind it (clarity 1 = no blur, 0 = 22px blur).
   Content (.container) is lifted to z-index:1 so it sits above this overlay.
   Mobile uses the fixed body::before instead (see the max-width:640 block). */
@media (min-width: 641px) {
  [data-theme="amber-coast"] body[style*="--hero-bg"] .hero--split::before,
  [data-theme="amber-coast"] .hero--split[style*="--hero-bg"]::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      linear-gradient(to bottom,
        rgba(var(--hm-hero-ink-rgb),  0.16) 0%,
        rgba(var(--hm-hero-tint-rgb), calc(0.80 * var(--hm-hero-strength))) 58%,
        rgba(var(--hm-hero-ink-rgb),  0.62) 100%);
    -webkit-backdrop-filter: blur(calc(22px * (1 - var(--hm-hero-clarity))));
    backdrop-filter: blur(calc(22px * (1 - var(--hm-hero-clarity))));
  }
  [data-theme="amber-coast"] .hero--split[style*="--hero-bg"] > .container,
  [data-theme="amber-coast"] body[style*="--hero-bg"] .hero--split > .container {
    position: relative;
    z-index: 1;
  }
}

/* Hero text — light on slate */
[data-theme="amber-coast"] .hero h1,
[data-theme="amber-coast"] .hero--split h1 {
  color: #FBF7F3;
  text-shadow: 0 2px 16px rgba(34, 40, 46, 0.28);
  /* Operator: smaller hero — reduced headline so the section is ~30% shorter. */
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.08;
  font-weight: 700;
}

[data-theme="amber-coast"] .hero .hero-lede,
[data-theme="amber-coast"] .hero--split .hero-lede {
  color: rgba(251, 247, 243, 0.82);
  text-shadow: none;
  opacity: 1;
}

[data-theme="amber-coast"] .hero .eyebrow,
[data-theme="amber-coast"] .hero--split .eyebrow {
  color: rgba(251, 247, 243, 0.72);
  font-family: 'Bebas Neue', ui-sans-serif, system-ui, sans-serif;
}

[data-theme="amber-coast"] .hero .eyebrow::before,
[data-theme="amber-coast"] .hero--split .eyebrow::before {
  background: rgba(251, 247, 243, 0.55);
}

/* Hero meta — rating / locality */
[data-theme="amber-coast"] .hero-meta,
[data-theme="amber-coast"] .hero-meta span {
  color: rgba(251, 247, 243, 0.80);
}

/* Hero CTA buttons — pill shaped */
[data-theme="amber-coast"] .hero .btn-primary,
[data-theme="amber-coast"] .hero--split .btn-primary {
  background: #FBF7F3;
  color: var(--hm-brand);
  border-radius: var(--hm-radius-xl);
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  min-height: 44px;
  padding: 0.7em 1.8em;
  border: none;
  transition: background 0.18s ease, color 0.18s ease;
}

[data-theme="amber-coast"] .hero .btn-primary:hover,
[data-theme="amber-coast"] .hero--split .btn-primary:hover {
  background: var(--hm-surface-alt);
}

[data-theme="amber-coast"] .hero .btn-ghost,
[data-theme="amber-coast"] .hero--split .btn-ghost {
  background: transparent;
  color: #FBF7F3;
  border: 2px solid rgba(251, 247, 243, 0.55);
  border-radius: var(--hm-radius-xl);
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  min-height: 44px;
  padding: 0.7em 1.8em;
  transition: border-color 0.18s ease, background 0.18s ease;
}

[data-theme="amber-coast"] .hero .btn-ghost:hover,
[data-theme="amber-coast"] .hero--split .btn-ghost:hover {
  background: rgba(251, 247, 243, 0.12);
  border-color: rgba(251, 247, 243, 0.80);
}

/* hero-art (floating quote card) on the slate hero */
[data-theme="amber-coast"] .hero-art {
  background: rgba(104, 94, 79, 0.55);
  border: 1px solid rgba(251, 247, 243, 0.18);
  border-radius: var(--hm-radius);
}

[data-theme="amber-coast"] .hero-art__quote {
  background: rgba(251, 247, 243, 0.10);
  border-radius: var(--hm-radius-sm);
}

[data-theme="amber-coast"] .hero-art__text { color: rgba(251, 247, 243, 0.90); }
[data-theme="amber-coast"] .hero-art__author { color: rgba(251, 247, 243, 0.65); }

/* Multipage/advanced hero background + sizing — shared across home + sub-page.
   The base [data-theme="amber-coast"] .hero rule above sets min-height:0 !important
   which overrides the multipage default min-height:min(86vh,780px). */
[data-theme="amber-coast"]:is([data-package="multipage"], [data-package="advanced"]) .hero,
[data-theme="amber-coast"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple {
  background-color: var(--hm-brand-muted);
  background-image:
    linear-gradient(175deg, #C8D8DC 0%, #A4BCC4 30%, var(--hm-brand-muted) 60%, var(--hm-brand) 100%);
  color: #FBF7F3;
  clip-path: none;
  padding-bottom: 4.2rem;   /* room for the ~70px wave */
  min-height: 0 !important;
}

/* Sub-page simple hero: fixed padding-top (no nav pull-up — the topbar+nav sit
   above the page content for sub-pages, which is fine/expected). */
[data-theme="amber-coast"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple {
  padding-top: 1.5rem;
  /* Reset the pull-up applied by the base .hero/.hero--split rule above */
  margin-top: 0;
}

/* Home hero (.hero--split) in multipage: apply the nav pull-up so the hero
   extends behind the topbar+nav. Padding-top already set by the base rule
   (calc(2rem + var(--hm-header-h, 130px))). Override to use 1.5rem base
   so the multipage home hero is slightly more compact. */
[data-theme="amber-coast"]:is([data-package="multipage"], [data-package="advanced"]) .hero--split {
  margin-top: calc(-1 * var(--hm-header-h, 130px));
  padding-top: calc(1.5rem + var(--hm-header-h, 130px));
}

[data-theme="amber-coast"]:is([data-package="multipage"], [data-package="advanced"]) .hero h1,
[data-theme="amber-coast"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple h1 {
  color: #FBF7F3;
  text-shadow: 0 2px 12px rgba(34, 40, 46, 0.26);
  /* Operator: smaller hero. This multipage-scoped rule (0,3,0) must carry the
     headline size, or the base multipage .hero h1 (also 0,3,0) wins over the
     general harbour-mist .hero--split h1 (0,2,0). */
  font-size: clamp(1.9rem, 3.2vw, 2.9rem) !important;
  line-height: 1.1 !important;
}

/* Suppress scrim (::before) on sub-page SIMPLE hero only.
   The home .hero--split keeps its scrim for dark-nav-text legibility at top. */
[data-theme="amber-coast"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple::before {
  display: none !important;
}

/* Mobile hero: shallower wave amplitude */
@media (max-width: 780px) {
  [data-theme="amber-coast"] .hero,
  [data-theme="amber-coast"] .hero--split {
    clip-path: none;
    padding-bottom: 4.5rem;
  }
  /* Mobile: shallower wave height on the real SVG element */
  [data-theme="amber-coast"] .hm-hero-wave {
    height: 50px;
  }
}

/* ---- 9. ROTATED MARQUEE STRIP ----------------------------- */
/* Harbour-mist signature: full-bleed slate band, condensed uppercase text,
   rotated ~-3deg on its own stacking context, scrolling indefinitely.
   Reduced-motion: animation is removed; text still visible, static. */
.hm-marquee {
  display: none;  /* hidden by default; shown for harbour-mist only */
}

[data-theme="amber-coast"] .hm-marquee {
  display: block;
  background: var(--hm-brand);
  overflow: hidden;
  padding: 1.25rem 0;  /* reduced from 2.5rem — slims the band so it sits cleanly below hero */
  transform: rotate(0deg);
  transform-origin: center center;
  /* Positive margin-top ensures the marquee starts BELOW the hero wave.
     Previously -0.5rem pulled the band up into the hero by ~50px.
     4rem gives ~64px clearance from the hero's bottom edge to the marquee top. */
  margin-top: 4rem;
  margin-bottom: -0.5rem;
  /* Extend past viewport edges so rotation doesn't leave gaps */
  margin-inline: -5vw;
  width: calc(100% + 10vw);
  position: relative;
  z-index: 1;
  /* Ensure no body overflow-x shows */
}

[data-theme="amber-coast"] .hm-marquee__track {
  display: flex;
  gap: 0;
  white-space: nowrap;
  animation: hm-marquee-scroll 38s linear infinite;
  font-family: 'Bebas Neue', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.1rem, 2.2vw, 1.8rem);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(251, 247, 243, 0.80);
  will-change: transform;
}

[data-theme="amber-coast"] .hm-marquee__track span {
  display: inline-block;
  padding-right: 3rem;
}

@keyframes hm-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="amber-coast"] .hm-marquee__track {
    animation: none;
  }
}

/* ---- 10. BUTTONS (global) --------------------------------- */
[data-theme="amber-coast"] .btn-primary {
  background: var(--hm-brand);
  color: #FBF7F3;
  border-radius: var(--hm-radius-xl);
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  border: none;
  padding: 0.7em 1.8em;
  min-height: 44px;
  transition: background 0.18s ease;
}

[data-theme="amber-coast"] .btn-primary:hover {
  background: var(--hm-brand-dark);
}

[data-theme="amber-coast"] .btn-ghost {
  background: transparent;
  color: var(--hm-brand);
  border: 2px solid var(--hm-brand);
  border-radius: var(--hm-radius-xl);
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  padding: 0.7em 1.8em;
  min-height: 44px;
  transition: background 0.18s ease, color 0.18s ease;
}

[data-theme="amber-coast"] .btn-ghost:hover {
  background: var(--hm-brand);
  color: #FBF7F3;
}

/* ---- 11. SECTION COLOURS ---------------------------------- */
[data-theme="amber-coast"] .section-alt,
[data-theme="amber-coast"] .section-warm {
  background: var(--hm-surface-alt);
  border-color: var(--hm-line);
}

[data-theme="amber-coast"] .section-title p {
  color: var(--hm-ink-body);
}

/* ---- 11b. .grid-3 container reset for harbour-mist -------- */
/* When .grid-3 contains .hm-services-grid, the outer .grid-3 should not
   impose its own 3-column layout — the inner .hm-services-grid owns the grid. */
[data-theme="amber-coast"] .grid-3:has(.hm-services-grid) {
  display: block;
  gap: 0;
}

/* Fallback for browsers without :has() — the hm-services-grid is
   a full-width block child, so setting the outer grid to display:contents
   would collapse it. Instead override grid-template-columns so the
   outer .grid-3 single cell spans full width. */
@supports not selector(:has(.hm-services-grid)) {
  [data-theme="amber-coast"] .grid-3 {
    display: block;
  }
}

/* ---- 12. SERVICE FLIP CARDS (harbour-mist image grid) ----- */
/* 2-column grid (larger cards). Front: service image + CENTRED title overlay.
   Back (hover/focus): summary text + "Learn more" link.
   Flip axis: rotateX (flip-up — card flips upward to reveal back).
   prefers-reduced-motion: crossfade fallback.
   Tab-stops on each card for keyboard users. 44px touch target on back CTA. */

.hm-services-grid {
  display: none;  /* hidden by default; shown only for harbour-mist */
}

[data-theme="amber-coast"] .hm-services-grid {
  display: grid;
  /* 2-wide columns — larger cards */
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
  margin-top: 2.5rem;
}

/* Mobile stays 1 column */
@media (max-width: 560px) {
  [data-theme="amber-coast"] .hm-services-grid {
    grid-template-columns: 1fr;
  }
}

/* Flip scene container */
[data-theme="amber-coast"] .hm-card__flip {
  position: relative;
  border-radius: var(--hm-radius);
  overflow: hidden;
  /* Slightly taller aspect ratio for 2-wide layout */
  aspect-ratio: 16 / 10;
  cursor: pointer;
  /* Perspective for 3D flip */
  perspective: 900px;
  box-shadow: var(--hm-shadow-card);
  outline: none;
}

[data-theme="amber-coast"] .hm-card__flip:focus-visible {
  outline: 3px solid var(--hm-brand-muted);
  outline-offset: 3px;
}

/* Inner wrapper: flips in 3D — rotateX (flip-up) */
[data-theme="amber-coast"] .hm-card__flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
  /* flip-up: transform-origin at the bottom edge */
  transform-origin: center bottom;
}

/* Flip trigger: hover OR focus-within — rotateX (flip-up) */
[data-theme="amber-coast"] .hm-card__flip:hover .hm-card__flip-inner,
[data-theme="amber-coast"] .hm-card__flip:focus-within .hm-card__flip-inner {
  transform: rotateX(-180deg);
}

/* Front face */
[data-theme="amber-coast"] .hm-card__front {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--hm-radius);
  overflow: hidden;
}

/* Service image */
[data-theme="amber-coast"] .hm-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: var(--hm-radius);
}

/* Placeholder when no image — very light slate-mist panel, airy and elegant.
   Uses near-white tones with a gentle slate tint so the page reads light.
   Darkest stop is #C4BAA8 (brand-mist) — still well above mid-brightness.
   The title label uses a bottom gradient for legibility (see .hm-card__title-label).
   Contrast: dark ink #2B2420 on #C8D5D9 = 8.9:1 (AAA). We keep the label
   white (#FBF7F3) and rely on the bottom gradient strip for contrast.
   White on darkest stop #C4BAA8 = 3.7:1 (AA large text, font-size 1.05rem). */
[data-theme="amber-coast"] .hm-card__img--placeholder {
  width: 100%;
  height: 100%;
  border-radius: var(--hm-radius);
  background-image:
    radial-gradient(ellipse at 22% 28%, rgba(251, 247, 243, 0.30) 0%, transparent 50%),
    radial-gradient(ellipse at 78% 72%, rgba(104, 94, 79, 0.10) 0%, transparent 40%),
    linear-gradient(145deg, #D6E3E8 0%, #C0D2D9 45%, #A8BFC7 80%, var(--hm-brand-mist) 100%);
}

/* Light-haze overlay on the front image — a soft airy translucent veil
   consistent with the harbour-mist light aesthetic (frosted/misty look).
   Replaces the prior dark slate wash so photos read with a fresh, bright
   feel. The label's own dark radial vignette (see .hm-card__title-label)
   handles text contrast independently, so white label text stays AA-legible
   over any photo underneath the haze.
   Contrast check (worst-case mid-tone photo, L≈0.18):
     Vignette centre rgba(43, 36, 32,0.55) blended → effective L ≈ 0.091
     White #FBF7F3 (L=0.980) on effective L=0.091 → ratio ≈ 7.3:1  (AA ✓)
   When no image is present (placeholder), this overlay is transparent
   because the placeholder already uses the mist gradient directly. */
[data-theme="amber-coast"] .hm-card__overlay {
  position: absolute;
  inset: 0;
  /* Soft top-to-bottom light haze: slightly denser at top, airier at base.
     Near-white surface tone (#FBF7F3) so the overlay reads mist-like. */
  background: linear-gradient(
    to bottom,
    rgba(251, 247, 243, 0.32) 0%,
    rgba(251, 247, 243, 0.14) 100%
  );
  border-radius: var(--hm-radius);
}

/* When the card uses the placeholder (no image), suppress the extra overlay
   so the mist gradient reads on its own — the overlay would just darken it. */
[data-theme="amber-coast"] .hm-card__front:has(.hm-card__img--placeholder) .hm-card__overlay {
  background: transparent;
}

/* :has() fallback — browsers without :has() get slightly different (overlay stays), no content breaks */

/* Title label on front card — CENTRED both axes (requested).
   Absolute positioned in the centre of the card (top/left/right/bottom: 0,
   display:flex, align-items:center, justify-content:center).
   Background: a centred dark radial vignette behind the text — unchanged
   from the prior dark-overlay version so white text stays WCAG AA over
   the new light-haze overlay. The vignette provides its own independent
   contrast regardless of whether the overlay above it is light or dark.
   Contrast: #FBF7F3 on vignette-centre L≈0.091 → 7.3:1 (AA ✓, AAA for
   large text). text-shadow provides additional depth. */
[data-theme="amber-coast"] .hm-card__title-label {
  position: absolute;
  inset: 0;   /* cover the full card face */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.2rem;
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #FBF7F3;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  /* Dark radial vignette keeps white text AA-legible over the light-haze photo */
  background: radial-gradient(ellipse at 50% 50%, rgba(43, 36, 32, 0.55) 0%, rgba(43, 36, 32, 0.20) 60%, transparent 100%);
  text-shadow: 0 2px 12px rgba(20, 24, 28, 0.70);
  border-radius: var(--hm-radius);
  /* Not at bottom: inset 0 covers full card */
}

/* Back face — starts at rotateX(180deg) (below the card plane), flips into view */
[data-theme="amber-coast"] .hm-card__back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Flipped 180deg around X axis (flip-up): back starts "underneath" */
  transform: rotateX(180deg);
  transform-origin: center bottom;
  background: var(--hm-brand);
  border-radius: var(--hm-radius);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 1.4rem 1.6rem;
  gap: 0.6rem;
  /* Item 2: accommodate longer back-face copy — scroll if it overflows */
  overflow-y: auto;
}

[data-theme="amber-coast"] .hm-card__back-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #FBF7F3;
  line-height: 1.2;
  margin: 0;
}

[data-theme="amber-coast"] .hm-card__back-summary {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9rem;
  color: rgba(251, 247, 243, 0.80);
  line-height: 1.5;
  margin: 0;
  max-width: 100%;
}

[data-theme="amber-coast"] .hm-card__learn {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(251, 247, 243, 0.90);
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color 0.15s ease;
}

[data-theme="amber-coast"] .hm-card__learn:hover {
  color: #FBF7F3;
}

/* Reduced-motion: crossfade instead of rotateX (flip-up) */
@media (prefers-reduced-motion: reduce) {
  [data-theme="amber-coast"] .hm-card__flip-inner {
    transition: none;
    transform: none !important;
    transform-origin: unset;
  }
  /* Show back via opacity instead of rotateX */
  [data-theme="amber-coast"] .hm-card__back {
    transform: none;
    transform-origin: unset;
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  [data-theme="amber-coast"] .hm-card__flip:hover .hm-card__back,
  [data-theme="amber-coast"] .hm-card__flip:focus-within .hm-card__back {
    opacity: 1;
  }
  [data-theme="amber-coast"] .hm-card__front {
    transform: none;
    transform-origin: unset;
    opacity: 1;
    transition: opacity 0.25s ease;
  }
  [data-theme="amber-coast"] .hm-card__flip:hover .hm-card__front,
  [data-theme="amber-coast"] .hm-card__flip:focus-within .hm-card__front {
    opacity: 0;
  }
}

/* ---- 12b. SERVICE CARD GROW-IN REVEAL ANIMATION (Item 3) --
   The outer .hm-card__flip wrapper receives the .reveal class from generate.ts.
   It grows from 0.82 scale to full size as it scrolls into view.
   The inner .hm-card__flip-inner handles the rotateX flip — these are
   separate elements so the two transforms don't conflict.
   transform-origin: center so scale is centred on the card.
   Stagger: data-delay attribute drives transition-delay per card. */
[data-theme="amber-coast"] .hm-card__flip.reveal {
  opacity: 0;
  transform: scale(0.82);
  transform-origin: center center;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="amber-coast"] .hm-card__flip.reveal.is-in {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays — left-to-right per card (data-delay 0,1,2,3) */
[data-theme="amber-coast"] .hm-card__flip.reveal[data-delay="0"] { transition-delay: 0ms; }
[data-theme="amber-coast"] .hm-card__flip.reveal[data-delay="1"] { transition-delay: 100ms; }
[data-theme="amber-coast"] .hm-card__flip.reveal[data-delay="2"] { transition-delay: 200ms; }
[data-theme="amber-coast"] .hm-card__flip.reveal[data-delay="3"] { transition-delay: 300ms; }

/* Reduced-motion: show cards immediately at full size, no transform */
@media (prefers-reduced-motion: reduce) {
  [data-theme="amber-coast"] .hm-card__flip.reveal {
    opacity: 1 !important;
    transform: scale(1) !important;
    transition: none !important;
  }
}

/* ---- 13. TRUST BAR ---------------------------------------- */
[data-theme="amber-coast"] .trust-bar {
  background: var(--hm-surface-alt);
  border-block: 1px solid var(--hm-line);
}

[data-theme="amber-coast"] .trust-bar__item {
  color: var(--hm-ink-soft);
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.88rem;
}

[data-theme="amber-coast"] .trust-bar__item strong {
  color: var(--hm-brand);
}

[data-theme="amber-coast"] .trust-bar__stars {
  color: var(--hm-brand-muted);
}

/* ---- 14. CARDS -------------------------------------------- */
[data-theme="amber-coast"] .card,
[data-theme="amber-coast"] .card-service,
[data-theme="amber-coast"] .value,
[data-theme="amber-coast"] .faq details,
[data-theme="amber-coast"] .faq-list details {
  background: #FBF7F3;
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-radius);
  box-shadow: var(--hm-shadow-sm);
}

[data-theme="amber-coast"] .card:hover {
  box-shadow: var(--hm-shadow-card);
}

[data-theme="amber-coast"] .card-service h3,
[data-theme="amber-coast"] .card h3 {
  color: var(--hm-ink);
  font-family: 'Cormorant Garamond', Georgia, serif;
}

[data-theme="amber-coast"] .card-service p,
[data-theme="amber-coast"] .card p {
  color: var(--hm-ink-body);
}

/* ---- 15. VALUE ICONS ------------------------------------- */
[data-theme="amber-coast"] .value__glyph {
  background: rgba(104, 94, 79, 0.10);
  color: var(--hm-brand);
  border-radius: var(--hm-radius);
}

[data-theme="amber-coast"] .value h3 {
  color: var(--hm-ink);
  font-family: 'Cormorant Garamond', Georgia, serif;
}

[data-theme="amber-coast"] .value p {
  color: var(--hm-ink-body);
}

/* ---- 16. STATS BAND --------------------------------------- */
[data-theme="amber-coast"] .stat-row,
[data-theme="amber-coast"] .stats-band {
  background: var(--hm-brand);
  box-shadow: var(--hm-shadow-float);
}

[data-theme="amber-coast"] .stat-row__value,
[data-theme="amber-coast"] .stats-band__value {
  font-family: 'Bebas Neue', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 600;
  color: #FBF7F3;
  line-height: 1;
  letter-spacing: -0.02em;
}

[data-theme="amber-coast"] .stat-row__label,
[data-theme="amber-coast"] .stats-band__label {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.85rem;
  color: rgba(251, 247, 243, 0.72);
}

/* ---- 17. TESTIMONIALS (static — no JS carousel) ----------- */
[data-theme="amber-coast"] .testimonial {
  background: #FBF7F3;
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-radius);
  box-shadow: var(--hm-shadow-sm);
}

[data-theme="amber-coast"] .testimonial__text {
  color: var(--hm-ink);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.55;
}

[data-theme="amber-coast"] .testimonial__author {
  color: var(--hm-ink-soft);
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
}

[data-theme="amber-coast"] .testimonial__stars {
  color: var(--hm-brand-muted);
}

/* ---- 18. FAQ --------------------------------------------- */
[data-theme="amber-coast"] .faq details summary {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  color: var(--hm-ink);
  min-height: 44px;
}

[data-theme="amber-coast"] .faq details[open] summary {
  color: var(--hm-brand);
}

[data-theme="amber-coast"] .faq details p {
  color: var(--hm-ink-body);
}

/* Item 5: FAQ box resting shadow + hover pop.
   Resting: slight shadow so boxes have gentle presence.
   Hover: lift + stronger shadow. Transition tasteful (150ms).
   WCAG: no color change; purely decorative lift. */
[data-theme="amber-coast"] .faq details,
[data-theme="amber-coast"] .faq-list details {
  box-shadow: 0 2px 10px -4px rgba(34, 40, 46, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

[data-theme="amber-coast"] .faq details:hover,
[data-theme="amber-coast"] .faq-list details:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(34, 40, 46, 0.20);
}

/* FAQ scroll-reveal: each question rises + fades up from the bottom as it
   enters the viewport (reveal.js adds .is-in; markup carries data-from="up-lg"
   for a larger pop + a staggered data-delay). Override the snappy 0.15s hover
   transition so the ENTRANCE animates opacity + transform smoothly; the higher
   specificity (details.reveal) wins for the resting/entrance state, while the
   :hover rule above still governs the hover lift. */
[data-theme="amber-coast"] .faq details.reveal {
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), box-shadow 0.18s ease;
}

/* ---- 19. FEATURE SPLIT (about section) ------------------- */
/* No-image fallback: very light slate-mist panel, consistent with the hero
   and service-card no-image treatment. Airy and elegant.
   When a real feature image IS present (.feature-split__art--image), the
   `background-image` from the inline style replaces our gradient — a tint
   overlay from renderFeatureArtClass picks up naturally. */
[data-theme="amber-coast"] .feature-split__art {
  border-radius: var(--hm-radius);
  background-image:
    radial-gradient(ellipse at 25% 35%, rgba(251, 247, 243, 0.28) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 72%, rgba(104, 94, 79, 0.12) 0%, transparent 42%),
    linear-gradient(145deg, #D2E1E6 0%, #B8CDD4 45%, #A0B9C2 80%, var(--hm-brand-mist) 100%);
}

[data-theme="amber-coast"] .hr-mini {
  border-color: var(--hm-line);
  opacity: 1;
}

/* ---- 19b. ABOUT SECTION DIRECTIONAL REVEAL (Item 4) -------
   Text block slides in from the left, image panel from the right.
   Both elements already carry the .reveal class in the templates.
   The IntersectionObserver in reveal.js adds .is-in when they enter view.
   These rules override the default .reveal fade-up for harbour-mist only. */
[data-theme="amber-coast"] .feature-split__body.reveal {
  opacity: 0;
  transform: translateX(-44px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="amber-coast"] .feature-split__body.reveal.is-in {
  opacity: 1;
  transform: translateX(0);
}

[data-theme="amber-coast"] .feature-split__art.reveal {
  opacity: 0;
  transform: translateX(44px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="amber-coast"] .feature-split__art.reveal.is-in {
  opacity: 1;
  transform: translateX(0);
}

/* Reduced-motion: show immediately, no directional slide */
@media (prefers-reduced-motion: reduce) {
  [data-theme="amber-coast"] .feature-split__body.reveal,
  [data-theme="amber-coast"] .feature-split__art.reveal {
    opacity: 1 !important;
    transform: translateX(0) !important;
    transition: none !important;
  }
}

/* ---- 20. CONTACT CARD ------------------------------------ */
[data-theme="amber-coast"] .contact-card {
  background: var(--hm-surface-alt);
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-radius);
  box-shadow: var(--hm-shadow-card);
}

[data-theme="amber-coast"] .contact-form input,
[data-theme="amber-coast"] .contact-form textarea,
[data-theme="amber-coast"] .contact-form select {
  background: #FBF7F3;
  border: 1px solid var(--hm-line);
  border-radius: 10px;
  color: var(--hm-ink);
  font-size: 1rem;
}

[data-theme="amber-coast"] .contact-form input:focus,
[data-theme="amber-coast"] .contact-form textarea:focus {
  border-color: var(--hm-brand-muted);
  outline: 2px solid rgba(104, 94, 79, 0.25);
  outline-offset: 0;
}

[data-theme="amber-coast"] .contact-form label {
  color: var(--hm-ink-soft);
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
}

/* ---- 21. PROOF / RATING STRIP ---------------------------- */
[data-theme="amber-coast"] .proof-strip {
  background: var(--hm-surface-alt);
  border-color: var(--hm-line);
}

[data-theme="amber-coast"] .proof-row { color: var(--hm-ink-soft); }
[data-theme="amber-coast"] .proof-row strong { color: var(--hm-brand); }

/* ---- 22. FOOTER ------------------------------------------ */
[data-theme="amber-coast"] .footer,
[data-theme="amber-coast"] .site-footer,
[data-theme="amber-coast"] .footer-warm {
  background: var(--hm-brand);
  color: rgba(251, 247, 243, 0.78);
  border-top: none;
}

[data-theme="amber-coast"] .footer-brand__name,
[data-theme="amber-coast"] .footer h3,
[data-theme="amber-coast"] .footer-warm h3,
[data-theme="amber-coast"] .site-footer h3,
[data-theme="amber-coast"] .footer .nav__logo,
[data-theme="amber-coast"] .footer-warm .nav__logo {
  color: #FBF7F3;
  font-family: 'Cormorant Garamond', Georgia, serif;
}

[data-theme="amber-coast"] .footer h4,
[data-theme="amber-coast"] .footer-warm h4,
[data-theme="amber-coast"] .site-footer h4 {
  color: rgba(251, 247, 243, 0.90);
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

[data-theme="amber-coast"] .footer p,
[data-theme="amber-coast"] .footer-warm p,
[data-theme="amber-coast"] .site-footer p {
  color: rgba(251, 247, 243, 0.72);
}

[data-theme="amber-coast"] .footer a,
[data-theme="amber-coast"] .footer-warm a,
[data-theme="amber-coast"] .site-footer a {
  color: rgba(251, 247, 243, 0.78);
  text-decoration: none;
  transition: color 0.15s ease;
}

[data-theme="amber-coast"] .footer a:hover,
[data-theme="amber-coast"] .footer-warm a:hover,
[data-theme="amber-coast"] .site-footer a:hover {
  color: #FBF7F3;
  text-decoration: underline;
}

[data-theme="amber-coast"] .footer-nap,
[data-theme="amber-coast"] .footer__nap {
  color: rgba(251, 247, 243, 0.72);
}

[data-theme="amber-coast"] .footer-bottom,
[data-theme="amber-coast"] .footer__bottom {
  border-top: 1px solid rgba(251, 247, 243, 0.12);
  color: rgba(251, 247, 243, 0.45);
  font-size: 0.78rem;
}

/* ---- 23. STICKY CALL BAR --------------------------------- */
[data-theme="amber-coast"] .sticky-mobile-call-bar {
  background: var(--hm-brand-dark);
}

[data-theme="amber-coast"] .sticky-call {
  background: var(--hm-brand);
  color: #FBF7F3;
  border-radius: var(--hm-radius-xl);
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  min-height: 44px;
}

[data-theme="amber-coast"] .sticky-call:hover {
  background: var(--hm-brand-dark);
}

/* ---- 24. SECTION TITLE HEADINGS — CENTRED for services ---- */
[data-theme="amber-coast"] .section-title h2 {
  color: var(--hm-ink);
}

[data-theme="amber-coast"] .section-title p {
  color: var(--hm-ink-body);
}

/* Services section: eyebrow + heading centred — Item 1 */
[data-theme="amber-coast"] #services .section-title,
[data-theme="amber-coast"] #services .section-title--center {
  text-align: center;
  margin-inline: auto;
  /* If used as flex container, centre children on cross axis */
  align-items: center;
}

/* Eyebrow is inline-flex; justify-content centres the tick + text within it.
   text-align: center on the parent already centres it as a block. */
[data-theme="amber-coast"] #services .section-title .eyebrow {
  justify-content: center;
}

/* h2 and p inside services section-title: block-level, inherit text-align:center */
[data-theme="amber-coast"] #services .section-title h2,
[data-theme="amber-coast"] #services .section-title p {
  text-align: center;
  margin-inline: auto;
}

/* ---- 24b. CTA BAND — near-white text + near-white button ---- */
/* Band heading and subtext: near-white (#FBF7F3) on slate band (#685E4F).
   WCAG AA: #FBF7F3 on #685E4F = 5.9:1 (AA+). */
[data-theme="amber-coast"] .cta-band {
  background: var(--hm-brand);
}

[data-theme="amber-coast"] .cta-band h2 {
  color: #FBF7F3;
}

[data-theme="amber-coast"] .cta-band p {
  color: rgba(251, 247, 243, 0.82);
}

/* Primary Book/Request CTA in the band: near-white bg, slate text.
   WCAG AA: #685E4F on #FBF7F3 ≈ 7.0:1 (AA+). */
[data-theme="amber-coast"] .cta-band .btn-primary {
  background: #FBF7F3;
  color: var(--hm-brand);
  border-radius: var(--hm-radius-xl);
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  border: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background 0.18s ease, color 0.18s ease;
}

[data-theme="amber-coast"] .cta-band .btn-primary:hover {
  background: var(--hm-surface-alt);
  color: var(--hm-brand-dark);
}

[data-theme="amber-coast"] .cta-band .btn-ghost {
  border-color: rgba(251, 247, 243, 0.45);
  color: #FBF7F3;
}

[data-theme="amber-coast"] .cta-band .btn-ghost:hover {
  border-color: #FBF7F3;
  background: rgba(251, 247, 243, 0.10);
}

/* ---- 25. REVEAL ANIMATIONS + REDUCED MOTION -------------- */
[data-theme="amber-coast"] [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-theme="amber-coast"] [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-theme="amber-coast"] [data-reveal][data-delay="1"] { transition-delay: 80ms; }
[data-theme="amber-coast"] [data-reveal][data-delay="2"] { transition-delay: 160ms; }
[data-theme="amber-coast"] [data-reveal][data-delay="3"] { transition-delay: 240ms; }
[data-theme="amber-coast"] [data-reveal][data-delay="4"] { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  [data-theme="amber-coast"] [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-theme="amber-coast"] .hm-marquee__track {
    animation: none !important;
  }
}

/* ---- 26. INSTAGRAM FEED ---------------------------------- */
[data-theme="amber-coast"] .ig-feed__tile {
  border-radius: var(--hm-radius);
  overflow: hidden;
}

[data-theme="amber-coast"] .ig-feed__tile:hover img {
  transform: scale(1.04);
}

[data-theme="amber-coast"] .ig-feed__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

/* ---- 27. FOOTER SCROLL-REVEAL (fixed-behind-content) ------- */
/* The footer is positioned FIXED at the bottom of the viewport, behind the
   page content (z-index below the main content wrapper). The main content
   block gets a bottom-margin equal to the footer height so the layout still
   has the correct total scroll height — the footer is only "revealed" once
   the user has scrolled all the way to the bottom.

   Implementation:
   - footer: position:fixed; bottom:0; left:0; right:0; z-index:0
   - .hm-page-content (a wrapper div added by generate.ts around the main
     content, ABOVE the footer): position:relative; z-index:1; background:
     var(--hm-surface) so it covers the fixed footer when not at bottom.
     margin-bottom: equal to footer's estimated height.

   Mobile gate: only applies at ≥ 560px (--hm-footer-reveal-on). On mobile
   the fixed approach can be fragile with viewport address bars and bouncing
   scroll, so below the breakpoint the footer reverts to normal in-flow.

   Footer height: ~360px desktop (content), ~280px estimated minimum.
   We use CSS custom property --hm-footer-h for responsive sizing.

   WCAG: the fixed footer is still in the DOM, accessible by tab order and
   screen readers. Only the visual presentation changes. */

/* Footer reveal is DESKTOP/TABLET only (>=641px). On mobile the footer is a
   normal in-flow footer (operator: mobile = pinned hero only, no footer reveal). */
@media (min-width: 641px) {
  [data-theme="amber-coast"] .footer,
  [data-theme="amber-coast"] .site-footer,
  [data-theme="amber-coast"] .footer-warm {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;   /* behind .hm-page-content (z-index:1) */
    /* Override any border-top that creates a gap */
    border-top: none;
  }

  /* The page-content wrapper (injected by generate.ts for harbour-mist).
     Sits above the fixed footer. Solid surface background hides the footer
     until the user has scrolled enough to expose it.
     bottom-margin = footer estimated height so scroll stops at correct position. */
  [data-theme="amber-coast"] .hm-page-content {
    position: relative;
    z-index: 1;
    background: var(--hm-surface);
    /* Always cover the full viewport so SHORT pages (e.g. the services/about/
       contact sub-pages) still hide the fixed footer behind the page surface.
       Without this, a page shorter than the viewport leaves empty space below
       the content where the fixed footer shows through at the top. */
    min-height: 100vh;
    /* Estimated footer height — should be ~360px.
       CSS can't know the exact rendered height without JS, so we use a
       generous estimate. If the footer is taller on some builds, the gap
       is invisible (fixed footer is still below). A JS snippet in the
       template adjusts this at runtime for accuracy. */
    margin-bottom: var(--hm-footer-margin, 360px);
  }
}

/* ---- Mobile (≤640px): pinned hero photo + short hero + compact footer ---
   APPROACH (option 3): the home hero is capped at 44svh so it is always
   shorter than (viewportH − footerH). The transparent hero sits entirely
   ABOVE the fixed footer and never reveals it; the opaque .hm-page-content
   wrapper (which starts AFTER the hero in the DOM on index.html) covers the
   footer once the user scrolls past it.

   Geometry proof (iPhone SE, 375×667 — tightest case):
     hero cap   = 44svh ≈ 293px
     footer cap ≈ 310px  (brand row ~70px + cols row ~115px + bottom ~40px + 28px pad)
     293 + 310 = 603 < 667 ✓ (64px of clear space at scroll 0)

   Implementation:
   - body::before: fixed pseudo shows the hero photo at exactly --hm-hero-h
     (set by setHeroH() JS). Covers only the hero region, not the footer.
   - .hero--split: transparent + position:relative so its content renders
     above the fixed photo layer.
   - .hero--split height capped at 44svh (svh fallback to 44vh for older iOS).
   - Content inside the hero scaled down so everything fits — verified not clipped.
   - Footer grid: 3-column on mobile, footer-brand spans all 3, footer-cols each
     get 1 column so they fit in ONE row and the footer is compact (~280-320px).
   - Footer CTA band: centred, single column.

   Desktop is UNCHANGED — all rules below are scoped to (max-width: 640px).
   Other themes are UNAFFECTED — all selectors include [data-theme="amber-coast"].
   WCAG: colour contrast unchanged; prefers-reduced-motion respected (the pinned
   photo is static, not animated). */
@media (max-width: 640px) {
  /* MOBILE: pin the hero photo only. The footer is a normal in-flow footer here
     (the footer reveal is DESKTOP-only — see the min-width:641px gate above).
     The hero photo is a body-root fixed ::before at z-index:0 (the iOS-reliable
     form of position:fixed). The hero is transparent so the photo shows through;
     the page-content wrapper is transparent but kept above the photo (z-index:1)
     so its opaque sections scroll over the pinned photo; the footer sits above
     the photo too and scrolls in normally at the bottom. With no fixed footer on
     mobile there is nothing to clash with the pinned hero. */

  /* Fixed hero photo at the body root. Oversized by 32px each side so the
     clarity blur (filter) doesn't fade to transparent at the viewport edges. */
  [data-theme="amber-coast"] body[style*="--hero-bg"]::before {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    top: -32px !important;
    left: -32px !important;
    width: calc(100vw + 64px) !important;
    height: calc(100vh + 64px) !important;
    height: calc(100svh + 64px) !important;
    background-image:
      linear-gradient(to bottom,
        rgba(var(--hm-hero-ink-rgb),  0.18) 0%,
        rgba(var(--hm-hero-tint-rgb), calc(0.82 * var(--hm-hero-strength))) 58%,
        rgba(var(--hm-hero-ink-rgb),  0.66) 100%),
      var(--hero-bg) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    -webkit-filter: blur(calc(22px * (1 - var(--hm-hero-clarity)))) !important;
    filter: blur(calc(22px * (1 - var(--hm-hero-clarity)))) !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }
  /* Hero transparent so the fixed photo shows through. */
  [data-theme="amber-coast"] body[style*="--hero-bg"] .hero--split,
  [data-theme="amber-coast"] .hero--split[style*="--hero-bg"] {
    background-image: none !important;
    background-color: transparent !important;
  }
  /* No-photo heroes keep their slate gradient and just scroll. */
  [data-theme="amber-coast"] .hero--split:not([style*="--hero-bg"]) {
    background-attachment: scroll !important;
  }

  /* Page wrapper: transparent ONLY over the hero (so the pinned photo shows
     through there), then opaque surface from the hero's bottom edge downward.
     The opaque lower portion covers the fixed photo as you scroll AND fills the
     gap between the hero's white wave and the next section (the rotated marquee
     has a 4rem top margin) — without it that gap leaks the photo and the white
     wave looks detached/floating. --hm-hero-h is measured by setHeroH() in the
     template JS; 60vh is a sane fallback before/without JS. */
  [data-theme="amber-coast"] .hm-page-content {
    position: relative;
    z-index: 1;
    background: linear-gradient(
      to bottom,
      transparent 0,
      transparent var(--hm-hero-h, 60vh),
      var(--hm-surface) var(--hm-hero-h, 60vh)
    );
  }
  /* Footer: normal in-flow, above the fixed photo. */
  [data-theme="amber-coast"] .footer,
  [data-theme="amber-coast"] .site-footer,
  [data-theme="amber-coast"] .footer-warm {
    position: relative;
    z-index: 1;
  }

  /* CTA band: stack to one column and centre the text + button. */
  [data-theme="amber-coast"] .cta-band {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  [data-theme="amber-coast"] .cta-band h2,
  [data-theme="amber-coast"] .cta-band p {
    margin-left: auto;
    margin-right: auto;
  }
  [data-theme="amber-coast"] .cta-band__actions {
    display: flex;
    justify-content: center;
    width: 100%;
  }
}

/* ---- end amber-coast ------------------------------------- */

/* ============================================================
   THEME: sage-stone
   Muted sage-green for home services and cleaning.
   Palette: sage #5F7A66 brand, #F6F9F6 cool-white surface,
   #1F2A24 deep green ink. Fraunces serif headings,
   Work Sans body/UI, Oswald display/eyebrows, Caveat script wordmark.
   Signature: DIAGONAL hero slant (no curve), NO marquee banner.
   ============================================================ */

/* ---- 1. Design tokens ------------------------------------- */
[data-theme="sage-stone"] {
  /* Brand palette */
  --hm-brand:          #5F7A66;   /* dusty slate-blue: nav bar, buttons, footer */
  --hm-brand-dark:     #4C6553;   /* hover / deeper shade */
  --hm-brand-muted:    #8AA391;   /* lighter slate accent */
  --hm-brand-mist:     #BDD0C4;   /* lightest slate — borders, muted text */

  /* Ink */
  --hm-ink:            #1F2A24;   /* slightly slate-tinted dark — headings */
  --hm-ink-body:       #65726A;   /* body text (slate-tinted grey) */
  --hm-ink-soft:       #4B554E;   /* secondary text */

  /* Surfaces */
  --hm-surface:        #F6F9F6;   /* page surface — NOT pure white */
  --hm-surface-alt:    #EAF0EB;   /* cool light grey — card / section-alt bg */
  --hm-surface-deep:   #5F7A66;   /* dark slate — footer, overlays */

  /* Lines / borders */
  --hm-line:           #D9E3DC;
  --hm-line-alpha:     rgba(95, 122, 102, 0.10);

  /* Shadow tokens */
  --hm-shadow-sm:      0 2px 8px -2px rgba(34, 40, 46, 0.09);
  --hm-shadow-card:    0 4px 20px -6px rgba(34, 40, 46, 0.14);
  --hm-shadow-float:   0 40px 120px -40px rgba(34, 40, 46, 0.23);

  /* Radius */
  --hm-radius-sm:      10px;
  --hm-radius:         20px;      /* cards, rectangular buttons */
  --hm-radius-xl:      200px;     /* pill CTAs, eyebrow chips, rating pills */

  /* Container */
  --hm-container:      1140px;

  /* Map to shared tokens so base rules still fire */
  --color-primary:     #5F7A66;
  --color-accent:      #5F7A66;
  --color-ink:         #1F2A24;
  --color-ink-soft:    #65726A;
  --color-ink-faint:   #BDD0C4;
  --color-surface:     #F6F9F6;
  --color-surface-2:   #EAF0EB;
  --color-surface-warm: #EAF0EB;
  --color-line:        rgba(95, 122, 102, 0.10);
  --color-line-strong: rgba(95, 122, 102, 0.18);

  /* Font stack tokens */
  --font-heading: '"Fraunces", Georgia, serif';
  --font-body:    '"Work Sans", ui-sans-serif, system-ui, sans-serif';

  /* Geometry */
  --radius-sm:  10px;
  --radius:     20px;
  --radius-lg:  20px;
  --radius-xl:  200px;

  /* Elevation */
  --shadow-sm: var(--hm-shadow-sm);
  --shadow-md: var(--hm-shadow-card);
  --shadow-lg: var(--hm-shadow-float);

  /* Button tokens */
  --btn-primary-bg: var(--hm-brand);
  --btn-primary-fg: #F6F9F6;
  --menu-bg: var(--hm-brand);

  /* Hero photo overlay (tint/haze). Driven by the Brand-colours "Hero" control.
     --hm-hero-tint-rgb : the tint COLOUR (default = brand). Operator-overridable.
     --hm-hero-ink-rgb  : neutral dark used at top/bottom for text legibility.
     --hm-hero-strength : brand-hue intensity 0..1 (0 = no colour on the hero).
     --hm-hero-clarity  : photo sharpness 0..1 (1 = completely clear/sharp,
                          0 = completely blurred). Blur = 22px * (1 - clarity).
     Tint alpha = base * strength; ink alpha = base (legibility, constant). */
  --hm-hero-tint-rgb: 95, 122, 102;
  --hm-hero-ink-rgb:  31, 42, 36;
  --hm-hero-strength: 0.8;
  --hm-hero-clarity:  1;
}

/* ---- 2. Clip overflow (marquee only — NOT html/body, which would break sticky nav) */
/* overflow-x: clip does NOT create a scroll container, so position:sticky on .nav keeps working.
   The marquee's own container clips its horizontal overflow independently (see section 9). */
[data-theme="sage-stone"],
[data-theme="sage-stone"] body {
  overflow-x: clip;
}

/* ---- 3. Body --------------------------------------------- */
[data-theme="sage-stone"] body {
  background: var(--hm-surface);
  color: var(--hm-ink-body);
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  /* No overflow-x here — clip on <html> is sufficient and does not block sticky */
}

[data-theme="sage-stone"] p {
  color: var(--hm-ink-body);
  line-height: 1.6;
  max-width: 68ch;
}

/* ---- 4. Headings — Quattrocento serif --------------------- */
[data-theme="sage-stone"] h1,
[data-theme="sage-stone"] h2,
[data-theme="sage-stone"] h3 {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--hm-ink);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

[data-theme="sage-stone"] h1 {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

[data-theme="sage-stone"] h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.9rem);
  font-weight: 700;
}

[data-theme="sage-stone"] h3 {
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  font-weight: 700;
}

[data-theme="sage-stone"] h4 {
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--hm-ink);
}

/* Display / eyebrow font — Smooch Sans condensed */
[data-theme="sage-stone"] h5 {
  font-family: 'Oswald', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hm-brand-muted);
}

[data-theme="sage-stone"] h6 {
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--hm-ink-soft);
}

/* ---- 5. Section eyebrow — Smooch Sans condensed uppercase -- */
[data-theme="sage-stone"] .eyebrow {
  font-family: 'Oswald', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hm-brand-muted);
  background: transparent;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.9rem;
}

/* Tick mark before eyebrow */
[data-theme="sage-stone"] .eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 2px;
  background: var(--hm-brand-muted);
  flex-shrink: 0;
}

/* ---- 6. TOP CONTACT BAR ----------------------------------- */
/* Reference layout: full-width #5F7A66 slate strip.
   LEFT: phone number (Call or text) + location pin + locality.
   RIGHT: small navigation links (About Us · Work With Us · Privacy & Terms).
   Poppins 500, 0.78rem, near-white text. */
.hm-topbar {
  display: none;   /* hidden by default; shown for harbour-mist */
  background: var(--hm-brand);
  color: rgba(246, 249, 246, 0.82);
}

[data-theme="sage-stone"] .hm-topbar {
  display: block;
  /* The hero pulls up behind the header (position:relative), which would paint
     OVER this static strip. Give the slate top bar a positioned stacking order
     above the hero + nav so it stays visible as the topmost strip. */
  position: relative;
  z-index: 40;
}

.hm-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.3rem 0;
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  max-width: var(--hm-container);
  margin: 0 auto;
  padding-inline: 1.5rem;
}

/* Left group: phone + divider + locality */
.hm-topbar__left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Right group: small nav links */
.hm-topbar__right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-shrink: 0;
}

.hm-topbar__right a {
  color: rgba(246, 249, 246, 0.75);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 500;
  transition: color 0.15s ease;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.hm-topbar__right a:hover {
  color: #F6F9F6;
}

.hm-topbar__divider {
  opacity: 0.35;
  flex-shrink: 0;
}

.hm-topbar__locality {
  display: flex;
  align-items: center;
  gap: 0.3em;
  color: rgba(246, 249, 246, 0.82);
}

/* Location pin icon before locality */
.hm-topbar__locality::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 13px;
  background: currentColor;
  opacity: 0.7;
  /* SVG location pin shape via clip-path */
  clip-path: path('M5 0C2.24 0 0 2.24 0 5c0 3.75 5 8 5 8s5-4.25 5-8C10 2.24 7.76 0 5 0zm0 6.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z');
  transform: scale(0.9);
  transform-origin: center;
}

.hm-topbar__phone {
  color: rgba(246, 249, 246, 0.92);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s ease;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.hm-topbar__phone::before {
  content: "Call or text  ";
  font-weight: 400;
  opacity: 0.78;
}

.hm-topbar__phone:hover {
  color: #F6F9F6;
}

/* Hide the secondary nav links on very small screens to avoid overflow */
@media (max-width: 640px) {
  .hm-topbar__right {
    display: none;
  }
  .hm-topbar__phone::before {
    display: none;
  }
}

/* ---- 7. NAV — transparent at top, frosted when scrolled ---- */
/* AT TOP OF PAGE: transparent background so the hero image shows through.
   Nav text + logo are DARK (#1F2A24) for contrast against the light scrim
   added by the hero ::before gradient (rgba(246, 249, 246,0.78) top→transparent).
   WCAG AA check: #1F2A24 on rgba(246, 249, 246,0.78) blended over hero image.
   Effective scrim bg ≈ #EEF4EF → contrast #1F2A24/#EEF4EF ≈ 13.5:1 (AAA). ✓

   WHEN SCROLLED (.is-scrolled applied by inline JS):
   Frosted near-white background rgba(246, 249, 246,0.82) + blur(10px).
   Nav text: slate ink (#1F2A24) — same as at-top, no visual jump.
   WCAG AA: #1F2A24 on rgba(246, 249, 246,0.82) → ≈ #F2F4F4 → contrast ≈ 14.1:1 (AAA). ✓
*/

[data-theme="sage-stone"] .nav {
  /* At-top: fully transparent background, dark text */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Scrolled state — frosted near-white, dark text (unchanged) */
[data-theme="sage-stone"] .nav.is-scrolled {
  background: rgba(246, 249, 246, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hm-line);
  box-shadow: 0 2px 12px -4px rgba(34, 40, 46, 0.08);
}

/* At-top state: brand/logo is DARK with a soft light halo (no scrim — keeps the
   nav background fully transparent while staying readable over the hero). */
[data-theme="sage-stone"] .nav:not(.is-scrolled) .nav-brand,
[data-theme="sage-stone"] .nav:not(.is-scrolled) .nav__logo,
[data-theme="sage-stone"] .nav:not(.is-scrolled) .nav-brand--monogram {
  color: var(--hm-ink);
  text-shadow: 0 1px 12px rgba(246, 249, 246, 0.6), 0 0 2px rgba(246, 249, 246, 0.55);
}

[data-theme="sage-stone"] .nav:not(.is-scrolled) .nav-brand--monogram .nav-brand__mark {
  background: rgba(31, 42, 36, 0.08);
  color: var(--hm-ink);
}

/* Scrolled state: brand/logo stays slate ink */
[data-theme="sage-stone"] .nav.is-scrolled .nav-brand,
[data-theme="sage-stone"] .nav.is-scrolled .nav__logo {
  color: var(--hm-ink);
}

/* Base nav brand colour (fallback / mobile) — dark slate ink */
[data-theme="sage-stone"] .nav-brand,
[data-theme="sage-stone"] .nav__logo {
  color: var(--hm-ink);
  transition: color 0.3s ease;
}

/* At-top nav links: DARK text with a soft light halo (transparent nav bg). */
[data-theme="sage-stone"] .nav:not(.is-scrolled) .nav-links a,
[data-theme="sage-stone"] .nav:not(.is-scrolled) .nav__link {
  color: var(--hm-ink);
  text-shadow: 0 1px 12px rgba(246, 249, 246, 0.6), 0 0 2px rgba(246, 249, 246, 0.55);
}

[data-theme="sage-stone"] .nav:not(.is-scrolled) .nav-links a:hover,
[data-theme="sage-stone"] .nav:not(.is-scrolled) .nav__link:hover,
[data-theme="sage-stone"] .nav:not(.is-scrolled) .nav-links a.is-active {
  color: var(--hm-brand);
}

/* Scrolled nav links: slate ink (same as at-top — consistent) */
[data-theme="sage-stone"] .nav.is-scrolled .nav-links a,
[data-theme="sage-stone"] .nav.is-scrolled .nav__link {
  color: var(--hm-ink);
}

[data-theme="sage-stone"] .nav.is-scrolled .nav-links a:hover,
[data-theme="sage-stone"] .nav.is-scrolled .nav__link:hover,
[data-theme="sage-stone"] .nav.is-scrolled .nav-links a.is-active {
  color: var(--hm-brand);
}

[data-theme="sage-stone"] .nav-links a,
[data-theme="sage-stone"] .nav__link {
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--hm-ink);
  text-decoration: none;
  transition: color 0.15s ease;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Brand wordmark: elegant cursive script (Dancing Script 700) when rendered
   as text (i.e. no customer logo image). This applies only when there is no
   <img> inside .nav-brand — customer sites with an uploaded logo image are
   unaffected because their logo img src overrides the font rendering.
   WCAG AA: var(--hm-ink) #1F2A24 on nav scrim (#EEF4EF) ≈ 13.5:1 (AAA). ✓ */
[data-theme="sage-stone"] .nav-brand:not(:has(img)),
[data-theme="sage-stone"] .nav__logo:not(:has(img)) {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: 0.01em;
  line-height: 1;
}

/* Poppins UI — nav links 500 weight, title-case ----------------------- */

/* Primary pill CTA in nav — "Book" / "Request a quote" — filled slate always */
[data-theme="sage-stone"] .nav .btn-primary,
[data-theme="sage-stone"] .nav-cta {
  background: var(--hm-brand);
  color: #F6F9F6;
  border-radius: var(--hm-radius-xl);
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.55em 1.5em;
  border: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: background 0.18s ease;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

[data-theme="sage-stone"] .nav .btn-primary:hover,
[data-theme="sage-stone"] .nav-cta:hover {
  background: var(--hm-brand-dark);
}

/* Phone / Call CTA pill in nav — white background, slate text.
   WCAG AA: #5F7A66 on #F6F9F6 = ~7.0:1 (AA+). */
[data-theme="sage-stone"] .nav .nav-call,
[data-theme="sage-stone"] .nav-call.btn-ghost {
  background: #F6F9F6 !important;
  color: var(--hm-brand) !important;
  border: none !important;
  border-radius: var(--hm-radius-xl) !important;
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  padding: 0.55em 1.5em !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: background 0.18s ease, color 0.18s ease !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

[data-theme="sage-stone"] .nav .nav-call:hover,
[data-theme="sage-stone"] .nav-call.btn-ghost:hover {
  background: var(--hm-surface-alt) !important;
  color: var(--hm-brand-dark) !important;
}

/* Mobile hamburger legibility */
[data-theme="sage-stone"] .nav-toggle > summary {
  border-color: var(--hm-line);
  background: var(--hm-surface-alt);
}
[data-theme="sage-stone"] .nav-toggle > summary::after {
  background: var(--hm-ink);
  box-shadow: 0 -5px 0 var(--hm-ink), 0 5px 0 var(--hm-ink);
}
[data-theme="sage-stone"] .nav-toggle[open] > summary::before {
  color: var(--hm-ink);
}

/* Mobile panel */
[data-theme="sage-stone"] .nav-mobile-panel {
  background: #F6F9F6;
  border-color: var(--hm-line);
}
[data-theme="sage-stone"] .nav-mobile-panel a {
  color: var(--hm-ink);
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  min-height: 44px;
  display: flex;
  align-items: center;
}
[data-theme="sage-stone"] .nav-mobile-panel a:hover {
  background: rgba(95, 122, 102, 0.08);
  color: var(--hm-brand);
}
[data-theme="sage-stone"] .nav-mobile-panel .nav-cta-mobile {
  background: var(--hm-brand);
  color: #F6F9F6;
  border-radius: var(--hm-radius-xl);
  font-weight: 600;
}

/* ---- 8. HERO — SMALLER + SVG WAVE BOTTOM DIVIDER ---------- */
/* Full-bleed hero with slate overlay and subtle SVG wave bottom edge.
   The home hero (.hero--split) is pulled UP behind the topbar+nav using a
   negative margin-top equal to --hm-header-h (set by inline JS; fallback 130px
   for the nav alone). Padding-top is increased by the same amount so hero
   content still clears the nav. This keeps topbar+nav in normal flow (sticky
   works) while the hero photo fills the space behind the transparent nav.
   Sub-page .hero--simple heroes do NOT get the pull-up (handled separately).
   Mobile: shallower wave (less amplitude SVG). */
[data-theme="sage-stone"] .hero,
[data-theme="sage-stone"] .hero--split {
  position: relative;
  /* No-image fallback: medium slate-mist treatment — refined and airy. */
  background-color: var(--hm-brand-muted);
  background-image:
    linear-gradient(
      175deg,
      #C8D8DC 0%,
      #A4BCC4 30%,
      var(--hm-brand-muted) 60%,
      var(--hm-brand) 100%
    );
  background-size: cover;
  background-position: center;
  color: #F6F9F6;
  /* Pull the hero UP behind the transparent nav/topbar so the nav overlays
     the hero photo, not the white page background.
     --hm-header-h is set by the inline JS below (fallback: 130px for nav alone).
     padding-top is increased by the same amount to push content below the nav. */
  margin-top: calc(-1 * var(--hm-header-h, 130px));
  padding-top: calc(2rem + var(--hm-header-h, 130px));
  padding-bottom: 4.4rem;       /* leaves room for the ~70px wave */
  min-height: 0 !important;     /* override multipage min-height: min(86vh, 780px) */
  /* No clip-path — wave SVG handles the bottom shape */
  clip-path: none;
  overflow: visible;
}

/* Tighten the hero content stack so the section is compact (operator: ~30% smaller). */
[data-theme="sage-stone"] .hero .hero-grid > *,
[data-theme="sage-stone"] .hero--split .hero-grid > * {
  margin-top: 0.55rem;
  margin-bottom: 0;
}
[data-theme="sage-stone"] .hero .hero-lede,
[data-theme="sage-stone"] .hero--split .hero-lede {
  margin-top: 0.6rem;
}
[data-theme="sage-stone"] .hero .hero-cta,
[data-theme="sage-stone"] .hero--split .hero-cta {
  margin-top: 1rem;
}

/* SVG wave divider at hero bottom.
   Implemented as a real inline <svg class="hm-hero-wave"> element (injected by
   generate.ts for harbour-mist only). Using a real element instead of ::after
   background-image guarantees rendering across all Chromium/WebKit/Firefox builds
   without SVG data-URI encoding pitfalls.
   Symmetric arch: edges at y=50, centre peak at y=8 in the 70px viewBox.
   The #F6F9F6 fill creates a clear upward arch — page surface "emerging" from hero.
   z-index 2 sits above hero content (z-index 1). */
.hm-hero-wave {
  display: none;  /* hidden by default; shown for harbour-mist only */
}
[data-theme="sage-stone"] .hm-hero-wave {
  display: block;
  position: absolute;
  bottom: -1px;   /* -1px to seal any sub-pixel gap */
  left: 0;
  width: 100%;
  height: 70px;
  pointer-events: none;
  z-index: 2;
}

/* Keep ::after as a no-op for harbour-mist (real element handles the wave) */
[data-theme="sage-stone"] .hero::after,
[data-theme="sage-stone"] .hero--split::after {
  content: "";
  display: none;
}

/* Hero top scrim: light-to-transparent gradient covering the top ~120px.
   Sits BEHIND the nav (z-index 1) and ABOVE the hero image/bg (z-index 0).
   Makes the nav's dark text (#1F2A24) clearly readable at the very top of the page.
   WCAG AA: #1F2A24 on rgba(246, 249, 246,0.78) ≈ #EEF4EF → contrast ≈ 13.5:1 (AAA). ✓
   Does NOT obscure the hero image — gradient fades to transparent at ~120px. */
/* Operator: nav background must be COMPLETELY transparent at the top — no scrim.
   The hero top is left untouched; nav-text readability is handled by a soft
   light text-halo on the at-top nav text instead of a background wash. */
[data-theme="sage-stone"] .hero::before,
[data-theme="sage-stone"] .hero--split::before {
  display: none !important;
}

/* Full-bleed layout for harbour-mist: suppress the 2-column hero-grid split.
   The hero content (headline + CTAs) sits in a single left-aligned column
   at the lower portion of the hero where the gradient is darkest (best contrast).
   We push the content down via flex column + margin-top: auto so it anchors
   towards the bottom of the hero area, matching the reference layout. */
[data-theme="sage-stone"] .hero > .container,
[data-theme="sage-stone"] .hero--split > .container {
  /* Operator: smaller hero. Don't stretch the container to a min-height — let it
     hug its content so the hero height = content + the (reduced) padding. */
  display: block;
  min-height: 0;
}

[data-theme="sage-stone"] .hero .hero-grid,
[data-theme="sage-stone"] .hero--split .hero-grid {
  display: block;
  max-width: 620px;
  padding-bottom: 1rem;
}

/* When a hero image is set: full-bleed photo + slate overlay tint (~0.65).
   The overlay keeps white headline text at WCAG AA over any photo.
   Photo on the element; the colour overlay + photo blur live on ::before
   (desktop) so the hero text stays sharp. */
[data-theme="sage-stone"] body[style*="--hero-bg"] .hero,
[data-theme="sage-stone"] body[style*="--hero-bg"] .hero--split,
[data-theme="sage-stone"] .hero[style*="--hero-bg"],
[data-theme="sage-stone"] .hero--split[style*="--hero-bg"] {
  background-color: var(--hm-brand);
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
}

/* Desktop hero overlay + photo blur on ::before so the hero TEXT stays sharp.
   The tint gradient is the visible colour overlay; backdrop-filter blurs the
   hero's background photo behind it (clarity 1 = no blur, 0 = 22px blur).
   Content (.container) is lifted to z-index:1 so it sits above this overlay.
   Mobile uses the fixed body::before instead (see the max-width:640 block). */
@media (min-width: 641px) {
  [data-theme="sage-stone"] body[style*="--hero-bg"] .hero--split::before,
  [data-theme="sage-stone"] .hero--split[style*="--hero-bg"]::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      linear-gradient(to bottom,
        rgba(var(--hm-hero-ink-rgb),  0.16) 0%,
        rgba(var(--hm-hero-tint-rgb), calc(0.80 * var(--hm-hero-strength))) 58%,
        rgba(var(--hm-hero-ink-rgb),  0.62) 100%);
    -webkit-backdrop-filter: blur(calc(22px * (1 - var(--hm-hero-clarity))));
    backdrop-filter: blur(calc(22px * (1 - var(--hm-hero-clarity))));
  }
  [data-theme="sage-stone"] .hero--split[style*="--hero-bg"] > .container,
  [data-theme="sage-stone"] body[style*="--hero-bg"] .hero--split > .container {
    position: relative;
    z-index: 1;
  }
}

/* Hero text — light on slate */
[data-theme="sage-stone"] .hero h1,
[data-theme="sage-stone"] .hero--split h1 {
  color: #F6F9F6;
  text-shadow: 0 2px 16px rgba(34, 40, 46, 0.28);
  /* Operator: smaller hero — reduced headline so the section is ~30% shorter. */
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.08;
  font-weight: 700;
}

[data-theme="sage-stone"] .hero .hero-lede,
[data-theme="sage-stone"] .hero--split .hero-lede {
  color: rgba(246, 249, 246, 0.82);
  text-shadow: none;
  opacity: 1;
}

[data-theme="sage-stone"] .hero .eyebrow,
[data-theme="sage-stone"] .hero--split .eyebrow {
  color: rgba(246, 249, 246, 0.72);
  font-family: 'Oswald', ui-sans-serif, system-ui, sans-serif;
}

[data-theme="sage-stone"] .hero .eyebrow::before,
[data-theme="sage-stone"] .hero--split .eyebrow::before {
  background: rgba(246, 249, 246, 0.55);
}

/* Hero meta — rating / locality */
[data-theme="sage-stone"] .hero-meta,
[data-theme="sage-stone"] .hero-meta span {
  color: rgba(246, 249, 246, 0.80);
}

/* Hero CTA buttons — pill shaped */
[data-theme="sage-stone"] .hero .btn-primary,
[data-theme="sage-stone"] .hero--split .btn-primary {
  background: #F6F9F6;
  color: var(--hm-brand);
  border-radius: var(--hm-radius-xl);
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  min-height: 44px;
  padding: 0.7em 1.8em;
  border: none;
  transition: background 0.18s ease, color 0.18s ease;
}

[data-theme="sage-stone"] .hero .btn-primary:hover,
[data-theme="sage-stone"] .hero--split .btn-primary:hover {
  background: var(--hm-surface-alt);
}

[data-theme="sage-stone"] .hero .btn-ghost,
[data-theme="sage-stone"] .hero--split .btn-ghost {
  background: transparent;
  color: #F6F9F6;
  border: 2px solid rgba(246, 249, 246, 0.55);
  border-radius: var(--hm-radius-xl);
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  min-height: 44px;
  padding: 0.7em 1.8em;
  transition: border-color 0.18s ease, background 0.18s ease;
}

[data-theme="sage-stone"] .hero .btn-ghost:hover,
[data-theme="sage-stone"] .hero--split .btn-ghost:hover {
  background: rgba(246, 249, 246, 0.12);
  border-color: rgba(246, 249, 246, 0.80);
}

/* hero-art (floating quote card) on the slate hero */
[data-theme="sage-stone"] .hero-art {
  background: rgba(95, 122, 102, 0.55);
  border: 1px solid rgba(246, 249, 246, 0.18);
  border-radius: var(--hm-radius);
}

[data-theme="sage-stone"] .hero-art__quote {
  background: rgba(246, 249, 246, 0.10);
  border-radius: var(--hm-radius-sm);
}

[data-theme="sage-stone"] .hero-art__text { color: rgba(246, 249, 246, 0.90); }
[data-theme="sage-stone"] .hero-art__author { color: rgba(246, 249, 246, 0.65); }

/* Multipage/advanced hero background + sizing — shared across home + sub-page.
   The base [data-theme="sage-stone"] .hero rule above sets min-height:0 !important
   which overrides the multipage default min-height:min(86vh,780px). */
[data-theme="sage-stone"]:is([data-package="multipage"], [data-package="advanced"]) .hero,
[data-theme="sage-stone"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple {
  background-color: var(--hm-brand-muted);
  background-image:
    linear-gradient(175deg, #C8D8DC 0%, #A4BCC4 30%, var(--hm-brand-muted) 60%, var(--hm-brand) 100%);
  color: #F6F9F6;
  clip-path: none;
  padding-bottom: 4.2rem;   /* room for the ~70px wave */
  min-height: 0 !important;
}

/* Sub-page simple hero: fixed padding-top (no nav pull-up — the topbar+nav sit
   above the page content for sub-pages, which is fine/expected). */
[data-theme="sage-stone"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple {
  padding-top: 1.5rem;
  /* Reset the pull-up applied by the base .hero/.hero--split rule above */
  margin-top: 0;
}

/* Home hero (.hero--split) in multipage: apply the nav pull-up so the hero
   extends behind the topbar+nav. Padding-top already set by the base rule
   (calc(2rem + var(--hm-header-h, 130px))). Override to use 1.5rem base
   so the multipage home hero is slightly more compact. */
[data-theme="sage-stone"]:is([data-package="multipage"], [data-package="advanced"]) .hero--split {
  margin-top: calc(-1 * var(--hm-header-h, 130px));
  padding-top: calc(1.5rem + var(--hm-header-h, 130px));
}

[data-theme="sage-stone"]:is([data-package="multipage"], [data-package="advanced"]) .hero h1,
[data-theme="sage-stone"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple h1 {
  color: #F6F9F6;
  text-shadow: 0 2px 12px rgba(34, 40, 46, 0.26);
  /* Operator: smaller hero. This multipage-scoped rule (0,3,0) must carry the
     headline size, or the base multipage .hero h1 (also 0,3,0) wins over the
     general harbour-mist .hero--split h1 (0,2,0). */
  font-size: clamp(1.9rem, 3.2vw, 2.9rem) !important;
  line-height: 1.1 !important;
}

/* Suppress scrim (::before) on sub-page SIMPLE hero only.
   The home .hero--split keeps its scrim for dark-nav-text legibility at top. */
[data-theme="sage-stone"]:is([data-package="multipage"], [data-package="advanced"]) .hero--simple::before {
  display: none !important;
}

/* Mobile hero: shallower wave amplitude */
@media (max-width: 780px) {
  [data-theme="sage-stone"] .hero,
  [data-theme="sage-stone"] .hero--split {
    clip-path: none;
    padding-bottom: 4.5rem;
  }
  /* Mobile: shallower wave height on the real SVG element */
  [data-theme="sage-stone"] .hm-hero-wave {
    height: 50px;
  }
}

/* ---- 9. ROTATED MARQUEE STRIP ----------------------------- */
/* Harbour-mist signature: full-bleed slate band, condensed uppercase text,
   rotated ~-3deg on its own stacking context, scrolling indefinitely.
   Reduced-motion: animation is removed; text still visible, static. */
.hm-marquee {
  display: none;  /* hidden by default; shown for harbour-mist only */
}

[data-theme="sage-stone"] .hm-marquee {
  display: block;
  background: var(--hm-brand);
  overflow: hidden;
  padding: 1.25rem 0;  /* reduced from 2.5rem — slims the band so it sits cleanly below hero */
  transform: rotate(-3deg);
  transform-origin: center center;
  /* Positive margin-top ensures the marquee starts BELOW the hero wave.
     Previously -0.5rem pulled the band up into the hero by ~50px.
     4rem gives ~64px clearance from the hero's bottom edge to the marquee top. */
  margin-top: 4rem;
  margin-bottom: -0.5rem;
  /* Extend past viewport edges so rotation doesn't leave gaps */
  margin-inline: -5vw;
  width: calc(100% + 10vw);
  position: relative;
  z-index: 1;
  /* Ensure no body overflow-x shows */
}

[data-theme="sage-stone"] .hm-marquee__track {
  display: flex;
  gap: 0;
  white-space: nowrap;
  animation: hm-marquee-scroll 38s linear infinite;
  font-family: 'Oswald', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.1rem, 2.2vw, 1.8rem);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(246, 249, 246, 0.80);
  will-change: transform;
}

[data-theme="sage-stone"] .hm-marquee__track span {
  display: inline-block;
  padding-right: 3rem;
}

@keyframes hm-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="sage-stone"] .hm-marquee__track {
    animation: none;
  }
}

/* ---- 10. BUTTONS (global) --------------------------------- */
[data-theme="sage-stone"] .btn-primary {
  background: var(--hm-brand);
  color: #F6F9F6;
  border-radius: var(--hm-radius-xl);
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  border: none;
  padding: 0.7em 1.8em;
  min-height: 44px;
  transition: background 0.18s ease;
}

[data-theme="sage-stone"] .btn-primary:hover {
  background: var(--hm-brand-dark);
}

[data-theme="sage-stone"] .btn-ghost {
  background: transparent;
  color: var(--hm-brand);
  border: 2px solid var(--hm-brand);
  border-radius: var(--hm-radius-xl);
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  padding: 0.7em 1.8em;
  min-height: 44px;
  transition: background 0.18s ease, color 0.18s ease;
}

[data-theme="sage-stone"] .btn-ghost:hover {
  background: var(--hm-brand);
  color: #F6F9F6;
}

/* ---- 11. SECTION COLOURS ---------------------------------- */
[data-theme="sage-stone"] .section-alt,
[data-theme="sage-stone"] .section-warm {
  background: var(--hm-surface-alt);
  border-color: var(--hm-line);
}

[data-theme="sage-stone"] .section-title p {
  color: var(--hm-ink-body);
}

/* ---- 11b. .grid-3 container reset for harbour-mist -------- */
/* When .grid-3 contains .hm-services-grid, the outer .grid-3 should not
   impose its own 3-column layout — the inner .hm-services-grid owns the grid. */
[data-theme="sage-stone"] .grid-3:has(.hm-services-grid) {
  display: block;
  gap: 0;
}

/* Fallback for browsers without :has() — the hm-services-grid is
   a full-width block child, so setting the outer grid to display:contents
   would collapse it. Instead override grid-template-columns so the
   outer .grid-3 single cell spans full width. */
@supports not selector(:has(.hm-services-grid)) {
  [data-theme="sage-stone"] .grid-3 {
    display: block;
  }
}

/* ---- 12. SERVICE FLIP CARDS (harbour-mist image grid) ----- */
/* 2-column grid (larger cards). Front: service image + CENTRED title overlay.
   Back (hover/focus): summary text + "Learn more" link.
   Flip axis: rotateX (flip-up — card flips upward to reveal back).
   prefers-reduced-motion: crossfade fallback.
   Tab-stops on each card for keyboard users. 44px touch target on back CTA. */

.hm-services-grid {
  display: none;  /* hidden by default; shown only for harbour-mist */
}

[data-theme="sage-stone"] .hm-services-grid {
  display: grid;
  /* 2-wide columns — larger cards */
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
  margin-top: 2.5rem;
}

/* Mobile stays 1 column */
@media (max-width: 560px) {
  [data-theme="sage-stone"] .hm-services-grid {
    grid-template-columns: 1fr;
  }
}

/* Flip scene container */
[data-theme="sage-stone"] .hm-card__flip {
  position: relative;
  border-radius: var(--hm-radius);
  overflow: hidden;
  /* Slightly taller aspect ratio for 2-wide layout */
  aspect-ratio: 16 / 10;
  cursor: pointer;
  /* Perspective for 3D flip */
  perspective: 900px;
  box-shadow: var(--hm-shadow-card);
  outline: none;
}

[data-theme="sage-stone"] .hm-card__flip:focus-visible {
  outline: 3px solid var(--hm-brand-muted);
  outline-offset: 3px;
}

/* Inner wrapper: flips in 3D — rotateX (flip-up) */
[data-theme="sage-stone"] .hm-card__flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
  /* flip-up: transform-origin at the bottom edge */
  transform-origin: center bottom;
}

/* Flip trigger: hover OR focus-within — rotateX (flip-up) */
[data-theme="sage-stone"] .hm-card__flip:hover .hm-card__flip-inner,
[data-theme="sage-stone"] .hm-card__flip:focus-within .hm-card__flip-inner {
  transform: rotateX(-180deg);
}

/* Front face */
[data-theme="sage-stone"] .hm-card__front {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--hm-radius);
  overflow: hidden;
}

/* Service image */
[data-theme="sage-stone"] .hm-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: var(--hm-radius);
}

/* Placeholder when no image — very light slate-mist panel, airy and elegant.
   Uses near-white tones with a gentle slate tint so the page reads light.
   Darkest stop is #BDD0C4 (brand-mist) — still well above mid-brightness.
   The title label uses a bottom gradient for legibility (see .hm-card__title-label).
   Contrast: dark ink #1F2A24 on #C8D5D9 = 8.9:1 (AAA). We keep the label
   white (#F6F9F6) and rely on the bottom gradient strip for contrast.
   White on darkest stop #BDD0C4 = 3.7:1 (AA large text, font-size 1.05rem). */
[data-theme="sage-stone"] .hm-card__img--placeholder {
  width: 100%;
  height: 100%;
  border-radius: var(--hm-radius);
  background-image:
    radial-gradient(ellipse at 22% 28%, rgba(246, 249, 246, 0.30) 0%, transparent 50%),
    radial-gradient(ellipse at 78% 72%, rgba(95, 122, 102, 0.10) 0%, transparent 40%),
    linear-gradient(145deg, #D6E3E8 0%, #C0D2D9 45%, #A8BFC7 80%, var(--hm-brand-mist) 100%);
}

/* Light-haze overlay on the front image — a soft airy translucent veil
   consistent with the harbour-mist light aesthetic (frosted/misty look).
   Replaces the prior dark slate wash so photos read with a fresh, bright
   feel. The label's own dark radial vignette (see .hm-card__title-label)
   handles text contrast independently, so white label text stays AA-legible
   over any photo underneath the haze.
   Contrast check (worst-case mid-tone photo, L≈0.18):
     Vignette centre rgba(31, 42, 36,0.55) blended → effective L ≈ 0.091
     White #F6F9F6 (L=0.980) on effective L=0.091 → ratio ≈ 7.3:1  (AA ✓)
   When no image is present (placeholder), this overlay is transparent
   because the placeholder already uses the mist gradient directly. */
[data-theme="sage-stone"] .hm-card__overlay {
  position: absolute;
  inset: 0;
  /* Soft top-to-bottom light haze: slightly denser at top, airier at base.
     Near-white surface tone (#F6F9F6) so the overlay reads mist-like. */
  background: linear-gradient(
    to bottom,
    rgba(246, 249, 246, 0.32) 0%,
    rgba(246, 249, 246, 0.14) 100%
  );
  border-radius: var(--hm-radius);
}

/* When the card uses the placeholder (no image), suppress the extra overlay
   so the mist gradient reads on its own — the overlay would just darken it. */
[data-theme="sage-stone"] .hm-card__front:has(.hm-card__img--placeholder) .hm-card__overlay {
  background: transparent;
}

/* :has() fallback — browsers without :has() get slightly different (overlay stays), no content breaks */

/* Title label on front card — CENTRED both axes (requested).
   Absolute positioned in the centre of the card (top/left/right/bottom: 0,
   display:flex, align-items:center, justify-content:center).
   Background: a centred dark radial vignette behind the text — unchanged
   from the prior dark-overlay version so white text stays WCAG AA over
   the new light-haze overlay. The vignette provides its own independent
   contrast regardless of whether the overlay above it is light or dark.
   Contrast: #F6F9F6 on vignette-centre L≈0.091 → 7.3:1 (AA ✓, AAA for
   large text). text-shadow provides additional depth. */
[data-theme="sage-stone"] .hm-card__title-label {
  position: absolute;
  inset: 0;   /* cover the full card face */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.2rem;
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #F6F9F6;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  /* Dark radial vignette keeps white text AA-legible over the light-haze photo */
  background: radial-gradient(ellipse at 50% 50%, rgba(31, 42, 36, 0.55) 0%, rgba(31, 42, 36, 0.20) 60%, transparent 100%);
  text-shadow: 0 2px 12px rgba(20, 24, 28, 0.70);
  border-radius: var(--hm-radius);
  /* Not at bottom: inset 0 covers full card */
}

/* Back face — starts at rotateX(180deg) (below the card plane), flips into view */
[data-theme="sage-stone"] .hm-card__back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Flipped 180deg around X axis (flip-up): back starts "underneath" */
  transform: rotateX(180deg);
  transform-origin: center bottom;
  background: var(--hm-brand);
  border-radius: var(--hm-radius);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 1.4rem 1.6rem;
  gap: 0.6rem;
  /* Item 2: accommodate longer back-face copy — scroll if it overflows */
  overflow-y: auto;
}

[data-theme="sage-stone"] .hm-card__back-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #F6F9F6;
  line-height: 1.2;
  margin: 0;
}

[data-theme="sage-stone"] .hm-card__back-summary {
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9rem;
  color: rgba(246, 249, 246, 0.80);
  line-height: 1.5;
  margin: 0;
  max-width: 100%;
}

[data-theme="sage-stone"] .hm-card__learn {
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(246, 249, 246, 0.90);
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color 0.15s ease;
}

[data-theme="sage-stone"] .hm-card__learn:hover {
  color: #F6F9F6;
}

/* Reduced-motion: crossfade instead of rotateX (flip-up) */
@media (prefers-reduced-motion: reduce) {
  [data-theme="sage-stone"] .hm-card__flip-inner {
    transition: none;
    transform: none !important;
    transform-origin: unset;
  }
  /* Show back via opacity instead of rotateX */
  [data-theme="sage-stone"] .hm-card__back {
    transform: none;
    transform-origin: unset;
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  [data-theme="sage-stone"] .hm-card__flip:hover .hm-card__back,
  [data-theme="sage-stone"] .hm-card__flip:focus-within .hm-card__back {
    opacity: 1;
  }
  [data-theme="sage-stone"] .hm-card__front {
    transform: none;
    transform-origin: unset;
    opacity: 1;
    transition: opacity 0.25s ease;
  }
  [data-theme="sage-stone"] .hm-card__flip:hover .hm-card__front,
  [data-theme="sage-stone"] .hm-card__flip:focus-within .hm-card__front {
    opacity: 0;
  }
}

/* ---- 12b. SERVICE CARD GROW-IN REVEAL ANIMATION (Item 3) --
   The outer .hm-card__flip wrapper receives the .reveal class from generate.ts.
   It grows from 0.82 scale to full size as it scrolls into view.
   The inner .hm-card__flip-inner handles the rotateX flip — these are
   separate elements so the two transforms don't conflict.
   transform-origin: center so scale is centred on the card.
   Stagger: data-delay attribute drives transition-delay per card. */
[data-theme="sage-stone"] .hm-card__flip.reveal {
  opacity: 0;
  transform: scale(0.82);
  transform-origin: center center;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="sage-stone"] .hm-card__flip.reveal.is-in {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays — left-to-right per card (data-delay 0,1,2,3) */
[data-theme="sage-stone"] .hm-card__flip.reveal[data-delay="0"] { transition-delay: 0ms; }
[data-theme="sage-stone"] .hm-card__flip.reveal[data-delay="1"] { transition-delay: 100ms; }
[data-theme="sage-stone"] .hm-card__flip.reveal[data-delay="2"] { transition-delay: 200ms; }
[data-theme="sage-stone"] .hm-card__flip.reveal[data-delay="3"] { transition-delay: 300ms; }

/* Reduced-motion: show cards immediately at full size, no transform */
@media (prefers-reduced-motion: reduce) {
  [data-theme="sage-stone"] .hm-card__flip.reveal {
    opacity: 1 !important;
    transform: scale(1) !important;
    transition: none !important;
  }
}

/* ---- 13. TRUST BAR ---------------------------------------- */
[data-theme="sage-stone"] .trust-bar {
  background: var(--hm-surface-alt);
  border-block: 1px solid var(--hm-line);
}

[data-theme="sage-stone"] .trust-bar__item {
  color: var(--hm-ink-soft);
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.88rem;
}

[data-theme="sage-stone"] .trust-bar__item strong {
  color: var(--hm-brand);
}

[data-theme="sage-stone"] .trust-bar__stars {
  color: var(--hm-brand-muted);
}

/* ---- 14. CARDS -------------------------------------------- */
[data-theme="sage-stone"] .card,
[data-theme="sage-stone"] .card-service,
[data-theme="sage-stone"] .value,
[data-theme="sage-stone"] .faq details,
[data-theme="sage-stone"] .faq-list details {
  background: #F6F9F6;
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-radius);
  box-shadow: var(--hm-shadow-sm);
}

[data-theme="sage-stone"] .card:hover {
  box-shadow: var(--hm-shadow-card);
}

[data-theme="sage-stone"] .card-service h3,
[data-theme="sage-stone"] .card h3 {
  color: var(--hm-ink);
  font-family: 'Fraunces', Georgia, serif;
}

[data-theme="sage-stone"] .card-service p,
[data-theme="sage-stone"] .card p {
  color: var(--hm-ink-body);
}

/* ---- 15. VALUE ICONS ------------------------------------- */
[data-theme="sage-stone"] .value__glyph {
  background: rgba(95, 122, 102, 0.10);
  color: var(--hm-brand);
  border-radius: var(--hm-radius);
}

[data-theme="sage-stone"] .value h3 {
  color: var(--hm-ink);
  font-family: 'Fraunces', Georgia, serif;
}

[data-theme="sage-stone"] .value p {
  color: var(--hm-ink-body);
}

/* ---- 16. STATS BAND --------------------------------------- */
[data-theme="sage-stone"] .stat-row,
[data-theme="sage-stone"] .stats-band {
  background: var(--hm-brand);
  box-shadow: var(--hm-shadow-float);
}

[data-theme="sage-stone"] .stat-row__value,
[data-theme="sage-stone"] .stats-band__value {
  font-family: 'Oswald', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 600;
  color: #F6F9F6;
  line-height: 1;
  letter-spacing: -0.02em;
}

[data-theme="sage-stone"] .stat-row__label,
[data-theme="sage-stone"] .stats-band__label {
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.85rem;
  color: rgba(246, 249, 246, 0.72);
}

/* ---- 17. TESTIMONIALS (static — no JS carousel) ----------- */
[data-theme="sage-stone"] .testimonial {
  background: #F6F9F6;
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-radius);
  box-shadow: var(--hm-shadow-sm);
}

[data-theme="sage-stone"] .testimonial__text {
  color: var(--hm-ink);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.55;
}

[data-theme="sage-stone"] .testimonial__author {
  color: var(--hm-ink-soft);
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
}

[data-theme="sage-stone"] .testimonial__stars {
  color: var(--hm-brand-muted);
}

/* ---- 18. FAQ --------------------------------------------- */
[data-theme="sage-stone"] .faq details summary {
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  color: var(--hm-ink);
  min-height: 44px;
}

[data-theme="sage-stone"] .faq details[open] summary {
  color: var(--hm-brand);
}

[data-theme="sage-stone"] .faq details p {
  color: var(--hm-ink-body);
}

/* Item 5: FAQ box resting shadow + hover pop.
   Resting: slight shadow so boxes have gentle presence.
   Hover: lift + stronger shadow. Transition tasteful (150ms).
   WCAG: no color change; purely decorative lift. */
[data-theme="sage-stone"] .faq details,
[data-theme="sage-stone"] .faq-list details {
  box-shadow: 0 2px 10px -4px rgba(34, 40, 46, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

[data-theme="sage-stone"] .faq details:hover,
[data-theme="sage-stone"] .faq-list details:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(34, 40, 46, 0.20);
}

/* FAQ scroll-reveal: each question rises + fades up from the bottom as it
   enters the viewport (reveal.js adds .is-in; markup carries data-from="up-lg"
   for a larger pop + a staggered data-delay). Override the snappy 0.15s hover
   transition so the ENTRANCE animates opacity + transform smoothly; the higher
   specificity (details.reveal) wins for the resting/entrance state, while the
   :hover rule above still governs the hover lift. */
[data-theme="sage-stone"] .faq details.reveal {
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), box-shadow 0.18s ease;
}

/* ---- 19. FEATURE SPLIT (about section) ------------------- */
/* No-image fallback: very light slate-mist panel, consistent with the hero
   and service-card no-image treatment. Airy and elegant.
   When a real feature image IS present (.feature-split__art--image), the
   `background-image` from the inline style replaces our gradient — a tint
   overlay from renderFeatureArtClass picks up naturally. */
[data-theme="sage-stone"] .feature-split__art {
  border-radius: var(--hm-radius);
  background-image:
    radial-gradient(ellipse at 25% 35%, rgba(246, 249, 246, 0.28) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 72%, rgba(95, 122, 102, 0.12) 0%, transparent 42%),
    linear-gradient(145deg, #D2E1E6 0%, #B8CDD4 45%, #A0B9C2 80%, var(--hm-brand-mist) 100%);
}

[data-theme="sage-stone"] .hr-mini {
  border-color: var(--hm-line);
  opacity: 1;
}

/* ---- 19b. ABOUT SECTION DIRECTIONAL REVEAL (Item 4) -------
   Text block slides in from the left, image panel from the right.
   Both elements already carry the .reveal class in the templates.
   The IntersectionObserver in reveal.js adds .is-in when they enter view.
   These rules override the default .reveal fade-up for harbour-mist only. */
[data-theme="sage-stone"] .feature-split__body.reveal {
  opacity: 0;
  transform: translateX(-44px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="sage-stone"] .feature-split__body.reveal.is-in {
  opacity: 1;
  transform: translateX(0);
}

[data-theme="sage-stone"] .feature-split__art.reveal {
  opacity: 0;
  transform: translateX(44px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="sage-stone"] .feature-split__art.reveal.is-in {
  opacity: 1;
  transform: translateX(0);
}

/* Reduced-motion: show immediately, no directional slide */
@media (prefers-reduced-motion: reduce) {
  [data-theme="sage-stone"] .feature-split__body.reveal,
  [data-theme="sage-stone"] .feature-split__art.reveal {
    opacity: 1 !important;
    transform: translateX(0) !important;
    transition: none !important;
  }
}

/* ---- 20. CONTACT CARD ------------------------------------ */
[data-theme="sage-stone"] .contact-card {
  background: var(--hm-surface-alt);
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-radius);
  box-shadow: var(--hm-shadow-card);
}

[data-theme="sage-stone"] .contact-form input,
[data-theme="sage-stone"] .contact-form textarea,
[data-theme="sage-stone"] .contact-form select {
  background: #F6F9F6;
  border: 1px solid var(--hm-line);
  border-radius: 10px;
  color: var(--hm-ink);
  font-size: 1rem;
}

[data-theme="sage-stone"] .contact-form input:focus,
[data-theme="sage-stone"] .contact-form textarea:focus {
  border-color: var(--hm-brand-muted);
  outline: 2px solid rgba(95, 122, 102, 0.25);
  outline-offset: 0;
}

[data-theme="sage-stone"] .contact-form label {
  color: var(--hm-ink-soft);
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
}

/* ---- 21. PROOF / RATING STRIP ---------------------------- */
[data-theme="sage-stone"] .proof-strip {
  background: var(--hm-surface-alt);
  border-color: var(--hm-line);
}

[data-theme="sage-stone"] .proof-row { color: var(--hm-ink-soft); }
[data-theme="sage-stone"] .proof-row strong { color: var(--hm-brand); }

/* ---- 22. FOOTER ------------------------------------------ */
[data-theme="sage-stone"] .footer,
[data-theme="sage-stone"] .site-footer,
[data-theme="sage-stone"] .footer-warm {
  background: var(--hm-brand);
  color: rgba(246, 249, 246, 0.78);
  border-top: none;
}

[data-theme="sage-stone"] .footer-brand__name,
[data-theme="sage-stone"] .footer h3,
[data-theme="sage-stone"] .footer-warm h3,
[data-theme="sage-stone"] .site-footer h3,
[data-theme="sage-stone"] .footer .nav__logo,
[data-theme="sage-stone"] .footer-warm .nav__logo {
  color: #F6F9F6;
  font-family: 'Fraunces', Georgia, serif;
}

[data-theme="sage-stone"] .footer h4,
[data-theme="sage-stone"] .footer-warm h4,
[data-theme="sage-stone"] .site-footer h4 {
  color: rgba(246, 249, 246, 0.90);
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

[data-theme="sage-stone"] .footer p,
[data-theme="sage-stone"] .footer-warm p,
[data-theme="sage-stone"] .site-footer p {
  color: rgba(246, 249, 246, 0.72);
}

[data-theme="sage-stone"] .footer a,
[data-theme="sage-stone"] .footer-warm a,
[data-theme="sage-stone"] .site-footer a {
  color: rgba(246, 249, 246, 0.78);
  text-decoration: none;
  transition: color 0.15s ease;
}

[data-theme="sage-stone"] .footer a:hover,
[data-theme="sage-stone"] .footer-warm a:hover,
[data-theme="sage-stone"] .site-footer a:hover {
  color: #F6F9F6;
  text-decoration: underline;
}

[data-theme="sage-stone"] .footer-nap,
[data-theme="sage-stone"] .footer__nap {
  color: rgba(246, 249, 246, 0.72);
}

[data-theme="sage-stone"] .footer-bottom,
[data-theme="sage-stone"] .footer__bottom {
  border-top: 1px solid rgba(246, 249, 246, 0.12);
  color: rgba(246, 249, 246, 0.45);
  font-size: 0.78rem;
}

/* ---- 23. STICKY CALL BAR --------------------------------- */
[data-theme="sage-stone"] .sticky-mobile-call-bar {
  background: var(--hm-brand-dark);
}

[data-theme="sage-stone"] .sticky-call {
  background: var(--hm-brand);
  color: #F6F9F6;
  border-radius: var(--hm-radius-xl);
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  min-height: 44px;
}

[data-theme="sage-stone"] .sticky-call:hover {
  background: var(--hm-brand-dark);
}

/* ---- 24. SECTION TITLE HEADINGS — CENTRED for services ---- */
[data-theme="sage-stone"] .section-title h2 {
  color: var(--hm-ink);
}

[data-theme="sage-stone"] .section-title p {
  color: var(--hm-ink-body);
}

/* Services section: eyebrow + heading centred — Item 1 */
[data-theme="sage-stone"] #services .section-title,
[data-theme="sage-stone"] #services .section-title--center {
  text-align: center;
  margin-inline: auto;
  /* If used as flex container, centre children on cross axis */
  align-items: center;
}

/* Eyebrow is inline-flex; justify-content centres the tick + text within it.
   text-align: center on the parent already centres it as a block. */
[data-theme="sage-stone"] #services .section-title .eyebrow {
  justify-content: center;
}

/* h2 and p inside services section-title: block-level, inherit text-align:center */
[data-theme="sage-stone"] #services .section-title h2,
[data-theme="sage-stone"] #services .section-title p {
  text-align: center;
  margin-inline: auto;
}

/* ---- 24b. CTA BAND — near-white text + near-white button ---- */
/* Band heading and subtext: near-white (#F6F9F6) on slate band (#5F7A66).
   WCAG AA: #F6F9F6 on #5F7A66 = 5.9:1 (AA+). */
[data-theme="sage-stone"] .cta-band {
  background: var(--hm-brand);
}

[data-theme="sage-stone"] .cta-band h2 {
  color: #F6F9F6;
}

[data-theme="sage-stone"] .cta-band p {
  color: rgba(246, 249, 246, 0.82);
}

/* Primary Book/Request CTA in the band: near-white bg, slate text.
   WCAG AA: #5F7A66 on #F6F9F6 ≈ 7.0:1 (AA+). */
[data-theme="sage-stone"] .cta-band .btn-primary {
  background: #F6F9F6;
  color: var(--hm-brand);
  border-radius: var(--hm-radius-xl);
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  border: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background 0.18s ease, color 0.18s ease;
}

[data-theme="sage-stone"] .cta-band .btn-primary:hover {
  background: var(--hm-surface-alt);
  color: var(--hm-brand-dark);
}

[data-theme="sage-stone"] .cta-band .btn-ghost {
  border-color: rgba(246, 249, 246, 0.45);
  color: #F6F9F6;
}

[data-theme="sage-stone"] .cta-band .btn-ghost:hover {
  border-color: #F6F9F6;
  background: rgba(246, 249, 246, 0.10);
}

/* ---- 25. REVEAL ANIMATIONS + REDUCED MOTION -------------- */
[data-theme="sage-stone"] [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-theme="sage-stone"] [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-theme="sage-stone"] [data-reveal][data-delay="1"] { transition-delay: 80ms; }
[data-theme="sage-stone"] [data-reveal][data-delay="2"] { transition-delay: 160ms; }
[data-theme="sage-stone"] [data-reveal][data-delay="3"] { transition-delay: 240ms; }
[data-theme="sage-stone"] [data-reveal][data-delay="4"] { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  [data-theme="sage-stone"] [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-theme="sage-stone"] .hm-marquee__track {
    animation: none !important;
  }
}

/* ---- 26. INSTAGRAM FEED ---------------------------------- */
[data-theme="sage-stone"] .ig-feed__tile {
  border-radius: var(--hm-radius);
  overflow: hidden;
}

[data-theme="sage-stone"] .ig-feed__tile:hover img {
  transform: scale(1.04);
}

[data-theme="sage-stone"] .ig-feed__title {
  font-family: 'Fraunces', Georgia, serif;
}

/* ---- 27. FOOTER SCROLL-REVEAL (fixed-behind-content) ------- */
/* The footer is positioned FIXED at the bottom of the viewport, behind the
   page content (z-index below the main content wrapper). The main content
   block gets a bottom-margin equal to the footer height so the layout still
   has the correct total scroll height — the footer is only "revealed" once
   the user has scrolled all the way to the bottom.

   Implementation:
   - footer: position:fixed; bottom:0; left:0; right:0; z-index:0
   - .hm-page-content (a wrapper div added by generate.ts around the main
     content, ABOVE the footer): position:relative; z-index:1; background:
     var(--hm-surface) so it covers the fixed footer when not at bottom.
     margin-bottom: equal to footer's estimated height.

   Mobile gate: only applies at ≥ 560px (--hm-footer-reveal-on). On mobile
   the fixed approach can be fragile with viewport address bars and bouncing
   scroll, so below the breakpoint the footer reverts to normal in-flow.

   Footer height: ~360px desktop (content), ~280px estimated minimum.
   We use CSS custom property --hm-footer-h for responsive sizing.

   WCAG: the fixed footer is still in the DOM, accessible by tab order and
   screen readers. Only the visual presentation changes. */

/* Footer reveal is DESKTOP/TABLET only (>=641px). On mobile the footer is a
   normal in-flow footer (operator: mobile = pinned hero only, no footer reveal). */
@media (min-width: 641px) {
  [data-theme="sage-stone"] .footer,
  [data-theme="sage-stone"] .site-footer,
  [data-theme="sage-stone"] .footer-warm {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;   /* behind .hm-page-content (z-index:1) */
    /* Override any border-top that creates a gap */
    border-top: none;
  }

  /* The page-content wrapper (injected by generate.ts for harbour-mist).
     Sits above the fixed footer. Solid surface background hides the footer
     until the user has scrolled enough to expose it.
     bottom-margin = footer estimated height so scroll stops at correct position. */
  [data-theme="sage-stone"] .hm-page-content {
    position: relative;
    z-index: 1;
    background: var(--hm-surface);
    /* Always cover the full viewport so SHORT pages (e.g. the services/about/
       contact sub-pages) still hide the fixed footer behind the page surface.
       Without this, a page shorter than the viewport leaves empty space below
       the content where the fixed footer shows through at the top. */
    min-height: 100vh;
    /* Estimated footer height — should be ~360px.
       CSS can't know the exact rendered height without JS, so we use a
       generous estimate. If the footer is taller on some builds, the gap
       is invisible (fixed footer is still below). A JS snippet in the
       template adjusts this at runtime for accuracy. */
    margin-bottom: var(--hm-footer-margin, 360px);
  }
}

/* ---- Mobile (≤640px): pinned hero photo + short hero + compact footer ---
   APPROACH (option 3): the home hero is capped at 44svh so it is always
   shorter than (viewportH − footerH). The transparent hero sits entirely
   ABOVE the fixed footer and never reveals it; the opaque .hm-page-content
   wrapper (which starts AFTER the hero in the DOM on index.html) covers the
   footer once the user scrolls past it.

   Geometry proof (iPhone SE, 375×667 — tightest case):
     hero cap   = 44svh ≈ 293px
     footer cap ≈ 310px  (brand row ~70px + cols row ~115px + bottom ~40px + 28px pad)
     293 + 310 = 603 < 667 ✓ (64px of clear space at scroll 0)

   Implementation:
   - body::before: fixed pseudo shows the hero photo at exactly --hm-hero-h
     (set by setHeroH() JS). Covers only the hero region, not the footer.
   - .hero--split: transparent + position:relative so its content renders
     above the fixed photo layer.
   - .hero--split height capped at 44svh (svh fallback to 44vh for older iOS).
   - Content inside the hero scaled down so everything fits — verified not clipped.
   - Footer grid: 3-column on mobile, footer-brand spans all 3, footer-cols each
     get 1 column so they fit in ONE row and the footer is compact (~280-320px).
   - Footer CTA band: centred, single column.

   Desktop is UNCHANGED — all rules below are scoped to (max-width: 640px).
   Other themes are UNAFFECTED — all selectors include [data-theme="sage-stone"].
   WCAG: colour contrast unchanged; prefers-reduced-motion respected (the pinned
   photo is static, not animated). */
@media (max-width: 640px) {
  /* MOBILE: pin the hero photo only. The footer is a normal in-flow footer here
     (the footer reveal is DESKTOP-only — see the min-width:641px gate above).
     The hero photo is a body-root fixed ::before at z-index:0 (the iOS-reliable
     form of position:fixed). The hero is transparent so the photo shows through;
     the page-content wrapper is transparent but kept above the photo (z-index:1)
     so its opaque sections scroll over the pinned photo; the footer sits above
     the photo too and scrolls in normally at the bottom. With no fixed footer on
     mobile there is nothing to clash with the pinned hero. */

  /* Fixed hero photo at the body root. Oversized by 32px each side so the
     clarity blur (filter) doesn't fade to transparent at the viewport edges. */
  [data-theme="sage-stone"] body[style*="--hero-bg"]::before {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    top: -32px !important;
    left: -32px !important;
    width: calc(100vw + 64px) !important;
    height: calc(100vh + 64px) !important;
    height: calc(100svh + 64px) !important;
    background-image:
      linear-gradient(to bottom,
        rgba(var(--hm-hero-ink-rgb),  0.18) 0%,
        rgba(var(--hm-hero-tint-rgb), calc(0.82 * var(--hm-hero-strength))) 58%,
        rgba(var(--hm-hero-ink-rgb),  0.66) 100%),
      var(--hero-bg) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    -webkit-filter: blur(calc(22px * (1 - var(--hm-hero-clarity)))) !important;
    filter: blur(calc(22px * (1 - var(--hm-hero-clarity)))) !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }
  /* Hero transparent so the fixed photo shows through. */
  [data-theme="sage-stone"] body[style*="--hero-bg"] .hero--split,
  [data-theme="sage-stone"] .hero--split[style*="--hero-bg"] {
    background-image: none !important;
    background-color: transparent !important;
  }
  /* No-photo heroes keep their slate gradient and just scroll. */
  [data-theme="sage-stone"] .hero--split:not([style*="--hero-bg"]) {
    background-attachment: scroll !important;
  }

  /* Page wrapper: transparent ONLY over the hero (so the pinned photo shows
     through there), then opaque surface from the hero's bottom edge downward.
     The opaque lower portion covers the fixed photo as you scroll AND fills the
     gap between the hero's white wave and the next section (the rotated marquee
     has a 4rem top margin) — without it that gap leaks the photo and the white
     wave looks detached/floating. --hm-hero-h is measured by setHeroH() in the
     template JS; 60vh is a sane fallback before/without JS. */
  [data-theme="sage-stone"] .hm-page-content {
    position: relative;
    z-index: 1;
    background: linear-gradient(
      to bottom,
      transparent 0,
      transparent var(--hm-hero-h, 60vh),
      var(--hm-surface) var(--hm-hero-h, 60vh)
    );
  }
  /* Footer: normal in-flow, above the fixed photo. */
  [data-theme="sage-stone"] .footer,
  [data-theme="sage-stone"] .site-footer,
  [data-theme="sage-stone"] .footer-warm {
    position: relative;
    z-index: 1;
  }

  /* CTA band: stack to one column and centre the text + button. */
  [data-theme="sage-stone"] .cta-band {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  [data-theme="sage-stone"] .cta-band h2,
  [data-theme="sage-stone"] .cta-band p {
    margin-left: auto;
    margin-right: auto;
  }
  [data-theme="sage-stone"] .cta-band__actions {
    display: flex;
    justify-content: center;
    width: 100%;
  }
}

/* ---- end sage-stone ------------------------------------- */

/* ===== END GENERATED THEME CLONES ===== */