/* ==========================================================================
   TC Site Components - layout shared by all public pages
   Mobile-first. Test at 375px minimum.
   ========================================================================== */

/* --- Layout primitives --- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-3); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--space-3); }
.section { padding: var(--space-8) 0; }
.section-alt { background: var(--bg-alt); }
@media (min-width: 768px) { .section { padding: var(--space-12) 0; } }

/* --- Eyebrow + headings --- */
.eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-2);
}
.section-title { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.section-lead { font-size: var(--text-lg); color: var(--text-secondary); max-width: var(--measure); }

/* --- Header / nav --- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-light);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0.875rem var(--space-3); max-width: var(--container); margin: 0 auto; transition: padding 300ms var(--ease-breath); }
/* Header compacts once the page is scrolled (class set by site.js) */
.site-header { transition: box-shadow 300ms var(--ease-breath); }
.site-header.scrolled { box-shadow: 0 2px 16px rgba(44, 42, 38, 0.08); }
.site-header.scrolled .nav { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.wordmark { display: flex; flex-direction: column; line-height: 1.1; }
.wordmark-name { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; color: var(--ink); }
.wordmark-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-top: 2px; }
.nav-links { display: none; align-items: center; gap: var(--space-3); }
.nav-links a { font-size: var(--text-sm); font-weight: 500; color: var(--ink-soft); transition: color 200ms var(--ease-breath); }
.nav-links a:hover { color: var(--teal); }
/* Active page indicator */
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"]::after { content: ""; display: block; height: 2px; margin-top: 4px; background: var(--gold); border-radius: 1px; }
/* Hover underline draws in from the left (same visual as the active indicator) */
.nav-links a:not([aria-current="page"])::after {
  content: ""; display: block; height: 2px; margin-top: 4px;
  background: var(--gold); border-radius: 1px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 280ms var(--ease-breath);
}
.nav-links a:not([aria-current="page"]):hover::after { transform: scaleX(1); }
.mobile-menu a[aria-current="page"] { color: var(--teal); font-weight: 600; }
/* .nav .nav-cta specificity: must beat the later `.btn { display:inline-flex }`
   rule, or the desktop CTA leaks into the mobile header */
.nav .nav-cta { display: none; white-space: nowrap; }
@media (min-width: 980px) {
  .nav-links { display: flex; }
  .nav .nav-cta { display: inline-flex; }
}

/* Mobile menu */
.hamburger { display: inline-flex; flex-direction: column; gap: 5px; padding: 10px; min-width: 44px; min-height: 44px; justify-content: center; align-items: center; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform 250ms var(--ease-breath), opacity 250ms; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 980px) { .hamburger { display: none; } }
.mobile-menu { display: none; flex-direction: column; gap: var(--space-1); padding: var(--space-2) var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-light); background: var(--cream); }
.mobile-menu.open { display: flex; }
.mobile-menu a { padding: 0.75rem 0; font-size: var(--text-base); font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--border-light); }
.mobile-menu a:last-child { border-bottom: none; }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.875rem 1.75rem; min-height: 44px;
  border-radius: var(--radius);
  font-size: var(--text-base); font-weight: 600;
  transition: background 250ms var(--ease-breath), color 250ms, border-color 250ms;
  text-align: center;
}
.btn-primary { background: var(--cta-bg); color: var(--cta-text); }
.btn-primary:hover { background: var(--cta-hover); }
.btn-ghost { border: 1.5px solid var(--cta-ghost-border); color: var(--cta-ghost-text); }
.btn-ghost:hover { background: var(--teal-tint); }
.btn-small { padding: 0.625rem 1.25rem; font-size: var(--text-sm); }

/* --- Hero --- */
.hero { padding: var(--space-8) 0 var(--space-8); }
@media (min-width: 768px) { .hero { padding: var(--space-12) 0; } }
.hero h1 { font-size: var(--text-hero); max-width: 18ch; }
.hero-sub { font-size: var(--text-lg); color: var(--text-secondary); margin-top: var(--space-3); max-width: 52ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.trust-line { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-tertiary); max-width: 60ch; }
.trust-line .sep { color: var(--gold); margin: 0 0.4em; }

/* Staged hero entrance: headline block arrives in a quiet sequence.
   CSS-only (runs without JS); disabled under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hero-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .hero .eyebrow, .hero h1, .hero .hero-sub, .hero .hero-ctas, .hero .trust-line {
    opacity: 0;
    animation: hero-rise 700ms var(--ease-breath) forwards;
  }
  .hero .eyebrow { animation-delay: 80ms; }
  .hero h1 { animation-delay: 200ms; }
  .hero .hero-sub { animation-delay: 340ms; }
  .hero .hero-ctas { animation-delay: 480ms; }
  .hero .trust-line { animation-delay: 620ms; }
}

/* --- Homepage photo hero: full-bleed portrait + scrim, light text ---
   Photo and scrim are separate layers (::before / ::after) so the photo can
   drift very slowly (Ken Burns) beneath a steady scrim. Desktop only. */
.hero-photo {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 76vh;
  padding: var(--space-12) 0;
  color: var(--cream);
  background: var(--teal-dark);
}
.hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/images/hero-timm.webp?v=1') center right / cover no-repeat;
  transform-origin: 70% 30%;
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(18,26,40,0.88) 0%, rgba(18,26,40,0.64) 32%, rgba(18,26,40,0.24) 58%, rgba(18,26,40,0) 82%);
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes hero-kenburns { from { transform: scale(1); } to { transform: scale(1.045); } }
  .hero-photo::before { animation: hero-kenburns 26s var(--ease-breath) forwards; }
}
@media (min-width: 768px) { .hero-photo { min-height: 82vh; } }
.hero-photo .container { position: relative; z-index: 1; width: 100%; }
.hero-photo h1 { color: #FCF8F0; max-width: 27rem; }
.hero-photo .hero-sub { color: rgba(247,243,235,0.92); max-width: 27rem; }
.hero-photo .trust-line { color: rgba(247,243,235,0.74); max-width: 27rem; }
.hero-photo .hero-ctas { max-width: 27rem; }
.hero-photo .trust-line .sep { color: var(--gold-soft); }
.hero-photo .eyebrow { color: var(--gold-soft); }
.hero-photo .btn-primary { background: var(--gold); color: var(--ink); }
.hero-photo .btn-primary:hover { background: #C99C4E; }
.hero-photo .btn-ghost { border-color: rgba(247,243,235,0.55); color: #FCF8F0; }
.hero-photo .btn-ghost:hover { background: rgba(247,243,235,0.12); }
@media (max-width: 767px) {
  /* Stacked hero on mobile: photo band on top (face clear), text on a navy panel below */
  .hero-photo {
    display: block;
    align-items: initial;
    min-height: 0;
    padding: 0 0 var(--space-8);
    background: var(--teal-dark);
  }
  .hero-photo::before {
    content: "";
    position: static;
    display: block;
    width: 100%;
    height: 46vh;
    background: url('/images/hero-timm.webp?v=1') 60% 30% / cover no-repeat;
    animation: none;
  }
  .hero-photo::after { display: none; }
  .hero-photo .container { padding-top: var(--space-6); }
  .hero-photo h1, .hero-photo .hero-sub, .hero-photo .trust-line { max-width: none; }
}

/* --- Gold rule (decorative divider) --- */
.gold-rule { width: 56px; height: 2px; background: var(--gold); border: none; margin: 0 0 var(--space-3); }

/* --- Door cards --- */
.doors { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
@media (min-width: 768px) { .doors { grid-template-columns: 1fr 1fr; gap: var(--space-4); } }
.door {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
  transition: transform 300ms var(--ease-breath), box-shadow 300ms var(--ease-breath);
}
.door::before {
  /* gold rule that draws across the top on hover */
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  height: 3px; width: 56px;
  background: var(--gold);
  border-top-left-radius: var(--radius);
  transition: width 450ms var(--ease-breath);
}
.door:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -16px rgba(44, 42, 38, 0.28); }
.door:hover::before { width: calc(100% + 2px); border-top-right-radius: var(--radius); }
.door h3 { font-size: var(--text-xl); }
.door p { color: var(--text-secondary); }
.door .door-price { font-size: var(--text-sm); color: var(--text-tertiary); margin-top: auto; padding-top: var(--space-2); }
.door .btn { align-self: flex-start; }

/* --- Journey path: the map draws itself (Coming Home Process) ---
   Desktop: a thin gold route line rises across the three steps and draws in
   when the section scrolls into view (.in set by site.js). Mobile: a vertical
   guide line draws down the stacked steps instead. Reduced motion: shown drawn. */
.journey { position: relative; }
.journey-path { display: none; width: 100%; height: 64px; color: var(--gold); opacity: 0.5; margin-top: var(--space-4); margin-bottom: calc(-1 * var(--space-2)); }
@media (min-width: 768px) { .journey-path { display: block; } }
.journey-path path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.journey.in .journey-path path { transition: stroke-dashoffset 2200ms var(--ease-breath) 250ms; stroke-dashoffset: 0; }
@media (max-width: 767px) {
  .journey .steps { position: relative; padding-left: var(--space-3); }
  .journey .steps::before {
    content: ""; position: absolute; left: 0; top: 0.4rem; bottom: 0.4rem; width: 2px;
    background: linear-gradient(to bottom, var(--gold-soft), var(--gold));
    opacity: 0.6;
    transform: scaleY(0); transform-origin: top;
  }
  .journey.in .steps::before { transition: transform 1800ms var(--ease-breath) 250ms; transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .journey-path path { stroke-dashoffset: 0; }
  .journey .steps::before { transform: scaleY(1); }
}

/* --- Process steps --- */
.steps { display: grid; gap: var(--space-4); margin-top: var(--space-6); counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step h3 { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.step h3::before {
  content: counter(step, decimal-leading-zero);
  counter-increment: step;
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  color: var(--gold);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-1);
}
.step p { color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.6; }

/* --- Expectation timeline (door pages) --- */
.timeline { display: grid; gap: var(--space-3); margin-top: var(--space-4); max-width: var(--container-narrow); }
.timeline-item { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--space-2); }
.timeline-num { font-family: var(--font-heading); font-size: var(--text-lg); color: var(--gold); line-height: 1.4; }
.timeline-item h3 { font-size: var(--text-lg); margin-bottom: 0.25rem; }
.timeline-item p { color: var(--text-secondary); }

/* --- Pain list ("what brings people here") --- */
.pain-list { margin-top: var(--space-4); display: grid; gap: var(--space-2); max-width: var(--container-narrow); }
.pain-list li { padding-left: 1.5rem; position: relative; color: var(--text-secondary); }
.pain-list li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 8px; height: 2px; background: var(--gold); }

/* --- Testimonials --- */
.quotes { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
@media (min-width: 900px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quotes.quotes-2 { max-width: 60rem; }
@media (min-width: 900px) { .quotes.quotes-2 { grid-template-columns: repeat(2, 1fr); } }
.quote { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3); border-top: 2px solid var(--gold-soft); }
.quote blockquote { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 400; line-height: 1.4; color: var(--ink); }
.quote cite { font-style: normal; font-size: var(--text-sm); color: var(--text-tertiary); margin-top: auto; }
.quote cite::before { content: "- "; color: var(--gold); }

/* --- Pricing --- */
.pricing { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
@media (min-width: 900px) { .pricing { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
@media (min-width: 900px) { .pricing.pricing-2 { grid-template-columns: repeat(2, 1fr); max-width: 56rem; margin-left: auto; margin-right: auto; } }
.price-card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.price-card.featured { border-color: var(--gold); border-width: 1.5px; }
.price-card h3 { font-size: var(--text-lg); }
.price-amount { font-family: var(--font-heading); font-size: var(--text-2xl); color: var(--teal); }
.price-amount small { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-tertiary); font-weight: 400; }
.price-card ul { display: grid; gap: 0.375rem; font-size: var(--text-sm); color: var(--text-secondary); }
.price-card ul li { padding-left: 1.25rem; position: relative; }
.price-card ul li::before { content: "·"; position: absolute; left: 0.25rem; color: var(--gold); font-weight: 700; }
.price-card .btn { margin-top: auto; }
.price-note { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-tertiary); }

/* --- FAQ --- */
.faq { margin-top: var(--space-6); max-width: var(--container-narrow); display: grid; gap: var(--space-2); }
.faq details { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius); padding: var(--space-2) var(--space-3); }
.faq summary { font-weight: 600; font-size: var(--text-base); cursor: pointer; padding: var(--space-1) 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-heading); font-size: 1.25rem; color: var(--gold); flex-shrink: 0; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: var(--space-1) 0 var(--space-2); color: var(--text-secondary); }

/* --- Cross-link band ("two doors, one room") --- */
.crosslink { background: var(--teal-tint); border-radius: var(--radius); padding: var(--space-4); margin-top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-2); }
@media (min-width: 768px) { .crosslink { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-4); } }
.crosslink p { color: var(--ink-soft); }
.crosslink .btn { flex-shrink: 0; }

/* --- The Room band (the closer): deep navy, candlelight glow, large type --- */
.room-band {
  position: relative;
  overflow: hidden;
  background: var(--teal-dark);
  color: var(--cream);
}
.room-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(52% 78% at 74% 12%, rgba(182, 138, 58, 0.20), transparent 70%),
    radial-gradient(42% 60% at 10% 96%, rgba(182, 138, 58, 0.10), transparent 70%);
}
.room-band .container { position: relative; }
.room-band .eyebrow { color: var(--gold-soft); }
.room-band h2 {
  color: #FCF8F0;
  font-size: clamp(2rem, 3.2vw + 1rem, 2.875rem);
  max-width: 16ch;
  margin-bottom: var(--space-3);
}
.room-band p { color: rgba(247, 243, 235, 0.86); max-width: 54ch; }
.room-band .room-meta { margin-top: var(--space-3); font-size: var(--text-sm); color: rgba(247, 243, 235, 0.66); }
.room-band .room-meta .sep { color: var(--gold-soft); margin: 0 0.4em; }
.room-band .room-ctas { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.room-band .btn-primary { background: var(--gold); color: var(--ink); }
.room-band .btn-primary:hover { background: #C99C4E; }
.room-band .btn-ghost { border-color: rgba(247, 243, 235, 0.55); color: #FCF8F0; }
.room-band .btn-ghost:hover { background: rgba(247, 243, 235, 0.12); }

/* --- Map contours: the cartography motif, whispered ---
   Faint concentric contour lines (inline SVG data URI, gold) bleeding off the
   edge of a section. Used in exactly two places (process, final CTA band) -
   the rarity is the point. Desktop only; hidden on mobile to keep pages calm. */
.map-contours { position: relative; }
.map-contours::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600' fill='none' stroke='%23B68A3A' stroke-width='1'%3E%3Cpath d='M300,80 C420,70 520,150 530,260 C540,380 460,500 330,520 C210,540 90,470 70,350 C50,230 160,90 300,80 Z'/%3E%3Cpath d='M300,130 C395,122 470,185 480,270 C490,365 425,455 320,472 C220,488 125,432 108,338 C90,240 185,138 300,130 Z'/%3E%3Cpath d='M300,180 C370,174 420,222 430,285 C438,355 390,415 310,428 C235,440 165,398 152,325 C138,252 210,186 300,180 Z'/%3E%3Cpath d='M302,230 C352,226 372,262 380,300 C388,345 355,382 300,390 C250,397 205,368 197,318 C188,268 240,234 302,230 Z'/%3E%3Cpath d='M300,280 C330,278 345,298 350,320 C355,348 336,368 305,372 C272,376 250,358 246,328 C242,300 265,282 300,280 Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right -180px top -80px;
  background-size: 620px 620px;
  opacity: 0;
}
@media (min-width: 768px) {
  .map-contours::before { opacity: 0.12; }
  .map-contours.map-contours-dark::before { opacity: 0.18; }
}
.map-contours > .container { position: relative; z-index: 1; }

/* --- Retreat band: full-bleed Mallorca photograph, text over scrim --- */
.retreat-band {
  position: relative;
  overflow: hidden;
  padding: var(--space-12) 0;
  color: var(--cream);
  background: var(--teal-dark);
}
.retreat-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/images/retreat-tramuntana-group.webp?v=1') center 62% / cover no-repeat;
}
.retreat-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(18,26,40,0.90) 0%, rgba(18,26,40,0.60) 45%, rgba(18,26,40,0.32) 100%);
}
.retreat-band .container { position: relative; z-index: 1; }
.retreat-band .eyebrow { color: var(--gold-soft); }
.retreat-band h2 { color: #FCF8F0; font-size: clamp(1.75rem, 2.6vw + 1rem, 2.5rem); margin-bottom: var(--space-2); max-width: 20ch; }
.retreat-band p { color: rgba(247, 243, 235, 0.88); max-width: 46ch; }
.retreat-band .retreat-meta { margin-top: var(--space-2); font-size: var(--text-sm); color: rgba(247, 243, 235, 0.68); }
.retreat-band .retreat-meta .sep { color: var(--gold-soft); margin: 0 0.4em; }
.retreat-band .btn { margin-top: var(--space-4); }
.retreat-band .btn-primary { background: var(--gold); color: var(--ink); }
.retreat-band .btn-primary:hover { background: #C99C4E; }
@media (max-width: 767px) {
  .retreat-band::after { background: rgba(18, 26, 40, 0.74); }
}

/* --- Case file card (podcast: Case Studies of the Soul) --- */
.file-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-top: var(--space-4);
}
.file-tab {
  position: absolute;
  top: -1.65rem;
  left: var(--space-3);
  padding: 0.35rem 1.1rem;
  background: var(--sand);
  border: 1px solid var(--border-medium);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.file-grid { display: grid; gap: var(--space-3); align-items: center; }
@media (min-width: 768px) { .file-grid { grid-template-columns: 240px 1fr; gap: var(--space-4); } }
.file-photo {
  max-width: 240px;
  margin: 0 auto;
  /* tilt follows the subject's existing lean in the photo (clockwise), so the
     picture reads as tilted WITH its frame, not fighting it */
  transform: rotate(2deg);
  border: 6px solid #FFFFFF;
  box-shadow: 0 8px 22px -12px rgba(44, 42, 38, 0.35);
}
.file-photo img { display: block; width: 100%; height: auto; }
.file-tagline { font-family: var(--font-heading); font-size: var(--text-lg); color: var(--ink); margin-bottom: var(--space-2); }

/* --- Pull-quote band: one spacious editorial statement ---
   Padding is deliberately asymmetric: the gold rule sits above the text and the
   FOLLOWING section's own top padding adds to the gap below, so equal padding
   makes the text line float above the visual center of the cream gap. These
   values center the TEXT, not the box. */
.pullquote { padding: var(--space-12) 0 var(--space-8); text-align: center; }
@media (min-width: 768px) { .pullquote { padding: var(--space-16) 0 var(--space-8); } }
.pullquote .gold-rule { margin: 0 auto var(--space-4); }
.pullquote-line {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.5vw + 0.8rem, 3rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
  max-width: 22ch;
  margin: 0 auto;
  text-wrap: balance;
}

/* --- CTA band --- */
.cta-band { background: var(--teal-dark); color: var(--cream); }
.cta-band .section-title { color: var(--cream); }
.cta-band p { color: #C2C9D6; }
.cta-band .btn-primary { background: var(--gold); color: var(--ink); }
.cta-band .btn-primary:hover { background: #C99C4E; }
/* The plan: three numbered steps that make the CTA the first step of a visible path */
.plan-steps { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); max-width: 52ch; counter-reset: plan; }
.plan-steps li { position: relative; padding-left: 2.6rem; counter-increment: plan; color: #C2C9D6; }
.plan-steps li::before {
  content: counter(plan, decimal-leading-zero);
  position: absolute; left: 0; top: 0.15em;
  font-family: var(--font-heading); font-size: var(--text-sm);
  color: var(--gold-soft); letter-spacing: 0.1em;
}
.plan-steps li strong { color: var(--cream); font-weight: 600; }

/* --- Resource / banner strips --- */
.strip { display: grid; gap: var(--space-3); align-items: center; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius); padding: var(--space-4); }
@media (min-width: 768px) { .strip { grid-template-columns: 1fr auto; } }
.strip h3 { font-size: var(--text-xl); margin-bottom: var(--space-1); }
.strip p { color: var(--text-secondary); }
.strip-img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
@media (min-width: 768px) {
  .strip-photo { grid-template-columns: auto 1fr auto; }
  .strip-img { width: 116px; height: 116px; }
}

/* --- Footer --- */
.site-footer { background: var(--sand); border-top: 1px solid var(--border-light); padding: var(--space-8) 0 var(--space-4); margin-top: var(--space-8); }
.footer-grid { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; } }
.footer-brand .wordmark-name { font-size: 1.125rem; }
.footer-brand p { font-size: var(--text-sm); color: var(--text-tertiary); margin-top: var(--space-1); max-width: 38ch; }
.footer-col h4 { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--space-2); }
.footer-col ul { display: grid; gap: 0.5rem; }
.footer-col a { font-size: var(--text-sm); color: var(--ink-soft); }
.footer-col a:hover { color: var(--teal); }
.footer-legal { margin-top: var(--space-6); padding-top: var(--space-3); border-top: 1px solid var(--border-medium); font-size: var(--text-xs); color: var(--text-tertiary); display: flex; flex-direction: column; gap: var(--space-1); }

/* --- Article (blog posts, long-form pages) --- */
.article-header { padding: var(--space-8) 0 var(--space-4); }
.article-hero { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--border-light); margin: 0 0 var(--space-6); }
.article-header h1 { font-size: var(--text-2xl); max-width: 24ch; }
.article-meta { font-size: var(--text-sm); color: var(--text-tertiary); margin-top: var(--space-2); }
.article-meta .cat { color: var(--gold); font-weight: 600; }
.article { padding-bottom: var(--space-8); }
.article h2 { font-size: var(--text-xl); margin: var(--space-6) 0 var(--space-2); }
.article h3 { font-size: var(--text-lg); margin: var(--space-4) 0 var(--space-1); }
.article p { margin-bottom: var(--space-2); color: var(--text-secondary); }
.article ul, .article ol { margin: 0 0 var(--space-2) 1.25rem; color: var(--text-secondary); display: grid; gap: 0.375rem; max-width: var(--measure); }
.article ul { list-style: disc; }
.article ol { list-style: decimal; }
.article strong { color: var(--text-primary); }
.article blockquote { border-left: 3px solid var(--gold); padding: var(--space-1) 0 var(--space-1) var(--space-3); margin: var(--space-3) 0; font-family: var(--font-heading); font-size: var(--text-lg); color: var(--ink); max-width: var(--measure); }
.article em { font-style: italic; }

/* --- Blog index cards --- */
.post-list { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.post-card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius); padding: var(--space-4); display: block; overflow: hidden; transition: border-color 250ms var(--ease-breath); }
.post-card:hover { border-color: var(--gold); }
.post-card-thumb { float: left; width: 132px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); margin: 0.2rem var(--space-3) var(--space-1) 0; }
@media (max-width: 479px) { .post-card-thumb { width: 96px; } }
.post-card h3 { font-size: var(--text-xl); margin-bottom: var(--space-1); }
.post-card p { color: var(--text-secondary); }
.post-card .article-meta { margin-top: var(--space-1); }

/* --- Portrait --- */
.hero-grid { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 880px) { .hero-grid { grid-template-columns: 3fr 2fr; } }
.portrait-frame { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border-light); max-width: 380px; }
.portrait-frame img { width: 100%; }
/* Gentle parallax inside the frame (--plx set by site.js; desktop only).
   Scale must overscan further than the max |--plx| travel or edges show. */
@media (min-width: 880px) and (prefers-reduced-motion: no-preference) {
  .portrait-frame img { transform: scale(1.1) translateY(var(--plx, 0px)); }
}

/* --- Session photo (door pages: "what to expect") --- */
.session-photo { display: block; width: 100%; max-width: 40rem; height: auto; border: 1px solid var(--border-light); border-radius: var(--radius); margin: var(--space-4) 0 var(--space-2); }
/* Text + image side-by-side (image right on desktop, stacks below on mobile) */
.text-media { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 880px) { .text-media { grid-template-columns: 3fr 2fr; } }
.text-media-img { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border-light); }
.text-media-img img { display: block; width: 100%; height: auto; }
@media (max-width: 879px) { .text-media-img { max-width: 21rem; margin: var(--space-2) auto 0; } }
/* Alternating variant: image on the left */
@media (min-width: 880px) {
  .text-media.media-left { grid-template-columns: 2fr 3fr; }
  .text-media.media-left .text-media-img { order: -1; }
}

/* Paired documentary stills (e.g. intake + session) with shared caption */
.media-pair { display: grid; gap: var(--space-2); margin: var(--space-4) 0 0; }
@media (min-width: 680px) { .media-pair { grid-template-columns: 1fr 1fr; } }
.media-pair img { display: block; width: 100%; height: auto; border: 1px solid var(--border-light); border-radius: var(--radius); }
.media-pair figcaption { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--text-secondary); text-align: center; margin-top: var(--space-1); }

/* --- Soul Compass signup form --- */
.compass-form { display: grid; gap: var(--space-1); min-width: 260px; }
.compass-form label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.compass-form input[type="text"], .compass-form input[type="email"], .footer-compass input[type="email"] { padding: 0.75rem 1rem; border: 1px solid var(--border-medium); border-radius: var(--radius); background: #fff; font: inherit; color: var(--ink); width: 100%; }
.compass-form input[type="text"]:focus, .compass-form input[type="email"]:focus, .footer-compass input[type="email"]:focus { outline: 2px solid var(--teal); border-color: var(--teal); }
.compass-form input[type="submit"], .footer-compass input[type="submit"] { margin-top: var(--space-1); background: var(--cta-bg); color: var(--cta-text); padding: 0.875rem 1.75rem; border-radius: var(--radius); font-weight: 600; font-size: var(--text-base); cursor: pointer; border: none; transition: background 250ms var(--ease-breath); }
.compass-form input[type="submit"]:hover, .footer-compass input[type="submit"]:hover { background: var(--cta-hover); }
.compass-form .form-note, .footer-compass .form-note { font-size: var(--text-xs); color: var(--text-tertiary); }

/* Footer Soul Compass signup (A-15) */
.footer-compass p { font-size: var(--text-sm); }
.footer-compass form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--space-1); }
.footer-compass input[type="email"] { flex: 1 1 11rem; min-width: 0; }
.footer-compass input[type="submit"] { margin-top: 0; padding: 0.75rem 1.25rem; font-size: var(--text-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* --- Reveal on scroll (progressive enhancement, no-JS safe) --- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-reveal) var(--ease-breath), transform var(--dur-reveal) var(--ease-breath); }
  .reveal.in { opacity: 1; transform: none; }
  html.no-js .reveal { opacity: 1; transform: none; }
}
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
  .journey-path path { stroke-dashoffset: 0 !important; }
}

/* --- Cross-page fade (View Transitions API, progressive enhancement) ---
   Main value is the ABSENCE of the blank-white flash between pages on the live
   site; on localhost pages load instantly, so there is no flash to remove and
   the effect is nearly invisible. Durations kept short so navigation never
   feels slowed. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: 240ms; }
::view-transition-new(root) { animation-duration: 320ms; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}