/*
  ══════════════════════════════════════════════
  Shorouk Al Abd — Evolve Coaching
  styles/styles.css

  PALETTE — three brand colors + gold metallic:
  #141472  Deep Navy    — all section backgrounds (monotone)
  #6666FF  Periwinkle   — interactive highlights, heading em
  #3333FF  Royal Blue   — primary buttons

  Gold metallic accents:
  #C9A84C  Gold         — warm mid gold
  #EAC95A  Gold Hi      — bright gold
  #F5DFA0  Gold Bright  — shimmer peak
  #7A5210  Gold Lo      — deep bronze shadow

  Text: rgba(255,255,255,x) on all sections
  ══════════════════════════════════════════════
*/

/* ══ VARIABLES ══ */
:root {
  --deep:   #141472;
  --mid:    #6666FF;
  --bright: #3333FF;
  --royal:  #3333FF;
  --peri:   #6666FF;

  /* Gold metallic palette */
  --gold:        #C9A84C;
  --gold-hi:     #EAC95A;
  --gold-bright: #F5DFA0;
  --gold-lo:     #7A5210;

  /* Text — white at varying opacity */
  --t-hi:   rgba(255,255,255,0.95);
  --t-body: rgba(255,255,255,0.72);
  --t-soft: rgba(255,255,255,0.50);
  --t-mute: rgba(255,255,255,0.28);

  /* Dividers */
  --div-dark:  rgba(255,255,255,0.07);
  --div-mid:   rgba(255,255,255,0.14);
  --div-gold:  rgba(201,168,76,0.20);   /* gold-tinted separator */

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Nunito', sans-serif;

  /* ── Program identities ──────────────────────────────────────────
     Three neighbours on the colour wheel — sapphire → amethyst →
     sunrise — chosen as one analogous sweep rather than three
     unrelated hues, so the programs read as a family in three voices.
     Gold remains the shared spine across all of them.
     *-spin rotates the gold line-art PNGs into each hue, so one set of
     sacred geometry carries three identities with no new assets.
     Consumed by the doorway cards below and by the program pages in
     game-field.css — this block is the single source of truth. */

  /* The Game Field — structure, strategy, the board */
  --gf-a:      #8E97FF;
  --gf-a-hi:   #C4C9FF;
  --gf-a-deep: #2B2F94;
  --gf-a-rgb:  142, 151, 255;
  --gf-a-spin: 192deg;

  /* Return to 37 — dawn, warmth returning */
  --r37-a:      #E9A184;
  --r37-a-hi:   #F7C8B0;
  --r37-a-deep: #8A4430;
  --r37-a-rgb:  233, 161, 132;
  --r37-a-spin: 332deg;

  /* The Alchemy Container — the crucible, transmutation */
  --alc-a:      #B48CE0;
  --alc-a-hi:   #D9C2F2;
  --alc-a-deep: #5A2E86;
  --alc-a-rgb:  180, 140, 224;
  --alc-a-spin: 224deg;
}

/* ══ RESET & BASE ══ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
  background: #141472;
  color: var(--t-hi);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
  cursor: none;
}

/* Grain overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.02;
  pointer-events: none;
  z-index: 9997;
}

/* ══ CURSOR ══ */
.cursor {
  position: fixed;
  width: 7px;
  height: 7px;
  background: var(--gold-hi);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform .1s;
  box-shadow: 0 0 10px rgba(234,201,90,.75), 0 0 22px rgba(201,168,76,.35);
}

.cursor-ring {
  position: fixed;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(201,168,76,.35);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: all .14s ease;
}

/* ══ NAV ══ */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .6rem 4rem;
  transition: background .5s, box-shadow .4s;
}

nav.scrolled {
  background: rgba(20, 20, 114, 0.7);
  backdrop-filter: blur(24px);
  box-shadow: 0 1px 0 var(--div-gold);
}

.nav-logo {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--gold);
  text-decoration: none;
  font-style: italic;
  transition: color .4s, box-shadow .4s, border-color .4s;
  /* border: 1px solid rgba(234,201,90,.45); */
  border-radius: 4px;
  padding: .4rem .65rem;
  /* background-color: rgba(255, 255, 255, 0.08); */
  /* box-shadow:
    0 0 8px rgba(234,201,90,.30),
    0 0 18px rgba(201,168,76,.18),
    inset 0 0 6px rgba(234,201,90,.06); */
}

.nav-logo img {
  height: 80px;
  width: 100%;
  max-width: 100%;
  display: block;
  image-rendering: auto;
  -ms-interpolation-mode: bicubic;
}

.nav-logo:hover {
  border-color: rgba(245,223,160,.70);
  box-shadow:
    0 0 12px rgba(234,201,90,.55),
    0 0 28px rgba(201,168,76,.32),
    inset 0 0 8px rgba(234,201,90,.10);
}

.nav-logo em      { font-style: italic; color: var(--gold-hi); }
.nav-logo.dark em { color: var(--gold); }

.nav-links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}

.nav-links a {
  font-size: .62rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--t-soft);
  text-decoration: none;
  transition: color .3s;
}

.nav-links a:hover              { color: var(--t-hi); }
/* current page — build.mjs stamps aria-current onto the matching link */
.nav-links a[aria-current="page"] { color: var(--gold-hi); }
.footer-nav a[aria-current="page"] { color: var(--gold-hi); }
nav.scrolled .nav-links a       { color: var(--t-body); }
nav.scrolled .nav-links a:hover { color: var(--t-hi); }

.nav-cta {
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #ffffff;
  background: #3333FF;
  text-decoration: none;
  padding: .55rem 1.5rem;
  border-radius: 1px;
  border: 1px solid rgba(201,168,76,.18);
  transition: all .3s;
}

.nav-cta:hover {
  border-color: var(--gold);
  box-shadow: 0 0 18px rgba(51,51,255,.35), inset 0 0 0 1px rgba(234,201,90,.12);
}

/* In-menu copy of the CTA — hidden on desktop, shown inside the hamburger menu on mobile/tablet */
.nav-links .nav-cta { display: none; }

/* ── Mobile nav toggle (hamburger) — hidden on desktop ── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 501;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--t-hi);
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}
nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══ ANIMATIONS ══ */
@keyframes fadeUp   { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes geoSpin  { from { transform:rotate(0); } to { transform:rotate(360deg); } }
@keyframes marq     { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes sparkR   { 0%{transform:translate(0,0) scale(1);opacity:0;} 8%{opacity:1;} 60%{transform:translate(var(--tx,15px),-80px) scale(.5);opacity:.7;} 100%{transform:translate(var(--tx2,30px),-150px) scale(0);opacity:0;} }
@keyframes fpAnim   { 0%{transform:translateY(0) rotate(0deg);opacity:var(--a,.1);} 45%{transform:translateY(-20px) rotate(8deg);opacity:var(--b,.18);} 100%{transform:translateY(0) rotate(0deg);opacity:var(--a,.1);} }
@keyframes porbAnim { 0%,100%{transform:scale(1);opacity:.7;} 50%{transform:scale(1.2);opacity:1;} }
@keyframes goldShimmer { from { background-position: -200% center; } to { background-position: 200% center; } }

/* ══ HERO ══ */
.hero {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background: #141472;
  display: flex;
  align-items: center;
}

/* Ambient gold glow behind content */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 60% at 22% 55%, rgba(201,168,76,.07) 0%, transparent 65%),
    radial-gradient(ellipse 35% 40% at 8% 85%, rgba(51,51,255,.08) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Person's image — right side, ~44% wide, fades into background */
.hero-bg {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 44%;
  z-index: 1;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 18%, black 42%);
  mask-image:         linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 18%, black 42%);
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Gold edge line where image meets background */
.hero-bg::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent,
    rgba(201,168,76,.18) 25%,
    rgba(234,201,90,.45) 50%,
    rgba(201,168,76,.18) 75%,
    transparent);
  z-index: 2;
}

/* Decorative geometry */
.hero-geo-corner {
  position: absolute;
  top: -60px; right: -60px;
  width: 500px; height: 500px;
  z-index: 2;
  pointer-events: none;
  opacity: .04;
  animation: geoSpin 160s linear infinite;
}

/* Text content */
.hero-content {
  position: relative;
  z-index: 3;
  width: 56%;
  padding: 9rem 4rem 6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-kicker {
  font-family: var(--sans);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .55em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.8rem;
  display: flex;
  align-items: center;
  gap: .9rem;
  animation: fadeUp 1s .1s ease both;
}

.hero-kicker span { min-width: 0; }

.hero-kicker::before {
  content: '';
  width: 28px;
  height: 1px;
  background: linear-gradient(to right, var(--gold-lo), var(--gold-hi));
  flex-shrink: 0;
}

.hero-title {
  font-family: var(--serif);
  font-size: clamp(4rem, 7vw, 8rem);
  font-weight: 300;
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--t-hi);
  margin-bottom: 2.5rem;
  animation: fadeUp 1s .2s ease both;
}

.hero-title em     { font-style: italic; color: #6666FF; display: block; }
.hero-title strong { font-weight: 300; color: var(--t-hi); }

.hero-body {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--t-body);
  margin-bottom: 3.5rem;
  font-weight: 300;
  animation: fadeUp 1s .35s ease both;
}

.hero-cta {
  display: inline-block;
  align-self: flex-start;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #141472;
  /* Gold gradient button */
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 38%, var(--gold-lo) 62%, var(--gold-hi) 100%);
  background-size: 200% auto;
  text-decoration: none;
  padding: 1rem 2.8rem;
  border: 1px solid rgba(234,201,90,.35);
  position: relative;
  overflow: hidden;
  transition: all .45s;
  animation: fadeUp 1s .5s ease both;
}

.hero-cta::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg, transparent 20%, rgba(245,223,160,.3) 50%, transparent 80%);
  transition: left .6s ease;
}

.hero-cta:hover {
  background-position: right center;
  box-shadow: 0 8px 30px rgba(201,168,76,.4), 0 0 0 1px rgba(234,201,90,.2);
  transform: translateY(-1px);
}

.hero-cta:hover::after { left: 140%; }

.hero-strip {
  display: flex;
  gap: 4rem;
  margin-top: 5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--div-gold);
  animation: fadeUp 1s .65s ease both;
}

/* Gold gradient stat numbers */
.hero-strip-num {
  font-family: var(--serif);
  font-size: 2.8rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 38%, var(--gold-lo) 62%, var(--gold-hi) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShimmer 4s ease infinite;
}

.hero-strip-label {
  font-size: .54rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--t-body);
  margin-top: .3rem;
}

/* ══ MARQUEE ══ */
.marquee-wrap {
  background: rgba(201,168,76,.04);
  border-top: 1px solid var(--gold-bright);
  border-bottom: 1px solid var(--gold-bright);
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: .85rem 0;
  overflow: hidden;
  white-space: nowrap;
}

.marquee-track {
  display: inline-flex;
  animation: marq 32s linear infinite;
}

.marquee-wrap:hover .marquee-track { animation-play-state: paused; }

.m-item {
  display: inline-flex;
  align-items: center;
  gap: 1.8rem;
  padding: 0 2.5rem;
  font-size: .54rem;
  font-weight: 400;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold-bright);
  opacity: .55;
}

.m-dot {
  width: 3px;
  height: 3px;
  background: var(--gold-hi);
  border-radius: 50%;
  flex-shrink: 0;
  opacity: .7;
}

/* ══ SHARED SECTION UTILITIES ══ */
section { padding: 8rem 4rem; }

.reveal,
.reveal-up,
.reveal-l,
.reveal-r { opacity: 0; transition: opacity .9s ease, transform .9s ease; }

.reveal,
.reveal-up { transform: translateY(30px); }
.reveal-l  { transform: translateX(-50px); }
.reveal-r  { transform: translateX(50px); }

.reveal.in,
.reveal-up.in,
.reveal-l.in,
.reveal-r.in { opacity: 1; transform: none; }

.stagger > * { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s ease; }
.stagger.in > *:nth-child(1) { opacity:1; transform:none; transition-delay:.05s; }
.stagger.in > *:nth-child(2) { opacity:1; transform:none; transition-delay:.18s; }
.stagger.in > *:nth-child(3) { opacity:1; transform:none; transition-delay:.31s; }
.stagger.in > *:nth-child(4) { opacity:1; transform:none; transition-delay:.44s; }
.stagger.in > *:nth-child(5) { opacity:1; transform:none; transition-delay:.57s; }

.word-reveal span { display:inline-block; opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.word-reveal.in span:nth-child(1){opacity:1;transform:none;transition-delay:.04s;}
.word-reveal.in span:nth-child(2){opacity:1;transform:none;transition-delay:.13s;}
.word-reveal.in span:nth-child(3){opacity:1;transform:none;transition-delay:.22s;}
.word-reveal.in span:nth-child(4){opacity:1;transform:none;transition-delay:.31s;}
.word-reveal.in span:nth-child(5){opacity:1;transform:none;transition-delay:.40s;}
.word-reveal.in span:nth-child(6){opacity:1;transform:none;transition-delay:.49s;}

/* Gold section label */
.section-label {
  font-size: .54rem;
  font-weight: 500;
  letter-spacing: .48em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  color: var(--gold);
}

.section-label::before {
  content: '';
  width: 20px;
  height: 1px;
  background: linear-gradient(to right, var(--gold-lo), var(--gold-hi));
  flex-shrink: 0;
}

.sl-c { justify-content: center; }
.sl-c::before { display: none; }

/* Gold draw line */
.draw-line {
  display: block;
  width: 0;
  height: 1px;
  background: linear-gradient(to right, var(--gold), var(--gold-hi), rgba(201,168,76,.15), transparent);
  transition: width 1.4s cubic-bezier(.4,0,.2,1);
  margin: 2rem 0;
}

.draw-line.in { width: 180px; }

/* Floating particles */
.fp {
  position: absolute;
  pointer-events: none;
  animation: fpAnim var(--d,10s) ease-in-out infinite var(--delay,0s);
  opacity: 0;
}
.fp.on { opacity: 1; }

/* Pulsing orbs */
.porb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: porbAnim var(--d,6s) ease-in-out infinite var(--delay,0s);
}

/* ══ ABOUT — white card with gold glow border ══ */
.about {
  position: relative;
  background: url('../img/bg/about.jpg.jpeg') center center / cover no-repeat;
  padding: 8rem 4rem;
  border-top: none;
  /* box-shadow:
    0 0 0 2px rgba(234,201,90,.90),
    0 0 20px rgba(234,201,90,.80),
    0 0 50px rgba(234,201,90,.60),
    0 0 100px rgba(234,201,90,.40),
    0 0 180px rgba(234,201,90,.20),
    inset 0 0 80px rgba(234,201,90,.10); */
}

.about::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 40, 0.9);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: none;
  z-index: 0;
}

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

.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8rem;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}

.about-left {
  font-family: var(--serif);
  font-size: clamp(3rem, 5.5vw, 5.5rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--t-hi);
}

.about-left em { font-style: italic; color: var(--gold-hi); display: block; }

.about-right { padding-top: 1.5rem; }

.about-right p {
  font-size: 1rem;
  line-height: 2;
  color: rgba(255,255,255,.72);
  margin-bottom: 1.6rem;
  font-weight: 300;
}

.about-right strong { color: #ffffff; font-weight: 500; }

.about-divider {
  width: 40px;
  height: 1px;
  background: linear-gradient(to right, var(--gold-lo), var(--gold-hi), transparent);
  margin: 2rem 0;
  display: block;
}

.about-loc {
  font-size: .58rem;
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold-bright);
  opacity: .85;
}

.about-link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-hi);
  text-decoration: none;
  margin-top: 2rem;
  transition: gap .3s, opacity .3s;
}

.about-link:hover { gap: .9rem; opacity: .75; }

/* read-more button */
.about-readmore {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-hi);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  margin-top: .4rem;
  margin-bottom: 1.6rem;
  transition: gap .3s, opacity .3s;
}
.about-readmore:hover { gap: .9rem; opacity: .75; }

.about-readmore-arrow {
  transition: transform .4s ease;
}
.about-readmore[aria-expanded="true"] .about-readmore-arrow {
  transform: rotate(180deg);
}

/* expandable bio */
.about-expand {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .55s cubic-bezier(.4,0,.2,1),
              opacity .45s ease .1s;
  overflow: hidden;
}
.about-expand.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}
.about-expand > * { min-height: 0; }

/* ══ MANIFESTO — #3333FF royal blue statement ══ */
.manifesto {
  background: var(--deep);
  padding: 7rem 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--div-gold);
}

.manifesto::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 60%, rgba(201,168,76,.07) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 60%, rgba(102,102,255,.06) 0%, transparent 65%);
  pointer-events: none;
}

.manifesto-geo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}

.manifesto blockquote {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.5vw, 4.2rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.35;
  color: var(--t-hi);
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}

.manifesto blockquote em { color: var(--gold-hi); font-style: italic; }

.manifesto-attr {
  font-size: .58rem;
  font-weight: 400;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-top: 3rem;
}

.manifesto-attr-sub {
  font-size: .55rem;
  font-weight: 300;
  letter-spacing: .18em;
  color: rgba(255,255,255,.45);
  margin-top: .8rem;
  text-transform: none;
}

.manifesto-attr-sub em {
  font-style: italic;
  color: rgba(255,255,255,.58);
}

.manifesto-divider {
  width: 60px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(234,201,90,.35), transparent);
  margin: 3.5rem auto;
}

.manifesto-secondary {
  font-size: clamp(1rem, 2.2vw, 1.4rem);
  color: rgba(255,255,255,.70);
  font-style: italic;
  font-weight: 300;
  max-width: 680px;
  line-height: 1.85;
}
/* ══ PILLARS — matches about section #6666FF ══ */
/* ══ PILLARS — bg image (same as former about) ══ */
.pillars {
  position: relative;
  background: url('../img/bg/sc3.png') center center / cover no-repeat;
  padding: 8rem 4rem;
  border-top: 1px solid var(--div-gold);
}

.pillars::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 40, 0.90);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 0;
}

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

.pillars-header {
  max-width: 1200px;
  margin: 0 auto 5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: end;
  border-bottom: 1px solid rgba(201,168,76,.30);
  padding-bottom: 4rem;
}

.pillars-header h2 {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 5vw, 5rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.01em;
  background: linear-gradient(135deg, var(--gold-lo) 0%, var(--gold-hi) 50%, var(--gold-bright) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pillars-header h2 em { font-style: italic; -webkit-text-fill-color: transparent; }
.pillars-header p     { font-size: .95rem; line-height: 1.9; color: rgba(245,223,160,.72); align-self: end; }

/* Cards grid — same feel as about section two-col layout */
/* Fallback identity lives on the parent so a card's own modifier — same
   specificity, but a descendant — always wins. */
.pillars-list {
  --pa: var(--gold-hi);
  --pa-hi: var(--gold-bright);
  --pa-rgb: 234, 201, 90;
  --pa-spin: 0deg;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  overflow: visible;
}

/* Each doorway wears its program's colour — the same tokens the program
   page itself uses, so the card and the page it opens onto match. */
.pillar-row--gamefield { --pa: var(--gf-a);  --pa-hi: var(--gf-a-hi);  --pa-rgb: var(--gf-a-rgb);  --pa-spin: var(--gf-a-spin); }
.pillar-row--return37  { --pa: var(--r37-a); --pa-hi: var(--r37-a-hi); --pa-rgb: var(--r37-a-rgb); --pa-spin: var(--r37-a-spin); }
.pillar-row--alchemy   { --pa: var(--alc-a); --pa-hi: var(--alc-a-hi); --pa-rgb: var(--alc-a-rgb); --pa-spin: var(--alc-a-spin); }

.pillar-row {
  background:
    linear-gradient(165deg, rgba(var(--pa-rgb), .13) 0%, rgba(10,10,52,.62) 55%, rgba(8,8,40,.78) 100%);
  border: 1px solid rgba(var(--pa-rgb), .38);
  border-top: 2px solid var(--pa);
  padding: 3rem 2.5rem;
  position: relative;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s, background .4s, border-color .4s;
  display: flex;
  flex-direction: column;
  gap: 0;
  will-change: transform;
}

/* Gold shimmer sweep — mirrors about section draw-line feel */
.pillar-row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg,
    rgba(var(--pa-rgb), .20) 0%,
    rgba(var(--pa-rgb), .10) 40%,
    transparent 70%);
  opacity: 0;
  transition: opacity .45s;
}

.pillar-row:hover {
  transform: scale(1.04);
  background:
    linear-gradient(165deg, rgba(var(--pa-rgb), .22) 0%, rgba(10,10,52,.72) 55%, rgba(8,8,40,.86) 100%);
  border-color: rgba(var(--pa-rgb), .70);
  border-top-color: var(--pa-hi);
  box-shadow:
    0 20px 60px rgba(0,0,10,.60),
    0 0 0 1px rgba(var(--pa-rgb), .30),
    0 0 50px rgba(var(--pa-rgb), .22),
    inset 0 0 40px rgba(var(--pa-rgb), .10);
  z-index: 2;
}
.pillar-row:hover::before { opacity: 1; }

/* Gold gradient ordinal — same as about-left heading feel */
.pillar-row-num {
  font-family: var(--serif);
  font-size: 3.2rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1;
  margin-bottom: 1.6rem;
  color: var(--pa);
  -webkit-text-fill-color: var(--pa);
  transition: opacity .4s;
  position: relative;
  z-index: 1;
}


.pillar-row-title {
  position: relative;
  z-index: 1;
  margin-bottom: 1.8rem;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid rgba(var(--pa-rgb), .28);
}

.pillar-row-title h3 {
  font-family: var(--serif);
  font-size: clamp(1.55rem, 2.2vw, 2rem);
  font-weight: 300;
  color: #ffffff;
  margin-bottom: 0;
  line-height: 1.2;
}

.pillar-row-title .pillar-icon-svg {
  width: 54px;
  height: 54px;
  margin-bottom: 1.2rem;
  opacity: .95;
  color: var(--pa);
  transition: opacity .3s, transform .6s;
  filter: drop-shadow(0 0 10px rgba(var(--pa-rgb), .55));
}
.pillar-row:hover .pillar-icon-svg { opacity: 1; transform: rotate(18deg); }

/* One symbol per doorway, faint, turning slowly behind the copy */
.pillar-sym {
  position: absolute;
  right: -22%;
  bottom: -18%;
  width: 68%;
  opacity: .11;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: hue-rotate(var(--pa-spin));
  animation: geoSpin 200s linear infinite;
}
.pillar-row:nth-child(2) .pillar-sym { animation-direction: reverse; }

/* Enter link */
.pillar-enter {
  position: relative;
  z-index: 1;
  margin-top: 1.6rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  align-self: flex-start;
  font-family: var(--sans);
  font-size: .54rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--pa);
  border-bottom: 1px solid rgba(var(--pa-rgb), .40);
  padding-bottom: .3rem;
  transition: color .3s, gap .3s, border-color .3s;
}
.pillar-enter:hover { color: var(--pa-hi); gap: .85rem; border-color: var(--pa-hi); }


.pillar-row-body {
  position: relative;
  z-index: 1;
  flex: 1;
}

.pillar-row-body p {
  font-size: .88rem;
  line-height: 2;
  color: rgba(255,255,255,.72);
  font-weight: 300;
}

.pillar-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.4rem; }

.tag {
  font-size: .5rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .26rem .7rem;
  border: 1px solid rgba(var(--pa-rgb), .45);
  color: var(--pa-hi);
  background: rgba(var(--pa-rgb), .10);
  border-radius: 1px;
  transition: all .25s;
  opacity: .9;
}


/* ══ PATHWAYS — Vertical Ceremonial Timeline ══ */
@keyframes orbPulse {
  0%, 100% { transform: scale(1);    opacity: .85; }
  50%       { transform: scale(1.06); opacity: 1; }
}
@keyframes spineGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes connExpand {
  from { width: 0; opacity: 0; }
  to   { width: 100%; opacity: 1; }
}

.pathways {
  background: #141472;
  padding: 8rem 4rem 9rem;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--div-gold);
}

/* Ambient radial glows */
.pw-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
}
.pw-glow-1 {
  width: 600px; height: 600px;
  top: -100px; left: -150px;
  background: radial-gradient(circle, rgba(51,51,255,.09) 0%, transparent 65%);
}
.pw-glow-2 {
  width: 500px; height: 500px;
  top: 40%; right: -100px;
  background: radial-gradient(circle, rgba(201,168,76,.06) 0%, transparent 65%);
}
.pw-glow-3 {
  width: 400px; height: 400px;
  bottom: -80px; left: 30%;
  background: radial-gradient(circle, rgba(102,102,255,.07) 0%, transparent 65%);
}

.pw-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

/* ── Header ── */
.pw-header { margin-bottom: 6rem; text-align: center; }

.pw-header .section-label { justify-content: center; }
.pw-header .section-label::before { display: none; }

.pw-header h2 {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 5.5vw, 5.2rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--t-hi);
  margin-bottom: 1.4rem;
}
.pw-header h2 em { font-style: italic; color: var(--gold-hi); }

.pw-header-sub {
  font-size: .95rem;
  line-height: 1.9;
  color: rgba(255,255,255,.55);
  font-weight: 300;
  max-width: 520px;
  margin: 0 auto;
}

/* ── Timeline ── */
.pw-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Central vertical spine */
.pw-spine {
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(201,168,76,.18) 8%,
    rgba(234,201,90,.40) 40%,
    rgba(201,168,76,.50) 60%,
    rgba(234,201,90,.35) 85%,
    transparent 100%);
  transform-origin: top;
  z-index: 0;
}

/* ── Step row ── */
.pw-step {
  display: grid;
  grid-template-columns: 1fr 160px 1fr;
  align-items: center;
  gap: 0 2.5rem;
  width: 100%;
  position: relative;
  z-index: 1;
  padding: 2rem 0;
}

/* Odd steps: content LEFT, orb CENTER, empty RIGHT */
.pw-step .pw-step-orb   { grid-column: 2; grid-row: 1; }
.pw-step .pw-step-body  { grid-column: 1; grid-row: 1; text-align: right; }

/* Even steps: empty LEFT, orb CENTER, content RIGHT */
.pw-step.pw-step-right .pw-step-body { grid-column: 3; grid-row: 1; text-align: left; }
.pw-step.pw-step-right .pw-step-orb  { grid-column: 2; grid-row: 1; }

/* ── Orb ── */
.pw-step-orb {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 160px;
  height: 160px;
}

.pw-orb-svg {
  width: 140px;
  height: 140px;
  animation: geoSpin 60s linear infinite;
  filter: drop-shadow(0 0 18px rgba(201,168,76,.35)) drop-shadow(0 0 40px rgba(201,168,76,.15));
  transition: filter .5s;
}

.pw-step:hover .pw-orb-svg {
  animation-play-state: paused;
  filter: drop-shadow(0 0 28px rgba(201,168,76,.70)) drop-shadow(0 0 60px rgba(201,168,76,.30));
}

/* Roman numeral badge centred over orb */
.pw-orb-num {
  position: absolute;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 300;
  font-style: italic;
  background: linear-gradient(135deg, var(--gold-lo) 0%, var(--gold-hi) 60%, var(--gold-bright) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  pointer-events: none;
}

/* ── Step body ── */
.pw-step-body {
  padding: 2.2rem 2rem;
  background: rgba(255,255,255,.032);
  border: 1px solid rgba(201,168,76,.14);
  transition: background .4s, border-color .4s;
  position: relative;
  overflow: hidden;
}

.pw-step:hover .pw-step-body {
  background: rgba(255,255,255,.06);
  border-color: rgba(201,168,76,.38);
}

/* Gold corner accent */
.pw-step-body::before {
  content: '';
  position: absolute;
  width: 28px; height: 28px;
  border-color: rgba(201,168,76,.45);
  border-style: solid;
  border-width: 0;
  transition: border-width .3s;
}
/* Left-aligned body: top-left corner */
.pw-step .pw-step-body::before {
  top: 0; right: 0;
  border-top-width: 1px;
  border-right-width: 1px;
}
/* Right-aligned body: top-left corner */
.pw-step.pw-step-right .pw-step-body::before {
  top: 0; left: 0;
  border-top-width: 1px;
  border-left-width: 1px;
}
.pw-step:hover .pw-step-body::before {
  border-color: rgba(201,168,76,.75);
}

.pw-step-tag {
  font-size: .5rem;
  font-weight: 500;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: .8rem;
  opacity: .75;
}

.pw-step-body h3 {
  font-family: var(--serif);
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 300;
  color: var(--t-hi);
  line-height: 1;
  margin-bottom: .5rem;
}

.pw-step-theme {
  font-size: .58rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-bright);
  opacity: .6;
  margin-bottom: 1.2rem;
  display: block;
}

.pw-step-body > p {
  font-size: .88rem;
  line-height: 1.95;
  color: rgba(255,255,255,.65);
  font-weight: 300;
  margin-bottom: 1.4rem;
}

.pw-step-signal {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .54rem;
  letter-spacing: .12em;
  color: rgba(255,255,255,.42);
  font-style: italic;
  font-family: var(--serif);
}

.pw-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold-hi);
  flex-shrink: 0;
  opacity: .6;
  box-shadow: 0 0 8px rgba(234,201,90,.55);
  animation: orbPulse 2.5s ease-in-out infinite;
}

/* ── Connectors between steps ── */
.pw-connector {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 340px;
  z-index: 1;
  position: relative;
  margin: .5rem 0;
}

.pw-conn-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201,168,76,.35), transparent);
}

.pw-conn-label {
  font-family: var(--serif);
  font-size: .72rem;
  font-style: italic;
  color: rgba(201,168,76,.55);
  white-space: nowrap;
  letter-spacing: .08em;
}

/* ── Bottom CTA ── */
.pw-cta {
  text-align: center;
  margin-top: 5rem;
  padding-top: 3.5rem;
  border-top: 1px solid rgba(201,168,76,.14);
}

.pw-cta p {
  font-size: .9rem;
  line-height: 1.9;
  color: rgba(255,255,255,.45);
  font-weight: 300;
}

.pw-cta-link {
  color: var(--gold-hi);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-left: .3rem;
  transition: gap .3s, opacity .3s;
}
.pw-cta-link:hover { gap: .6rem; opacity: .8; }

/* ══ VALUES — Gold Altar on Periwinkle ══ */
@keyframes valGlow {
  0%, 100% { opacity: .75; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.06); }
}
@keyframes goldPulseCard {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,76,0), inset 0 0 0 0 rgba(201,168,76,0); }
  50%       { box-shadow: 0 4px 28px rgba(201,168,76,.18), inset 0 0 20px rgba(201,168,76,.04); }
}

.values {
  background: url('../img/bg/sg-6.png') center center / cover no-repeat;
  padding: 8rem 4rem 9rem;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--div-gold);
}

.values::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 114, 0.55);
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
  pointer-events: none;
  z-index: 0;
}

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

/* Gold dust particle scatter */
.values::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px   2px   at 10%  15%, rgba(234,201,90,.70) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 90%  10%, rgba(245,223,160,.55) 0%, transparent 100%),
    radial-gradient(2px   2px   at 32%  80%, rgba(201,168,76,.60) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 75%  78%, rgba(234,201,90,.50) 0%, transparent 100%),
    radial-gradient(2px   2px   at 58%   6%, rgba(245,223,160,.65) 0%, transparent 100%),
    radial-gradient(1px   1px   at 20%  52%, rgba(201,168,76,.40) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 82%  48%, rgba(234,201,90,.45) 0%, transparent 100%),
    radial-gradient(1px   1px   at  6%  88%, rgba(245,223,160,.35) 0%, transparent 100%),
    radial-gradient(2.5px 2.5px at 65%  28%, rgba(245,223,160,.80) 0%, transparent 100%),
    radial-gradient(2px   2px   at 28%  32%, rgba(234,201,90,.60)  0%, transparent 100%),
    radial-gradient(1px   1px   at 48%  92%, rgba(201,168,76,.40)  0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 92%  68%, rgba(245,223,160,.45) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* Background sacred geometry — gold on periwinkle */
.val-bg-geo {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: geoSpin 240s linear infinite;
  z-index: 0;
}

.val-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Header ── */
.val-header {
  text-align: center;
  margin-bottom: 5rem;
}

.val-header .section-label { justify-content: center; }
.val-header .section-label::before { display: none; }

.val-header h2 {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5vw, 4.8rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #ffffff;
  margin-bottom: 1.4rem;
  text-shadow: 0 2px 30px rgba(20,20,114,.30);
}
.val-header h2 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 50%, var(--gold-hi) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.val-header-sub {
  font-size: .92rem;
  line-height: 1.9;
  color: rgba(255,255,255,.80);
  font-weight: 300;
  max-width: 480px;
  margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════════════
   MIND MAP — every node is a circle.

   Two layouts share one set of markup:
     • base      → mobile / touch / narrow: a vertical branch, circular
                   bubble on the spine with its words beside it. No 3D,
                   no absolute positioning, nothing to tap to read.
     • ≥1025px & real hover → a radial orbit: five circles around the
                   "You" hub, dashed spokes between them, flip on hover.
   ══════════════════════════════════════════════════════════════════ */

.val-map {
  --bubble: clamp(72px, 20vw, 104px);   /* branch-mode bubble diameter */
  --vgap: clamp(1.1rem, 4vw, 1.8rem);   /* branch-mode row gap */
  position: relative;
  max-width: 560px;
  margin: 0 auto;
}

/* Spokes are radial-only — the branch spine below replaces them */
.val-connectors { display: none; }

/* ── Branch layout (base) ───────────────────────────────────────── */
.val-grid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--vgap);
}

/* The spine, drawn per row so it starts at the hub's centre and stops at
   the last bubble's centre — no loose ends top or bottom. */
.val-hub::before,
.val-card::before {
  content: '';
  position: absolute;
  left: calc(var(--bubble) / 2 - .5px);
  width: 1px;
  background-image: repeating-linear-gradient(to bottom,
    rgba(234,201,90,.60) 0 4px, transparent 4px 11px);
  z-index: -1;
  pointer-events: none;
}
.val-hub::before  { top: 50%; bottom: 0; }                        /* centre → row end */
.val-card::before { top: calc(-1 * var(--vgap)); bottom: 50%; }   /* gap above → centre */

.val-card,
.val-hub {
  position: relative;
}

/* Root of the branch — last in the DOM, first on screen */
.val-hub { order: -1; }

/* .stagger only covers five children; the hub is the sixth */
.val-grid.in > .val-hub {
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

/* Bubble on the left, words on the right */
.val-flip,
.val-hub {
  display: grid;
  grid-template-columns: var(--bubble) 1fr;
  align-items: center;
  gap: clamp(.9rem, 3.5vw, 1.4rem);
}

/* ── The circle itself ── */
.val-front,
.val-hub-icon {
  position: relative;
  width: var(--bubble);
  height: var(--bubble);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold-bright);
  /* lighter blue, alpha still high: these sit ON the dashed spine and have
     to hide the length of it that runs behind them */
  background: rgba(38,38,124,.95);
  box-shadow:
    0 0 0 5px rgba(201,168,76,.07),
    0 6px 20px rgba(10,10,60,.35),
    inset 0 0 20px rgba(201,168,76,.14);
  overflow: hidden;
}

/* Straight top-bar and the flat-card glow belong to the old rectangle */
.val-face::before { display: none; }
.val-card-bg { display: none; }

.val-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 6px rgba(201,168,76,.50));
}
.val-icon svg {
  width: calc(var(--bubble) * .62);
  height: auto;
}

/* Label lives inside the circle only in radial mode */
.val-node-label { display: none; }

/* ── Words beside the circle ── */
.val-back {
  grid-column: 2;
  text-align: left;
}
.val-back h3 {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 5vw, 1.5rem);
  font-weight: 300;
  color: var(--gold-bright);
  line-height: 1.1;
  letter-spacing: -.01em;
}
.val-line {
  display: block;
  height: 1px;
  width: 0;
  background: linear-gradient(to right, transparent, var(--gold-lo), var(--gold), var(--gold-hi), var(--gold), var(--gold-lo), transparent);
  transition: width .8s cubic-bezier(.4,0,.2,1) .2s;
  margin: .35rem 0 .5rem;
}
.val-card.in .val-line,
.val-hub .val-line { width: 60px; }

.val-definition {
  font-size: clamp(.74rem, 3.3vw, .82rem);
  letter-spacing: .02em;
  color: rgba(255,255,255,.84);
  line-height: 1.55;
}
.val-resonance {
  font-family: var(--serif);
  font-size: clamp(.76rem, 3.3vw, .84rem);
  font-style: italic;
  color: var(--gold-bright);
  line-height: 1.5;
  margin-top: .3rem;
}

/* ── The hub — root of the branch ── */
.val-hub { border: none; background: none; box-shadow: none; padding: 0; }

.val-hub > :not(.val-hub-icon):not(.val-hub-halo) { grid-column: 2; }

.val-hub-icon {
  grid-column: 1;
  grid-row: 1 / span 4;
  /* scaled, not sized — keeps its centre on the spine with the nodes */
  transform: scale(1.14);
  border-color: var(--gold-hi);
  background: rgba(112,80,22,.58);
  box-shadow:
    0 0 0 6px rgba(201,168,76,.10),
    0 8px 26px rgba(10,10,60,.40),
    inset 0 0 22px rgba(201,168,76,.16);
}
.val-hub-icon svg {
  width: calc(var(--bubble) * .78);
  height: auto;
}

.val-hub-halo { display: none; }

.val-hub h3 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 7vw, 2.2rem);
  font-weight: 300;
  line-height: 1;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 50%, var(--gold-hi) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.val-hub .val-definition {
  color: rgba(255,255,255,.90);
  max-width: 26ch;
}
.val-hub-badge {
  justify-self: start;
  margin-top: .7rem;
  font-size: .44rem;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold-bright);
  border: 1px solid rgba(234,201,90,.55);
  padding: .28rem .6rem;
  background: rgba(122,82,16,.25);
}

/* ══ RADIAL ORBIT — wide screens with a real pointer ══════════════ */
@media (min-width: 1025px) and (hover: hover) {

  .val-map {
    /* one source of truth: nodes AND spokes are placed from these */
    --orbit: clamp(230px, 26vw, 300px);   /* hub centre → node centre */
    --node:  clamp(168px, 18.5vw, 208px); /* node diameter */
    --hub:   clamp(196px, 22vw, 250px);   /* hub diameter  */
    width: calc(2 * var(--orbit) + var(--node) + 2rem);
    max-width: 100%;
    aspect-ratio: 1;
    /* the shape reaches --orbit up but only .809 down: trim the gap it leaves */
    margin-bottom: calc(-.14 * var(--orbit));
  }

  /* ── Dashed spokes, hub edge → node edge ── */
  .val-connectors {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }
  .val-connectors span {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -.5px;
    height: 1px;
    width: calc(var(--orbit) - var(--hub) / 2 - var(--node) / 2 - 5px);
    transform-origin: 0 50%;
    background-image: repeating-linear-gradient(to right,
      rgba(234,201,90,.60) 0 4px, transparent 4px 10px);
    animation: valSpokeFlow 2.4s linear infinite;
  }
  /* rotate first, then step out past the hub edge */
  .val-connectors [data-spoke="freedom"]     { transform: rotate(198deg) translateX(calc(var(--hub) / 2 + 3px)); }
  .val-connectors [data-spoke="healing"]     { transform: rotate(270deg) translateX(calc(var(--hub) / 2 + 3px)); }
  .val-connectors [data-spoke="power"]       { transform: rotate(342deg) translateX(calc(var(--hub) / 2 + 3px)); }
  .val-connectors [data-spoke="wealth"]      { transform: rotate(126deg) translateX(calc(var(--hub) / 2 + 3px)); }
  .val-connectors [data-spoke="sovereignty"] { transform: rotate( 54deg) translateX(calc(var(--hub) / 2 + 3px)); }

  .val-map:hover .val-connectors span { background-image: repeating-linear-gradient(to right,
      rgba(245,223,160,.90) 0 4px, transparent 4px 10px); }

  @keyframes valSpokeFlow {
    from { background-position: 0 0; }
    to   { background-position: 10px 0; }
  }

  /* ── Grid becomes the orbit plane ── */
  .val-grid {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    gap: 0;
  }
  .val-hub::before,
  .val-card::before { display: none; }

  /* Positioned with left/top + negative margins, never transform —
     .stagger owns transform for the reveal. */
  .val-card,
  .val-hub {
    position: absolute;
    width: var(--node);
    height: var(--node);
    margin: calc(var(--node) / -2) 0 0 calc(var(--node) / -2);
    perspective: 1400px;
  }
  /* five points of a pentagon: 198° · 270° · 342° · 126° · 54° */
  .val-card[data-val="freedom"]     { left: calc(50% - .9511 * var(--orbit)); top: calc(50% - .3090 * var(--orbit)); }
  .val-card[data-val="healing"]     { left: 50%;                              top: calc(50% - 1 * var(--orbit)); }
  .val-card[data-val="power"]       { left: calc(50% + .9511 * var(--orbit)); top: calc(50% - .3090 * var(--orbit)); }
  .val-card[data-val="wealth"]      { left: calc(50% - .5878 * var(--orbit)); top: calc(50% + .8090 * var(--orbit)); }
  .val-card[data-val="sovereignty"] { left: calc(50% + .5878 * var(--orbit)); top: calc(50% + .8090 * var(--orbit)); }

  .val-hub {
    left: 50%;
    top: 50%;
    width: var(--hub);
    height: var(--hub);
    margin: calc(var(--hub) / -2) 0 0 calc(var(--hub) / -2);
    perspective: none;
  }

  /* ── Flip, inside the circle ── */
  .val-flip {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform-style: preserve-3d;
    transition: transform .85s cubic-bezier(.55,.06,.24,1);
  }
  .val-card:hover .val-flip,
  .val-card:focus-within .val-flip { transform: rotateY(180deg); }

  .val-face {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: .3rem;
    padding: calc(var(--node) * .13);
    overflow: hidden;
    border: 1px solid var(--gold-bright);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: border-color .4s, box-shadow .4s;
  }
  .val-front {
    background: rgba(38,38,124,.80);
    box-shadow:
      0 0 0 6px rgba(201,168,76,.07),
      0 10px 34px rgba(10,10,60,.35),
      inset 0 0 28px rgba(201,168,76,.14);
  }
  .val-back {
    grid-column: auto;
    text-align: center;
    transform: rotateY(180deg);
    background: rgba(30,30,112,.92);
    border-color: var(--gold);
    box-shadow:
      0 18px 46px rgba(20,20,114,.35),
      0 0 0 6px rgba(201,168,76,.10),
      inset 0 0 30px rgba(201,168,76,.08);
  }
  .val-card:hover .val-front,
  .val-card:hover .val-back { border-color: var(--gold-hi); }

  .val-icon {
    filter: drop-shadow(0 0 8px rgba(201,168,76,.55)) drop-shadow(0 0 20px rgba(201,168,76,.25));
    animation: valGlow 4s ease-in-out infinite;
  }
  .val-icon svg { width: clamp(56px, 6vw, 76px); }
  .val-card:nth-child(2) .val-icon { animation-delay: -.8s; }
  .val-card:nth-child(3) .val-icon { animation-delay: -1.6s; }
  .val-card:nth-child(4) .val-icon { animation-delay: -2.4s; }
  .val-card:nth-child(5) .val-icon { animation-delay: -3.2s; }
  .val-card:hover .val-icon {
    filter:
      drop-shadow(0 0 12px rgba(234,201,90,.80))
      drop-shadow(0 0 30px rgba(201,168,76,.45))
      drop-shadow(0 0 55px rgba(201,168,76,.20));
  }

  /* Resting face reads like a map node: symbol + name */
  .val-node-label {
    display: block;
    font-family: var(--serif);
    font-size: clamp(1rem, 1.25vw, 1.22rem);
    font-weight: 300;
    letter-spacing: .01em;
    color: var(--gold-bright);
    margin-top: .45rem;
    text-shadow: 0 2px 14px rgba(201,168,76,.35);
  }

  /* Flipped face — tuned to the inscribed square of the circle */
  .val-back h3 { font-size: clamp(1.05rem, 1.5vw, 1.32rem); }
  .val-line { margin: .25rem auto .35rem; width: 0; }
  .val-card:hover .val-line { width: 52px; }
  .val-card.in .val-line { width: 0; }
  .val-definition { font-size: clamp(.65rem, .78vw, .72rem); line-height: 1.45; }
  .val-resonance  { font-size: clamp(.65rem, .78vw, .74rem); line-height: 1.4; margin-top: .25rem; }

  /* ── Hub as the centre circle ── */
  .val-hub {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: .2rem;
    padding: calc(var(--hub) * .1);
    border-radius: 50%;
    border: 1px solid var(--gold);
    background: rgba(112,80,22,.40);
    box-shadow:
      0 10px 44px rgba(20,20,114,.30),
      0 0 0 7px rgba(201,168,76,.10),
      inset 0 0 44px rgba(201,168,76,.12);
    transition: background .5s, border-color .5s, box-shadow .5s;
  }
  .val-hub:hover {
    background: rgba(124,90,26,.50);
    border-color: var(--gold-hi);
    box-shadow:
      0 22px 60px rgba(20,20,114,.40),
      0 0 0 7px rgba(234,201,90,.22),
      0 0 60px rgba(201,168,76,.15),
      inset 0 0 52px rgba(201,168,76,.16);
  }
  .val-hub > :not(.val-hub-icon):not(.val-hub-halo) { grid-column: auto; }

  .val-hub-halo {
    display: block;
    position: absolute;
    inset: calc(var(--hub) * -.2);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(201,168,76,.22) 0%, rgba(122,82,16,.10) 40%, transparent 68%);
    pointer-events: none;
    animation: valHubPulse 6s ease-in-out infinite;
  }
  @keyframes valHubPulse {
    0%, 100% { opacity: .55; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.05); }
  }

  .val-hub-icon {
    position: relative;
    z-index: 1;
    width: auto;
    height: auto;
    border: none;
    background: none;
    box-shadow: none;
    overflow: visible;
    transform: none;
    filter: drop-shadow(0 0 12px rgba(234,201,90,.55)) drop-shadow(0 0 34px rgba(201,168,76,.28));
  }
  .val-hub-icon svg {
    width: clamp(64px, 6.4vw, 82px);
    height: auto;
    animation: geoSpin 90s linear infinite;
  }

  .val-hub h3 {
    position: relative;
    z-index: 1;
    font-size: clamp(1.5rem, 2.1vw, 2rem);
    background-size: 200% auto;
    animation: goldShimmer 3.5s ease infinite;
    margin-top: .25rem;
  }
  .val-hub .val-line { width: 66px; z-index: 1; }
  .val-hub .val-definition {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    font-size: clamp(.66rem, .8vw, .74rem);
  }
  /* the circle IS the centre — the badge only repeats it */
  .val-hub-badge { display: none; }
}

/* Motion off — every loop here is decorative */
@media (prefers-reduced-motion: reduce) {
  .val-connectors span,
  .val-icon,
  .val-hub-halo,
  .val-hub-icon svg,
  .val-bg-geo { animation: none !important; }
  .val-flip { transition: none; }
}

/* ══ TESTIMONIALS — Chapter Layout ══ */
.testimonials {
  background: #141472;
  padding: 6rem 4rem 2rem;
  border-top: 1px solid var(--div-gold);
  position: relative;
  overflow: hidden;
}
.testimonials-inner { max-width: 1100px; margin: 0 auto; }

/* ── Header ── */
.t-head {
  /* margin-bottom: 5.5rem; */
  padding-bottom:2rem;
  /* border-bottom: 1px solid var(--div-gold); */
}
.t-head h2    { font-family: var(--serif); font-size: clamp(2.5rem, 4.5vw, 4.2rem); font-weight: 300; color: var(--t-hi); }
.t-head h2 em { font-style: italic; color: #6666FF; }

/* ── Teaser (links out to full testimonials page) ── */
.t-teaser {
  text-align: center;
  padding: 3rem 0 5rem;
}
.t-teaser-body {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-style: italic;
  color: var(--t-hi);
  opacity: .85;
  margin-bottom: 2rem;
}
.t-teaser-btn {
  display: inline-block;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #141472;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 38%, var(--gold-lo) 62%, var(--gold-hi) 100%);
  text-decoration: none;
  padding: 1rem 2.8rem;
  border: 1px solid rgba(234,201,90,.35);
  transition: transform .3s ease, box-shadow .3s ease;
}
.t-teaser-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(234,201,90,.25);
}

/* ── Each chapter block ── */
.t-chapter {
  position: relative;
  padding: 4rem 0;
}

/* Ghost ordinal watermark */
.t-chapter-bg-num {
  position: absolute;
  top: 50%; right: -0.5rem;
  transform: translateY(-50%);
  font-family: var(--serif);
  font-size: clamp(9rem, 16vw, 18rem);
  font-weight: 300;
  font-style: italic;
  color: #6666FF;
  opacity: .055;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  letter-spacing: -.04em;
}

/* Periwinkle spotlight for featured chapter */
.t-chapter-spotlight {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 700px; height: 380px;
  background: radial-gradient(ellipse, rgba(102,102,255,.10) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(20px);
}

/* Two-column layout: margin (avatar+stars) + body (quote+attr) */
.t-chapter-layout {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0 3.5rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Reversed layout for featured (avatar on right) */
.t-chapter-layout-rev {
  grid-template-columns: 1fr 120px;
}
.t-chapter-layout-rev .t-chapter-margin { order: 2; }
.t-chapter-layout-rev .t-chapter-body   { order: 1; }

/* Margin column: avatar + stars stacked */
.t-chapter-margin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* ── Avatar ── */
.t-avatar-wrap {
  position: relative;
  width: 72px; height: 72px;
  flex-shrink: 0;
}
.t-avatar-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,.25);
  animation: geoSpin 14s linear infinite;
}
.t-avatar-ring::after {
  content: '';
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 7px rgba(201,168,76,.80);
}
.t-avatar-ring-gold { border-color: rgba(234,201,90,.50); animation-duration: 9s; }
.t-avatar-ring-gold::after { background: var(--gold-hi); box-shadow: 0 0 10px rgba(234,201,90,.90); }

/* Stars under avatar */
.t-chapter-stars { display: flex; gap: .22rem; }
.t-chapter-stars span {
  width: 9px; height: 9px;
  background: var(--gold);
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.t-chapter-stars-gold span { background: var(--gold-hi); }

/* ── Quote body ── */
.t-chapter-body {
  position: relative;
  padding-left: 1.5rem;
  border-left: 1px solid rgba(201,168,76,.18);
}
.t-chapter-layout-rev .t-chapter-body {
  padding-left: 0;
  padding-right: 1.5rem;
  border-left: none;
  border-right: 1px solid rgba(201,168,76,.18);
  text-align: right;
}

/* Decorative giant opening quote */
.t-chapter-mark {
  font-family: var(--serif);
  font-size: 8rem;
  font-weight: 300;
  font-style: italic;
  line-height: .5;
  display: block;
  margin-bottom: .6rem;
  background: linear-gradient(135deg, var(--gold-lo) 0%, var(--gold) 50%, var(--gold-hi) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: .40;
  user-select: none;
}
.t-chapter-mark-gold { opacity: .65; }

/* The quote itself */
.t-chapter-quote {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.75;
  color: rgba(255,255,255,.80);
  margin: 0 0 1.8rem;
}
.t-chapter-quote-feat {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  color: rgba(255,255,255,.92);
}

/* Attribution row */
.t-chapter-attr {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(201,168,76,.15);
}
.t-chapter-layout-rev .t-chapter-attr { flex-direction: row-reverse; }

.t-chapter-attr-left {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.t-chapter-layout-rev .t-chapter-attr-left { align-items: flex-end; }

.t-name {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  color: var(--t-hi);
  letter-spacing: .06em;
}
.t-name-gold { color: var(--gold-bright); }

.t-chapter-loc {
  font-size: .52rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
}

/* Transformation type — periwinkle pill */
.t-chapter-type {
  font-size: .50rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #6666FF;
  border: 1px solid rgba(102,102,255,.35);
  padding: .28rem .75rem;
  background: rgba(102,102,255,.08);
  white-space: nowrap;
  align-self: flex-end;
}
.t-chapter-type-peri {
  color: var(--gold-hi);
  border-color: rgba(234,201,90,.40);
  background: rgba(201,168,76,.08);
}

/* ── Long accounts: clamp, then open on request ──
   The clamp and the control are switched on by JS, and only for accounts that
   actually overflow. With scripting off — and for crawlers — every account
   stays whole, which matters: this is the page's real content. */
.t-quotes {
  --t-clamp: 19rem;
  position: relative;
}
.t-quotes.is-clamped {
  max-height: var(--t-clamp);
  overflow: hidden;
  /* The text dissolves into the page rather than being cut off. */
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, rgba(0,0,0,.32) 78%, transparent 96%);
          mask-image: linear-gradient(to bottom, #000 45%, rgba(0,0,0,.32) 78%, transparent 96%);
  transition: max-height .55s cubic-bezier(.22,.61,.36,1);
}

/* Hidden until JS confirms there is something left to show. */
.t-more {
  display: none;
  width: 100%;
  align-items: center;
  gap: 1rem;
  margin: .9rem 0 1.8rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gold-hi);
  font: inherit;
}
.t-chapter.has-more .t-more { display: flex; }

/* Same hairline-and-gem language as the dividers between chapters. */
.t-more-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201,168,76,.28), transparent);
}
.t-more-face {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  white-space: nowrap;
  transition: color .3s ease;
}
.t-more-label {
  font-family: var(--sans);
  font-size: .52rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.t-more-gem {
  flex-shrink: 0;
  transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
  opacity: .75;
}
.t-more:hover .t-more-face { color: var(--gold-bright); }
.t-more:hover .t-more-gem  { opacity: 1; }
.t-more:focus-visible {
  outline: 1px solid rgba(234,201,90,.55);
  outline-offset: 6px;
}
/* Open: the gem turns to a square, so the state reads without the label. */
.t-chapter.is-open .t-more-gem { transform: rotate(45deg); }



@media (prefers-reduced-motion: reduce) {
  .t-quotes.is-clamped { transition: none; }
  .t-more-gem { transition: none; }
}

/* ── Ornamental divider ── */
.t-ornament {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .5rem 0;
}
.t-orn-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201,168,76,.25), transparent);
}

/* ── Closing strip ── */
.t-close {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  margin-top: 4rem;
  padding-top: 3.5rem;
  border-top: 1px solid var(--div-gold);
}
.t-close-stars { display: flex; gap: .3rem; }
.t-close-stars span {
  width: 13px; height: 13px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 60%, var(--gold-hi) 100%);
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  filter: drop-shadow(0 0 4px rgba(201,168,76,.50));
}
.t-close-caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: .88rem;
  color: rgba(255,255,255,.35);
  letter-spacing: .04em;
}

/* ══ PROGRAMS — Sacred Geometry BG + Card Transform ══ */
.programs {
  background:
    url('../img/bg/bg-programs.png') center center / cover no-repeat;
  padding: 8rem 4rem 9rem;
  border-top: 1px solid var(--div-gold);
  position: relative;
  overflow: hidden;
}

/* Dark overlay so text stays readable over the image */
.programs::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(10,10,60,.82) 0%, rgba(10,10,60,.72) 50%, rgba(10,10,60,.88) 100%),
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(102,102,255,.12) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* Gold shimmer layer over the image */
.programs::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 50% 50%, rgba(201,168,76,.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Remove ambient glow divs — image handles depth */
.prog-glow { display: none; }

.programs-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ── Header ── */
.programs-header {
  margin-bottom: 5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: end;
}

.programs-header h2    { font-family: var(--serif); font-size: clamp(2.5rem, 4.5vw, 4.5rem); font-weight: 300; color: #ffffff; line-height: 1.08; text-shadow: 0 2px 30px rgba(0,0,40,.55); }
.programs-header h2 em { font-style: italic; background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 55%, var(--gold-hi) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.programs-header p     { font-size: .93rem; line-height: 1.9; color: rgba(255,255,255,.70); align-self: end; }

/* ══ TRIPTYCH ══ */
.prog-triptych {
  display: grid;
  grid-template-columns: 1fr 1.18fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
}

/* ── Card scale transform on hover ── */
/* When any panel is hovered, shrink siblings */
.prog-triptych:has(.prog-panel:hover) .prog-panel {
  transform: scale(0.96);
  filter: brightness(0.80);
}

/* The actually-hovered panel expands and brightens */
.prog-triptych:has(.prog-panel:hover) .prog-panel:hover {
  transform: scale(1.05) translateY(-10px);
  filter: brightness(1.05);
  z-index: 10;
}

/* ── Base Panel ── */
.prog-panel {
  background: rgba(8,8,55,.60);
  border: 1px solid rgba(255,255,255,.16);
  border-top: 2px solid rgba(255,255,255,.25);
  padding: 3rem 2.5rem 2.8rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: border-color .4s, background .4s, transform .5s cubic-bezier(.34,1.56,.64,1), filter .4s, box-shadow .4s, z-index 0s, color .4s;
  transform-origin: center bottom;
  will-change: transform, filter;
}

/* Individual hover still updates border + bg */
.prog-panel:hover {
  background: linear-gradient(160deg, rgba(122,82,16,.55) 0%, rgba(30,20,0,.85) 100%);
  border-color: rgba(var(--pa-rgb), .70);
  border-top-color: var(--pa-hi);
  box-shadow:
    0 30px 80px rgba(0,0,10,.70),
    0 0 0 1px rgba(var(--pa-rgb), .45),
    0 0 60px rgba(var(--pa-rgb), .22),
    inset 0 0 60px rgba(var(--pa-rgb), .12);
}

/* The triptych echoes the doorways: at rest the panels stay neutral, and on
   hover each one blooms in its own program's hue — so the two sections read
   as one colour story rather than the same three programs listed twice. */
.prog-triptych { --pa: var(--gold-hi); --pa-hi: var(--gold-bright); --pa-rgb: 234, 201, 90; --pa-spin: 0deg; }
.prog-panel--gamefield { --pa: var(--gf-a);  --pa-hi: var(--gf-a-hi);  --pa-rgb: var(--gf-a-rgb);  --pa-spin: var(--gf-a-spin); }
.prog-panel--return37  { --pa: var(--r37-a); --pa-hi: var(--r37-a-hi); --pa-rgb: var(--r37-a-rgb); --pa-spin: var(--r37-a-spin); }
.prog-panel--alchemy   { --pa: var(--alc-a); --pa-hi: var(--alc-a-hi); --pa-rgb: var(--alc-a-rgb); --pa-spin: var(--alc-a-spin); }

/* the panel's own geometry turns in its hue */
.prog-panel:hover .sym-prog { filter: hue-rotate(var(--pa-spin)) saturate(1.3); }

/* Badge goes gold on hover */
.prog-panel:hover .prog-badge {
  color: var(--pa);
  border-color: rgba(var(--pa-rgb), .55);
  background: rgba(var(--pa-rgb), .15);
}

/* Heading goes bright gold on hover */
.prog-panel:hover h3 {
  background: linear-gradient(135deg, var(--pa) 0%, var(--pa-hi) 55%, var(--pa) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Description text lightens on hover */
.prog-panel:hover .prog-panel-desc {
  color: rgba(245,223,160,.80);
}

/* Divider turns gold on hover */
.prog-panel:hover .prog-panel-divider {
  background: linear-gradient(to right, transparent, rgba(var(--pa-rgb), .50), var(--pa), rgba(var(--pa-rgb), .50), transparent);
}

/* List items turn gold on hover */
.prog-panel:hover .prog-list li {
  color: rgba(245,223,160,.85);
  border-color: rgba(var(--pa-rgb), .20);
}
.prog-panel:hover .prog-list li::before {
  color: var(--gold-hi);
}

/* Ghost button turns gold on hover */
.prog-panel:hover .prog-btn.ghost {
  color: var(--gold-hi);
  border-color: rgba(234,201,90,.60);
  background: rgba(201,168,76,.10);
}

/* Roman numeral watermark brightens on hover */
.prog-panel:hover .prog-panel-index {
  color: rgba(234,201,90,.12);
}

/* ── Featured center panel ── */
.prog-panel-hero {
  background: rgba(8,8,55,.78);
  border: 1px solid rgba(201,168,76,.50);
  border-top: 2px solid var(--gold-hi);
  padding: 4.4rem 2.8rem 4.2rem;
  margin: -2rem 0;
  transform: scale(1.1);
  z-index: 2;
  box-shadow:
    0 16px 60px rgba(0,0,40,.60),
    0 0 0 1px rgba(201,168,76,.18),
    inset 0 0 50px rgba(201,168,76,.07);
}
.prog-panel-hero:hover {
  background: linear-gradient(160deg, rgba(122,82,16,.65) 0%, rgba(20,10,0,.92) 100%);
  border-color: var(--gold-bright);
  border-top-color: #fff8dc;
  box-shadow:
    0 35px 90px rgba(0,0,10,.80),
    0 0 0 2px rgba(234,201,90,.60),
    0 0 80px rgba(201,168,76,.30),
    0 0 140px rgba(201,168,76,.15),
    inset 0 0 70px rgba(201,168,76,.18);
}

/* Crown ornament above featured */
.prog-panel-crown {
  display: flex;
  justify-content: center;
  margin-bottom: 1.2rem;
  position: relative;
  z-index: 1;
}

/* Ghost Roman numeral watermark */
.prog-panel-index {
  font-family: var(--serif);
  font-size: 5.5rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1;
  color: rgba(255,255,255,.07);
  position: absolute;
  top: 1.5rem; right: 1.8rem;
  pointer-events: none;
  user-select: none;
  letter-spacing: -.03em;
}
.prog-panel-index-gold { color: rgba(234,201,90,.10); }

/* Symbol crest */
.sym-prog {
  position: absolute;
  bottom: 2rem; right: 1.5rem;
  width: 80px; height: 80px;
  object-fit: contain;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.90;
  filter: drop-shadow(0 0 10px rgba(201,168,76,.60)) drop-shadow(0 0 24px rgba(201,168,76,.25));
  animation: geoSpin 120s linear infinite;
  z-index: 0;
}
.prog-panel-hero .sym-prog {
  opacity: 0.42;
  filter: brightness(1.3) drop-shadow(0 0 14px rgba(201,168,76,.90)) drop-shadow(0 0 30px rgba(201,168,76,.40));
}

/* All panel content above symbol */
.prog-panel > :not(.sym-prog):not(.prog-panel-index):not(::after):not(::before) { position: relative; z-index: 1; }
.prog-panel-crown,
.prog-panel-top,
.prog-panel-divider,
.prog-list,
.prog-btn { position: relative; z-index: 1; }

/* ── Panel top: badge + title + desc ── */
.prog-badge        { transition: color .4s, border-color .4s, background .4s; }
.prog-panel-desc   { transition: color .4s; }
.prog-panel-divider { transition: background .4s; }
.prog-list li      { transition: color .4s, border-color .4s; }
.prog-list li::before { transition: color .4s; }
.prog-btn.ghost    { transition: color .4s, border-color .4s, background .4s, gap .3s, opacity .3s; }
.prog-panel-index  { transition: color .4s; }

.prog-badge {
  font-size: .48rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
  border: 1px solid rgba(255,255,255,.22);
  padding: .22rem .65rem;
  display: inline-block;
  width: fit-content;
  background: rgba(255,255,255,.06);
  margin-bottom: 12px;
}
.prog-badge-gold {
  color: var(--gold-hi);
  border-color: rgba(234,201,90,.45);
  background: rgba(201,168,76,.10);
}

.prog-panel h3 {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 2.5vw, 2.2rem);
  font-weight: 300;
  color: #ffffff;
  line-height: 1.1;
  margin: 0;
}
.prog-panel h3 em { font-style: italic; color: var(--gold-bright); display: block; }
.prog-panel-hero h3 em {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 55%, var(--gold-hi) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShimmer 4s ease infinite;
}

.prog-panel-desc {
  font-size: .84rem;
  line-height: 1.85;
  color: rgba(255,255,255,.65);
  font-weight: 300;
  margin: .4rem 0 0;
}
.prog-panel-hero .prog-panel-desc { color: rgba(255,255,255,.78); }

/* ── Divider ── */
.prog-panel-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.18), transparent);
  margin: 1.5rem 0;
}
.prog-panel-divider-gold {
  background: linear-gradient(to right, transparent, rgba(201,168,76,.45), var(--gold-hi), rgba(201,168,76,.45), transparent);
}

/* ── Feature list ── */
.prog-list {
  list-style: none;
  margin-bottom: 2.2rem;
  flex: 1;
}
.prog-list li {
  font-size: .80rem;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.68);
  display: flex;
  align-items: center;
  gap: .7rem;
  font-weight: 300;
}
.prog-list li::before { content: '—'; color: rgba(255,255,255,.30); font-size: .65rem; flex-shrink: 0; }
.prog-list-gold li { border-color: rgba(201,168,76,.15); color: rgba(255,255,255,.80); }
.prog-list-gold li::before { color: var(--gold); }

/* ── CTA buttons ── */
.prog-btn {
  display: inline-block;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .8rem 2rem;
  transition: all .35s;
  margin-top: auto;
  width: fit-content;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.prog-btn.ghost {
  border: 1px solid rgba(255,255,255,.28);
  color: rgba(255,255,255,.85);
}
.prog-btn.ghost:hover {
  border-color: rgba(201,168,76,.65);
  color: var(--gold-bright);
  background: rgba(201,168,76,.08);
}

.prog-btn.solid {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 38%, var(--gold-lo) 62%, var(--gold-hi) 100%);
  background-size: 200% auto;
  color: #141472;
  font-weight: 700;
  border: none;
  box-shadow: 0 4px 20px rgba(201,168,76,.30);
}
.prog-btn.solid:hover {
  background-position: right center;
  box-shadow: 0 8px 32px rgba(201,168,76,.50);
  transform: translateY(-1px);
}

.prog-btn.solid:hover {
  background-position: right center;
  box-shadow: 0 4px 20px rgba(201,168,76,.35);
}

/* ══ CTA — compact horizontal band ══ */
.cta-section {
  background: var(--deep);
  padding: 4rem 6rem;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--div-gold);
  border-bottom: 1px solid var(--div-gold);
}

/* Subtle dark vignette edges */
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 160% at 0%   50%, rgba(14,14,90,.35) 0%, transparent 55%),
    radial-gradient(ellipse 80% 160% at 100% 50%, rgba(14,14,90,.35) 0%, transparent 55%),
    radial-gradient(ellipse 60% 120% at 50%  50%, rgba(201,168,76,.05) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Gold hairline accent rules on left / right */
.cta-line {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(201,168,76,.30) 30%, rgba(201,168,76,.30) 70%, transparent);
  z-index: 0;
}
.cta-line-l { left:  5rem; }
.cta-line-r { right: 5rem; }

/* ── Three-column layout: text | gem | actions ── */
.cta-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 3rem;
}

/* Left text block */
.cta-text { display: flex; flex-direction: column; gap: .5rem; }

.cta-eyebrow {
  font-size: .50rem;
  font-weight: 500;
  letter-spacing: .50em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}

.cta-section h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.8vw, 2.6rem);
  font-weight: 300;
  line-height: 1.15;
  color: #ffffff;
  margin: 0;
  letter-spacing: -.01em;
}

.cta-section h2 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 55%, var(--gold-hi) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShimmer 4s ease infinite;
}

/* Centre gem divider */
.cta-gem { display: flex; align-items: center; justify-content: center; opacity: .90; flex-shrink: 0; }

/* Right actions block */
.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
}

/* ── Buttons ── */
.cta-btns { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: flex-end; }

.cta-btns .btn-w {
  display: inline-block;
  padding: .8rem 2rem;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 38%, var(--gold-lo) 62%, var(--gold-hi) 100%);
  background-size: 200% auto;
  color: #141472;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .20em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all .40s;
  box-shadow: 0 4px 22px rgba(201,168,76,.30);
  white-space: nowrap;
}
.cta-btns .btn-w:hover {
  background-position: right center;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(201,168,76,.48);
}

.cta-btns .btn-o {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .8rem 1.6rem;
  border: 1px solid rgba(201,168,76,.38);
  color: var(--gold-bright);
  font-size: .58rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all .3s;
  background: var(--deep);
  white-space: nowrap;
}
.cta-btns .btn-o:hover {
  border-color: var(--gold-hi);
  color: var(--gold-hi);
  background: var(--deep);
  transform: translateY(-2px);
}

/* ── Trust micro-strip ── */
.cta-trust {
  display: flex;
  align-items: center;
  gap: .8rem;
}
.cta-trust-item {
  font-size: .48rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
}
.cta-trust-dot {
  color: rgba(201,168,76,.40);
  font-size: 1rem;
  line-height: 1;
}

/* keep old elements hidden */
.cta-stats, .cta-geo, .spark,
.cta-bg-ring, .cta-spark,
.cta-ornament, .cta-sub { display: none; }

/* ══ FOOTER ══ */
footer {
  background: var(--deep);
  border-top: 1px solid var(--div-gold);
  padding: 2.8rem 4rem 0;
}

/* ── Top row: brand | contact | socials ── */
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(201,168,76,.12);
  flex-wrap: wrap;
}

.footer-brand { display: flex; flex-direction: column; gap: .4rem; }

.footer-logo {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400;
  font-style: italic;
  color: rgba(255,255,255,.50);
}
.footer-logo span { color: var(--gold); }

.footer-tagline {
  font-size: .50rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.22);
  margin: 0;
}

/* ── Contact list (horizontal) ── */
.footer-contact {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.footer-contact li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .58rem;
  letter-spacing: .06em;
  color: rgba(255,255,255,.38);
}
.footer-contact-icon {
  color: var(--gold);
  opacity: .75;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.footer-contact-icon--wa { color: #25d366; opacity: .85; }
.footer-contact a {
  color: rgba(255,255,255,.38);
  text-decoration: none;
  transition: color .22s;
}
.footer-contact a:hover { color: var(--gold-hi); }

/* ── Social buttons ── */
.footer-socials { display: flex; gap: .55rem; }

.footer-social-btn {
  width: 34px; height: 34px;
  border: 1px solid rgba(201,168,76,.22);
  color: rgba(255,255,255,.38);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: border-color .25s, color .25s, background .25s;
  background: rgba(201,168,76,.04);
}
.footer-social-btn:hover {
  border-color: var(--gold-hi);
  color: var(--gold-hi);
  background: rgba(201,168,76,.10);
}

/* ── Bottom bar: nav + copyright ── */
.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.2rem 0 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.footer-nav {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: 1.8rem;
  flex-wrap: wrap;
}
.footer-nav a {
  font-size: .54rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
  text-decoration: none;
  transition: color .22s;
}
.footer-nav a:hover { color: var(--gold); }

.footer-copy {
  font-size: .52rem;
  color: rgba(255,255,255,.15);
  letter-spacing: .08em;
  white-space: nowrap;
}

/* unused from old markup */
.footer-col, .footer-col-title,
.footer-bottom-right { display: none; }

/* ══ SACRED GEOMETRY SYMBOLS — PROMINENT ══ */
@keyframes goldenPulse {
  0%, 100% { box-shadow: 0 0 30px rgba(201,168,76,.5), 0 0 60px rgba(201,168,76,.2), 0 0 100px rgba(201,168,76,.08); }
  50%       { box-shadow: 0 0 55px rgba(201,168,76,.85), 0 0 100px rgba(201,168,76,.35), 0 0 160px rgba(201,168,76,.15); }
}

/* Base */
.sym {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: geoSpin 180s linear infinite;
}

/* ── HERO: right-half, centered, overlaid on photo ── */
.sym-hero {
  width: clamp(280px, 44vw, 520px);
  right: 2%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  opacity: .32;
  filter: drop-shadow(0 0 28px rgba(201,168,76,.50))
          drop-shadow(0 0 60px rgba(201,168,76,.22));
  animation-duration: 220s;
}

/* ── ABOUT: dominant right-side symbol ── */
.sym-about {
  width: 500px;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  opacity: .30;
  mix-blend-mode: normal; /* screen washes out on #6666FF */
  filter: drop-shadow(0 0 30px rgba(201,168,76,.60))
          drop-shadow(0 0 60px rgba(201,168,76,.25));
  animation-direction: reverse;
  animation-duration: 240s;
}

/* ── MANIFESTO: full centrepiece on royal blue ── */
.sym-manifesto {
  width: clamp(260px, 80%, 560px);
  position: relative;
  display: block;
  margin: auto;
  opacity: .38;
  mix-blend-mode: normal;
  filter: drop-shadow(0 0 40px rgba(201,168,76,.70))
          drop-shadow(0 0 90px rgba(201,168,76,.30));
  animation-duration: 80s;
  z-index: 0;
}
/* Quote text needs to sit above the symbol */
.manifesto blockquote,
.manifesto-attr { position: relative; z-index: 1; }

/* ── PILLARS: right side, clearly visible ── */
.sym-pillars {
  width: 500px;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  opacity: .22;
  filter: drop-shadow(0 0 22px rgba(201,168,76,.40))
          drop-shadow(0 0 50px rgba(201,168,76,.15));
  animation-direction: reverse;
  animation-duration: 170s;
}

/* ── VALUES: large centrepiece on periwinkle ── */
.sym-values-bg {
  width: clamp(260px, 80%, 580px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  opacity: .30;
  mix-blend-mode: normal;
  filter: drop-shadow(0 0 35px rgba(201,168,76,.65))
          drop-shadow(0 0 80px rgba(201,168,76,.28));
  animation-duration: 100s;
}

/* ── VALUES MEDALLION: glowing golden seal ── */
.sym-medallion {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 2.2rem;
  display: block;
  position: relative;
  z-index: 1;
  mix-blend-mode: normal;
  border: 1px solid rgba(201,168,76,.55);
  animation: goldenPulse 3.5s ease-in-out infinite;
}
.sym-medallion img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── TESTIMONIALS: right-side glow ── */
.sym-testi {
  width: 440px;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  opacity: .20;
  filter: drop-shadow(0 0 20px rgba(201,168,76,.38))
          drop-shadow(0 0 45px rgba(201,168,76,.14));
  animation-duration: 190s;
}

/* ── CTA: large glowing mandala behind the call ── */
.sym-cta {
  width: clamp(280px, 80%, 680px);
  position: relative;
  display: block;
  margin: auto;
  opacity: .35;
  filter: drop-shadow(0 0 30px rgba(201,168,76,.50))
          drop-shadow(0 0 80px rgba(201,168,76,.20));
  animation-direction: reverse;
  animation-duration: 70s;
  mix-blend-mode: screen;
  z-index: 0;
}
.cta-geo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}
/* CTA text above decorative layers */
.cta-inner { position: relative; z-index: 1; }

/* ══ STAR ASSESSMENT ══ */
.star-assessment {
  position: relative;
  padding: 6rem 2rem 5rem;
  overflow: hidden;
  background: linear-gradient(180deg, #141472 0%, #0e0e5a 50%, #141472 100%);
}

.sa-bg-geo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: .6;
}

.sa-inner {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}

.sa-header {
  text-align: center;
}

.sa-header .section-label { justify-content: center; }
.sa-header .section-label::before { display: none; }

.sa-header h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 400;
  color: var(--t-hi);
  line-height: 1.18;
  margin-bottom: 1rem;
}

.sa-header h2 em {
  font-style: italic;
  color: var(--gold-hi);
}

.sa-sub {
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 300;
  color: var(--t-body);
  max-width: 520px;
  line-height: 1.75;
  margin: 0 auto;
}

/* Canvas */
.sa-canvas-wrap {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1;
}

.sa-canvas-wrap canvas {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 28px rgba(201,168,76,.18)) drop-shadow(0 0 8px rgba(102,102,255,.12));
  transition: filter .4s ease, opacity .5s ease;
  opacity: 0;
}
.sa-canvas-wrap.has-data canvas { opacity: 1; }

.sa-canvas-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  font-family: var(--serif);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-style: italic;
  color: var(--t-hi);
  opacity: .6;
  transition: opacity .4s ease;
  pointer-events: none;
}
.sa-canvas-wrap.has-data .sa-canvas-placeholder { opacity: 0; }

/* Sliders grid */
.sa-sliders {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem 2.5rem;
}

.sa-row {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.sa-row-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.sa-label {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 400;
  color: var(--t-soft);
  letter-spacing: .04em;
  transition: color .3s ease;
}

.sa-row:hover .sa-label,
.sa-row:focus-within .sa-label {
  color: var(--t-body);
}

.sa-val {
  font-family: var(--serif);
  font-size: .95rem;
  font-weight: 500;
  color: var(--gold-hi);
  min-width: 1.4rem;
  text-align: right;
  transition: color .25s ease, transform .2s ease;
  display: inline-block;
}

/* Track container */
.sa-track-wrap {
  position: relative;
  height: 3px;
}

/* Native range — hidden track, we draw our own */
.sa-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  margin: 0;
}

/* Custom track background */
.sa-track-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  height: 2px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(102,102,255,.18);
  border-radius: 2px;
}

/* Fill bar */
.sa-track-fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi));
  transition: width .18s cubic-bezier(.25,.46,.45,.94);
  pointer-events: none;
}

/* Thumb glow via pseudo — shown via focus-within on wrapper */
.sa-track-wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  left: var(--thumb-pos, 0%);
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold-hi);
  box-shadow: 0 0 6px rgba(234,201,90,.55);
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}

/* Show thumb on hover/focus */
.sa-row:hover .sa-track-wrap::after,
.sa-row:focus-within .sa-track-wrap::after {
  opacity: 1;
}

/* We'll drive --thumb-pos via JS inline style */

/* Reset button */
.sa-reset-wrap {
  display: flex;
  justify-content: center;
}

.sa-reset {
  padding: .55rem 2.2rem;
  border: 1px solid rgba(201,168,76,.35);
  border-radius: 2px;
  background: transparent;
  color: var(--gold);
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}

.sa-reset:hover {
  background: rgba(201,168,76,.08);
  border-color: rgba(201,168,76,.6);
  color: var(--gold-hi);
  box-shadow: 0 0 12px rgba(201,168,76,.12);
}

/* ══ RESPONSIVE ══ */
/* ══════════════════════════════════════════
   RESPONSIVE — tablet ≤ 1024px
══════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ── Nav ── */
  nav { padding: .4rem 2rem; }
  nav.scrolled { background: rgba(20, 20, 114, 0.7); }

  .nav-toggle { display: flex; order: 3; }

  .nav-links {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: fixed;
    top: 0; right: 0;
    width: min(78vw, 320px);
    height: 100vh;
    margin: 0;
    padding: 6.5rem 2rem 2rem;
    background: rgba(20, 20, 114, 0.97);
    backdrop-filter: blur(24px);
    border-left: 1px solid var(--div-gold);
    transform: translateX(100%);
    transition: transform .35s ease;
  }
  nav.nav-open .nav-links { transform: translateX(0); }
  .nav-links li { border-bottom: 1px solid rgba(201,168,76,.15); }
  .nav-links a {
    display: block;
    padding: 1.1rem 0;
    color: var(--t-body);
  }

  /* Book a Call moves inside the hamburger menu on mobile/tablet */
  nav > .nav-cta { display: none; }
  .nav-cta-item { border-bottom: none !important; margin-top: 1.5rem; }
  .nav-links .nav-cta {
    display: inline-block;
    width: 100%;
    padding: .9rem 1.5rem;
    text-align: center;
  }

  /* ── Generic section padding ── */
  section,
  .about,
  .pillars,
  .pathways,
  .values,
  .testimonials,
  .programs { padding: 5rem 2rem; }

  /* ── Hero ── */
  .hero-bg {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.4) 25%, black 55%);
    mask-image:         linear-gradient(to right, transparent 0%, rgba(0,0,0,.4) 25%, black 55%);
  }
  .hero-content { max-width: 100%; padding: 8rem 2rem 5rem; }

  /* ── About ── */
  .about-inner { grid-template-columns: 1fr; gap: 2.5rem; }

  /* ── Pillars ── */
  .pillars-header   { grid-template-columns: 1fr; gap: 2rem; }
  .pillars-list     { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  .pillar-row:hover { transform: none; box-shadow: none; }

  /* ── Pathways ── */
  .pw-spine  { display: none; }
  .pw-step   { grid-template-columns: 80px 1fr; grid-template-rows: auto auto; gap: 1rem 1.5rem; }
  .pw-step .pw-step-orb,
  .pw-step.pw-step-right .pw-step-orb  { grid-column: 1; grid-row: 1; width: 80px; height: 80px; }
  .pw-step .pw-step-body,
  .pw-step.pw-step-right .pw-step-body { grid-column: 2; grid-row: 1; text-align: left; }
  .pw-orb-svg    { width: 72px; height: 72px; }
  .pw-connector  { width: 100%; }

  /* ── Values ── */
  /* Branch layout handles the map here; drop the full-section blur —
     backdrop-filter under animated children repaints every frame. */
  .values::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(20, 20, 114, .74);
  }
  .val-bg-geo svg { width: 520px; height: 520px; }
  .val-header { margin-bottom: 3rem; }

  /* ── Testimonials ── */
  .testimonials-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .t-grid              { grid-template-columns: 1fr; }
  .t-chapter-layout,
  .t-chapter-layout-rev { grid-template-columns: 1fr; gap: 2rem; }
  .t-chapter-layout-rev .t-chapter-margin { order: 0; }
  .t-chapter-layout-rev .t-chapter-body  { order: 1; padding-right: 0; border-right: none;
                                            text-align: left; padding-left: 1.5rem;
                                            border-left: 1px solid rgba(201,168,76,.18); }
  .t-chapter-layout-rev .t-chapter-attr        { flex-direction: row; }
  .t-chapter-layout-rev .t-chapter-attr-left   { align-items: flex-start; }
  .t-chapter-margin  { flex-direction: row; justify-content: flex-start; }
  .t-chapter-bg-num  { font-size: 6rem; opacity: .04; }
  .t-quotes          { --t-clamp: 15rem; }
  .t-more-label      { letter-spacing: .18em; }
  .t-trust           { gap: 1rem; }

  /* ── Programs ── */
  .programs-header { grid-template-columns: 1fr; gap: 2rem; }
  .prog-triptych   { grid-template-columns: 1fr; }
  .prog-panel-hero { order: -1; }
  .prog-triptych:has(.prog-panel:hover) .prog-panel { transform: none; filter: none; }
  .prog-triptych:has(.prog-panel:hover) .prog-panel:hover { transform: none; filter: none; }

  /* ── CTA ── */
  .cta-section { padding: 3rem 2.5rem; }
  .cta-inner   { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }
  .cta-gem     { display: none; }
  .cta-actions { align-items: center; }
  .cta-btns    { justify-content: center; }
  .cta-line    { display: none; }
  .cta-trust   { justify-content: center; }

  /* ── Footer ── */
  footer               { padding: 2rem 2rem 0; text-align: center; }
  .footer-inner        { flex-direction: column; align-items: center; gap: 1.5rem; }
  .footer-brand        { align-items: center; }
  .footer-contact      { flex-direction: column; align-items: center; gap: .8rem; }
  .footer-bottom       { flex-direction: column; align-items: center; gap: .6rem; }
  .footer-nav          { justify-content: center; }
}

/* ══════════════════════════════════════════
   RESPONSIVE — mobile ≤ 640px
══════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── Hero — stacked mobile layout: photo on top, text below (no overlap on the face) ── */
  .hero {
    min-height: auto;
    flex-direction: column;
    align-items: stretch;
    /* the generic section padding boxed the photo in with a blue frame —
       .hero-content carries its own insets instead */
    padding: 0;
  }
  .hero::before      { display: none; }
  .hero-geo-corner   { display: none; }
  .hero-bg {
    position: relative;
    top: auto; right: auto; bottom: auto;
    width: 100%;
    height: 50vh;
    min-height: 320px;
    margin-top: 5.6rem;   /* clears the fixed nav */
    /* full-bleed sides, soft top and bottom — the photo dissolves into the
       blue instead of sitting inside it as a small ellipse */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 80%, transparent 100%);
    mask-image:         linear-gradient(to bottom, transparent 0%, black 15%, black 80%, transparent 100%);
  }
  .hero-bg::before   { display: none; }
  .hero-bg img       { object-position: center 12%; }
  .hero-content      { width: 100%; padding: 1.2rem 1.5rem 3.5rem; }
  .hero-kicker        { flex-wrap: wrap; row-gap: .3rem; font-size: .52rem; letter-spacing: .32em; }
  .hero-strip        { gap: 1.5rem; flex-wrap: wrap; }

  /* ── About ── */
  .about-stats { flex-direction: column; gap: 1.5rem; }
  /* Keep the sacred-geometry pattern visible on mobile — centred behind the copy */
  .sym-about {
    display: block;
    width: 500px;
    right: -40px;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
    opacity: .20;
    mix-blend-mode: normal;
    filter: drop-shadow(0 0 30px rgba(201,168,76,.60))
            drop-shadow(0 0 60px rgba(201,168,76,.25));
    animation-direction: reverse;
    animation-duration: 240s;
  }

  /* ── Pillars ── */
  .pillars-list { grid-template-columns: 1fr; }

  /* ── Values ── */
  /* Spinning 800px SVG behind a 375px screen buys nothing */
  .val-bg-geo { display: none; }
  .val-map { max-width: 100%; }
  /* hard breaks written for a wide screen strand single words here */
  .val-header h2 br,
  .val-header-sub br { display: none; }

  /* ── Programs ── */
  .programs { padding: 4rem 1.5rem; }

  /* ── Assessment ── */
  .star-assessment { padding: 3.5rem 1.2rem 3rem; }
  .sa-sliders { grid-template-columns: 1fr; gap: .9rem; }

  /* ── CTA ── */
  .cta-section   { padding: 2.5rem 1.5rem; }
  .cta-section h2 { font-size: clamp(1.4rem, 7vw, 2rem); }
  .cta-btns      { flex-direction: column; align-items: center; width: 100%; }
  .cta-btns .btn-w,
  .cta-btns .btn-o { width: 100%; justify-content: center; text-align: center; }
  .cta-trust     { flex-direction: column; gap: .4rem; }
  .cta-trust-dot { display: none; }

  /* ── Footer ── */
  footer          { padding: 1.8rem 1.5rem 0; text-align: center; }
  .footer-nav     { justify-content: center; gap: .8rem 1.5rem; }
  .footer-copy    { white-space: normal; }
}