/* ============================================================
   Elevated home page — LOGO THEME (black + electric blue + fire)
   Switched 2026-05-09 from Pearl Iconic Trio to logo colors per Gil:
   "lets try the colors from my logo. Just the colors from my logo.
    Black, blue, and fire"
   Pearl trio variables remain defined for reversibility — only the
   token remapping at the bottom of :root changed.
   ============================================================ */

/* === Logo Theme override — applies to everything that loads elevated.css === */
:root {
  /* Logo-derived palette */
  --bg-night:        #0a0e1a;   /* near-black with subtle blue tint — main bg */
  --bg-night-deeper: #06070d;   /* deeper for accent sections */
  --bg-night-warm:   #15110a;   /* warmer near-black for fire-leaning sections */
  --bg-night-cool:   #0a1320;   /* cooler near-black for blue-leaning sections */
  --text-cream:      #f4f1e6;   /* warm off-white body text */
  --text-bright:     #ffffff;   /* pure white headlines */
  --text-muted:      rgba(244, 241, 230, 0.65);
  --fire-bright:     #f25a1c;   /* primary CTA — vivid fire orange */
  --fire-deep:       #c43e0e;   /* hover */
  --fire-ember:      #ffa030;   /* highlight / smaller accents */
  --fire-glow:       rgba(242, 90, 28, 0.28);
  --electric-blue:   #3ec0f5;   /* secondary accent / links */
  --electric-blue-deep: #2098cc;
  --blue-glow:       rgba(62, 192, 245, 0.22);
  --gold-infinity:   #d8a040;   /* tertiary — decorative gold like the infinity */
  --gold-deep-infinity: #a07820;
  --bronze-gold:     #b8843a;   /* primary CTA bronze-gold (Gil 2026-05-13) — replaces fire-bright on buttons.
                                   Contrast vs white text: 3.71:1 (PASS for large/bold ≥18px). */
  --bronze-gold-deep: #976a28;  /* hover */

  /* Remap existing tokens so all CSS that uses var(--gold), var(--bronze), etc.
     picks up the new colors without rewriting every rule */
  --base:        var(--bg-night);
  --base-alt:    var(--bg-night-deeper);
  --ink:         var(--text-cream);
  --ink-dark:    var(--bg-night-deeper);  /* DARK SURFACE — used as BG color in style.css for footer, .section-dark, .newsletter, .nav-cta, .btn-primary. Heading text color handled by the h1-h4 !important rule below. */
  --gold:        var(--fire-bright);
  --gold-deep:   var(--fire-deep);
  --bronze:      var(--electric-blue);
  --bronze-deep: var(--electric-blue-deep);
  --taupe:       var(--text-muted);
  --line:        rgba(244, 241, 230, 0.12);
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md:   0 8px 28px rgba(0, 0, 0, 0.45);
  --shadow-lg:   0 24px 70px rgba(0, 0, 0, 0.6);
}

/* Body bg fallback in case style.css's body rule wins specificity */
body { background: var(--bg-night) !important; color: var(--text-cream) !important; }
h1, h2, h3, h4 { color: var(--text-bright) !important; }
.muted, .taupe { color: var(--text-muted); }

/* ============================================================ */

/* ---------- Display typography (oversized for cinematic hero) ---------- */
.h-mega {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-size: clamp(38px, 3.8vw, 64px);     /* capped tighter so 3-col hero fits viewport */
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: inherit;
}

/* ---------- Cinematic full-bleed hero ---------- */
.hero-cinematic {
  position: relative;
  height: 92vh;
  min-height: 640px;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  color: #fff;
  display: flex;
  align-items: center;
}

/* The image (or video) layer. Slow ken-burns animation suggests motion. */
.hero-cinematic .hero-media {
  position: absolute;
  inset: 0;
  background-image: url('/images/hero-pearl.jpg');
  background-size: cover;
  background-position: center 60%;
  background-repeat: no-repeat;
  animation: kenburns 32s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenburns {
  0%   { transform: scale(1.0)  translate(0, 0); }
  100% { transform: scale(1.08) translate(-1.5%, -1.5%); }
}

/* Dark gradient overlay so white text is legible over any image area. */
.hero-cinematic .hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(21, 48, 31, 0.10) 0%, rgba(21, 48, 31, 0.25) 50%, rgba(21, 48, 31, 0.78) 100%),
    linear-gradient(90deg, rgba(21, 48, 31, 0.55) 0%, rgba(21, 48, 31, 0.12) 60%, transparent 100%);
}

.hero-cinematic .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-cinematic .eyebrow {
  color: var(--gold-infinity);
  margin-bottom: 24px;
}

.hero-cinematic .h-mega {
  color: #fff;
  margin-bottom: 28px;
  max-width: 14ch;
  text-shadow: 0 2px 24px rgba(21, 48, 31, 0.35);
}

.hero-cinematic .hero-lede {
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  max-width: 56ch;
  margin-bottom: 44px;
  font-weight: 400;
  text-shadow: 0 1px 10px rgba(21, 48, 31, 0.45);
}

.hero-cinematic .hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Scroll indicator at bottom of hero */
.hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  animation: float 2.4s ease-in-out infinite;
}
.hero-scroll::after {
  content: '';
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.55);
}
@keyframes float {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 6px); }
}

/* Mobile hero adjustments */
@media (max-width: 768px) {
  .hero-cinematic { height: 85vh; min-height: 540px; }
  .hero-cinematic .h-mega { max-width: none; }
  .hero-cinematic .hero-lede { font-size: 17px; max-width: none; }
}

/* ---------- Typographic hero (no photo, color + type only) ----------
   Used when we don't have / don't want a property photo. Pearl color palette
   carries the visual weight; serif typography carries the emotional weight.
   Gil 2026-05-09 directive: "professional, directed toward Freedom and
   Authenticity, full of hope and joy and freedom."
*/
.hero-typographic {
  position: relative;
  min-height: 0;               /* let content drive height */
  display: flex;
  align-items: center;
  padding: 90px 0 50px;        /* tight — keeps hero ~700px so next section peeks */
  background:
    linear-gradient(180deg, var(--pearl-cream) 0%, var(--pearl-cream-alt) 100%);
  overflow: hidden;
}
/* Right-side fire glow — phoenix energy radiating from the logo */
.hero-typographic::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -300px;
  width: 1300px;
  height: 1300px;
  background: radial-gradient(circle,
    rgba(242, 90, 28, 0.45) 0%,
    rgba(255, 160, 48, 0.22) 22%,
    rgba(242, 90, 28, 0.05) 50%,
    transparent 72%);
  pointer-events: none;
}
/* Left-side electric-blue glow — wing-tip energy */
.hero-typographic::after {
  content: '';
  position: absolute;
  bottom: -250px;
  left: -260px;
  width: 1000px;
  height: 1000px;
  background: radial-gradient(circle,
    rgba(62, 192, 245, 0.26) 0%,
    rgba(62, 192, 245, 0.08) 40%,
    transparent 70%);
  pointer-events: none;
}
/* Gold rule above the eyebrow — elegant brand accent (matches infinity color) */
.hero-typographic .hero-rule {
  width: 80px !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--gold-infinity) 0%, var(--fire-ember) 100%) !important;
  box-shadow: 0 0 16px rgba(216, 160, 64, 0.5);
}
.hero-typographic { background: var(--bg-night) !important; }
.hero-typographic .eyebrow {
  color: var(--gold-infinity) !important;
  letter-spacing: 0.22em;
  font-weight: 600;
}
.hero-typographic h1.h-mega { color: var(--text-bright) !important; }
.hero-typographic h1.h-mega em,
.hero-typographic h1.h-mega .gold {
  font-style: normal;
  background: linear-gradient(135deg, #f5d878 0%, var(--gold-infinity) 50%, var(--gold-deep-infinity) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero-typographic .hero-lede { color: var(--text-muted) !important; }

/* Universal: section eyebrows in gold (elegant repeating accent) */
.section-elevated .eyebrow,
.section-elevated .section-head-elevated .eyebrow {
  color: var(--gold-infinity) !important;
  font-weight: 600;
  letter-spacing: 0.18em;
}

/* Gold hairline beneath every section h2 — quiet decorative anchor */
.section-head-elevated h2 {
  position: relative;
  padding-bottom: 24px;
}
.section-head-elevated h2::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--gold-infinity) 50%, transparent 100%);
}

/* Gold accent rule above section-deep-feature top edge (replaces the fire one
   for more elegance) — overrides the fire-bright ::before from earlier */
.section-elevated.section-deep-feature::before {
  background: linear-gradient(90deg, transparent 0%, var(--gold-infinity) 50%, transparent 100%) !important;
  width: 120px !important;
  height: 2px !important;
}

/* Gold "elegant" CTA variant — alternative to the fire-orange primary
   for moments where elegance > urgency */
.btn-gold-elegant {
  background: transparent;
  color: var(--gold-infinity);
  border: 2px solid var(--gold-infinity);
  font-weight: 600;
  transition: all .25s ease;
}
.btn-gold-elegant:hover {
  background: var(--gold-infinity);
  color: var(--bg-night);
  box-shadow: 0 8px 28px rgba(216, 160, 64, 0.35);
  transform: translateY(-1px);
}

/* Footer tagline in elegant gold (overrides any prior color) */
.footer-signoff .tagline {
  color: var(--gold-infinity) !important;
  font-family: 'Fraunces', serif;
  font-style: italic;
}
.hero-typographic .container {
  position: relative;
  z-index: 2;
  max-width: 1100px;
}
.hero-typographic .hero-rule {
  width: 64px;
  height: 1px;
  background: var(--pearl-red);
  margin-bottom: 28px;
}
.hero-typographic .eyebrow {
  color: var(--gold-infinity);
  margin-bottom: 26px;
  letter-spacing: 0.22em;
  font-weight: 600;
}
.hero-typographic .h-mega {
  color: var(--text-bright);
  margin-bottom: 32px;
  max-width: 16ch;
  font-weight: 300;
}
.hero-typographic .hero-lede {
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.6;
  color: var(--ink);
  max-width: 60ch;
  margin-bottom: 44px;
}
.hero-typographic .hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
@media (max-width: 768px) {
  .hero-typographic { min-height: 78vh; padding: 130px 0 72px; }
  /* Old phoenix-positioning block REMOVED 2026-05-10 21:18 — was designed for
     the single-image hero before .hero-phoenix-wrap existed. New design (in
     the .hero-3col responsive block below) flows phoenix inline beneath text. */
  .hero-typographic h1.h-mega { max-width: none !important; }
  .hero-typographic .hero-lede { max-width: none !important; }
}
@media (max-width: 480px) {
  /* Old phoenix-as-backdrop block REMOVED — superseded by new wrap-inline design */
  .hero-typographic { padding: 110px 0 56px; min-height: 88vh; }
  .hero-typographic .container { padding: 0 20px; }
  .hero-typographic .hero-ctas { gap: 12px; }
  .hero-typographic .hero-ctas .btn { width: 100%; justify-content: center; }
}

/* ---------- Sub-page hero — DARK THEME (logo palette) ----------
   Was using --pearl-cream + --pearl-green-deep directly which kept it light
   even after the logo-theme switch. Fixed 2026-05-10 — sub-page headers
   now match the rest of the site. */
.page-hero {
  position: relative;
  padding: 180px 0 88px;  /* big top padding clears the fixed elevated nav */
  background: var(--bg-night);
  border-bottom: 1px solid rgba(216, 160, 64, 0.18);
  overflow: hidden;
}
/* Right-side fire glow */
.page-hero::before {
  content: '';
  position: absolute;
  top: -150px; right: -150px;
  width: 800px; height: 800px;
  background: radial-gradient(circle,
    rgba(242, 90, 28, 0.30) 0%,
    rgba(255, 160, 48, 0.10) 30%,
    transparent 65%);
  pointer-events: none;
}
/* Left-side electric-blue glow */
.page-hero::after {
  content: '';
  position: absolute;
  bottom: -120px; left: -120px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(62, 192, 245, 0.18) 0%, transparent 65%);
  pointer-events: none;
}
.page-hero .container {
  position: relative;
  z-index: 2;
  max-width: 920px;
}
.page-hero .eyebrow {
  color: var(--gold-infinity) !important;
  margin-bottom: 18px;
  letter-spacing: 0.18em;
  font-weight: 600;
}
.page-hero .h-mega-sm {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #fff !important;
  margin-bottom: 22px;
  max-width: 18ch;
  text-shadow: 0 2px 16px rgba(21, 48, 31, 0.4);
}
.page-hero .page-hero-lede {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 56ch;
  margin: 0;
}
.page-hero .muted, .page-hero .muted a {
  color: var(--text-muted);
}
@media (max-width: 768px) {
  .page-hero { padding: 140px 0 60px; }
}

/* ---------- Pull quote (refined, no big quotation mark) ---------- */
.pull-quote {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  padding: 0 24px;
}
.pull-quote::before, .pull-quote::after {
  content: '';
  display: block;
  width: 56px;
  height: 1px;
  background: var(--pearl-yellow);
  margin: 0 auto;
}
.pull-quote::before { margin-bottom: 36px; }
.pull-quote::after  { margin-top: 36px; }
.pull-quote p {
  font-family: 'Fraunces', serif;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.4;
  color: var(--text-bright);
  margin-bottom: 24px;
}
.pull-quote .cite {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-infinity);
  font-weight: 500;
}

/* ---------- Long-form prose body (about page, manifesto, blog) ---------- */
.prose {
  max-width: 720px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink);
}
.prose h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 64px 0 28px;
  color: var(--text-bright);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: 'Fraunces', serif;
  font-size: 24px;
  font-weight: 500;
  margin: 40px 0 18px;
  color: var(--text-bright);
}
.prose p { margin-bottom: 24px; }
.prose p:last-child { margin-bottom: 0; }
.prose em { font-style: italic; color: var(--text-bright); }
.prose .divider-rule {
  height: 1px;
  width: 80px;
  background: var(--pearl-yellow);
  border: 0;
  margin: 56px auto;
}

/* ---------- Pearl Red CTA button — REMAPPED to bronze-gold (Gil 2026-05-13 23:21) ---------- */
.btn-pearl-red {
  background: var(--bronze-gold);
  color: #fff;
  border: 2px solid transparent;
}
.btn-pearl-red:hover {
  background: var(--bronze-gold-deep);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Pearl Yellow CTA — also REMAPPED to bronze-gold so all CTAs unify */
.btn-pearl-yellow {
  background: var(--bronze-gold);
  color: #fff;
  border: 2px solid transparent;
  font-weight: 600;
}
.btn-pearl-yellow:hover {
  background: var(--bronze-gold-deep);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* "Outline on dark" button variant for hero */
.btn-outline-light {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.7);
}
/* Hover: fill with bronze-gold + white text (instead of white-on-white invisibility bug). Gil 2026-05-14 17:29 */
.btn-outline-light:hover {
  background: var(--bronze-gold);
  color: #fff;
  border-color: var(--bronze-gold);
}

/* ---------- Sticky transparent nav with scroll-state solid ---------- */
.nav-elevated {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background .35s ease, backdrop-filter .35s ease, border-color .35s ease;
}
.nav-elevated.is-scrolled {
  background: rgba(250, 246, 236, 0.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line);
}
.nav-elevated .nav-brand,
.nav-elevated .nav-links a {
  color: #fff;
  text-shadow: 0 1px 6px rgba(21, 48, 31, 0.35);
  transition: color .25s, text-shadow .25s;
}
.nav-elevated.is-scrolled .nav-brand,
.nav-elevated.is-scrolled .nav-links a {
  color: var(--text-bright);
  text-shadow: none;
}
.nav-elevated .nav-links a:hover {
  color: var(--gold-infinity);
}
.nav-elevated.is-scrolled .nav-links a:hover {
  color: var(--gold-infinity);
}
.nav-elevated .nav-burger span,
.nav-elevated .nav-burger span::before,
.nav-elevated .nav-burger span::after {
  background: #fff;
}
.nav-elevated.is-scrolled .nav-burger span,
.nav-elevated.is-scrolled .nav-burger span::before,
.nav-elevated.is-scrolled .nav-burger span::after {
  background: var(--pearl-green-deep);
}

/* ---------- Sections — generous padding, more breathing ---------- */
.section-elevated {
  padding: 140px 0;
}
/* All section variants now alternate dark variations for the logo theme */
.section-elevated { background: var(--bg-night); color: var(--text-cream); }
.section-elevated.section-cream {
  background: var(--bg-night-deeper);
}
/* "Pearl yellow" class kept for HTML compat — now fire-tinted dark instead */
.section-elevated.section-pearl-yellow {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(242, 90, 28, 0.10) 0%, transparent 60%),
    var(--bg-night-warm);
}
/* "Pearl green tint" class kept for compat — now blue-tinted dark */
.section-elevated.section-pearl-green-tint {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(62, 192, 245, 0.08) 0%, transparent 55%),
    var(--bg-night-cool);
}
.section-elevated.section-deep {
  background: var(--bg-night-deeper);
  color: var(--text-cream);
}
/* Deep feature section — fire-on-night dramatic moment */
.section-elevated.section-deep-feature {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(242, 90, 28, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(62, 192, 245, 0.12) 0%, transparent 50%),
    linear-gradient(180deg, var(--bg-night) 0%, var(--bg-night-deeper) 100%);
  color: var(--text-cream);
  position: relative;
  overflow: hidden;
}
.section-elevated.section-deep-feature::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 80px;
  height: 4px;
  background: var(--fire-bright);
  transform: translateX(-50%);
}
.section-elevated.section-deep-feature h1,
.section-elevated.section-deep-feature h2,
.section-elevated.section-deep-feature h3 {
  color: #fff;
}
.section-elevated.section-deep-feature .eyebrow {
  color: var(--gold-infinity);
}
.section-elevated.section-deep-feature .lede {
  color: rgba(255, 255, 255, 0.85);
}
.section-elevated.section-deep-feature .btn-outline {
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}
.section-elevated.section-deep-feature .btn-outline:hover {
  background: var(--pearl-yellow);
  color: var(--text-bright);
  border-color: var(--gold-infinity);
}
.section-elevated.section-deep h1,
.section-elevated.section-deep h2,
.section-elevated.section-deep h3 {
  color: #fff;
}
.section-elevated.section-deep .eyebrow {
  color: var(--gold-infinity);
}
@media (max-width: 768px) {
  .section-elevated { padding: 88px 0; }
}

/* ---------- Section heads — centered + roomier ---------- */
.section-head-elevated {
  max-width: 720px;
  margin: 0 auto 80px;
  text-align: center;
}
.section-head-elevated .eyebrow {
  margin-bottom: 18px;
}
.section-head-elevated h2 {
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 22px;
}
.section-head-elevated .lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 56ch;
  margin: 0 auto;
}

/* ---------- Three Doors — refined: less cardy, more typographic ---------- */
.doors-elevated {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}
.door-clean {
  text-align: left;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
}
.door-clean .door-num {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-infinity);
  margin-bottom: 14px;
}
.door-clean h3 {
  font-family: 'Fraunces', serif;
  font-size: 38px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-bottom: 18px;
  color: var(--text-bright);
}
.door-clean p {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.65;
  flex: 1;
  margin-bottom: 24px;
}
.door-clean .door-link {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-bright);
  border-bottom: 1px solid var(--pearl-yellow);
  padding-bottom: 6px;
  width: max-content;
  transition: color .2s, border-color .2s;
}
.door-clean .door-link:hover {
  color: var(--gold-infinity);
  border-color: var(--gold-infinity);
}
@media (max-width: 900px) {
  .doors-elevated { grid-template-columns: 1fr; gap: 56px; }
}

/* ---------- The Promise — typographic-only section ---------- */
.promise {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.promise h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(34px, 4.5vw, 56px);
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 18px 0 34px;
  color: var(--text-bright);
}
.promise .lede {
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 36px;
}

/* ---------- Books — flexbox so each cover renders at NATURAL aspect ratio ----------
   IMPORTANT: prior grid-with-fixed-columns approach was squishing covers horizontally
   (Chrome MCP confirmed: 625x1000 source rendered at 260x520 — wrong aspect ratio).
   Flexbox + flex:0 0 auto + width:auto on the img lets each cover take its natural
   width determined by (naturalWidth / naturalHeight * 520px height). No squishing.
*/
.book-row-elevated {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 72px;
  padding: 48px 0 72px;
  position: relative;
}
/* Soft "polished display surface" hairline beneath the row — subtle yellow gradient. */
.book-row-elevated::after {
  content: '';
  position: absolute;
  left: 6%; right: 6%;
  bottom: 56px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(236, 213, 132, 0.55) 22%,
    rgba(236, 213, 132, 0.55) 78%,
    transparent 100%);
  pointer-events: none;
}
.book-elevated {
  flex: 0 0 auto;            /* don't grow, don't shrink, take natural content width */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.book-elevated .book-cover {
  /* IMPORTANT: explicitly override style.css .book-cover rule which sets
     max-width: 260px, overflow: hidden, aspect-ratio: 2/3 — those were clipping
     the image after we removed the squish-bug. Reset them all. */
  max-width: none;
  width: auto;
  aspect-ratio: auto;
  overflow: visible;
  margin: 0 0 40px;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
  transform-origin: bottom center;
  will-change: transform;
  display: block;
  border-radius: 0;       /* reset — image itself has the radius */
  box-shadow: none;       /* reset — image itself has the shadow */
}
.book-elevated:hover .book-cover {
  transform: translateY(-14px) scale(1.04);
}
.book-elevated .book-cover img {
  height: 520px;             /* fixed height, all three books same height */
  width: auto;               /* width determined by image aspect ratio — NO squishing */
  max-width: none;           /* explicitly NO max-width constraint */
  display: block;
  border-radius: 4px;
  box-shadow:
    0 32px 54px rgba(21, 48, 31, 0.32),
    0 14px 26px rgba(21, 48, 31, 0.18),
    0 5px 10px rgba(21, 48, 31, 0.10);
  transition: box-shadow .5s ease;
}
.book-elevated:hover .book-cover img {
  box-shadow:
    0 42px 70px rgba(21, 48, 31, 0.38),
    0 18px 32px rgba(21, 48, 31, 0.22),
    0 7px 14px rgba(21, 48, 31, 0.12);
}
.book-elevated h3 {
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  color: var(--text-bright);
}
.book-elevated .book-meta {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-infinity);
  font-weight: 500;
}
.badge-forthcoming-elevated {
  display: inline-block;
  background: var(--pearl-yellow);
  color: var(--text-bright);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 5px 12px;
  border-radius: 12px;
  text-transform: uppercase;
}
@media (max-width: 1100px) {
  .book-elevated .book-cover img { height: 420px; }
}
@media (max-width: 900px) {
  .book-row-elevated { gap: 48px; padding-bottom: 48px; }
  .book-elevated .book-cover img { height: 380px; }
}
@media (max-width: 600px) {
  .book-row-elevated { gap: 56px; }
  .book-elevated .book-cover img { height: 340px; }
}
.book-elevated h3 {
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  color: var(--text-bright);
}
.book-elevated .book-meta {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-infinity);
  font-weight: 500;
}
.badge-forthcoming-elevated {
  display: inline-block;
  background: var(--pearl-yellow);
  color: var(--text-bright);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 5px 12px;
  border-radius: 12px;
  text-transform: uppercase;
}
@media (max-width: 900px) { .book-row-elevated { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
@media (max-width: 600px) { .book-row-elevated { grid-template-columns: 1fr; } }

/* ---------- Testimonials — clean, no giant quote marks ---------- */
.testimonial-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}
.testimonial-clean {
  display: flex;
  flex-direction: column;
  padding-top: 28px;
  border-top: 1px solid var(--pearl-yellow);
}
.testimonial-clean p {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-bright);
  font-weight: 300;
  margin-bottom: 24px;
  flex: 1;
}
.testimonial-clean .cite {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-infinity);
  font-weight: 500;
}
.testimonial-clean .cite em {
  font-style: italic;
  color: var(--text-bright);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
@media (max-width: 900px) { .testimonial-row { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Events — cleaner row design ---------- */
.event-row-elevated {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 40px;
  padding: 36px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.event-row-elevated:last-child { border-bottom: 0; }
.event-row-elevated .event-date {
  font-family: 'Fraunces', serif;
}
.event-row-elevated .event-date .dow {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-infinity);
  font-weight: 600;
  margin-bottom: 6px;
}
.event-row-elevated .event-date .day {
  font-size: 44px;
  line-height: 1;
  color: var(--text-bright);
  font-weight: 400;
}
.event-row-elevated .event-date .time {
  font-size: 14px;
  color: var(--taupe);
  margin-top: 4px;
}
.event-row-elevated .event-body h3 {
  font-family: 'Fraunces', serif;
  font-size: 26px;
  font-weight: 400;
  margin-bottom: 6px;
  color: var(--text-bright);
}
.event-row-elevated .event-body p {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 700px) {
  .event-row-elevated { grid-template-columns: 80px 1fr; gap: 20px; padding: 28px 0; }
  .event-row-elevated .btn { grid-column: 2; justify-self: start; margin-top: 12px; }
  .event-row-elevated .event-date .day { font-size: 32px; }
}

/* ---------- Newsletter block on deep green ---------- */
.newsletter-elevated {
  background: var(--pearl-green);
  color: rgba(255, 255, 255, 0.92);
  padding: 96px 48px;
  border-radius: var(--radius-lg);
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.newsletter-elevated::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(236, 213, 132, 0.18) 0%, transparent 60%);
}
.newsletter-elevated .eyebrow {
  color: var(--gold-infinity);
  position: relative;
}
.newsletter-elevated h2 {
  color: #fff;
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(30px, 3.6vw, 44px);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-bottom: 18px;
  position: relative;
}
.newsletter-elevated p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 17px;
  line-height: 1.65;
  max-width: 540px;
  margin: 0 auto 36px;
  position: relative;
}
.newsletter-elevated .newsletter-form {
  display: flex;
  gap: 12px;
  max-width: 520px;
  margin: 0 auto;
  position: relative;
}
.newsletter-elevated .newsletter-form input {
  flex: 1;
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  border: 0;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--text-bright);
  font-family: inherit;
}
.newsletter-elevated .newsletter-form input:focus {
  outline: 2px solid var(--pearl-yellow);
  outline-offset: 2px;
}
.newsletter-elevated #substack-status {
  color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 640px) {
  .newsletter-elevated { padding: 64px 28px; }
  .newsletter-elevated .newsletter-form { flex-direction: column; }
}

/* ---------- Footer (deep pearl-green) — same .footer rules apply,
   the variable remap from style.css already handles this. */

/* ---------- Scroll-fade reveals ---------- */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s ease-out, transform .9s ease-out;
  will-change: opacity, transform;
}
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
  .hero-cinematic .hero-media { animation: none; transform: scale(1.04); }
  .hero-scroll { animation: none; }
}

/* ============================================================
   Contrast fixes — added 2026-05-10 after WCAG audit
   ============================================================ */

/* .btn-pearl-yellow uses light yellow bg — text must be dark for contrast.
   The Pearl-trio sed pass over-broadened text colors to white; here we
   restore dark text on light-yellow buttons + the Forthcoming badge. */
/* Updated 2026-05-13 23:21 — bg is now bronze-gold, white text matches site-wide CTA convention */
.btn-pearl-yellow,
.btn-pearl-yellow:link,
.btn-pearl-yellow:visited {
  color: #fff !important;
  font-weight: 700 !important;
}
.btn-pearl-yellow:hover {
  color: #fff !important;
}
.badge-forthcoming-elevated {
  color: #0a0e1a !important;
  font-weight: 700;
}

/* Fire-bright primary CTA — white text on fire-orange is only 3.36:1, fails 4.5
   WCAG AA for normal text at any practical size. Switching CTA text to near-black
   on fire (#1a0a05 on #f25a1c = ~5.0:1) — passes AA cleanly, keeps the iconic fire
   color, and the contrast actually makes the CTA more readable on every screen. */
.btn-lg {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}
/* Force dark text on any fire-bright background, regardless of inline styles */
.btn[style*="--fire-bright"],
.btn[style*="rgb(242, 90, 28)"],
.btn[style*="#f25a1c"] {
  color: #1a0a05 !important;
}
/* Same for the .btn-pearl-red class which we remapped earlier — those buttons
   may still exist with white text on red bg */
.btn-pearl-red {
  color: #fff !important;       /* on pearl-red (#BB3A2E) original = ~5.4:1, OK */
}

/* Newsletter section eyebrow — gold on Pearl-green forest bg = 4.28 (1pt short of 4.5).
   Switch to fire-ember (brighter) for a clean pass. */
.newsletter-elevated .eyebrow {
  color: var(--fire-ember) !important;
}

/* ============================================================
   3-column hero (headshot | text | phoenix)
   Added 2026-05-10 per Gil: "Can you have the edges of the image fade in
   so there is not harsh line. make it elegant. Then put my head shot to
   the left of the text."
   ============================================================ */

.hero-3col { overflow: hidden; position: relative; }

/* Phoenix on the right — TIGHTER edge-fade so it appears to emerge from the dark
   instead of sitting in a rectangle. Per Gil 2026-05-10: "fade the edges of the
   Phoenix a bit more." */
.hero-3col .hero-phoenix {
  position: absolute;
  right: -239px;            /* center of phoenix sits between text-right and screen-right */
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  height: auto;
  max-height: 560px;
  max-width: 840px;
  width: auto;
  opacity: 0.96;
  pointer-events: none;
  z-index: 1;
  /* Wider mask ellipse for the landscape image (52% × 60% — wider horizontal radius
     so the dense central body of the phoenix stays opaque). Vertical radius 60%
     extends slightly past image bounds — fine for landscape since top/bottom edges
     have less visual content to fade. */
  -webkit-mask-image: radial-gradient(ellipse 52% 60% at 50% 50%,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 35%,
    rgba(0,0,0,0.78) 55%,
    rgba(0,0,0,0.32) 75%,
    transparent 92%);
  mask-image: radial-gradient(ellipse 52% 60% at 50% 50%,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 35%,
    rgba(0,0,0,0.78) 55%,
    rgba(0,0,0,0.32) 75%,
    transparent 92%);
  filter:
    drop-shadow(0 0 60px rgba(242, 90, 28, 0.35))
    drop-shadow(0 0 30px rgba(216, 160, 64, 0.18));
}

/* Inner 3-column grid — true 3-column layout (Gil 2026-05-14):
   [ headshot ] [ text ] [ phoenix ]
   - Each column gets centered content
   - Text column is constrained-width and viewport-centered
   - Headshot centers in left third (between viewport-left and text)
   - Phoenix centers in right third (between text and viewport-right) */
.hero-3col-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr minmax(380px, 500px) 1fr;
  gap: 24px;
  align-items: center;
  max-width: 100% !important;       /* fill viewport so headshot/phoenix anchor to viewport edges */
  padding-left: 24px;
  padding-right: 24px;
}

/* Headshot left — TRANSPARENT PNG (tightly cropped to silhouette).
   align-self: center so its vertical center matches the phoenix's vertical center.
   margin-left: -90px so it sits centered between viewport-left and the text column. */
.hero-3col .hero-headshot {
  width: 100%;
  max-width: 480px;
  height: auto;
  display: block;
  align-self: center;
  margin-left: -90px;
  filter:
    drop-shadow(0 0 45px rgba(216, 160, 64, 0.22))
    drop-shadow(0 0 22px rgba(242, 90, 28, 0.12))
    drop-shadow(0 16px 36px rgba(0, 0, 0, 0.55));
}

.hero-3col .hero-3col-text { min-width: 0; }

/* (Removed 2026-05-14: translateX(-69) viewport-centering hack no longer needed —
   true 3-column grid with 1fr | text | 1fr columns centers naturally.) */

/* Tablet — headshot smaller, gap tighter */
@media (max-width: 1100px) {
  .hero-3col-inner {
    grid-template-columns: minmax(150px, 220px) 1fr;
    gap: 40px;
    padding-right: clamp(200px, 30vw, 380px);
  }
  .hero-3col .hero-phoenix { right: -100px; height: 80%; }
}

/* Tablet portrait — headshot above text, phoenix becomes faint backdrop */
@media (max-width: 768px) {
  .hero-3col-inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-right: 0;
    text-align: center;
  }
  .hero-3col .hero-headshot {
    max-width: 200px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;            /* square crop on mobile for tighter portrait */
    object-position: 50% 25%;
  }
  .hero-3col .hero-phoenix {
    height: auto;
    width: 70%;
    max-width: 360px;
    right: -15%;
    opacity: 0.30;
  }
  .hero-3col .hero-rule { margin-left: auto; margin-right: auto; }
  .hero-3col .hero-ctas { justify-content: center; }
}

/* Phone — even tighter, phoenix barely visible behind */
@media (max-width: 480px) {
  .hero-3col-inner { padding: 0 16px; gap: 22px; }
  .hero-3col .hero-headshot { max-width: 150px; }
  .hero-3col .hero-phoenix {
    width: 95%;
    max-width: 320px;
    right: -25%;
    opacity: 0.18;
  }
  .hero-3col .hero-ctas { flex-direction: column; }
  .hero-3col .hero-ctas .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   Pre-walk audit fixes (proactive sweep 2026-05-10)
   ============================================================ */

/* .btn-outline was inheriting --ink-dark for text/border which is now a DARK
   color (correct for bg uses), but as text/border on dark sections it was
   invisible. Force cream text + cream border on dark theme. */
.btn-outline {
  color: var(--text-cream) !important;
  border-color: rgba(244, 241, 230, 0.7) !important;
  background: transparent !important;
}
.btn-outline:hover {
  background: var(--text-cream) !important;
  color: var(--bg-night-deeper) !important;
  border-color: var(--text-cream) !important;
}

/* Small testimonial citations + small accent labels — gold-infinity at 13px on
   dark hits ~3.45 contrast, fails 4.5 normal-text. Bump to fire-ember for ~5:1. */
.book-elevated .book-meta,
.testimonial-clean .cite,
.book-quote .cite,
.event-row-elevated .event-date .dow {
  color: var(--fire-ember) !important;
}

/* ============================================================
   v=41 changes (Gil 2026-05-10):
   • Replace text "Gil Hodges" in nav with logo image
   • Add "Gil Hodges" name caption under hero headshot
   • Center text column content
   • Add "Rise without End / Live without Limits" tagline under phoenix
   ============================================================ */

/* Logo in nav — replace text. Higher specificity to beat .nav-brand img (style.css). */
.nav-brand img.nav-brand-logo {
  height: 88px;          /* +30% from 68 (was 52) — Gil 2026-05-10 21:06 */
  width: auto;
  display: block;
  margin-left: 0;        /* RESET — Gil 2026-05-14: 'logo' meant Phoenix, not nav script */
  /* Script logo needs presence — not a tiny favicon */
}
/* Give nav vertical breathing room so the bigger logo isn't crammed against the edges.
   Override style.css's fixed `.nav-inner { height: 72px }` (border-box clamps logo). */
.nav-elevated .nav-inner {
  height: auto;
  min-height: 72px;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* ============================================================
   NAV SCROLLED-STATE FIX — Gil 2026-05-10 21:10
   The base `.nav { background: rgba(250,246,236,0.94) }` is a
   leftover from the original cream-theme. When the user lands
   on a page with a hash like /events.html#gathering, the
   JS adds `is-scrolled` and the nav reveals that cream bg —
   making the white logo + white nav links invisible.
   Fix: override both initial AND scrolled background on
   elevated pages so they match the dark theme. White text +
   white logo now stay readable in every state.
   Specificity: 0,2,0 beats `.nav { ... }` (0,1,0).
   ============================================================ */
.nav-elevated,
.nav-elevated.is-scrolled {
  background: rgba(10, 14, 26, 0.88);          /* night, 88% opaque */
  border-bottom: 1px solid rgba(216, 160, 64, 0.20);  /* gold hairline */
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
/* Scrolled link/brand color — keep white (style.css sets text-bright which we want white here) */
.nav-elevated.is-scrolled .nav-brand,
.nav-elevated.is-scrolled .nav-links a {
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

/* Headshot wrapper — sits in column 1 (left third), centered horizontally + vertically.
   Order: 1 (left). DOM order is [headshot, phoenix, text] but visual order is set via grid order. */
.hero-3col .hero-headshot-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  justify-self: center;        /* center in column 1 */
  order: 1;
}
.hero-3col .hero-headshot {
  margin-left: 0;            /* override — wrapper now handles the shift */
}
.hero-3col .hero-headshot-name {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-style: italic;
  font-size: 28px;
  color: var(--gold-infinity);
  margin-top: 12px;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* Phoenix wrapper — sits in column 3 (right third), centered horizontally + vertically.
   Order: 3 (rightmost). NOT absolute anymore — flows in the grid. (Gil 2026-05-14) */
.hero-3col .hero-phoenix-wrap {
  position: static;
  right: auto;
  top: auto;
  transform: none;
  pointer-events: none;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: center;        /* center in column 3 */
  align-self: center;
  order: 3;
}
/* Constrain phoenix to fit its column without overflowing — was max-width 840 */
.hero-3col .hero-phoenix {
  position: static;
  right: auto;
  top: auto;
  transform: none;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 560px;
}
.hero-3col .hero-phoenix-tagline {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 24px);
  color: var(--gold-infinity);
  margin-top: 18px;
  text-align: center;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   START HERE quick-path picker (Gil 2026-05-14)
   3-up grid of "I want X" → "Action" cards
   ============================================================ */
.start-here-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}
.start-here-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 24px;
  background: var(--bg-night-deeper);
  border: 1px solid rgba(216, 160, 64, 0.18);
  border-radius: var(--radius-md);
  text-align: center;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.start-here-card:hover {
  border-color: rgba(216, 160, 64, 0.50);
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}
.start-here-want {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--text-cream);
  line-height: 1.4;
}
.start-here-action {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--gold-infinity);
  text-transform: uppercase;
}
.start-here-action .arrow {
  display: inline-block;
  margin-left: 4px;
  transition: transform .25s;
}
.start-here-card:hover .start-here-action .arrow {
  transform: translateX(4px);
}
@media (max-width: 800px) {
  .start-here-grid { grid-template-columns: 1fr; gap: 16px; }
  .start-here-card { padding: 22px 20px; }
}

/* Center text column content + grid order: text goes in middle column.
   DOM order is [headshot, phoenix, text] but visual order via CSS grid order is
   [headshot:1, text:2, phoenix:3]. */
.hero-3col .hero-3col-text {
  text-align: center;
  order: 2;
  justify-self: center;
  align-self: center;
}
.hero-3col .hero-3col-text .hero-rule {
  margin-left: auto;
  margin-right: auto;
}
.hero-3col .hero-3col-text .hero-ctas {
  justify-content: center;
}
.hero-3col .hero-3col-text .hero-lede {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   RESPONSIVE OVERRIDES for the new headshot/phoenix wrappers
   Gil 2026-05-10 21:16 — phone + tablet symmetry pass
   ============================================================
   Desktop layout (above 1100px) puts headshot + name on the
   left, text in the middle, phoenix + tagline absolute on the
   right. Below 1100px we collapse to a centered vertical stack
   so the symmetry stays clean and nothing clips.
   ============================================================ */

/* Tablet landscape (≤1100px): collapse to single column, stack vertically.
   Vertical order on mobile/tablet: headshot+name → text → phoenix+tagline
   (DOM order is wrap-headshot, wrap-phoenix, text — so we use `order` to swap). */
@media (max-width: 1100px) {
  .hero-3col-inner {
    grid-template-columns: 1fr !important;
    padding-right: 24px !important;
    padding-left: 24px;
    gap: 32px;
    text-align: center;
  }
  /* Reorder: headshot first, text second, phoenix last */
  .hero-3col .hero-headshot-wrap { order: 1; }
  .hero-3col .hero-3col-text     { order: 2; }
  .hero-3col .hero-phoenix-wrap  { order: 3; }

  /* Headshot wrap — center, drop the negative margin */
  .hero-3col .hero-headshot-wrap {
    margin-left: 0;
    align-self: center;
  }
  /* Headshot itself — UNDO the old `.hero-3col .hero-headshot` mobile rule that
     forced aspect-ratio:1/1 + object-position:50% 25% (cropping the top of the
     head). Let the cropped PNG render at natural aspect. */
  .hero-3col .hero-headshot {
    max-width: 320px;
    margin: 0 auto;
    aspect-ratio: auto;
    object-position: center center;
    object-fit: contain;
  }
  /* Phoenix wrap — flow inline below text instead of absolute right */
  .hero-3col .hero-phoenix-wrap {
    position: static;
    right: auto;
    top: auto;
    transform: none;
    margin: 0 auto;
  }
  .hero-3col .hero-phoenix {
    width: 100%;
    max-width: 480px;
    height: auto;
    max-height: none;
    margin: 0 auto;
    opacity: 1;          /* full opacity — phoenix is now a feature, not a backdrop */
  }
}

/* Tablet portrait + small landscape (≤768px) — tighten sizes */
@media (max-width: 768px) {
  .hero-3col-inner {
    gap: 28px;
  }
  .hero-3col .hero-headshot {
    max-width: 260px;
  }
  .hero-3col .hero-headshot-name {
    font-size: 24px;
    margin-top: 10px;
  }
  .hero-3col .hero-phoenix {
    max-width: 400px;
  }
  .hero-3col .hero-phoenix-tagline {
    font-size: 18px;
    margin-top: 14px;
  }
}

/* Phone (≤480px) — even tighter, more compact stack */
@media (max-width: 480px) {
  .hero-3col-inner {
    gap: 22px;
    padding-left: 18px;
    padding-right: 18px !important;
  }
  .hero-3col .hero-headshot {
    max-width: 200px;
  }
  .hero-3col .hero-headshot-name {
    font-size: 21px;
    margin-top: 8px;
  }
  .hero-3col .hero-phoenix {
    max-width: 320px;
  }
  .hero-3col .hero-phoenix-tagline {
    font-size: 16px;
    margin-top: 10px;
    line-height: 1.4;
  }
}

/* ============================================================
   Anchor scroll offset for sticky nav — Gil 2026-05-11 22:05
   When clicking /events.html#meditation (etc.) the browser scrolls
   so the target sits at viewport top — but the sticky nav (~110px)
   covers it. scroll-margin-top reserves clearance so the row title
   lands JUST below the nav with a small breathing gap.
   ============================================================ */
.event-row-elevated {
  scroll-margin-top: 130px;
}