: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);
}

*, *::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(--color-primary); color: #fff;
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--color-primary) 60%, transparent);
}
.btn-primary:hover {
  background: var(--color-ink);
  color: #fff;
  box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--color-primary) 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: color-mix(in srgb, var(--color-surface) 82%, transparent);
  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. */
.nav-call {
  margin-left: auto;             /* push toward the right alongside nav-cta */
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  font-feature-settings: "tnum";
  white-space: nowrap;
  /* Reset the ghost button's default left-margin so we can use auto above. */
}
.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 so the primary CTA still has room. */
@media (max-width: 880px) and (min-width: 721px) {
  .nav-call { padding: 0.5rem 0.7rem; }
  .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; }

/* -------- 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 { 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 { display: grid; gap: 0.75rem; max-width: 52rem; margin: 0 auto; }
.faq 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] {
  border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-line));
  box-shadow: var(--shadow-sm);
}
.faq 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 { display: none; }
.faq 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 { transform: translateY(-50%) rotate(45deg); }
.faq 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; } }
.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; }

/* -------- 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; }
[data-package="multipage"] .map-section { padding-block: 3.5rem; }
[data-package="multipage"] .map-embed { aspect-ratio: 21 / 9; margin-top: 1.75rem; max-width: 960px; margin-inline: auto; }
[data-package="multipage"] .map-section .section-title h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
@media (max-width: 640px) {
  [data-package="multipage"] .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;
  --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 {
  background: rgba(11, 13, 20, 0.85);
  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%, rgba(12, 15, 26, 0.8), transparent 60%),
    linear-gradient(180deg, #0d1019 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"] .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 {
  background: rgba(18, 21, 32, 0.92); 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 {
  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, #1a1f30, #0b0d14);
}
[data-theme="midnight-lounge"] .footer {
  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-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 {
  background: #0f1320; 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 {
  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"] .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, #0d1019 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 {
  background: linear-gradient(180deg, #0f131f, #0c1019);
  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"][data-package="multipage"] .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"][data-package="multipage"] .hero {
    background-attachment: scroll;
  }
}
@media (hover: none) and (pointer: coarse) {
  [data-theme="press-editorial"][data-package="multipage"] .hero {
    background-attachment: scroll;
  }
}
[data-theme="press-editorial"][data-package="multipage"] .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"][data-package="multipage"] .hero::after { display: none; }
[data-theme="press-editorial"][data-package="multipage"] .hero > .container {
  position: relative; z-index: 1;
  display: flex;
  align-items: flex-end;
  min-height: inherit;
  padding-block: 4rem;
}
[data-theme="press-editorial"][data-package="multipage"] .hero-grid {
  display: block; /* collapse the split; one big column */
  max-width: 820px;
}
[data-theme="press-editorial"][data-package="multipage"] .hero-grid > .reveal { width: 100%; }
[data-theme="press-editorial"][data-package="multipage"] .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"][data-package="multipage"] .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"][data-package="multipage"] .hero-lede {
  color: rgba(245, 238, 224, 0.86);
  max-width: 56ch;
  font-size: 1.1rem;
}
[data-theme="press-editorial"][data-package="multipage"] .hero-cta { margin-top: 2rem; }
[data-theme="press-editorial"][data-package="multipage"] .hero .btn-primary {
  background: var(--color-accent); color: #fff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
[data-theme="press-editorial"][data-package="multipage"] .hero .btn-primary:hover { background: #b83a3a; }
[data-theme="press-editorial"][data-package="multipage"] .hero .btn-ghost {
  color: #f5eee0;
  border-color: rgba(245, 238, 224, 0.5);
}
[data-theme="press-editorial"][data-package="multipage"] .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"][data-package="multipage"] .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"][data-package="multipage"] .hero--simple { background-attachment: scroll; }
}
@media (hover: none) and (pointer: coarse) {
  [data-theme="press-editorial"][data-package="multipage"] .hero--simple { background-attachment: scroll; }
}
[data-theme="press-editorial"][data-package="multipage"] .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"][data-package="multipage"] .hero--simple::after { display: none; }
[data-theme="press-editorial"][data-package="multipage"] .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"][data-package="multipage"] .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"][data-package="multipage"] .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"][data-package="multipage"] .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"][data-package="multipage"] .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"][data-package="multipage"] .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"][data-package="multipage"] .proof-strip {
  overflow: hidden;
  padding: 0;
}
[data-theme="press-editorial"][data-package="multipage"] .proof-strip > .container {
  max-width: none;
  padding-inline: 0;
}
[data-theme="press-editorial"][data-package="multipage"] .proof-row {
  white-space: nowrap;
  gap: 0;
  padding: 0.95rem 0;
  justify-content: flex-start;
  flex-wrap: nowrap;
  display: block;
}
[data-theme="press-editorial"][data-package="multipage"] .proof-row .dot { display: none; }
[data-theme="press-editorial"][data-package="multipage"] .proof-row__track {
  display: inline-flex;
  align-items: center;
  gap: 3rem;
  animation: proof-marquee 44s linear infinite;
  will-change: transform;
}
[data-theme="press-editorial"][data-package="multipage"] .proof-row__track > span {
  flex-shrink: 0;
  padding-right: 3rem;
  position: relative;
}
[data-theme="press-editorial"][data-package="multipage"] .proof-row__track > span + span::before,
[data-theme="press-editorial"][data-package="multipage"] .proof-row__dupe::before,
[data-theme="press-editorial"][data-package="multipage"] .proof-row__dupe > span + span::before {
  content: "◆";
  color: var(--color-accent);
  opacity: 0.85;
  margin-right: 3rem;
}
[data-theme="press-editorial"][data-package="multipage"] .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"][data-package="multipage"] .proof-row__track { animation: none; }
}
/* Hide the split-hero art tablet — image is the whole canvas now. */
[data-theme="press-editorial"][data-package="multipage"] .hero .hero-art { display: none; }
/* Nav + masthead get transparent treatments over the image. */
[data-theme="press-editorial"][data-package="multipage"] .masthead-strip {
  position: relative; z-index: 2;
}
[data-theme="press-editorial"][data-package="multipage"] .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"][data-package="multipage"] .nav-brand,
[data-theme="press-editorial"][data-package="multipage"] .nav-links a {
  color: #f5eee0;
}
[data-theme="press-editorial"][data-package="multipage"] .nav-links a.is-active,
[data-theme="press-editorial"][data-package="multipage"] .nav-links a:hover {
  color: #fff;
}
[data-theme="press-editorial"][data-package="multipage"] .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.
   ============================================================ */
[data-package="multipage"] {
  --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);
}
[data-package="multipage"] .hero,
[data-package="multipage"] .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) {
  [data-package="multipage"] .hero,
  [data-package="multipage"] .hero--simple { background-attachment: scroll; }
}
@media (hover: none) and (pointer: coarse) {
  [data-package="multipage"] .hero,
  [data-package="multipage"] .hero--simple { background-attachment: scroll; }
}
[data-package="multipage"] .hero::before,
[data-package="multipage"] .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%);
}
[data-package="multipage"] .hero::after,
[data-package="multipage"] .hero--simple::after { display: none; }

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

/* Sub-page heroes — centered, 10% shorter than homepage */
[data-package="multipage"] .hero--simple {
  min-height: min(77.4vh, 702px);
}
[data-package="multipage"] .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 */
[data-package="multipage"] .hero h1,
[data-package="multipage"] .hero--simple h1 {
  color: var(--hero-ink);
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35);
  line-height: 1.05;
}
[data-package="multipage"] .hero.hero--split h1 { font-size: clamp(2.55rem, 6.375vw, 5.525rem); letter-spacing: -0.025em; margin-top: 1.5rem; }
[data-package="multipage"] .hero--simple h1      { font-size: clamp(2.3rem, 5.4vw, 4.8rem); letter-spacing: -0.02em; margin-top: 1.25rem; }
[data-package="multipage"] .hero .hero-lede,
[data-package="multipage"] .hero--simple .hero-lede {
  color: var(--hero-ink-soft);
  max-width: 56ch;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55);
}
[data-package="multipage"] .hero--simple .hero-lede { margin: 1rem auto 0; }
[data-package="multipage"] .hero .eyebrow,
[data-package="multipage"] .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;
}
[data-package="multipage"] .hero--simple .eyebrow { margin-inline: auto; }
[data-package="multipage"] .hero-meta {
  color: var(--hero-ink-soft);
  border-top: 1px solid var(--hero-rule);
  margin-top: 2rem;
  padding-top: 1rem;
}
[data-package="multipage"] .hero-meta strong { color: var(--hero-ink); }
[data-package="multipage"] .hero .btn-ghost {
  color: var(--hero-ink);
  border-color: var(--hero-rule);
}
[data-package="multipage"] .hero .btn-ghost:hover {
  background: rgba(245, 238, 224, 0.1);
  color: #fff;
  border-color: var(--hero-ink);
}

/* Transparent frosted nav over the image */
[data-package="multipage"] .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-package="multipage"] .nav-brand,
[data-package="multipage"] .nav-links a { color: var(--hero-ink); }
[data-package="multipage"] .nav-links a.is-active,
[data-package="multipage"] .nav-links a:hover { color: #fff; }
[data-package="multipage"] .nav-brand__mark {
  background: rgba(245, 238, 224, 0.12);
  color: var(--hero-ink);
}

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

/* Scroll-gated hero copy: each line (eyebrow → headline → lede → CTAs →
   meta) rises one after another from well below the hero's bottom edge,
   staggered ~0.3s apart, each fading in over ~1.6s. The outer reveal
   container only carries the parallax translation so child transforms
   stay independent of scroll-driven drift. Hero has overflow:hidden
   already, so the initial 360px offset is clipped out of sight until
   it animates. */
[data-package="multipage"] .hero .reveal[data-trigger="scroll"],
[data-package="multipage"] .hero--simple > .container.reveal[data-trigger="scroll"] {
  transform: translateY(var(--parallax-y, 0px));
  transition: transform 0s linear;
  will-change: transform;
}
[data-package="multipage"] .hero .reveal[data-trigger="scroll"] > *,
[data-package="multipage"] .hero--simple > .container.reveal[data-trigger="scroll"] > * {
  opacity: 0;
  transform: translateY(-420px);
  filter: blur(6px);
  transition: opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 2.4s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.3s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform, filter;
}
[data-package="multipage"] .hero .reveal[data-trigger="scroll"].is-in > *,
[data-package="multipage"] .hero--simple > .container.reveal[data-trigger="scroll"].is-in > * {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
/* Stagger — each line emerges ~0.22s after the previous */
[data-package="multipage"] .hero .reveal[data-trigger="scroll"].is-in > :nth-child(1),
[data-package="multipage"] .hero--simple > .container.reveal[data-trigger="scroll"].is-in > :nth-child(1) { transition-delay: 0s; }
[data-package="multipage"] .hero .reveal[data-trigger="scroll"].is-in > :nth-child(2),
[data-package="multipage"] .hero--simple > .container.reveal[data-trigger="scroll"].is-in > :nth-child(2) { transition-delay: 0.22s; }
[data-package="multipage"] .hero .reveal[data-trigger="scroll"].is-in > :nth-child(3),
[data-package="multipage"] .hero--simple > .container.reveal[data-trigger="scroll"].is-in > :nth-child(3) { transition-delay: 0.45s; }
[data-package="multipage"] .hero .reveal[data-trigger="scroll"].is-in > :nth-child(4),
[data-package="multipage"] .hero--simple > .container.reveal[data-trigger="scroll"].is-in > :nth-child(4) { transition-delay: 0.67s; }
[data-package="multipage"] .hero .reveal[data-trigger="scroll"].is-in > :nth-child(5),
[data-package="multipage"] .hero--simple > .container.reveal[data-trigger="scroll"].is-in > :nth-child(5) { transition-delay: 0.9s; }
@media (prefers-reduced-motion: reduce) {
  [data-package="multipage"] .hero .reveal[data-trigger="scroll"] > *,
  [data-package="multipage"] .hero--simple > .container.reveal[data-trigger="scroll"] > * {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

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

/* default — warm brown ink scrim, amber separators */
[data-theme="default"][data-package="multipage"],
html:not([data-theme])[data-package="multipage"] {
  --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);
}
[data-package="multipage"]:not([data-theme]) .proof-strip,
html:not([data-theme])[data-package="multipage"] .proof-strip {
  background: #1a140c;
  color: #fdf8e8;
}

/* midnight-lounge — near-black with extra brass glow at the edges */
[data-theme="midnight-lounge"][data-package="multipage"] {
  --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"][data-package="multipage"] .proof-strip {
  background: #0b0d14;
  color: #f2e7c9;
}
[data-theme="midnight-lounge"][data-package="multipage"] .nav {
  background: rgba(11, 13, 20, 0.6);
}

/* garden-bistro — deep forest scrim, peach accent */
[data-theme="garden-bistro"][data-package="multipage"] {
  --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"][data-package="multipage"] .proof-strip {
  background: #1a2e22;
  color: #faf5ec;
}
[data-theme="garden-bistro"][data-package="multipage"] .proof-row strong { color: #faf5ec; }
[data-theme="garden-bistro"][data-package="multipage"] .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"][data-package="multipage"] body[style*="--hero-bg"] {
  background-color: #0b0d14;
  position: relative;
  min-height: 100vh;
}
[data-theme="midnight-lounge"][data-package="multipage"] 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;
  background-color: #0b0d14;
  pointer-events: none;
}
@media (max-width: 640px) {
  [data-theme="midnight-lounge"][data-package="multipage"] body[style*="--hero-bg"]::before {
    background-size: 123% auto;
  }
}
[data-theme="midnight-lounge"][data-package="multipage"] body[style*="--hero-bg"] .hero {
  background-image: none;
  background-color: transparent;
}
[data-theme="midnight-lounge"][data-package="multipage"] body[style*="--hero-bg"] .section,
[data-theme="midnight-lounge"][data-package="multipage"] body[style*="--hero-bg"] .section-alt,
[data-theme="midnight-lounge"][data-package="multipage"] body[style*="--hero-bg"] .section-warm,
[data-theme="midnight-lounge"][data-package="multipage"] body[style*="--hero-bg"] .proof-strip {
  background-color: rgba(11, 13, 20, 0.82);
}
[data-theme="midnight-lounge"][data-package="multipage"] body[style*="--hero-bg"] .footer {
  background-color: rgba(11, 13, 20, 0.92);
}

/* ============================================================
   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);
}
[data-theme="structural-mono"] .nav.is-scrolled,
[data-theme="structural-mono"] .nav:has(~ .hero:not(:hover)) {
  border-bottom-color: var(--color-line);
}
/* Reveal hairline once user scrolls past top — done via :scroll fallback. */
@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;
}
[data-theme="structural-mono"] .hero::after {
  /* Index marker: "01 — 04" pinned to the structural rule. */
  content: "01 / 04";
  position: absolute;
  top: clamp(96px, 12vw, 144px);
  right: clamp(24px, 5vw, 64px);
  transform: translate(50%, -8px);
  background: var(--color-surface);
  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(--color-ink-soft);
  z-index: 1;
}
@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 {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  border-radius: 0;
  padding: 0;
}
[data-theme="structural-mono"] .faq 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 { color: var(--color-ink-soft); }
[data-theme="structural-mono"] .faq details[open] summary { color: var(--color-ink); }
[data-theme="structural-mono"] .faq 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: 768px) {
  .sticky-call { display: inline-flex; }
  /* Reserve room above the footer so the pill never sits on top of the
     final CTA — applied universally because every theme now shows it. */
  body { 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
   `[data-package="multipage"] .hero h1` rules below the theme cascade. */

[data-theme="structural-mono"][data-package="multipage"] {
  /* 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"][data-package="multipage"] .hero,
[data-theme="structural-mono"][data-package="multipage"] .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"][data-package="multipage"] 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"][data-package="multipage"] body:not([style*="--hero-bg"]):not(:has(.hero[style*="--hero-bg"])) .hero,
[data-theme="structural-mono"][data-package="multipage"] 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"][data-package="multipage"] .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"][data-package="multipage"] .hero::after {
  content: "01 / 04";
  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"][data-package="multipage"] 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"][data-package="multipage"] body:is([style*="--hero-bg"], :has(.hero[style*="--hero-bg"])) .hero,
[data-theme="structural-mono"][data-package="multipage"] 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"][data-package="multipage"] body:is([style*="--hero-bg"], :has(.hero[style*="--hero-bg"])) .hero,
  [data-theme="structural-mono"][data-package="multipage"] body:is([style*="--hero-bg"], :has(.hero[style*="--hero-bg"])) .hero--simple {
    background-attachment: scroll, fixed;
  }
}

[data-theme="structural-mono"][data-package="multipage"] .hero--simple::before {
  content: none;
}
@media (max-width: 768px) {
  [data-theme="structural-mono"][data-package="multipage"] .hero::before,
  [data-theme="structural-mono"][data-package="multipage"] .hero::after { display: none; }
}
/* Sub-page index markers. */
[data-theme="structural-mono"][data-package="multipage"] body:has(.nav-links a[href="services.html"].is-active) .hero::after,
[data-theme="structural-mono"][data-package="multipage"] body[data-page="services"] .hero::after { content: "02 / 04"; }
[data-theme="structural-mono"][data-package="multipage"] body:has(.nav-links a[href="about.html"].is-active) .hero::after,
[data-theme="structural-mono"][data-package="multipage"] body[data-page="about"] .hero::after { content: "03 / 04"; }
[data-theme="structural-mono"][data-package="multipage"] body:has(.nav-links a[href="contact.html"].is-active) .hero::after,
[data-theme="structural-mono"][data-package="multipage"] 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"][data-package="multipage"] 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"][data-package="multipage"] 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"][data-package="multipage"] body:not([style*="--hero-bg"]):not(:has(.hero[style*="--hero-bg"])) .hero.hero--split,
[data-theme="structural-mono"][data-package="multipage"] 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"][data-package="multipage"] .hero.hero--split > .container,
[data-theme="structural-mono"][data-package="multipage"] .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"][data-package="multipage"] .hero h1,
[data-theme="structural-mono"][data-package="multipage"] .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"][data-package="multipage"] body:not([style*="--hero-bg"]):not(:has(.hero[style*="--hero-bg"])) .hero h1,
[data-theme="structural-mono"][data-package="multipage"] body:not([style*="--hero-bg"]):not(:has(.hero[style*="--hero-bg"])) .hero--simple h1 {
  text-shadow: none;
}
[data-theme="structural-mono"][data-package="multipage"] .hero .hero-lede,
[data-theme="structural-mono"][data-package="multipage"] .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"][data-package="multipage"] body:not([style*="--hero-bg"]):not(:has(.hero[style*="--hero-bg"])) .hero .hero-lede,
[data-theme="structural-mono"][data-package="multipage"] body:not([style*="--hero-bg"]):not(:has(.hero[style*="--hero-bg"])) .hero--simple .hero-lede {
  text-shadow: none;
}
[data-theme="structural-mono"][data-package="multipage"] .hero .eyebrow,
[data-theme="structural-mono"][data-package="multipage"] .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"][data-package="multipage"] .hero .eyebrow::before,
[data-theme="structural-mono"][data-package="multipage"] .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"][data-package="multipage"] .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"][data-package="multipage"] .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"][data-package="multipage"] 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"][data-package="multipage"] 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"][data-package="multipage"] 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"][data-package="multipage"] 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"][data-package="multipage"] .hero--simple {
  border-bottom: 1px solid var(--color-line);
}
[data-theme="structural-mono"][data-package="multipage"] .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"][data-package="multipage"] 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"][data-package="multipage"] body:is([style*="--hero-bg"], :has(.hero[style*="--hero-bg"])) .nav-brand,
[data-theme="structural-mono"][data-package="multipage"] body:is([style*="--hero-bg"], :has(.hero[style*="--hero-bg"])) .nav-links a,
[data-theme="structural-mono"][data-package="multipage"] body:is([style*="--hero-bg"], :has(.hero[style*="--hero-bg"])) .nav-links a.is-active {
  color: var(--hero-ink);
}
[data-theme="structural-mono"][data-package="multipage"] 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"][data-package="multipage"] 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"][data-package="multipage"] 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"][data-package="multipage"] 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"][data-package="multipage"] .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"][data-package="multipage"] .hero .reveal[data-trigger="scroll"],
[data-theme="structural-mono"][data-package="multipage"] .hero--simple > .container.reveal[data-trigger="scroll"] {
  transform: none !important;
}
[data-theme="structural-mono"][data-package="multipage"] .hero .reveal[data-trigger="scroll"] > *,
[data-theme="structural-mono"][data-package="multipage"] .hero--simple > .container.reveal[data-trigger="scroll"] > * {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}