/* ============================================================
   Beaconshire Advisory — premium.css
   ------------------------------------------------------------
   Additive layer on top of main.css that elevates the homepage
   to a "boutique advisory" aesthetic: deeper palette, fluid
   editorial typography, atmospheric hero, refined cards, motion.

   Pattern: load AFTER main.css so cascade wins.
   Scope:   homepage components only (.hero, .services,
            .service-card, .process, .trust-strip).
   ============================================================ */

:root {
  /* --- Premium palette additions --- */
  --navy-950: #050E1C;
  --navy-925: #081429;
  --gold-300: #E8D6A8;
  --gold-700: #9A7D3A;

  /* Gradient mixes (CSS color-mix where supported) */
  --gold-glow: color-mix(in oklab, var(--gold-500) 18%, transparent);
  --gold-soft: color-mix(in oklab, var(--gold-500) 8%, transparent);
  --cream-warm: color-mix(in oklab, var(--neutral-50) 92%, var(--gold-500) 8%);

  /* --- Fluid type scale (Frain Ch. on responsive typography) --- */
  --display-xl: clamp(2.75rem, 4.6vw + 1rem, 5.5rem);   /* 44 → 88 */
  --display-lg: clamp(2.25rem, 3vw + 1rem, 4rem);       /* 36 → 64 */
  --display-md: clamp(1.75rem, 2vw + 1rem, 2.75rem);    /* 28 → 44 */
  --display-sm: clamp(1.375rem, 1vw + 1rem, 1.75rem);   /* 22 → 28 */
  --body-lg:    clamp(1.0625rem, 0.4vw + 1rem, 1.25rem); /* 17 → 20 */

  /* --- Motion tokens --- */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --motion-fast:    160ms;
  --motion-med:     320ms;
  --motion-slow:    640ms;

  /* --- Elevation --- */
  --shadow-elev-1: 0 1px 2px rgba(5, 14, 28, .06), 0 0 0 1px rgba(5, 14, 28, .04);
  --shadow-elev-2: 0 8px 20px -4px rgba(5, 14, 28, .12), 0 4px 8px -2px rgba(5, 14, 28, .06);
  --shadow-elev-3: 0 24px 48px -16px rgba(5, 14, 28, .24), 0 8px 16px -4px rgba(5, 14, 28, .12);
  --shadow-glow:   0 0 0 1px var(--gold-soft), 0 16px 48px -16px var(--gold-glow);
}

/* ============================================================
   Body baseline: warmer paper tone, smoother text rendering
   ============================================================ */
body {
  background: var(--cream-warm);
  text-rendering: optimizeLegibility;
}

/* ============================================================
   HERO — cinematic photo backdrop with editorial text overlay
   ------------------------------------------------------------
   Full-bleed photograph behind a multi-stop dark gradient that
   ensures white serif type stays legible while keeping the
   right side of the image visible. Inspired by Preferred CFO
   and BDO's photo-led hero pattern.
   ============================================================ */
.hero {
  position: relative;
  padding: clamp(96px, 14vw, 180px) 0 clamp(80px, 12vw, 140px);
  background-color: var(--navy-950); /* fallback only — picture sits above */
  color: var(--neutral-0);
  overflow: hidden;
  min-height: clamp(560px, 72vh, 820px);
  display: flex;
  align-items: center;
}

/* The photograph itself — full-bleed at the bottom of the stack */
.hero-backdrop-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
.hero-backdrop-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 38%;
  filter: saturate(0.92) contrast(1.04);
}

/* Darkening + warming gradient overlay so type stays legible */
.hero-backdrop-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(55% 50% at 100% 0%, rgba(201, 169, 97, 0.22), transparent 55%),
    linear-gradient(102deg,
      rgba(5, 14, 28, 0.86) 0%,
      rgba(5, 14, 28, 0.74) 30%,
      rgba(5, 14, 28, 0.42) 65%,
      rgba(5, 14, 28, 0.22) 100%),
    linear-gradient(180deg, transparent 55%, rgba(5, 14, 28, 0.4) 100%);
  pointer-events: none;
}

/* Film grain texture — sits above overlay */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/></svg>");
  opacity: 0.08;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 2;
}

/* Thin gold rule anchoring the hero to the page below */
.hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
  opacity: 0.5;
  z-index: 3;
}

.hero-inner {
  position: relative;
  z-index: 4;
  width: 100%;
}
.hero-text {
  max-width: 64ch;
}

/* Hero typography: editorial display */
.hero .eyebrow {
  color: var(--gold-500);
  letter-spacing: 0.22em;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0 0 1.5rem 0;
  position: relative;
  padding-left: 28px;
}
.hero .eyebrow::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 1px;
  background: var(--gold-500);
}

.hero h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--display-xl);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--neutral-0);
  margin: 0 0 1.5rem 0;
  max-width: 16ch;
  text-wrap: balance;
}
.hero h1 em {
  font-style: italic;
  color: var(--gold-500);
  font-weight: 400;
}

.hero-sub {
  font-family: var(--font-sans);
  font-size: var(--body-lg);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  max-width: 56ch;
  margin-bottom: 1.5rem;
}

.hero-pledge {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1rem, 1vw + 0.5rem, 1.125rem);
  color: var(--gold-300);
  border-left: 2px solid var(--gold-500);
  padding: 4px 0 4px 18px;
  margin: 0 0 2.5rem 0;
  max-width: 52ch;
  line-height: 1.5;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 3rem;
}

/* Premium button refinements */
.hero .btn-primary {
  background: var(--gold-500);
  color: var(--navy-950);
  font-weight: 600;
  padding: 16px 32px;
  border-radius: 6px;
  transition:
    background var(--motion-med) var(--ease-out-quart),
    transform var(--motion-fast) var(--ease-out-quart),
    box-shadow var(--motion-med) var(--ease-out-quart);
}
.hero .btn-primary:hover {
  background: var(--gold-300);
  color: var(--navy-950);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}
.hero .btn-ghost {
  background: transparent;
  color: var(--neutral-0);
  border: 1px solid rgba(255, 255, 255, 0.24);
  padding: 16px 32px;
  border-radius: 6px;
  transition:
    background var(--motion-med) var(--ease-out-quart),
    border-color var(--motion-med) var(--ease-out-quart),
    transform var(--motion-fast) var(--ease-out-quart);
}
.hero .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--gold-500);
  color: var(--neutral-0);
  transform: translateY(-2px);
}

/* Trust strip → gold-edge credential badges */
.trust-strip {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin: 0;
  list-style: none;
}
@media (min-width: 640px) { .trust-strip { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.trust-strip li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.7);
}
.trust-strip strong {
  color: var(--neutral-0);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.trust-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--gold-500);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.18);
}

/* ============================================================
   MEET YOUR PRINCIPAL — founder section (warm cream, editorial)
   ------------------------------------------------------------
   Two-column: bio copy left, portrait right with premium frame.
   Houses the James portrait that used to live in the hero.
   ============================================================ */
.principal {
  padding: clamp(96px, 14vw, 160px) 0;
  background:
    radial-gradient(60% 50% at 0% 0%, var(--gold-soft), transparent 60%),
    var(--cream-warm);
  position: relative;
}
.principal::before,
.principal::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
  opacity: 0.3;
}
.principal::before { top: 0; }
.principal::after  { bottom: 0; }

.principal-inner {
  display: grid;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (min-width: 880px) {
  .principal-inner { grid-template-columns: 1.1fr 0.9fr; }
}

.principal-text { max-width: 56ch; }
.principal-text .eyebrow {
  color: var(--gold-700);
  letter-spacing: 0.22em;
  font-weight: 600;
  font-size: 0.75rem;
  margin: 0 0 1rem 0;
}
.principal-text h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--display-md);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--navy-950);
  margin: 0 0 0.5rem 0;
  text-wrap: balance;
}
.principal-name {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  color: var(--neutral-700);
  margin: 0 0 1.75rem 0;
}
.principal-name strong {
  color: var(--navy-950);
  font-weight: 600;
}
.principal-bio p {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--neutral-900);
  margin: 0 0 1.125rem 0;
}
.principal-credentials {
  display: grid;
  gap: 8px 24px;
  grid-template-columns: 1fr;
  margin: 1.5rem 0 1.75rem 0;
  padding: 1.25rem 0;
  border-top: 1px solid var(--neutral-200);
  border-bottom: 1px solid var(--neutral-200);
  list-style: none;
}
@media (min-width: 480px) { .principal-credentials { grid-template-columns: 1fr 1fr; } }
.principal-credentials li {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.875rem;
  color: var(--navy-900);
}
.principal-credentials li::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--gold-500);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.18);
}
.principal-cta {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--navy-800);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  transition: gap var(--motion-fast) var(--ease-out-quart),
              color var(--motion-fast) ease;
}
.principal-cta:hover { gap: 14px; color: var(--gold-700); }

/* Portrait frame — refined editorial treatment */
.principal-portrait {
  position: relative;
  margin: 0;
  max-width: 480px;
  justify-self: center;
  width: 100%;
}
.principal-portrait picture,
.principal-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
  background: var(--navy-925);
}
.principal-portrait img {
  box-shadow:
    0 32px 64px -16px rgba(5, 14, 28, 0.28),
    0 0 0 1px rgba(201, 169, 97, 0.2);
  filter: contrast(1.02) saturate(1.02);
  position: relative;
  z-index: 1;
}
/* Gold offset frame */
.principal-portrait::before {
  content: "";
  position: absolute;
  inset: 24px -24px -24px 24px;
  border: 1px solid var(--gold-500);
  border-radius: 4px;
  z-index: 0;
}
.principal-portrait figcaption {
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  color: var(--neutral-700);
  letter-spacing: 0.06em;
  text-align: center;
}
.principal-portrait figcaption::before {
  content: "—  ";
  color: var(--gold-500);
}

/* ============================================================
   SERVICES — premium cards
   ============================================================ */
.services {
  padding: clamp(80px, 12vw, 140px) 0;
  background: var(--cream-warm);
  position: relative;
}
.services::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
  opacity: 0.3;
}

.section-head {
  text-align: center;
  margin-bottom: clamp(48px, 7vw, 88px);
  max-width: 60ch;
  margin-inline: auto;
}
.section-head .eyebrow {
  color: var(--gold-700);
  letter-spacing: 0.22em;
  font-weight: 600;
  font-size: 0.75rem;
}
.section-head h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--display-lg);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--navy-950);
  margin: 1rem 0 1.25rem 0;
  text-wrap: balance;
}
.section-lede {
  font-size: var(--body-lg);
  color: var(--neutral-700);
  line-height: 1.55;
  margin: 0;
  max-width: 52ch;
  margin-inline: auto;
  text-wrap: balance;
}

.service-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  container-type: inline-size;
}
@media (min-width: 720px)  { .service-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1100px) { .service-grid { grid-template-columns: repeat(4, 1fr); } }

.service-card {
  position: relative;
  padding: 36px 32px 32px;
  background: var(--neutral-0);
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: var(--shadow-elev-1);
  display: flex;
  flex-direction: column;
  transition:
    transform var(--motion-med) var(--ease-out-quart),
    box-shadow var(--motion-med) var(--ease-out-quart),
    border-color var(--motion-med) var(--ease-out-quart);
}
.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 32px;
  width: 24px;
  height: 2px;
  background: var(--gold-500);
  border-radius: 2px;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-elev-3);
  border-color: var(--gold-500);
}
.service-card h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--navy-950);
  margin: 0 0 0.75rem 0;
}
.service-card p {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--neutral-700);
  margin-bottom: 1rem;
}
.service-card .price-line {
  font-family: var(--font-sans);
  font-size: 0.8125rem !important;
  color: var(--neutral-700);
  border-top: 1px solid var(--neutral-200);
  padding-top: 1rem !important;
  margin-top: auto !important;
}
.service-card .price-line strong {
  color: var(--navy-950);
  font-weight: 600;
}
.service-card .card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 0.75rem;
  color: var(--navy-800);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: gap var(--motion-fast) var(--ease-out-quart), color var(--motion-fast) ease;
}
.service-card .card-link:hover {
  gap: 12px;
  color: var(--gold-700);
}

/* Featured card — deep navy variant */
.service-card.featured {
  background: linear-gradient(168deg, var(--navy-925) 0%, var(--navy-800) 100%);
  border-color: transparent;
  color: var(--neutral-0);
  overflow: hidden;
}
.service-card.featured::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 60% at 100% 0%, var(--gold-glow), transparent 60%);
  pointer-events: none;
}
.service-card.featured > * { position: relative; z-index: 1; }
.service-card.featured h3 { color: var(--neutral-0); }
.service-card.featured p { color: rgba(255, 255, 255, 0.75); }
.service-card.featured .price-line { color: rgba(255, 255, 255, 0.7); border-top-color: rgba(255, 255, 255, 0.12); }
.service-card.featured .price-line strong { color: var(--gold-500); }
.service-card.featured .card-link { color: var(--gold-500); }
.service-card.featured .card-link:hover { color: var(--gold-300); }
.service-card.featured .card-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--gold-500);
  color: var(--navy-950);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 3px;
  z-index: 2;
}

/* ============================================================
   PROCESS — deeper, more dramatic
   ============================================================ */
.process {
  padding: clamp(96px, 14vw, 160px) 0;
  background: var(--navy-950);
  color: var(--neutral-0);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.process::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/></svg>");
  opacity: 0.08;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: -1;
}
.process .section-head h2 { color: var(--neutral-0); }
.process .section-head .eyebrow { color: var(--gold-500); }

.process-steps {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 720px)  { .process-steps { grid-template-columns: repeat(2, 1fr); gap: 40px; } }
@media (min-width: 1040px) { .process-steps { grid-template-columns: repeat(4, 1fr); gap: 32px; } }

.process-steps li {
  position: relative;
  padding: 32px 24px 24px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  backdrop-filter: blur(8px);
  transition:
    transform var(--motion-med) var(--ease-out-quart),
    border-color var(--motion-med) var(--ease-out-quart),
    background var(--motion-med) var(--ease-out-quart);
}
.process-steps li:hover {
  transform: translateY(-4px);
  border-color: var(--gold-500);
  background: rgba(255, 255, 255, 0.05);
}
.process-steps .step-num {
  display: block;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--gold-500);
  margin-bottom: 1.25rem;
  letter-spacing: -0.04em;
  opacity: 0.9;
}
.process-steps h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--neutral-0);
  margin: 0 0 0.625rem 0;
  letter-spacing: -0.01em;
}
.process-steps p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* ============================================================
   TESTIMONIALS — refined editorial style
   ============================================================ */
.testimonials {
  padding: clamp(96px, 14vw, 160px) 0;
  background: var(--cream-warm);
}
.testimonial-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } }
.testimonial {
  padding: 36px 32px;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  box-shadow: var(--shadow-elev-1);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 0;
  transition: box-shadow var(--motion-med) var(--ease-out-quart);
}
.testimonial:hover { box-shadow: var(--shadow-elev-2); }
.testimonial .stars {
  color: var(--gold-500);
  font-size: 1rem;
  letter-spacing: 0.1em;
}
.testimonial blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--navy-900);
  margin: 0;
  flex: 1;
  position: relative;
  padding-left: 18px;
}
.testimonial blockquote::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 2px;
  background: var(--gold-500);
}
.testimonial figcaption {
  display: flex; flex-direction: column;
  font-size: 0.875rem;
  padding-top: 1rem;
  border-top: 1px solid var(--neutral-200);
}
.testimonial figcaption strong {
  color: var(--navy-950);
  font-weight: 600;
  font-size: 0.9375rem;
}
.testimonial figcaption span {
  color: var(--neutral-700);
  margin-top: 2px;
}

/* ============================================================
   LEAD MAGNET — premium dark band
   ============================================================ */
.lead-magnet {
  padding: clamp(96px, 14vw, 160px) 0;
  background:
    radial-gradient(80% 60% at 0% 0%, var(--gold-glow), transparent 50%),
    linear-gradient(168deg, var(--navy-950) 0%, var(--navy-800) 100%);
  color: var(--neutral-0);
  position: relative;
  overflow: hidden;
}
.lead-magnet::before {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
  opacity: 0.4;
}
.lead-magnet-inner {
  display: grid;
  gap: clamp(40px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 920px) { .lead-magnet-inner { grid-template-columns: 1fr 1fr; } }
.lead-magnet .eyebrow { color: var(--gold-500); }
.lead-magnet h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--display-md);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--neutral-0);
  margin: 1rem 0 1.25rem 0;
  text-wrap: balance;
}
.lead-magnet p {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--body-lg);
  line-height: 1.55;
  max-width: 52ch;
}

/* ============================================================
   FINAL CTA — restrained closing
   ============================================================ */
.final-cta {
  padding: clamp(96px, 12vw, 140px) 0;
  background: var(--cream-warm);
  text-align: center;
}
.final-cta h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--display-lg);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--navy-950);
  margin: 0 0 1rem 0;
  text-wrap: balance;
  max-width: 22ch;
  margin-inline: auto;
}
.final-cta > .container > p {
  font-size: var(--body-lg);
  color: var(--neutral-700);
  max-width: 50ch;
  margin: 0 auto 2rem;
  text-wrap: balance;
}

/* ============================================================
   HEADER — refined chrome (subtle change so the new hero
   doesn't fight the header above it)
   ============================================================ */
.site-header {
  background: rgba(250, 250, 247, 0.85);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid rgba(201, 169, 97, 0.18);
}

/* ============================================================
   INTERIOR PAGES — page-hero, content blocks, cross-sell, CTA
   ------------------------------------------------------------
   Premium chrome applied to /services/*, /about/, /contact/,
   /schedule/, /resources/*, /privacy/, /disclaimer/, etc.
   Interior pages don't get a photo backdrop — that's homepage-
   exclusive. They get atmospheric CSS gradients in the same
   vocabulary so the system reads as one design.
   ============================================================ */

/* --- Interior page hero --- */
.page-hero {
  padding: clamp(72px, 10vw, 120px) 0 clamp(56px, 8vw, 88px);
  background:
    radial-gradient(60% 50% at 95% 0%, var(--gold-glow), transparent 60%),
    linear-gradient(168deg, var(--navy-950) 0%, var(--navy-800) 75%, var(--navy-700) 100%);
  color: var(--neutral-0);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/></svg>");
  opacity: 0.08;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
  opacity: 0.45;
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero .eyebrow {
  color: var(--gold-500);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 600;
  padding-left: 28px;
  position: relative;
  margin: 0 0 1.25rem 0;
}
.page-hero .eyebrow::before {
  content: "";
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 20px; height: 1px; background: var(--gold-500);
}
.page-hero h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--display-lg);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--neutral-0);
  margin: 0 0 1.25rem 0;
  max-width: 22ch;
  text-wrap: balance;
}
.page-hero h1 em {
  font-style: italic;
  color: var(--gold-500);
  font-weight: 400;
}
.page-hero .lede {
  font-family: var(--font-sans);
  font-size: var(--body-lg);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  max-width: 60ch;
  margin: 0 0 2rem 0;
}
.page-hero .cta-row {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 0.5rem;
}
.page-hero .cta-row .btn-primary {
  background: var(--gold-500);
  color: var(--navy-950);
  padding: 14px 28px;
  border-radius: 6px;
  font-weight: 600;
  transition:
    background var(--motion-med) var(--ease-out-quart),
    transform var(--motion-fast) var(--ease-out-quart),
    box-shadow var(--motion-med) var(--ease-out-quart);
}
.page-hero .cta-row .btn-primary:hover {
  background: var(--gold-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}
.page-hero .cta-row .btn-ghost {
  background: transparent;
  color: var(--neutral-0);
  border: 1px solid rgba(255, 255, 255, 0.24);
  padding: 14px 28px;
  border-radius: 6px;
}
.page-hero .cta-row .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--gold-500);
  color: var(--neutral-0);
}

/* --- Breadcrumbs on dark page-hero --- */
.page-hero ~ .breadcrumbs,
.page-hero .breadcrumbs {
  color: rgba(255, 255, 255, 0.55);
}
/* When breadcrumbs sit just above page-hero (current layout): */
.breadcrumbs { padding-block: 0.875rem; }
.breadcrumbs a { color: var(--neutral-700); }
.breadcrumbs a:hover { color: var(--gold-700); }

/* --- Generic content blocks --- */
.content-block {
  padding: clamp(72px, 10vw, 120px) 0;
}
/* Tight modifiers — pair them when two consecutive .content-block sections
   should read as one continuous beat rather than two separate chapters.
       <section class="content-block tight-bottom"> ... </section>
       <section class="content-block alt tight-top"> ... </section>
   Drops the gap from ~144–240px to ~64–96px on wide screens. */
.content-block.tight-top    { padding-top:    clamp(32px, 4vw, 48px); }
.content-block.tight-bottom { padding-bottom: clamp(32px, 4vw, 48px); }
.content-block.alt {
  background: var(--cream-warm);
}
.content-block.dark {
  background:
    radial-gradient(70% 50% at 0% 0%, var(--gold-glow), transparent 50%),
    linear-gradient(168deg, var(--navy-950), var(--navy-800));
  color: var(--neutral-0);
  position: relative;
  overflow: hidden;
}
.content-block.dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/></svg>");
  opacity: 0.06;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.content-block.dark > .container { position: relative; }
.content-block.dark h2,
.content-block.dark h3 { color: var(--neutral-0); }
.content-block.dark p { color: rgba(255, 255, 255, 0.78); }
.content-block.dark .eyebrow { color: var(--gold-500); }

.content-block .eyebrow {
  font-weight: 600;
  letter-spacing: 0.22em;
  font-size: 0.75rem;
  color: var(--gold-700);
  text-transform: uppercase;
}
.content-block h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--display-md);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--navy-950);
  margin: 1rem 0 1rem 0;
  text-wrap: balance;
}
.content-block.dark h2 { color: var(--neutral-0); }
.content-block .block-lede {
  font-family: var(--font-sans);
  font-size: var(--body-lg);
  line-height: 1.55;
  color: var(--neutral-700);
  max-width: 60ch;
  margin-bottom: 2rem;
}
.content-block.dark .block-lede { color: rgba(255, 255, 255, 0.78); }
.content-block p {
  font-size: 1.0625rem;
  line-height: 1.65;
}

/* --- Premium checklist treatment --- */
.checklist {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: grid;
  gap: 14px;
}
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(201, 169, 97, 0.18);
  border-radius: 6px;
  transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.checklist li:hover {
  border-color: var(--gold-500);
  box-shadow: var(--shadow-elev-1);
}
.checklist li::before {
  content: "";
  flex-shrink: 0;
  width: 8px; height: 8px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--gold-500);
  box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.16);
}
.content-block.dark .checklist li {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}
.content-block.dark .checklist li strong { color: var(--neutral-0); }

/* --- Cross-sell cards (resource articles) --- */
.cross-sell {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  margin-top: 1.5rem;
}
@media (min-width: 720px)  { .cross-sell { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cross-sell { grid-template-columns: repeat(3, 1fr); } }

.cross-card {
  display: block;
  padding: 28px 24px;
  background: var(--neutral-0);
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: var(--shadow-elev-1);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition:
    transform var(--motion-med) var(--ease-out-quart),
    box-shadow var(--motion-med) var(--ease-out-quart),
    border-color var(--motion-med) var(--ease-out-quart);
}
.cross-card::before {
  content: "";
  position: absolute;
  top: 0; left: 24px;
  width: 24px; height: 2px;
  background: var(--gold-500);
  border-radius: 2px;
}
.cross-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elev-3);
  border-color: var(--gold-500);
}
.cross-card h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.25;
  color: var(--navy-950);
  margin: 0.5rem 0 0.5rem 0;
}
.cross-card p {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--neutral-700);
  margin: 0 0 1rem 0;
}
.cross-card .cross-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy-800);
  transition: gap var(--motion-fast) var(--ease-out-quart), color var(--motion-fast) ease;
}
.cross-card:hover .cross-arrow {
  gap: 12px;
  color: var(--gold-700);
}

/* --- Page-bottom CTA (lower than hero) --- */
.page-cta {
  padding: clamp(72px, 10vw, 120px) 0;
  background:
    radial-gradient(60% 50% at 0% 0%, var(--gold-glow), transparent 50%),
    linear-gradient(168deg, var(--navy-950), var(--navy-800));
  color: var(--neutral-0);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-cta::before {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
  opacity: 0.4;
}
.page-cta h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--display-md);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--neutral-0);
  margin: 0 0 1rem 0;
  text-wrap: balance;
  max-width: 22ch;
  margin-inline: auto;
}
.page-cta p {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--body-lg);
  line-height: 1.5;
  max-width: 50ch;
  margin: 0 auto 2rem;
}
.page-cta .btn-primary {
  background: var(--gold-500);
  color: var(--navy-950);
  padding: 16px 32px;
  border-radius: 6px;
  font-weight: 600;
  transition: background var(--motion-med) var(--ease-out-quart),
              transform var(--motion-fast) var(--ease-out-quart),
              box-shadow var(--motion-med) var(--ease-out-quart);
}
.page-cta .btn-primary:hover {
  background: var(--gold-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}

/* --- Buttons everywhere, consistent treatment --- */
.btn { transition: background var(--motion-med) var(--ease-out-quart),
                   color var(--motion-med) var(--ease-out-quart),
                   transform var(--motion-fast) var(--ease-out-quart),
                   box-shadow var(--motion-med) var(--ease-out-quart),
                   border-color var(--motion-med) var(--ease-out-quart); }

/* --- Site footer refinement --- */
.site-footer {
  background:
    radial-gradient(50% 40% at 100% 100%, rgba(201, 169, 97, 0.08), transparent 60%),
    var(--navy-950);
  color: rgba(255, 255, 255, 0.72);
  padding: clamp(56px, 8vw, 88px) 0 clamp(24px, 3vw, 32px);
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
  opacity: 0.3;
}
.site-footer h4 {
  color: var(--neutral-0);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.site-footer a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color var(--motion-fast) ease;
}
.site-footer a:hover { color: var(--gold-500); }
.site-footer .logo-text { color: var(--neutral-0); }
.site-footer .logo-text-2 { color: var(--gold-500); }
.site-footer .footer-meta {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
}

/* ============================================================
   Scroll-reveal animations (respect reduced motion)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity var(--motion-slow) var(--ease-out-expo),
      transform var(--motion-slow) var(--ease-out-expo);
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  /* Stagger via custom property if set inline */
  .reveal[style*="--reveal-delay"] {
    transition-delay: var(--reveal-delay, 0ms);
  }
}