/* ─── Tokens ─── */
:root {
  --black:      #060606;
  --charcoal:   #0E0E0C;
  --dark:       #161513;
  --dark2:      #1C1B19;
  --gold:       #C9A96E;
  --gold-dim:   rgba(201,169,110,.14);
  --gold-line:  rgba(201,169,110,.18);
  --cream:      #F5F0E8;
  --cream-85:   rgba(245,240,232,.85);
  --cream-80:   rgba(245,240,232,.8);
  --cream-75:   rgba(245,240,232,.75);
  --cream-60:   rgba(245,240,232,.6);
  --cream-30:   rgba(245,240,232,.3);
  --cream-08:   rgba(245,240,232,.08);
  --gray:       #66665E;
  --fire:       #E8732A;
  --fire-red:   #C23B1A;
  --fire-dim:   rgba(232,115,42,.14);
  --fire-line:  rgba(232,115,42,.4);
  --teal:       #A5B8CA;
  --teal-dim:   rgba(165,184,202,.14);
  --teal-line:  rgba(165,184,202,.38);
  --sans:       'Outfit', sans-serif;
  --serif:      'Newsreader', Georgia, serif;
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --gutter:     72px;
  --space-section: 130px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--charcoal);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
}

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

/* ─── Navbar ─── */
nav {
  position:fixed; inset:0 0 auto; z-index:500;
  padding:26px var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  transition: padding .4s, background .4s, backdrop-filter .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
nav.stuck {
  padding:15px var(--gutter);
  background:rgba(6,6,6,.85);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-color:var(--gold-line);
}
.nav-logo {
  font-family:var(--serif);
  font-size:1.1rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream); text-decoration:none;
}
.nav-logo b { color:var(--gold); font-weight:500; }
.nav-links { display:flex; gap:38px; list-style:none; }
.nav-links a,
.nav-dropdown-label {
  font-size:.9rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream-80); text-decoration:none; transition:color .3s;
  position:relative; cursor:pointer;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-3px; left:0;
  width:0; height:1px; background:var(--gold);
  transition:width .35s var(--ease-out);
}
.nav-links a:hover,
.nav-links a.active,
.nav-has-drop:hover .nav-dropdown-label { color:var(--cream); }
.nav-links a:hover::after,
.nav-links a.active::after { width:100%; }

/* ─── Nav Dropdown ─── */
.nav-has-drop { position:relative; }
/* Invisible bridge that fills the gap between the nav item and the dropdown,
   so moving the mouse downward to click doesn't break the :hover state. */
.nav-has-drop::before {
  content:'';
  position:absolute;
  top:100%; left:-16px; right:-16px;
  height:22px;
}
.nav-caret {
  display:inline-block; margin-left:5px; font-size:.9em;
  vertical-align:middle; line-height:1;
  transition:transform .3s var(--ease-out);
}
.nav-has-drop:hover .nav-caret,
.nav-has-drop:focus-within .nav-caret { transform:rotate(180deg); }
.nav-drop {
  position:absolute; top:calc(100% + 18px); left:50%;
  transform:translateX(-50%) translateY(-6px);
  list-style:none; padding:8px 0; min-width:185px;
  background:rgba(6,6,6,.92);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--gold-line);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s, transform .25s var(--ease-out), visibility .25s;
}
.nav-has-drop:hover .nav-drop,
.nav-has-drop:focus-within .nav-drop {
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.nav-drop a {
  display:block; padding:11px 22px;
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream-60); text-decoration:none;
  transition:color .25s, background .25s;
  white-space:nowrap;
}
.nav-drop a::after { display:none !important; }
.nav-drop a:hover,
.nav-drop a.active { color:var(--cream); background:var(--cream-08); }

/* ─── Hero ─── */
#hero {
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:180px var(--gutter);
  position:relative; overflow:hidden;
}
.hero-img {
  position:absolute; inset:0;
  background: url('nanobanana-output/misty_mountain_peaks_at_golden_h.png') center/cover no-repeat;
  opacity:.18;
}
.hero-img::after {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to bottom, var(--charcoal) 0%, transparent 30%, transparent 60%, var(--charcoal) 100%),
    linear-gradient(to right, var(--charcoal) 0%, transparent 40%);
}
.hero-glow {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 60% 50%, rgba(201,169,110,.07) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 75% 68%, rgba(232,115,42,.22) 0%, transparent 60%);
}
.hero-rule-v {
  position:absolute; right:88px; top:50%;
  transform:translateY(-50%);
  width:1px; height:36vh;
  background:linear-gradient(to bottom, transparent, rgba(201,169,110,.45), transparent);
}
.hero-rule-h {
  position:absolute; bottom:80px; left:var(--gutter); right:var(--gutter);
  height:1px;
  background:linear-gradient(to right, transparent, rgba(201,169,110,.22), transparent);
}

.hero-body { position:relative; z-index:2; max-width:1060px; margin-bottom:40px; }

.eyebrow {
  display:flex; align-items:center; gap:16px; margin-bottom:52px;
  opacity:0; transform:translateY(14px);
  animation:fadeUp .8s ease forwards .2s;
}
.eyebrow-dash { width:36px; height:1px; background:var(--gold); }
.eyebrow span { font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:500; }

#hero-hl {
  font-family:var(--serif);
  font-size:clamp(3.2rem,5.6vw,4.2rem);
  font-weight:200; line-height:1.07;
  color:var(--cream);
}
.hw { display:inline-block; overflow:hidden; }
.hwi {
  display:inline-block;
  opacity:0; transform:translateY(108%);
  animation:wordUp .7s var(--ease-out) forwards;
}
.hwi em { font-style:italic; color:var(--gold); }

.hero-sub {
  margin-top:36px; max-width:480px;
  font-size:1.25rem; line-height:1.85; color:var(--cream-85);
  opacity:0; transform:translateY(14px);
  animation:fadeUp .8s ease forwards 1.6s;
}

.hero-scroll {
  position:absolute; bottom:40px; left:var(--gutter);
  display:flex; align-items:center; gap:14px;
  opacity:0; animation:fadeUp .8s ease forwards 2s;
}
.scroll-track {
  width:40px; height:1px;
  background:rgba(201,169,110,.22); position:relative; overflow:hidden;
}
.scroll-track::after {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:var(--gold); animation:slide 2.2s ease infinite 2.2s;
}
.scroll-lbl { font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gray); }

.hero-cta {
  margin-top:48px;
  opacity:0; animation:fadeUp .8s ease forwards 2.2s;
  font-size:1.2rem !important;
  padding: 26px 58px !important;
  gap: 16px !important;
  width: fit-content;
  display: inline-flex !important;
}

/* ─── Section shell ─── */
.sec { padding:var(--space-section) var(--gutter); position:relative; }

.sec-id {
  display:flex; align-items:center; gap:14px; margin-bottom:70px;
}
.sec-num { font-family:var(--serif); font-size:.68rem; color:var(--teal); letter-spacing:.1em; }
.sec-dash { width:44px; height:1px; background:var(--gold-line); }
.sec-tag { font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cream); }
.sec-id--mb48           { margin-bottom: 48px; }
.sec-id--layered        { position: relative; z-index: 2; }
.sec-id--centered       { justify-content: center; max-width: 240px; margin: 0 auto 72px; }
.sec-id--centered-wide  { justify-content: center; max-width: 260px; margin: 0 auto 70px; }

/* ─── S3 · The Mission ─── */
#s3 { background:var(--dark); position:relative; overflow:hidden; }
.s1-bg {
  position:absolute; inset:0;
  background: url('nanobanana-output/cinematic_silhouettes_of_profess.png') center/cover no-repeat;
  opacity:.14;
}
.s1-bg::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(to bottom, var(--dark) 0%, rgba(22,21,19,.5) 50%, var(--dark) 100%);
}
.s3-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 3vw, 2.9rem);
  font-weight: 300; line-height: 1.22; color: var(--cream);
  text-align: center;
  max-width: 860px; margin: 0 auto 72px;
  position: relative; z-index: 2;
}
.s3-title em { font-style: italic; color: var(--gold); }

.s1-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; max-width:1200px; margin:0 auto; position:relative; z-index:2; }

.ghost-stat { position:relative; }
.ghost-num {
  font-family:var(--serif);
  font-size:clamp(8rem,14vw,15rem);
  font-weight:800; line-height:.82;
  color:rgba(201,169,110,.55);
  -webkit-text-stroke:2px rgba(201,169,110,1);
  display:block;
}
.ghost-label { margin-top:18px; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.ghost-sub { margin-top:10px; font-size:.95rem; line-height:1.78; color:var(--cream-60); }

.s1-copy h2 {
  font-family:var(--serif);
  font-size:clamp(2rem,3vw,2.9rem);
  font-weight:300; line-height:1.22; color:var(--cream); margin-bottom:28px;
}
.s1-copy h2 em { font-style:italic; color:var(--gold); }
.s1-copy p { font-size:1.12rem; line-height:1.88; color:var(--cream-75); margin-bottom:1em; }
.s1-copy p:last-child { margin-bottom:0; }
.s1-copy strong { color:var(--cream); font-weight:500; }

/* ─── S1 · Sound Familiar? ─── */
#s1.sf-sec { background:var(--charcoal); position:relative; overflow:hidden; }
.sf-wm {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--serif); font-size:22vw; font-weight:800;
  color:transparent; -webkit-text-stroke:1px rgba(201,169,110,.025);
  white-space:nowrap; pointer-events:none; user-select:none; letter-spacing:-.04em;
}
.sf-intro {
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); font-weight:500;
  margin-bottom:64px; position:relative; z-index:2;
  text-align:center;
}
.sf-hl {
  font-family:var(--serif);
  font-size:clamp(2.6rem,5vw,5.4rem);
  font-weight:200; line-height:1.07; color:var(--cream);
  margin-bottom:20px; position:relative; z-index:2;
  text-align:center;
}
.sf-hl em { font-style:italic; color:var(--gold); }
.sf-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--gold-line);
  position:relative; z-index:2;
  border:1px solid var(--gold-line);
}
.sf-card {
  padding:0;
  border:none; cursor:pointer; font-family:inherit;
  perspective:900px;
  background:rgba(14,14,12,.96);
  transition: background .45s ease;
}
.sf-card-inner {
  display:grid;
  height:100%;
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
}
.sf-card.is-active .sf-card-inner { transform:rotateY(180deg); }
.sf-card-front,
.sf-card-back {
  grid-area:1/1;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  padding:44px 38px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.sf-card-front { background:rgba(14,14,12,.96); }
.sf-card-back {
  transform:rotateY(180deg);
  background:rgba(14,14,12,.96);
  justify-content:center;
  border:1px solid var(--teal-line);
  position:relative;
}
.sf-card-cta {
  position:absolute; bottom:20px; right:24px;
  font-family:var(--sans); font-size:.58rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); text-decoration:none; opacity:.75;
  transition:opacity .2s;
}
.sf-card-cta:hover { opacity:1; }
.sf-card:hover .sf-card-front,
.sf-card:focus-visible .sf-card-front {
  background: rgba(201,169,110,.12);
  transition: background .45s ease;
}

.sf-q {
  display:block;
  font-family:var(--serif); font-size:3rem; font-weight:200;
  color:var(--teal); opacity:.7; line-height:0;
  margin-bottom:8px;
  text-align:left;
  margin-right:auto;
}
.sf-card-front p { font-size:1.12rem; line-height:1.84; color:var(--cream-75); }
.sf-card-back p {
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1rem,1.6vw,1.25rem); font-weight:300;
  color:var(--teal); line-height:1.6;
}

/* ─── S2 · The Leadership Insight ─── */
#s2.li-sec { background:var(--black); position:relative; padding-top:80px; padding-bottom:80px; }
.li-bg {
  position:absolute; inset:0;
  background: url('nanobanana-output/abstract_flowing_liquid_gold_on_.png') center/cover no-repeat;
  opacity:.18;
}
.li-bg::after {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 80% at 50% 50%, rgba(6,6,6,.55) 0%, var(--black) 70%),
    linear-gradient(to bottom, var(--black) 0%, transparent 15%, transparent 85%, var(--black) 100%);
}
.li-top {
  margin-bottom:48px;
  position:relative; z-index:2;
  text-align:center;
}
.li-top h2 {
  font-family:var(--serif);
  font-size:clamp(2.8rem,4.5vw,5rem);
  font-weight:200; color:var(--cream); line-height:.92;
  margin-bottom:20px;
}
.li-top h2 em { font-style:italic; color:var(--gold); }
.li-sub {
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); font-weight:500;
}
.li-cards {
  display:grid; grid-template-columns:repeat(3,1fr);
  position:relative; z-index:2;
  align-items:start;
}
.li-card {
  padding:52px 42px;
  position:relative; overflow:hidden;
}
.li-card--extinguished {
  background: radial-gradient(ellipse at center, rgba(165,184,202,.22) 0%, rgba(80,100,120,.06) 100%);
  border-top:1px solid var(--teal-line);
  border-right:1px solid var(--gold-line);
}
.li-card--extinguished .li-card-n { color: var(--teal); }
.li-card--extinguished .li-card-tag { color: var(--teal); }
.li-card--harnessed {
  background: radial-gradient(ellipse at center, rgba(232,115,42,.28) 0%, rgba(232,115,42,.05) 100%);
  border-top:1px solid var(--fire-line);
  border-right:1px solid var(--gold-line);
  padding:60px 52px 72px;
}
.li-card--harnessed .li-card-n  { font-size:.78rem; color: var(--fire); }
.li-card--harnessed .li-card-state { font-size:2.1rem; color: var(--cream); }
.li-card--harnessed .li-card-tag { font-size:1.02rem; color: var(--fire); opacity: 1; }
.li-card--harnessed p { font-size:1.02rem; }
.li-card--uncontained {
  background: radial-gradient(ellipse at center, rgba(194,59,26,.32) 0%, rgba(194,59,26,.06) 100%);
  border-top:1px solid rgba(194,59,26,.6);
}
.li-card--uncontained .li-card-n { color: var(--fire-red); }
.li-card--uncontained .li-card-tag { color: var(--fire-red); }
.li-fire {
  display:block; margin:32px auto 32px;
  width:54px; height:auto;
  color:var(--gold); opacity:.72;
  position:relative; z-index:2;
}

.li-card-n { font-family:var(--serif); font-size:.68rem; color:var(--gold); letter-spacing:.1em; margin-bottom:24px; }
.li-card-state { font-family:var(--serif); font-size:1.8rem; font-weight:300; line-height:1.2; color:var(--cream); margin-bottom:10px; }
.li-card-tag { font-size:.92rem; color:var(--gold); opacity:.7; margin-bottom:18px; }
.li-card-tag em { font-style:italic; }
.li-card p { font-size:1.12rem; line-height:1.88; color:var(--cream-75); }

/* ─── Button ─── */
.btn {
  display:inline-flex; align-items:center; gap:12px;
  padding:16px 36px;
  border:1px solid var(--gold); color:var(--gold);
  font-family:var(--sans); font-size:.6rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; text-decoration:none;
  position:relative; overflow:hidden; transition:color .4s;
}
.btn::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to right, var(--fire), var(--gold)); transform:translateX(-100%);
  transition:transform .4s var(--ease-out);
}
.btn:hover::before { transform:translateX(0); }
.btn:hover { color:var(--charcoal); }
.btn > * { position:relative; z-index:1; }
.btn-arr { transition:transform .3s; }
.btn:hover .btn-arr { transform:translateX(5px); }

/* ─── S4 · Offerings ─── */
#s4 { background:var(--dark2); position:relative; overflow:hidden; }
.s4-bg {
  position:absolute; inset:0;
  background: url('nanobanana-output/dark_night_sky_with_soft_golden_.png') center/cover no-repeat;
  opacity:.20;
}
.s4-bg::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(to bottom, var(--dark2) 0%, rgba(28,27,25,.5) 50%, var(--dark2) 100%);
}
.s4-top {
  display:flex; flex-direction:column; align-items:center;
  gap:60px; margin-bottom:80px; position:relative; z-index:2;
  text-align:center;
}
.s4-top h2 {
  font-family:var(--serif);
  font-size:clamp(2.2rem,4.2vw,4.2rem);
  font-weight:200; color:var(--cream); line-height:.92;
}

.s4-cards {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--gold-line);
  position:relative; z-index:2;
  border:1px solid var(--gold-line);
}
.s4-card {
  background:var(--dark2);
  padding:52px 42px;
  display:flex;
  flex-direction:column;
}
.card-n { font-family:var(--serif); font-size:.68rem; color:var(--gold); letter-spacing:.1em; margin-bottom:32px; }
.card-t { font-family:var(--serif); font-size:1.8rem; font-weight:300; line-height:1.2; color:var(--cream); margin-bottom:18px; }
.card-d {
  font-size:1.12rem; line-height:1.88; color:var(--cream-75);
  flex-grow:1;
  display:flex;
  align-items:center;
}
.card-bullets { list-style:disc; padding-left:20px; margin-top:auto; padding-top:24px; }
.card-bullets li {
  font-size:1rem; line-height:1.6; color:var(--cream-80);
  padding:8px 0;
  margin-bottom:6px;
}
.card-bullets li:last-child { margin-bottom:0; }

/* ─── S5 · Connect ─── */
#s5 {
  background:var(--dark);
  padding:160px var(--gutter);
  position:relative; overflow:hidden;
}
.s6-bg {
  position:absolute; inset:0;
  background: url('nanobanana-output/abstract_flowing_liquid_gold_on_.png') center/cover no-repeat;
  opacity:.18;
}
.s6-bg::after {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 80% at 50% 50%, rgba(22,21,19,.55) 0%, var(--dark) 70%),
    linear-gradient(to bottom, var(--dark) 0%, transparent 15%, transparent 85%, var(--dark) 100%);
}
.s6-glow {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 50% 50%, rgba(201,169,110,.07) 0%, transparent 70%);
}
.s6-inner {
  position:relative; z-index:2;
  text-align:center; max-width:660px; margin:0 auto;
}
#s5 .sec-id { justify-content:center; max-width:240px; margin:0 auto 72px; }
.s6-inner h2 {
  font-family:var(--serif);
  font-size:clamp(3.4rem,6.5vw,7rem);
  font-weight:200; line-height:.95; color:var(--cream);
  margin-bottom:28px; letter-spacing:-.01em;
}
.s6-inner h2 em { font-style:italic; color:var(--gold); }
.s6-inner p { font-size:1.12rem; line-height:1.88; color:var(--cream-75); margin-bottom:52px; }
#s5 .btn {
  font-size: 1.2rem;
  padding: 26px 58px;
  gap: 16px;
}

/* ─── Partner cards ─── */
.cc-card.cc-partner::before {
  transform:scaleX(1);
  background:linear-gradient(90deg, var(--fire), var(--gold));
}
.cc-card.cc-partner .cc-overlay {
  background:linear-gradient(to top, rgba(6,6,6,.92) 0%, rgba(60,45,20,.45) 35%, rgba(100,75,30,.15) 55%, transparent 75%);
}
.cc-partner-label {
  font-size:.55rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); margin-bottom:4px;
}
.cc-cred {
  font-family:var(--serif);
  font-size:.68rem; letter-spacing:.18em; font-weight:500;
  color:var(--teal); margin-top:5px; opacity:1;
}

/* ─── S3 partner mini-grid ─── */
.s3-partners {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--gold-line);
}
.s3-partners .cc-card { aspect-ratio:2/3; }

/* ─── Footer ─── */
footer {
  background:var(--black); padding:50px var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--gold-line);
}
.f-logo { font-family:var(--serif); font-size:.88rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--cream); }
.f-logo b { color:var(--gold); font-weight:500; }
.f-copy { font-size:.6rem; letter-spacing:.14em; color:var(--gray); }
.f-links { display:flex; gap:26px; list-style:none; }
.f-links a { font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gray); text-decoration:none; transition:color .3s; }
.f-links a:hover { color:var(--gold); }

/* ─── Keyframes ─── */
@keyframes fadeUp  { to { opacity:1; transform:translateY(0); } }
@keyframes wordUp  { to { opacity:1; transform:translateY(0); } }
@keyframes slide   { to { left:100%; } }

/* ─── Scroll reveal ─── */
.rv  { opacity:0; transform:translateY(34px); transition:opacity .85s ease, transform .85s var(--ease-out); }
.rvl { opacity:0; transform:translateX(-34px); transition:opacity .85s ease, transform .85s var(--ease-out); }
.rvr { opacity:0; transform:translateX(34px);  transition:opacity .85s ease, transform .85s var(--ease-out); }
.rv.on, .rvl.on, .rvr.on { opacity:1; transform:translate(0); }

.d1{transition-delay:.08s} .d2{transition-delay:.16s} .d3{transition-delay:.24s}
.d4{transition-delay:.32s} .d5{transition-delay:.40s}

/* ═══════════════════════════════════════
   Collective — Coach Grid
   ═══════════════════════════════════════ */

/* ─── Section intro ─── */
.coll-intro {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 100px;
  align-items: center;
  margin-bottom: 90px;
}
.coll-intro-copy h2 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  font-weight: 300; line-height: 1.22; color: var(--cream);
  margin-bottom: 20px;
}
.coll-intro-copy h2 em { font-style: italic; color: var(--gold); }
.coll-intro-copy p { font-size: 1.05rem; line-height: 1.85; color: var(--cream-60); }

/* ─── Featured coach card ─── */
.cc-featured {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: 68vh;
  background: var(--dark2);
  padding: 80px var(--gutter);
  text-decoration: none;
  margin-bottom: 1px;
}
.cc-featured::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease-out);
  z-index: 3;
}
.cc-featured:hover::before { transform: scaleX(1); }

.cc-feat-photo {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 48%; pointer-events: none;
}
.cc-feat-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
}
.cc-feat-photo::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to right, var(--dark2) 0%, rgba(28,27,25,.75) 35%, transparent 65%),
    linear-gradient(to top, var(--dark2) 0%, transparent 28%);
}
.cc-feat-body { position: relative; z-index: 2; max-width: 560px; }
.cc-feat-tag {
  display: block;
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 24px;
}
.cc-feat-name {
  font-family: var(--serif);
  font-size: clamp(3rem, 5.5vw, 6rem);
  font-weight: 200; line-height: 1.01;
  color: var(--cream); margin-bottom: 16px; letter-spacing: -.01em;
}
.cc-feat-cred {
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cream-60);
}
.cc-feat-body .btn { margin-top: 44px; display: inline-flex; }

/* ─── Coach grid ─── */
.cc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--gold-line);
}
.cc-card {
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 4;
  display: block; text-decoration: none;
  background: var(--dark2);
}
.cc-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: linear-gradient(to right, var(--fire), var(--gold));
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-out); z-index: 3;
}
.cc-card:hover::before { transform: scaleX(1); }
.cc-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  transition: transform .7s var(--ease-out);
}
.cc-card:hover .cc-img { transform: scale(1.05); }
.cc-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,6,6,.88) 0%, rgba(6,6,6,.22) 45%, transparent 70%);
}
.cc-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 28px 26px; z-index: 2;
}
.cc-name {
  font-family: var(--serif);
  font-size: 1.15rem; font-weight: 300; line-height: 1.2;
  color: var(--cream); margin-bottom: 7px;
}
.cc-role {
  font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); opacity: .85;
}
.cc-arr {
  position: absolute; top: 20px; right: 20px;
  font-size: .6rem; letter-spacing: .1em; color: var(--gold);
  opacity: 0; transform: translate(-3px, 3px);
  transition: opacity .3s, transform .3s; z-index: 3;
}
.cc-card:hover .cc-arr { opacity: 1; transform: translate(0,0); }

/* ═══════════════════════════════════════
   Coach Profile Page
   ═══════════════════════════════════════ */

/* ─── Profile Hero ─── */
#profile-hero {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background: var(--charcoal);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--gutter) 100px;
}

.ph-photo-wrap {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 52%;
  pointer-events: none;
}
.ph-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.ph-photo-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, var(--charcoal) 0%, rgba(14,14,12,.72) 35%, transparent 65%),
    linear-gradient(to top, var(--charcoal) 0%, transparent 22%);
}

.ph-rule-v {
  position: absolute; right: 88px; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 36vh;
  background: linear-gradient(to bottom, transparent, rgba(201,169,110,.45), transparent);
  z-index: 2;
}

.ph-back {
  position: absolute;
  top: 120px; left: var(--gutter);
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .6rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cream-60); text-decoration: none;
  transition: color .3s;
  z-index: 3;
}
.ph-back:hover { color: var(--gold); }
.ph-back-arr { font-size: .8rem; transition: transform .3s; }
.ph-back:hover .ph-back-arr { transform: translateX(-4px); }

.ph-body {
  position: relative; z-index: 2;
  max-width: 680px;
}

.ph-name {
  font-family: var(--serif);
  font-size: clamp(3.4rem, 6.5vw, 7.4rem);
  font-weight: 200; line-height: 1.01;
  color: var(--cream);
  margin-bottom: 20px;
  letter-spacing: -.01em;
}

.ph-title {
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); font-weight: 400;
  margin-bottom: 0;
}

.ph-divider {
  width: 52px; height: 1px;
  background: var(--gold-line);
  margin: 36px 0;
}

.ph-tags {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 32px;
}
.ph-tag {
  display: inline-block;
  padding: 7px 16px;
  border: 1px solid rgba(201,169,110,.26);
  font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cream-60);
}

.ph-lang {
  display: flex; align-items: center; gap: 14px;
}
.ph-lang-lbl {
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gray);
}
.ph-lang-val {
  font-size: .68rem; letter-spacing: .1em;
  color: var(--cream-60);
}

/* ─── PS1 · Bio ─── */
#ps1 { background: var(--dark); }

.ps1-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 160px;
  align-items: start;
}

.ps1-left { position: relative; padding-top: 8px; }

.ps1-right { max-width: 680px; }
.ps1-p {
  font-size: 1.12rem; line-height: 1.88;
  color: var(--cream-75);
  margin-bottom: 24px;
}
.ps1-p:last-child { margin-bottom: 0; }

/* ─── PS2 · Expertise ─── */
#ps2 {
  background: var(--charcoal);
  position: relative; overflow: hidden;
}

.ps2-wm {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-family: var(--serif); font-size: 20vw; font-weight: 800;
  color: transparent; -webkit-text-stroke: 1px rgba(201,169,110,.025);
  white-space: nowrap; pointer-events: none; user-select: none; letter-spacing: -.04em;
}

.ps2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--gold-line);
  position: relative; z-index: 2;
}
.ps2-grid--solo { grid-template-columns: 1fr; }

.ps2-col {
  background: rgba(14,14,12,.96);
  padding: 56px 52px;
  position: relative; overflow: hidden;
  transition: background .45s;
}
.ps2-col::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 42px; height: 2px; background: var(--gold);
  transition: width .55s var(--ease-out);
}
.ps2-col:hover { background: rgba(201,169,110,.04); }
.ps2-col:hover::before { width: 100%; }

.ps2-col-label {
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 32px;
}

.ps2-list {
  list-style: none; padding: 0; margin: 0;
}
.ps2-list li {
  font-size: 1.12rem; line-height: 1.88;
  color: var(--cream-75);
  padding: 10px 0;
  border-bottom: 1px solid rgba(245,240,232,.06);
  padding-left: 18px;
  position: relative;
}
.ps2-list li::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 1px;
  background: var(--gold);
}
.ps2-list li:last-child { border-bottom: none; }


/* ─── PS3 · Philosophy ─── */
#ps3 {
  padding: 160px var(--gutter);
  background: var(--dark2);
  position: relative; overflow: hidden;
}
#ps3::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(201,169,110,.04) 0%, transparent 70%);
  pointer-events: none;
}

.ps3-inner {
  max-width: 820px; margin: 0 auto;
  text-align: center; position: relative; z-index: 2;
}

.ps3-mark {
  font-family: var(--serif);
  font-size: 9rem; font-weight: 200; line-height: .6;
  color: var(--gold); opacity: .28;
  margin-bottom: 24px;
  display: block;
}

.ps3-quote {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 300; font-style: italic;
  line-height: 1.55; color: var(--cream);
  border: none; margin: 0; padding: 0;
}

/* ─── S6 · How We Work ─── */
#s6.hww-sec { background: var(--charcoal); }

.hww-inner { max-width: 880px; margin: 0 auto; }

.hww-top { margin-bottom: 80px; }
.hww-title {
  font-family: var(--serif);
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 200; line-height: 1.02;
  color: var(--cream); margin-bottom: 20px;
}
.hww-sub {
  font-size: 1.05rem; line-height: 1.8;
  color: var(--cream-60); max-width: 600px;
}


.hww-stage {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 48px;
}

.hww-marker {
  display: flex; flex-direction: column; align-items: center;
}
.hww-circle {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.1rem; font-weight: 400;
  position: relative; z-index: 2;
}
.hww-circle--teal  { background: rgba(165,184,202,.1);  border: 1px solid var(--teal-line);  color: var(--teal); }
.hww-circle--fire  { background: rgba(232,115,42,.12); border: 1px solid var(--fire-line);  color: var(--fire); }
.hww-circle--gold  { background: rgba(201,169,110,.1); border: 1px solid var(--gold-line);  color: var(--gold); }

.hww-line {
  width: 1px; flex: 1; min-height: 32px;
  background: var(--gold-line); margin: 10px 0;
}

.hww-content { padding-bottom: 60px; }
.hww-stage:last-child .hww-content { padding-bottom: 0; }

.hww-stage-label {
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
}
.hww-stage-name {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 2.8vw, 2.6rem);
  font-weight: 300; color: var(--cream);
  line-height: 1.18; margin-bottom: 18px;
}
.hww-stage-body {
  font-size: 1.12rem; line-height: 1.88;
  color: var(--cream-75); margin-bottom: 24px;
  max-width: 700px;
}

.hww-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.hww-tag {
  display: inline-block; padding: 6px 15px;
  border: 1px solid var(--gold-line);
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cream-60);
}
.hww-tag--fire { border-color: var(--fire-line);  color: var(--fire); }
.hww-tag--teal { border-color: var(--teal-line);  color: var(--teal); }
.hww-tag--gold { border-color: var(--gold-line);  color: var(--gold); }

.hww-callout {
  margin-top: 80px;
  padding: 44px 60px;
  border: 1px solid var(--gold-line);
  background: rgba(201,169,110,.04);
  text-align: center;
}
.hww-callout-title {
  font-size: 1.05rem; font-weight: 500;
  color: var(--cream); margin-bottom: 12px;
}
.hww-callout-body {
  font-size: 1.12rem; line-height: 1.88;
  color: var(--cream-75);
}

/* ═══════════════════════════════════════
   Responsive Breakpoints
   ═══════════════════════════════════════ */

/* ─── Mobile Nav Toggle ─── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 600;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--cream);
  transition: transform .3s, opacity .3s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ─── 1024px · Small Desktop / Tablet Landscape ─── */
@media (max-width: 1024px) {
  :root { --gutter: 48px; --space-section: 100px; }

  /* Nav */
  nav { padding: 22px var(--gutter); }
  nav.stuck { padding: 14px var(--gutter); }
  .nav-links { gap: 28px; }

  /* Hero */
  #hero { padding: 100px var(--gutter) 80px; }
  .hero-rule-v { right: 48px; }
  .hero-cta {
    position: static !important;
    margin-top: 48px;
    width: fit-content !important;
  }

  /* Sections */
  #s5 { padding: 120px var(--gutter); }

  /* Grids */
  .s3-title { margin-bottom: 56px; }
  .s1-grid { gap: 60px; }
  .s4-top { gap: 40px; }

  /* Coach grid */
  .cc-grid { grid-template-columns: repeat(3, 1fr); }
  .cc-featured { padding: 60px var(--gutter); min-height: 58vh; }

  /* Profile */
  #profile-hero { padding: 0 var(--gutter) 80px; }
  .ph-rule-v { right: 48px; }
  .ps1-grid { gap: 60px; }
  #ps3 { padding: 120px var(--gutter); }

  /* How We Work */
  .hww-stage { gap: 36px; }

  /* Footer */
  footer { padding: 40px var(--gutter); }
}

/* ─── 768px · Tablet Portrait ─── */
@media (max-width: 768px) {
  :root { --gutter: 32px; --space-section: 80px; }

  /* Mobile Nav */
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    background: var(--black);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s, visibility .3s;
    z-index: 550;
  }
  .nav-links.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav-links a { font-size: .75rem; }
  .nav-drop,
  .nav-has-drop:hover .nav-drop,
  .nav-has-drop:focus-within .nav-drop {
    position: static;
    transform: none !important;
    background: transparent;
    border: none;
    backdrop-filter: none;
    padding: 12px 0 0;
    min-width: auto;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: none !important;
  }
  .nav-drop a {
    padding: 8px 0;
    text-align: center;
    font-size: .65rem;
    color: var(--cream-30);
    transition: none;
  }
  .nav-has-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .nav-has-drop::before { display: none; }
  .nav-caret { display: none; }

  /* Nav */
  nav { padding: 20px var(--gutter); }
  nav.stuck { padding: 14px var(--gutter); }

  /* Hero */
  #hero { padding: 90px var(--gutter) 70px; min-height: 85vh; }
  .hero-rule-v { display: none; }
  .hero-rule-h { left: var(--gutter); right: var(--gutter); bottom: 60px; }
  .hero-scroll { left: var(--gutter); bottom: 40px; }
  .hero-cta {
    position: static !important;
    margin-top: 36px;
    font-size: 1rem !important;
    padding: 18px 36px !important;
    width: fit-content !important;
    max-width: 100%;
  }
  #hero-hl { font-size: clamp(2.4rem, 4.5vw, 3.2rem) !important; }
  .eyebrow { margin-bottom: 36px; }
  .hero-sub { margin-top: 28px; }

  /* Sections */
  .sec-id { margin-bottom: 48px; }
  #s5 { padding: 100px var(--gutter); }

  /* S1 Grid */
  .s1-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .ghost-num { font-size: clamp(6rem, 20vw, 10rem); }

  /* S3 title */
  .s3-title { margin-bottom: 40px; }

  /* SF + LI */
  .sf-grid { grid-template-columns: 1fr; }
  .sf-hl { margin-bottom: 48px; }
  .li-cards { grid-template-columns: 1fr; }

  /* S4 */
  .s4-top { flex-direction: column; gap: 28px; }
  .s4-cards { grid-template-columns: 1fr; }

  /* Coach grid */
  .cc-grid { grid-template-columns: repeat(2, 1fr); }
  .cc-featured {
    flex-direction: column;
    align-items: flex-start;
    min-height: auto;
    padding: 48px var(--gutter);
  }
  .cc-feat-photo {
    position: relative;
    width: 100%;
    height: 50vh;
    margin-bottom: 32px;
  }
  .cc-feat-photo::after {
    background: linear-gradient(to top, var(--dark2) 0%, transparent 40%);
  }
  .cc-feat-body { max-width: 100%; }
  .coll-intro {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Profile Hero */
  #profile-hero {
    padding: 0 var(--gutter) 60px;
    min-height: 90vh;
  }
  .ph-photo-wrap { width: 100%; opacity: .4; }
  .ph-photo-overlay {
    background:
      linear-gradient(to top, var(--charcoal) 0%, rgba(14,14,12,.6) 50%, transparent 100%);
  }
  .ph-back { top: 100px; left: var(--gutter); }
  .ph-rule-v { display: none; }
  .ph-body { max-width: 100%; }

  /* Profile sections */
  .ps1-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .ps2-grid { grid-template-columns: 1fr; }
  .ps2-col { padding: 40px var(--gutter); }
  #ps3 { padding: 80px var(--gutter); }
  .ps3-mark { font-size: 6rem; }

  /* How We Work */
  .hww-stage { grid-template-columns: 44px 1fr; gap: 24px; }
  .hww-callout { padding: 36px var(--gutter); }

  /* Footer */
  footer {
    flex-direction: column;
    gap: 24px;
    padding: 40px var(--gutter);
    text-align: center;
  }
  .f-links { justify-content: center; }
}

/* ─── 480px · Mobile ─── */
@media (max-width: 480px) {
  :root { --gutter: 24px; --space-section: 64px; }

  /* Nav */
  nav { padding: 18px var(--gutter); }
  nav.stuck { padding: 12px var(--gutter); }
  .nav-logo { font-size: .8rem; letter-spacing: .15em; }

  /* Hero */
  #hero { padding: 80px var(--gutter) 60px; }
  .hero-cta {
    position: static !important;
    margin-top: 28px;
    font-size: 0.65rem !important;
    padding: 12px 20px !important;
    gap: 8px !important;
    width: fit-content !important;
    max-width: 100%;
    letter-spacing: 0.15em !important;
  }
  #hero-hl { font-size: clamp(2rem, 4vw, 2.6rem) !important; }
  .eyebrow { margin-bottom: 28px; }
  .eyebrow-dash { width: 24px; }

  /* Sections */
  .sec-id { margin-bottom: 36px; gap: 10px; }
  .sec-dash { width: 28px; }
  #s5 { padding: 80px var(--gutter); }

  /* Ghost text */
  .ghost-num { font-size: clamp(5rem, 22vw, 8rem); }

  /* S3 title */
  .s3-title { margin-bottom: 32px; }

  /* Cards */
  .sf-card-front, .sf-card-back { padding: 28px 20px; }
  .sf-card-front p { font-size: 1.05rem; }
  .sf-q { font-size: 2.5rem; margin-bottom: 6px; }
  .s4-card { padding: 36px 28px; }
  .li-card { padding: 36px 28px; }

  /* S3 partners - 2 columns at small mobile */
  .s3-partners { grid-template-columns: repeat(2, 1fr); }

  /* Coach grid - keep 2 columns but smaller */
  .cc-info { padding: 20px 18px; }
  .cc-name { font-size: 1rem; }
  .cc-role { font-size: .55rem; }

  /* Featured coach */
  .cc-featured { padding: 36px var(--gutter); }
  .cc-feat-photo { height: 40vh; }
  .cc-feat-body .btn { margin-top: 32px; }

  /* Profile */
  #profile-hero { padding: 0 var(--gutter) 48px; }
  .ph-back { top: 90px; left: var(--gutter); }
  .ps2-col { padding: 32px var(--gutter); }
  #ps3 { padding: 64px var(--gutter); }
  .ps3-mark { font-size: 5rem; }

  /* How We Work */
  .hww-stage { grid-template-columns: 36px 1fr; gap: 18px; }
  .hww-circle { width: 36px; height: 36px; font-size: .95rem; }
  .hww-callout { padding: 28px var(--gutter); margin-top: 56px; }
  .hww-content { padding-bottom: 48px; }

  /* Button */
  .btn { padding: 14px 28px; }

  /* Footer */
  footer { padding: 32px var(--gutter); gap: 20px; }
  .f-copy { font-size: .55rem; }
}