/* ==========================================================================
   HOME PAGE — page-specific overrides
   ========================================================================== */

body.page-home {
  --color-accent: var(--color-accent-plum);
  --color-accent-deep: var(--color-accent-plum-deep);
  --color-accent-tint: var(--color-plum-tint);
}

.page-home .btn--secondary {
  color: #fff;
  border-color: #fff;
  background-color: #3d1a39;
}

.page-home .btn--secondary:hover {
  color: var(--color-accent-plum-deep);
  border-color: var(--color-accent-plum-deep);
  background-color: var(--color-blush);
}

/* /* .page-home .hero .btn--primary {
  background-color: #B5522E;
  color: var(--color-paper);
  border-color: #B5522E;
} 
.page-home .hero .btn--primary:hover {
  background-color: #fff;
  border-color: var(--color-accent-plum);
  color: #b5522e;
} */

.page-home .site-nav__brand:hover,
.page-home .nav-link:hover,
.page-home .nav-link[aria-current="page"] {
  color: #ffffff;
}

.page-home .site-nav .btn--secondary {
  color: #ffffff;
  border-color: rgb(227, 221, 221) 1px !important;
  background-color: transparent;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);

}

.page-home .site-nav .btn--secondary:hover {
  color: #ffffff;
  border-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.14);
}
.page-home .site-nav {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
}

.page-home .hero {
  padding-top: calc(var(--space-9) + 4.5rem);
  padding-bottom: var(--space-10);
}
/* .page-home .finale .btn--primary {
  background-color: var(--color-paper-raised);
  color: var(--color-accent-plum);
  border-color: var(--color-paper-raised);
  box-shadow: inset 0 0 0 2px rgba(59, 33, 56, 0.3);
}

.page-home .finale .btn--primary:hover {
  background-color: var(--color-paper);
  color: var(--color-accent-plum-deep);
  border-color: var(--color-paper);
} */

@media (max-width: 767px) {
  .page-home .hero {
    padding-top: var(--space-9);
    padding-bottom: var(--space-9);
  }
}

/* ------------------------------------------------------------------------
   SHARED READING RHYTHM (.prose + .whisper)
   Used across Sections 2, 3, 4, 5, and the Hero. This is the base scale —
   individual sections below override spacing via a scoped selector
   (e.g. `.hero .whisper`, `.circumstances-section .whisper`) rather than
   redefining the class, so there is exactly ONE definition of what
   `.whisper` fundamentally means.
   ------------------------------------------------------------------------ */

.prose > p {
  margin-top: var(--space-4);
}

.prose > p:first-child {
  margin-top: 0;
}

.whisper {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--color-gold-deep);
  margin-top: var(--space-5) !important;
  margin-bottom: var(--space-2);
}

@media (max-width: 767px) {
  .whisper {
    font-size: var(--text-md);
    line-height: var(--leading-snug);
    margin-bottom: var(--space-1);
  }
}

.whisper + .whisper {
  margin-top: var(--space-2) !important;
}

/* NOTE: previously this rule also carried a stray `margin-bottom` —
   removed. A plain paragraph following a whisper line only needs its
   own top-margin controlled; adding a bottom-margin here fought the
   top-margin-only spacing convention the whole system relies on. */
.whisper + p:not(.whisper) {
  margin-top: var(--space-5) !important;
  font-size: var(--text-sm);
}


/* ------------------------------------------------------------------------
   SECTION 1 — HERO
   Tighter rhythm than the body sections below (space-3/space-5 instead
   of space-4/space-7) — the Hero is denser and more compact by design,
   it's the "held breath" at the threshold, not a full reading passage.
   ------------------------------------------------------------------------ */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
   padding-block: var(--space-9);
  /* Subtle contrast — a faint warm glow behind the visual (right) so
     the plum backdrop isn't flat. Quiet, not glassmorphism. */
    background: linear-gradient(
        180deg,
        #3d1a39 0%,
        #290924 45%,
        #130d15 80%,
        #080606 100%
    );
}



@media (min-width: 1024px) {
  .hero {
    padding-block: var(--space-8);
  }
}

.hero__headline {
  font-size: 60px;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  max-width: 18ch;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
@media (max-width: 767px) {
  .hero__headline {
    font-size: 2rem;
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-normal);
    max-width: 100%;
  }
}

.hero__body {
  margin-top: var(--space-5);
}

.hero__body .lead {
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.18rem);
  line-height: var(--leading-normal);
}

.hero__body > p {
  margin-top: var(--space-3);
}

.hero__body > p:first-child {
  margin-top: 0;
}

/* Hero-scoped override of the shared .whisper — same class as every
   other section now, just tighter spacing values.
   ⚠️ Requires markup change: any `class="hero__whisper"` in the Hero
   HTML should become `class="whisper"`. */
.hero__body .whisper {
  margin-top: var(--space-5) !important;
  margin-bottom: var(--space-1);
}

.hero__body .whisper + .whisper {
  margin-top: var(--space-2) !important;
}

.hero__body .whisper + p:not(.whisper) {
  margin-top: var(--space-5) !important;
}

.hero__ctas {
  margin-top: var(--space-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* Two-column layout: text left, visual right. This was missing from
   the last file — that's why the visual was stacking below at full
   width instead of sitting beside the text. */

.hero .container {
  max-width: calc(64rem + (var(--container-gutter-lg) * 2)); /* wider than container--reading so both columns fit */
}

.hero__grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: 6fr 5fr;
    gap: var(--space-9);
  }
}

@media (max-width: 767px) {
  .page-home .hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .page-home .hero__visual {
    order: -1;
  }
}

@media (max-width: 767px) {
  .page-home .story__portrait-image {
    margin-top: var(--space-6);
    display: block;
  }
}

.hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  isolation: isolate;
}

.hero__visual img {
  display: block;
  width: 100%;
  max-width: 28rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(184, 147, 90, 0.16),
    0 0 90px rgba(184, 147, 90, 0.18);
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .hero__visual img {
    max-width: 100%;
    margin-top: var(--space-6);
  }
}

.hero__visual svg {
  width: 100%;
  height: auto;
  max-width: 30rem; /* caps the visual's size so it can't blow up beyond this regardless of column width */
}

.hero__visual .glow-center + circle,
.hero__visual line {
  stroke: var(--color-accent-plum);
  opacity: 0.9;
}

.hero__visual .glow-center + circle {
  stroke-width: 2.2;
}


.hero__visual::before {
  content: "";
  position: absolute;
  inset: 6% 8% 2% 6%;
  transform: rotate(-4deg);
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.25) 0%, transparent 38%),
    radial-gradient(circle, rgba(184, 147, 90, 0.28) 0%, rgba(184, 147, 90, 0.12) 45%, transparent 74%);
  filter: blur(24px);
  z-index: 0;
  pointer-events: none;
}

.hero__text { position: relative; }
.hero__text::before {
  content: "";
  position: absolute;
  top: -40px; left: -60px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at center,
    var(--color-gold) 0, var(--color-gold) 1px, transparent 1px, transparent 28px);
  opacity: 0.07;
  z-index: -1;
  pointer-events: none;
}

@keyframes hero-breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.85; }
}

.hero__visual .glow-center {
  animation: hero-breathe 6s var(--ease-soft) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hero__visual .glow-center {
    animation: none;
    opacity: 0.7;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .pattern-section__visual .pattern-glows circle {
    animation: pattern-glow-pulse 5s ease-in-out infinite;
  }
  .pattern-section__visual .pattern-glows circle:nth-child(2) { animation-delay: 0.8s; }
  .pattern-section__visual .pattern-glows circle:nth-child(3) { animation-delay: 1.6s; }
  .pattern-section__visual .pattern-glows circle:nth-child(4) { animation-delay: 2.4s; }
  .pattern-section__visual .pattern-glows circle:nth-child(5) { animation-delay: 3.2s; }
  .pattern-section__visual .pattern-glows circle:nth-child(6) { animation-delay: 4s; }
}

@keyframes pattern-glow-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.65; }
}

/* ------------------------------------------------------------------------
   Narrow reading column — Sections 2, 3, 4 only
   These three sections deliberately read slightly narrower (39rem) than
   the site-wide reading token (42rem) for a tighter, more intimate feel
   during this reflective run of the page.
   ------------------------------------------------------------------------ */

.circumstances-section .container--reading,
.pattern-section .container--reading,
.forward-section .container--reading {
  max-width: calc(39rem + (var(--container-gutter-lg) * 2));
}


/* ------------------------------------------------------------------------
   SECTION 2 — CIRCUMSTANCES
   ------------------------------------------------------------------------ */


.section--bb {
  background-color: #290924;

  @media (max-width: 767px) {
    padding-block: var(--space-9) !important;
  }
}

.circumstances-section {
  padding-block: var(--space-10);
}

.circumstances-section { position: relative; overflow: hidden; }

.circumstances-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(160deg, var(--color-plum) 0%, transparent 55%);
  opacity: 0.05;
  mix-blend-mode: overlay;
  z-index: -1;
  pointer-events: none;
}

.circumstances-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, var(--color-gold) 1.5px, transparent 1.5px),
    radial-gradient(circle, var(--color-gold) 1px, transparent 1px),
    radial-gradient(circle, var(--color-gold) 1.5px, transparent 1.5px),
    radial-gradient(circle, var(--color-gold) 1px, transparent 1px),
    radial-gradient(circle, var(--color-gold) 2px, transparent 2px);
  background-size: 90px 90px, 140px 140px, 110px 110px, 170px 170px, 230px 230px;
  background-position: 0 0, 30px 50px, 90px 20px, 140px 80px, 60px 120px;
  opacity: 0.16;
  z-index: -1;
  pointer-events: none;
}

.circumstances-section .stack > * + * {
  margin-top: var(--space-4);
}

.circumstances-section .prose > p {
  margin-top: var(--space-5);
}

.circumstances-section .whisper-group {
  position: relative;
  margin-top: var(--space-7) !important;
  padding-left: var(--space-5);
}

.circumstances-section .whisper-group__bar {
  position: absolute;
  left: 0;
  top: 0.75rem;
  bottom: 0.75rem;
  width: 4px;
  border-radius: var(--radius-sm);
  background-color: var(--color-gold);
  opacity: 0.85;
}

.circumstances-section .whisper-group .whisper {
  margin: 0;
}

.circumstances-section .whisper-group .whisper + .whisper {
  margin-top: var(--space-2) !important;
}

.circumstances-section .whisper + p:not(.whisper) {
  margin-top: var(--space-6) !important;
}

/* A quieter emphasis line than the global `.statement` (components.css) —
   no accent rule/mark, used for this section's own closing line rather
   than a cross-section pivot. Intentionally distinct from `.statement`,
   not a duplicate of it — `.statement` marks a hinge the page turns on;
   this just closes one section's thought a little more firmly than a
   plain paragraph would. */
.section-statement {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-ink);
  margin-top: var(--space-6) !important;
  max-width: 30ch;
}

/* ------------------------------------------------------------------------
   SECTIONS 3 & 4 — PATTERN ("Why We Stay Stuck") & FORWARD ("A Different
   Way Forward")
   ------------------------------------------------------------------------ */

.pattern-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--space-8);
  background: linear-gradient(
        to bottom,
        #3d1a3d 0%,
        #290924 55%,
        #1a111d 100%
    );
}

.pattern-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, transparent 60%);
  opacity: 0.18;
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 0;
}

.pattern-section > * {
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px) {
  .pattern-section {
    padding-block: var(--space-9);
  }
}

.pattern-section__content {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 1024px) {
  .pattern-section__content {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-8);
  }
}

.pattern-section__text {
  min-width: 0;
}

.pattern-section__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pattern-section__visual svg {
  width: 100%;
  max-width: 30rem;
  height: auto;
}

.pattern-section__visual line {
  stroke: #ffffff;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-opacity: 1;
  filter: drop-shadow(0 0 1px rgba(59, 33, 56, 0.55));
}

.pattern-section__visual circle[stroke] {
  stroke: #ffffff;
  stroke-width: 1.8;
  filter: drop-shadow(0 0 1px rgba(59, 33, 56, 0.55));
}

.pattern-section .prose > p {
  margin-top: var(--space-3);
}

.pattern-section .whisper {
  margin-top: var(--space-5) !important;
}

.pattern-section .whisper + .whisper {
  margin-top: var(--space-2) !important;
}

.pattern-section .prose {
  position: relative;
  padding-left: var(--space-5);
  border-left: 2px solid rgba(59, 33, 56, 0.16);

  @media (max-width: 767px) {
    padding-left: 0;
  }
}

.pattern-section .prose::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--color-accent-plum), rgba(59, 33, 56, 0.2));
  opacity: 0.65;
}

.pattern-section .prose .whisper{
  display: none
}

.forward-section {
  position: relative;
  overflow: hidden;
  background: #290924;
}
@media (max-width: 767px) {
  .forward-section {
    padding-block: var(--space-8) !important;
  }
}

.forward-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    radial-gradient(rgba(240, 228, 206, 0.05) 1px, transparent 1px);
  background-size: 12px 12px, 18px 18px;
  background-position: 0 0, 6px 9px;
  opacity: 0.22;
  mix-blend-mode: screen;
  pointer-events: none;
}

.forward-section::after {
  content: '';
  position: absolute;
  inset: var(--space-5);
  inset-block: var(--space-8);
  border: 1px solid rgba(240, 228, 206, 0.15);
  pointer-events: none;
  border-radius: var(--radius-xl);
}

.forward-section .container {
  position: relative;

  @media (max-width: 767px) {
    padding-inline: var(--space-7);
    margin-top: var(--space-6);
    margin-bottom: var(--space-7);
  }
}

/* ------------------------------------------------------------------------
   SECTION 5 — PATHS ("Different Paths. One Intention.")
   v2.1: editorial redesign. Image is the anchor now, not an icon.
   Accents live only in small details (quote mark, link, hover glow,
   top hairline) — never as a full card fill.
   ------------------------------------------------------------------------ */

.paths-section {
  padding-top: var(--space-8);
  padding-bottom: var(--space-9);
}

@media (min-width: 1024px) {
  .paths-section {
    padding-top: var(--space-9);
    padding-bottom: var(--space-10);
  }
}

.paths-section__intro.stack > * + * { margin-top: var(--space-4); }
.paths-section__intro > h2, .paths-section__intro > .prose { max-width: 52rem; }
.paths-section__intro > h2 { text-wrap: balance; color: var(--color-gold-deep); }
.paths-section .prose > p { margin-top: var(--space-3); }
.paths-section .lead { font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.18rem); line-height: var(--leading-normal); }
.paths-section .whisper { margin-top: var(--space-4) !important; margin-bottom: var(--space-1); }
.paths-section .whisper + .whisper { margin-top: var(--space-1) !important; }

/* Richer background — layered soft gradient + two faint organic blobs,
   built entirely from radial-gradients (no image asset needed). Kept
   restrained: opacity is low, motion is none, it's texture not noise. */
.paths-section__cards {
  position: relative;
  overflow: hidden;
  padding: var(--space-5);
  margin-top: var(--space-8);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse 60% 50% at 15% 20%, var(--color-accent-tint) 0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 85% 80%, var(--color-plum-tint) 0%, transparent 60%),
    linear-gradient(160deg, var(--color-blush) 0%, var(--color-paper-deep) 100%);
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .paths-section__cards {
    margin-left: 15px;
    margin-right: 15px;
    width: calc(100% - 30px);
  }
}

@media (min-width: 768px) {
  .paths-section__cards { padding: var(--space-8); margin-top: var(--space-9); }
}

.paths-section .grid {
  position: relative;
  gap: var(--space-6);
  row-gap: var(--space-8); /* extra room so the stagger below never crowds the next row on mobile stack */
}

/* ---- Stagger — breaks template symmetry, desktop only ---- */
@media (min-width: 1024px) {
  .paths-section .card:nth-child(1) { transform: translateY(10px); }
  .paths-section .card:nth-child(2) { transform: translateY(-18px); }
  .paths-section .card:nth-child(3) { transform: translateY(14px); }
}

.paths-section .card {
  position: relative;
  overflow: hidden;
  padding: 0 0 var(--space-6);
  background-color: #290924;
  border: none;
  border-top: 3px solid var(--color-line); /* becomes the one colored "decorative line" per card, set below */
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-soft);


}

.paths-section .card > *:not(.card__image) {
  padding-inline: var(--space-6);
}

.card--tarot { border-top-color: var(--color-accent); }
.card--nlp   { border-top-color: var(--color-accent-plum); }
.card--reiki { border-top-color: var(--color-gold-deep); }

/* ---- Image: the card's visual anchor ---- */
.card__image {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--color-paper-deep);
}

.card__image img,
.card__image .image-placeholder {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  border: none;
  transition: transform 700ms var(--ease-soft); /* slow, deliberate zoom — "refined, not flashy" */
}

.paths-section .card:hover .card__image img,
.paths-section .card:hover .card__image .image-placeholder {
  transform: scale(1.04);
}

/* ---- Hover: lift + warm glow (no card yet has an accent-specific
   glow color — kept universal so all three feel equally premium) ---- */
.paths-section .card:hover {
  box-shadow: var(--shadow-accent-glow), var(--shadow-lg);
}

@media (min-width: 1024px) {
  .paths-section .card:nth-child(1):hover { transform: translateY(6px); }
  .paths-section .card:nth-child(2):hover { transform: translateY(-22px); }
  .paths-section .card:nth-child(3):hover { transform: translateY(10px); }
}

/* ---- Editorial content hierarchy ---- */

.card__recognition {
  margin-top: var(--space-5);
  margin-bottom: var(--space-3);
  color: var(--color-ink-faint);
  font-style: italic;

  @media (max-width: 767px) {
    display: none;
  }
}

.card--tarot .card__recognition::before { content: '— '; color: var(--color-accent); font-style: normal; }
.card--nlp   .card__recognition::before { content: '— '; color: var(--color-accent-plum); font-style: normal; }
.card--reiki .card__recognition::before { content: '— '; color: var(--color-gold-deep); font-style: normal; }

.card__title { 
  margin-bottom: var(--space-2); 
  margin-top: var(--space-4);
  color: var(--color-gold)
}

/* "Bold supporting statement" — the hook line gets real visual weight
   now, sitting between title and body as its own beat, not a caption. */
.card__hook {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: #fff;
  margin-bottom: var(--space-3);

  @media (max-width: 767px) {
    display: none;
  }
}

.card__body { color: var(--color-ink-soft); }

@media (max-width: 767px) {
  .card__body { color: var(--color-blush); }
}

.card__footer { margin-top: var(--space-5); }

.card--tarot .card__footer .link { color: #fff; }
.card--nlp   .card__footer .link { color: #fff; }
.card--reiki .card__footer .link { color: #fff; }
/* ------------------------------------------------------------------------
   SECTION 6 — STORY ("Why I Continue This Work")
   ------------------------------------------------------------------------ */

.story {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 768px) {
  .story {
    grid-template-columns: 3fr 2fr;
    gap: var(--space-9);
  }
}

.story__cta {
  margin-top: var(--space-6);
  padding: 0;
  color: var(--color-blush);
  box-shadow: none;
}

/* .story__portrait-placeholder {
  aspect-ratio: 4 / 5;
  background-color: transparent;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
} */

.story__portrait-image {
  display: block;
  object-fit: cover;
  border-radius: var(--radius-lg);
  filter: brightness(80%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15)
}


/* ------------------------------------------------------------------------
  /* ------------------------------------------------------------------------
   SECTION 7 — DISCOVERIES (testimonials)
   v2.1: 3 horizontal premium cards, replacing the vertical stacked-list
   with left-border-line treatment (which read as "newspaper," not
   premium). Intro block above is untouched.
   ------------------------------------------------------------------------ */

.discoveries-section {
  padding-top: var(--space-8);
  padding-bottom: var(--space-9);
}

@media (min-width: 1024px) {
  .discoveries-section {
    padding-top: var(--space-9);
    padding-bottom: var(--space-10);
  }
}

.discoveries-section__title {
  margin-bottom: var(--space-3);
}

.discoveries-section__lede {
  color: #fff;
  max-width: 46ch;
}

/* container--reading is fine for the intro text column, but the card
   row needs more room — this override widens just the list wrapper. */
.discoveries-section__list {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-7);
  max-width: 68rem;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .discoveries-section__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.discoveries-section .testimonial {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-top: 0 !important;
  padding: var(--space-7) var(--space-6) var(--space-6);
  background-color: var(--color-paper-raised);
  border: none;
  border-top: 3px solid var(--color-line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-soft);
}

.discoveries-section .testimonial:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-accent-glow), var(--shadow-lg);
}

/* per-card accent identity — same three-color system used across the
   page (Section 5 cards, nav underline), so testimonials feel part of
   the same family rather than a separate component language */
.discoveries-section .testimonial:nth-child(1) { border-top-color: var(--color-accent); }
.discoveries-section .testimonial:nth-child(2) { border-top-color: var(--color-accent-plum); }
.discoveries-section .testimonial:nth-child(3) { border-top-color: var(--color-accent-plum); }

/* Decorative quote mark replaces the old left-border-line device —
   large, quiet, tinted with the card's own accent at low opacity so it
   reads as texture, not as a loud graphic. */
.discoveries-section .testimonial::before {
  content: '\201C';
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
  margin-bottom: var(--space-2);
}

.discoveries-section .testimonial:nth-child(1)::before { color: #290924; }
.discoveries-section .testimonial:nth-child(2)::before { color: #290924; }
.discoveries-section .testimonial:nth-child(3)::before { color: #290924; }

.discoveries-section .testimonial__pull {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-ink);
  margin-top: calc(-1 * var(--space-6));
}

.discoveries-section .testimonial__body {
  margin-top: var(--space-4);
  color: var(--color-ink-soft);
  opacity: 0.86;
}

.discoveries-section .testimonial__attribution {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
}
/* ---- Section 7: per-testimonial avatar color rotation ---------------- */





/* ---- Section 2: image-supported split layout ------------------------ */

.circumstances-section__grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 1024px) {
  .circumstances-section__grid {
    grid-template-columns: 3fr 2fr;
    gap: var(--space-9);
  }
}


/* ---- Section 9: closing accent ----------------------------------------
   Centered "closing letter" composition — mirrors About page's closing
   section for consistency. Soft radial glow (light, not a drawn shape)
   replaces the old unused .finale__accent SVG placeholder. */

.finale {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-9);
  text-align: center;
  background: linear-gradient(
    0deg,
    #1a111d 0%,
    #290924 10%,
    #3d1a39 100%
);
}

/*.finale::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50rem;
  height: 50rem;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--color-gold-tint) 0%, transparent 65%);
  opacity: 0.12;
  pointer-events: none;
}*/
.finale::after {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59, 33, 56, 0.14), transparent);
  box-shadow: 0 6px 18px rgba(59, 33, 56, 0.15);
  pointer-events: none;
}

.finale .container {
  position: relative;
}

.finale__mark {
  width: 2rem;
  height: 1px;
  background-color: var(--color-gold);
  margin: 0 auto var(--space-6);
}

.finale h2 {
  max-width: 20ch;
  margin-inline: auto;
  color: var(--color-gold-deep);
  margin-top: var(--space-6);
}

.finale .prose {
  text-align: center;
  max-width: 50ch;
  margin-inline: auto;
}

.finale .prose > p {
  margin-top: var(--space-3);
}

.finale__cta {
  margin-top: var(--space-8);
  transition: background-color var(--duration-base) var(--ease-soft),
              color var(--duration-base) var(--ease-soft),
              border-color var(--duration-base) var(--ease-soft),
              transform var(--duration-base) var(--ease-soft);
}

/* .page-home .finale .btn--primary {
  
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.25rem;
    border: 1px solid var(--color-gold);
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-gold);
    background: transparent;
    transition: background-color 250ms var(--ease-soft), color 250ms var(--ease-soft), transform 250ms var(--ease-soft);
} */

.faq-section .container {
  padding-left: var(--space-5);
}