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

/* -------- 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); }
[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;
}