/* ==========================================================================
   LIVE BOOT CAMP — «Сознание изобилия»
   Premium transformational retreat site
   ========================================================================== */

:root {
  --bg-dark: #101A16;
  --forest: #1D3028;
  --ivory: #F2EEE5;
  --sand: #C8B79E;
  --gold: #B89A62;
  --gold-light: #D4BD8C;
  --text-white: #F7F5EF;
  --body-text: #3d4b43;
  --muted-text: #5c6a61;

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

  --max-content: 1440px;
  --max-text: 800px;
  --max-prose: 70ch;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  font-family: var(--font-sans);
  background: var(--ivory);
  color: var(--forest);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.anchor-offset {
  display: block;
  position: relative;
  top: -90px;
  visibility: hidden;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; }

ul, ol { list-style: none; }

.prose { display: flex; flex-direction: column; gap: 1.2rem; max-width: var(--max-prose); }
.prose p { color: var(--body-text); font-size: 1.02rem; }

/* ==========================================================================
   Buttons & links
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease), color 0.35s var(--ease);
  white-space: nowrap;
  min-height: 44px;
}

.btn--gold {
  background: var(--gold);
  color: #16241d;
}
.btn--gold:hover, .btn--gold:focus-visible {
  background: var(--gold-light);
  transform: translateY(-2px);
}
.btn--gold:hover .btn-arrow, .btn--gold:focus-visible .btn-arrow {
  transform: translateX(4px);
}

.btn--secondary {
  background: transparent;
  color: var(--text-white);
  border-color: rgba(247,245,239,0.35);
  padding: 1.1rem 2rem;
  font-size: 0.95rem;
}
.btn--secondary:hover, .btn--secondary:focus-visible {
  border-color: var(--gold);
  color: var(--gold-light);
}

.section .btn--secondary,
.who .btn--secondary,
.results .btn--secondary {
  color: var(--forest);
  border-color: rgba(29,48,40,0.25);
}

.btn--text {
  background: transparent;
  color: var(--forest);
  border-bottom: 1px solid var(--gold);
  border-radius: 0;
  padding: 0.4rem 0;
  min-height: auto;
}
.btn--text:hover { color: var(--gold); }

.btn--large {
  padding: 1.15rem 2.1rem;
  font-size: 1rem;
}

.btn--small {
  padding: 0.65rem 1.4rem;
  font-size: 0.85rem;
}

.btn--full { width: 100%; }

.btn-arrow { transition: transform 0.35s var(--ease); }

.link-quiet {
  font-size: 0.95rem;
  font-weight: 500;
  opacity: 0.85;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: opacity 0.3s var(--ease), border-color 0.3s var(--ease);
}
.link-quiet:hover, .link-quiet:focus-visible { opacity: 1; border-color: currentColor; }
.link-quiet--underline { border-color: var(--gold); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 1.4rem 2.5rem;
  background-color: rgba(16,26,22,0.92);
  backdrop-filter: blur(10px);
  transition: background-color 0.4s var(--ease);
}

/* Only the Hero page starts with a transparent header over its dark background image;
   every other page opens on a light section, so the header needs to stay solid from the start. */
.site-header--hero { background-color: transparent; backdrop-filter: none; }

.site-header__inner {
  width: 100%;
  max-width: var(--max-content);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Guarantees breathing room between the wordmark and the nav — the brand
     symbol widened the logo enough for them to touch on narrow desktops. */
  gap: 1.6rem;
}

.logo {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  color: var(--text-white);
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.logo__mark { width: 26px; height: auto; display: block; flex-shrink: 0; }

/* ==========================================================================
   Brand symbol — decorative treatments
   ========================================================================== */

/* Small centred mark used to separate sections. */
.symbol-rule {
  display: block;
  width: 44px;
  height: auto;
  margin: 0 auto;
  opacity: 0.75;
}

/* Oversized mark bleeding off a section edge. Purely decorative. */
.symbol-bleed {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  width: clamp(260px, 34vw, 520px);
  height: auto;
}
.symbol-bleed--tr { top: -14%; right: -9%; opacity: 0.10; }
.symbol-bleed--bl { bottom: -16%; left: -11%; opacity: 0.08; }
/* Sits on the hero, so it must share the overlay's layer to paint above it. */
.symbol-bleed--br { bottom: -13%; right: -8%; opacity: 0.13; z-index: 1; }
/* Gold on a light ground needs more presence than on the dark sections. */
.symbol-bleed--light { opacity: 0.14; }

/* Sections that paint their own background layers (.place) stack the wrap at
   z-index 2, so a watermark there has to climb above the overlay to be seen. */
.symbol-bleed--over { z-index: 2; }

/* Sections that host a bleed need a stacking context + clipping. */
.has-symbol { position: relative; overflow: hidden; }
/* Lift real content above the watermark — but not the watermark itself,
   which must stay absolutely positioned. */
.has-symbol > *:not(.symbol-bleed) { position: relative; z-index: 1; }

@media (max-width: 767px) {
  .symbol-bleed { width: clamp(190px, 56vw, 300px); }
  .logo__mark { width: 22px; }
}

.nav-desktop { display: flex; align-items: center; gap: 1.8rem; flex-wrap: nowrap; }
.nav-desktop ul { display: flex; gap: 1.4rem; white-space: nowrap; }

.nav-desktop a:not(.btn) {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-white);
  opacity: 0.85;
  position: relative;
  padding-bottom: 4px;
  transition: opacity 0.3s var(--ease);
}
.nav-desktop a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.3s var(--ease);
}
.nav-desktop a:not(.btn):hover { opacity: 1; }
.nav-desktop a:not(.btn):hover::after { width: 100%; }
.nav-desktop a[aria-current="page"] { opacity: 1; }
.nav-desktop a[aria-current="page"]::after { width: 100%; }
.mobile-menu a[aria-current="page"] { color: var(--gold-light); }

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 110;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--text-white);
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
  margin: 0 auto;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--bg-dark);
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-menu nav { display: flex; flex-direction: column; align-items: center; gap: 2.4rem; width: 100%; padding: 0 2rem; }
.mobile-menu ul { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.mobile-menu a:not(.btn) { font-family: var(--font-serif); font-size: 1.6rem; color: var(--text-white); }
.mobile-menu .btn { max-width: 280px; margin: 0 auto; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: var(--bg-dark);
}

.hero-background { position: absolute; inset: 0; z-index: 0; }
.hero-bg__img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transform: scale(1.08);
  will-change: transform;
}

.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(105deg, rgba(8,14,11,0.92) 0%, rgba(8,14,11,0.78) 28%, rgba(8,14,11,0.4) 55%, rgba(8,14,11,0.12) 78%, rgba(8,14,11,0.05) 100%),
    linear-gradient(to top, rgba(8,14,11,0.55) 0%, rgba(8,14,11,0) 30%, rgba(8,14,11,0) 70%, rgba(8,14,11,0.35) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 9rem 2.5rem 3rem;
}

.hero-eyebrow {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gold-light);
  margin-bottom: 1.8rem;
  max-width: var(--max-text);
}

.hero-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2.6rem, 3.2vw + 2.1rem, 6.875rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--text-white);
  max-width: var(--max-text);
  margin-bottom: 1.8rem;
}
.hero-title__sub {
  display: block;
  font-size: 0.34em;
  font-style: italic;
  font-weight: 500;
  color: var(--sand);
  margin-top: 0.5rem;
}

.hero-statement {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.3rem, 1vw + 1.1rem, 1.75rem);
  color: var(--gold-light);
  max-width: 640px;
  margin-bottom: 1.3rem;
}

.hero-description {
  font-size: clamp(1rem, 0.4vw + 0.92rem, 1.12rem);
  font-weight: 400;
  color: var(--text-white);
  opacity: 0.88;
  max-width: 640px;
  margin-bottom: 2rem;
}

.hero-topics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--text-white);
  opacity: 0.78;
  max-width: 760px;
  margin-bottom: 2.4rem;
}
.hero-topics li:not(:last-child)::after {
  content: '•';
  color: var(--gold);
  opacity: 0.7;
  margin: 0 0.7rem;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem 1.6rem;
  margin-bottom: 1.1rem;
}

.hero-microcopy {
  font-size: 0.86rem;
  color: var(--sand);
  opacity: 0.85;
  max-width: 480px;
  margin-bottom: 2.4rem;
}

.hero-facts {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 1.8rem 2.5rem 2.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 3rem;
  border-top: 1px solid rgba(247,245,239,0.16);
}
.hero-facts li {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 260px;
}
.hero-facts strong {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--gold-light);
  font-weight: 600;
}
.hero-facts span { font-size: 0.85rem; color: var(--text-white); opacity: 0.82; }

.scroll-indicator {
  position: absolute;
  right: 2.5rem;
  bottom: 2rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--text-white);
  opacity: 0.75;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: opacity 0.3s var(--ease);
}
.scroll-indicator:hover { opacity: 1; }
.scroll-indicator i {
  display: block; width: 1px; height: 34px;
  background: linear-gradient(to bottom, var(--gold-light), transparent);
  position: relative; overflow: hidden;
}
.scroll-indicator i::after {
  content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 100%;
  background: var(--gold-light);
  animation: scrollLine 2.6s ease-in-out infinite;
}
@keyframes scrollLine { 0% { top: -100%; } 60% { top: 100%; } 100% { top: 100%; } }

/* ==========================================================================
   Reveal animations
   ========================================================================== */

.reveal, .reveal-up {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease);
}
.reveal.is-visible, .reveal-up.is-visible { opacity: 1; filter: blur(0); transform: translateY(0); }

.hero-content .reveal[data-reveal-order="1"] { transition-delay: 0.1s; }
.hero-content .reveal[data-reveal-order="2"] { transition-delay: 0.25s; }
.hero-content .reveal[data-reveal-order="3"] { transition-delay: 0.4s; }
.hero-content .reveal[data-reveal-order="4"] { transition-delay: 0.55s; }
.hero-content .reveal[data-reveal-order="5"] { transition-delay: 0.7s; }
.hero-content .reveal[data-reveal-order="6"] { transition-delay: 0.85s; }
.hero-facts.reveal[data-reveal-order="7"] { transition-delay: 1s; }

[data-stagger="1"] { transition-delay: 0s; }
[data-stagger="2"] { transition-delay: 0.08s; }
[data-stagger="3"] { transition-delay: 0.16s; }
[data-stagger="4"] { transition-delay: 0.24s; }
[data-stagger="5"] { transition-delay: 0.32s; }
[data-stagger="6"] { transition-delay: 0.4s; }
[data-stagger="7"] { transition-delay: 0.48s; }
[data-stagger="8"] { transition-delay: 0.56s; }
[data-stagger="9"] { transition-delay: 0.64s; }

/* ==========================================================================
   Shared section scaffolding
   ========================================================================== */

.section-eyebrow, .eyebrow-sm {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* Each standalone page's own top-level title is that page's H1;
   shared with h2 since some intro subsections (e.g. the Journey
   teaser on program.html) intentionally stay one level down. */
h1, h2 {
  font-size: clamp(2.2rem, 2.2vw + 1.5rem, 3.4rem);
  line-height: 1.1;
  margin-bottom: 1.6rem;
  max-width: 900px;
}

.section-closing {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1vw + 1rem, 1.5rem);
  max-width: 760px;
  margin: 3.5rem 0 2.2rem;
  color: inherit;
}

.about-statement, blockquote.about-statement {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.35rem, 1.1vw + 1.1rem, 1.9rem);
  line-height: 1.4;
  max-width: 720px;
  margin: 2rem 0 0;
  border-left: 2px solid var(--gold);
  padding-left: 1.4rem;
}

.card-number {
  display: block;
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--gold);
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 2.5rem;
}
.two-col li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 0.96rem;
  color: var(--body-text);
}
.two-col li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.65em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

.context-close {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  margin-top: 1.4rem;
  max-width: 640px;
}

.checklist li, .excludelist li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.96rem;
  margin-bottom: 0.6rem;
}
.checklist li::before {
  content: '✓';
  position: absolute; left: 0; color: var(--gold);
  font-weight: 700;
}
.excludelist li::before {
  content: '—';
  position: absolute; left: 0; color: var(--muted-text);
}

/* generic light/dark section text color helpers */
.on-dark, .on-dark p, .on-dark .prose p { color: var(--ivory); }
.on-dark h2, .on-dark h3, .on-dark h4 { color: var(--text-white); }

/* ==========================================================================
   About Program
   ========================================================================== */

.about { background: var(--ivory); padding: 7rem 2.5rem 6rem; }
.about__wrap { max-width: var(--max-content); margin: 0 auto; }
.about__header h1 { color: var(--forest); }

.about__body {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 3rem;
  margin-top: 3rem;
}

.about-nav {
  position: sticky;
  top: 7rem;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.about-nav a {
  font-size: 0.88rem;
  color: var(--muted-text);
  border-left: 2px solid transparent;
  padding-left: 0.9rem;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.about-nav a:hover, .about-nav a.is-active { color: var(--forest); border-color: var(--gold); }

.about-content { display: flex; flex-direction: column; gap: 3rem; }
.about-content article { max-width: var(--max-prose); }
.about-content h2 { font-size: 1.6rem; color: var(--forest); margin-bottom: 1rem; }
.about-content p { color: var(--body-text); margin-bottom: 0.9rem; }
.about-content p:last-child { margin-bottom: 0; }

.about-media { border-radius: 24px; overflow: hidden; aspect-ratio: 16/9; box-shadow: 0 24px 50px -22px rgba(16,26,22,0.3); margin: 1.5rem 0; }
.about-media img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Editorial figure — shared photo component (guide prose + full-width bands)
   Radius, shadow and easing intentionally match .about-media so photography
   reads as one system across the site.
   ========================================================================== */

.editorial-figure {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 24px 50px -22px rgba(16,26,22,0.3);
}
.editorial-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  transition: transform 0.9s var(--ease);
}
/* Soft gradient seat — grounds the photo instead of letting it float. */
.editorial-figure::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(16,26,22,0) 55%, rgba(16,26,22,0.16));
}
@media (hover: hover) {
  .editorial-figure:hover img { transform: scale(1.035); }
}
@media (prefers-reduced-motion: reduce) {
  .editorial-figure img { transition: none; }
  .editorial-figure:hover img { transform: none; }
}

/* In-prose: sits inside the 760px guide column, matching prose rhythm. */
.editorial-figure--prose {
  aspect-ratio: 16/10;
  margin: 1.8rem 0;
}

/* Full-width band: a breath between a dense grid and the closing statement. */
.editorial-figure--band {
  aspect-ratio: 21/9;
  margin: 1rem 0 3.5rem;
}

@media (max-width: 900px) {
  .editorial-figure--band { aspect-ratio: 16/9; }
}
@media (max-width: 640px) {
  .editorial-figure { border-radius: 18px; }
  .editorial-figure--prose { aspect-ratio: 4/3; margin: 1.4rem 0; }
  .editorial-figure--band { aspect-ratio: 4/3; margin: 0.6rem 0 2.6rem; }
}

.about-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-top: 4rem;
}
.about-pillars article {
  background: #fff;
  border: 1px solid rgba(29,48,40,0.08);
  border-radius: 20px;
  padding: 1.8rem 1.6rem;
  box-shadow: 0 12px 30px -18px rgba(16,26,22,0.18);
}
.pillar-mark { display: block; width: 26px; height: 1.5px; background: var(--gold); margin-bottom: 1.1rem; }
.about-pillars h3 { font-size: 1.1rem; color: var(--forest); margin-bottom: 0.5rem; font-weight: 600; font-family: var(--font-sans); }
.about-pillars p { font-size: 0.9rem; color: var(--muted-text); }

.trust-notice {
  margin-top: 4rem;
  padding: 2rem 2.2rem;
  background: rgba(184,154,98,0.08);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  max-width: 800px;
}
.trust-notice h2 { font-size: 1.3rem; color: var(--forest); margin-bottom: 0.8rem; }
.trust-notice p { color: var(--body-text); margin-bottom: 0.6rem; }
.trust-notice p:last-child { margin-bottom: 0; }

.about-summary, .audience-summary, .results-summary {
  margin-top: 2.5rem;
  padding: 1.6rem 2rem;
  background: rgba(29,48,40,0.04);
  border-radius: 14px;
  max-width: 760px;
}
.about-summary p, .audience-summary p, .results-summary p { font-size: 0.98rem; color: var(--body-text); }

.about-actions, .audience-actions, .results-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
  margin-top: 0.5rem;
}

/* ==========================================================================
   Who Is It For
   ========================================================================== */

.who { background: var(--forest); padding: 7rem 2.5rem 6rem; }
.who__wrap { max-width: var(--max-content); margin: 0 auto; }
.who__header { max-width: 760px; margin-bottom: 3.5rem; }

/* Two-column blocks: existing text keeps its measure on the left, a photo
   fills the previously empty space on the right. */
.who__intro {
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: stretch;
  margin-bottom: 3.5rem;
}
.who__intro .who__header { margin-bottom: 0; }

.who__closing {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: stretch;
}
/* Blocks stack in the text column; drop the first one's top margin so it
   lines up with the top of the photo. */
.who__closing-text > :first-child { margin-top: 0; }

.who__media {
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 24px 50px -22px rgba(8,14,11,0.6);
  min-height: 100%;
}
.who__media img,
.who__media video { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1024px) {
  .who__intro, .who__closing { grid-template-columns: 1fr; }
  .who__media { min-height: 0; aspect-ratio: 16 / 10; }
  .who__media--portrait { aspect-ratio: 4 / 3; }
}
.who__header h1 { color: var(--text-white); }
.who .prose p { color: var(--sand); }
.who .about-statement { color: var(--gold-light); border-color: var(--gold); }

.audience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  margin-bottom: 3.5rem;
}
.audience-grid article {
  background: rgba(247,245,239,0.04);
  border: 1px solid rgba(247,245,239,0.12);
  border-radius: 22px;
  padding: 2rem 1.7rem;
  transition: transform 0.4s var(--ease), background-color 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.audience-grid article:hover {
  transform: translateY(-6px);
  background: rgba(247,245,239,0.07);
  border-color: rgba(184,154,98,0.5);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.5);
}
.audience-grid h2 { font-family: var(--font-sans); font-size: 1.02rem; font-weight: 600; color: var(--gold-light); margin-bottom: 0.7rem; }
.audience-grid p { font-size: 0.88rem; color: var(--ivory); opacity: 0.78; margin-bottom: 0.5rem; }
.audience-grid p:last-child { margin-bottom: 0; }

.audience-contexts, .participation-readiness, .self-assessment {
  margin-top: 3rem;
  padding: 2.4rem 2.6rem;
  background: rgba(247,245,239,0.04);
  border-radius: 20px;
  max-width: 920px;
}
.audience-contexts h2, .participation-readiness h2, .self-assessment h2 { color: var(--text-white); font-size: 1.4rem; margin-bottom: 1rem; }
.audience-contexts p, .participation-readiness p { color: var(--sand); margin-bottom: 1.2rem; }
.who .two-col li { color: var(--ivory); opacity: 0.85; }
.who .two-col li::before { background: var(--gold-light); }
.who .context-close { color: var(--gold-light); }

.not-for-everyone {
  margin-top: 3rem;
  padding: 2.4rem 2.6rem;
  background: rgba(8,14,11,0.35);
  border: 1px solid rgba(247,245,239,0.14);
  border-radius: 20px;
  max-width: 920px;
}
.not-for-everyone h2 { color: var(--text-white); font-size: 1.4rem; margin-bottom: 1rem; }
.not-for-everyone p { color: var(--sand); margin-bottom: 1.2rem; }

.self-assessment ol { counter-reset: q; display: flex; flex-direction: column; gap: 0.9rem; }
.self-assessment li {
  counter-increment: q;
  position: relative;
  padding-left: 2.4rem;
  color: var(--ivory);
  font-size: 1.02rem;
}
.self-assessment li::before {
  content: counter(q);
  position: absolute; left: 0; top: -0.1em;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--gold-light);
}

.who .about-summary, .who .audience-summary { background: rgba(247,245,239,0.06); }
.who .about-summary p, .who .audience-summary p { color: var(--ivory); }
.who .section-closing { color: var(--gold-light); }

/* ==========================================================================
   Results (WhatYouReceive)
   ========================================================================== */

.results { background: var(--text-white); padding: 7rem 2.5rem 6rem; }
.results__wrap { max-width: var(--max-content); margin: 0 auto; }
.results__header { max-width: 780px; margin-bottom: 3.5rem; }
.results__header h1 { color: var(--forest); }

.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  margin-bottom: 3.5rem;
}
.results-grid article {
  padding: 2.2rem 1.9rem;
  border-top: 1px solid var(--gold);
  background: linear-gradient(180deg, rgba(184,154,98,0.05), transparent 40%);
}
.results-grid h2 { font-size: 1.35rem; color: var(--forest); margin-bottom: 0.7rem; }
.results-grid p { font-size: 0.92rem; color: var(--muted-text); line-height: 1.6; margin-bottom: 0.7rem; }
.benefit-label { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold); margin: 1rem 0 0.6rem !important; }
.results-grid ul { display: flex; flex-direction: column; gap: 0.4rem; }
.results-grid ul li { position: relative; padding-left: 1.1rem; font-size: 0.88rem; color: var(--muted-text); }
.results-grid ul li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }

.before-after, .takeaways, .integration {
  margin-top: 3.5rem;
  padding: 2.6rem 2.8rem;
  background: rgba(184,154,98,0.05);
  border-radius: 20px;
  max-width: 1000px;
}
.before-after h2, .takeaways h2, .integration h2 { color: var(--forest); font-size: 1.5rem; margin-bottom: 1.2rem; }
.before-after__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; }
.before-after h3 { font-size: 1.05rem; color: var(--gold); margin-bottom: 0.9rem; text-transform: uppercase; letter-spacing: 0.03em; }
.before-after ul { display: flex; flex-direction: column; gap: 0.5rem; }
.before-after li { position: relative; padding-left: 1.1rem; font-size: 0.94rem; color: var(--body-text); }
.before-after li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }

.integration p { color: var(--body-text); margin-bottom: 0.9rem; }
.integration ol { counter-reset: iq; display: flex; flex-direction: column; gap: 0.6rem; margin: 1rem 0; }
.integration li { counter-increment: iq; position: relative; padding-left: 2rem; color: var(--forest); font-weight: 500; }
.integration li::before { content: counter(iq) '.'; position: absolute; left: 0; color: var(--gold); font-family: var(--font-serif); }

.honest-expectations {
  margin-top: 3.5rem;
  padding: 2.6rem 2.8rem;
  border: 1px solid rgba(29,48,40,0.12);
  border-radius: 20px;
  max-width: 1000px;
}
.honest-expectations h2 { font-size: 1.4rem; color: var(--forest); margin-bottom: 0.9rem; }
.honest-expectations p { color: var(--body-text); margin-bottom: 1rem; }

/* ==========================================================================
   Journey
   ========================================================================== */

.journey { background: var(--sand); background: linear-gradient(180deg, #ece6d9, #e4dbc9); padding: 6rem 2.5rem; }

/* Embedded variant used inside program.html, ahead of the day-by-day accordion */
.journey--inline {
  background: none;
  padding: 3rem 0 3.5rem;
  margin: 1rem 0 3rem;
  border-top: 1px solid rgba(29,48,40,0.12);
  border-bottom: 1px solid rgba(29,48,40,0.12);
}
.journey--inline .journey__wrap { max-width: none; }
.journey__wrap { max-width: var(--max-content); margin: 0 auto; }
.journey__header { max-width: 700px; margin-bottom: 3.5rem; }
.journey__header h2 { color: var(--forest); }
.journey__header p { color: var(--body-text); font-size: 1.02rem; }

.journey-timeline {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.2rem;
  position: relative;
  margin-bottom: 3rem;
  padding-top: 2rem;
}
.journey-timeline::before {
  content: '';
  position: absolute;
  top: 0.5rem; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 6%, var(--gold) 94%, transparent);
}
.journey-timeline li { position: relative; padding-top: 0.5rem; }
.journey-timeline li::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold);
  transform: translateY(-4px);
}
.journey-day { display: block; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem; }
.journey-timeline h3 { font-size: 1.35rem; color: var(--forest); margin-bottom: 0.5rem; }
.journey-timeline p { font-size: 0.88rem; color: var(--muted-text); }

.journey-final {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.3rem, 1vw + 1.1rem, 1.7rem);
  color: var(--forest);
  text-align: center;
  max-width: 720px;
  margin: 0 auto 2.4rem;
}
.journey__cta { text-align: center; }

/* ==========================================================================
   Program by days (accordion)
   ========================================================================== */

.program { background: var(--ivory); padding: 7rem 2.5rem 6rem; position: relative; }
.program__wrap { max-width: 980px; margin: 0 auto; }
.program__header { max-width: 700px; margin-bottom: 3rem; }
.program__header h1 { color: var(--forest); }
.program__header p { color: var(--body-text); font-size: 1.02rem; }

.program-accordion { display: flex; flex-direction: column; }
.day { border-top: 1px solid rgba(29,48,40,0.14); }
.day:last-child { border-bottom: 1px solid rgba(29,48,40,0.14); }

.day summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 90px 1fr 28px;
  align-items: center;
  gap: 1.5rem;
  padding: 1.6rem 0;
}
.day summary::-webkit-details-marker { display: none; }

.day-num { font-family: var(--font-serif); font-size: 1.3rem; color: var(--gold); }
.day-date {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.3rem;
}
.day-title h2 { font-size: 1.3rem; color: var(--forest); margin-bottom: 0.2rem; }
.day-title p { font-size: 0.9rem; color: var(--muted-text); }

.day-toggle { position: relative; width: 22px; height: 22px; justify-self: end; }
.day-toggle::before, .day-toggle::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  background: var(--forest);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.day-toggle::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
.day-toggle::after { width: 1.5px; height: 14px; transform: translate(-50%, -50%); }
.day[open] .day-toggle::after { opacity: 0; }

.day-body { padding: 0 0 2rem 0; max-width: 700px; margin-left: 106px; }
.day-body ul { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.2rem; }
.day-body li { position: relative; padding-left: 1.2rem; font-size: 0.96rem; color: var(--body-text); }
.day-body li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }

.day-schedule { display: flex; flex-direction: column; gap: 0; margin-bottom: 1.6rem; }
.day-schedule__item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 1.2rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(29,48,40,0.09);
}
.day-schedule__item:first-child { padding-top: 0; }
.day-schedule__item:last-child { border-bottom: none; padding-bottom: 0; }
.day-schedule__time {
  font-family: var(--font-serif);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gold);
  white-space: nowrap;
  padding-top: 0.15rem;
}
.day-schedule__item h3 { font-family: var(--font-sans); font-size: 0.98rem; font-weight: 700; color: var(--forest); margin-bottom: 0.3rem; }
.day-schedule__item p { font-size: 0.92rem; color: var(--body-text); line-height: 1.55; }

.day-result { font-size: 0.96rem; color: var(--forest); }
.day-result strong { color: var(--gold); font-weight: 700; }

.program-note { font-size: 0.88rem; color: var(--muted-text); max-width: 700px; margin-top: 2.4rem; }
.program__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; margin-top: 2.4rem; }

/* ==========================================================================
   Team
   ========================================================================== */

.team { background: var(--forest); padding: 7rem 2.5rem 6rem; }
.team__wrap { max-width: var(--max-content); margin: 0 auto; }
.team__header { max-width: 700px; margin-bottom: 3.5rem; }
.team__header h1 { color: var(--text-white); }
.team__header p { color: var(--sand); font-size: 1.02rem; }

/* Four leads share one row; a 3-col grid would leave the fourth orphaned. */
.team-leads { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-bottom: 3rem; }
.team-lead {
  background: rgba(247,245,239,0.04);
  border: 1px solid rgba(247,245,239,0.12);
  border-radius: 22px;
  padding: 2.2rem;
}
.team-lead__photo { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; margin-bottom: 1.2rem; }
.team-lead__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-lead h2 { font-size: 1.5rem; color: var(--text-white); margin: 0.2rem 0 0.8rem; }
.team-lead p { color: var(--sand); font-size: 0.94rem; margin-bottom: 1rem; }
.team-lead .link-quiet { color: var(--gold-light); }

/* Second title line — sits under the name, above the one-line preview. */
.team-lead__subtitle { color: var(--gold-light); margin-bottom: 0.6rem; }

/* The "Подробнее" trigger is a <button> (it opens a dialog, it is not a link),
   so strip the UA button chrome and let .link-quiet own the appearance. */
.link-quiet:is(button) {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 0 0 3px;
  font-family: inherit;
  font-size: 0.95rem;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.link-quiet--underline:is(button) { border-bottom-color: var(--gold); }

.team-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 3.5rem; }
.team-gallery figure { border-radius: 18px; overflow: hidden; aspect-ratio: 3/4; }
.team-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ease); }
.team-gallery figure:hover img { transform: scale(1.05); }

/* Two remaining placeholder roles, centred so they don't float against the
   left edge of a full-width row. Capped so they keep their compact proportions. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 240px));
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3.5rem;
}
.team-card {
  border: 1px dashed rgba(247,245,239,0.2);
  border-radius: 18px;
  padding: 1.4rem;
  text-align: center;
}
.placeholder-photo {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(247,245,239,0.08);
  margin: 0 auto 1rem;
}
.team-card .eyebrow-sm { color: var(--gold-light); margin-bottom: 0.4rem; }
.team-card__note { font-size: 0.82rem; color: var(--sand); opacity: 0.7; font-style: italic; }

/* ==========================================================================
   Team biography modal
   ========================================================================== */

.team-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
}
.team-modal[hidden] { display: none; }

.team-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 14, 11, 0.72);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.team-modal__dialog {
  position: relative;
  width: min(560px, 100%);
  max-height: min(86vh, 760px);
  overflow-y: auto;
  background: #1A2B23;
  border: 1px solid rgba(247, 245, 239, 0.14);
  border-radius: 22px;
  padding: 2.6rem 2.4rem 2.4rem;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.team-modal.is-open .team-modal__overlay { opacity: 1; }
.team-modal.is-open .team-modal__dialog { opacity: 1; transform: none; }

.team-modal__close {
  position: absolute;
  top: 1.1rem; right: 1.1rem;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(247, 245, 239, 0.06);
  border: 1px solid rgba(247, 245, 239, 0.14);
  border-radius: 50%;
  color: var(--sand);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.team-modal__close:hover,
.team-modal__close:focus-visible { background: rgba(247, 245, 239, 0.12); color: var(--text-white); border-color: var(--gold); }

.team-modal__photo {
  width: 128px; height: 128px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 1.4rem;
}
.team-modal__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.team-modal h2 { font-size: 1.7rem; color: var(--text-white); margin: 0.2rem 0 0.6rem; }
.team-modal__subtitle { color: var(--gold-light); font-size: 0.98rem; margin-bottom: 1.2rem; }
.team-modal__bio p { color: var(--sand); font-size: 0.96rem; line-height: 1.7; margin-bottom: 1rem; }
.team-modal__bio p:last-child { margin-bottom: 0; }

@media (max-width: 560px) {
  .team-modal { padding: 1.2rem; }
  .team-modal__dialog { padding: 2.4rem 1.5rem 1.8rem; max-height: 88vh; }
  .team-modal__photo { width: 96px; height: 96px; }
}

.team-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1vw + 1rem, 1.55rem);
  color: var(--text-white);
  max-width: 780px;
  margin: 0 auto 2.4rem;
  text-align: center;
}
.team__cta { text-align: center; }
.team__cta .link-quiet { color: var(--gold-light); }

/* ==========================================================================
   Place (Location)
   ========================================================================== */

.place { position: relative; padding: 7rem 2.5rem; overflow: hidden; }
.place__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.place__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,14,11,0.75), rgba(8,14,11,0.55) 40%, rgba(8,14,11,0.85));
}
.place__wrap { position: relative; z-index: 2; max-width: var(--max-content); margin: 0 auto; }
.place h1 { color: var(--text-white); }
.place__intro { color: var(--ivory); font-size: 1.05rem; max-width: var(--max-prose); margin-bottom: 3rem; }

.place-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-bottom: 3rem; }
.place-grid article {
  background: rgba(16,26,22,0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(247,245,239,0.14);
  border-radius: 18px;
  padding: 1.8rem 1.6rem;
}
.place-grid h2 { font-size: 1.15rem; color: var(--gold-light); margin-bottom: 0.6rem; }
.place-grid p { font-size: 0.9rem; color: var(--ivory); opacity: 0.85; }

/* Nature gallery of Çıralı — sits on the dark place section. */
.place-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-bottom: 2.6rem; }
.place-gallery figure { border-radius: 18px; overflow: hidden; aspect-ratio: 3/4; box-shadow: 0 22px 44px -24px rgba(0,0,0,0.6); }
.place-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ease); }
.place-gallery figure:hover img { transform: scale(1.05); }

.place-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1vw + 1rem, 1.55rem);
  color: var(--text-white);
  max-width: 700px;
  margin-bottom: 2.4rem;
}

/* ==========================================================================
   Accommodation (stay)
   ========================================================================== */

.stay { background: var(--ivory); padding: 7rem 2.5rem 6rem; }
.stay__wrap { max-width: var(--max-content); margin: 0 auto; }
.stay h1 { color: var(--forest); margin-bottom: 1.4rem; }
.stay > .stay__wrap > .prose { margin-bottom: 3rem; }

.stay__media { border-radius: 24px; overflow: hidden; margin-bottom: 3rem; aspect-ratio: 21/9; box-shadow: 0 24px 50px -22px rgba(16,26,22,0.3); }
.stay__media img { width: 100%; height: 100%; object-fit: cover; }

.stay-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-bottom: 3rem; }
.stay-grid article { background: #fff; border: 1px solid rgba(29,48,40,0.08); border-radius: 20px; padding: 1.8rem 1.6rem; box-shadow: 0 12px 30px -18px rgba(16,26,22,0.18); }
.stay-grid h2 { font-size: 1.1rem; color: var(--forest); margin-bottom: 0.6rem; }
.stay-grid p { font-size: 0.9rem; color: var(--muted-text); }

/* Photo gallery of the resort — rooms, bungalows and grounds. */
.stay-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 3rem; }
.stay-gallery figure { border-radius: 18px; overflow: hidden; aspect-ratio: 4/5; box-shadow: 0 14px 34px -20px rgba(16,26,22,0.3); }
.stay-gallery img, .stay-gallery video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ease); }
.stay-gallery figure:hover img, .stay-gallery figure:hover video { transform: scale(1.05); }

/* ==========================================================================
   Video reels — portrait clips woven into Location & Проживание
   Editorial rows (video beside copy, alternating sides) + full-width bands.
   ========================================================================== */

.reel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin: clamp(3rem, 6vw, 5.5rem) 0;
}
.reel__media {
  justify-self: center;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 9 / 16;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 34px 64px -32px rgba(8,14,11,0.55);
}
.reel__media video, .reel__media img { width: 100%; height: 100%; object-fit: cover; display: block; background: #0d1712; }
.reel__media--photo { aspect-ratio: 3 / 4; max-width: 400px; }
.reel__media--wide { aspect-ratio: 4 / 3; max-width: 540px; }
.reel--reverse .reel__media { order: 2; }
.reel--reverse .reel__text { order: 1; }
.reel__text { max-width: 42ch; }
.reel__text .section-eyebrow { margin-bottom: 0.9rem; }
.reel__text h3 { font-family: var(--font-serif); font-size: clamp(1.5rem, 2vw + 0.6rem, 2.1rem); margin-bottom: 0.9rem; }

/* Section-scoped text colours */
.place .reel__text h3 { color: var(--text-white); }
.place .reel__text p { color: var(--sand); font-size: 1.02rem; }
.stay .reel__text h3 { color: var(--forest); }
.stay .reel__text p { color: var(--muted-text); font-size: 1.02rem; }

@media (max-width: 767px) {
  .reel { grid-template-columns: 1fr; gap: 1.6rem; }
  .reel__media { order: -1; max-width: 300px; }
  .reel--reverse .reel__media, .reel--reverse .reel__text { order: 0; }
  .reel__text { max-width: none; text-align: center; margin: 0 auto; }
}

.included-box {
  max-width: 700px;
  padding: 2rem 2.2rem;
  background: rgba(184,154,98,0.08);
  border-radius: 16px;
  margin-bottom: 3rem;
}
.included-box h2 { font-size: 1.2rem; color: var(--forest); margin-bottom: 1rem; }

/* ==========================================================================
   Pricing
   ========================================================================== */

.pricing { background: var(--bg-dark); padding: 7rem 2.5rem; }
.pricing__wrap { max-width: 980px; margin: 0 auto; }
.pricing h1 { color: var(--text-white); }
.pricing .prose p { color: var(--sand); }
.pricing .prose { margin-bottom: 3rem; }

.price-card {
  background: rgba(247,245,239,0.04);
  border: 1px solid rgba(184,154,98,0.4);
  border-radius: 24px;
  padding: 3rem 2.6rem;
  margin-bottom: 2.4rem;
}
.price-card__name { font-size: 0.95rem; color: var(--sand); margin-bottom: 0.6rem; }
.price-card__amount { font-family: var(--font-serif); font-size: clamp(3rem, 3vw + 2rem, 4.5rem); color: var(--gold-light); font-weight: 600; line-height: 1; }
.price-card__amount span { font-size: 0.4em; color: var(--sand); margin-left: 0.4rem; }
.price-card__meta { font-size: 0.92rem; color: var(--sand); margin: 0.8rem 0 2.2rem; padding-bottom: 2.2rem; border-bottom: 1px solid rgba(247,245,239,0.14); }

/* Accommodation tiers */
.tier-heading { font-family: var(--font-serif); color: var(--text-white); font-size: 1.6rem; margin: 0 0 0.6rem; }
.tier-sub { color: var(--sand); font-size: 0.95rem; margin-bottom: 1.8rem; max-width: var(--max-prose); }
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-bottom: 3rem; }
.tier {
  background: rgba(247,245,239,0.04);
  border: 1px solid rgba(247,245,239,0.14);
  border-radius: 20px;
  padding: 1.8rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.tier:hover { border-color: rgba(184,154,98,0.5); transform: translateY(-4px); box-shadow: 0 24px 44px -26px rgba(0,0,0,0.55); }
.tier--base { border-color: rgba(184,154,98,0.55); }
.tier__badge { align-self: flex-start; font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: #16241d; background: var(--gold); padding: 0.24rem 0.6rem; border-radius: 999px; font-weight: 700; }
.tier__name { font-family: var(--font-serif); font-size: 1.35rem; color: var(--text-white); }
.tier__price { font-family: var(--font-serif); font-size: 1.9rem; color: var(--gold-light); font-weight: 600; line-height: 1; }
.tier__price span { display: block; font-family: var(--font-sans); font-size: 0.8rem; color: var(--sand); margin-top: 0.35rem; letter-spacing: 0.02em; }
.tier__desc { font-size: 0.9rem; color: var(--ivory); opacity: 0.82; line-height: 1.6; }
.tier__note { font-size: 0.8rem; color: var(--gold-light); opacity: 0.9; letter-spacing: 0.02em; }

/* Expandable tariff details */
.tier__toggle {
  margin-top: auto;
  align-self: flex-start;
  background: none;
  border: none;
  border-bottom: 1px solid var(--gold);
  padding: 0 0 3px;
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--gold-light);
  cursor: pointer;
  text-align: left;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.tier__toggle:hover, .tier__toggle:focus-visible { color: var(--text-white); border-color: var(--gold-light); }

/* Height animates from 0fr→1fr; collapsed panel is also hidden from screen readers. */
.tier__details {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.45s var(--ease), visibility 0.45s var(--ease);
  min-width: 0;
}
.tier.is-open .tier__details { grid-template-rows: 1fr; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .tier__details { transition: none; }
}
/* Padding/border animate too, so the closed panel collapses to exactly 0. */
.tier__details-inner {
  overflow: hidden;
  min-width: 0;
  padding-top: 0;
  border-top: 0 solid rgba(247,245,239,0.14);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  transition: padding-top 0.45s var(--ease), border-top-width 0.45s var(--ease);
}
.tier.is-open .tier__details-inner { padding-top: 1.1rem; border-top-width: 1px; }
@media (prefers-reduced-motion: reduce) {
  .tier__details-inner { transition: none; }
}
.tier__details p { font-size: 0.88rem; color: var(--ivory); opacity: 0.85; line-height: 1.65; overflow-wrap: break-word; }
.tier__details-lead { font-weight: 600; opacity: 1 !important; color: var(--gold-light) !important; }
.tier__list { display: flex; flex-direction: column; gap: 0.45rem; }
.tier__list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.86rem;
  color: var(--ivory);
  opacity: 0.85;
  line-height: 1.6;
  overflow-wrap: break-word;
}
.tier__list li::before {
  content: '';
  position: absolute; left: 0; top: 0.62em;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold);
}
.tier__cta { align-self: flex-start; margin-top: 0.4rem; font-size: 0.8rem; padding: 0.85rem 1.5rem; }

/* PREMIUM — thin gold frame + restrained gold wash */
.tier--premium {
  border-color: rgba(184,154,98,0.65);
  background:
    linear-gradient(rgba(184,154,98,0.07), rgba(184,154,98,0.02)),
    rgba(247,245,239,0.04);
}
.tier--premium:hover { border-color: rgba(184,154,98,0.85); }

.price-card__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; }
.price-card__cols h2 { font-size: 1.05rem; color: var(--text-white); margin-bottom: 1rem; }
.price-card .checklist li, .price-card .excludelist li { color: var(--ivory); opacity: 0.88; }

.pricing-notes { display: flex; flex-direction: column; gap: 1rem; max-width: var(--max-prose); margin-bottom: 3rem; }
.pricing-notes p { color: var(--sand); font-size: 0.95rem; }
.pricing-notes strong { color: var(--text-white); }

.pricing__cta { max-width: 560px; }
.pricing__cta-title { font-family: var(--font-serif); font-size: 1.5rem; color: var(--text-white); margin-bottom: 0.6rem; }
.pricing__cta p:not(.pricing__cta-title) { color: var(--sand); margin-bottom: 1.6rem; }

/* ==========================================================================
   Application
   ========================================================================== */

.application { background: var(--bg-dark); padding: 7rem 2.5rem 5rem; }
.application__wrap {
  max-width: var(--max-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}
.application h1 { color: var(--text-white); }
.application .prose p { color: var(--sand); }
.application .prose { margin-bottom: 2.4rem; }

.steps-title { font-size: 1.15rem; color: var(--text-white); margin-bottom: 1.2rem; }
.steps { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 2.6rem; }
.steps li { display: flex; align-items: center; gap: 1rem; color: var(--ivory); font-size: 0.98rem; }
.steps__num {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold-light);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif);
  font-size: 0.95rem;
}

.limited-seats {
  padding: 1.6rem 1.8rem;
  background: rgba(247,245,239,0.04);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
}
.limited-seats h2 { font-size: 1.05rem; color: var(--text-white); margin-bottom: 0.5rem; }
.limited-seats p { color: var(--sand); font-size: 0.92rem; }

.application__form { display: flex; flex-direction: column; gap: 1.3rem; align-self: start; }
.form-row { display: flex; flex-direction: column; gap: 0.5rem; }
.form-row label { font-size: 0.82rem; color: var(--sand); letter-spacing: 0.03em; }
.form-row input, .form-row textarea {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--text-white);
  background: rgba(247,245,239,0.05);
  border: 1px solid rgba(247,245,239,0.18);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
  resize: vertical;
}
.form-row input:focus, .form-row textarea:focus { outline: none; border-color: var(--gold); background: rgba(247,245,239,0.08); }

.form-note { font-size: 0.85rem; color: var(--sand); opacity: 0.85; text-align: center; }
.form-note--trust { max-width: 440px; margin: 0 auto; }
.application__status { font-size: 0.9rem; color: var(--gold-light); min-height: 1.2em; text-align: center; }

.application__farewell {
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--text-white);
  margin-top: 5rem;
}
.application__farewell span { display: block; font-size: 0.9rem; font-style: normal; letter-spacing: 0.08em; color: var(--gold-light); margin-top: 0.6rem; text-transform: uppercase; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--bg-dark);
  color: var(--sand);
  text-align: center;
  padding: 2rem 2.5rem;
  font-size: 0.82rem;
  border-top: 1px solid rgba(247,245,239,0.08);
}
.site-footer__legal { opacity: 0.65; margin-top: 0.4rem; font-size: 0.78rem; }

/* ==========================================================================
   Responsive — tablet
   ========================================================================== */

@media (max-width: 1100px) {
  .about__body { grid-template-columns: 1fr; }
  .about-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 1.2rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(29,48,40,0.1); margin-bottom: 1rem; }
  .about-nav a { border-left: none; border-bottom: 2px solid transparent; padding-left: 0; padding-bottom: 0.3rem; }
  .about-nav a:hover, .about-nav a.is-active { border-color: var(--gold); }
  .about-pillars { grid-template-columns: repeat(2, 1fr); }

  .audience-grid { grid-template-columns: repeat(2, 1fr); }
  .results-grid { grid-template-columns: repeat(2, 1fr); }
  .journey-timeline { grid-template-columns: repeat(3, 1fr); row-gap: 2.5rem; }
  .journey-timeline::before { display: none; }

  /* Four lead cards get cramped at this width — pair them up instead. */
  .team-leads { grid-template-columns: repeat(2, 1fr); }
  .team-lead__photo { width: 96px; height: 96px; }
  /* Tighten the header so logo + nav + CTA still fit comfortably. */
  .nav-desktop { gap: 1.1rem; }
  .nav-desktop ul { gap: 0.95rem; }

  .team-gallery { grid-template-columns: repeat(3, 1fr); }
  .place-grid { grid-template-columns: repeat(2, 1fr); }
  .stay-grid { grid-template-columns: repeat(2, 1fr); }
  .stay-gallery { grid-template-columns: repeat(3, 1fr); }
  .price-card__cols { grid-template-columns: 1fr; gap: 1.6rem; }
  .tier-grid { grid-template-columns: repeat(2, 1fr); }
  .application__wrap { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Responsive — mobile
   ========================================================================== */

@media (max-width: 767px) {
  .site-header { padding: 1.2rem 1.4rem; }
  .nav-desktop { display: none; }
  .hamburger { display: flex; }

  .hero-content { padding: 7rem 1.4rem 2rem; }
  .hero-title { font-size: clamp(2.4rem, 10vw, 3.4rem); }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 1rem; }
  .hero-actions .btn { width: 100%; }
  .hero-facts { flex-direction: column; padding: 1.6rem 1.4rem 2.2rem; gap: 1.4rem; }
  .scroll-indicator { right: 1.4rem; bottom: 1.4rem; }

  h1, h2 { font-size: clamp(1.9rem, 6vw, 2.6rem); }

  .about, .who, .results, .journey, .program, .team, .place, .stay, .pricing, .application {
    padding-left: 1.4rem;
    padding-right: 1.4rem;
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .about-pillars { grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
  .audience-grid { grid-template-columns: 1fr; }
  .results-grid { grid-template-columns: 1fr; }
  .team-leads { grid-template-columns: 1fr; }
  .tier-grid { grid-template-columns: 1fr; }
  .stay-gallery { grid-template-columns: repeat(2, 1fr); }
  .place-gallery { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; }
  .before-after__cols { grid-template-columns: 1fr; gap: 1.6rem; }

  .journey-timeline { grid-template-columns: 1fr; gap: 2rem; }

  .day summary { grid-template-columns: 60px 1fr 24px; gap: 1rem; }
  .day-body { margin-left: 0; }
  .day-schedule__item { grid-template-columns: 1fr; gap: 0.3rem; }
  .day-schedule__time { padding-top: 0; }

  .team-gallery { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .place-grid { grid-template-columns: 1fr; }
  .stay-grid { grid-template-columns: 1fr; }

  .about-actions, .audience-actions, .results-actions, .program__cta { flex-direction: column; align-items: stretch; }
  .about-actions .btn, .audience-actions .btn, .results-actions .btn, .program__cta .btn { width: 100%; }

  .mobile-menu ul { gap: 1.3rem; }
  .mobile-menu a:not(.btn) { font-size: 1.4rem; }
}

@media (max-width: 400px) {
  .about-pillars, .team-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Guide (long-form GEO/EEAT hub page)
   ========================================================================== */

.guide { background: var(--ivory); padding: 7rem 2.5rem 6rem; }
.guide__wrap { max-width: 760px; margin: 0 auto; }

.guide__header h1 { color: var(--forest); }
.guide-byline {
  font-size: 0.85rem;
  color: var(--muted-text);
  margin-bottom: 1.6rem;
}
.guide-byline a { border-bottom: 1px solid var(--gold); }
.guide-intro { font-size: 1.05rem; color: var(--body-text); max-width: var(--max-prose); }
.guide-intro a { border-bottom: 1px solid var(--gold); }

.guide-toc {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 2.5rem 0 3.5rem;
  padding: 1.6rem 1.8rem;
  background: rgba(184,154,98,0.07);
  border-radius: 14px;
}
.guide-toc a {
  font-size: 0.95rem;
  color: var(--forest);
  border-bottom: 1px solid transparent;
}
.guide-toc a:hover { border-color: var(--gold); }

.guide-section { margin-bottom: 3.2rem; scroll-margin-top: 6rem; }
.guide-section h2 { font-size: 1.7rem; color: var(--forest); margin-bottom: 1rem; }
.guide-section p { color: var(--body-text); margin-bottom: 0.9rem; max-width: var(--max-prose); }
.guide-section p:last-child { margin-bottom: 0; }
.guide-section a:not(.btn) { border-bottom: 1px solid var(--gold); }

.table-wrap { overflow-x: auto; margin-top: 1rem; }
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
  font-size: 0.92rem;
}
.comparison-table th, .comparison-table td {
  text-align: left;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid rgba(29,48,40,0.12);
}
.comparison-table thead th { color: var(--forest); font-weight: 700; border-bottom: 2px solid var(--gold); }
.comparison-table tbody th { color: var(--forest); font-weight: 600; white-space: nowrap; }
.comparison-table td { color: var(--muted-text); }

.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-item { border-top: 1px solid rgba(29,48,40,0.12); padding: 1.2rem 0; }
.faq-item:last-child { border-bottom: 1px solid rgba(29,48,40,0.12); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--forest);
  position: relative;
  padding-right: 2rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 0; top: 0;
  color: var(--gold);
  font-size: 1.2rem;
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item p { margin-top: 0.9rem; max-width: var(--max-prose); }

/* People cards on the guide page — mirrors .glossary hierarchy and spacing. */
.guide-people { display: flex; flex-direction: column; gap: 1.2rem; }
.guide-people__item h3 { font-weight: 700; color: var(--forest); font-family: var(--font-serif); font-size: 1.15rem; }
.guide-people__item p { color: var(--body-text); margin-top: 0.3rem; margin-bottom: 0; max-width: var(--max-prose); }
.guide-people__role { font-weight: 600; }

.glossary { display: flex; flex-direction: column; gap: 1.2rem; }
.glossary__item dt { font-weight: 700; color: var(--forest); font-family: var(--font-serif); font-size: 1.15rem; }
.glossary__item dd { color: var(--body-text); margin-top: 0.3rem; max-width: var(--max-prose); }

.sources-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 1rem 0; }
.sources-list li { color: var(--body-text); font-size: 0.95rem; padding-left: 1.2rem; position: relative; }
.sources-list li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.sources-note { font-size: 0.85rem; color: var(--muted-text); font-style: italic; }
.guide-section h3 { font-size: 1.15rem; color: var(--forest); margin-top: 1.8rem; margin-bottom: 0.6rem; }
.guide-people__item h3 { margin-top: 0; }

.guide__cta {
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(29,48,40,0.14);
  text-align: center;
}
.guide__cta-title { font-family: var(--font-serif); font-size: 1.5rem; color: var(--forest); margin-bottom: 1.4rem; }
.guide__cta-actions { display: flex; justify-content: center; align-items: stretch; gap: 1.4rem; flex-wrap: wrap; }

/*
  The guide sits on a light background, where the default .btn--secondary
  (white text on transparent) was invisible until hover — that read as the
  button "appearing on hover". Both buttons are now permanently visible,
  share the same radius and stretch to equal height, and hover only shifts
  colour so nothing reflows.
*/
.guide__cta-actions .btn { border-radius: 6px; }
.guide__cta-actions .btn--gold:hover,
.guide__cta-actions .btn--gold:focus-visible {
  background: #A2854F;
  transform: none;
}
.guide__cta-actions .btn--secondary {
  background: transparent;
  color: var(--forest);
  border-color: var(--gold);
}
.guide__cta-actions .btn--secondary:hover,
.guide__cta-actions .btn--secondary:focus-visible {
  background: rgba(184,154,98,0.12);
  border-color: var(--gold);
  color: var(--forest);
}
.guide__cta-actions .btn:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
}

.page-footnote { margin-top: 1.5rem; font-size: 0.92rem; color: var(--muted-text); }
.page-footnote a { border-bottom: 1px solid var(--gold); }

@media (max-width: 767px) {
  .guide { padding: 5rem 1.4rem; }
  .guide-toc { padding: 1.3rem 1.4rem; }
  .guide__cta-actions { flex-direction: column; align-items: stretch; }
  .guide__cta-actions .btn { width: 100%; }
}