/* ============================================================
   Bauchman Mediation — global.css
   Style: luxury (Aman + Aesop touchstones)
   Motion: luxury — warm-professional shortened (800ms reveal)
   See .claude/site.md "Visual Identity" + "Creative Direction"
   ============================================================ */

/* ---------- Self-hosted fonts ---------- */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-italic-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  /* Palette — Harmony-aligned: deep navy ground + gold accent + cream lift.
     The brand "ink" color is now a cool deep navy so it bookends with the
     nav/footer and reads coherent with the inset section grounds. The SB
     monogram (transparent-bg variant) sits cleanly on this navy. */
  --c-cream:        #f4efe7;   /* warm cream — light section ground */
  --c-paper:        #ffffff;   /* tighter editorial passages */
  --c-ink:          #14120f;   /* warm near-black charcoal — primary dark surface */
  --c-ink-soft:     #1f1c18;   /* slightly lifted charcoal for cards-on-ink */
  --c-ink-deep:     #0c0b09;   /* deeper charcoal — pull-quote / footer base */
  --c-taupe:        #7c7468;   /* hairlines/dividers only — fails 4.5:1 on cream as text */
  --c-text-quiet:   #6a6256;   /* secondary text on cream — 5.10:1 (passes WCAG AA normal) */
  --c-taupe-soft:   #9a9286;   /* very-quiet decorative taupe — never used for text */
  --c-stone:        #d9cfbf;   /* dividers, subtle borders */
  --c-stone-soft:   #ece4d4;   /* very-quiet panel */
  --c-navy:         #14120f;   /* legacy alias kept for nav-link-hover etc. (now charcoal) */
  --c-navy-deep:    #0c0b09;
  --c-brass:        #b8956a;   /* signature gold accent */
  --c-brass-warm:   #c9a577;   /* slightly lighter gold for type on ink */
  --c-brass-deep:   #7d6038;   /* darker brass for AA contrast on cream — 5.37:1 */
  --c-line-on-ink:  rgb(184 149 106 / 0.22); /* brass hairline on dark surfaces */
  --c-line-on-ink-strong: rgb(184 149 106 / 0.45);

  /* Spacing */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1.25rem;
  --space-lg:  2rem;
  --space-xl:  3.5rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;
  --space-section: clamp(3rem, 7vw, 5.5rem);

  /* Typography */
  --font-display: 'Cormorant Garamond', 'Tiempos Headline', 'Sabon', Garamond, serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-xs:    0.78125rem;
  --text-sm:    0.875rem;
  --text-base:  clamp(1.0625rem, 1.0rem + 0.25vw, 1.125rem);
  --text-lg:    clamp(1.1875rem, 1.05rem + 0.65vw, 1.375rem);
  --text-xl:    clamp(1.5rem, 1.2rem + 1.4vw, 2.0625rem);
  --text-2xl:   clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --text-3xl:   clamp(2.5rem, 1.7rem + 4vw, 4.25rem);
  --text-4xl:   clamp(3rem, 1.8rem + 6vw, 5.75rem);

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-body:  1.7;
  --leading-prose: 1.75;
  --tracking-caps: 0.16em;
  --tracking-wide: 0.06em;

  /* Shape — luxury caps radius at 0; max 2px on a tiny utility surface */
  --radius:    0;
  --radius-2:  2px;

  /* Layout */
  --measure-prose:  62ch;
  --measure-narrow: 56ch;
  --container-max:  1240px;
  --container-mid:  920px;
  --container-narrow: 720px;
  --header-h: 76px;

  /* Z-index */
  --z-header: 50;
  --z-drawer: 45;
  --z-skip:   100;

  --ease-default: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Motion tokens — LUXURY archetype, warm-professional shortened ---------- */
:root[data-motion="luxury"] {
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-hover:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-reveal:  800ms;   /* shortened from default 1000ms — see site.md */
  --dur-hover:   320ms;
  --dist-reveal: 6px;
  --stagger:     150ms;
  --hover-lift:  -1px;
}

/* ---------- View Transitions (multi-page) ---------- */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
.site-footer { view-transition-name: site-footer; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--dur-reveal);
  animation-timing-function: var(--ease-reveal);
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.001ms !important;
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6, li { overflow-wrap: break-word; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--c-ink);
  background: var(--c-cream);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}

/* ---------- Skip link ---------- */
/* Inverted (cream-on-ink) so it remains legible against the now-ink header. */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: var(--c-cream);
  color: var(--c-ink);
  padding: 10px 14px;
  border: 1px solid var(--c-brass);
  border-radius: var(--radius-2);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  z-index: var(--z-skip);
}
.skip-link:focus { top: 8px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  color: var(--c-ink);
  letter-spacing: -0.005em;
}
h1 { font-size: var(--text-3xl); font-weight: 300; }
h2 { font-size: var(--text-2xl); font-weight: 400; }
h3 { font-size: var(--text-xl);  font-weight: 500; }
h4 { font-size: var(--text-lg);  font-weight: 500; }

p { max-width: var(--measure-prose); }
.text-prose p + p { margin-top: 1em; }
.text-prose h2,
.text-prose h3 { margin-top: 2.25em; margin-bottom: 0.6em; }

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--dur-hover) var(--ease-hover),
              border-color var(--dur-hover) var(--ease-hover);
}
a:hover { color: var(--c-brass-deep); border-bottom-color: var(--c-brass-deep); }
a:focus-visible {
  outline: 2px solid var(--c-brass-deep);
  outline-offset: 4px;
  border-bottom-color: transparent;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--c-text-quiet);
  margin-bottom: var(--space-md);
}
.eyebrow--brass { color: var(--c-brass-deep); }

.lede {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--c-ink-soft);
  max-width: var(--measure-narrow);
}

.small-caps {
  font-variant-caps: all-small-caps;
  letter-spacing: var(--tracking-caps);
  font-feature-settings: "smcp", "c2sc";
}

.measure-prose  { max-width: var(--measure-prose); }
.measure-narrow { max-width: var(--measure-narrow); }

.text-quiet { color: var(--c-text-quiet); }
.text-soft  { color: var(--c-ink-soft); }
.weight-light { font-weight: 300; }
.italic { font-style: italic; }

/* Pre-launch placeholder marker — distinct so it's caught before deploy. */
.note-confirm {
  font-style: italic;
  color: var(--c-text-quiet);
  font-size: 0.92em;
}

/* Auxiliary text inside a form label (e.g. "(optional)") */
.label-aux {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--c-text-quiet);
}

hr.rule {
  border: 0;
  border-top: 1px solid var(--c-stone);
  margin-block: var(--space-xl);
  width: 100%;
}
hr.rule--brass { border-top-color: var(--c-brass); }
hr.rule--short {
  width: 64px;
  border-top: 1px solid var(--c-taupe);
  margin-block: var(--space-md);
}

/* ---------- Layout utilities ---------- */
.container        { width: min(100% - 2.5rem, var(--container-max));   margin-inline: auto; }
.container--mid   { width: min(100% - 2.5rem, var(--container-mid));    margin-inline: auto; }
.container--narrow{ width: min(100% - 2.5rem, var(--container-narrow)); margin-inline: auto; }

.section { padding-block: var(--space-section); }
.section--paper  { background: var(--c-paper); }
.section--cream  { background: var(--c-cream); }
.section--stone  { background: var(--c-stone-soft); }
.section--ink    { background: var(--c-ink); color: var(--c-cream); }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: var(--c-cream); }
.section--ink .eyebrow { color: var(--c-brass-warm); }
.section--ink p { color: rgb(244 239 231 / 0.78); }
.section--ink a { color: var(--c-cream); }
.section--ink a:hover { color: var(--c-brass-warm); border-bottom-color: var(--c-brass-warm); }

.text-center { text-align: center; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

/* ---------- Buttons (text-as-link, underline-on-hover — luxury maison style) ---------- */
.btn {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55em;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-ink);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  border-bottom: 1px solid var(--c-ink);
  padding-bottom: 4px;
  transition: color var(--dur-hover) var(--ease-hover),
              border-color var(--dur-hover) var(--ease-hover),
              padding-bottom var(--dur-hover) var(--ease-hover);
}
.btn::after {
  content: '\2192';            /* arrow */
  font-family: var(--font-body);
  font-weight: 400;
  display: inline-block;
  transition: transform var(--dur-hover) var(--ease-hover);
}
.btn:hover {
  color: var(--c-navy);
  border-bottom-color: var(--c-navy);
}
.btn:hover::after { transform: translateX(4px); }
.btn:focus-visible {
  outline: 2px solid var(--c-navy);
  outline-offset: 6px;
  border-radius: var(--radius-2);
}
.btn--on-ink { color: var(--c-cream); border-bottom-color: var(--c-brass); }
.btn--on-ink:hover { color: var(--c-brass); border-bottom-color: var(--c-brass); }

/* Quiet inline link variant — for legal copy etc. */
.link-quiet {
  border-bottom: 1px dotted var(--c-taupe);
  color: var(--c-ink);
}
.link-quiet:hover { border-bottom-style: solid; color: var(--c-navy); border-bottom-color: var(--c-navy); }

/* ---------- Header & nav ---------- */
/* Header is ink-ground to host the SB monogram on its native dark surface.
   Bookends visually with the ink pull-quote section and ink footer. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  background: var(--c-ink);
  border-bottom: 1px solid rgb(184 149 106 / 0.22);
  color: var(--c-cream);
  padding-top: env(safe-area-inset-top);
}
/* Reserve space for the fixed header so page content doesn't slide under it. */
body {
  padding-top: calc(var(--header-h) + env(safe-area-inset-top));
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  text-decoration: none;
  color: var(--c-cream);
  border-bottom: 0;
  padding: 4px 0;
  transition: opacity var(--dur-hover) var(--ease-hover);
}
.brand__img {
  display: block;
  height: 52px;
  width: 52px;
  object-fit: contain;
}
.brand:hover { opacity: 0.82; }
.brand:focus-visible {
  outline: 2px solid var(--c-brass);
  outline-offset: 4px;
}

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

.site-nav__list {
  display: flex;
  list-style: none;
  gap: var(--space-lg);
  align-items: center;
  margin: 0;
  padding: 0;
}
.nav__link {
  display: inline-block;
  padding: 0.5rem 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-cream);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-hover) var(--ease-hover),
              border-color var(--dur-hover) var(--ease-hover);
}
.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--c-brass);
  border-bottom-color: var(--c-brass);
}

.header-cta {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-cream);
  text-decoration: none;
  border-bottom: 1px solid var(--c-brass);
  padding-bottom: 4px;
  transition: color var(--dur-hover) var(--ease-hover),
              border-color var(--dur-hover) var(--ease-hover);
}
.header-cta:hover { color: var(--c-brass); border-bottom-color: var(--c-brass); }
.header-cta:focus-visible {
  outline: 2px solid var(--c-brass);
  outline-offset: 6px;
  border-radius: var(--radius-2);
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--c-cream);
  border-radius: var(--radius-2);
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  gap: 4px;
}
.nav-toggle:focus-visible {
  outline: 2px solid var(--c-brass);
  outline-offset: 2px;
}
.hamburger__bar {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--c-cream);
  transition: transform var(--dur-hover) var(--ease-hover),
              opacity var(--dur-hover) var(--ease-hover);
}
.nav-toggle[aria-expanded="true"] .hamburger__bar--top { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .hamburger__bar--mid { opacity: 0; }
.nav-toggle[aria-expanded="true"] .hamburger__bar--bot { transform: translateY(-5px) rotate(-45deg); }

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

/* Mobile drawer */
@media (max-width: 880px) {
  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }
  .site-nav {
    position: fixed;
    top: calc(var(--header-h) + env(safe-area-inset-top));
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--c-ink);
    color: var(--c-cream);
    border-top: 1px solid rgb(184 149 106 / 0.22);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform var(--dur-hover) var(--ease-hover),
                visibility 0s linear var(--dur-hover);
    z-index: var(--z-drawer);
    max-height: calc(100dvh - var(--header-h) - env(safe-area-inset-top));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-xl) var(--space-lg) var(--space-2xl);
  }
  .site-nav[data-open="true"] {
    transform: translateY(0);
    visibility: visible;
    transition: transform var(--dur-hover) var(--ease-hover),
                visibility 0s linear 0s;
  }
  .site-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }
  .nav__link {
    font-size: var(--text-base);
    padding: 0.5rem 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-block: clamp(2.75rem, 6vw, 5rem) clamp(2.75rem, 6vw, 5rem);
  background: var(--c-cream);
  overflow: clip;
}
.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}
.hero__content { max-width: 30rem; }
.hero__eyebrow { color: var(--c-brass-deep); }
.hero__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-4xl);
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--c-ink);
}
.hero__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--c-navy);
}
.hero__sub {
  margin-top: var(--space-lg);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--c-ink-soft);
  max-width: 28rem;
}
.hero__cta-wrap { margin-top: var(--space-xl); }

.hero__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--c-ink);
  overflow: clip;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__media--logo { background: var(--c-ink); }
.hero__media--logo img { object-fit: contain; padding: clamp(1.25rem, 4vw, 2.5rem); }
.hero__caption {
  margin-top: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-text-quiet);
}

/* ---------- Hero — centered editorial variant (Aurit-derived layout) ---------- */
.hero--center {
  padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 6vw, 5rem);
}
.hero--center .hero__inner {
  max-width: 56rem;
  margin-inline: auto;
  text-align: center;
}
.hero--center .hero__title {
  font-size: var(--text-3xl);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.014em;
}
.hero--center .hero__sub {
  margin-inline: auto;
  margin-top: var(--space-md);
  max-width: 36rem;
  color: var(--c-text-quiet);
  font-style: normal;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
}
.hero--center .hero__ctas {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md) var(--space-lg);
  margin-top: var(--space-xl);
}
.hero__landscape {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  margin-inline: auto;
  max-width: var(--container-max);
  aspect-ratio: 16 / 9;
  overflow: clip;
  background: var(--c-stone-soft);
}
.hero__landscape img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Solid + ghost button variants (used in centered hero) ---------- */
/* Square-cornered, brand-palette only — no rounded pills. */
.btn--filled {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-cream);
  background: var(--c-ink);
  border: 1px solid var(--c-ink);
  border-radius: var(--radius-2);
  padding: 0.95rem 1.5rem;
  cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-hover),
              color var(--dur-hover) var(--ease-hover),
              border-color var(--dur-hover) var(--ease-hover);
}
.btn--filled::after {
  content: '\2192';
  font-weight: 400;
  display: inline-block;
  transition: transform var(--dur-hover) var(--ease-hover);
}
.btn--filled:hover {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-cream);
}
.btn--filled:hover::after { transform: translateX(4px); }
.btn--filled:focus-visible {
  outline: 2px solid var(--c-brass-deep);
  outline-offset: 4px;
}

.btn--ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-ink);
  background: transparent;
  border: 1px solid var(--c-ink);
  border-radius: var(--radius-2);
  padding: 0.95rem 1.5rem;
  cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-hover),
              color var(--dur-hover) var(--ease-hover),
              border-color var(--dur-hover) var(--ease-hover);
}
.btn--ghost:hover {
  background: var(--c-ink);
  color: var(--c-cream);
  border-color: var(--c-ink);
}
.btn--ghost:focus-visible {
  outline: 2px solid var(--c-navy);
  outline-offset: 4px;
}

/* ---------- Q&A grid: H2 left, body right (two-col editorial) ---------- */
.qa-grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 880px) {
  .qa-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 5.5rem); }
}
.qa-grid__q {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-2xl);
  line-height: 1.08;
  letter-spacing: -0.008em;
  color: var(--c-ink);
  max-width: 18ch;
}
.qa-grid__a {
  max-width: var(--measure-prose);
  color: var(--c-ink-soft);
}
.qa-grid__a p + p { margin-top: 0.85em; }

/* ---------- Centered pull quote (smaller than the full ink panel) ---------- */
.quote-center {
  max-width: 56ch;
  margin-inline: auto;
  text-align: center;
  padding-block: var(--space-lg);
}
.quote-center blockquote p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  line-height: 1.28;
  color: var(--c-ink-soft);
  letter-spacing: -0.005em;
}
.quote-center blockquote p::before { content: '\201C'; margin-right: 0.05em; }
.quote-center blockquote p::after  { content: '\201D'; margin-left: 0.05em; }

/* ---------- Big editorial claim (replaces the reference's stat) ---------- */
.claim {
  max-width: 26ch;
  margin-inline: auto;
  text-align: center;
  padding-block: var(--space-lg);
}
.claim__h {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 4.4vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--c-ink);
}
.claim__h em { font-style: italic; color: var(--c-navy); font-weight: 300; }
.claim__sub {
  margin: var(--space-lg) auto 0;
  max-width: 42ch;
  color: var(--c-text-quiet);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
}

/* ---------- Numbered editorial (#1, #2, #3 with serif numerals) ---------- */
.numbered-editorial {
  list-style: none;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--c-stone);
  padding: 0;
}
.numbered-editorial__item {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-xl);
  border-bottom: 1px solid var(--c-stone);
}
@media (min-width: 760px) {
  .numbered-editorial__item {
    grid-template-columns: minmax(0, 1fr) minmax(0, 4fr) minmax(0, 6fr);
    gap: var(--space-2xl);
    align-items: baseline;
  }
}
.numbered-editorial__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-xl);
  color: var(--c-brass-deep);
  letter-spacing: 0.02em;
}
.numbered-editorial__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.25;
  color: var(--c-ink);
}
.numbered-editorial__body { color: var(--c-ink-soft); }
.numbered-editorial__body p + p { margin-top: 0.85em; }

/* ---------- Benefit card with side tabs (brand-palette translation) ---------- */
.benefit-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  background: var(--c-stone-soft);
  border: 1px solid var(--c-stone);
  max-width: var(--container-mid);
  margin-inline: auto;
  position: relative;
}
@media (min-width: 760px) {
  .benefit-card { grid-template-columns: minmax(0, 1fr) auto; }
}
.benefit-card__main {
  padding: clamp(1.75rem, 4vw, 3rem);
}
.benefit-card__mark {
  width: 36px;
  height: 36px;
  border: 1px solid var(--c-brass-deep);
  border-radius: 50%;
  position: relative;
  margin-bottom: var(--space-lg);
}
.benefit-card__mark::before,
.benefit-card__mark::after {
  content: '';
  position: absolute;
  background: var(--c-brass-deep);
}
.benefit-card__mark::before {
  left: 50%;
  top: 50%;
  width: 1px;
  height: 14px;
  transform: translate(-50%, -50%);
}
.benefit-card__mark::after {
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1px;
  transform: translate(-50%, -50%);
}
.benefit-card__h {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: var(--text-xl);
  line-height: 1.18;
  color: var(--c-ink);
  margin-bottom: var(--space-md);
  max-width: 22ch;
}
.benefit-card__main p {
  color: var(--c-ink-soft);
  max-width: var(--measure-prose);
}
.benefit-card__main p + p { margin-top: 0.85em; }

.benefit-card__tabs {
  list-style: none;
  display: grid;
  gap: 4px;
  padding: 0;
  margin: 0;
  align-content: stretch;
  min-width: 56px;
}
@media (max-width: 759px) {
  .benefit-card__tabs {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    border-top: 1px solid var(--c-stone);
  }
}
.benefit-card__tabs li {
  display: grid;
  place-items: center;
  padding: var(--space-md) 0.6rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp", "c2sc";
  letter-spacing: var(--tracking-caps);
  color: var(--c-cream);
  text-align: center;
  /* Vertical writing for desktop side tabs */
}
@media (min-width: 760px) {
  .benefit-card__tabs li {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    padding: var(--space-lg) var(--space-sm);
    min-width: 56px;
    min-height: 9rem;
  }
}
.benefit-card__tabs li:nth-child(1) { background: var(--c-brass-deep); }
.benefit-card__tabs li:nth-child(2) { background: var(--c-ink-soft); }
.benefit-card__tabs li:nth-child(3) { background: var(--c-brass); color: var(--c-ink); }
.benefit-card__tabs li:nth-child(4) { background: var(--c-navy); }
.benefit-card__tabs li:nth-child(5) { background: var(--c-taupe); }

/* ---------- Principle cards (replaces named testimonials) ---------- */
.principle-cards {
  list-style: none;
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  margin: 0;
}
@media (min-width: 760px) {
  .principle-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
}
.principle-card {
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--c-stone);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-height: 100%;
}
.principle-card--cream { background: var(--c-cream); }
.principle-card--stone { background: var(--c-stone-soft); }
.principle-card--paper { background: var(--c-paper); }
.principle-card__body {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.32;
  color: var(--c-ink);
  max-width: none;
  flex: 1;
}
.principle-card__attr {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp", "c2sc";
  letter-spacing: var(--tracking-caps);
  color: var(--c-brass-deep);
  max-width: none;
}

/* ---------- Trailing landscape figure (closes the page) ---------- */
.trailing-figure {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  aspect-ratio: 16 / 9;
  overflow: clip;
  background: var(--c-stone-soft);
}
.trailing-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Page hero (sub-pages) ---------- */
.page-hero {
  padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(1.75rem, 3.5vw, 2.75rem);
  background: var(--c-cream);
  border-bottom: 1px solid var(--c-stone);
}
.page-hero__inner { max-width: var(--measure-prose); }
.page-hero h1 {
  font-size: var(--text-3xl);
  font-weight: 300;
  letter-spacing: -0.012em;
}
.page-hero__sub {
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--c-text-quiet);
  max-width: 38rem;
}

/* ---------- Section heading block ---------- */
.section__head {
  max-width: var(--measure-prose);
  margin-bottom: var(--space-xl);
}
.section__head--center {
  margin-inline: auto;
  text-align: center;
}
.section__head h2 {
  font-size: var(--text-2xl);
  font-weight: 300;
}

/* ---------- Practice listing (typeset, no cards) ---------- */
.practice-list {
  list-style: none;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--c-stone);
}
.practice-list__item {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-xl);
  border-bottom: 1px solid var(--c-stone);
}
@media (min-width: 760px) {
  .practice-list__item {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--space-2xl);
    align-items: baseline;
  }
}
.practice-list__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: 1.15;
  color: var(--c-ink);
}
.practice-list__body p { color: var(--c-ink-soft); }
.practice-list__body p + p { margin-top: 0.75em; }

/* ---------- The pull-quote panel — THE ONE MEMORABLE THING ---------- */
.pull-quote {
  background: var(--c-ink);
  color: var(--c-cream);
  min-height: 60vh;
  display: grid;
  place-items: center;
  padding: var(--space-xl) var(--space-md);
  position: relative;
}
.pull-quote::before,
.pull-quote::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 1px;
  height: 36px;
  background: var(--c-brass);
  opacity: 0.5;
}
.pull-quote::before { top: var(--space-xl); transform: translateX(-50%); }
.pull-quote::after  { bottom: var(--space-xl); transform: translateX(-50%); }
.pull-quote__inner {
  max-width: min(42ch, 90vw);
  text-align: center;
}
.pull-quote blockquote p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.18;
  color: var(--c-cream);
  letter-spacing: -0.005em;
}
.pull-quote figcaption {
  margin-top: var(--space-xl);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-brass);
}

/* ---------- Process / numbered editorial ---------- */
.process-list {
  list-style: none;
  counter-reset: stepct;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--c-stone);
}
.process-list__item {
  counter-increment: stepct;
  display: grid;
  gap: var(--space-md);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-xl);
  border-bottom: 1px solid var(--c-stone);
}
@media (min-width: 760px) {
  .process-list__item {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 6fr);
    gap: var(--space-xl);
    align-items: baseline;
  }
}
.process-list__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-xl);
  color: var(--c-brass-deep);
}
.process-list__num::before { content: '0' counter(stepct) '.'; }
.process-list__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: 1.15;
  color: var(--c-ink);
}
.process-list__body p { color: var(--c-ink-soft); }
.process-list__body p + p { margin-top: 0.75em; }

/* ---------- Two-column editorial split ---------- */
.split {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 880px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .split--reverse > :first-child { order: 2; }
  .split--narrow { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
}
.split__media {
  aspect-ratio: 4 / 5;
  overflow: clip;
  background: var(--c-stone-soft);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Credentials list (small caps, hairlined) ---------- */
.credentials {
  list-style: none;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--c-stone);
}
.credentials li {
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--c-stone);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--c-ink);
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: var(--space-md);
  align-items: baseline;
}
.credentials__label {
  font-variant-caps: all-small-caps;
  letter-spacing: var(--tracking-caps);
  font-feature-settings: "smcp", "c2sc";
  color: var(--c-text-quiet);
  font-size: var(--text-sm);
}
.credentials__value { color: var(--c-ink); }

/* ---------- Quiet CTA banner ---------- */
.cta-banner {
  background: var(--c-cream);
  border-top: 1px solid var(--c-stone);
  padding-block: var(--space-xl);
}
.cta-banner__inner {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}
@media (min-width: 760px) {
  .cta-banner__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; }
}
.cta-banner__copy h2 {
  font-size: var(--text-2xl);
  font-weight: 300;
  font-style: italic;
  max-width: 18ch;
}
.cta-banner__copy p {
  margin-top: var(--space-md);
  color: var(--c-text-quiet);
  max-width: 38rem;
}
.cta-banner__action {
  text-align: left;
}
@media (min-width: 760px) {
  .cta-banner__action { text-align: right; padding-bottom: 8px; }
}

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--space-lg); }
.form__row {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: minmax(0, 1fr);
}

/* Group related fields into a labelled section. Larger top margin and a
   hairline create visible breathing room between conceptual blocks. */
.form__section {
  display: grid;
  gap: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--c-stone);
}
.form__section:first-of-type { border-top: 0; padding-top: 0; }
.form__section-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin: 0;
}
.form__section-header .form__section-num {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--c-brass-deep);
  font-style: italic;
  line-height: 1;
}
.form__section-header .form__section-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-ink);
}
@media (min-width: 640px) {
  .form__row--2col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.form__group { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.form__group label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-text-quiet);
}
.form__group label .req { color: var(--c-brass-deep); margin-left: 2px; }
.form__group small {
  font-size: var(--text-xs);
  color: var(--c-text-quiet);
  letter-spacing: 0;
  text-transform: none;
}
.form input,
.form textarea,
.form select {
  width: 100%;
  padding: 0.85rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-stone);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--c-ink);
  transition: border-color var(--dur-hover) var(--ease-hover),
              box-shadow var(--dur-hover) var(--ease-hover),
              outline-offset var(--dur-hover) var(--ease-hover);
}
.form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%231f2a44' stroke-width='1.2' stroke-linecap='round'><path d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.25rem center;
  background-size: 12px 8px;
  padding-right: 2rem;
  cursor: pointer;
}
.form textarea { min-height: 7rem; resize: vertical; line-height: var(--leading-body); }
.form input:focus-visible,
.form textarea:focus-visible,
.form select:focus-visible {
  outline: 2px solid var(--c-navy);
  outline-offset: 4px;
  border-bottom-color: var(--c-navy);
  box-shadow: 0 1px 0 0 var(--c-navy);
}
.form input::placeholder,
.form textarea::placeholder { color: var(--c-text-quiet); font-style: italic; }
.form input:hover:not(:focus-visible),
.form textarea:hover:not(:focus-visible),
.form select:hover:not(:focus-visible) { border-bottom-color: var(--c-ink-soft); }

.form__honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.form__notice {
  font-size: var(--text-sm);
  color: var(--c-text-quiet);
  line-height: 1.55;
  max-width: var(--measure-prose);
  margin-top: var(--space-md);
}

/* Prominent pre-form advisory. Use sparingly — one per form, placed
   above the first field so it is read before the user invests time. */
.form__alert {
  background: var(--c-stone-soft);
  border-left: 3px solid var(--c-brass-deep);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
  color: var(--c-ink);
  font-size: var(--text-base);
  line-height: 1.6;
}
.form__alert__label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-brass-deep);
  margin-bottom: var(--space-xs);
  font-weight: 600;
}
.form__alert ul {
  margin: var(--space-xs) 0 0;
  padding-left: 1.1em;
}
.form__alert li + li { margin-top: var(--space-2xs); }
.form__alert a { color: var(--c-ink); }
.form__alert__footer { margin-top: var(--space-xs); font-size: var(--text-sm); }

.form__status {
  font-size: var(--text-sm);
  margin: var(--space-md) 0 0;
  padding: var(--space-sm) var(--space-md);
  border-left: 2px solid var(--c-brass-deep);
  background: var(--c-stone-soft);
  color: var(--c-ink);
}
.form__status[data-empty="true"] { display: none; }
.form__status[data-tone="error"]   { border-left-color: var(--c-ink); }
.form__status[data-tone="success"] { border-left-color: var(--c-brass); background: var(--c-cream); }

.form__submit {
  margin-top: var(--space-md);
  align-self: flex-start;
}

/* Contact page: sticky aside while the long inquiry form scrolls. */
@media (min-width: 880px) {
  .contact-split > aside {
    position: sticky;
    top: var(--space-xl);
    align-self: start;
  }
}

/* Lift the inquiry form off the cream section so it reads as the
   primary action on the page rather than continuous body content. */
.contact-form-card {
  background: var(--c-paper);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 1px solid var(--c-stone);
  border-top: 3px solid var(--c-brass-deep);
  box-shadow:
    0 1px 2px rgba(20, 18, 15, 0.04),
    0 14px 36px -10px rgba(20, 18, 15, 0.14);
}

/* Inline contact details */
.contact-block {
  display: grid;
  gap: var(--space-md);
}
.contact-block dt {
  font-variant-caps: all-small-caps;
  letter-spacing: var(--tracking-caps);
  font-feature-settings: "smcp", "c2sc";
  font-size: var(--text-sm);
  color: var(--c-text-quiet);
  margin-top: var(--space-md);
}
.contact-block dt:first-child { margin-top: 0; }
.contact-block dd {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  color: var(--c-ink);
  margin-left: 0;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--c-ink);
  color: var(--c-cream);
  padding-block: var(--space-2xl) var(--space-lg);
}
.site-footer a { color: var(--c-cream); border-bottom-color: rgb(244 239 231 / 0.4); }
.site-footer a:hover { color: var(--c-brass); border-bottom-color: var(--c-brass); }
.site-footer__top {
  display: grid;
  gap: var(--space-2xl);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) {
  .site-footer__top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.footer-brand .brand__img { height: 96px; width: 96px; }
.footer-brand p {
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: rgb(244 239 231 / 0.78);
  max-width: 28rem;
}
.footer-social {
  list-style: none;
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgb(244 239 231 / 0.22);
  border-radius: 999px;
  color: rgb(244 239 231 / 0.78);
  transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
}
.footer-social a:hover,
.footer-social a:focus-visible {
  color: var(--c-ink);
  background-color: var(--c-brass);
  border-color: var(--c-brass);
}
.footer-social__icon { width: 1.05rem; height: 1.05rem; display: block; }
.footer-cols {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (min-width: 560px) {
  .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.footer-col h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-brass);
  margin-bottom: var(--space-md);
}
.footer-col ul { list-style: none; display: grid; gap: 0.55rem; }
.footer-col li a { font-size: var(--text-sm); border-bottom: 0; }
.footer-col li a:hover { color: var(--c-brass); border-bottom: 1px solid var(--c-brass); padding-bottom: 1px; }
.footer-col p { font-size: var(--text-sm); color: rgb(244 239 231 / 0.8); }

.site-footer__rule {
  border: 0;
  border-top: 1px solid rgb(244 239 231 / 0.18);
  margin-block: var(--space-xl);
}
.site-footer__bottom {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: minmax(0, 1fr);
  font-size: var(--text-xs);
  color: rgb(244 239 231 / 0.62);
  letter-spacing: 0.02em;
}
@media (min-width: 760px) {
  .site-footer__bottom { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
.site-footer__bottom .footer-meta { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); justify-content: flex-start; }
@media (min-width: 760px) {
  .site-footer__bottom .footer-meta--right { justify-content: flex-end; }
}
.site-footer__bottom a { font-size: inherit; border-bottom: 0; }
.site-footer__bottom a:hover { border-bottom: 1px solid var(--c-brass); padding-bottom: 1px; color: var(--c-brass); }

.confidentiality-note {
  font-family: var(--font-body);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--tracking-caps);
  font-feature-settings: "smcp", "c2sc";
  font-size: var(--text-sm);
  color: var(--c-brass);
  border-top: 1px solid rgb(184 149 106 / 0.4);
  padding-top: var(--space-md);
  margin-bottom: var(--space-md);
}

/* ---------- Reveal primitive — luxury archetype ---------- */
.reveal { opacity: 1; transform: none; }
html.has-anim .reveal {
  opacity: 0;
  transform: translateY(var(--dist-reveal));
  transition: opacity var(--dur-reveal) var(--ease-reveal),
              transform var(--dur-reveal) var(--ease-reveal);
  transition-delay: var(--delay, 0s);
}
html.has-anim .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html.has-anim .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- Page-specific aux: legal / prose ---------- */
.legal-prose {
  max-width: var(--measure-prose);
  color: var(--c-ink-soft);
}
.legal-prose h2 {
  font-size: var(--text-xl);
  font-weight: 500;
  font-style: italic;
  font-family: var(--font-display);
  margin-top: 2.5em;
  margin-bottom: 0.6em;
  color: var(--c-ink);
}
.legal-prose h3 {
  font-size: var(--text-lg);
  font-weight: 500;
  font-family: var(--font-display);
  margin-top: 2em;
  margin-bottom: 0.4em;
  color: var(--c-ink);
}
.legal-prose p + p { margin-top: 1em; }
.legal-prose ul { padding-left: 1.25rem; margin-block: 0.75em; }
.legal-prose ul li { margin-block: 0.4em; }
.legal-prose .updated {
  font-size: var(--text-sm);
  color: var(--c-text-quiet);
  margin-bottom: var(--space-xl);
  font-style: italic;
}

/* 404 */
.notfound {
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
}
.notfound__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(4rem, 12vw, 8rem);
  color: var(--c-text-quiet);
  line-height: 1;
}
.notfound h1 {
  margin-top: var(--space-md);
  font-size: var(--text-2xl);
  font-weight: 400;
}
.notfound p {
  margin: var(--space-md) auto 0;
  max-width: 30rem;
  color: var(--c-text-quiet);
}
.notfound .btn { margin-top: var(--space-xl); }

/* Anchor-link offset for sticky header (Process page) */
[id]:not(body):not(html) { scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top) + 1rem); }

/* ============================================================
   Masculine + concise — 2026-05-07 surface pivot
   Layered overrides on top of the luxury bones. The token block
   in :root is left intact above; this section re-skins the
   surface: heavier display weights, italic flourishes off,
   tighter section rhythm, ground cooled toward bone, and a
   direct ink-ground CTA banner. Bones (cream/ink/brass, square
   corners, hairlines, no shadows) stay. See site.md
   "Voice pivot — 2026-05-07".
   ============================================================ */

:root {
  /* Tighter rhythm */
  --space-section: clamp(2.25rem, 5vw, 4rem);
  /* Slightly cooler ground — neutral bone instead of warm parchment */
  --c-cream: #efebe2;
  /* Tighter body line-height — declarative, not poetic */
  --leading-body: 1.6;
}

/* Bring the body weight up a notch for visual weight without losing legibility */
body { font-weight: 420; }

/* Display weights up — Cormorant 500 reads architectural, not editorial-airy */
h1 { font-weight: 500; letter-spacing: -0.012em; }
h2 { font-weight: 500; }
h3 { font-weight: 500; }

/* Italic-off across display ledes, hero subs, and decorative spans.
   Italic Cormorant is the most "elegant/editorial" element on the page;
   removing it is the single biggest move toward "masculine and concise". */
.lede,
.hero__sub,
.hero--center .hero__sub,
.page-hero__sub,
.cta-banner__copy h2,
.benefit-card__h,
.numbered-editorial__title,
.numbered-editorial__num,
.principle-card__body,
.process-list__num,
.practice-list__title,
.qa-grid__q,
.notfound__num {
  font-style: normal;
}

/* Hero — declarative, no decorative em italic */
.hero--center .hero__title {
  font-weight: 500;
  letter-spacing: -0.018em;
  font-size: clamp(2.25rem, 1.5rem + 3.6vw, 4rem);
}
.hero--center .hero__title em {
  font-style: normal;
  font-weight: 600;
  color: var(--c-ink);
}
.hero--center .hero__sub {
  color: var(--c-ink-soft);
  font-size: var(--text-lg);
  line-height: 1.5;
  max-width: 40rem;
  font-family: var(--font-body);
  font-weight: 420;
}

/* Big claim — drop italic em */
.claim__h { font-weight: 500; }
.claim__h em { font-style: normal; font-weight: 600; color: var(--c-ink); }

/* qa-grid headings — heavier */
.qa-grid__q { font-weight: 500; max-width: 16ch; font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.375rem); }
.qa-grid__a { color: var(--c-ink-soft); }
.qa-grid__a strong { color: var(--c-ink); font-weight: 600; }

/* Section heading block — heavier */
.section__head h2 { font-weight: 500; font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); }
.section__lede {
  color: var(--c-ink-soft);
  max-width: var(--measure-prose);
  font-size: var(--text-base);
}

/* Page hero (sub-pages) — drop the italic sub */
.page-hero h1 { font-weight: 500; }
.page-hero__sub {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 420;
  color: var(--c-ink-soft);
  font-size: var(--text-base);
  line-height: 1.6;
}

/* Contact-block: phone + email read as primary, not quiet */
.contact-block { display: grid; gap: var(--space-md); margin: 0; }
.contact-block dt {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--c-text-quiet);
}
.contact-block dd {
  font-size: var(--text-base);
  color: var(--c-ink);
  margin: 0 0 var(--space-sm) 0;
}
.contact-block dd a {
  font-weight: 500;
  border-bottom: 1px solid var(--c-stone);
}
.contact-block dd a:hover {
  border-bottom-color: var(--c-ink);
}

/* ---------- Practice areas list (home page) ---------- */
.areas {
  list-style: none;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-stone);
}
.area {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--c-stone);
}
@media (min-width: 760px) {
  .area {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--space-2xl);
    align-items: baseline;
    padding-block: var(--space-xl);
  }
}
.area__h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.1;
  color: var(--c-ink);
  letter-spacing: -0.005em;
}
.area p {
  color: var(--c-ink-soft);
  max-width: var(--measure-prose);
  font-size: var(--text-base);
  line-height: 1.55;
}

/* ---------- CTA banner — promote to ink panel, direct phone+email ---------- */
.cta-banner {
  background: var(--c-ink);
  color: var(--c-cream);
  border-top: 0;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.cta-banner__copy h2 {
  color: var(--c-cream);
  font-style: normal;
  font-weight: 500;
  max-width: 22ch;
  font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
}
.cta-banner__copy p {
  color: rgb(244 239 231 / 0.78);
  margin-top: var(--space-sm);
  font-size: var(--text-base);
  max-width: 38rem;
}
.cta-banner__action--stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}
@media (min-width: 760px) {
  .cta-banner__action--stack { align-items: flex-end; }
}
.cta-banner .btn--on-ink {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-bottom: 1px solid var(--c-cream);
  padding-bottom: 4px;
}
.cta-banner .btn--on-ink:hover {
  color: var(--c-brass);
  border-bottom-color: var(--c-brass);
}

/* Hero CTAs — make the primary feel like a phone number */
.hero--center .hero__ctas .btn--filled,
.hero--center .hero__ctas .btn--ghost {
  font-size: 0.8125rem;
  padding: 0.85rem 1.4rem;
}

/* Buttons: drop the trailing arrow on tel:/mailto: hero CTAs (they read direct without it) */
.hero--center .hero__ctas .btn--filled[href^="tel:"]::after,
.hero--center .hero__ctas .btn--ghost[href^="mailto:"]::after { content: none; }

/* ============================================================
   Harmony retheme — 2026-05-09
   Deep navy ground + gold accent system. New components for
   the hero split, trust strip, services grid, structured process
   steps, about-mediator split, and the brass-filled CTA button.
   Bones (Cormorant + Inter, square corners, hairlines, no
   shadows) are preserved. See site.md "Visual Identity" — this
   layer succeeds the 2026-05-07 masculine/concise pivot.
   ============================================================ */

/* ---------- Brass-filled CTA button (Harmony's gold pill, square) ---------- */
.btn--brass {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-ink);
  background: var(--c-brass);
  border: 1px solid var(--c-brass);
  border-radius: var(--radius-2);
  padding: 1rem 1.6rem;
  cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-hover),
              color var(--dur-hover) var(--ease-hover),
              border-color var(--dur-hover) var(--ease-hover);
}
.btn--brass:hover {
  background: var(--c-brass-warm);
  border-color: var(--c-brass-warm);
  color: var(--c-ink);
}
.btn--brass:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 4px;
  box-shadow: 0 0 0 2px var(--c-brass);
}

/* Inline link — light caption with arrow, on dark surfaces */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-cream);
  text-decoration: none;
  border-bottom: 1px solid var(--c-cream);
  padding-bottom: 4px;
  transition: color var(--dur-hover) var(--ease-hover),
              border-color var(--dur-hover) var(--ease-hover);
}
.link-arrow::after {
  content: '\2192';
  display: inline-block;
  transition: transform var(--dur-hover) var(--ease-hover);
}
.link-arrow:hover {
  color: var(--c-brass-warm);
  border-bottom-color: var(--c-brass-warm);
}
.link-arrow:hover::after { transform: translateX(4px); }
.link-arrow--ink {
  color: var(--c-ink);
  border-bottom-color: var(--c-ink);
}
.link-arrow--ink:hover {
  color: var(--c-brass-deep);
  border-bottom-color: var(--c-brass-deep);
}

/* ---------- Hero split (deep navy, copy-left + media-right) ---------- */
.hero--split {
  background: var(--c-ink);
  color: var(--c-cream);
  padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 7vw, 6rem);
  position: relative;
  overflow: clip;
}
.hero--split .hero__split {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 880px) {
  .hero--split .hero__split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
.hero--split .hero__copy { max-width: 32rem; }
.hero--split .eyebrow { color: var(--c-brass-warm); }
.hero--split .hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.25rem, 1.5rem + 3.6vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.014em;
  color: var(--c-cream);
}
.hero--split .hero__sub {
  margin-top: var(--space-lg);
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 420;
  font-size: var(--text-base);
  line-height: 1.6;
  color: rgb(244 239 231 / 0.78);
  max-width: 32rem;
}
.hero--split .hero__rule {
  width: 64px;
  height: 1px;
  background: var(--c-brass);
  border: 0;
  margin: var(--space-lg) 0;
}
.hero--split .hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  align-items: center;
  margin-top: var(--space-xl);
}
.hero--split .hero__media {
  position: relative;
  aspect-ratio: 5 / 4;
  background: var(--c-ink-soft);
  border: 1px solid var(--c-line-on-ink);
  overflow: clip;
}
.hero--split .hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero--split .hero__media--logo {
  display: grid;
  place-items: center;
  background: var(--c-ink-deep);
}
.hero--split .hero__media--logo img {
  width: min(72%, 22rem);
  height: auto;
  object-fit: contain;
  aspect-ratio: 1 / 1;
}

/* ---------- Trust strip — 4 attributes on cream ground ---------- */
.trust-strip {
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-stone);
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}
.trust-strip__list {
  list-style: none;
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
}
@media (min-width: 720px) {
  .trust-strip__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
}
.trust-strip__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: 0.25rem 0;
}
.trust-strip__icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  color: var(--c-brass-deep);
  margin-top: 2px;
}
.trust-strip__icon svg { width: 100%; height: 100%; display: block; }
.trust-strip__copy__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-ink);
  margin-bottom: 4px;
}
.trust-strip__copy p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--c-text-quiet);
  margin: 0;
  max-width: none;
}

/* ---------- Services grid — 4-up cards on deep navy ---------- */
.service-grid-section {
  background: var(--c-ink);
  color: var(--c-cream);
  padding-block: clamp(3rem, 6.5vw, 5.5rem);
}
.service-grid-section .section__head { margin-inline: auto; text-align: center; max-width: 56ch; }
.service-grid-section .section__head h2 {
  color: var(--c-cream);
  font-weight: 500;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
}
.service-grid-section .section__head .eyebrow { color: var(--c-brass-warm); }
.service-grid-section .section__lede {
  color: rgb(244 239 231 / 0.72);
  margin-inline: auto;
  margin-top: var(--space-md);
}
.service-grid {
  list-style: none;
  display: grid;
  gap: var(--space-md);
  grid-template-columns: minmax(0, 1fr);
  margin: var(--space-xl) 0 0;
  padding: 0;
}
@media (min-width: 640px) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.service-card {
  background: var(--c-ink-soft);
  border: 1px solid var(--c-line-on-ink);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-height: 100%;
  transition: border-color var(--dur-hover) var(--ease-hover),
              transform var(--dur-hover) var(--ease-hover);
}
.service-card:hover {
  border-color: var(--c-line-on-ink-strong);
  transform: translateY(var(--hover-lift));
}
.service-card__icon {
  width: 36px;
  height: 36px;
  color: var(--c-brass-warm);
  flex: 0 0 auto;
}
.service-card__icon svg { width: 100%; height: 100%; display: block; }
.service-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: normal;
  font-size: var(--text-lg);
  line-height: 1.18;
  color: var(--c-cream);
  letter-spacing: -0.005em;
  max-width: none;
}
.service-card p {
  color: rgb(244 239 231 / 0.72);
  font-size: var(--text-sm);
  line-height: 1.55;
  margin: 0;
  max-width: none;
  flex: 1;
}

/* ---------- Process steps — 4-step on cream, numbered medallions ---------- */
.process-steps-section { background: var(--c-cream); padding-block: clamp(3rem, 6.5vw, 5.5rem); }
.process-steps-section .section__head { margin-inline: auto; text-align: center; max-width: 56ch; }
.process-steps-section .section__head h2 { font-weight: 500; }
.process-steps {
  list-style: none;
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: minmax(0, 1fr);
  margin: var(--space-xl) 0 0;
  padding: 0;
  position: relative;
}
@media (min-width: 880px) {
  .process-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-md);
  }
}
.process-step {
  position: relative;
  text-align: center;
  padding: 0 var(--space-sm);
}
@media (min-width: 880px) {
  /* Connecting hairline between steps (excluding last) */
  .process-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 22px;             /* center of medallion */
    left: calc(50% + 32px);
    right: calc(-50% + 32px);
    height: 1px;
    background: var(--c-brass);
    opacity: 0.55;
  }
}
.process-step__num {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--c-cream);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: 0.01em;
  margin-bottom: var(--space-md);
  position: relative;
  z-index: 1;
  border: 1px solid var(--c-ink);
}
.process-step h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: normal;
  font-size: var(--text-lg);
  line-height: 1.18;
  color: var(--c-ink);
  margin-bottom: var(--space-sm);
}
.process-step p {
  color: var(--c-ink-soft);
  font-size: var(--text-sm);
  line-height: 1.55;
  margin: 0 auto;
  max-width: 26ch;
}

/* ---------- About-the-mediator split (deep navy) ---------- */
.about-mediator {
  background: var(--c-ink);
  color: var(--c-cream);
  padding-block: clamp(3rem, 6.5vw, 5.5rem);
}
.about-mediator__split {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 880px) {
  .about-mediator__split { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 4fr); }
}
.about-mediator__portrait {
  aspect-ratio: 4 / 5;
  background: var(--c-ink-deep);
  border: 1px solid var(--c-line-on-ink);
  overflow: clip;
  display: grid;
  place-items: center;
}
.about-mediator__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-mediator__portrait--logo img {
  width: 70%;
  height: auto;
  object-fit: contain;
  aspect-ratio: 1 / 1;
}
.about-mediator__copy .eyebrow { color: var(--c-brass-warm); }
.about-mediator__copy h2 {
  font-weight: 500;
  font-size: clamp(1.875rem, 1.3rem + 2vw, 2.625rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--c-cream);
  max-width: 18ch;
}
.about-mediator__copy p {
  margin-top: var(--space-md);
  color: rgb(244 239 231 / 0.78);
  font-size: var(--text-base);
  line-height: 1.6;
  max-width: 32rem;
}
.about-mediator__signature {
  margin-top: var(--space-lg);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--c-cream);
}
.about-mediator__signature small {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-style: normal;
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp", "c2sc";
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  color: var(--c-brass-warm);
}
.about-mediator__credits {
  list-style: none;
  display: grid;
  gap: var(--space-lg);
  padding: 0;
  margin: 0;
}
.about-mediator__credit {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--space-md);
  align-items: flex-start;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: rgb(244 239 231 / 0.86);
}
.about-mediator__credit-mark {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--c-brass-warm);
  position: relative;
  flex: 0 0 24px;
  margin-top: 1px;
}
.about-mediator__credit-mark::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 12px;
  width: 5px;
  height: 1.5px;
  background: var(--c-brass-warm);
  transform: rotate(45deg);
  transform-origin: left center;
}
.about-mediator__credit-mark::after {
  content: '';
  position: absolute;
  left: 10px;
  top: 13px;
  width: 9px;
  height: 1.5px;
  background: var(--c-brass-warm);
  transform: rotate(-50deg);
  transform-origin: left center;
}

/* ---------- Editorial pull-quote (replaces named testimonials) ---------- */
.signature-quote {
  background: var(--c-cream);
  padding-block: clamp(3rem, 6vw, 5rem);
  text-align: center;
}
.signature-quote .eyebrow {
  color: var(--c-brass-deep);
  margin-bottom: var(--space-md);
}
.signature-quote blockquote {
  max-width: 56ch;
  margin: 0 auto;
}
.signature-quote blockquote p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  line-height: 1.28;
  color: var(--c-ink);
  letter-spacing: -0.005em;
  max-width: none;
  margin: 0 auto;
}
.signature-quote blockquote p::before { content: '\201C'; margin-right: 0.05em; color: var(--c-brass); }
.signature-quote blockquote p::after  { content: '\201D'; margin-left: 0.05em; color: var(--c-brass); }
.signature-quote figcaption {
  margin-top: var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp", "c2sc";
  letter-spacing: var(--tracking-caps);
  color: var(--c-text-quiet);
}

/* ---------- CTA banner harmony variant — gold button ---------- */
.cta-banner--harmony {
  background: var(--c-ink);
  color: var(--c-cream);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
/* Harmony CTA shares the dark band with the footer below it — trim the seam */
main:has(> .cta-banner--harmony:last-of-type) + .site-footer {
  padding-top: var(--space-xl);
}
.cta-banner--harmony .cta-banner__inner {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 760px) {
  .cta-banner--harmony .cta-banner__inner { grid-template-columns: minmax(0, 1fr) auto; }
}
.cta-banner--harmony h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  line-height: 1.08;
  color: var(--c-cream);
  max-width: 24ch;
}
.cta-banner--harmony p {
  margin-top: var(--space-sm);
  color: rgb(244 239 231 / 0.78);
  font-size: var(--text-base);
  max-width: 38rem;
}

/* ---------- Hairline rule on dark surfaces ---------- */
hr.rule--on-ink {
  border: 0;
  border-top: 1px solid var(--c-line-on-ink);
  width: 64px;
  margin: var(--space-md) 0;
}

/* ---------- Logo mark on transparent ground (header/footer) ---------- */
.brand__img--trans { background: transparent; }

/* ---------- Section: cream variant override (keeps existing semantics) ---------- */
.section--cream { background: var(--c-cream); }
.section--paper { background: var(--c-paper); }

/* ---------- nav-toggle: brass border on ink header for clearer affordance ---------- */
.nav-toggle { border-color: var(--c-line-on-ink-strong); }

/* Keep the brand + hamburger painted ABOVE the mobile drawer.
   The drawer (.site-nav) lives inside .site-header, which has its own
   stacking context (sticky + z-index). Its z-index (var(--z-drawer)) is
   trapped within that context, so without these lifts the drawer's
   translateY animation paints over the logo and toggle button, and when
   open the header row appears to vanish. Lift them above the drawer so
   the nav bar stays visible while the menu is open. */
.site-header__inner > .brand,
.site-header__inner .nav-toggle {
  position: relative;
  z-index: calc(var(--z-drawer) + 1);
}

/* ---------- Service grid eyebrow + heading on ink helpers ---------- */
.eyebrow.eyebrow--brass { color: var(--c-brass-deep); }
.section--ink .eyebrow.eyebrow--brass { color: var(--c-brass-warm); }

/* ---------- Reduce-motion: turn off small hover translates ---------- */
@media (prefers-reduced-motion: reduce) {
  .service-card:hover { transform: none !important; }
}