/* =========================================================
   MULTIFAMILY SECTION LIBRARY - SHARED STYLESHEET
   Global tokens, utility classes, 12 theme styles, components.
   ========================================================= */

/* ---------- 1. GLOBAL TOKENS / CSS VARIABLES ---------- */
:root {
  /* Core palette */
  --color-dark-charcoal: #111418;
  --color-soft-white: #f7f6f2;
  --color-pure-white: #ffffff;
  --color-warm-gold: #c9a96a;
  --color-gold-deep: #8a6f3c;
  --color-navy: #0f2748;
  --color-navy-deep: #081a33;
  --color-gray: #6b7280;
  --color-gray-light: #e5e7eb;
  --color-gray-bg: #f3f4f6;
  --color-beige: #ede5d6;
  --color-beige-warm: #d9c9a8;
  --color-muted-blue: #4a6fa5;
  --color-blue-soft: #e8eef7;
  --color-accent-orange: #e8743b;
  --color-accent-orange-soft: #fdebd9;
  --color-accent-orange-deep: #9f421b;
  --color-border: #e3e3e0;
  --color-border-dark: #2a2f37;
  --color-card: #ffffff;
  --color-card-dark: #1a1f26;
  --color-text-dark: #1a1d23;
  --color-text-light: #f5f5f0;
  /* Clears 4.75:1 on the default #f7f6f2 surface (the previous #6b7280
     computed to 4.47:1 on paletteless generated sites). */
  --color-text-muted: #626b79;
  --color-success: #2f7d52;

  /* Typography */
  --font-sans: "Inter", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --font-serif: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3.5rem;
  --space-2xl: 5rem;
  --space-3xl: 7rem;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 6px 24px rgba(15, 39, 72, 0.08);
  --shadow-lg: 0 20px 50px rgba(0,0,0,0.18);
}

/* ---------- 2. BASE RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Defensive clip — if any decoration ever pokes past the viewport edge, the
   page should not gain a horizontal scrollbar. Sections clip their own
   glows below (see .has-bg-effects), but this is the backstop. `overflow-x:
   clip` doesn't change scroll behavior of descendants the way `hidden`
   would — sticky/inertia scroll, nested overflow:auto, etc. all still work. */
html { overflow-x: clip; }
body {
  font-family: var(--font-sans);
  color: var(--color-text-dark);
  background: var(--color-soft-white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
h1, h2, h3, h4, h5 { margin: 0 0 0.5em; line-height: 1.15; font-weight: 700; }
.hero-base h1, .ring-frame h1, .peak-brand-panel-mark { overflow-wrap: break-word; hyphens: auto; max-width: 100%; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
/* Skip-to-content link (DELIV-6): visually hidden until keyboard-focused. Also
   in PREVIEW_CSS; kept here so a legacy legal shell (no shared header, no
   PREVIEW_CSS) still styles it. */
.peak-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  padding: 10px 16px; background: #101418; color: #fff; border-radius: 0 0 6px 0;
  font-weight: 600; font-size: 14px; text-decoration: none;
}
.peak-skip-link:focus { left: 0; }

/* ---------- 3. UTILITY CLASSES ---------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.container-narrow { max-width: 880px; margin: 0 auto; padding: 0 24px; }
.container-wide { max-width: 1400px; margin: 0 auto; padding: 0 24px; }

.section { padding: var(--space-2xl) 0; }
.section-tight { padding: var(--space-xl) 0; }
.section-tall { padding: var(--space-3xl) 0; }

.dark-section { background: var(--color-dark-charcoal); color: var(--color-text-light); }
.light-section { background: var(--color-soft-white); color: var(--color-text-dark); }
.white-section { background: var(--color-pure-white); color: var(--color-text-dark); }
.navy-section { background: var(--color-navy); color: var(--color-text-light); }
.beige-section { background: var(--color-beige); color: var(--color-text-dark); }

.eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--color-text-muted);
}
.eyebrow-gold { color: var(--color-warm-gold); }
.eyebrow-orange { color: var(--color-accent-orange); }

.section-label {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  background: rgba(0,0,0,0.06);
  color: var(--color-text-muted);
  border-radius: var(--radius-pill);
}

.btn {
  display: inline-block;
  padding: 14px 26px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  background: var(--color-text-dark);
  color: #fff;
  transition: all .2s ease;
  cursor: pointer;
  border: 1.5px solid var(--color-text-dark);
}
.btn:hover { transform: translateY(-1px); }
.btn-outline {
  background: transparent;
  color: var(--color-text-dark);
  border: 1.5px solid var(--color-text-dark);
}
.btn.btn-light { background: #fff !important; color: #111 !important; border-color: #fff !important; }
.btn.btn-gold { background: var(--color-warm-gold) !important; border-color: var(--color-warm-gold) !important; color: #111 !important; }
.btn.btn-gold:hover { background: var(--color-gold-deep) !important; border-color: var(--color-gold-deep) !important; color: #fff !important; }
.btn.btn-navy { background: var(--color-navy) !important; border-color: var(--color-navy) !important; color: #fff !important; }
.btn.btn-orange { background: var(--color-accent-orange) !important; border-color: var(--color-accent-orange) !important; color: #fff !important; }
.btn-pill { border-radius: var(--radius-pill); }
.btn-lg { padding: 16px 32px; font-size: 16px; }
.btn-sm { padding: 10px 18px; font-size: 13px; }
.btn-ghost { background: transparent; color: inherit; border: 1px solid currentColor; }

.grid { display: grid; gap: var(--space-lg); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
/* Tablet (768px): between the 900px full-collapse and mobile. A 3- or 4-item
   row already goes 1-col above, but at 900px .grid-3/.grid-4 orphan the last
   item (trust trio → 2+1, stats → 3+1). Step them through an even 2-col grid
   so 4 items become a tidy 2x2 and 3 items wrap 2+1 centered by the parent,
   instead of a lopsided single dangling card. (This 768px rule overrides the
   900px 1fr above via source order + equal specificity for widths ≤768px.) */
@media (max-width: 768px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile (≤480px): force any in-file grid to a single column so 2x2 tablet
   layouts don't stay cramped on phones. NOTE: .preview-cm-grid /
   .preview-value-props / .preview-stat-strip are defined in
   generate-preview.js and handled there — deliberately NOT listed here to
   avoid duplicate/conflicting mobile rules. */
@media (max-width: 480px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.card-dark {
  background: var(--color-card-dark);
  color: var(--color-text-light);
  border-color: var(--color-border-dark);
}
.stat-card {
  padding: var(--space-lg);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.stat-card .stat-num {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.stat-card .stat-label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Form fields */
.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-field label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text-muted);
}
.t-premium-dark .form-field label,
.t-luxury-gold .form-field label,
.t-event .form-field label,
.dark-section .form-field label { color: rgba(255,255,255,0.75); }
.t-local-operator .form-field label,
.t-founder .form-field label { color: #595e69; }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 15px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-text-dark);
  transition: border-color .15s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-navy);
}
/* A rows="3" message box gives ~63px of content height, but the contact-page
   placeholder is ~103 chars and wraps to 4–5 lines below 400px, so its tail was
   clipped mid-word at the box's bottom edge (need 84–105px vs 63px avail).
   Size the control to the copy rather than to a row count — rows="4" alone
   leaves zero headroom at 390px and still clips at 320px. */
@media (max-width: 768px) { .form-field textarea { min-height: 140px; } }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

/* Contact-info value cells (.preview-ci-v, defined in generate-preview.js):
   a long email/URL has no spaces, so at tablet/mobile widths it either forces
   the column wider (overflow) or wraps mid-domain awkwardly. Allow the string
   to break at any point so it stays inside its cell. Purely additive — only
   affects wrapping of otherwise-unbreakable long values, not layout. */
.preview-ci-v,
.preview-ci-v a { overflow-wrap: anywhere; word-break: break-word; }

/* Image placeholder */
.img-ph {
  background: linear-gradient(135deg, #2a2f37 0%, #1a1d23 100%);
  color: rgba(255,255,255,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  min-height: 360px;
  width: 100%;
}
.img-ph.light {
  background: linear-gradient(135deg, #e8e3d6 0%, #d8d2c0 100%);
  color: rgba(0,0,0,0.4);
}
.img-ph.gold {
  background: linear-gradient(135deg, #c9a96a 0%, #8a6f3c 100%);
  color: rgba(255,255,255,0.75);
}
.img-ph.navy {
  background: linear-gradient(135deg, #0f2748 0%, #081a33 100%);
  color: rgba(255,255,255,0.5);
}
.img-ph.beige {
  background: linear-gradient(135deg, #ede5d6 0%, #d9c9a8 100%);
  color: rgba(0,0,0,0.45);
}
.img-ph-portrait { aspect-ratio: 3/4; min-height: unset; }
.img-ph-square { aspect-ratio: 1/1; min-height: unset; }
.img-ph-wide { aspect-ratio: 16/9; min-height: unset; }

/* ---------- 4. SECTION META BADGE (above each section) ---------- */
.section-meta {
  max-width: 1200px;
  margin: 32px auto 0;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-warm-gold);
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.7;
  color: #333;
  font-family: var(--font-mono);
}
.section-meta strong { color: #000; }
.section-meta .meta-row { display: flex; flex-wrap: wrap; gap: 18px; }
.section-meta .meta-row span { display: inline-block; }

/* ---------- 5. PAGE-LEVEL LIBRARY NAV (top of each gallery) ---------- */
.lib-header {
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  padding: 28px 0 20px;
}
.lib-header h1 { font-size: 28px; margin: 0 0 6px; }
.lib-header p { margin: 0 0 18px; color: var(--color-text-muted); max-width: 720px; }
.lib-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lib-nav a {
  display: inline-block;
  padding: 6px 12px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: #333;
  background: #fafafa;
  transition: all .15s ease;
}
.lib-nav a:hover, .lib-nav a.active {
  background: #111; color: #fff; border-color: #111;
}
.back-link { font-size: 13px; color: var(--color-text-muted); font-weight: 600; }
.back-link:hover { color: #111; }

/* Theme filter (top of each page) */
.theme-filter {
  background: #fafafa;
  border-bottom: 1px solid var(--color-border);
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 50;
}
.theme-filter .filter-row {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.theme-filter label {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700; color: #555; margin-right: 8px;
}
.theme-filter button {
  padding: 5px 11px; font-size: 11px; letter-spacing: 0.05em;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  background: #fff; color: #333; font-weight: 600;
  transition: all .15s ease;
}
.theme-filter button:hover { background: #111; color: #fff; border-color: #111; }
.theme-filter button.active { background: #111; color: #fff; border-color: #111; }

/* Hide non-matching sections during filter */
.section-block { transition: opacity .2s ease; }
.section-block.hidden { display: none; }

/* ====================================================
   6. THEME CLASSES (12 visual identities)
   Each theme provides typographic + color treatment.
   Use on a wrapping .section-block element OR section.
   ==================================================== */

/* T1: PREMIUM DARK CAPITAL BRAND */
.t-premium-dark {
  background: #0d1014;
  color: #ece8df;
  font-family: var(--font-sans);
}
.t-premium-dark h1, .t-premium-dark h2, .t-premium-dark h3 { font-family: var(--font-serif); letter-spacing: -0.01em; color: #f3ecdc; }
.t-premium-dark .accent { color: var(--color-warm-gold); }
.t-premium-dark .btn { background: var(--color-warm-gold); border-color: var(--color-warm-gold); color: #111; }
.t-premium-dark .btn-outline { background: transparent; color: #ece8df; border-color: rgba(236,232,223,0.4); }
.t-premium-dark .eyebrow { color: var(--color-warm-gold); }
.t-premium-dark .divider { border-top: 1px solid rgba(255,255,255,0.08); }
.t-premium-dark .card { background: #15181d; border-color: #232830; color: #ece8df; }

/* T2: CLEAN WHITE PROFESSIONAL */
.t-clean-white {
  background: #ffffff;
  color: #1a1d23;
  font-family: var(--font-sans);
}
.t-clean-white h1, .t-clean-white h2 { color: var(--color-navy); letter-spacing: -0.02em; }
.t-clean-white .accent { color: var(--color-muted-blue); }
.t-clean-white .btn { background: var(--color-navy); border-color: var(--color-navy); }
.t-clean-white .btn-outline { background: transparent; color: var(--color-navy); border-color: var(--color-navy); }
.t-clean-white .eyebrow { color: var(--color-muted-blue); }
.t-clean-white .card { background: #fafbfc; border-color: #e6ebf2; }

/* T3: BOLD MODERN INVESTOR */
.t-bold-modern {
  background: #fafaf7;
  color: #0a0a0a;
  font-family: var(--font-sans);
}
.t-bold-modern h1, .t-bold-modern h2 {
  font-weight: 900; letter-spacing: -0.04em;
  font-size: clamp(40px, 6vw, 88px); line-height: 0.95;
}
.t-bold-modern h3 { font-weight: 800; letter-spacing: -0.02em; }
.t-bold-modern .accent { color: var(--color-accent-orange-deep); }
.t-bold-modern .btn { background: #0a0a0a; border-color: #0a0a0a; border-radius: 0; }
.t-bold-modern .btn-outline { background: transparent; color: #0a0a0a; border-color: #0a0a0a; border-radius: 0; }
.t-bold-modern .eyebrow { color: var(--color-accent-orange-deep); }
.t-bold-modern .card { background: #fff; border-color: #0a0a0a; border-width: 2px; border-radius: 0; }

/* T4: LUXURY GOLD / BLACK */
.t-luxury-gold {
  background: #07070a;
  color: #e9dec1;
  font-family: var(--font-serif);
}
.t-luxury-gold h1, .t-luxury-gold h2, .t-luxury-gold h3 {
  font-family: var(--font-serif); font-weight: 400; letter-spacing: 0.01em;
  color: #f0e3bd;
}
.t-luxury-gold p, .t-luxury-gold .body { font-family: var(--font-sans); color: #c9bf9e; }
.t-luxury-gold .accent { color: var(--color-warm-gold); }
.t-luxury-gold .btn {
  background: transparent; border: 1px solid var(--color-warm-gold);
  color: var(--color-warm-gold); letter-spacing: 0.15em; text-transform: uppercase;
  font-size: 12px; padding: 16px 32px; font-family: var(--font-sans);
}
.t-luxury-gold .btn:hover { background: var(--color-warm-gold); color: #07070a; }
.t-luxury-gold .eyebrow { color: var(--color-warm-gold); font-family: var(--font-sans); }
.t-luxury-gold .divider { border-top: 1px solid rgba(201,169,106,0.25); }
.t-luxury-gold .card { background: rgba(255,255,255,0.02); border: 1px solid rgba(201,169,106,0.25); }

/* T5: FOUNDER-LED PERSONAL BRAND */
.t-founder {
  background: #f7f3eb;
  color: #2d2a25;
  font-family: var(--font-sans);
}
.t-founder h1, .t-founder h2 { font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.01em; color: #2d2a25; }
.t-founder .accent { color: #6e5638; }
.t-founder .btn { background: #2d2a25; border-color: #2d2a25; border-radius: var(--radius-pill); }
.t-founder .btn-outline { background: transparent; color: #2d2a25; border-color: #2d2a25; border-radius: var(--radius-pill); }
.t-founder .eyebrow { color: #6e5638; }
.t-founder .signature { font-family: "Brush Script MT", cursive; font-size: 28px; color: #2d2a25; }
.t-founder .card { background: #fff; border-color: #e6dec9; }

/* T6: INSTITUTIONAL TRUST */
.t-institutional {
  background: #f4f6f9;
  color: #1c2638;
  font-family: var(--font-sans);
}
.t-institutional h1, .t-institutional h2 { color: var(--color-navy-deep); font-family: var(--font-serif); font-weight: 600; }
.t-institutional .accent { color: var(--color-navy); }
.t-institutional .btn { background: var(--color-navy-deep); border-color: var(--color-navy-deep); }
.t-institutional .btn-outline { background: transparent; color: var(--color-navy-deep); border-color: var(--color-navy-deep); }
.t-institutional .eyebrow { color: var(--color-navy); }
.t-institutional .card { background: #fff; border-color: #d6dde7; border-top: 3px solid var(--color-navy-deep); }

/* T7: LOCAL OPERATOR BRAND */
.t-local-operator {
  background: #ede5d6;
  color: #2a241a;
  font-family: var(--font-sans);
}
.t-local-operator h1, .t-local-operator h2 { font-family: var(--font-serif); color: #2a241a; }
.t-local-operator .accent { color: #84461f; }
.t-local-operator .btn { background: #84461f; border-color: #84461f; }
.t-local-operator .btn-outline { background: transparent; color: #2a241a; border-color: #2a241a; }
.t-local-operator .eyebrow { color: #84461f; }
.t-local-operator .card { background: #f9f4e8; border-color: #d9c9a8; }

/* T8: HIGH-CONVERSION LANDING PAGE */
.t-hc-landing {
  background: linear-gradient(180deg, #fff 0%, #fff7ee 100%);
  color: #1c1c1c;
  font-family: var(--font-sans);
}
.t-hc-landing h1, .t-hc-landing h2 { font-weight: 800; letter-spacing: -0.02em; }
.t-hc-landing .accent { color: var(--color-accent-orange-deep); }
.t-hc-landing .btn { background: var(--color-accent-orange-deep); border-color: var(--color-accent-orange-deep); font-weight: 700; padding: 16px 32px; }
.t-hc-landing .btn:hover { background: #8f3f18; border-color: #8f3f18; }
.t-hc-landing .btn-outline { background: transparent; color: #1c1c1c; border-color: #1c1c1c; }
.t-hc-landing .eyebrow { color: var(--color-accent-orange-deep); font-weight: 700; }
.t-hc-landing .card { background: #fff; border-color: #f1e3cf; box-shadow: var(--shadow-md); }
.t-hc-landing .urgent-tag {
  display: inline-block; padding: 5px 11px; background: #fdebd9;
  color: #8f3f18; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
}

/* T9: EDUCATION / COACHING STYLE */
.t-education {
  background: #f3f7fb;
  color: #1a2735;
  font-family: var(--font-sans);
}
.t-education h1, .t-education h2 { color: #1a2735; font-weight: 700; }
.t-education .accent { color: #2058b0; }
.t-education .btn { background: #2058b0; border-color: #2058b0; border-radius: var(--radius-pill); }
.t-education .btn-outline { background: transparent; color: #2058b0; border-color: #2058b0; border-radius: var(--radius-pill); }
.t-education .eyebrow { color: #2058b0; }
.t-education .card { background: #fff; border-color: #d8e5f3; border-radius: var(--radius-lg); }
.t-education .chip {
  display: inline-block; padding: 4px 12px; background: #e3edfb;
  color: #2058b0; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600;
}

/* T10: MINIMAL ELEGANT */
.t-minimal {
  background: #fbfaf7;
  color: #232323;
  font-family: var(--font-sans);
  font-weight: 300;
}
.t-minimal h1, .t-minimal h2 {
  font-family: var(--font-serif); font-weight: 300;
  letter-spacing: -0.01em; line-height: 1.1;
}
.t-minimal .accent { color: #6b6b6b; }
.t-minimal .btn {
  background: transparent; border: 1px solid #232323; color: #232323;
  font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; font-size: 12px;
}
.t-minimal .btn:hover { background: #232323; color: #fff; }
.t-minimal .eyebrow { letter-spacing: 0.2em; color: #5e5e5e; }
.t-minimal .divider { border-top: 1px solid #e3e3e0; }
.t-minimal .card { background: transparent; border: none; padding: 0; box-shadow: none; }

/* T11: DATA-DRIVEN / UNDERWRITING STYLE */
.t-data {
  background: #f8f9fb;
  color: #16202d;
  font-family: var(--font-sans);
}
.t-data h1, .t-data h2 { color: #0f1a2b; font-weight: 700; letter-spacing: -0.02em; }
.t-data .mono, .t-data .data-num { font-family: var(--font-mono); }
.t-data .accent { color: var(--color-success); }
.t-data .btn { background: #0f1a2b; border-color: #0f1a2b; border-radius: var(--radius-sm); }
.t-data .btn-outline { background: transparent; color: #0f1a2b; border-color: #0f1a2b; }
.t-data .eyebrow { color: var(--color-success); font-family: var(--font-mono); letter-spacing: 0.05em; }
.t-data .card { background: #fff; border-color: #dde2e9; }
.t-data .card:has(table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.t-data table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 14px; min-width: 480px; }
.t-data table th, .t-data table td { padding: 12px 14px; border-bottom: 1px solid #e6eaef; text-align: left; }
.t-data table th { background: #f1f4f8; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; color: #5a6a82; }

/* T12: EVENT / WEBINAR FUNNEL STYLE */
.t-event {
  background: linear-gradient(135deg, #1a1438 0%, #2c1f5c 100%);
  color: #f1ecff;
  font-family: var(--font-sans);
}
.t-event h1, .t-event h2 { color: #fff; font-weight: 800; letter-spacing: -0.02em; }
.t-event .accent { color: #ffd166; }
.t-event .btn { background: #ffd166; color: #1a1438; border-color: #ffd166; font-weight: 700; }
.t-event .btn:hover { background: #f5bf4d; border-color: #f5bf4d; }
.t-event .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.t-event .eyebrow { color: #ffd166; font-weight: 700; letter-spacing: 0.18em; }
.t-event .card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: #f1ecff; }
.t-event .event-tag {
  display: inline-block; padding: 6px 14px; background: rgba(255,209,102,0.18);
  color: #ffd166; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.t-event .countdown { display: flex; gap: 14px; }
.t-event .countdown-box {
  background: rgba(255,255,255,0.08); padding: 14px 18px;
  border-radius: var(--radius-md); text-align: center; min-width: 64px;
}
.t-event .countdown-box .num { font-size: 28px; font-weight: 800; color: #ffd166; line-height: 1; }
.t-event .countdown-box .lab { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-top: 4px; }

/* ====================================================
   7. INDEX PAGE (library home)
   ==================================================== */
.index-hero {
  padding: 80px 0 50px;
  background: linear-gradient(180deg, #111418 0%, #1a1f26 100%);
  color: #fff;
}
.index-hero h1 { font-family: var(--font-serif); font-size: clamp(36px, 5vw, 60px); margin-bottom: 14px; }
.index-hero p { font-size: 17px; max-width: 720px; color: rgba(255,255,255,0.7); }
.index-grid { padding: 60px 0; }
.index-card {
  display: block; padding: 28px;
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: all .2s ease;
  height: 100%;
}
.index-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #c9a96a; }
.index-card .index-card-num {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--color-warm-gold); letter-spacing: 0.1em; margin-bottom: 14px;
}
.index-card h3 { font-size: 20px; margin-bottom: 8px; }
.index-card p { font-size: 14px; color: var(--color-text-muted); margin: 0; }

/* ====================================================
   8. HERO LAYOUTS — shared structure
   ==================================================== */
.hero-base { padding: var(--space-2xl) 0; position: relative; overflow: hidden; }
.hero-grid-2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.hero-grid-2.peak-solo-column, .grid-2.peak-solo-column, .peak-solo-column { grid-template-columns: minmax(0, 1fr) !important; }
@media (max-width: 900px) { .hero-grid-2 { grid-template-columns: 1fr; } }
.hero-headline {
  font-size: clamp(36px, 5vw, 60px);
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.hero-headline-xl { font-size: clamp(40px, 6.5vw, 84px); line-height: 1; }
.hero-sub {
  font-size: 18px;
  line-height: 1.55;
  margin-bottom: 28px;
  opacity: 0.85;
  max-width: 560px;
}
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ====================================================
   9. HEADER/FOOTER STRUCTURES
   ==================================================== */
.site-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: clamp(20px, 4vw, 52px); min-width: 0;
  padding: 18px 32px; border-bottom: 1px solid transparent;
}
.site-header .logo { flex: 1 1 auto; min-width: 0; max-width: min(42vw, 34ch); font-weight: 800; letter-spacing: -0.01em; font-size: 18px; overflow-wrap: break-word; }
.site-header nav { flex: 0 1 auto; display: flex; gap: 28px; align-items: center; }
.site-header nav a { font-size: 14px; font-weight: 500; }
.site-header .menu-btn { display: none; font-size: 22px; }
@media (max-width: 768px) {
  .site-header { display: flex !important; justify-content: space-between !important; align-items: center !important; padding-inline: clamp(18px, 5vw, 32px) !important; gap: 16px !important; }
  .site-header .logo { flex: 1 1 auto !important; min-width: 0 !important; max-width: calc(100% - 60px) !important; overflow-wrap: anywhere; font-size: clamp(18px, 5vw, 22px) !important; line-height: 1.15 !important; text-align: left !important; }
  .site-header .tag-pill { display: none !important; }
  .site-header > :first-child:has(.logo) { flex: 1 1 auto !important; min-width: 0 !important; }
  .site-header > :first-child:has(.logo) .logo { max-width: 100% !important; }
  .site-header nav.desktop { display: none !important; }
  .site-header .menu-btn { position: relative !important; inset: auto !important; transform: none !important; margin-left: auto !important; flex: 0 0 44px !important; display: inline-flex !important; align-items: center; justify-content: center; }
}
.mobile-menu {
  display: none; padding: 14px 32px; border-top: 1px solid rgba(0,0,0,0.08);
}
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; padding: 10px 0; font-size: 15px; font-weight: 500; }

/* Mobile/coarse-pointer controls meet the 44px interaction floor without
   inflating desktop editorial links. Scope to actual controls and chrome —
   prose links remain inline and keep their natural line height. */
@media (pointer: coarse), (max-width: 768px) {
  button,
  .btn,
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not(.peak-honeypot),
  select,
  textarea,
  summary,
  .faq-q,
  .site-header nav a,
  .mobile-menu a,
  .site-footer a,
  .preview-legal-links a,
  .peak-legal-bar a {
    min-height: 44px;
  }
  button,
  .btn,
  summary,
  .faq-q,
  .site-header nav a,
  .mobile-menu a,
  .site-footer a,
  .preview-legal-links a,
  .peak-legal-bar a {
    min-width: 44px;
  }
  button, .btn, summary, .faq-q, .site-header nav a,
  .site-footer a, .preview-legal-links a, .peak-legal-bar a,
  .preview-ci-v a, .contact-info-value a, .sms-policy-links a, .peak-read-more a,
  a.logo, a.preview-logo-link, a.contact-page-logo-link, a.legal-logo-link {
    display: inline-flex;
    align-items: center;
  }
  .peak-skip-link,
  .preview-ci-v a,
  .contact-info-value a,
  .sms-policy-links a,
  .peak-read-more a,
  a.logo, a.preview-logo-link, a.contact-page-logo-link, a.legal-logo-link {
    min-width: 44px;
    min-height: 44px;
  }
  input[type="checkbox"]:not(.sms-consent-checkbox), input[type="radio"] {
    min-width: 24px;
    min-height: 24px;
  }
}

.site-footer { padding: 60px 0 28px; }
.site-footer .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
@media (max-width: 800px) { .site-footer .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .site-footer .footer-grid { grid-template-columns: 1fr; } }
.site-footer h3, .site-footer h5 { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.65; margin-bottom: 16px; }
.site-footer ul li { padding: 4px 0; font-size: 14px; opacity: 0.85; }
/* The SMALLEST text on the page had the HEAVIEST muting: 11px at opacity 0.5
   measured 3.36:1 on a light footer — under 4.5:1, so the browser contrast gate
   fails it as a hard error and holds the whole site's rebuild. That locked a
   live client out of publishing ANY edit. This is also the securities
   disclaimer, where legibility is a compliance concern and not just an a11y
   one. 0.7 measures 6.36:1 on the same palette and still reads as clearly
   secondary — and it is no longer more muted than the 12px headings above it. */
.site-footer .disclaimer {
  font-size: 11px; line-height: 1.6; opacity: 0.7;
  padding-top: 24px; border-top: 1px solid rgba(0,0,0,0.08);
}
.site-footer.dark .disclaimer { border-top-color: rgba(255,255,255,0.08); }

/* ====================================================
   10. FAQ ACCORDION
   ==================================================== */
.faq-item {
  border-bottom: 1px solid var(--color-border);
  padding: 18px 0;
  cursor: pointer;
}
.faq-q {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; font-size: 17px;
  /* .faq-q renders as a real <button> for keyboard/AT access (DELIV-5); strip UA
     button chrome but keep the flex layout + type scale (font-family, not font,
     so the explicit weight/size above survive). */
  width: 100%; margin: 0; padding: 0; border: 0; background: none;
  color: inherit; font-family: inherit; text-align: left; cursor: pointer;
}
.faq-q .toggle { font-size: 22px; transition: transform .2s; line-height: 1; }
.faq-item.open .toggle { transform: rotate(45deg); }
.faq-a {
  max-height: 0; overflow: hidden; transition: max-height .25s ease;
  font-size: 15px; line-height: 1.65; opacity: 0.85;
}
.faq-item.open .faq-a { max-height: 400px; padding-top: 14px; }

/* ====================================================
   11. MISC HELPERS
   ==================================================== */
.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); }
.t-premium-dark .text-muted,
.t-luxury-gold .text-muted,
.t-event .text-muted,
.dark-section .text-muted { color: rgba(255,255,255,0.7); }
.t-local-operator .text-muted { color: #5e574a; }
.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-0 { margin-bottom: 0; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.divider-line { width: 60px; height: 2px; background: currentColor; opacity: 0.6; margin: 14px 0 22px; }
.hr-soft { border: 0; border-top: 1px solid var(--color-border); margin: 32px 0; }

/* Process timeline */
.process-step {
  display: flex; gap: 20px; padding: 22px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.process-step .step-num {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--color-warm-gold); flex-shrink: 0; width: 50px;
}
.dark-section .process-step { border-bottom-color: rgba(255,255,255,0.08); }

/* Pull-quote */
.pull-quote {
  font-family: var(--font-serif); font-size: 26px;
  line-height: 1.4; margin: 0;
}

/* Logo strip */
.logo-strip {
  display: flex; gap: 40px; flex-wrap: wrap; align-items: center;
  opacity: 0.65;
}
.logo-strip .logo-item {
  font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600;
}

/* Bullet list with check */
.check-list li {
  position: relative; padding: 8px 0 8px 28px;
  font-size: 15px;
}
.check-list li::before {
  content: "✓"; position: absolute; left: 0; top: 8px;
  color: var(--color-success); font-weight: 700;
}
.t-luxury-gold .check-list li::before,
.t-premium-dark .check-list li::before { color: var(--color-warm-gold); }
.t-event .check-list li::before { color: #ffd166; }
.t-bold-modern .check-list li::before { color: var(--color-accent-orange); }

/* ====================================================
   12. IMAGE-SLOT SYSTEM
   Every placeholder uses .image-slot with data attributes:
     data-image-slot="<slug>"     identifies the slot type
     data-image-subject="..."     describes desired image
     data-image-aspect="16/9"     enforces aspect ratio
   When a real image is connected, set data-image-loaded="true"
   and either replace inner content with <img> or set
   background-image inline.
   ==================================================== */
.image-slot {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: #1a1d23;
  color: rgba(255,255,255,0.45);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  font-family: var(--font-mono);
  background-size: cover;
  background-position: center;
}
.image-slot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(0,0,0,0.15));
  pointer-events: none;
  z-index: 2;
}
.image-slot[data-image-loaded="true"]::after { display: none; }
.image-slot[data-image-loaded="true"] { background: #0a0a0a; }
.image-slot > * { position: relative; z-index: 3; }
.image-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor the visible crop to the lower-mid portion of the image. Property
     and skyline photos almost always put the meaningful content (buildings,
     city lights, the property itself) in the bottom half, with empty sky
     at the top. With the default `50% 50%` center-crop, tall hero containers
     show that empty sky band at the top of the section — which reads to the
     user as "a weird gap between the header and the hero." Anchoring to 65%
     vertical keeps the building/structure at eye level regardless of how
     tall the hero ends up. */
  object-position: 50% 65%;
  display: block;
  z-index: 1;
}

/* Legacy .img-ph upgraded to .image-slot — lift the 360px min-height
   so aspect-ratio (or grid sizing) can shape the slot correctly.
   Without this, narrow grid cells render the slot tall-and-skinny. */
.img-ph.image-slot { min-height: 0; }
/* When upgraded .img-ph has no aspect-ratio modifier, give it a sensible default */
.img-ph.image-slot:not(.img-ph-portrait):not(.img-ph-square):not(.img-ph-wide):not([class*="aspect-"]) {
  aspect-ratio: 4/3;
}

/* Force an image-slot's own aspect-ratio to win even when its parent
   is a grid cell that auto-stretches. The slot will keep its preferred
   ratio and its image will fill that box (object-fit: cover). */
.image-slot[class*="aspect-"] { align-self: start; justify-self: stretch; }

/* Aspect ratio helpers — hyphenated form, no escaping needed.
   Attribute selectors below catch the legacy backslash-slash form
   (e.g. literal class `aspect-4\/3`) that lingers in some HTML.
   `\\` in a CSS string matches one literal backslash character. */
.aspect-1-1,  [class~="aspect-1\\/1"]   { aspect-ratio: 1/1; }
.aspect-3-4,  [class~="aspect-3\\/4"]   { aspect-ratio: 3/4; }
.aspect-4-3,  [class~="aspect-4\\/3"]   { aspect-ratio: 4/3; }
.aspect-4-5,  [class~="aspect-4\\/5"]   { aspect-ratio: 4/5; }
.aspect-16-9, [class~="aspect-16\\/9"]  { aspect-ratio: 16/9; }
.aspect-21-9, [class~="aspect-21\\/9"]  { aspect-ratio: 21/9; }
.aspect-3-2,  [class~="aspect-3\\/2"]   { aspect-ratio: 3/2; }

/* Image-slot palette variants (placeholder colors only) */
.image-slot.tone-dark    { background: linear-gradient(135deg, #1a1d23 0%, #0d1014 100%); color: rgba(255,255,255,0.4); }
.image-slot.tone-navy    { background: linear-gradient(135deg, #0f2748 0%, #081a33 100%); color: rgba(255,255,255,0.5); }
.image-slot.tone-gold    { background: linear-gradient(135deg, #c9a96a 0%, #8a6f3c 100%); color: rgba(255,255,255,0.7); }
.image-slot.tone-beige   { background: linear-gradient(135deg, #ede5d6 0%, #d9c9a8 100%); color: rgba(0,0,0,0.4); }
.image-slot.tone-light   { background: linear-gradient(135deg, #e8e3d6 0%, #d8d2c0 100%); color: rgba(0,0,0,0.4); }
.image-slot.tone-blue    { background: linear-gradient(135deg, #4a6fa5 0%, #2c4a73 100%); color: rgba(255,255,255,0.6); }
.image-slot.tone-violet  { background: linear-gradient(135deg, #2c1f5c 0%, #1a1438 100%); color: rgba(255,255,255,0.5); }
.image-slot.tone-orange  { background: linear-gradient(135deg, #e8743b 0%, #c95f29 100%); color: rgba(255,255,255,0.75); }
.image-slot.tone-mono    { background: #f3f4f6; color: rgba(0,0,0,0.35); }

/* Object-fit hint frames */
.image-frame { border-radius: var(--radius-md); overflow: hidden; position: relative; }
.image-frame-circle { border-radius: 50%; aspect-ratio: 1/1; }
.image-frame-arch { border-radius: 200px 200px 12px 12px; overflow: hidden; }
.image-frame-soft { border-radius: 24px; }

/* Image stack (two overlapping frames) */
.image-stack { position: relative; }
.image-stack .image-slot { position: relative; z-index: 2; }
.image-stack .image-slot-2 {
  position: absolute; width: 65%; aspect-ratio: 1/1;
  right: -28px; bottom: -32px; z-index: 1;
  border: 6px solid #fff;
}
.t-premium-dark .image-stack .image-slot-2,
.t-luxury-gold .image-stack .image-slot-2,
.t-event .image-stack .image-slot-2 { border-color: #0d1014; }

/* Caption strip under an image */
.image-caption {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-text-muted); margin-top: 10px;
  font-family: var(--font-mono);
}

/* ====================================================
   13. GLOWS, ORBS, PATTERNS, GRADIENTS
   ==================================================== */
/* Sections that host atmospheric decorations (.glow, .orb, .float-orb) get
   `overflow: hidden` so the decorations — which are intentionally positioned
   200px past the section edges (see .glow-tr below) — get clipped at the
   section boundary instead of expanding the document width and causing a
   page-wide horizontal scrollbar. */
.has-bg-effects { position: relative; isolation: isolate; overflow: hidden; }
.has-bg-effects > .container,
.has-bg-effects > .container-narrow,
.has-bg-effects > .container-wide { position: relative; z-index: 2; }

/* Radial glows */
.glow {
  position: absolute; z-index: 0; pointer-events: none;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
}
.glow-gold     { background: radial-gradient(circle, #c9a96a 0%, transparent 70%); }
.glow-orange   { background: radial-gradient(circle, #e8743b 0%, transparent 70%); }
.glow-blue     { background: radial-gradient(circle, #4a6fa5 0%, transparent 70%); }
.glow-violet   { background: radial-gradient(circle, #6b3fa0 0%, transparent 70%); }
.glow-navy     { background: radial-gradient(circle, #0f2748 0%, transparent 70%); }
.glow-emerald  { background: radial-gradient(circle, #2f7d52 0%, transparent 70%); }
.glow-sm  { width: 300px; height: 300px; }
.glow-md  { width: 500px; height: 500px; }
.glow-lg  { width: 800px; height: 800px; }
.glow-xl  { width: 1100px; height: 1100px; }

.glow-tl { top: -200px; left: -200px; }
.glow-tr { top: -200px; right: -200px; }
.glow-bl { bottom: -200px; left: -200px; }
.glow-br { bottom: -200px; right: -200px; }
.glow-c  { top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* Decorative orbs (solid blurred circles) */
.orb {
  position: absolute; z-index: 0; pointer-events: none;
  border-radius: 50%; filter: blur(40px); opacity: 0.7;
}

/* Grid pattern background */
.bg-grid::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at center, #000 30%, transparent 75%);
}
.bg-grid-dark::before {
  background-image:
    linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
}
.bg-dots::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: 22px 22px;
}
.bg-dots-light::before {
  background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
}
.bg-noise::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/></svg>");
  mix-blend-mode: overlay;
}

/* Soft gradient backgrounds */
.bg-gradient-mesh-dark {
  background:
    radial-gradient(circle at 20% 20%, rgba(201,169,106,0.18) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(74,111,165,0.18) 0%, transparent 50%),
    linear-gradient(180deg, #0a0c10 0%, #11151c 100%);
}
.bg-gradient-mesh-light {
  background:
    radial-gradient(circle at 0% 0%, rgba(232,116,59,0.10) 0%, transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(47,110,209,0.10) 0%, transparent 50%),
    linear-gradient(180deg, #fbfaf7 0%, #ffffff 100%);
}
.bg-gradient-violet {
  background: linear-gradient(135deg, #1a1438 0%, #2c1f5c 50%, #4a2d7a 100%);
}
.bg-gradient-navy-gold {
  background: linear-gradient(135deg, #0f2748 0%, #1a3357 60%, #c9a96a 200%);
}
.bg-gradient-warm-paper {
  background: linear-gradient(180deg, #f7f3eb 0%, #ede5d6 100%);
}

/* Glass-card effect */
.glass {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
}
.glass-light {
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-lg);
}

/* Accent lines */
.v-line { width: 1px; background: currentColor; opacity: 0.25; align-self: stretch; }
.h-line { height: 1px; background: currentColor; opacity: 0.25; width: 100%; }
.accent-bar {
  display: inline-block; width: 36px; height: 3px;
  background: var(--color-warm-gold); border-radius: 2px; margin-bottom: 16px;
}
.accent-bar-orange { background: var(--color-accent-orange); }
.accent-bar-blue   { background: var(--color-muted-blue); }
.accent-bar-violet { background: #6b3fa0; }
.accent-bar-emerald { background: var(--color-success); }

/* Ring (decorative ring around content) */
.ring-frame {
  border: 1px solid rgba(201,169,106,0.35);
  border-radius: var(--radius-lg);
  padding: 36px;
}
.ring-frame-double {
  position: relative;
  border: 1px solid rgba(201,169,106,0.35);
  border-radius: var(--radius-lg);
  padding: 30px;
}
.ring-frame-double::before {
  content: ""; position: absolute; inset: 6px;
  border: 1px solid rgba(201,169,106,0.18);
  border-radius: calc(var(--radius-lg) - 4px);
  pointer-events: none;
}

/* Stat ring (KPI badge) */
.stat-ring {
  display: inline-flex; align-items: center; justify-content: center;
  width: 110px; height: 110px; border-radius: 50%;
  border: 2px solid currentColor;
  font-family: var(--font-mono); font-weight: 700; font-size: 22px;
  letter-spacing: -0.02em;
}

/* Marquee / ticker */
.ticker {
  display: flex; gap: 60px;
  font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600; opacity: 0.6;
  overflow: hidden; white-space: nowrap;
}
.ticker > span { flex-shrink: 0; }

/* Split background (two halves) */
.split-bg {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 520px;
}
@media (max-width: 900px) { .split-bg { grid-template-columns: 1fr; } }
.split-bg > div { padding: var(--space-2xl); display: flex; align-items: center; }

/* Number badge (large hollow numerals) */
.numeral {
  font-family: var(--font-serif); font-size: 88px; line-height: 1;
  font-weight: 400; color: transparent;
  -webkit-text-stroke: 1px currentColor;
  opacity: 0.7;
}

/* Stat row */
.stat-row {
  display: flex; gap: 36px; flex-wrap: wrap;
}
.stat-row .stat-cell .stat-n {
  font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1;
}
.stat-row .stat-cell .stat-l {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-text-muted); margin-top: 6px;
}

/* Hover lift */
.hover-lift { transition: transform .2s ease, box-shadow .2s ease; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* Subtle animation keyframes (decorative) */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.7; }
}
.animate-float     { animation: float 6s ease-in-out infinite; }
.animate-pulse-glow { animation: pulse-glow 5s ease-in-out infinite; }

/* Headline highlight underline */
.hl-underline {
  background-image: linear-gradient(transparent 65%, rgba(201,169,106,0.5) 65%);
  background-repeat: no-repeat;
  padding: 0 4px;
}
.hl-underline-orange { background-image: linear-gradient(transparent 65%, rgba(232,116,59,0.45) 65%); }
.hl-underline-blue   { background-image: linear-gradient(transparent 65%, rgba(74,111,165,0.35) 65%); }

/* Tag pill */
.tag-pill {
  display: inline-block; padding: 5px 12px;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; border-radius: var(--radius-pill);
  background: rgba(0,0,0,0.06); color: inherit;
}

/* Card with image cover at top */
.card-image-top { padding: 0; overflow: hidden; }
.card-image-top .card-image { aspect-ratio: 16/9; }
.card-image-top .card-body { padding: var(--space-lg); }

/* Bento grid (mixed size) */
.bento {
  display: grid; gap: 16px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 160px;
}
.bento .b-2x1 { grid-column: span 2; }
.bento .b-2x2 { grid-column: span 2; grid-row: span 2; }
.bento .b-3x1 { grid-column: span 3; }
.bento .b-4x1 { grid-column: span 4; }
@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento .b-3x1, .bento .b-4x1, .bento .b-2x1, .bento .b-2x2 { grid-column: span 2; grid-row: auto; }
}

/* Quote block */
.blockquote {
  font-family: var(--font-serif); font-size: 28px; line-height: 1.35;
  font-weight: 400; padding-left: 24px;
  border-left: 3px solid var(--color-warm-gold);
}

/* Section transitions between dark/light */
.curve-divider { position: relative; height: 80px; overflow: hidden; }
.curve-divider svg { position: absolute; bottom: 0; width: 100%; height: 100%; }

/* ====================================================
   14. PARALLAX + MOTION
   Parallax driven by JS setting --parallax-y on scroll.
   ==================================================== */
[data-parallax] {
  will-change: transform;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  transition: transform 60ms linear;
}

/* Ken Burns: slow infinite pan + zoom on images inside .ken-burns */
@keyframes ken-burns {
  0%   { transform: scale(1.05) translate(0, 0); }
  50%  { transform: scale(1.18) translate(-2%, -2%); }
  100% { transform: scale(1.05) translate(0, 0); }
}
.ken-burns img {
  animation: ken-burns 28s ease-in-out infinite;
  will-change: transform;
}

/* Apply Ken Burns to all hero image-slots by default */
.hero-base .image-slot img,
.hero-base .img-ph img { animation: ken-burns 32s ease-in-out infinite; }

/* Animated drift for glows (gentle wandering motion) */
@keyframes drift-diag {
  0%, 100% { transform: translate(0, 0); }
  33%      { transform: translate(60px, -40px); }
  66%      { transform: translate(-40px, 30px); }
}
@keyframes drift-x {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(80px); }
}
@keyframes drift-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-50px); }
}
.animate-drift-diag { animation: drift-diag 18s ease-in-out infinite; }
.animate-drift-x { animation: drift-x 14s ease-in-out infinite; }
.animate-drift-y { animation: drift-y 16s ease-in-out infinite; }

/* When stacking glow + drift, the existing transform must compose.
   Use a wrapper or rely on the glow positioning props (top/left) only. */

/* Slow rotate */
@keyframes rotate-slow {
  to { transform: rotate(360deg); }
}
.animate-rotate-slow { animation: rotate-slow 60s linear infinite; }

/* Subtle bob (decorative shapes) */
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-14px) rotate(2deg); }
}
.animate-bob { animation: bob 9s ease-in-out infinite; }

/* ====================================================
   15. CURSOR SPOTLIGHT
   JS sets --mx / --my on .spotlight elements on mousemove.
   ==================================================== */
.spotlight { position: relative; overflow: hidden; }
.spotlight::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(
    600px circle at var(--mx, 50%) var(--my, 50%),
    rgba(201, 169, 106, 0.16),
    transparent 45%
  );
  pointer-events: none;
  z-index: 1;
  transition: background-position 0.1s linear;
}
.spotlight-orange::before {
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(232, 116, 59, 0.20), transparent 45%);
}
.spotlight-blue::before {
  background: radial-gradient(700px circle at var(--mx, 50%) var(--my, 50%), rgba(74, 111, 165, 0.20), transparent 45%);
}
.spotlight-violet::before {
  background: radial-gradient(700px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 209, 102, 0.18), transparent 45%);
}
.spotlight-emerald::before {
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(47, 125, 82, 0.20), transparent 45%);
}
/* Lift content above the spotlight ::before gradient (z-index 1) — but
   DO NOT touch .glow / .float-orb whose absolute positioning would otherwise
   collapse to in-flow and balloon the section height. */
.spotlight > .container,
.spotlight > .container-narrow,
.spotlight > .container-wide { position: relative; z-index: 2; }
.spotlight > *:not(.glow):not(.float-orb):not(.scroll-hint) {
  position: relative;
  z-index: 2;
}
.spotlight > .glow,
.spotlight > .float-orb { z-index: 0; }

/* ====================================================
   16. SHIMMER + GRADIENT TEXT
   ==================================================== */
@keyframes shimmer-sweep {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
/* Gradient-clipped + shimmer text is an absolute "AI slop" tell: decorative,
   never meaningful, an a11y risk — and here it also painted a hardcoded
   gold/orange/blue that ignored the client palette entirely (a green-brand site
   would still get gold headlines). Neutralized to solid, inherited
   (palette-driven) color so emphasis comes from the heading's own weight/size
   and stays readable on any surface. The selectors are kept so the templates'
   existing class hooks still resolve to a sane, on-brand result. */
.shimmer-gold,
.shimmer-orange,
.shimmer-cool,
.gradient-text-gold,
.gradient-text-fire,
.gradient-text-cool {
  background: none;
  background-image: none;
  -webkit-background-clip: border-box;
          background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: inherit;
  animation: none;
}

/* ====================================================
   17. GRAIN + VIGNETTE OVERLAYS
   ==================================================== */
.grain-overlay { position: relative; }
.grain-overlay::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
  opacity: 0.10;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 4;
}

.vignette { position: relative; }
.vignette::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 220px 50px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  z-index: 3;
}

/* ====================================================
   18. FLOATING ORBS (decorative gradient circles)
   ==================================================== */
.float-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
  animation: bob 8s ease-in-out infinite;
}
.float-orb.orb-gold     { background: radial-gradient(circle, #c9a96a, transparent 70%); }
.float-orb.orb-orange   { background: radial-gradient(circle, #e8743b, transparent 70%); }
.float-orb.orb-violet   { background: radial-gradient(circle, #6b3fa0, transparent 70%); }
.float-orb.orb-blue     { background: radial-gradient(circle, #4a6fa5, transparent 70%); }
.float-orb.orb-emerald  { background: radial-gradient(circle, #2f7d52, transparent 70%); }

/* ====================================================
   19. ANIMATED CONIC GRADIENT BORDER
   Wraps a card with a slowly rotating gold ring.
   ==================================================== */
@property --conic-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes spin-conic { to { --conic-angle: 360deg; } }

.conic-border {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 1.5px;
  background: conic-gradient(
    from var(--conic-angle, 0deg),
    rgba(201, 169, 106, 0.0) 0deg,
    rgba(201, 169, 106, 0.9) 90deg,
    rgba(201, 169, 106, 0.0) 180deg,
    rgba(201, 169, 106, 0.9) 270deg,
    rgba(201, 169, 106, 0.0) 360deg
  );
  animation: spin-conic 8s linear infinite;
}
.conic-border > .conic-inner {
  background: #0d1014;
  border-radius: calc(var(--radius-lg) - 2px);
  padding: 36px;
  position: relative;
  z-index: 1;
}

/* Fallback for browsers without @property support — static gradient ring */
@supports not (background: conic-gradient(from var(--conic-angle, 0deg), #000, #000)) {
  .conic-border { animation: none; background: linear-gradient(135deg, rgba(201,169,106,0.6), rgba(201,169,106,0.1), rgba(201,169,106,0.6)); }
}

/* ====================================================
   20. GLASS HERO CONTENT BOX
   Use over a full-bleed image hero to keep copy legible.
   ==================================================== */
.hero-content-glass {
  background: rgba(13, 16, 20, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 42px;
}
.hero-content-glass-light {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-lg);
  padding: 42px;
}

/* ====================================================
   21. SCROLL HINT CHEVRON
   ==================================================== */
@keyframes bounce-y {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.6; }
  50%      { transform: translate(-50%, 8px); opacity: 1; }
}
.scroll-hint {
  position: absolute;
  bottom: 24px; left: 50%;
  font-size: 22px;
  color: currentColor;
  opacity: 0.6;
  animation: bounce-y 2s ease-in-out infinite;
  z-index: 6;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 11px;
}
.scroll-hint::after { content: " ↓"; font-size: 14px; }

/* ====================================================
   22. ANIMATED GRADIENT BACKGROUND (for sections with no image)
   ==================================================== */
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.bg-animated-mesh {
  background: linear-gradient(135deg, #0a0c10, #1a2640, #2c1f5c, #0a0c10);
  background-size: 400% 400%;
  animation: gradient-shift 18s ease infinite;
}
.bg-animated-warm {
  background: linear-gradient(135deg, #fff7ee, #fdebd9, #fff, #fff7ee);
  background-size: 400% 400%;
  animation: gradient-shift 22s ease infinite;
}
.bg-animated-violet {
  background: linear-gradient(135deg, #1a1438, #2c1f5c, #4a2d7a, #1a1438);
  background-size: 400% 400%;
  animation: gradient-shift 20s ease infinite;
}

/* Reduce motion support */
@media (prefers-reduced-motion: reduce) {
  .animate-pulse-glow, .animate-float, .animate-drift-x, .animate-drift-y,
  .animate-drift-diag, .animate-rotate-slow, .animate-bob,
  .ken-burns img, .hero-base .image-slot img, .hero-base .img-ph img,
  .shimmer-gold, .shimmer-orange, .shimmer-cool, .conic-border,
  .bg-animated-mesh, .bg-animated-warm, .bg-animated-violet, .scroll-hint {
    animation: none !important;
  }
  [data-parallax] { transform: none !important; }
}

/* Print (DELIV-10): a client or investor printing the page should get a clean
   document — no interactive chrome, no sticky offsets eating the top of a page,
   no dark full-bleed ink-guzzlers, and every FAQ answer expanded. `.no-print`
   is defined here (it did not previously exist) as a general opt-out hook. */
@media print {
  .menu-btn, .mobile-menu, .peak-skip-link, .scroll-hint,
  .no-print { display: none !important; }
  /* Drop sticky/fixed positioning so headers don't reserve space or repeat. */
  .site-header, .site-header-wrapper, header[style*="sticky"], [style*="position: sticky"], [style*="position:sticky"] {
    position: static !important; top: auto !important;
  }
  html { scroll-behavior: auto; }
  body { background: #fff !important; color: #000 !important; }
  /* Expand accordions so printed FAQs aren't clipped to their closed height. */
  .faq-a { max-height: none !important; overflow: visible !important; opacity: 1 !important; }
  /* Avoid orphaned headings + split cards across page breaks. */
  h1, h2, h3 { break-after: avoid; }
  .card, .faq-item, figure { break-inside: avoid; }
}

/* Wave 3 shared recipe primitives. Per-recipe geometry and frozen palette/type
   remain inline; this dormant class-gated base is shared once across new sites. */
body.peak-wave3 { background: var(--w3b); color: var(--w3f); font-synthesis: none; }
.peak-wave3 #hero { min-height: min(900px, 100svh) !important; padding-block: 0 !important; }
.peak-wave3 main > .section-tall { padding-block: clamp(64px, 6vw, 88px) !important; }
.peak-wave3 .peak-recipe-hero-host { display: block !important; min-height: 0 !important; height: auto !important; max-width: min(1320px, calc(100% - 48px)) !important; padding-block: clamp(40px, 7vw, 96px) !important; }
.peak-wave3 .peak-recipe-hero { display: grid; gap: clamp(28px, 6vw, 96px); align-items: center; }
/* A hero with no companion media — either the image sits behind as a backdrop, or
   no confident photograph existed and the media column was dropped. Both cases
   already set `peak-recipe-hero-solo`, but nothing ever styled it, so the grid
   kept the second track from its per-form template and the copy sat squeezed
   against a reserved void. Each hero form declares its own two-column template in
   the per-client inline recipe CSS, which loads AFTER this sheet, so collapsing to
   one column needs !important to win. */
.peak-wave3 .peak-recipe-hero-solo { grid-template-columns: minmax(0, 1fr) !important; }
.peak-wave3 .peak-recipe-hero-copy > * { max-width: none; }
.peak-wave3 .peak-recipe-section { min-width: 0; min-height: 0; height: auto; align-content: start; }
/* The list-form recipe rows need the SAME automatic-minimum release as the
   two-column shell, and not having it pushed text past the viewport on mobile.
   Mechanism (bisected, not guessed): a figure inside `.peak-recipe-aside` sets
   `height: clamp(260px, 34vw, 440px)`, which pins to its 260px FLOOR below ~765px.
   With an aspect-ratio of 1.5 from the image's width/height attrs, that fixes the
   image's min-content contribution at 260 x 1.5 = 390px. The aside is a grid item
   with `min-width: auto`, so it inherits that 390px minimum; the list's auto track
   takes the largest item minimum as its base and never shrinks below it. The track
   then measures 390px inside a 346px container — and the SIBLING row
   (`.peak-recipe-entry`), stretched to that track, is what visibly overhangs. The
   overflowing element was never the cause, which is why min-width on it did
   nothing. Releasing the minimum on both rows lets the track collapse to the
   container. Viewport-independent: the same defect appears at 320px via
   `.peak-fig--band` (220 x 1.5 = 330px). */
.peak-wave3 .peak-recipe-section > .peak-recipe-primary,
.peak-wave3 .peak-recipe-section > .peak-recipe-secondary,
.peak-wave3 .peak-recipe-section > .peak-recipe-entry,
.peak-wave3 .peak-recipe-section > .peak-recipe-aside { min-width: 0; min-height: 0; }
.peak-wave3 .peak-recipe-secondary-wide { grid-column: 1/-1; order: initial !important; width: 100%; }
.peak-wave3 .peak-recipe-hero-media { width: 100%; min-width: 0; align-self: stretch; }
.peak-wave3 .peak-recipe-hero-media > :is(figure, picture, .image-slot, .peak-dash-visual, .hero-media, .hero-visual) {
  width: 100% !important; max-width: none !important; min-height: clamp(300px, 32vw, 500px); height: 100%;
}
.peak-wave3 .peak-recipe-hero-media :is(figure, picture, .image-slot) { width: 100% !important; max-width: none !important; }
.peak-wave3 .peak-recipe-hero-media img { display: block; width: 100% !important; max-width: none !important; min-height: 100%; height: 100%; object-fit: cover; }
.peak-wave3 .peak-recipe-hero-proof { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: clamp(14px, 2vw, 28px) !important; margin-top: clamp(24px, 4vw, 44px) !important; }
.peak-wave3 .peak-recipe-hero-proof > * { grid-column: auto !important; grid-row: auto !important; min-height: 0 !important; margin: 0 !important; padding: 16px 0 0 !important; background: transparent !important; border: 0 !important; border-top: 1px solid var(--w3ar) !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; }
.peak-wave3 .peak-recipe-hero-proof :is(h2, h3, h4, p) { margin-block: 0 8px !important; max-width: 34ch; }
/* The hero-proof grid flattens every child to a transparent, top-bordered
   editorial row (background stripped above). A peak-on-dark card lands here with
   its dark fill removed but its light ink intact — white on the light hero. Since
   the fill is gone, force the lane foreground so the flattened row reads dark,
   matching every other proof row. Scoped to hero-proof so genuine dark cards
   elsewhere keep their light ink. */
.peak-wave3 .peak-recipe-hero-proof > .peak-on-dark,
.peak-wave3 .peak-recipe-hero-proof > .peak-on-dark :is(h1, h2, h3, h4, h5, h6, p, li, label, blockquote, figcaption, dt, dd, strong, b, em, a:not(.btn):not([class*="btn"])) { color: var(--w3f) !important; }
/* A photographic hero is an indeterminate surface: neither the image nor its
   crop has a stable luminance. Transparent proof rows therefore cannot make a
   contrast promise, even when their text token is correct. Give ONLY backdrop
   heroes an opaque editorial plaque and lock its prose to white; ordinary light
   heroes keep the flatter ruled-row treatment above. The opaque paint is also a
   machine-checkable contract for wave3-browser-qa — image-backed copy is no
   longer exempt from the contrast gate. */
.peak-wave3 .peak-recipe-hero-has-backdrop .peak-recipe-hero-proof > * {
  padding: 18px !important;
  color: #fff !important;
  background: color-mix(in srgb, #080a0c 90%, var(--w3a)) !important;
  border: 1px solid color-mix(in srgb, #fff 22%, transparent) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .2) !important;
}
.peak-wave3 .peak-recipe-hero-has-backdrop .peak-recipe-hero-proof > * :is(h1, h2, h3, h4, h5, h6, p, li, label, blockquote, figcaption, dt, dd, strong, b, em, a:not(.btn):not([class*="btn"])) {
  color: #fff !important;
}
.peak-wave3 .peak-recipe-hero-nonphotographic .peak-recipe-hero-media { min-height: clamp(180px, 30vw, 460px); border-left: 1px solid var(--w3ar); box-shadow: inset 0 0 0 1px var(--w3ar); }
.peak-wave3 .peak-recipe-hero-has-backdrop .peak-recipe-hero-media { min-height: 20rem; border: 1px solid var(--w3ar); }
.peak-wave3 .peak-recipe-entry::before { content: attr(data-recipe-index); font: 600 .72rem/1 var(--font-body); letter-spacing: .12em; color: var(--w3a); }
/* The recipe header host holds a utility/meta strip, the header row, and the
   mobile menu — a vertical stack, never a row. As a flex ROW those became
   side-by-side columns: the header collapsed to ~121px and the mobile
   hardening's min-width:0 + overflow-wrap:anywhere then shredded the wordmark
   to one glyph per line (22 line boxes on a 24-char firm name), while the meta
   strip's three spans stacked into narrow columns that read across as
   gibberish. */
.peak-wave3 .peak-recipe-header { display: block; }
.peak-wave3 .peak-recipe-header > .site-header { width: 100%; box-sizing: border-box; }
/* The base sheet only swaps in the mobile header at 768px, but a recipe header
   carries a centered-logo grid and a wider nav, so 769–960px still squeezed the
   wordmark into a 4-to-23-line column (and overflowed the document at 820/900).
   Hand the whole band the mobile treatment; without the menu button the nav
   would otherwise be unreachable there. */
@media (max-width: 960px) {
  .peak-wave3 .peak-recipe-header nav.desktop { display: none !important; }
  .peak-wave3 .peak-recipe-header .menu-btn { display: inline-flex !important; align-items: center; justify-content: center; }
  .peak-wave3 .peak-recipe-header .logo { max-width: calc(100% - 56px); overflow-wrap: normal; word-break: normal; }
}
.peak-wave3 [data-recipe-beat="evidence"] .peak-recipe-section { border-block: 1px solid var(--w3r); padding-block: clamp(18px, 3vw, 42px); }
.peak-wave3 [data-recipe-beat="prose"] .peak-recipe-primary { max-width: 68ch; }
.peak-wave3 [data-recipe-beat="margin-note"] .peak-recipe-secondary { font-size: .9em; }
.peak-wave3 .peak-recipe-secondary-wide { grid-column: 1/-1; }
@media (max-width: 760px) {
  /* Recipe-specific desktop grids are emitted inline after the shared sheet.
     The important mobile reset is therefore required to prevent long-brand
     plans from retaining two 140–150px columns on a 390px viewport. */
  .peak-wave3 .peak-recipe-hero, .peak-wave3 .peak-recipe-contact, .peak-wave3 .peak-recipe-footer { grid-template-columns: minmax(0, 1fr) !important; }
  .peak-wave3 #hero .peak-recipe-hero { gap: 22px !important; }
  .peak-wave3 .peak-recipe-hero-host { max-width: calc(100% - 28px) !important; padding-block: 38px !important; }
  .peak-wave3 .peak-recipe-hero-media { height: min(72vw, 300px) !important; min-height: 220px !important; overflow: hidden; margin-top: 0 !important; }
  .peak-wave3 .peak-recipe-hero-media > * { min-height: 220px !important; height: 100% !important; }
  .peak-wave3 .peak-recipe-hero-proof { grid-template-columns: 1fr !important; gap: 12px !important; margin-top: 22px !important; }
  .peak-wave3 .peak-recipe-hero-proof > * { padding-top: 12px !important; }
  .peak-wave3 #hero .peak-recipe-hero-stage { padding: 20px !important; }
  .peak-wave3 #hero :is(.hero-content-glass, .hero-content-glass-light) { width: 100% !important; max-width: none !important; padding: 24px !important; box-sizing: border-box; }
  .peak-wave3 .peak-recipe-hero-regional-plate .peak-recipe-hero-copy { padding: 20px 0 !important; border-left: 0 !important; border-top: 1px solid var(--w3ar); }
  .peak-wave3 .peak-recipe-hero-hospitality-editorial .peak-recipe-hero-media { transform: none !important; }
  .peak-wave3 .peak-recipe-hero-material-plane .peak-recipe-material-rule { display: none; }
  .peak-wave3 .peak-recipe-entry { grid-template-columns: 36px minmax(0, 1fr); }
}


  /* generate-preview.js helper styles (not part of the section library) */
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  /* Skip-to-content link (DELIV-6): visually hidden until keyboard-focused, then
     pinned top-left over everything. No .sr-only util exists, so this rule is
     self-contained. Mirrored in assets/style.css for legacy shells. */
  .peak-skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000;
    padding: 10px 16px; background: #101418; color: #fff; border-radius: 0 0 6px 0;
    font: 600 14px/1.2 -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    text-decoration: none; }
  .peak-skip-link:focus { left: 0; }
  /* Paid-site frame: backgrounds may bleed full width, but copy and supporting
     imagery need a calm working measure. The base library's 24px gutter looked
     fine in isolated sections, then felt cheap on full-width hero/CTA surfaces
     where text and figures could sit too close to the viewport edge. Keep the
     backgrounds full-bleed; widen only the reusable content frame. */
  :root { --peak-page-gutter: clamp(24px, 5vw, 80px); --peak-content-max: 1200px; --peak-wide-content-max: 1400px; }
  body .container,
  body .container-narrow,
  body .container-wide {
    padding-left: var(--peak-page-gutter);
    padding-right: var(--peak-page-gutter);
  }
  body .container { max-width: var(--peak-content-max); }
  body .container-wide { max-width: var(--peak-wide-content-max); }
  @media (max-width: 640px) { :root { --peak-page-gutter: 22px; } }
  .preview-missing { background: #ffe08a; color: #7a4b00; padding: 0 .25em; border-radius: 3px; font-weight: 600; }
  /* ── Mobile header nav (design-sweep C2) ──
     !important because 8 header templates carry inline "display:flex" on
     nav.desktop, which beats the base stylesheet's plain media rule — the
     desktop row rendered NEXT TO the hamburger at 390px, clipped offscreen and
     forcing 60–96px of horizontal page overflow. The hamburger + .mobile-menu
     own phone navigation (ensureMobileNav guarantees both exist and carry the
     full link set); .peak-mobile-hide is the tag it puts on always-visible
     secondary link rows. */
  @media (max-width: 768px) {
    .site-header { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 14px !important; text-align: left !important; padding: 16px 18px !important; min-width: 0 !important; }
    .site-header > :first-child { flex: 1 1 auto !important; min-width: 0 !important; }
    .site-header > :first-child > :not(.peak-person-mono) { min-width: 0 !important; }
    .site-header .logo { flex: 1 1 auto !important; min-width: 0 !important; max-width: calc(100% - 58px) !important; overflow-wrap: anywhere; word-break: normal; line-height: 1.15 !important; }
    /* Market pills are supplemental desktop context. Beside a long grounded
       company name they divided the phone header into two 140px columns and
       produced a six-line wordmark. The market remains in page copy/nav. */
    .site-header .tag-pill { display: none !important; }
    .site-header nav.desktop, .site-header-wrapper nav.desktop, .peak-mobile-hide { display: none !important; }
    .site-header .menu-btn, .site-header-wrapper .menu-btn { position: static !important; inset: auto !important; transform: none !important; margin-left: auto !important; flex: 0 0 44px !important; width: 44px !important; height: 44px !important; display: inline-flex !important; align-items: center; justify-content: center; }
    .site-header-wrapper > nav.desktop { display: none !important; }
  }
  /* Current-page nav link (design-sweep F5): markCurrentNavLinks tags every
     page's own link (.peak-nav-current + the current-page ARIA attribute),
     but no rule ever styled it — the active page was invisible in the nav. A
     quiet underline reads on every theme, light or dark, without fighting the
     template's own link colors. The logo lockup is exempt (it's "current" on
     home but must never render underlined). */
  .site-header a.peak-nav-current:not(.logo):not(.preview-logo-link),
  .mobile-menu a.peak-nav-current,
  .site-header-wrapper a.peak-nav-current:not(.logo):not(.preview-logo-link) {
    text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; opacity: 1 !important;
  }
  /* Responsive tables (design-sweep C-tables): at phone width a fixed
     multi-column table (the data theme's MARKET / UNDERWRITING PARAMETERS)
     clipped at its card edge and silently LOST columns. Scroll it instead. */
  @media (max-width: 640px) {
    table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  }
  .preview-logo { max-height: 64px; max-width: 280px; width: auto; display: inline-block; vertical-align: middle; }
  @media (max-width: 640px) { .preview-logo { max-height: 48px; max-width: 200px; } }
  .preview-logo-placeholder { display: inline-block; padding: .35em .75em; border: 1px dashed currentColor; border-radius: 4px; opacity: .7; font-size: .85em; }
  .peak-generated-nav { display: flex; align-items: center; justify-content: flex-end; gap: clamp(12px, 2vw, 22px); flex-wrap: wrap; margin-left: auto; font-size: 14px; line-height: 1.35; }
  .peak-generated-nav a { color: inherit; text-decoration: none; white-space: nowrap; }
  @media (max-width: 720px) { .peak-generated-nav { width: 100%; justify-content: flex-start; margin: 12px 0 0; } }
  .preview-image { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* The responsive <picture> wrapper (applyImagePerformance) must be transparent
     to layout — a bare <picture> is an inline 0-width box, so the img's 100% width
     would resolve against it and collapse to 0×0. display:contents removes the
     picture box so the img sizes against the real slot/figure/hero container. */
  picture:has(> .preview-image) { display: contents; }
  /* display:contents de-boxes the <picture>, but the WebP <source> siblings then
     compute display:block and become real layout/grid items (e.g. in a mosaic
     figure they take a column and push the <img> aside — images stack). A <source>
     must never lay out; hide it (WebP selection via img.currentSrc is unaffected). */
  picture:has(> .preview-image) > source { display: none; }
  .preview-legal-links { margin-top: 14px; font-size: 13px; opacity: .85; }
  .preview-legal-links a { text-decoration: underline; color: inherit; }
  /* allow long, professional FAQ answers to fully expand when opened */
  .faq-item.open .faq-a { max-height: 1500px; }
  /* When a FAQ section centers its container content (text-align: center on
     an ancestor), keep questions AND answers aligned the same way so the
     accordion doesn't look ragtag. */
  .text-center .faq-item, .container-narrow.text-center .faq-item { text-align: center; }
  .text-center .faq-item .faq-q { justify-content: center; gap: 12px; }
  .text-center .faq-item .faq-a { text-align: center; }
  /* Floating stat/credibility cards positioned over images must sit above
     the image regardless of source order or stacking quirks. (z-index:3 wins
     over the hover-lift cards' own z-index:1 stacking context below.) */
  .card[style*="position: absolute"],
  .card[style*="position:absolute"] { z-index: 3; }

  /* ── §3 Motion ─────────────────────────────────────────────────────── */
  /* Scroll-reveal target state. The .preview-reveal class is added by motion.js
     ONLY when motion is allowed and the element is below the fold, so content is
     never hidden if JS is off or reduced-motion is set (no FOUC, no CLS — only
     opacity + transform animate, never layout). */
  .preview-reveal { transition: opacity var(--reveal-dur, .6s) var(--reveal-ease, var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1))), transform var(--reveal-dur, .6s) var(--reveal-ease, var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1))); will-change: opacity, transform; }
  /* !important so the hidden/shown states win over any library entrance
     animation or section rule (per spec, !important author rules beat
     animations). The class is only added by JS when motion is allowed.

     Every hidden state is gated on html.peak-reveal-armed because un-hiding
     used to be N independent per-element class writes behind a single unguarded
     timer: any path that skipped that timer (an exception, a throttled
     background tab, a bfcache restore) stranded copy at opacity 0 with no
     second net. Disarming is now ONE class write that cannot partially apply,
     so no code path can leave content permanently invisible. */
  html.peak-reveal-armed .preview-reveal:not(.in) { opacity: 0 !important; transform: translateY(var(--reveal-dist, 18px)) !important; }
  .preview-reveal.in { opacity: 1 !important; transform: none !important; }
  /* Content-aware reveal flavors (the flavor class is set by the motion JS). All
     composited (transform/opacity/clip-path) — never layout, so no CLS. --rise is
     the base behavior above; only the two deviations need rules. */
  html.peak-reveal-armed .preview-reveal--fade:not(.in) { transform: none !important; }   /* headings settle, no slide */
  .preview-reveal--clip { transition: opacity var(--reveal-dur, .6s) var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)), transform var(--reveal-dur, .6s) var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)), clip-path var(--reveal-dur, .6s) var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)) !important; }
  html.peak-reveal-armed .preview-reveal--clip:not(.in) { transform: scale(1.04) !important; clip-path: inset(0 0 16% 0) !important; }
  .preview-reveal--clip.in { transform: none !important; clip-path: inset(0 0 0 0) !important; }

  /* Hover-lift, re-enabled correctly: each lift card gets its OWN stacking
     context (position:relative; z-index:1) so it can rise on hover without ever
     sliding under an image — and the floating stat cards (z-index:3 above) stay
     on top. Deleting the effect to dodge the old z-index bug was a regression;
     managing the stacking context is the fix. */
  .hover-lift { position: relative; z-index: 1; }

  @media (prefers-reduced-motion: no-preference) {
    .hover-lift { transition: transform .25s var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)), box-shadow .25s var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)); }
    .hover-lift:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(var(--peak-shadow-rgb, 15, 23, 42), 0.18); }
    /* Micro-interactions */
    .btn, button, a.btn, a[class*="btn"] { transition: transform .2s var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)), box-shadow .2s var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)), opacity .2s var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)), background-color .2s var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)); }
    .btn:active, button:active, a.btn:active { transform: scale(.98); }
    .card { transition: transform .25s var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)), box-shadow .25s var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)), border-color .25s var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)); }
    /* Underline-grow on text nav links (not buttons). */
    header nav a:not([class*="btn"]), .site-footer a:not([class*="btn"]) {
      background-image: linear-gradient(currentColor, currentColor);
      background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
      transition: background-size .25s var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
    }
    header nav a:not([class*="btn"]):hover, .site-footer a:not([class*="btn"]):hover { background-size: 100% 1px; }
    /* Count-up numbers shouldn't reflow as digits change width. */
    .preview-stat-n[data-countup] { font-variant-numeric: tabular-nums; }
  }

  /* ── Focus-visible — a branded, contrast-safe keyboard focus ring ─────────
     Every interactive element gets a 2px accent ring, offset off the element
     (skill: 2–3px, offset, ≥3:1). Keyboard-only via :focus-visible so mouse
     clicks don't show it. accent-deep is the contrast-nudged token (≥4.5:1 on
     light surfaces); dark-tone sections switch to the bright variant. Never
     gated on motion — focus must always be visible. */
  :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--client-accent-deep, var(--client-accent, #2563eb));
    outline-offset: 2px;
  }
  .preview-tone-dark :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline-color: var(--client-accent-bright, #ffffff);
  }

  /* ── Editorial lede — editorial/warm personalities open the About section with
     a larger, more inviting first paragraph (a classic editorial device). Scoped
     to that one lead paragraph; !important beats the template's inline font-size. */
  .peak-lede-emph #about :is(.container, .container-narrow) > p:first-of-type {
    font-size: clamp(18px, 1.7vw, 23px) !important;
    line-height: 1.62 !important;
  }

  /* ── Committed color strategy (seeded; body.peak-committed) — the CTA band wears
     the brand's own SATURATED color instead of a neutral dark, for a stronger
     identity. Scoped to the CTA only (#offering); the footer stays a neutral dark
     anchor. Light text + bright accent are contrast-guaranteed (committedSurface
     is in the dark-surface nudge set), and the accent parallax glow sits on top. */
  body.peak-committed section#offering.preview-tone-dark {
    background: var(--peak-committed, #1a1f2e) !important;
  }

  /* ── Edge-hug guard (visual-invariants repairEdgeHugPanels) — a text panel
     inside a CONTAINER-LESS section (the library's full-bleed split CTA; any
     enhancement appended outside a container) otherwise starts ~40px from the
     viewport edge on wide screens while every contained section centers at the
     .container column. Align the panel's text to the exact container text
     column — (100vw − content-max)/2 + gutter — using the SAME variables the
     container gutters read, so the two can never drift apart; the panel's own
     background stays full-bleed because the inset is padding. !important: must
     beat the template's inline "padding: 80px 40px" sides (vertical padding
     untouched — padding-inline overrides sides only). */
  .peak-edge-guard { padding-inline: max(40px, var(--peak-page-gutter, 24px), calc((100vw - var(--peak-content-max, 1200px)) / 2 + var(--peak-page-gutter, 24px))) !important; }

  /* The library's atmospheric glows / orbs paint hard-coded colors that
     would conflict with the client palette. They're recolored to the client
     accent (at low opacity) by clientBrandCss when colors are supplied;
     when they're not, hide them rather than show gold/orange patches. */
  .grain-overlay { background-image: none !important; }

  /* Hero sits flush against the header — the library's .section padding adds
     80px of empty surface at the top of the hero, which reads as an awkward
     gap below the header on every theme. Zero the hero's top padding so its
     content begins right where the header ends. The hero's internal elements
     (h1 margin, image grid spacing) still provide breathing room. */
  section#hero, section#hero.section, section#hero.section-tall, section#hero.section-tight { padding-top: 0 !important; }
  /* Rebuilt heroes own their vertical rhythm through .peak-hero. Leaving the
     template's outer .section-tall bottom padding in place stacked 112px below
     that internal padding and made framed heroes look bottom-heavy. Full-bleed
     backdrop heroes are excluded because their outer band deliberately owns
     its painted padding/min-height. */
  section#hero:has(> .peak-hero):not(.peak-hero-bgimg-host) { padding-bottom: 0 !important; }

  /* Mobile collapse for inline-styled multi-column grids — many footer and
     section variants set grid-template-columns inline (e.g. "2fr 1fr 1fr 1fr"),
     which the library's class-based mobile rules (.grid-2/3/4 → 1fr) don't
     reach. Without this collapse, mobile users see right-hand columns clipped
     off-screen by the html/body overflow-x:clip safety. !important is needed
     to beat the inline style. Excludes already-responsive grids (minmax /
     repeat(auto-fit)) — those collapse on their own. */
  @media (max-width: 720px) {
    footer [style*="grid-template-columns"],
    .site-footer [style*="grid-template-columns"],
    section [style*="grid-template-columns"]:not([style*="minmax"]):not([style*="repeat(auto"]) {
      grid-template-columns: 1fr !important;
    }
  }

  /* ── Inline icon styling ───────────────────────────────────────────── */
  .preview-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
  /* Card-anchor icons stack on their own line, above the eyebrow + heading.
     display:block keeps them from inline-flowing next to the eyebrow when
     injectCardIcons prepends them at the top of the card. */
  .preview-card-icon { display: block; width: 28px; height: 28px; margin-bottom: 14px; color: var(--client-accent-deep, var(--client-accent, currentColor)); }
  .preview-tone-dark .preview-card-icon { color: var(--client-accent-bright, var(--client-accent, currentColor)); }
  /* In a centered section a block-level card icon pins left while the eyebrow,
     heading, and body center around it (text-align can't move a block box). Center
     it to match — same fix family as the centered-paragraph measure exemption. */
  [class*="center"] .preview-card-icon { margin-inline: auto; }
  .preview-faq-icon { margin-right: 10px; opacity: .7; }

  /* ── Stat strip (cred / track-record sections) ─────────────────────── */
  .preview-stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; margin: 28px 0 36px; padding: 24px; border-radius: 12px; border: 1px solid; }
  /* Tablet: auto-fit minmax(160px) wraps a 4-cell strip 3+1, stranding the
     last stat alone bottom-left (design-sweep C12, flagged on 6+ sites at
     768px). Pair up instead — 2×2 reads deliberate at that width. */
  @media (max-width: 900px) and (min-width: 560px) {
    .preview-stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .preview-stat-cell { display: flex; flex-direction: column; gap: 6px; }
  .preview-stat-cell .preview-icon { width: 22px; height: 22px; opacity: .85; color: var(--client-accent-deep, var(--client-accent, currentColor)); }
  .preview-tone-dark .preview-stat-cell .preview-icon { color: var(--client-accent-bright, var(--client-accent, currentColor)); opacity: 1; }
  /* UNTONED sections of the dark THEMES show the theme surface itself (near-
     black), but every icon mirror above keys on preview-tone-dark — a class the
     tone rhythm doesn't always add there. accentDeep (the safe-on-LIGHT token)
     lands at ~1-3:1 on those surfaces. Bright the icons whenever a dark theme's
     section carries NO tone class; toned sections keep the tone rules (dark
     gets the same bright value, light keeps deep). Dark-theme cards are
     themselves dark per the theme stylesheet, so no light-card exception
     exists. NOTE: never write a slash-star sequence like "dot-t-star-slash"
     inside this comment — it terminates the CSS comment early and the parser
     silently DROPS the rule below (exactly how this rule shipped broken once). */
  section.t-premium-dark:not([class*="preview-tone-"]) .preview-icon,
  section.t-premium-dark:not([class*="preview-tone-"]) .preview-card-icon,
  section.t-event:not([class*="preview-tone-"]) .preview-icon,
  section.t-event:not([class*="preview-tone-"]) .preview-card-icon,
  section.t-luxury-gold:not([class*="preview-tone-"]) .preview-icon,
  section.t-luxury-gold:not([class*="preview-tone-"]) .preview-card-icon {
    color: var(--client-accent-bright, var(--client-accent, currentColor)); opacity: 1;
  }
  .preview-stat-n { font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
  .preview-stat-l { font-size: 12px; opacity: .7; letter-spacing: 0.04em; text-transform: uppercase; }

  /* ── "What we don't do" contrast row (approach sections) ───────────── */
  .preview-contrast-row { margin: 40px 0; padding: 28px; border-radius: 12px; border: 1px dashed; }
  .preview-contrast-h { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; opacity: .65; margin-bottom: 14px; font-weight: 700; }
  .preview-contrast-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
  .preview-contrast-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.5; }
  .preview-contrast-list .preview-icon { width: 18px; height: 18px; opacity: 1; margin-top: 2px; color: var(--client-accent-deep, currentColor); }
  .preview-tone-dark .preview-contrast-list .preview-icon { color: var(--client-accent-bright, var(--client-accent, currentColor)); }

  /* ── Governance row (cred sections) ────────────────────────────────── */
  .preview-governance-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 32px; padding: 32px 0 24px; border-top: 1px solid; border-color: inherit; }
  .preview-gov-item { display: flex; gap: 12px; align-items: flex-start; }
  .preview-gov-item .preview-icon { width: 24px; height: 24px; color: var(--client-accent-deep, var(--client-accent, currentColor)); flex-shrink: 0; }
  .preview-tone-dark .preview-gov-item .preview-icon { color: var(--client-accent-bright, var(--client-accent, currentColor)); }
  .preview-gov-h { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
  .preview-gov-s { font-size: 13px; opacity: .7; }

  /* ── Underwriting-criteria matrix (data-room / procedural brains) ───── */
  .preview-criteria-matrix { margin: 28px 0 36px; padding: 24px 26px; border-radius: 12px; border: 1px solid; border-color: inherit; }
  .preview-cm-h { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; opacity: .65; margin-bottom: 16px; font-weight: 700; }
  /* Fixed, EVEN column counts (not auto-fit) so the matrix's 6 rows always
     fill complete rows — auto-fit produced a ragged "4 across, 2 orphaned"
     last row on wide screens. 1 / 2 / 3 columns all divide 6 evenly. */
  .preview-cm-grid { display: grid; grid-template-columns: 1fr; gap: 14px 28px; }
  @media (min-width: 620px) { .preview-cm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1000px) { .preview-cm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .preview-cm-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid; border-color: inherit; }
  .preview-cm-row .preview-icon { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; color: var(--client-accent-deep, var(--client-accent, currentColor)); }
  .preview-tone-dark .preview-cm-row .preview-icon { color: var(--client-accent-bright, var(--client-accent, currentColor)); }
  .preview-cm-k { font-weight: 700; font-size: 13px; letter-spacing: 0.02em; }
  .preview-cm-v { font-size: 13px; opacity: .72; line-height: 1.45; margin-top: 1px; }
  /* §5b enhancement-component style VARIANTS — same honest content, different
     form. Each keeps the component's root + sub-classes so Visual Invariants
     (PANEL_SEL richness, dark-tone, grid balance) + browser-QA contrast sampling
     recognize it unchanged; new sub-elements use contrast-guaranteed accent
     tokens (dark surfaces → accentBright) and stack to one column on mobile. */
  /* criteria matrix: checklist_rows / numbered_steps (grid is the base form) */
  .preview-cm--checklist .preview-cm-list { display: flex; flex-direction: column; }
  .preview-cm--checklist .preview-cm-k, .preview-cm--checklist .preview-cm-v { display: inline; }
  .preview-cm--steps .preview-cm-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
  .preview-cm--steps .preview-cm-row { align-items: center; }
  /* Checklist/steps variants defaulted to a single vertical column at ALL widths,
     so a short pillar set (cred/approach) read as a mobile list with big side
     gutters on desktop. Mirror the base .preview-cm-grid breakpoints (later source
     order + equal specificity → wins ≥620px) so they go multi-column like the grid. */
  @media (min-width: 620px) {
    .preview-cm--checklist .preview-cm-list,
    .preview-cm--steps .preview-cm-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
  }
  @media (min-width: 1000px) {
    .preview-cm--checklist .preview-cm-list,
    .preview-cm--steps .preview-cm-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .preview-cm-num { font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace); font-weight: 700; font-size: 18px; line-height: 1; flex-shrink: 0; min-width: 30px; color: var(--client-accent-deep, var(--client-accent, currentColor)); }
  .preview-tone-dark .preview-cm-num, .peak-on-dark .preview-cm-num { color: var(--client-accent-bright, var(--client-accent, currentColor)); }
  /* governance row: document_rows / quiet_footnote (icon_pills is the base form).
     2-class selectors beat the .peak-grid-balance balanceGrids applies. */
  .preview-governance-row.preview-gov--docrows { display: block !important; padding-top: 24px; }
  .preview-gov--docrows .preview-gov-item { padding: 14px 0; border-top: 1px solid; border-color: inherit; align-items: center; }
  .preview-governance-row.preview-gov--footnote { justify-content: flex-start !important; gap: 8px 20px !important; padding-top: 18px; }
  .preview-governance-row.preview-gov--footnote .preview-gov-item { flex: 0 1 auto; align-items: center; gap: 8px; }
  .preview-gov--footnote .preview-gov-h, .preview-gov--footnote .preview-gov-s { display: inline; }
  .preview-gov--footnote .preview-gov-s { font-size: 12px; opacity: .62; }
  .preview-gov--footnote .preview-gov-item .preview-icon { width: 16px; height: 16px; }
  /* approach contrast: do_dont_split / process_rail (dont_list is the base form) */
  .preview-cr--split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
  .preview-cr--split .preview-cr-col { min-width: 0; }
  .preview-cr--split .preview-contrast-h { margin-bottom: 12px; }
  .preview-cr--rail .preview-contrast-list li { align-items: center; }
  .preview-cr-num { font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace); font-weight: 700; font-size: 16px; line-height: 1; flex-shrink: 0; min-width: 28px; color: var(--client-accent-deep, var(--client-accent, currentColor)); }
  .preview-tone-dark .preview-cr-num, .peak-on-dark .preview-cr-num { color: var(--client-accent-bright, var(--client-accent, currentColor)); }
  .preview-cm-list, .preview-cm-steps, .preview-cr-col, .preview-cr-rail-list { text-align: left !important; }
  @media (max-width: 640px) { .preview-cr--split { grid-template-columns: 1fr; gap: 18px; } }

  /* ── Value props (cta sections) ────────────────────────────────────── */
  /* padding-bottom: keeps the row's text from sitting flush against the
     section's bottom edge. Some CTA variants (e.g. cta-bold-modern-15)
     have inline padding:0 on the section, so without this the last line
     of the value-prop description touches the next section directly. The
     internal padding gives the row breathing room regardless of how the
     host variant set its own padding. */
  .preview-value-props { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 32px; padding: 24px 0 40px; text-align: left !important; }
  .preview-vp-item { display: flex; gap: 12px; align-items: flex-start; text-align: left !important; }
  .preview-vp-item > div { text-align: left !important; }
  .preview-vp-item .preview-icon { width: 22px; height: 22px; color: var(--client-accent-deep, var(--client-accent, currentColor)); flex-shrink: 0; margin-top: 2px; }
  .preview-tone-dark .preview-vp-item .preview-icon { color: var(--client-accent-bright, var(--client-accent, currentColor)); }
  .preview-vp-item strong { display: block; font-weight: 700; font-size: 14px; margin-bottom: 2px; text-align: left !important; }
  .preview-vp-item span { font-size: 13px; opacity: .75; line-height: 1.5; display: block; text-align: left !important; }
  /* §5 enhancement-variant layouts (same content, structurally different form) */
  .preview-value-props--stack { grid-template-columns: 1fr !important; gap: 14px; max-width: 560px; }
  .preview-value-props--inline { display: flex !important; flex-wrap: wrap; gap: 14px 28px; }
  .preview-value-props--inline .preview-vp-item { flex: 1 1 200px; }
  /* A decorative centerpiece grid (a one-line statement flanked by hr rails)
     whose framing rails were dropped when a full-width module was rehomed out of
     its narrow center column: flatten the now single-cell grid to a block so the
     statement spans full width instead of hugging the first 1/N track. */
  .peak-centerpiece-flat { display: block !important; }
  /* Box-padding floor (systematic): content must never hug a card's border. The
     minimal theme strips .card to a chrome-less container (transparent, 0
     padding), but the per-client card rule (.t-<theme> .card) re-asserts a
     background — so a plain minimal card (markets card, contact info card, any
     card that isn't flush-media) becomes a visible box with its content flush on
     every edge. Restore the base card padding for those cards; card-image-top
     keeps its 0 padding on purpose (edge-to-edge image + its own padded body).
     3-class specificity (:not counts its arg) beats the theme's minimal .card
     padding:0 rule. Home + contact both inline this, so it covers both. */
  .t-minimal .card:not(.card-image-top) { padding: var(--space-lg); }
  /* Box-padding floor, table form: templates ship flush-media cards (inline
     padding:0) hosting a bare <table> (the institutional claim-verification
     table) — the card then relies on CELL padding for breathing room, but only
     the data theme styles table cells; every other theme fell back to the UA's
     1-2px, putting text 3-4px off the card border (browser-qa
     box_content_hugs_border on the live Quietwater build). Give card-hosted
     tables a readable baseline; :where() keeps specificity at (0,0,2) so the
     data theme's own richer table rules (0,1,2) still win. */
  :where(.card) table { width: 100%; border-collapse: collapse; }
  :where(.card) table :where(th, td) { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--color-border, rgba(0,0,0,0.08)); }
  :where(.card) table tr:last-child :where(th, td) { border-bottom: none; }
  /* When an enhancement block is appended to a section that has NO .container
     (some full-bleed CTA/contact variants), it would otherwise sit flush to the
     viewport edge with zero horizontal padding (the "value-props hug the left"
     bug). Give any enhancement that is a DIRECT child of a <section> the same
     centered max-width + horizontal padding a .container would have provided. */
  section > .preview-value-props, section > .preview-criteria-matrix,
  section > .preview-governance-row, section > .preview-contrast-row,
  section > .preview-contact-grid, section > .preview-contact-info,
  section > .preview-contact-strip-wrap, section > .preview-stat-strip,
  section > .preview-deal-timeline, section > .preview-reporting-rows,
  section > .preview-section-figure, section > .peak-section-figure {
    box-sizing: border-box; max-width: 1180px; margin-left: auto; margin-right: auto;
    padding-left: clamp(20px, 5vw, 48px); padding-right: clamp(20px, 5vw, 48px);
  }
  /* ...but the rule above assumes the <section> spans the page. Wave 3 uses a
     <section class="peak-recipe-entry"> as a NARROW GRID CELL, and per CSS Grid
     §7.2.3.2 a definite max-width is what auto-fit resolves its repeat count
     against — so a 1180px gutter cap inside a ~300px column produced four fixed
     220px tracks, a 1020px row, and cells 3-4 laid out past html{overflow-x:clip}
     where no scroll can ever reach them. Let these blocks take their real track
     width; the gutter padding still applies. */
  .peak-recipe-entry > :is(.preview-value-props, .preview-criteria-matrix,
    .preview-governance-row, .preview-contrast-row, .preview-contact-grid,
    .preview-contact-info, .preview-contact-strip-wrap, .preview-stat-strip,
    .preview-deal-timeline, .preview-reporting-rows, .preview-section-figure,
    .peak-section-figure) {
    max-width: none;
  }
  /* Width-responsive (auto-fit keys off the strip's OWN width, not the
     viewport) so it never squishes to one-word-per-line or overflows. */
  .preview-contact-info--strip { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; }
  .preview-contact-strip-wrap { margin-bottom: 28px; }

  /* The same applies to other injected enhancement blocks that should always
     read left-aligned even when the host section is text-centered. */
  .preview-stat-strip, .preview-stat-cell, .preview-stat-l, .preview-stat-n,
  .preview-governance-row, .preview-gov-item, .preview-gov-h, .preview-gov-s,
  .preview-contrast-row, .preview-contrast-list, .preview-contrast-list li,
  .preview-deal-timeline, .preview-dt-step, .preview-dt-k, .preview-dt-s,
  .preview-reporting-rows, .preview-rr-item, .preview-rr-k, .preview-rr-s,
  .preview-contact-info, .preview-ci-row, .preview-ci-l, .preview-ci-v { text-align: left !important; }

  /* ── Pull-quote (about sections) ───────────────────────────────────── */
  .preview-pullquote { margin: 28px 0; padding: 22px 28px; border-left: 3px solid; border-color: var(--client-accent, currentColor); border-radius: 4px; background: rgba(0,0,0,0.02); position: relative; }
  .preview-pullquote .preview-icon { position: absolute; top: 18px; right: 22px; opacity: 1; color: var(--client-accent-deep, currentColor); }
  .preview-tone-dark .preview-pullquote .preview-icon { color: var(--client-accent-bright, var(--client-accent, currentColor)); }
  .preview-pullquote p { font-style: italic; font-size: 17px; line-height: 1.55; margin: 0 0 10px; }
  .preview-pullquote footer { font-size: 12px; opacity: .65; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }

  /* ── Deal timeline ("how a deal reaches you" — approach menu option) ── */
  .preview-deal-timeline { margin: 40px 0 32px; padding: 26px; border-radius: 12px; border: 1px solid; border-color: inherit; }
  .preview-dt-h { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; opacity: .65; margin-bottom: 16px; font-weight: 700; }
  .preview-dt-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; }
  /* rail: 2-up → 4-up fixed EVEN columns (4 steps always fill complete rows) */
  @media (min-width: 620px) { .preview-dt--rail .preview-dt-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1000px) { .preview-dt--rail .preview-dt-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  /* rows: vertical document-style rows with hairline separators */
  .preview-dt--rows .preview-dt-steps { gap: 0; }
  .preview-dt--rows .preview-dt-step { padding: 12px 0; border-top: 1px solid; border-color: inherit; }
  .preview-dt-step { display: flex; gap: 12px; align-items: flex-start; }
  .preview-dt-num { font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace); font-weight: 700; font-size: 16px; line-height: 1.4; flex-shrink: 0; min-width: 26px; color: var(--client-accent-deep, var(--client-accent, currentColor)); }
  .preview-tone-dark .preview-dt-num, .peak-on-dark .preview-dt-num { color: var(--client-accent-bright, var(--client-accent, currentColor)); }
  .preview-dt-step .preview-icon { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; color: var(--client-accent-deep, var(--client-accent, currentColor)); }
  .preview-tone-dark .preview-dt-step .preview-icon { color: var(--client-accent-bright, var(--client-accent, currentColor)); }
  .preview-dt-k { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
  .preview-dt-s { font-size: 13px; opacity: .72; line-height: 1.5; }

  /* ── Reporting rows ("what you'll receive" — cred menu option) ──────── */
  .preview-reporting-rows { margin: 28px 0 36px; padding: 24px 26px; border-radius: 12px; border: 1px solid; border-color: inherit; }
  .preview-rr-h { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; opacity: .65; margin-bottom: 16px; font-weight: 700; }
  .preview-rr-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
  /* cards: 2-up EVEN grid (4 rows fill complete rows) */
  @media (min-width: 680px) { .preview-rr--cards .preview-rr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; } }
  /* list: single-column rows with hairline separators */
  .preview-rr--list .preview-rr-grid { gap: 0; }
  .preview-rr--list .preview-rr-item { padding: 12px 0; border-top: 1px solid; border-color: inherit; }
  .preview-rr-item { display: flex; gap: 12px; align-items: flex-start; }
  .preview-rr-item .preview-icon { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; color: var(--client-accent-deep, var(--client-accent, currentColor)); }
  .preview-tone-dark .preview-rr-item .preview-icon { color: var(--client-accent-bright, var(--client-accent, currentColor)); }
  .preview-rr-k { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
  .preview-rr-s { font-size: 13px; opacity: .72; line-height: 1.5; }

  /* CTA quiet line (the low-volume value-props alternative) */
  .preview-value-props--quietline { display: flex !important; flex-direction: column; gap: 14px; max-width: 620px; padding: 20px 0 36px; }
  .preview-vp-lead { font-size: 16px; line-height: 1.55; opacity: .88; margin: 0 0 4px; font-style: italic; text-align: left !important; }

  /* FAQ intro line (the chip-free menu option) */
  .preview-faq-intro { font-size: 15px; line-height: 1.6; opacity: .75; margin: 14px 0 24px; max-width: 560px; }
  .text-center .preview-faq-intro, [class*="center"] .preview-faq-intro { margin-left: auto; margin-right: auto; }

  /* ── FAQ chips ─────────────────────────────────────────────────────── */
  .preview-faq-chips, .preview-resource-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 22px; }
  .preview-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.03em; border: 1px solid; opacity: .85; }
  /* The active filter chip is filled with the client accent. White text isn't
     always readable on the accent (gold, teal, etc. have mid-luminance), so
     the client-side override below picks dark/light per accent via
     --client-accent-text. PREVIEW_CSS defaults to white as a safe fallback. */
  .preview-chip-active { opacity: 1; background: var(--client-accent, currentColor); color: var(--client-accent-text, #ffffff); border-color: var(--client-accent, currentColor); }
  /* §5b resources / FAQ chip-row VARIANTS — same labels, different form. Each
     keeps the .preview-resource-chips / .preview-faq-chips root + .preview-chip
     sub-class so QA + tone-dark chip rules still apply; modifiers restyle the row.
     filter_cards / category_chips = the base pill style (no extra CSS). */
  .preview-resource-chips--reading, .preview-faq-chips--diligence { gap: 4px 18px; }
  .preview-resource-chips--reading .preview-chip, .preview-faq-chips--diligence .preview-chip { border: 0; border-radius: 0; padding: 4px 0; opacity: .74; letter-spacing: 0.04em; }
  .preview-resource-chips--index { gap: 0; border: 1px solid; border-color: inherit; border-radius: 10px; padding: 4px 6px; width: fit-content; max-width: 100%; }
  .preview-resource-chips--index .preview-chip { border: 0; border-radius: 0; padding: 7px 14px; opacity: .8; }
  .preview-faq-chips--cards { gap: 10px; }
  .preview-faq-chips--cards .preview-chip { border-radius: 9px; padding: 10px 14px; font-weight: 700; }
  /* §5b markets enhancement VARIANTS. principles = quiet (no box); coverage_strip
     = the client's OWN market names as a typographic strip (no market data). */
  .preview-markets-note--principles { border-width: 0 !important; padding: 0 !important; margin: 28px 0; }
  .preview-market-coverage { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 8px; }
  .preview-coverage-pin { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; }
  .preview-coverage-pin .preview-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--client-accent-deep, var(--client-accent, currentColor)); }
  .preview-tone-dark .preview-coverage-pin .preview-icon, .peak-on-dark .preview-coverage-pin .preview-icon { color: var(--client-accent-bright, var(--client-accent, currentColor)); }

  /* ── Contact info card + side-by-side layout ──────────────────────── */
  .preview-contact-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr); gap: 32px; align-items: start; margin-top: 8px; }
  @media (max-width: 800px) { .preview-contact-grid { grid-template-columns: 1fr; } }
  .preview-contact-form-col form { margin: 0; }
  .preview-contact-info { margin-top: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; padding: 24px; border-radius: 12px; border: 1px solid; }
  .preview-ci-row { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
  .preview-ci-row > div { min-width: 0; }
  /* accentDeep (darker variant) guarantees the icon stays visible against
     light surfaces — raw accent is mid-luminance for many client palettes. */
  .preview-ci-row .preview-icon { width: 20px; height: 20px; color: var(--client-accent-deep, var(--client-accent, currentColor)); margin-top: 2px; flex-shrink: 0; }
  /* On dark-tone sections, switch back to bright accent so the icons read. */
  .preview-tone-dark .preview-ci-row .preview-icon { color: var(--client-accent-bright, var(--client-accent, currentColor)); }
  .preview-ci-l { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: .65; font-weight: 700; margin-bottom: 4px; overflow-wrap: break-word; }
  .preview-ci-v { font-size: 14px; overflow-wrap: break-word; }
  .preview-ci-v a { color: inherit; text-decoration: underline; word-break: break-word; }

  /* ── Resource reading-time badges ──────────────────────────────────── */
  .preview-rt-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; opacity: .65; margin: 6px 0 10px; font-weight: 500; }

  /* ── Honest resource "materials on request" block (replaces fake article cards) ── */
  .preview-materials { margin-top: 28px; padding: 28px; border: 1px solid var(--client-border-light, rgba(0,0,0,.1)); border-radius: var(--peak-radius, 14px); background: var(--client-bg-card, #fff); max-width: 760px; }
  .preview-tone-dark .preview-materials { border-color: var(--client-border-dark, rgba(255,255,255,.14)); background: var(--client-card-dark, rgba(255,255,255,.04)); }
  .preview-materials-h { font-weight: 700; font-size: 15px; letter-spacing: .01em; margin-bottom: 16px; }
  .preview-materials-list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 12px; }
  .preview-materials-list li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.5; }
  .preview-materials-list li svg { flex: none; margin-top: 2px; color: var(--client-accent-deep, var(--client-accent, currentColor)); }
  .preview-tone-dark .preview-materials-list li svg { color: var(--client-accent-bright, var(--client-accent, currentColor)); }
  .preview-materials-cta { margin-top: 4px; }

  /* ── Testimonial star ratings ──────────────────────────────────────── */
  .preview-stars { color: var(--client-accent, #f5a623); font-size: 14px; letter-spacing: 2px; margin-bottom: 10px; }
  .preview-stars span { display: inline-block; }

  /* Borders/colors inherit the section's tone so light/dark tones look right */
  .preview-stat-strip, .preview-contrast-row, .preview-contact-info { border-color: rgba(0,0,0,0.08); }
  .preview-tone-dark .preview-stat-strip, .preview-tone-dark .preview-contrast-row, .preview-tone-dark .preview-contact-info { border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.02); }

  /* §5 — ONE consistent fluid spacing layer for every toned section, replacing
     the old per-enhancement :has() padding-bottom patches (whose specificity
     fought the type-based .section rules). padding-block is driven by the
     client's spacingDensity via --peak-section-pad. !important beats the inline
     padding:0 that some full-bleed CTA/hero variants set, and guarantees an
     appended enhancement (value-props / governance / contrast row) never sits
     flush against the next section. Hero/header stay untoned → keep their own. */
  section.preview-tone-soft, section.preview-tone-white,
  section.preview-tone-cream, section.preview-tone-dark {
    /* --peak-density-scale lets the designer-brain density bucket (sparse /
       standard / dense) breathe the whole page in or out WITHOUT discarding the
       client's seeded spacingDensity — they multiply. Default 1 = no change. */
    padding-block: calc(var(--peak-section-pad, clamp(56px, 7vw, 116px)) * var(--peak-density-scale, 1)) !important;
  }
  .preview-tone-dark .preview-pullquote { background: rgba(255,255,255,0.03); }
  .preview-tone-dark .preview-chip { border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.85); }
  .preview-tone-dark .peak-form-reassurance, .peak-on-dark .peak-form-reassurance {
    color: rgba(255,255,255,0.76) !important;
  }
  .preview-governance-row { border-color: rgba(0,0,0,0.08); }
  .preview-tone-dark .preview-governance-row { border-color: rgba(255,255,255,0.12); }

  /* ── §4 Signature moment — one bold element, quiet surroundings ─────── */
  .preview-sig-section { padding-block: clamp(56px, 7vw, 104px); position: relative; overflow: hidden; }
  .preview-sig-eyebrow { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
    color: var(--client-accent-deep, currentColor); margin-bottom: 14px; }
  .preview-sig-title { font-size: clamp(28px, 3.6vw, 52px); line-height: 1.05; letter-spacing: -0.02em; max-width: 16ch; margin: 0 0 14px; }
  .preview-sig-lede { font-size: clamp(15px, 1.4vw, 19px); max-width: 56ch; opacity: .82; margin: 0 0 32px; }
  /* market-map */
  .preview-sig-pins { display: flex; flex-wrap: wrap; gap: 14px; }
  .preview-sig-pin { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px;
    border: 1px solid var(--client-accent-deep, rgba(0,0,0,0.18)); font-size: clamp(15px, 1.6vw, 22px); font-weight: 600;
    font-family: var(--font-display); background: rgba(0,0,0,0.015); }
  .preview-sig-pin .preview-icon { width: 20px; height: 20px; color: var(--client-accent-deep, currentColor); }
  /* process-steps */
  .preview-sig-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; }
  .preview-sig-step { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 14px;
    border: 1px solid var(--client-border, rgba(0,0,0,0.08)); background: rgba(255,255,255,0.55); position: relative; }
  .preview-sig-stepnum { font-family: var(--font-display); font-size: 34px; font-weight: 800; line-height: 1;
    color: var(--client-accent-deep, currentColor); opacity: .9; letter-spacing: -0.02em; }
  .preview-sig-stepicon { width: 22px; height: 22px; color: var(--client-accent-deep, currentColor); }
  .preview-sig-step strong { font-size: 16px; }
  .preview-sig-step p { font-size: 14px; line-height: 1.55; opacity: .78; margin: 0; }
  /* firm-timeline */
  .preview-sig-tl { list-style: none; padding: 0; margin: 0; }
  .preview-timeline-item { position: relative; padding: 0 0 28px 34px; border-left: 2px solid var(--client-accent-deep, rgba(0,0,0,0.15)); }
  .preview-timeline-item:last-child { padding-bottom: 0; }
  .preview-sig-tl-dot { position: absolute; left: -8px; top: 4px; width: 14px; height: 14px; border-radius: 50%;
    background: var(--client-accent, currentColor); box-shadow: 0 0 0 4px rgba(255,255,255,0.8); }
  .preview-sig-tl-label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
    color: var(--client-accent-deep, currentColor); margin-bottom: 6px; }
  .preview-sig-tl-body p { font-size: clamp(15px, 1.5vw, 19px); line-height: 1.6; margin: 0; max-width: 60ch; }
  /* stat-figure */
  .preview-sig-figure { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin: 8px 0 6px; }
  .preview-sig-bignum { font-family: var(--font-display); font-weight: 800; line-height: 0.9; letter-spacing: -0.04em;
    font-size: clamp(72px, 16vw, 220px); color: var(--client-accent-deep, currentColor); }
  .preview-sig-bigunit { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 3vw, 44px); letter-spacing: -0.01em; opacity: .85; }
  /* coverage-strip — the real markets as one large typographic footprint */
  .preview-sig-coverage { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
    font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 5.4vw, 68px);
    line-height: 1.04; letter-spacing: -0.025em; margin: 6px 0 18px; }
  .preview-sig-cov-sep { color: var(--client-accent-deep, currentColor); opacity: .45; font-weight: 400; }
  /* principles — a short discipline manifesto */
  .preview-sig-principles { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 24px; }
  .preview-sig-principle { display: flex; gap: 20px; align-items: flex-start; max-width: 780px; }
  .preview-sig-pnum { font-family: var(--font-display); font-weight: 800; line-height: 1; letter-spacing: -0.03em;
    font-size: clamp(26px, 3.6vw, 42px); color: var(--client-accent-deep, currentColor); opacity: .85; min-width: 1.7em; }
  .preview-sig-principle strong { display: block; font-size: clamp(17px, 1.8vw, 22px); margin-bottom: 5px; }
  .preview-sig-principle p { font-size: 15px; line-height: 1.6; opacity: .8; margin: 0; max-width: 58ch; }
  /* editorial-quote — oversized pull-quote in the firm's own words */
  .preview-sig-quote-mark { font-family: var(--font-display); font-weight: 800; line-height: .6;
    font-size: clamp(90px, 15vw, 190px); color: var(--client-accent-deep, currentColor); opacity: .2;
    height: .42em; overflow: visible; margin-bottom: 6px; }
  .preview-sig-quote { font-family: var(--font-display); font-weight: 500; border: 0; padding: 0;
    font-size: clamp(24px, 3.6vw, 48px); line-height: 1.24; letter-spacing: -0.015em; margin: 0 0 20px; max-width: 16em; }
  .preview-sig-quote-by { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; opacity: .65; }
  /* mission-statement — the firm's tagline at editorial scale */
  .preview-sig-statement { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em;
    font-size: clamp(28px, 4.6vw, 60px); line-height: 1.14; max-width: 17ch; margin: 6px 0 0; }
  /* monogram — a brand-identity moment */
  .preview-sig-monogram { margin-bottom: 20px; }
  .preview-sig-mono-mark { display: inline-flex; align-items: center; justify-content: center;
    width: clamp(92px, 13vw, 148px); height: clamp(92px, 13vw, 148px); border-radius: 50%;
    border: 2px solid var(--client-accent-deep, currentColor); color: var(--client-accent-deep, currentColor);
    font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: clamp(38px, 5.6vw, 64px); }
  .preview-sig-mono-name { margin: 0 0 8px; }
  @media (max-width: 760px) { .preview-sig-steps { grid-template-columns: 1fr; } .preview-sig-principle { gap: 14px; } }

  /* ── §6 Considered footer "connect" band (footer is always a dark anchor) ── */
  .preview-footer-connect { display: flex; flex-wrap: wrap; gap: 22px 44px; align-items: flex-end;
    justify-content: space-between; padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,0.12); }
  .preview-footer-social { display: flex; flex-wrap: wrap; gap: 10px; }
  .preview-footer-social a { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.20); font-size: 13px; opacity: .85; transition: opacity .2s var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)), border-color .2s var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)); }
  .preview-footer-social a:hover { opacity: 1; border-color: var(--client-accent-bright, currentColor); }
  .preview-footer-signup { display: flex; flex-direction: column; gap: 8px; min-width: 260px; max-width: 380px; flex: 1 1 260px; }
  .preview-footer-signup .preview-ci-l { margin-bottom: 0; }
  /* flex-wrap + all-children-shrinkable so a signup row never overlaps its
     button or squishes (the button wraps to its own line before colliding). */
  .preview-footer-signup-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
  .preview-footer-signup-row > * { min-width: 0; }
  .preview-footer-signup-row input { flex: 1 1 auto; }
  .preview-footer-signup-row .btn { flex: 0 0 auto; }

  /* <3-market grid refit (--mk-count set inline by pruneMarketSlots) — the
     survivors fill their own track count instead of leaving a blank trailing
     cell in a fixed 3-/4-up grid. */
  .peak-grid-fit { grid-template-columns: repeat(var(--mk-count, 3), minmax(0, 1fr)) !important; }
  @media (max-width: 760px) { .peak-grid-fit { grid-template-columns: 1fr !important; } }

  /* Alternate image/text side on consecutive 2-col splits: reverse the two
     columns visually with direction:rtl, reset children to ltr so their text
     reads normally. Inert when the grid collapses to one column on mobile. */
  .peak-split-flip { direction: rtl; }
  .peak-split-flip > * { direction: ltr; }

  /* CTA button left where a redundant / back-to-back form was neutralized. */
  .preview-cta-fallback { margin-top: 18px; }

  /* ── §5 Section dividers (seeded by dividerStyleId; on the <body>) ─────── */
  /* Applied to toned sections only so they connect with intent instead of just
     stacking. Hero/header (untoned) and the footer keep clean edges. Safe by
     construction — radius/shadow/margin/clip that never hides section content
     (toned sections carry generous --peak-section-pad). "flat" = clean stack. */
  .peak-div-overlap section.preview-tone-soft, .peak-div-overlap section.preview-tone-white,
  .peak-div-overlap section.preview-tone-cream, .peak-div-overlap section.preview-tone-dark {
    border-radius: 20px 20px 0 0; margin-top: -32px; position: relative; z-index: 1;
    box-shadow: 0 -20px 48px rgba(var(--peak-shadow-rgb, 15, 23, 42), 0.08);
  }
  .peak-div-curve section.preview-tone-soft, .peak-div-curve section.preview-tone-white,
  .peak-div-curve section.preview-tone-cream, .peak-div-curve section.preview-tone-dark {
    border-top-left-radius: clamp(22px, 3.5vw, 56px); border-top-right-radius: clamp(22px, 3.5vw, 56px);
    margin-top: -10px; position: relative; z-index: 1;
  }
  /* If rounded toned sections stack back-to-back, the next section's rounded top
     can reveal the page/previous-surface color in the corner. That reads like a
     rendering defect, not polish. Keep the first rounded sheet after chrome, but
     square consecutive toned seams so the surface transition is clean. */
  .peak-div-overlap section:is(.preview-tone-soft, .preview-tone-white, .preview-tone-cream, .preview-tone-dark)
    + section:is(.preview-tone-soft, .preview-tone-white, .preview-tone-cream, .preview-tone-dark),
  .peak-div-curve section:is(.preview-tone-soft, .preview-tone-white, .preview-tone-cream, .preview-tone-dark)
    + section:is(.preview-tone-soft, .preview-tone-white, .preview-tone-cream, .preview-tone-dark) {
    border-top-left-radius: 0; border-top-right-radius: 0;
  }
  /* angle: a diagonal top edge drawn by a ::after WEDGE in the section's own
     surface color, sitting just above the section — so it never clips the
     section box, its box-shadow, or the negative-offset floating stat/cred
     cards that are designed to overhang (the clip-path approach clipped all of
     those). Dark tones (overflow:hidden + ::before glow) are left clean. */
  .peak-div-angle section.preview-tone-soft, .peak-div-angle section.preview-tone-white,
  .peak-div-angle section.preview-tone-cream { position: relative; }
  .peak-div-angle section.preview-tone-soft::after, .peak-div-angle section.preview-tone-white::after,
  .peak-div-angle section.preview-tone-cream::after {
    content: ""; position: absolute; left: 0; right: 0; top: -1.4vw; height: 1.4vw;
    pointer-events: none; z-index: 0; clip-path: polygon(0 100%, 100% 0, 100% 100%);
  }
  .peak-div-angle section.preview-tone-soft::after { background: var(--tone-soft, #f7f6f2); }
  .peak-div-angle section.preview-tone-white::after { background: var(--tone-white, #ffffff); }
  .peak-div-angle section.preview-tone-cream::after { background: var(--tone-cream, #ede5d6); }
  /* The footer should stay a clean rectangular anchor regardless of divider. */
  .peak-div-overlap #site-footer, .peak-div-curve #site-footer {
    border-radius: 0; margin-top: 0; box-shadow: none;
  }

  /* ══════════════════════════════════════════════════════════════════════
     DESIGNER BRAIN — behavior layers (design-brains.js)

     The same theme reads as a different creative team's work because these
     body-class layers restructure the hero, breathe the page in or out, and
     change the CTA posture. They are purely additive (no layout-breaking
     overrides) and deterministic (the class is frozen on the plan). Every rule
     is scoped to a body class so it can only ever touch the build that asked
     for it. See design-brains.js for the philosophy behind each.
     ══════════════════════════════════════════════════════════════════════ */

  /* ── Hero families — the biggest perceived-sameness lever ──────────────
     We modulate the generative backdrop's presence and the hero's typographic
     register; the picked hero VARIANT already differs by family (tier). */
  /* Cinematic: let the atmosphere carry — biggest headline, fullest backdrop. */
  .hero-family-cinematic_hero section#hero h1, .hero-family-cinematic_hero section#hero .hero-title { letter-spacing: var(--peak-display-track, -0.022em); }
  .hero-family-cinematic_hero section#hero::before { opacity: 1; }
  /* Memo: text-led and slower. Quiet the backdrop, narrow + left-set the copy,
     ease the headline weight so it reads like a letter, not a billboard. */
  .hero-family-memo_hero section#hero::before { opacity: .4; }
  /* Narrow the memo copy to a letter width ONLY when it's text-led (no side image).
     A memo SPLIT (text + side photo) must NOT be clamped to 760px — split into two
     columns that's ~330px of prose each (the live Trailhead skinny hero intro); the
     :not(.peak-hero-split) keeps this id-specific clamp from beating the split's
     own max-width:none. */
  .hero-family-memo_hero section#hero .container:not(.peak-hero-split), .hero-family-memo_hero section#hero .container-narrow:not(.peak-hero-split) { max-width: 760px; }
  .hero-family-memo_hero section#hero h1, .hero-family-memo_hero section#hero .hero-title { font-weight: 600; line-height: 1.12; }
  .hero-family-memo_hero section#hero p { font-size: var(--step-1, 1.2rem); }
  /* Minimal precision: maximum restraint — barely-there backdrop, tight track. */
  .hero-family-minimal_precision_hero section#hero::before { opacity: .3; }
  .hero-family-minimal_precision_hero section#hero h1, .hero-family-minimal_precision_hero section#hero .hero-title { letter-spacing: -0.03em; }
  /* Founder letter: personal + warm. Soften backdrop, left-set the opening. */
  .hero-family-founder_letter_hero section#hero::before { opacity: .5; }
  .hero-family-founder_letter_hero section#hero h1, .hero-family-founder_letter_hero section#hero .hero-title { font-weight: 600; }
  /* Dashboard + map: structured/analytical — keep the backdrop subordinate to
     content so the hero reads like a tool, not a poster. */
  .hero-family-dashboard_hero section#hero::before, .hero-family-map_hero section#hero::before { opacity: .55; }

  /* ── Rebuilt hero STRUCTURES (applyHeroFamily) — the real divergence ────
     Five of the six families replace the hero's inner content with a distinct
     layout. These rules are theme-agnostic (they inherit the theme's palette +
     fonts via vars / .t-<theme>); they own layout + rhythm only. .peak-hero is
     the shared wrapper; .peak-hero-<family> specializes. */
  .peak-hero { position: relative; z-index: 1; padding-block: clamp(64px, 9vw, 132px); }
  /* Hero excellence floor: the background may bleed full width, but the message
     must behave like designed display type under hostile names/taglines. Balance
     lines where supported, allow real-word breaks only as a last resort, and keep
     one readable measure per family instead of letting split columns go skinny. */
  .peak-hero .peak-hero-title { margin: 0 0 var(--peak-space, 8px); text-wrap: balance; overflow-wrap: break-word; max-width: 15ch; }
  section#hero.peak-hero-long-title .peak-hero .peak-hero-title,
  section#hero.peak-hero-long-title .peak-hero-title,
  section#hero.peak-hero-long-title h1 { max-width: 17ch; }
  .peak-hero-title-tail { white-space: nowrap; }
  .peak-hero-cta-row, .peak-memo-cta-row, .peak-min-cta-row { margin-top: clamp(20px, 3vw, 36px); }
  .peak-hero .eyebrow, .peak-hero-eyebrow { display: inline-block; margin-bottom: 16px; }

  /* memo — an investor letter: masthead, tight measure, lead paragraph, sign-off. */
  .peak-hero-memo { max-width: 720px; text-align: left; }
  .peak-memo-masthead { margin-bottom: 24px; max-width: 54ch; }
  .peak-memo-folio { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px;
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; opacity: .58; }
  .peak-memo-dateline { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; opacity: .78; font-weight: 650; }
  .peak-memo-rule { width: min(100%, 360px); height: 1px; margin-top: 16px;
    background: linear-gradient(90deg, currentColor, color-mix(in srgb, currentColor 20%, transparent)); opacity: .28; }
  .peak-hero-memo .peak-hero-title { font-size: clamp(2rem, 4.4vw, 3.3rem); font-weight: 600; line-height: 1.14; letter-spacing: -0.018em; }
  .peak-memo-body { margin-top: 24px; }
  .peak-memo-body p { font-size: var(--step-1, 1.2rem); line-height: 1.72; max-width: 58ch; opacity: .92; }
  .peak-memo-sign { display: grid; gap: 3px; width: fit-content; margin-top: 28px; padding-top: 16px;
    border-top: 1px solid var(--client-border, rgba(127,127,127,0.18)); font-family: var(--font-display); opacity: .88; }
  .peak-memo-sign span { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: .58; }
  .peak-memo-sign strong { font-size: 1.08rem; font-weight: 650; letter-spacing: -0.01em; }
  .peak-memo-sign em { font-family: var(--font-sans); font-size: .88rem; font-style: normal; opacity: .68; }

  /* minimal precision — oversized type, huge whitespace, almost nothing else. */
  .peak-hero-minimal { max-width: 1000px; text-align: left; padding-block: clamp(88px, 13vw, 184px); }
  .peak-min-eyebrow { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; opacity: .55; font-weight: 600; margin-bottom: 28px; }
  /* A 16ch measure forced common four-word titles into three one-word rows
     ("Value-Add / Multifamily / Investing") at every viewport. The minimal
     family has the horizontal room for a composed two-line lockup; 22ch keeps
     that restraint without manufacturing a dangling final-word orphan. */
  .peak-hero-minimal .peak-min-title { font-size: clamp(2.6rem, 6vw, 4.8rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; max-width: 22ch; }
  .peak-min-sub { margin-top: 28px; font-size: var(--step-1, 1.15rem); line-height: 1.6; max-width: 48ch; opacity: .8; }

  /* dashboard — headline beside a mandate/criteria panel; reads like a tool. */
  .peak-hero-dashboard { display: grid; grid-template-columns: 1.25fr 0.85fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
  .peak-dash-main .peak-hero-title { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.08; max-width: 13.5ch; }
  .peak-dash-sub { margin-top: 18px; font-size: var(--step-0, 1.05rem); line-height: 1.65; max-width: 52ch; opacity: .85; }
  .peak-dash-panel { border: 1px solid var(--client-border, rgba(127,127,127,0.22)); border-radius: 16px; padding: 22px 24px; background: rgba(127,127,127,0.04); backdrop-filter: blur(2px); }
  .preview-tone-dark .peak-dash-panel, .t-premium-dark .peak-dash-panel, .t-luxury-gold .peak-dash-panel { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.14); }
  .peak-dash-panel-h { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; margin-bottom: 16px; }
  /* Mute the LABEL, not the container: a container opacity multiplies onto the
     icon (child opacity cannot undo it), which dimmed the accent glyph to
     ~2.9:1 on every dashboard hero. The label is span-wrapped, so the muted
     look stays identical while the icon keeps full-strength accent. */
  .peak-dash-panel-h > span { opacity: .7; }
  .peak-dash-panel-h .preview-icon { width: 16px; height: 16px; color: var(--client-accent-deep, var(--client-accent, currentColor)); }
  .peak-dash-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--client-border, rgba(127,127,127,0.16)); font-size: 14px; }
  .peak-dash-row:first-child { border-top: 0; }
  .peak-dash-l { opacity: .62; }
  .peak-dash-v { font-weight: 600; text-align: right; }
  .peak-dash-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
  .peak-dash-chip { font-size: 12px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--client-accent, currentColor); color: var(--client-accent-deep, var(--client-accent, currentColor)); font-weight: 600; }
  .preview-tone-dark .peak-dash-chip, .t-premium-dark .peak-dash-chip, .t-luxury-gold .peak-dash-chip { color: var(--client-accent-bright, var(--client-accent, currentColor)); border-color: rgba(255,255,255,0.25); }
  /* map — market geography IS the hero visual; the markets read as the artwork. */
  .peak-hero-map { display: grid; grid-template-columns: 1fr 0.9fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
  .peak-map-lead .peak-hero-title { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.08; max-width: 13.5ch; }
  .peak-map-sub { margin-top: 18px; font-size: var(--step-0, 1.05rem); line-height: 1.65; max-width: 50ch; opacity: .85; }
  .peak-map-coverage { border-left: 2px solid var(--client-accent, currentColor); padding-left: clamp(20px, 2.5vw, 32px); }
  .peak-map-h { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; opacity: .65; margin-bottom: 18px; }
  .peak-map-h .preview-icon { width: 16px; height: 16px; color: var(--client-accent-deep, var(--client-accent, currentColor)); }
  .peak-map-markets { display: flex; flex-direction: column; gap: 10px; }
  .peak-map-pin { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 2rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
  .peak-map-pin .preview-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--client-accent-deep, var(--client-accent, currentColor)); opacity: .85; }
  .peak-map-single-region { display: grid; grid-template-columns: 112px 1fr; gap: 20px; align-items: center;
    padding: clamp(18px, 2.4vw, 26px); border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.08); backdrop-filter: blur(2px); }
  .peak-map-region-mark { position: relative; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--client-accent, currentColor) 34%, transparent) 0 9%, transparent 10% 100%); }
  .peak-map-region-mark span { position: absolute; inset: 16%; border: 1px solid currentColor; border-radius: 50%; opacity: .22; }
  .peak-map-region-mark span:nth-child(2) { inset: 30%; opacity: .34; }
  .peak-map-region-mark span:nth-child(3) { inset: 44%; opacity: .55; background: currentColor; }
  .peak-map-region-copy span { display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; opacity: .62; margin-bottom: 8px; }
  .peak-map-region-copy strong { display: block; font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.02; letter-spacing: -0.02em; }
  .peak-map-region-copy p { margin: 10px 0 0; font-size: .95rem; line-height: 1.45; opacity: .78; }
  .peak-hero-over-image .peak-map-single-region { color: #fff; }

  /* founder letter — personal: "From {founder}", lead paragraph, signature, and
     a visual anchor that is EITHER a real client photo OR a designed letterhead
     seal (monogram + signature) — never a stock face. */
  .peak-hero-founder { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
  .peak-founder-from { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; opacity: .6; font-weight: 700; margin-bottom: 18px; }
  .peak-hero-founder .peak-hero-title { font-size: clamp(2rem, 4.4vw, 3.3rem); font-weight: 600; line-height: 1.12; max-width: 13.5ch; }
  .peak-founder-lead { margin-top: 20px; font-size: var(--step-1, 1.18rem); line-height: 1.72; max-width: 56ch; opacity: .9; }
  .peak-founder-sign { margin-top: 24px; font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; opacity: .9; }
  .peak-founder-portrait { border-radius: 16px; overflow: hidden; aspect-ratio: 3/4; }
  .peak-founder-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* Founder seal — a designed letterhead panel; the founder hero's honest visual
     anchor when there's no real photo. Substantial enough to read as designed. */
  .peak-founder-seal { border: 1px solid var(--client-border, rgba(127,127,127,0.22)); border-radius: 18px;
    padding: clamp(28px, 3.5vw, 44px); text-align: center; background: rgba(127,127,127,0.03); }
  .preview-tone-dark .peak-founder-seal, .t-premium-dark .peak-founder-seal, .t-luxury-gold .peak-founder-seal { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.14); }
  .peak-seal-mark { width: 92px; height: 92px; margin: 0 auto 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-family: var(--font-display);
    font-size: 2.1rem; font-weight: 700; letter-spacing: 0.02em; color: #fff;
    background: var(--client-accent-deep, var(--client-accent, currentColor)); }
  .peak-seal-firm { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; }
  .peak-seal-meta { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; opacity: .6; margin-top: 6px; }
  .peak-seal-rule { width: 44px; height: 2px; margin: 18px auto; background: var(--client-accent, currentColor); opacity: .6; }
  .peak-seal-sig { font-family: var(--font-display); font-style: italic; font-size: 1.2rem; opacity: .85; }

  /* ── Person-slot fallbacks (no stock faces, no blank placeholders) ──────
     repairPersonPlaceholders fills an unfillable person slot with a FINISHED
     non-human mark. The host .image-slot keeps its frame/aspect; these reset its
     empty-placeholder look (no dashed box, no bracket text) and center the mark. */
  .image-slot.peak-person-mono, .image-slot.peak-person-fallback {
    display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: inherit; }
  .image-slot.peak-person-mono::before, .image-slot.peak-person-fallback::before { content: none !important; }
  /* tiny avatar → firm monogram chip (fills the circle frame it sits in) */
  .peak-person-mono { background: var(--client-accent-deep, var(--client-accent, currentColor)) !important; }
  .peak-person-mono-mark { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.01em;
    color: #fff; font-size: 0.95em; line-height: 1; text-transform: uppercase; }
  /* Header avatars can be as small as 42px. A three-letter firm monogram at
     0.95em overflowed the circle on phones; size the mark to the component,
     keep it on one line, and clip only as a final defensive guard. */
  .site-header .peak-person-mono-mark, .site-header-wrapper .peak-person-mono-mark {
    display: block; width: 100%; max-width: none; overflow: visible; white-space: nowrap;
    font-size: 10px !important; line-height: 1 !important; letter-spacing: 0 !important; text-align: center;
  }
  .site-header .peak-person-mono, .site-header-wrapper .peak-person-mono { padding: 0 !important; flex: 0 0 42px !important; width: 42px !important; min-width: 42px !important; }
  .peak-person-fallback { width: 100%; height: 100%; }
  .peak-person-fallback > .peak-founder-seal, .peak-person-fallback > .peak-brand-panel { width: 100%; }
  /* A finished identity panel should size to its content, not inherit a vacant
     portrait aspect ratio. The old 4:5 slot produced 500–800px of blank field
     around a small seal on tablet/mobile. */
  .image-slot.peak-person-fallback { aspect-ratio: auto !important; height: auto !important; min-height: 0 !important; }
  .peak-person-fallback > .peak-founder-seal, .peak-person-fallback > .peak-brand-panel {
    min-height: clamp(260px, 32vw, 400px);
  }
  /* abstract brand panel — monogram + tagline on a brand-tinted field */
  .peak-brand-panel { display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 16px; width: 100%; min-height: 100%; padding: clamp(28px, 4vw, 52px); text-align: center; border-radius: 16px;
    background: linear-gradient(150deg, var(--client-accent-soft, rgba(127,127,127,0.10)), rgba(127,127,127,0.04)); }
  .peak-brand-panel-mark { display: inline-flex; align-items: center; justify-content: center;
    width: clamp(72px, 9vw, 104px); height: clamp(72px, 9vw, 104px); border-radius: 50%;
    background: var(--client-accent-deep, var(--client-accent, currentColor)); color: #fff;
    font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: 0.02em; }
  /* 22ch is a measure cap, not a width: when the panel is a narrow image-slot
     fallback (~105px) the tagline kept its 22ch box and spilled out of the
     slot's overflow:hidden, where the clipped half can never be read. Cap by the
     container as well, and let a long firm word break rather than overhang. */
  .peak-brand-panel-tag { font-family: var(--font-display); font-size: clamp(1rem, 1.6vw, 1.3rem);
    font-weight: 600; line-height: 1.3; max-width: min(22ch, 100%); overflow-wrap: anywhere; opacity: .9; }

  /* ── Hero imagery — every family now carries a photo ──────────────────
     Mode A (full-bleed backdrop + brand scrim + light type): minimal / map /
     cinematic-fallback. Mode B (framed side image in a split): memo / dashboard
     / founder. The photo is the variant's own wired image when it had one, else
     a deterministic library pick. Photos inherit the shared image grade. */
  .peak-hero-bgimg-host { position: relative; overflow: hidden; isolation: isolate;
    min-height: clamp(440px, 62vh, 660px); display: flex; flex-direction: column; justify-content: center; }
  .peak-hero-bgimg-host::before { opacity: 0 !important; } /* photo replaces the generative backdrop */
  /* !important + child specificity so a theme's img/.image-slot max-width or a
     positioning rule can't shrink the full-bleed backdrop. */
  .peak-hero-bgimg-host > .peak-hero-bg { position: absolute !important; inset: 0 !important;
    z-index: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
  .peak-hero-bgimg-host > .peak-hero-bg img { width: 100% !important; height: 100% !important;
    max-width: none !important; min-height: 0 !important; object-fit: cover !important; object-position: 50% 50% !important; display: block !important; border-radius: 0 !important; }
  .peak-hero-bg::after { content: ''; position: absolute; inset: 0;
    background:
      linear-gradient(90deg, rgba(8,10,14,0.70) 0%, rgba(8,10,14,0.48) 48%, rgba(8,10,14,0.34) 100%),
      linear-gradient(180deg, rgba(10,12,16,0.50) 0%, rgba(10,12,16,0.68) 55%, rgba(10,12,16,0.84) 100%); }
  .peak-hero-bgimg-host > .peak-hero, .peak-hero-bgimg-host > .container { position: relative; z-index: 1; width: 100%; }
  /* Type set over a photo — force light + legible regardless of theme. */
  .peak-hero-over-image, .peak-hero-over-image .peak-hero-title, .peak-hero-over-image h1,
  .peak-hero-over-image p, .peak-hero-over-image .peak-min-eyebrow, .peak-hero-over-image .peak-hero-eyebrow,
  .peak-hero-over-image .peak-map-h, .peak-hero-over-image .peak-map-pin { color: #fff !important; }
  .peak-hero-over-image .peak-hero-title, .peak-hero-over-image h1 { text-shadow: 0 2px 28px rgba(0,0,0,0.45); }
  .peak-hero-over-image .peak-min-sub, .peak-hero-over-image .peak-map-sub { opacity: .94; }
  .peak-hero-over-image .peak-map-coverage { border-left-color: rgba(255,255,255,0.55); }
  .peak-hero-over-image .peak-map-pin .preview-icon, .peak-hero-over-image .peak-map-h .preview-icon { color: #fff; opacity: .95; }

  /* Split heroes — text + a framed photo side by side. */
  .peak-hero-split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
  .peak-memo-figure, .peak-dash-figure { border-radius: 16px; overflow: hidden;
    box-shadow: 0 24px 60px -30px rgba(var(--peak-shadow-rgb, 17,24,39), 0.5); }
  .peak-memo-figure { aspect-ratio: 4/5; }
  .peak-memo-figure img, .peak-dash-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .peak-hero-memo.peak-hero-split { max-width: none; } /* a split overrides the narrow letter measure */
  .peak-hero-memo.peak-hero-split .peak-memo-body p { max-width: 52ch; }
  .peak-dash-visual { display: flex; flex-direction: column; gap: 18px; }
  .peak-dash-figure { aspect-ratio: 16/10; }

  /* Injected imagery for image-poor content sections (about always; others per
     the brain's imageStrategy) — a framed editorial band so no section is a
     wall of text. */
  .peak-section-figure { margin: clamp(28px, 4vw, 44px) 0 2px; border-radius: 16px; overflow: hidden;
    box-shadow: 0 26px 64px -34px rgba(var(--peak-shadow-rgb, 17,24,39), 0.42); }
  .peak-section-figure img { width: 100%; height: clamp(240px, 33vw, 420px); object-fit: cover; display: block; }
  /* ── Injected-image TREATMENTS (injectSectionImage) — placement variety so a
     batch of sites doesn't repeat the same big rounded bottom image. full / band /
     mosaic are full-width (appended, never orphaned). inline / portrait are SIDE
     treatments rendered ONLY inside a balanced 2-col peak-fig-pair (content +
     image), so a narrow image never sits alone with empty space beside it. */
  .peak-fig--full img { height: clamp(260px, 34vw, 440px); }
  /* band — a short panoramic supporting strip (clearly not the tall full band) */
  .peak-fig--band img { height: clamp(220px, 25vw, 340px); }
  /* mosaic — two library images two-up (no single dominant bottom band) */
  .peak-fig--mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    border-radius: 0; overflow: visible; box-shadow: none; }
  .peak-fig--mosaic img { width: 100%; height: clamp(200px, 24vw, 320px); object-fit: cover;
    display: block; border-radius: 16px; box-shadow: 0 22px 56px -34px rgba(var(--peak-shadow-rgb, 17,24,39), 0.42); }
  /* peak-fig-pair — a BALANCED side-image layout: the section's content fills one
     column, the image the other. The image never sits alone (orphan side image). */
  /* The content column uses a minmax FLOOR (≥450px) so the prose never collapses
     into a skinny vertical strip beside the image; the image column is the flexible
     one, floored at 250px (a decorative side image reads fine that narrow, and it
     only bottoms out in a tight container — e.g. the luxury-gold container-narrow's
     72px gutters — where the extra 30px belongs to the prose so a long about
     paragraph doesn't wrap to a 318px strip; the fr ratios still govern wide
     layouts). Total min DROPS 720→700, so this is safer against overflow, not
     riskier. Long-prose readability is protected by the track minimum. */
  /* Stretch the figure to the prose column: fixed-height side photos left a large
     blank tail beside long narrative copy. Aspect-locked stacks stay centered. */
  .peak-fig-pair { display: grid; grid-template-columns: minmax(450px, 1.08fr) minmax(250px, 0.82fr); gap: clamp(28px, 4vw, 56px);
    align-items: stretch; margin: clamp(28px, 4vw, 44px) 0 2px; }
  /* Browser-side safety net for late editor/client changes made after the DOM
     invariant pass: a pair whose figure was removed must immediately become a
     normal full-width content block, never a narrow orphaned grid track. */
  .peak-fig-pair:not(:has(> .peak-section-figure)) { display: block; margin-block: 0; }
  .peak-fig-pair--left { grid-template-columns: minmax(250px, 0.82fr) minmax(450px, 1.08fr); }
  .peak-fig-pair--left .peak-fig-pair-content { order: 2; }
  .peak-fig-pair--left .peak-section-figure { order: 1; }
  .peak-fig-pair > .peak-section-figure { margin: 0; min-width: 0; height: 100%; display: flex; }
  .peak-fig-pair-content { min-width: 0; }
  .peak-fig-pair-content > :first-child { margin-top: 0; }
  /* A decorative ring frame inside a PAIRED content column can't afford its full
     horizontal inset — beside the image the column is already tight, and the frame
     was squeezing a long about paragraph into a skinny strip. The frame carries an
     INLINE padding of 50px, so the trim needs !important to win (a longhand beats
     the inline shorthand only on the horizontal axis — the vertical 50px + the
     double-ring ::before stay, so it still reads as a frame). Combined with the
     450px content floor the prose lands at a readable measure. */
  .peak-fig-pair-content .ring-frame-double { padding-left: 12px !important; padding-right: 12px !important; }
  /* FLATTEN any inner multi-column layout inside the paired content column to a single
     column — so a section whose content was itself a 2-col (e.g. an About "text |
     belief card" grid-2) doesn't become a 3-column squeeze with the prose in a 267px
     strip (the live Stonebridge bug). The prose then spans the full content column;
     the inner block (belief list / panel) stacks beneath it. Covers class-based grids
     AND inline-style grids/flex (a template could lay out columns via inline style with
     no grid class — the class-substring selector alone would miss it). */
  .peak-fig-pair-content [class*="grid"], .peak-fig-pair-content [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .peak-fig-pair-content [style*="display:flex"], .peak-fig-pair-content [style*="display: flex"] { flex-direction: column !important; }
  .peak-fig-pair .peak-fig--inline img { height: 100%; min-height: clamp(240px, 28vw, 380px); object-fit: cover; }
  .peak-fig-pair .peak-fig--portrait img { height: 100%; min-height: clamp(320px, 38vw, 500px); object-fit: cover; }
  .peak-fig-pair .image-stack { align-self: center; height: auto; }
  /* Stack the pair BEFORE the prose column would hit its minmax floor and overflow
     a tablet container — long prose stacks above the image instead of going skinny. */
  @media (max-width: 900px) {
    .peak-fig-pair, .peak-fig-pair--left { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 32px); }
    .peak-fig-pair--left .peak-fig-pair-content, .peak-fig-pair--left .peak-section-figure { order: initial; }
  }
  @media (max-width: 760px) { .peak-fig--mosaic { grid-template-columns: 1fr; } }

  .peak-footer-nav { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: center; margin-top: 18px; font-size: 13px; }

  /* ── Visual Invariants: composition repairs ───────────────────────────
     Lonely single-column sections (no image/panel sibling) center instead of
     hugging the left of a wide section. Applied only to non-editorial brains. */
  .peak-center-lonely .container, .peak-center-lonely .container-narrow, .peak-center-lonely .container-wide {
    max-width: 860px; margin-inline: auto; text-align: center; }
  .peak-center-lonely .preview-value-props, .peak-center-lonely .preview-contact-grid { text-align: left; }
  /* Ragged grid final rows (6-in-4, 5-in-3, a lone leftover) center under the
     row above instead of left-hugging — a centered flex-wrap does it cleanly
     while full rows look identical to the grid. */
  .peak-grid-balance { display: flex !important; flex-wrap: wrap; justify-content: center; gap: var(--peak-gb-gap) !important; --peak-gb-gap: clamp(16px, 2vw, 28px); --peak-gb-n: 3; }
  /* N is the grid's resolved desktop column count, carried by a peak-gb-nN class
     (balanceGrids). Every item is EXACTLY 1/N of a full row, so N fill a row
     completely and a centered final-row orphan is the same width as the items
     above — its edges align with the track (the old flex:1 1 260px + max-width:
     400px let the orphan grow wider and drift ~33px). */
  .peak-gb-n2 { --peak-gb-n: 2; } .peak-gb-n3 { --peak-gb-n: 3; } .peak-gb-n4 { --peak-gb-n: 4; }
  .peak-gb-n5 { --peak-gb-n: 5; } .peak-gb-n6 { --peak-gb-n: 6; }
  .peak-grid-balance.peak-gb-count-7 { --peak-gb-n: 4 !important; }
  .peak-grid-balance > * { min-width: 0; flex-grow: 0; flex-shrink: 0;
    /* -1px per item absorbs sub-pixel basis rounding so N always fit a row (an
       exact 1/N basis can round up and wrap N to N-1, dropping a grid-3 to two
       columns in a narrow container); the ≤2px slack is centered by the row. */
    flex-basis: calc((100% - (var(--peak-gb-n) - 1) * var(--peak-gb-gap)) / var(--peak-gb-n) - 1px); }
  /* Reduce columns on smaller viewports (a class-set N, unlike an inline var,
     can be overridden here): two-up on tablet, stacked on phone. Items stay
     equal-width at every breakpoint. */
  @media (max-width: 900px) {
    .peak-grid-balance { --peak-gb-n: 2 !important; }
    .peak-grid-balance.peak-gb-count-5 { --peak-gb-n: 3 !important; }
    /* Nine cards are a complete 3×3 at tablet width; collapsing them to two
       columns creates a lone ninth card that reads like an accidental footer. */
    .peak-grid-balance.peak-gb-count-9 { --peak-gb-n: 3 !important; }
    .peak-grid-balance.peak-gb-count-7 { --peak-gb-n: 1 !important; }
  }
  @media (max-width: 600px) { .peak-grid-balance, .peak-grid-balance.peak-gb-count-5, .peak-grid-balance.peak-gb-count-7, .peak-grid-balance.peak-gb-count-9 { --peak-gb-n: 1 !important; } }
  /* Split balancing (balanceSplitImages): a short image beside a tall text column
     no longer floats vertically-centered (the live Verem "How we evaluate" 3.4×
     mismatch). Columns stretch to equal height; a single framed image fills its
     column via object-fit:cover; a multi-image stack top-aligns at natural height
     so it never overflows. Mobile (1-col) is unaffected. */
  .peak-split-balance { align-items: stretch !important; }
  .peak-split-balance > * { min-width: 0; }
  .peak-split-balance > *:not(:has(.image-stack)) .image-slot,
  .peak-split-balance > figure.peak-section-figure,
  .peak-split-balance figure.peak-section-figure:only-child { height: 100%; aspect-ratio: auto !important; min-height: clamp(300px, 30vw, 440px); }
  .peak-split-balance > *:not(:has(.image-stack)) .image-slot > :is(img, picture) > .preview-image,
  .peak-split-balance > *:not(:has(.image-stack)) .image-slot > img,
  .peak-split-balance figure.peak-section-figure > :is(img, picture) > .preview-image,
  .peak-split-balance figure.peak-section-figure > img { height: 100%; width: 100%; object-fit: cover; }
  .peak-split-balance .image-stack { align-self: start; }
  @media (max-width: 760px) { .peak-split-balance { align-items: stretch; } .peak-split-balance .image-slot { min-height: 0; } }
  /* Inline image-pair grids (peak-imgpair, tagged by repairInlineImagePairs):
     the template's inline "grid-template-columns: 1fr 1fr" survives the outer
     split stacking at phone width, and a filled slot's only child is an
     absolutely-positioned img (zero intrinsic width) — the auto track minimums
     then resolve one full-width column + one 0px column (the live Trailhead
     onsite-detail-2 rendered 0×300). Stack the pair at ≤760px; !important is
     required to beat the inline declaration, and a span-2 lead image must drop
     its span (an explicit span in a 1-track grid creates an implicit 0-width
     column). Desktop is untouched. */
  @media (max-width: 760px) {
    .peak-imgpair { grid-template-columns: minmax(0, 1fr) !important; }
    .peak-imgpair > .image-slot { grid-column: auto !important; }
  }
  /* Centered (peak-center-lonely) sections: a numbered/principle "system" must
     read as a coherent unit centered UNDER the heading, not left-drift beside it
     (the live Verem "Principles" / Stonebridge "How we work" axis mismatch). The
     BLOCK centers (margin-inline:auto + a measure cap); the content inside each
     item stays left-aligned so steps/principles stay readable. */
  .peak-center-lonely .preview-sig-principles,
  .peak-center-lonely .preview-sig-tl { max-width: 820px; margin-inline: auto; }
  .peak-center-lonely .preview-sig-principle,
  .peak-center-lonely .preview-sig-step,
  .peak-center-lonely .preview-timeline-item { text-align: left; }
  .peak-center-lonely .preview-sig-tl { display: block; }
  /* A heading/eyebrow/lede with a hard max-width (e.g. .preview-sig-title's 16ch)
     centers its TEXT but, with margin:0, its BOX still hugs the left — so the
     headline sits left-of-center above a centered grid (the live Stonebridge
     "How we work" headline drift). margin-inline:auto centers the box too; it's
     a no-op on a full-width block, so this is safe to apply broadly. */
  .peak-center-lonely h1, .peak-center-lonely h2, .peak-center-lonely h3,
  .peak-center-lonely .eyebrow, .peak-center-lonely .preview-sig-title,
  .peak-center-lonely .preview-sig-eyebrow, .peak-center-lonely .preview-sig-lede,
  .peak-center-lonely .preview-sig-statement, .peak-center-lonely .preview-sig-quote,
  .peak-center-lonely > .container > p, .peak-center-lonely .container > p { margin-inline: auto; }

  /* Seeded hero skeleton sub-variant (heroSkelVariant): the "b" form flips a split
     hero's image side (rtl column swap — the same proven technique as
     alternateSplitSides; children reset to ltr; inert on the 1-col mobile collapse)
     and centers a text-led hero's oversized lead. The "a" form is the default
     layout (no rule). Breaks the identical-hero-skeleton tell for sibling sites. */
  .peak-hero-skel-b .peak-hero-split, .peak-hero-skel-b .peak-hero-dashboard, .peak-hero-skel-b .peak-hero-map { direction: rtl; }
  .peak-hero-skel-b .peak-hero-split > *, .peak-hero-skel-b .peak-hero-dashboard > *, .peak-hero-skel-b .peak-hero-map > * { direction: ltr; }
  .peak-hero-skel-b .peak-hero-minimal { text-align: center; margin-inline: auto; }
  .peak-hero-skel-b .peak-hero-minimal .peak-min-cta-row { justify-content: center; }
  /* "c" form: balanced split columns (vs the default lead-weighted ratio) and a
     tighter measure for the oversized text-led lead — a real proportional layout
     difference, safe (grid ratio / max-width only; mobile still collapses to 1col). */
  .peak-hero-skel-c .peak-hero-split, .peak-hero-skel-c .peak-hero-dashboard, .peak-hero-skel-c .peak-hero-map { grid-template-columns: 1fr 1fr; align-items: start; }
  /* Keep the copy itself restrained (.peak-min-sub remains 48ch), but do not
     make the display-title container so narrow that its responsive gutters
     leave only ~616px for a 77px headline on wide screens. */
  .peak-hero-skel-c .peak-hero-minimal { max-width: 900px; }
  /* d/e/f expand the hero grammar without new facts: d makes the visual/panel feel
     like a lower evidence rail, e overlaps the visual edge, f tightens the hero
     into a short cinematic band. All collapse back cleanly on mobile. */
  /* skel-d anchors the VISUAL low (an "evidence rail"), but the TEXT track must
     stay centered so a text column shorter than the visual is never bottom-hung
     (the dashboard/map/memo/founder hero bug). Centering the text is a no-op when
     it is the taller track, so the rail is preserved in every case. */
  .peak-hero-skel-d .peak-hero-split, .peak-hero-skel-d .peak-hero-dashboard, .peak-hero-skel-d .peak-hero-map { align-items: end; }
  .peak-hero-skel-d .peak-dash-main, .peak-hero-skel-d .peak-map-lead, .peak-hero-skel-d .peak-memo-text, .peak-hero-skel-d .peak-founder-text { align-self: center; }
  .peak-hero-skel-e .peak-hero-split, .peak-hero-skel-e .peak-hero-dashboard, .peak-hero-skel-e .peak-hero-map { gap: clamp(18px, 2.2vw, 32px); align-items: center; }
  .peak-hero-skel-e .peak-dash-panel, .peak-hero-skel-e .peak-map-coverage, .peak-hero-skel-e .peak-memo-figure, .peak-hero-skel-e .peak-dash-figure {
    position: relative; transform: translateY(clamp(10px, 1.6vw, 22px)); box-shadow: 0 30px 70px -42px rgba(var(--peak-shadow-rgb, 17,24,39), 0.62);
  }
  .peak-hero-skel-e .peak-dash-panel::before, .peak-hero-skel-e .peak-map-coverage::before,
  .peak-hero-skel-e .peak-memo-figure::before, .peak-hero-skel-e .peak-dash-figure::before {
    content: ''; position: absolute; left: clamp(12px, 2vw, 24px); right: clamp(12px, 2vw, 24px); top: -11px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--client-accent, currentColor), transparent); opacity: .46; pointer-events: none;
  }
  .peak-hero-skel-f .peak-hero-split, .peak-hero-skel-f .peak-hero-dashboard, .peak-hero-skel-f .peak-hero-map { grid-template-columns: minmax(420px, 1.25fr) minmax(260px, .75fr); }
  /* skel-f wants a short cinematic figure — so it overrides the FIGURE's shape
     (aspect-ratio + height cap), NEVER the img's. Putting 16/9 + max-height on
     the <img> while the figure kept its 4/5 aspect left the card ~200px taller
     than the media it held (a memo-figure rendered 443×554 with a 443×360 photo
     and a 194px empty slab). One source of truth: aspect lives on the figure,
     the img always fills it (width/height:100%; object-fit:cover, base rule). */
  .peak-hero-skel-f .peak-memo-figure, .peak-hero-skel-f .peak-dash-figure { aspect-ratio: 16 / 9; max-height: 360px; }
  .peak-hero-skel-f.peak-hero-bgimg-host { min-height: clamp(420px, 62vh, 620px); }
  /* The cinematic TEXT-FIRST hero (a text hero handed a full-bleed backdrop by
     ensureHeroBackdrop → bgimg-host) shipped with no padding-block: with the
     tighter pace min-heights its content filled the band edge-to-edge and the
     H1 sat ~15-20px under the sticky header (the cramped bold-modern-growth /
     luxury-gold-cinematic band). Give exactly this form breathing room — the
     padding floor guarantees header clearance and grows the band when content
     is tall, while min-height stays with the seeded skel/pace axes so sibling
     variation survives. Framed-split (mode B) heroes, page heroes, and every
     other family are out of scope by the family+id selector. !important +
     higher specificity beats the flush-hero "padding-top: 0 !important" rule —
     correct for text-on-surface heroes, but on a full-bleed photo band the
     padding is PART of the band (the backdrop paints it), so flushing it put
     the H1 ~15-20px under the sticky header. */
  .hero-family-cinematic_hero section#hero.peak-hero-bgimg-host { padding-block: clamp(48px, 7vh, 84px) !important; }
  /* Seeded hero PACE (resolveHeroPaceClass) — a SECOND axis orthogonal to skel a–f:
     vertical rhythm/proportion. Matters most for over-image (minimal/map/cinematic)
     heroes, where the skel axis only sets a min-height, so two same-family/same-skel
     siblings would otherwise render identically. 'a' is the baseline (no rule); 'b'
     breathes taller, 'c' tightens. Desktop-only (≥861px) so the mobile min-height
     clamp is untouched; grid row-gap is inert once the hero collapses to 1 column. */
  @media (min-width: 861px) {
    .peak-hero-pace-b.peak-hero-bgimg-host, .peak-hero-pace-b .peak-hero-bgimg-host { min-height: clamp(500px, 74vh, 720px); }
    .peak-hero-pace-c.peak-hero-bgimg-host, .peak-hero-pace-c .peak-hero-bgimg-host { min-height: clamp(360px, 52vh, 520px); }
    .peak-hero-pace-b .peak-hero-split, .peak-hero-pace-b .peak-hero-dashboard, .peak-hero-pace-b .peak-hero-map { row-gap: clamp(24px, 3vw, 44px); }
    .peak-hero-pace-c .peak-hero-split, .peak-hero-pace-c .peak-hero-dashboard, .peak-hero-pace-c .peak-hero-map { row-gap: clamp(10px, 1.4vw, 20px); }
  }

  /* Hero rebuilds collapse to one column on narrow viewports. Stack the SPLIT heroes
     (text + side image/panel) at ≤860px — before the tablet (768) split would squeeze
     the intro prose into a ~345px column (the memo-hero split stays 2-col otherwise);
     the text then reaches full width on tablet, matching the fig-pair's ≤900 stack. */
  @media (max-width: 860px) {
    .peak-hero-dashboard, .peak-hero-map, .peak-hero-founder, .peak-hero-split { grid-template-columns: 1fr !important; }
    .peak-hero-skel-e .peak-dash-panel, .peak-hero-skel-e .peak-map-coverage, .peak-hero-skel-e .peak-memo-figure, .peak-hero-skel-e .peak-dash-figure {
      transform: none;
    }
    .peak-hero-skel-e .peak-dash-panel::before, .peak-hero-skel-e .peak-map-coverage::before,
    .peak-hero-skel-e .peak-memo-figure::before, .peak-hero-skel-e .peak-dash-figure::before { content: none; }
  }
  @media (max-width: 760px) {
    .peak-hero-dashboard, .peak-hero-map, .peak-hero-founder, .peak-hero-split { grid-template-columns: 1fr !important; }
    .peak-map-coverage { border-left: 0; padding-left: 0; border-top: 2px solid var(--client-accent, currentColor); padding-top: 22px; }
    .peak-memo-folio { display: grid; gap: 4px; }
    .peak-memo-text { display: flex; flex-direction: column; }
    .peak-memo-masthead { margin-bottom: 16px; }
    .peak-memo-body { margin-top: 16px; }
    .peak-memo-cta-row { order: 4; }
    .peak-memo-sign { order: 5; margin-top: 16px; padding-top: 12px; }
    .peak-map-single-region { grid-template-columns: 72px 1fr; gap: 14px; }
    .peak-hero { padding-block: clamp(44px, 8vh, 76px); }
    .peak-hero .peak-hero-title { max-width: 100%; }
    .peak-hero-memo .peak-hero-title, .peak-dash-main .peak-hero-title, .peak-map-lead .peak-hero-title,
    .peak-hero-founder .peak-hero-title, .peak-hero-minimal .peak-min-title {
      font-size: clamp(2rem, 10.5vw, 3.2rem); line-height: 1.07;
    }
    /* At phone width the minimal family's previous 2rem floor still made
       "Multifamily Investing" wider than the copy measure. A restrained
       31–42px band preserves display hierarchy while allowing the meaningful
       two-word tail to share a line. */
    .peak-hero-minimal .peak-min-title {
      font-size: clamp(1.95rem, 5.5vw, 2.6rem); line-height: 1.06; max-width: 22ch;
    }
    /* The memo family shares the same narrow phone measure. Its old 10.5vw
       scale stranded the final word of common four-word mandates even when the
       desktop lockup was composed. Keep it display-sized while allowing a
       meaningful two-word tail to fit the line. */
    .peak-hero-memo .peak-hero-title {
      font-size: clamp(2rem, 9vw, 2.65rem); line-height: 1.08;
    }
    .peak-dash-sub, .peak-map-sub, .peak-founder-lead, .peak-min-sub, .peak-memo-body p { font-size: 1rem; line-height: 1.55; max-width: 34ch; }
    .peak-memo-figure, .peak-dash-figure { max-height: 240px; }
    .peak-founder-seal { padding: 24px; }
    .peak-seal-mark { width: 74px; height: 74px; font-size: 1.65rem; }
    .peak-hero-bgimg-host { min-height: clamp(390px, 72vh, 560px); }
    section#hero.peak-hero-long-title .peak-hero { padding-block: clamp(34px, 6vh, 56px); }
    section#hero.peak-hero-long-title .peak-hero .peak-hero-title,
    section#hero.peak-hero-long-title .peak-hero-memo .peak-hero-title,
    section#hero.peak-hero-long-title .peak-dash-main .peak-hero-title,
    section#hero.peak-hero-long-title .peak-map-lead .peak-hero-title,
    section#hero.peak-hero-long-title .peak-hero-founder .peak-hero-title,
    section#hero.peak-hero-long-title .peak-hero-minimal .peak-min-title,
    section#hero.peak-hero-long-title h1,
    section#hero.peak-hero-long-title .hero-title {
      font-size: clamp(1.72rem, 8.2vw, 2.55rem) !important; line-height: 1.04 !important; max-width: 100% !important;
    }
    section#hero.peak-hero-long-title .peak-memo-dateline,
    section#hero.peak-hero-long-title .peak-founder-from,
    section#hero.peak-hero-long-title .peak-min-eyebrow,
    section#hero.peak-hero-long-title .peak-hero-eyebrow,
    section#hero.peak-hero-long-title .eyebrow { margin-bottom: 10px; }
    section#hero.peak-hero-long-title .peak-dash-sub,
    section#hero.peak-hero-long-title .peak-map-sub,
    section#hero.peak-hero-long-title .peak-founder-lead,
    section#hero.peak-hero-long-title .peak-min-sub,
    section#hero.peak-hero-long-title .peak-memo-body p,
    section#hero.peak-hero-long-title .hero-sub,
    section#hero.peak-hero-long-title .hero-subhead,
    section#hero.peak-hero-long-title .hero-lead,
    section#hero.peak-hero-long-title .lead {
      /* Compact the hero lead for a long title, but never CLAMP it: a
         -webkit-line-clamp here cut the client's own positioning sentence
         mid-word and shipped a literal ellipsis. Shrinking type + tightening
         leading buys the same vertical budget without destroying copy. */
      margin-top: 14px; font-size: .96rem !important; line-height: 1.48 !important;
    }
    section#hero.peak-hero-long-title .peak-hero-cta-row,
    section#hero.peak-hero-long-title .peak-memo-cta-row,
    section#hero.peak-hero-long-title .peak-min-cta-row { margin-top: 16px; }
    section#hero.peak-hero-short-pair h1,
    section#hero.peak-hero-short-pair .hero-title,
    section#hero.peak-hero-short-pair .peak-hero-title {
      font-size: clamp(1.8rem, 8.2vw, 2.3rem) !important; max-width: 100% !important;
    }
  }

  /* ── Density — breathe the whole page in (sparse) or tighten it (dense) ─
     --peak-density-scale multiplies the seeded section padding (see §5 above).
     Sparse goes further than spacing: it strips decorative noise (glows, heavy
     card shadows) so the page reads quiet and editorial; dense tightens
     everything and lets card chrome read as structure. Opinionated on purpose. */
  .designer-density-sparse { --peak-density-scale: 1.14; }
  .designer-density-sparse .grid, .designer-density-sparse [class*="grid-"] { gap: clamp(28px, 3.6vw, 56px); }
  /* Quiet the decorative atmosphere on sparse brands — less visual noise. */
  .designer-density-sparse .glow, .designer-density-sparse [class*="glow"],
  .designer-density-sparse .float-orb, .designer-density-sparse [class*="orb"] { opacity: 0.12 !important; }
  .designer-density-sparse .card { box-shadow: none; }
  .designer-density-sparse section.preview-tone-white + section.preview-tone-white { border-top: 1px solid var(--client-border, rgba(127,127,127,0.12)); }
  .designer-density-dense { --peak-density-scale: 0.8; }
  .designer-density-dense .grid, .designer-density-dense [class*="grid-"] { gap: clamp(12px, 1.4vw, 20px); }
  /* Dense brands let card borders read as a tool's gridlines. */
  .designer-density-dense .card { border: 1px solid var(--client-border, rgba(127,127,127,0.16)); }
  /* FAQ content is naturally compact because answers are collapsed. Letting a
     sparse brain multiply its outer band padding made the section look empty;
     keep a premium 56–70px edge without reserving a near-full viewport. */
  body.peak-wave3 #faq { --peak-density-scale: 0.5; }

  /* ── CTA posture — how loud the conversion ask reads ───────────────────
     The CTA band (#offering) is already a dark anchor; the brain decides its
     volume. Loud → bolder, larger button; quiet/private → restrained, lighter. */
  .designer-cta-loud #offering .btn, .designer-cta-loud #offering a[class*="btn"],
  .designer-cta-loud #offering button { font-weight: 700; letter-spacing: 0.01em; transform: none; }
  .designer-cta-loud #offering h2 { letter-spacing: var(--peak-display-track, -0.022em); }
  .designer-cta-quiet #offering, .designer-cta-private_conversation #offering { --peak-density-scale: 1.1; }
  .designer-cta-quiet #offering h2, .designer-cta-private_conversation #offering h2 { font-weight: 600; }
  .designer-cta-quiet #offering .preview-value-props, .designer-cta-private_conversation #offering .preview-value-props { opacity: .9; }
  /* relational — warm and conversational: pill button, softer band weight. */
  .designer-cta-relational #offering .btn, .designer-cta-relational #offering a[class*="btn"],
  .designer-cta-relational #offering button { border-radius: 999px; font-weight: 600; }
  .designer-cta-relational #offering h2 { font-weight: 650; }
  /* utility — plain and functional: squared button, no flourish, tighter band. */
  .designer-cta-utility #offering .btn, .designer-cta-utility #offering a[class*="btn"],
  .designer-cta-utility #offering button { border-radius: 4px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; font-size: 0.86em; }
  .designer-cta-utility #offering { --peak-density-scale: 0.92; }
  /* confident — assured premium: refined medium weight, generous band. */
  .designer-cta-confident #offering .btn, .designer-cta-confident #offering a[class*="btn"],
  .designer-cta-confident #offering button { border-radius: 8px; font-weight: 600; letter-spacing: 0.01em; }
  .designer-cta-confident #offering h2 { letter-spacing: var(--peak-display-track, -0.022em); }
  /* analytical — data-room access request: monospace-tinted, squared, precise. */
  .designer-cta-analytical #offering .btn, .designer-cta-analytical #offering a[class*="btn"],
  .designer-cta-analytical #offering button { border-radius: 4px; font-weight: 600; font-feature-settings: "tnum"; letter-spacing: 0.03em; }
  .designer-cta-analytical #offering .eyebrow, .designer-cta-analytical #offering .preview-stat-l { letter-spacing: 0.08em; }

  /* ── Whole-brain accents — a few signature looks, scoped per brain ─────
     Quiet/editorial brains suppress decorative atmosphere entirely; loud ones
     keep it. (Validator backstops the forbidden habits as warnings.) */
  .designer-brain-luxury-gold-private-office .glow, .designer-brain-luxury-gold-private-office [class*="glow"],
  .designer-brain-minimal-memo .glow, .designer-brain-minimal-memo [class*="glow"],
  .designer-brain-premium-dark-minimal .glow, .designer-brain-premium-dark-minimal [class*="glow"],
  .designer-brain-clean-white-editorial .glow, .designer-brain-clean-white-editorial [class*="glow"] { opacity: .35; }
  /* Editorial / memo brains lean their body copy toward the serif display face
     for a letter-like read (theme heading family already flows through). */
  .designer-brain-minimal-memo .preview-pullquote, .designer-brain-luxury-gold-private-office .preview-pullquote,
  .designer-brain-data-research-memo .preview-pullquote { font-family: var(--font-display); }

  /* Wave 3 type systems declare only weights backed by real font bytes. Shared
     display accents must obey the same contract as headings; otherwise a
     600/700 accent silently synthesizes a faux bold when the selected display
     face (for example Libre Caslon Display) ships only at 400. */
  body.peak-wave3 :is(
    .peak-ph-founder-accent strong, .peak-ph-map-accent strong,
    .preview-sig-pin, .preview-sig-stepnum, .preview-sig-bignum,
    .preview-sig-bigunit, .preview-sig-coverage, .preview-sig-pnum,
    .preview-sig-quote-mark, .preview-sig-quote, .preview-sig-statement,
    .preview-sig-mono-mark, .peak-memo-sign strong, .peak-map-pin,
    .peak-map-region-copy strong, .peak-founder-sign, .peak-seal-mark,
    .peak-seal-firm, .peak-seal-sig, .peak-person-mono-mark,
    .peak-brand-panel-mark, .peak-brand-panel-tag
  ),
  body.peak-wave3.designer-brain-minimal-memo .preview-pullquote,
  body.peak-wave3.designer-brain-luxury-gold-private-office .preview-pullquote,
  body.peak-wave3.designer-brain-data-research-memo .preview-pullquote,
  body.peak-wave3.designer-brain-minimal-memo .preview-pullquote footer,
  body.peak-wave3.designer-brain-luxury-gold-private-office .preview-pullquote footer,
  body.peak-wave3.designer-brain-data-research-memo .preview-pullquote footer {
    font-weight: var(--peak-display-weight, 700) !important;
  }

  /* Wave 3 art-direction surfaces own both sides of the contrast pair. Theme
     selectors otherwise leak white copy onto a light compiled tone (or dark
     copy onto a committed brand surface). The per-plan recipe defines --w3f
     after choosing the higher-contrast foreground for its frozen background.

     ONLY the tones recipeCss() actually repaints may claim --w3f, and
     laneSurfaceCss/darkSurfaceCss (recipes/styles.js) repaint exactly
     white/soft/cream. --w3f is the foreground frozen against --w3b, the LANE
     background — so listing .preview-tone-dark here painted lane ink onto a
     surface Wave 3 never repaints: theme.js still owns tone-dark's bgDark, and
     a light lane (--w3f: #0A0A0A) put near-black text on near-black. These
     selectors also outrank theme.js's own .preview-tone-dark pair on
     specificity, so the self-consistent bgDark/textLight fallback lost.
     Keep this tone list in sync with laneSurfaceCss.

     The same "only repaint what you own" limit applies INWARD. A subtree that
     locks its own opaque pair is not part of the lane: the SMS consent panel
     ships a fixed #f7f7f5 fill with #1f1f1f ink, and its <label>/<a> match the
     element list below — so on a dark lane they took --w3f white and vanished
     against the panel's own light fill at ~1.1:1. Skip the panel and everything
     inside it; it already guarantees its own contrast. */
  body.peak-wave3 section:is(.preview-tone-white, .preview-tone-soft, .preview-tone-cream) {
    color: var(--w3f) !important;
  }
  body.peak-wave3 section:is(.preview-tone-white, .preview-tone-soft, .preview-tone-cream)
    :is(h1, h2, h3, h4, h5, h6, p, li, label, blockquote, figcaption, dt, dd, a:not(.btn):not([class*="btn"])):not(.sms-compliance-block):not(.sms-compliance-block *):not(.peak-on-dark):not(.peak-on-dark *) {
    color: var(--w3f) !important;
  }
  body.peak-wave3 section:is(.preview-tone-white, .preview-tone-soft, .preview-tone-cream)
    :is(.card, .preview-sig-step, .preview-materials):not(.peak-on-dark):not(.peak-on-dark *) {
    color: var(--w3f) !important;
  }
  /* NOTE: accent-role ink on a repainted lane is corrected in recipes/styles.js,
     not here. It can only be done under the dark/drenched/monochromatic gate:
     --w3a is frozen against --w3b, so it rescues accents on a darkened lane but
     is too pale for small caps on a light one (measured: forcing it
     unconditionally moved SPAN.eyebrow from 32 to 94 sub-floor nodes). */
  body.peak-wave3 .site-header-wrapper:is(.t-premium-dark, .t-luxury-gold, .t-event, .peak-header-dark, .peak-on-dark) .menu-btn {
    color: #fff !important;
  }
  body.peak-wave3 .site-header-wrapper:not(.t-premium-dark):not(.t-luxury-gold):not(.t-event):not(.peak-header-dark):not(.peak-on-dark) .menu-btn {
    color: #0a0a0a !important;
  }


  .peak-page-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(64px, 8vw, 108px) 0 clamp(32px, 4vw, 48px) !important; }
  /* Page heroes are intentionally quieter than home, but they still need a
     designed first-paint object. A soft brand wash + bounded text measure keeps
     no-band variants from feeling like a utility banner while preserving each
     brain's chosen form. */
  .peak-page-hero::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--client-accent, #8a8a8a) 14%, transparent), transparent 34%); opacity: .7; }
  .peak-page-hero .container { position: relative; z-index: 2; }
  /* Pre-title devices are always BLOCK-level (never inline-*) so the one device
     a page hero carries can't share a line with anything — the eyebrow+accent
     jam is structurally impossible. display:block wins over the global inline-
     block .eyebrow rule (this rule ships later in the cascade). */
  .peak-page-hero-eyebrow { display: block; text-transform: uppercase; letter-spacing: 0.14em; font-size: 13px; margin: 0 0 10px; }
  /* --step-5 with a generous clamp: at --step-4 the page H1 rendered SMALLER
     than the section H2s below it on display-heavy themes — a hierarchy
     inversion the sweep flagged on 6+ sites (design-sweep C13). */
  .peak-page-hero-title { font-size: var(--step-5, clamp(2.5rem, 5.4vw, 4rem)); line-height: 1.06; letter-spacing: var(--peak-display-track, -0.015em); margin: 0; max-width: 14ch; text-wrap: balance; overflow-wrap: break-word; }
  .peak-page-hero-intro { max-width: min(var(--peak-measure, 62ch), 700px); margin: 14px 0 0; font-size: var(--step-0, 1.05rem); color: var(--color-text-muted); }
  .peak-page-hero-band { position: relative; margin-top: clamp(28px, 4vw, 44px); height: clamp(180px, 26vw, 320px); overflow: hidden; }
  .peak-page-hero-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .peak-page-hero-scrim { position: absolute; inset: 0; background: rgba(10, 14, 20, 0.28); background: linear-gradient(180deg, color-mix(in srgb, var(--client-primary, #101418) 34%, transparent), transparent 60%); pointer-events: none; }
  /* ── premium-feel T2-C — brain-keyed page-hero forms ─────────────────────
     The page-hero is no longer one recolored template. Four forms, chosen by
     hero family + theme in buildPageHero; all still lighter than the home hero. */
  /* Per-theme eyebrow cadence (rule for serif themes, tracked caps otherwise).
     Placed AFTER the base .peak-page-hero-eyebrow so the modifier wins. */
  .peak-ph-eyebrow-caps { display: block; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 600; font-size: 12px; }
  .peak-ph-eyebrow-rule { text-transform: none; letter-spacing: 0.02em; font-size: 14px; display: flex; width: fit-content; align-items: center; gap: 12px; }
  .peak-ph-eyebrow-rule::before { content: ''; width: 30px; height: 1px; background: currentColor; opacity: .55; flex: 0 0 auto; }
  /* Take the SURFACE ink, not a light-theme token. --color-text-muted is a
     fixed mid-grey authored for a white page; on a Wave 3 lane the profile may
     repaint this hero dark, and the grey then sits at ~1.5:1 on it. The
     children below carry the de-emphasis, so it is applied exactly once and
     always relative to whatever surface the section resolved to. */
  .peak-ph-family-accent { position: relative; z-index: 2; margin: 0 0 clamp(14px, 2vw, 22px); color: inherit; }
  /* Memo-letterhead label: a single tracked-caps tag with a bottom rule (the
     memo header cadence), no restated-title subject line. */
  .peak-ph-memo-accent { display: block; width: fit-content; min-width: min(100%, 280px); padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border, rgba(0,0,0,0.16)); }
  .peak-ph-memo-accent span { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; opacity: .72; }
  .peak-ph-data-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 680px;
    border: 1px solid var(--color-border, rgba(0,0,0,0.14)); background: color-mix(in srgb, var(--client-accent, #888) 7%, transparent); }
  /* The VALUE is the content, so it takes the surface ink at full strength
     (--color-text is not defined anywhere, so the old var() resolved to the
     already-muted parent colour and quietly halved the contrast again). */
  .peak-ph-data-strip span { min-width: 0; padding: 12px 14px; border-left: 1px solid var(--color-border, rgba(0,0,0,0.12));
    font-size: .86rem; line-height: 1.25; color: inherit; }
  .peak-ph-data-strip span:first-child { border-left: 0; }
  /* .58 stacked on the parent's mute pushed these 10px caps to ~1.3:1. The
     label already reads as secondary from its size and tracking; it needs only
     a light touch of de-emphasis on top of that. */
  .peak-ph-data-strip b { display: block; margin-bottom: 4px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; opacity: .78; }
  .peak-ph-founder-accent { display: flex; width: fit-content; align-items: center; gap: 12px; font-family: var(--font-display); color: var(--color-text, currentColor); }
  .peak-ph-founder-mark { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%;
    background: var(--client-accent-deep, var(--client-accent, currentColor)); color: #fff; font-weight: 700; letter-spacing: 0.02em; }
  .peak-ph-map-accent { display: flex; width: fit-content; align-items: baseline; gap: 12px; padding-left: 16px;
    border-left: 2px solid var(--client-accent, currentColor); }
  .peak-ph-map-accent span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; opacity: .62; }
  .peak-ph-map-accent strong { font-family: var(--font-display); color: var(--color-text, currentColor); }
  .peak-ph-behind .peak-ph-family-accent { color: rgba(255,255,255,0.84); }
  .peak-ph-behind .peak-ph-data-strip { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); }
  .peak-ph-behind .peak-ph-data-strip span { border-left-color: rgba(255,255,255,0.18); color: #fff; }
  .peak-ph-behind .peak-ph-memo-accent { border-bottom-color: rgba(255,255,255,0.28); }
  .peak-ph-behind .peak-ph-memo-accent span:last-child, .peak-ph-behind .peak-ph-founder-accent,
  .peak-ph-behind .peak-ph-map-accent strong { color: #fff; }
  .peak-ph-family-memo .peak-page-hero-title { font-weight: 600; line-height: 1.1; }
  .peak-ph-family-dashboard .peak-page-hero-title, .peak-ph-family-map .peak-page-hero-title { max-width: 13ch; }
  .peak-ph-family-founder-letter .peak-page-hero-title { font-weight: 600; }
  /* editorial-left — lean, left-set even if the lonely-column pass would center
     it; a hairline rule under the intro. */
  .peak-ph-editorial .container, .peak-ph-editorial.peak-center-lonely .container {
    text-align: left; max-width: min(920px, 100%); margin-inline: auto;
  }
  .peak-ph-editorial .peak-page-hero-intro { margin-left: 0; }
  .peak-ph-editorial { padding-block: clamp(64px, 8vw, 104px) clamp(32px, 4vw, 52px) !important; }
  .peak-ph-rule { border: 0; border-top: 1px solid var(--color-border, rgba(0,0,0,0.16)); width: clamp(120px, 22vw, 240px); margin: clamp(22px, 3vw, 34px) 0 0; }
  /* side-by-side masthead — heading left, framed band right; stacks on mobile
     (where the grid gap doesn't apply, so the figure carries its own top space).
     Framing lives here since the figure no longer borrows .peak-section-figure. */
  .peak-ph-split-fig { margin: clamp(24px, 5vw, 36px) 0 0; border-radius: 16px; overflow: hidden; box-shadow: 0 26px 64px -34px rgba(var(--peak-shadow-rgb, 17,24,39), 0.42); }
  .peak-ph-split-fig img { width: 100%; height: clamp(200px, 26vw, 320px); object-fit: cover; display: block; }
  .peak-ph-split .container, .peak-ph-split.peak-center-lonely .container {
    text-align: left; max-width: min(var(--peak-content-max, 1200px), 100%); margin-inline: auto;
  }
  @media (min-width: 861px) {
    .peak-ph-split-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
    .peak-ph-split-grid .peak-ph-split-fig { margin: 0; }
    .peak-ph-split-text { text-align: left; }
  }
  /* band-behind — opens dark; shorter than the home hero's tall bgimg-host so it
     stays lighter than the site's one big moment. Text is reversed-out white by
     the reused .peak-hero-over-image treatment. */
  .peak-ph-behind.peak-hero-bgimg-host { min-height: clamp(300px, 40vh, 440px); padding-block: clamp(44px, 6vw, 76px); }
  /* Band images (about/cred/approach) can be lighter than a home-hero photo, so
     darken the reused gradient a touch more — white text stays legible over ANY
     band image (the home hero's own gradient starts at only 0.40 up top). */
  .peak-ph-behind .peak-hero-bg::after { background: linear-gradient(180deg, rgba(8,11,16,0.55) 0%, rgba(8,11,16,0.66) 58%, rgba(8,11,16,0.82) 100%); }
  .peak-ph-behind .peak-page-hero-title { max-width: 13ch; }
  .peak-page-endband { text-align: center; padding: clamp(56px, 8vw, 96px) 0; }
  .peak-page-endband-title { margin: 0 0 22px; font-size: var(--step-3, 1.8rem); letter-spacing: var(--peak-display-track, -0.015em); }
  /* Set at assembly when the page ends on a LIGHT section. This breathing room
     was a transparent margin-top, which exposed the (white/soft-white) page body
     as a ~50px seam between the light section and the dark band. Fold it into the
     band's OWN top padding instead so the air is painted by the dark band and it
     butts flush against the previous section. The 3-class rule keeps the quiet
     variant's padding shorthand (below) from resetting padding-top. */
  .peak-page-endband.peak-endband-breathe { padding-top: calc(clamp(56px, 8vw, 96px) + clamp(32px, 5vw, 56px)); }
  .peak-page-endband.peak-endband-breathe.peak-endband-quiet { padding-top: calc(clamp(44px, 6vw, 72px) + clamp(32px, 5vw, 56px)); }
  /* Sparse subpage (only the 2-section minimum): the home rhythm's generous
     section padding leaves screen-height voids around a lone card/accordion,
     reading as a padded stub (premium-feel T1-6). Compress the vertical rhythm
     so a short page reads taut and intentional. Scoped to sparse subpages —
     dense pages keep the full rhythm. */
  .peak-subpage.peak-page-sparse section.section,
  .peak-subpage.peak-page-sparse .peak-page-support { padding-block: clamp(40px, 5vw, 68px) !important; }
  /* Toned-section spacing has a two-class selector and otherwise overrides the
     page-hero rhythm. A sparse editorial masthead then balloons past 560px for
     three short lines. This scoped rule wins that cascade intentionally. */
  .peak-subpage.peak-page-sparse section.peak-page-hero {
    padding-block: clamp(48px, 6vw, 72px) clamp(28px, 4vw, 44px) !important;
  }
  /* Quiet/private/analytical brains forbid loud CTA bands (premium-feel T1-2):
     a restrained cream close with a hairline top rule, lighter type, and an
     outline button instead of the loud dark slab. The band chose preview-tone-
     cream at build time; these rules calm the volume within it. */
  .peak-page-endband.peak-endband-quiet { padding: clamp(44px, 6vw, 72px) 0; border-top: 1px solid var(--color-border, rgba(0,0,0,0.1)); }
  .peak-page-endband.peak-endband-quiet .peak-page-endband-title { font-weight: 500; font-size: var(--step-2, 1.4rem); }
  /* Explicit self-contained fill: the theme/tone .btn machinery left this
     button transparent on the cream band while the sweep rule set its text to
     readableOn(fill) — white-on-cream, unreadable (verified computed). accent-
     deep is the contrast-nudged dark accent (guaranteed ≥4.5:1 as ink on a
     light surface), so white text reads on it and it reads on the cream band.
     ID specificity beats the tone .btn rules. */
  #page-cta-p.peak-endband-quiet .peak-page-endband-btn {
    background: var(--client-accent-deep, var(--client-primary, #1a1a1a)) !important;
    border-color: var(--client-accent-deep, var(--client-primary, #1a1a1a)) !important;
    color: #fff !important;
  }
  /* Subpage first paint: the compact page hero must never be pulled up under
     the header by a divider style's negative margin (the rounded-sheet
     card-overlap clipped the wordmark on trailhead/hearth/luxury subpages —
     design-sweep C8). Whatever peak-div-* is active, the hero stays put. */
  .peak-subpage .peak-page-hero { margin-top: 0 !important; }
  /* Tablet-width editorial/page heroes can have only an eyebrow + short H1.
     Preserve enough first-paint presence that they do not collapse into a
     utility-bar-sized strip between the site header and first section. */
  @media (min-width: 421px) and (max-width: 860px) {
    .peak-page-hero { min-height: 264px; }
  }
  @media (max-width: 760px) {
    .peak-page-hero { padding-block: clamp(62px, 12vh, 96px) clamp(28px, 6vh, 46px) !important; }
    .peak-page-hero-title { font-size: clamp(2.05rem, 10vw, 3.1rem); line-height: 1.08; max-width: 11.5ch; }
    .peak-page-hero-intro { font-size: 1rem; line-height: 1.55; max-width: 34ch; }
    .peak-ph-data-strip { grid-template-columns: 1fr; }
    .peak-ph-data-strip span { border-left: 0; border-top: 1px solid var(--color-border, rgba(0,0,0,0.12)); }
    .peak-ph-data-strip span:first-child { border-top: 0; }
    .peak-ph-map-accent { align-items: flex-start; flex-direction: column; gap: 4px; }
    .peak-page-hero-band { height: clamp(150px, 42vw, 220px); margin-top: 24px; }
    .peak-ph-split-fig img { height: clamp(170px, 46vw, 240px); }
  }
  /* premium-feel T2-A — the story-page bridging lede between the origin (about)
     and practice (approach) beats. A quiet, slightly-larger transition line
     (not a heading) with an accent rule, so the page reads as an authored arc
     rather than home's middle third re-hosted. */
  .peak-subpage .peak-story-bridge { margin: clamp(22px, 3.5vw, 36px) 0 2px; max-width: var(--peak-measure, 62ch); font-size: var(--step-1, 1.2rem); line-height: 1.45; padding-left: 16px; border-left: 2px solid var(--client-accent, currentColor); }
  /* premium-feel T2-B — the sparse faq-page's trailing support card no longer
     floats alone on a light surface (audit class #4). Two seeded compositions:
     (a) a two-column companion — the accordion beside a sticky support PANEL;
     (b) a full-width tinted band + heading (plain CSS, no wrapper).
     (a) is composed so the WRAPPER (a real full-bleed section) owns the ONE
     tone band + the container gutter, and the two child sections render
     TRANSPARENT columns inside it — they can no longer drag mismatched slabs
     (the live faq-p flush to x=0 beside an offset support slab, with a body-
     white band under the shorter column). The support card keeps its bordered-
     panel styling as a CARD inside the shared band. */
  .peak-faq-companion { padding-block: clamp(44px, 5.5vw, 72px); }
  .peak-subpage.peak-page-sparse .peak-faq-companion { padding-block: clamp(40px, 5vw, 68px); }
  /* Child sections are transparent columns; their own inner container drops its
     gutter/measure since the wrapper's .container already provides both. The
     compound selector (2 classes) outranks the single-class .preview-tone-*
     !important bg rule, so a column never paints its own slab. */
  .peak-faq-companion .peak-faq-companion-col { padding-block: 0 !important; background: transparent !important; }
  .peak-faq-companion-col > .container, .peak-faq-companion-col > .container-narrow, .peak-faq-companion-col > .container-wide { max-width: none !important; padding-inline: 0 !important; }
  /* The support column reads as a bordered card so it's clearly a companion,
     not a stray band, inside the shared band. */
  .peak-faq-companion-col.peak-page-support > .container { padding: clamp(22px, 2.6vw, 34px) !important; border: 1px solid var(--color-border, rgba(0,0,0,0.12)); border-radius: 14px; background: color-mix(in srgb, var(--client-accent, #808080) 5%, transparent); }
  .peak-faq-companion-col.peak-page-support .peak-page-support-h { margin-top: 0; }
  /* Stacked (mobile) — grid gap doesn't apply, so give the card its own space
     below the accordion. Reset to 0 once the two become columns. */
  .peak-faq-companion-col.peak-page-support { margin-top: clamp(30px, 6vw, 48px); }
  @media (min-width: 861px) {
    .peak-faq-companion-grid { display: grid; grid-template-columns: 3fr 2fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
    .peak-faq-companion-col.peak-page-support { margin-top: 0; position: sticky; top: clamp(90px, 12vh, 150px); }
  }