/*
 * hero.css
 * Dr. Aprilia West — Hero Sections
 *
 * Covers three hero variants:
 *   1. .hero-home        — homepage full-viewport hero with rotating word
 *   2. .page-hero        — standard inner-page hero (photo overlay style)
 *   3. .page-hero--books — two-column hero with 3D bookshelf
 *
 * Shared keyframes and the common crosshatch ::before texture
 * are defined once and reused across variants.
 *
 * @package daw
 */

/* ─────────────────────────────────────────────
   SHARED KEYFRAMES
   ───────────────────────────────────────────── */
@keyframes heroIn {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes shelfIn {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; transform: scaleY(1);   }
  50%       { opacity: 1;   transform: scaleY(1.1); }
}

/* ─────────────────────────────────────────────
   SHARED HERO CROSSHATCH TEXTURE  (::before)
   Applied to all hero variants via class
   ───────────────────────────────────────────── */
.hero-texture::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg,   transparent, transparent 2px, rgba(245,242,236,0.013) 2px, rgba(245,242,236,0.013) 3px),
    repeating-linear-gradient(90deg,  transparent, transparent 3px, rgba(245,242,236,0.008) 3px, rgba(245,242,236,0.008) 4px),
    repeating-linear-gradient(45deg,  transparent, transparent 6px, rgba(184,150,90,0.022)  6px, rgba(184,150,90,0.022)  7px),
    repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(245,242,236,0.010) 8px, rgba(245,242,236,0.010) 9px);
  pointer-events: none;
  z-index: 0;
}

/* ─────────────────────────────────────────────
   1. HOMEPAGE HERO  (.hero-home)
   ───────────────────────────────────────────── */
.hero-home {
  height: 100vh;
  min-height: 640px;
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--black);
}

/* Dark warm gradient overlay */
.hero-home::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg,   transparent, transparent 2px, rgba(245,242,236,0.013) 2px, rgba(245,242,236,0.013) 3px),
    repeating-linear-gradient(90deg,  transparent, transparent 3px, rgba(245,242,236,0.008) 3px, rgba(245,242,236,0.008) 4px),
    repeating-linear-gradient(45deg,  transparent, transparent 6px, rgba(184,150,90,0.022)  6px, rgba(184,150,90,0.022)  7px),
    repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(245,242,236,0.010) 8px, rgba(245,242,236,0.010) 9px);
  pointer-events: none;
  z-index: 0;
}

.hero-home::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 65% at 80% 35%, rgba(184,150,90,0.065) 0%, transparent 60%),
    linear-gradient(165deg, #100c08 0%, #0a0906 45%, #161008 100%);
  pointer-events: none;
  z-index: 0;
}

/* Photo overlay — cloud/water image at low opacity */
/* Default background — homepage cloud/water image.
   Pages that pass hero_image override this via inline style,
   which always wins over a CSS background-image declaration. */
.hero-img-overlay {
  position: absolute; inset: 0;
  z-index: 2;
  background-image: url('../images/cloudwaterhead_bw.webp');
  background-size: cover;
  background-position: center 30%;
  opacity: 0.12;
  mix-blend-mode: luminosity;
}

/* Vertical accent lines */
.hero-line-left {
  position: absolute;
  left: 48px; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(184,150,90,0.3) 30%, rgba(184,150,90,0.3) 70%, transparent);
  z-index: 2;
}

.hero-line-right {
  position: absolute;
  right: 48px; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(184,150,90,0.15) 30%, rgba(184,150,90,0.15) 70%, transparent);
  z-index: 2;
}

/* Content block */
.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 72px 100px;
  max-width: 900px;
  animation: heroIn 1.2s cubic-bezier(0.16,1,0.3,1) both;
}

.hero-label {
  font-family: var(--condensed);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-label::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

.hero-headline {
  font-family: var(--serif);
  font-size: clamp(52px, 8vw, 96px);
  font-weight: 300;
  line-height: 1.0;
  color: var(--off-white);
  margin-bottom: 32px;
  letter-spacing: -3px;
}

.hero-line-left,
.hero-line-right,
.hero-scroll {
  display: none;
}

.hero-headline em {
  font-style: italic;
  color: var(--gold-light);
}

/* Rotating word animation */
.rotating-word-wrap {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: bottom;
  height: 1.05em;
}

.rotating-word {
  display: block;
  font-style: italic;
  color: var(--gold-light);
  position: absolute;
  left: 0; bottom: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-100%);
  transition: none;
}

.rotating-word.active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22,1,0.36,1);
}

.rotating-word.exit {
  opacity: 0;
  transform: translateY(60%);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.55,0,1,0.45);
}

.hero-sub {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(245,242,236,0.65);
  max-width: 520px;
  margin-bottom: 48px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* Scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: 36px; right: 72px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--condensed);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245,242,236,0.35);
  writing-mode: vertical-rl;
}

.scroll-line {
  width: 1px;
  height: 64px;
  background: linear-gradient(to bottom, rgba(184,150,90,0.6), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

/* Stats block */
.hero-stats {
  position: absolute;
  bottom: 100px; right: 72px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: heroIn 1.4s cubic-bezier(0.16,1,0.3,1) 0.2s both;
}

.stat-item {
  text-align: right;
}

.stat-num {
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 300;
  font-style: italic;
  color: var(--gold-light);
  line-height: 1;
}

.stat-label {
  font-family: var(--condensed);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245,242,236,0.45);
  margin-top: 2px;
}

/* ─────────────────────────────────────────────
   2. STANDARD INNER-PAGE HERO  (.page-hero)
   Used on: psychotherapy, coaching, trainings,
            speaking, about, connect
   ───────────────────────────────────────────── */
.page-hero {
  min-height: 90vh;
  background: var(--black);
  display: flex;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
  padding: 0 var(--pad-x) 88px;
}

.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg,   transparent, transparent 2px, rgba(245,242,236,0.013) 2px, rgba(245,242,236,0.013) 3px),
    repeating-linear-gradient(90deg,  transparent, transparent 3px, rgba(245,242,236,0.008) 3px, rgba(245,242,236,0.008) 4px),
    repeating-linear-gradient(45deg,  transparent, transparent 6px, rgba(184,150,90,0.022)  6px, rgba(184,150,90,0.022)  7px),
    repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(245,242,236,0.010) 8px, rgba(245,242,236,0.010) 9px);
  pointer-events: none;
  z-index: 0;
}

.page-hero::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 65% at 80% 35%, rgba(184,150,90,0.065) 0%, transparent 60%),
    linear-gradient(165deg, #100c08 0%, #0a0906 45%, #161008 100%);
  pointer-events: none;
  z-index: 1;
}

/* Hero content */
.page-hero-content {
  position: relative;
  z-index: 3;
  max-width: 860px;
  animation: heroIn 1.1s cubic-bezier(0.16,1,0.3,1) both;
}

/* Accent line — left edge */
.hero-line-l,
.hero-scroll-hint {
  display: none;
}

.page-hero h1 {
  font-family: var(--serif);
  font-size: clamp(44px, 6.5vw, 84px);
  font-weight: 300;
  line-height: 1.05;
  color: var(--off-white);
  margin-bottom: 28px;
}

.page-hero h1 em {
  font-style: italic;
  color: var(--gold-light);
}

.page-hero-sub {
  font-size: 16px;
  font-weight: 300;
  color: rgba(245,242,236,0.58);
  max-width: 580px;
  line-height: 1.85;
  margin-bottom: 36px;
}

/* Scroll hint — right-aligned on standard hero */
.page-hero .hero-scroll-hint {
  right: var(--pad-x);
  left: auto;
  z-index: 3;
}

/* ─────────────────────────────────────────────
   3. BOOKS HERO  (.page-hero--books)
   Two-column: text left, 3D bookshelf right
   ───────────────────────────────────────────── */
.page-hero--books {
  min-height: 88vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 120px var(--pad-x) 80px;
  gap: 60px;
  background: var(--off-white);
}

/* Override dark page-hero defaults for light books hero */
.page-hero--books::before,
.page-hero--books::after {
  display: none;
}

.page-hero--books .page-hero-content .page-label {
  color: var(--gold);
}

.page-hero--books h1 {
  color: var(--text-dark);
}

.page-hero--books h1 em {
  color: var(--gold);
}

.page-hero--books .page-hero-sub {
  color: var(--text-mid);
}

/* Stats row inside books hero content */
.hero-stats-row {
  display: flex;
  gap: 36px;
}

.hero-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-stat-num {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 300;
  font-style: italic;
  color: var(--gold-light);
  line-height: 1;
}

.hero-stat-label {
  font-family: var(--condensed);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245,242,236,0.35);
}

/* ── 3D BOOKSHELF ── */
.hero-bookshelf {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  perspective: 900px;
  animation: shelfIn 1.4s cubic-bezier(0.16,1,0.3,1) 0.15s both;
  padding-bottom: 28px;
}

.shelf-plank {
  position: absolute;
  bottom: 0; left: -16px; right: -16px;
  height: 14px;
  background: linear-gradient(180deg, #3a2a12 0%, #1e1408 60%, #0d0a06 100%);
  border-top: 1px solid rgba(184,150,90,0.4);
  box-shadow:
    0 6px 28px rgba(0,0,0,0.8),
    0 2px 0 rgba(184,150,90,0.15),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.shelf-plank::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent, transparent 14px,
    rgba(255,255,255,0.018) 14px, rgba(255,255,255,0.018) 15px
  );
}

/* Individual book */
.book-3d {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-20deg);
  transition:
    transform 0.45s cubic-bezier(0.22,1,0.36,1),
    filter     0.45s;
  cursor: pointer;
  margin: 0 2px;
  filter: drop-shadow(-10px 14px 22px rgba(0,0,0,0.7));
  text-decoration: none;
}

.book-3d:hover {
  transform: rotateY(-8deg) translateY(-20px) scale(1.05);
  filter:
    drop-shadow(-14px 28px 36px rgba(0,0,0,0.75))
    drop-shadow(0 0 32px rgba(184,150,90,0.14));
  z-index: 10;
}

/* Staggered resting positions */
.book-3d:nth-child(2) { transform: rotateY(-20deg) translateY(-5px); }
.book-3d:nth-child(2):hover { transform: rotateY(-8deg) translateY(-23px) scale(1.05); }
.book-3d:nth-child(3) { transform: rotateY(-20deg) translateY(-2px); }
.book-3d:nth-child(3):hover { transform: rotateY(-8deg) translateY(-20px) scale(1.05); }
.book-3d:nth-child(4) { transform: rotateY(-20deg) translateY(-8px); }
.book-3d:nth-child(4):hover { transform: rotateY(-8deg) translateY(-26px) scale(1.05); }

/* Book cover face */
.book-front {
  position: relative;
  display: block;
  overflow: hidden;
}

.book-front img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gloss highlight — hidden */
.book-gloss {
  display: none;
}

/* Book spine */
.book-spine {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  transform-origin: left center;
  transform: rotateY(90deg) translateX(-50%);
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.5) 0%,
    rgba(255,255,255,0.04) 40%,
    rgba(0,0,0,0.25) 100%
  );
  overflow: hidden;
}

/* Per-book dimensions */
/* All four books same size */
.book-3d:nth-child(1) .book-front,
.book-3d:nth-child(2) .book-front,
.book-3d:nth-child(3) .book-front,
.book-3d:nth-child(4) .book-front { width: 110px; height: 160px; }

.book-3d:nth-child(1) .book-spine,
.book-3d:nth-child(2) .book-spine,
.book-3d:nth-child(3) .book-spine,
.book-3d:nth-child(4) .book-spine { width: 18px; height: 160px; }

/* Hide shelf-plank and tooltip */
.shelf-plank { display: none; }

.book-tooltip { display: none; }

/* Books hero pull quote */
.books-hero-quote {
  margin-top: 28px;
  padding: 20px 24px;
  border-left: 2px solid var(--gold);
  background: rgba(184,150,90,0.06);
}

.books-hero-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 300;
  color: var(--text-dark);
  line-height: 1.55;
  margin-bottom: 10px;
}

.books-hero-quote cite {
  font-family: var(--condensed);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--gold);
  font-style: normal;
  display: block;
  text-transform: uppercase;
}

.books-hero-quote cite em {
  font-style: italic;
  color: var(--text-light);
}

/* Tooltip */
.book-tooltip {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10,9,6,0.92);
  border: 1px solid rgba(184,150,90,0.25);
  padding: 8px 12px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
  font-family: var(--condensed);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-light);
  backdrop-filter: blur(8px);
}

.book-3d:hover .book-tooltip {
  opacity: 1;
}

/* ─────────────────────────────────────────────
   RESPONSIVE — HERO
   ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-content {
    padding: 0 var(--pad-x-md) 80px;
  }

  .hero-stats {
    right: var(--pad-x-md);
    bottom: 80px;
  }

  .hero-scroll {
    right: var(--pad-x-md);
  }

  .hero-line-left,
  .hero-line-right {
    display: none;
  }

  .page-hero {
    padding: 0 var(--pad-x-md) 72px;
  }

  .hero-line-l {
    left: var(--pad-x-md);
  }
}

@media (max-width: 900px) {
  /* Books hero stacks vertically */
  .page-hero--books {
    grid-template-columns: 1fr;
    padding: 110px var(--pad-x-md) 60px;
    min-height: auto;
    gap: 48px;
  }

  .page-hero--books .hero-scroll-hint {
    left: var(--pad-x-md);
  }

  .hero-bookshelf {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .hero-content {
    padding: 0 var(--pad-x-sm) 80px;
  }

  .hero-stats {
    display: none;
  }

  .hero-scroll {
    display: none;
  }

  .page-hero {
    padding: 0 var(--pad-x-sm) 64px;
    min-height: 60vh;
  }

  .hero-line-l {
    display: none;
  }

  .page-hero--books {
    padding: 100px var(--pad-x-sm) 48px;
  }

  /* All books same size on mobile */
  .book-3d:nth-child(1) .book-front,
  .book-3d:nth-child(2) .book-front,
  .book-3d:nth-child(3) .book-front,
  .book-3d:nth-child(4) .book-front { width: 72px; height: 108px; }

  .book-3d:nth-child(1) .book-spine,
  .book-3d:nth-child(2) .book-spine,
  .book-3d:nth-child(3) .book-spine,
  .book-3d:nth-child(4) .book-spine { width: 12px; height: 108px; }
}

/* ─────────────────────────────────────────────
   PHOTO HERO VARIANT  (.page-hero--photo)
   Used on: Speaking + Media page
   Full-bleed photo with dark gradient overlay.
   Different from standard .page-hero which uses
   a subtle luminosity blend texture.
   ───────────────────────────────────────────── */
.page-hero--photo .hero-img-overlay {
	opacity: 1;
	mix-blend-mode: normal;
	background-size: cover;
	background-position: center 20%;
}

.page-hero--photo .hero-photo-overlay {
	position: absolute; inset: 0; z-index: 1;
	background:
		linear-gradient(to top,  rgba(10,9,6,0.92) 0%, rgba(10,9,6,0.55) 40%, rgba(10,9,6,0.2) 75%, transparent 100%),
		linear-gradient(to right, rgba(10,9,6,0.4)  0%, transparent 60%);
	pointer-events: none;
}

/* Ensure content sits above both overlays */
.page-hero--photo .page-hero-content { z-index: 3; }
.page-hero--photo .hero-line-l       { z-index: 3; }
.page-hero--photo .hero-scroll-hint  { z-index: 3; }

/* ─────────────────────────────────────────────
   SPEAKING + MEDIA HERO  (.page-hero--speaking)
   Full-bleed photo — 90vh — with overlay + texture.
   ───────────────────────────────────────────── */
.page-hero--speaking {
	min-height: 90vh;
	display: flex;
	align-items: flex-end;
	padding: 0;
	background: var(--black);
}

/* Suppress standard page-hero pseudo-elements */
.page-hero--speaking::before,
.page-hero--speaking::after {
	display: none;
}

/* Full-bleed background photo */
.page-hero--speaking .hero-photo {
	position: absolute; inset: 0;
	background-image: url('../images/speaking-hero-bg.webp');
	background-size: cover;
	background-position: center 20%;
}

/* Dark gradient overlay */
.page-hero--speaking .hero-photo-overlay {
	position: absolute; inset: 0;
	background:
		linear-gradient(to top,  rgba(10,9,6,0.92) 0%, rgba(10,9,6,0.55) 40%, rgba(10,9,6,0.2) 75%, transparent 100%),
		linear-gradient(to right, rgba(10,9,6,0.4)  0%, transparent 60%);
}

/* Linen texture over photo */
.page-hero--speaking .hero-texture {
	position: absolute; inset: 0; z-index: 1;
	background-image:
		repeating-linear-gradient(0deg,  transparent, transparent 3px, rgba(245,242,236,0.015) 3px, rgba(245,242,236,0.015) 4px),
		repeating-linear-gradient(90deg, transparent, transparent 4px, rgba(245,242,236,0.008) 4px, rgba(245,242,236,0.008) 5px);
	pointer-events: none;
}

/* Content z-index */
.page-hero--speaking .page-hero-content {
	position: relative;
	z-index: 3;
	padding: 0 var(--pad-x) 88px;
	max-width: 860px;
}

.page-hero--speaking .hero-line-l { z-index: 2; }
.page-hero--speaking .hero-scroll-hint { z-index: 3; right: var(--pad-x); left: auto; }

@media (max-width: 1024px) {
	.page-hero--speaking .page-hero-content { padding: 0 var(--pad-x-md) 72px; }
	.page-hero--speaking .hero-scroll-hint  { right: var(--pad-x-md); }
}

@media (max-width: 640px) {
	.page-hero--speaking { min-height: 75vh; }
	.page-hero--speaking .page-hero-content { padding: 0 var(--pad-x-sm) 60px; }
	.page-hero--speaking .hero-scroll-hint  { display: none; }
}

/* Extra content stack inside page hero
   Forces waitlist notice + CTA button to stack vertically */
.hero-extra-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-top: 4px;
}

/* ─────────────────────────────────────────────
   TRAININGS HERO  (.page-hero--trainings)
   Same structure as speaking hero, different image.
   ───────────────────────────────────────────── */
.page-hero--trainings {
	min-height: 90vh;
	display: flex;
	align-items: flex-end;
	padding: 0;
	background: var(--black);
}

.page-hero--trainings::before,
.page-hero--trainings::after {
	display: none;
}

.page-hero--trainings .hero-photo {
	position: absolute; inset: 0;
	background-image: url('../images/trainings-hero-bg.webp');
	background-size: cover;
	background-position: center 20%;
	opacity: .2;
}

.page-hero--trainings .hero-photo-overlay {
	position: absolute; inset: 0;
	background:
		linear-gradient(to top,  rgba(10,9,6,0.92) 0%, rgba(10,9,6,0.55) 40%, rgba(10,9,6,0.2) 75%, transparent 100%),
		linear-gradient(to right, rgba(10,9,6,0.4)  0%, transparent 60%);
}

.page-hero--trainings .hero-texture {
	position: absolute; inset: 0; z-index: 1;
	background-image:
		repeating-linear-gradient(0deg,  transparent, transparent 3px, rgba(245,242,236,0.015) 3px, rgba(245,242,236,0.015) 4px),
		repeating-linear-gradient(90deg, transparent, transparent 4px, rgba(245,242,236,0.008) 4px, rgba(245,242,236,0.008) 5px);
	pointer-events: none;
}

.page-hero--trainings .page-hero-content {
	position: relative;
	z-index: 3;
	padding: 0 var(--pad-x) 88px;
	max-width: 860px;
}

.page-hero--trainings .hero-line-l    { z-index: 2; }
.page-hero--trainings .hero-scroll-hint { z-index: 3; right: var(--pad-x); left: auto; }

@media (max-width: 1024px) {
	.page-hero--trainings .page-hero-content  { padding: 0 var(--pad-x-md) 72px; }
	.page-hero--trainings .hero-scroll-hint   { right: var(--pad-x-md); }
}

@media (max-width: 640px) {
	.page-hero--trainings { min-height: 75vh; }
	.page-hero--trainings .page-hero-content  { padding: 0 var(--pad-x-sm) 60px; }
	.page-hero--trainings .hero-scroll-hint   { display: none; }
}

/* ─────────────────────────────────────────────
   PSYCHOTHERAPY HERO  (.page-hero--psychotherapy)
   Same structure as speaking/trainings hero,
   uses the cloudwaterhead image.
   ───────────────────────────────────────────── */
.page-hero--psychotherapy {
	min-height: 90vh;
	display: flex;
	align-items: flex-end;
	padding: 0;
	background: var(--black);
}

.page-hero--psychotherapy::before,
.page-hero--psychotherapy::after {
	display: none;
}

.page-hero--psychotherapy .hero-photo {
	position: absolute; inset: 0;
	background-image: url('../images/redclouds_edit.webp');
	background-size: cover;
	background-position: center 20%;
	opacity: .2;
}

.page-hero--psychotherapy .hero-photo-overlay {
	position: absolute; inset: 0;
	background:
		linear-gradient(to top,  rgba(10,9,6,0.92) 0%, rgba(10,9,6,0.55) 40%, rgba(10,9,6,0.2) 75%, transparent 100%),
		linear-gradient(to right, rgba(10,9,6,0.4)  0%, transparent 60%);
}

.page-hero--psychotherapy .hero-texture {
	position: absolute; inset: 0; z-index: 1;
	background-image:
		repeating-linear-gradient(0deg,  transparent, transparent 3px, rgba(245,242,236,0.015) 3px, rgba(245,242,236,0.015) 4px),
		repeating-linear-gradient(90deg, transparent, transparent 4px, rgba(245,242,236,0.008) 4px, rgba(245,242,236,0.008) 5px);
	pointer-events: none;
}

.page-hero--psychotherapy .page-hero-content {
	position: relative;
	z-index: 3;
	padding: 0 var(--pad-x) 88px;
	max-width: 860px;
}

.page-hero--psychotherapy .hero-line-l     { z-index: 2; }
.page-hero--psychotherapy .hero-scroll-hint { z-index: 3; right: var(--pad-x); left: auto; }

@media (max-width: 1024px) {
	.page-hero--psychotherapy .page-hero-content  { padding: 0 var(--pad-x-md) 72px; }
	.page-hero--psychotherapy .hero-scroll-hint   { right: var(--pad-x-md); }
}

@media (max-width: 640px) {
	.page-hero--psychotherapy { min-height: 75vh; }
	.page-hero--psychotherapy .page-hero-content  { padding: 0 var(--pad-x-sm) 60px; }
	.page-hero--psychotherapy .hero-scroll-hint   { display: none; }
}

/* ─────────────────────────────────────────────
   EXECUTIVE COACHING HERO  (.page-hero--ec)
   Full-bleed photo — executive-coaching-session.webp
   ───────────────────────────────────────────── */
.page-hero--ec {
	min-height: 90vh;
	display: flex;
	align-items: flex-end;
	padding: 0;
	background: var(--black);
}

.page-hero--ec::before,
.page-hero--ec::after { display: none; }

.page-hero--ec .hero-photo {
	position: absolute; inset: 0;
	background-image: url('../images/executive-coaching-session.webp');
	background-size: cover;
	background-position: 65% 20%;
	opacity: .35;
}

.page-hero--ec .hero-photo-overlay {
	position: absolute; inset: 0;
	background:
		linear-gradient(to top,  rgba(10,9,6,0.92) 0%, rgba(10,9,6,0.55) 40%, rgba(10,9,6,0.2) 75%, transparent 100%),
		linear-gradient(to right, rgba(10,9,6,0.4)  0%, transparent 60%);
}

.page-hero--ec .hero-texture {
	position: absolute; inset: 0; z-index: 1;
	background-image:
		repeating-linear-gradient(0deg,  transparent, transparent 3px, rgba(245,242,236,0.015) 3px, rgba(245,242,236,0.015) 4px),
		repeating-linear-gradient(90deg, transparent, transparent 4px, rgba(245,242,236,0.008) 4px, rgba(245,242,236,0.008) 5px);
	pointer-events: none;
}

.page-hero--ec .page-hero-content {
	position: relative;
	z-index: 3;
	padding: 0 var(--pad-x) 88px;
	max-width: 860px;
}

@media (max-width: 1024px) {
	.page-hero--ec .page-hero-content { padding: 0 var(--pad-x-md) 72px; }
}

@media (max-width: 640px) {
	.page-hero--ec { min-height: 75vh; }
	.page-hero--ec .page-hero-content { padding: 0 var(--pad-x-sm) 60px; }
}