/* ============================================================
   VRITTI SPACE — home.css  COMPLETE  v7
   ============================================================
   CHANGES:
   · Hero: video is a ROUNDED RECTANGLE (not circle/egg)
     — 16:10 aspect ratio, border-radius 24px → 0 on expand
   · Hero layout: tagline + stats pinned bottom-left,
     CTAs pinned bottom-right — proper corner placement
   · Alternating section backgrounds:
     ribbon      → #0a0a0a (dark)
     about       → #fff    (white)
     assessment  → #0a0a0a (dark)
     six-weeks   → #fff    (white)
     how-it-works→ #0a0a0a (dark)
     donate      → warm    (accent)
     proof       → #fff    (white)
     experts     → #0a0a0a (dark)
     events      → #fff    (white)
     journal     → #0a0a0a (dark)
     closing CTA → #fff    (white)
   · Text colours flip to match each section's background
   ============================================================ */

:root {
  --ink:       #0a0a0a;
  --paper:     #ffffff;
  --surface:   #111111;
  --edge-dark: #1e1e1e;
  --edge-lite: #e2e2e2;
  --sage:      #8aaa7c;
  --e:         cubic-bezier(0.22,1,0.36,1);
  --hero-ease: cubic-bezier(0.22,1,0.36,1);
  --hero-blue-a: rgba(107,174,214,0.58);
  --hero-blue-b: rgba(66,146,198,0.40);
  --hero-blue-c: rgba(158,202,225,0.30);
}

/* ── shared helpers on DARK sections ── */
.eyebrow-dark {
  display:inline-flex; align-items:center; gap:10px;
  font-size:10px; font-weight:400; letter-spacing:0.26em;
  text-transform:uppercase; color:rgba(255,255,255,0.36);
}
.eyebrow-dark::before { content:''; width:20px; height:1px; background:var(--sage); flex-shrink:0; }

/* ── shared helpers on LIGHT sections ── */
.eyebrow-lite {
  display:inline-flex; align-items:center; gap:10px;
  font-size:10px; font-weight:400; letter-spacing:0.26em;
  text-transform:uppercase; color:rgba(10,10,10,0.40);
}
.eyebrow-lite::before { content:''; width:20px; height:1px; background:var(--sage); flex-shrink:0; }

/* Keep old .eyebrow working (used by dark sections) */
.eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:10px; font-weight:400; letter-spacing:0.26em; text-transform:uppercase; color:rgba(255,255,255,0.36); }
.eyebrow::before { content:''; width:20px; height:1px; background:var(--sage); flex-shrink:0; }

.section-head { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:flex-end; margin-bottom:72px; }
.section-head h2 { margin-top:14px; }
@media(max-width:768px){ .section-head { grid-template-columns:1fr; gap:20px; } }

/* section-sub colours set per-section below */
.section-sub { font-size:1.02rem; line-height:1.78; max-width:380px; }
.section-count { font-size:10px; letter-spacing:.14em; text-transform:uppercase; margin-top:20px; }

/* Dark-bg buttons */
.btn { display:inline-flex; align-items:center; gap:10px; padding:13px 28px; border-radius:100px; font-size:13px; font-weight:400; letter-spacing:0.01em; transition:all 0.28s var(--e); }
.btn svg { transition:transform 0.28s var(--e); flex-shrink:0; }
.btn:hover svg { transform:translateX(4px); }
.btn-solid-dark { background:#fff; color:#0a0a0a; border:1.5px solid #fff; }
.btn-solid-dark:hover { background:rgba(255,255,255,0.88); transform:translateY(-1px); }
.btn-ghost-dark { background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.78); border:1px solid rgba(255,255,255,0.18); }
.btn-ghost-dark:hover { background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.40); color:#fff; }
/* Light-bg buttons */
.btn-solid-lite { background:#0a0a0a; color:#fff; border:1.5px solid #0a0a0a; }
.btn-solid-lite:hover { background:rgba(10,10,10,0.84); transform:translateY(-1px); }
.btn-ghost-lite { background:transparent; color:rgba(10,10,10,0.58); border:1px solid rgba(10,10,10,0.22); }
.btn-ghost-lite:hover { background:rgba(10,10,10,0.05); border-color:rgba(10,10,10,0.40); color:#0a0a0a; }
/* alias */
.btn-solid  { background:#fff; color:#0a0a0a; border:1.5px solid #fff; }
.btn-solid:hover { background:rgba(255,255,255,0.88); transform:translateY(-1px); }
.btn-ghost  { background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.78); border:1px solid rgba(255,255,255,0.14); }
.btn-ghost:hover { background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.36); color:#fff; }


/* ============================================================
   01 — HERO   (Sage-on-ink editorial, brand-aligned)
   ============================================================ */
:root {
  /* Hero palette — Black + drifting white smoke */
  --hero-ink:    #000000;
  --hero-ink-2:  #050506;
  --hero-ink-3:  #000000;
  --hero-cream:  #ffffff;
  --hero-sage:   #ffffff;
  --hero-sage-2: rgba(255,255,255,0.75);
  --hero-gold:   #ffffff;
}

.vh-hero {
  position:relative;
  width:100%; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; isolation:isolate; z-index:0;
  background:#000;
  padding:calc(var(--nav-h,66px) + 12px) clamp(24px,4vw,48px) clamp(80px,10vh,120px);
  color:#fff;
}

/* ── Smoky white drift on pure black ── */
.hero-warp { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.hero-warp-layer { position:absolute; will-change:transform,opacity; mix-blend-mode:screen; }

.hero-warp-l1 {
  inset:-25% -15%;
  background:
    radial-gradient(ellipse 45% 38% at 25% 30%, rgba(255,255,255,0.20) 0%, transparent 55%),
    radial-gradient(ellipse 40% 35% at 75% 22%, rgba(255,255,255,0.16) 0%, transparent 55%),
    radial-gradient(ellipse 38% 32% at 50% 78%, rgba(255,255,255,0.14) 0%, transparent 55%);
  filter:blur(70px);
  animation:smokeDriftA 28s ease-in-out infinite alternate;
}
.hero-warp-l2 {
  inset:-30% -20%;
  background:
    radial-gradient(ellipse 50% 40% at 60% 50%, rgba(255,255,255,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 35% 30% at 18% 75%, rgba(255,255,255,0.12) 0%, transparent 55%),
    radial-gradient(ellipse 30% 28% at 85% 70%, rgba(255,255,255,0.10) 0%, transparent 55%);
  filter:blur(80px);
  animation:smokeDriftB 42s ease-in-out infinite alternate;
}
.hero-warp-l3 {
  display:block;
  inset:-20% -10%;
  background:
    radial-gradient(ellipse 30% 25% at 40% 40%, rgba(255,255,255,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 28% 24% at 70% 80%, rgba(255,255,255,0.08) 0%, transparent 55%);
  filter:blur(60px);
  animation:smokeDriftC 36s ease-in-out infinite alternate;
  opacity:0.9;
}
@keyframes smokeDriftA {
  0%   { transform:translate(-2%,-3%) scale(1)    rotate(0deg); }
  50%  { transform:translate(5%, 2%)  scale(1.10) rotate(4deg); }
  100% { transform:translate(-4%, 4%) scale(1.05) rotate(-3deg); }
}
@keyframes smokeDriftB {
  0%   { transform:translate(3%, 4%)  scale(1.05) rotate(0deg); }
  50%  { transform:translate(-6%,-3%) scale(1.12) rotate(-5deg); }
  100% { transform:translate(4%,-5%)  scale(1.08) rotate(3deg); }
}
@keyframes smokeDriftC {
  0%   { transform:translate(0,0)      scale(1)    rotate(0deg);   opacity:0.7; }
  50%  { transform:translate(7%,-4%)   scale(1.15) rotate(6deg);   opacity:1; }
  100% { transform:translate(-5%, 6%)  scale(1.08) rotate(-2deg);  opacity:0.85; }
}

.hero-warp-noise {
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay; opacity:0.10;
  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.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size:220px;
}
.hero-warp-vignette {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 22%, transparent 78%, rgba(0,0,0,0.55) 100%);
}

/* Decorative white hairline at the very bottom of hero */
.vh-hero::after {
  content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:min(420px,52vw); height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.40), transparent);
  z-index:3; pointer-events:none;
}

/* ===== Centered hero content ===== */
.hero-stack {
  position:relative; z-index:2;
  width:100%; max-width:780px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(18px,2vw,26px);
}
.hero-kicker {
  display:inline-flex; align-items:center; gap:14px;
  font-size:10px; font-weight:600; letter-spacing:0.34em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.62);
  margin:0;
}
.hero-kicker-line { display:block; width:34px; height:1px; background:linear-gradient(to right,transparent,var(--hero-sage)); flex-shrink:0; }
.hero-kicker-line--r { background:linear-gradient(to left,transparent,var(--hero-sage)); }

.hero-h1-c {
  font-family:'Switzer','Inter',system-ui,sans-serif;
  font-size:clamp(2.6rem,6.4vw,5.6rem);
  font-weight:300; line-height:1.02; letter-spacing:-0.03em;
  color:#ffffff; margin:0;
  text-shadow:0 2px 30px rgba(0,0,0,0.40);
  text-wrap:balance;
}
.hero-h1-c em {
  font-style:italic; font-weight:300;
  color:rgba(255,255,255,0.65);
  text-shadow:0 0 32px rgba(255,255,255,0.20);
}

.hero-lead {
  font-family:'Switzer','Inter',system-ui,sans-serif;
  font-size:clamp(0.98rem,1.25vw,1.18rem);
  font-weight:300; line-height:1.72;
  color:rgba(255,255,255,0.72);
  max-width:580px; margin:0;
  text-wrap:pretty;
}

.hero-cta-row {
  display:flex; flex-wrap:wrap; gap:12px;
  justify-content:center; align-items:center;
  padding-top:10px;
}

/* Primary — white solid (on black bg) */
.hero-btn-glass {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 30px; border-radius:100px;
  background:linear-gradient(180deg, #ffffff 0%, #e9e9e9 100%);
  color:#0a0a0a;
  font-size:14px; font-weight:500; letter-spacing:0.01em;
  border:1px solid rgba(255,255,255,0.85);
  box-shadow:0 10px 30px rgba(255,255,255,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
  transition:transform 0.3s var(--e),box-shadow 0.3s var(--e),background 0.3s var(--e);
  white-space:nowrap;
}
.hero-btn-glass:hover { background:linear-gradient(180deg, #ffffff 0%, #f4f4f4 100%); transform:translateY(-2px); box-shadow:0 14px 36px rgba(255,255,255,0.20), inset 0 1px 0 rgba(255,255,255,0.85); }
.hero-btn-glass svg { transition:transform 0.3s var(--e); }
.hero-btn-glass:hover svg { transform:translateX(4px); }

/* Secondary — ghost outline */
.hero-btn-light {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px; border-radius:100px;
  background:transparent; color:#ffffff;
  font-size:14px; font-weight:400; letter-spacing:0.01em;
  border:1px solid rgba(255,255,255,0.28);
  transition:border-color 0.3s var(--e),background 0.3s var(--e),transform 0.3s var(--e),color 0.3s var(--e);
  white-space:nowrap;
}
.hero-btn-light:hover { transform:translateY(-2px); border-color:rgba(255,255,255,0.60); background:rgba(255,255,255,0.05); }

/* Scroll cue — minimal */
.hero-scroll-cue {
  position:absolute; bottom:clamp(20px,3.5vh,36px); left:50%; transform:translateX(-50%);
  z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:rgba(255,255,255,0.42); text-decoration:none;
  transition:color 0.25s,opacity 0.4s;
}
.hero-scroll-cue:hover { color:#fff; }
.hero-scroll-label { font-size:9px; font-weight:600; letter-spacing:0.3em; text-transform:uppercase; }
.hero-scroll-line { display:block; width:1px; height:44px; background:rgba(255,255,255,0.15); position:relative; overflow:hidden; order:-1; }
.hero-scroll-line::after { content:''; position:absolute; top:-44px; left:0; width:100%; height:44px; background:linear-gradient(to bottom,transparent,#fff); animation:scrollDrop 2.6s ease-in-out infinite; }
@keyframes scrollDrop { 0%{top:-44px;opacity:0} 20%{opacity:1} 100%{top:44px;opacity:0} }

/* Entrance animations */
[data-anim]               { filter:blur(12px); }
[data-anim="fade-up"]     { opacity:0; transform:translateY(24px); }
[data-anim].is-visible    { opacity:1!important; filter:blur(0)!important; transform:none!important; transition:opacity 1.1s var(--hero-ease),filter 1.1s var(--hero-ease),transform 1.1s var(--hero-ease); transition-delay:var(--anim-delay,0ms); }

/* Header styling is global (white floating pill) — see style.css */

/* Hero brand mark — small white disc with sage glow halo (echoes brand) */
.hero-brandmark {
  display:inline-flex; align-items:center; justify-content:center;
  width:clamp(72px,8vw,88px); height:clamp(72px,8vw,88px);
  border-radius:50%;
  background:#fafaf7;
  box-shadow:
    0 0 0 1px rgba(245,243,238,0.18),
    0 20px 50px rgba(0,0,0,0.35),
    0 4px 14px rgba(0,0,0,0.20),
    inset 0 -2px 6px rgba(0,0,0,0.04);
  transition:transform 0.5s var(--e),box-shadow 0.4s var(--e);
  position:relative;
}
.hero-brandmark::before {
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid rgba(138,170,124,0.20);
  pointer-events:none;
}
.hero-brandmark::after {
  content:''; position:absolute; inset:-22px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.28), transparent 65%);
  filter:blur(18px); z-index:-1;
  animation:brandmarkGlow 5s ease-in-out infinite alternate;
  pointer-events:none;
}
.hero-brandmark::before { border-color:rgba(255,255,255,0.22) !important; }
@keyframes brandmarkGlow {
  from { opacity:0.40; transform:scale(0.94); }
  to   { opacity:0.90; transform:scale(1.10); }
}
.hero-brandmark:hover { transform:translateY(-2px); }
.hero-brandmark-svg { width:62%; height:62%; display:block; }

@media(max-width:768px) {
  .hero-h1-c { font-size:clamp(2.2rem,8vw,3.6rem); }
  .hero-lead { font-size:1rem; }
  .hero-btn-glass,.hero-btn-light { padding:12px 24px; font-size:13px; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-warp-layer,.hero-scroll-line::after,.hero-ribbon-track { animation:none!important }
  [data-anim] { opacity:1!important; filter:none!important; transform:none!important; transition:none!important }
}


/* ============================================================
   02 — RIBBON  (DARK #0a0a0a)
   ============================================================ */
.hero-ribbon {
  position:relative; z-index:1;
  background:#0a0a0a;
  border-bottom:1px solid #1e1e1e;
  padding:11px 0; overflow:hidden; display:flex;
}
.hero-ribbon-track { display:flex; width:max-content; gap:0; animation:ribbonScroll 40s linear infinite; white-space:nowrap; }
.hero-ribbon:hover .hero-ribbon-track { animation-play-state:paused; }
.hero-ribbon-item { display:inline-flex; align-items:center; padding:0 28px; font-size:11px; font-weight:400; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.32); border-right:1px solid rgba(255,255,255,0.07); flex-shrink:0; gap:12px; }
.hero-ribbon-item:last-child { border-right:none; }
.hero-ribbon-dot { display:inline-block; width:3px; height:3px; border-radius:50%; background:var(--sage); flex-shrink:0; }
@keyframes ribbonScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@media(max-width:768px) { .hero-ribbon-item{padding:0 16px;font-size:10px} }



/* ============================================================
   03 — ABOUT  (LIGHT #ffffff)
   ============================================================ */
.about-section { position:relative; z-index:1; background:#faf8f4; border-top:1px solid rgba(10,10,10,0.06); }
.about-section::after {
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:clamp(80px,11vh,130px);
  background:linear-gradient(180deg, transparent 0%, rgba(10,10,10,0.45) 60%, #0a0a0a 100%);
  pointer-events:none; z-index:5;
}
.cats-section { box-shadow:inset 0 60px 50px -50px rgba(10,10,10,0.45); }
.about-grid { display:grid; grid-template-columns:55fr 45fr; min-height:clamp(440px,calc(100vh - var(--nav-h,66px)),780px); align-items:stretch; }
.about-media-col { position:relative; overflow:hidden; background:#0a0a0a; }
.about-img-wrap { position:absolute; inset:0; }
.about-img-wrap img { width:100%; height:100%; object-fit:cover; object-position:center 20%; opacity:0.72; transform:scale(1.04); transition:transform 1.4s var(--e),opacity 0.8s; filter:saturate(0.85) contrast(1.05); }
.about-media-col:hover .about-img-wrap img { transform:scale(1.0); opacity:0.86; }
.about-media-col::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to top,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.18) 52%,rgba(0,0,0,0.04) 100%); }
.about-stat-pills { position:absolute; top:clamp(28px,4vw,48px); left:clamp(28px,4vw,48px); z-index:3; display:flex; flex-direction:column; gap:10px; }
.about-pill { display:inline-flex; align-items:center; gap:10px; padding:9px 18px; border-radius:100px; background:rgba(255,255,255,0.08); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.14); transition:background 0.3s,transform 0.4s var(--e); cursor:default; }
.about-pill:hover { background:rgba(255,255,255,0.16); transform:translateX(6px); }
.about-pill b { font-size:1.4rem; font-weight:400; color:#fff; letter-spacing:-0.04em; line-height:1; }
.about-pill span { font-size:9px; font-weight:400; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.44); }
.about-photo-text { position:absolute; bottom:0; left:0; right:0; z-index:2; padding:clamp(28px,4vw,52px) clamp(28px,4vw,52px) clamp(96px,13vh,150px); }
.about-photo-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:10px; font-weight:400; letter-spacing:0.26em; text-transform:uppercase; color:rgba(255,255,255,0.44); margin-bottom:14px; }
.about-photo-eyebrow::before { content:''; width:18px; height:1px; background:var(--sage); flex-shrink:0; }
.about-photo-headline { font-size:clamp(2rem,4.2vw,4rem); font-weight:300; line-height:1.06; letter-spacing:-0.03em; color:#fff; margin:0 0 12px; }
.about-photo-headline em { font-style:italic; color:rgba(255,255,255,0.50); }
.about-photo-caption { font-size:13px; color:rgba(255,255,255,0.46); line-height:1.65; max-width:360px; }

/* Right panel — WHITE background */
.about-body {
  background:#faf8f4;
  padding:clamp(40px,5vw,68px) clamp(32px,4.5vw,64px) clamp(110px,14vh,160px);
  display:flex; flex-direction:column; justify-content:center;
  border-left:1px solid rgba(10,10,10,0.06);
}
.about-pullquote {
  font-size:clamp(1rem,1.6vw,1.35rem); font-weight:400; font-style:italic;
  line-height:1.42; letter-spacing:-0.015em; color:rgba(10,10,10,0.72);
  margin:0 0 clamp(18px,2.2vw,28px); padding:0 0 clamp(18px,2.2vw,28px);
  border-bottom:1px solid rgba(10,10,10,0.08);
}
.about-pullquote::before { content:'\201C'; display:block; font-size:clamp(2rem,3.5vw,3rem); font-weight:400; font-style:normal; color:var(--sage); line-height:0.8; margin-bottom:8px; }
.values-list { display:flex; flex-direction:column; margin-bottom:clamp(20px,2.5vw,32px); }
.value-item { display:grid; grid-template-columns:28px 1fr; gap:16px; align-items:flex-start; padding:12px 0; border-top:1px solid rgba(10,10,10,0.08); transition:padding-left 0.4s var(--e); cursor:default; }
.value-item:last-child { border-bottom:1px solid rgba(10,10,10,0.08); }
.value-item:hover { padding-left:10px; }
.value-n { font-size:10px; font-weight:400; letter-spacing:0.1em; color:rgba(10,10,10,0.24); padding-top:3px; transition:color 0.3s; }
.value-item:hover .value-n { color:var(--sage); }
.value-item > div { display:flex; flex-direction:column; gap:4px; }
.value-item b { font-size:13.5px; font-weight:500; color:rgba(10,10,10,0.82); display:block; transition:transform 0.4s var(--e); }
.value-item:hover b { transform:translateX(6px); }
.value-item span { font-size:12px; color:rgba(10,10,10,0.50); line-height:1.5; }
.about-cta-btn { display:inline-flex; align-items:center; gap:10px; align-self:flex-start; background:#0a0a0a; color:#fff; padding:13px 26px; border-radius:100px; font-size:13px; font-weight:400; border:1.5px solid #0a0a0a; transition:all 0.28s var(--e); }
.about-cta-btn:hover { background:rgba(10,10,10,0.84); transform:translateY(-1px); }
.about-cta-btn svg { transition:transform 0.28s var(--e); }
.about-cta-btn:hover svg { transform:translateX(4px); }
@media(max-width:960px) { .about-grid{grid-template-columns:1fr} .about-media-col{min-height:clamp(360px,50vw,500px)} .about-body{border-left:none;border-top:1px solid #e2e2e2} }

/* Mobile (≤600px): unstack the overlay — photo on top, pills, then text on light bg.
   Zero overlap with the face. */
@media(max-width:600px) {
  .about-media-col {
    min-height:auto;
    background:#fbfaf6;
    display:flex; flex-direction:column;
  }
  .about-media-col::after { display:none; }                  /* remove dark gradient */

  .about-img-wrap {
    position:relative; inset:auto;
    width:100%; height:clamp(300px, 62vw, 400px);
    overflow:hidden;
  }
  .about-img-wrap img {
    width:100%; height:100%;
    object-fit:cover; object-position:center 20%;
    opacity:1; transform:none; filter:saturate(1) contrast(1);
  }

  .about-stat-pills {
    position:static;
    flex-direction:row; flex-wrap:wrap; gap:8px;
    padding:18px 22px 0;
  }
  .about-pill {
    padding:6px 12px; gap:8px;
    background:rgba(28,36,25,0.05);
    border:1px solid rgba(28,36,25,0.10);
    backdrop-filter:none;
  }
  .about-pill:hover { background:rgba(28,36,25,0.08); transform:none; }
  .about-pill b    { color:#1c2419; font-size:1rem; }
  .about-pill span { color:rgba(28,36,25,0.62); font-size:9px; letter-spacing:0.14em; }

  .about-photo-text {
    position:static;
    padding:18px 22px 28px;
  }
  .about-photo-eyebrow  { color:#5d7a51; }
  .about-photo-headline { color:#1c2419; font-size:clamp(1.6rem, 6vw, 2.1rem); line-height:1.14; }
  .about-photo-headline em { color:#5d7a51; }
  .about-photo-caption  { color:rgba(28,36,25,0.66); }
}
@media(prefers-reduced-motion:reduce) { .about-img-wrap img,.value-item,.value-item b,.about-pill{transition:none} }


/* ============================================================
   04 — ASSESSMENT  (DARK #0a0a0a)
   ============================================================ */
.cats-section { position:relative; z-index:1; background:#0a0a0a; overflow:hidden; padding:clamp(80px,10vh,140px) 0 clamp(100px,12vh,160px); }
.cats-section::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(ellipse 70% 55% at 50% 35%,rgba(138,170,124,0.04),transparent 70%); }
.cats-orb { position:absolute; border-radius:50%; pointer-events:none; z-index:0; }
.cats-header { position:relative; z-index:2; max-width:760px; margin:0 auto clamp(48px,6vh,80px); padding:0 clamp(24px,5vw,48px); text-align:center; }
.cats-eyebrow { display:inline-block; font-size:11px; font-weight:400; letter-spacing:0.22em; text-transform:uppercase; color:rgba(255,255,255,0.36); margin-bottom:24px; }
.cats-title { font-size:clamp(3rem,7vw,6rem); font-weight:300; line-height:1.04; letter-spacing:-0.025em; color:#fff; margin:0 0 24px; }
.cats-subtitle { font-size:clamp(1rem,1.3vw,1.125rem); line-height:1.6; color:rgba(255,255,255,0.50); max-width:540px; margin:0 auto clamp(32px,4vh,44px); font-weight:400; }
.cats-cta-pill { display:inline-flex; align-items:center; justify-content:center; padding:14px 38px; border-radius:100px; border:1px solid rgba(255,255,255,0.24); background:transparent; color:#fff; font-size:14px; font-weight:400; text-decoration:none; transition:background 0.3s var(--e),border-color 0.3s var(--e),transform 0.3s var(--e); }
.cats-cta-pill:hover { background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.44); transform:translateY(-1px); }
.cats-cta-note { display:block; margin-top:14px; font-size:12px; color:rgba(255,255,255,0.32); }
.cats-stage { position:relative; z-index:1; max-width:1400px; margin:0 auto; padding:0 clamp(24px,4vw,48px); }
.cats-rail { list-style:none; display:flex; justify-content:center; align-items:stretch; gap:clamp(14px,1.4vw,20px); margin:0; padding:20px 0; overflow:visible; }
.cats-tile { flex:1 1 0; min-width:0; list-style:none; display:flex; position:relative; transition:opacity 0.45s var(--e),transform 0.45s var(--e),filter 0.45s var(--e); will-change:transform,opacity,filter; }
.cats-rail.rail-hovering .cats-tile:not(.is-hovered) { opacity:0.30; transform:scale(0.93); filter:blur(2px); }
.cats-rail.rail-hovering .cats-tile.is-hovered { opacity:1; transform:scale(1.03); filter:none; z-index:3; }
.cats-tile.is-active .cats-tile-btn { border-color:rgba(255,255,255,0.18); box-shadow:0 32px 64px rgba(0,0,0,0.5); }
.cats-tile.is-active .cats-tile-go { background:#fff; color:#0a0a0a; border-color:#fff; }
.cats-tile-btn { width:100%; display:flex; flex-direction:column; text-align:left; border-radius:22px; border:1px solid rgba(255,255,255,0.07); overflow:hidden; cursor:pointer; font-family:inherit; background:#111; position:relative; padding:0; transition:border-color 0.4s var(--e),box-shadow 0.4s var(--e); }
.cats-tile-image { position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; flex-shrink:0; }
.cats-tile-image img { width:100%; height:100%; object-fit:cover; display:block; filter:brightness(0.78) contrast(1.06) saturate(0.80); transition:transform 1s var(--e),filter 0.7s var(--e); }
.cats-tile.is-hovered .cats-tile-image img { transform:scale(1.07); filter:brightness(0.92) contrast(1.08) saturate(1.0); }
.cats-tile-image::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom,transparent 20%,rgba(10,10,10,0.52) 65%,rgba(10,10,10,0.96) 100%); pointer-events:none; }
.cats-tile-glyph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#111,#0a0a0a); font-size:clamp(3rem,5vw,5rem); color:rgba(255,255,255,0.10); }
.cats-tile-body { flex:1; display:flex; flex-direction:column; padding:clamp(18px,1.8vw,24px) clamp(20px,2vw,26px) clamp(20px,2vw,26px); background:#0a0a0a; position:relative; }
.cats-tile-body::before { content:''; display:block; width:28px; height:2px; background:var(--sage); border-radius:2px; margin-bottom:14px; flex-shrink:0; transition:width 0.4s var(--e); }
.cats-tile.is-hovered .cats-tile-body::before { width:46px; }
.cats-tile-label { display:block; font-size:10px; font-weight:600; letter-spacing:0.24em; text-transform:uppercase; color:var(--sage); margin-bottom:10px; }
.cats-tile-title { font-size:clamp(1.25rem,1.7vw,1.55rem); font-weight:500; line-height:1.15; letter-spacing:-0.02em; color:#fff; margin:0 0 14px; transition:transform 0.4s var(--e); text-align:left; }
.cats-tile.is-hovered .cats-tile-title { transform:translateX(4px); }
.cats-tile-quote { font-size:13.5px; font-style:italic; line-height:1.55; color:rgba(255,255,255,0.78); margin:0 0 14px; transition:color 0.3s; }
.cats-tile-question { font-size:12.5px; line-height:1.55; color:rgba(255,255,255,0.42); margin:0 0 12px; transition:color 0.3s; }
.cats-tile-lead { font-size:12.5px; line-height:1.55; color:rgba(255,255,255,0.55); margin:0 0 18px; display:flex; gap:6px; align-items:flex-start; transition:color 0.3s; flex:1; }
.cats-tile-arrow { color:var(--sage); flex-shrink:0; transition:transform 0.4s var(--e); }
.cats-tile.is-hovered .cats-tile-arrow { transform:translateX(3px); }
.cats-tile.is-hovered .cats-tile-question { color:rgba(255,255,255,0.62); }
.cats-tile.is-hovered .cats-tile-lead { color:rgba(255,255,255,0.78); }
.cats-tile-go { display:inline-flex; align-items:center; justify-content:center; gap:8px; align-self:flex-start; padding:10px 20px; border-radius:100px; background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.62); border:1px solid rgba(255,255,255,0.12); font-size:12.5px; font-weight:500; letter-spacing:0.01em; text-decoration:none; transition:background 0.3s var(--e),color 0.3s var(--e),border-color 0.3s var(--e),transform 0.3s var(--e); }
.cats-tile-go svg { transition:transform 0.3s var(--e); }
.cats-tile.is-hovered .cats-tile-go { background:var(--sage); color:#0a0a0a; border-color:var(--sage); transform:translateY(-2px); }
.cats-tile.is-hovered .cats-tile-go svg { transform:translateX(3px); }

/* Controls — play/pause + dots in a single row */
.cats-controls {
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin-top:clamp(36px,5vh,52px);
}
.cats-playpause {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.16);
  color:rgba(255,255,255,0.78);
  cursor:pointer; padding:0;
  transition:background 0.25s,border-color 0.25s,color 0.25s,transform 0.25s var(--e);
}
.cats-playpause:hover { background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.35); color:#fff; transform:scale(1.06); }
.cats-playpause:focus-visible { outline:2px solid var(--sage); outline-offset:3px; }
.cats-playpause .cats-pp-play  { display:none; }
.cats-playpause .cats-pp-pause { display:block; }
.cats-playpause:not(.is-playing) .cats-pp-play  { display:block; margin-left:1px; }
.cats-playpause:not(.is-playing) .cats-pp-pause { display:none; }
.cats-playpause.is-playing { border-color:rgba(138,170,124,0.55); color:var(--sage); }
.cats-playpause.is-playing::after {
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid rgba(138,170,124,0.25);
  animation:ppRing 3s linear infinite;
  pointer-events:none;
}
.cats-playpause { position:relative; }
@keyframes ppRing { 0%{opacity:0.0;transform:scale(0.9)} 50%{opacity:0.7} 100%{opacity:0;transform:scale(1.18)} }

.cats-dots { display:flex; justify-content:center; gap:10px; margin:0; }
.cats-dot { width:8px; height:8px; border-radius:100px; background:rgba(255,255,255,0.13); border:none; padding:0; cursor:pointer; transition:background 0.3s,width 0.4s var(--e); }
.cats-dot:hover { background:rgba(255,255,255,0.28); }
.cats-dot.is-active { background:#fff; width:24px; }
@media(max-width:1100px) { .cats-rail{gap:12px} .cats-tile-price{font-size:clamp(1.3rem,2vw,1.8rem)} }
@media(max-width:860px) { .cats-rail{overflow-x:auto;scroll-snap-type:x mandatory;padding:20px 10vw;scrollbar-width:none;-webkit-overflow-scrolling:touch;justify-content:flex-start} .cats-rail::-webkit-scrollbar{display:none} .cats-tile{flex:0 0 76%;scroll-snap-align:center} .cats-rail.rail-hovering .cats-tile:not(.is-hovered){opacity:0.62;transform:none;filter:none} .cats-rail.rail-hovering .cats-tile.is-hovered{transform:none} }
@media(max-width:540px) { .cats-title{font-size:clamp(2.4rem,9vw,3.4rem)} .cats-tile{flex:0 0 86%} }
@media(prefers-reduced-motion:reduce) { .cats-tile,.cats-tile-btn,.cats-tile-image img,.cats-tile-go,.cats-tile-body::before,.cats-tile-price,.cats-dot{transition:none} }


/* ============================================================
   05 — SIX WEEKS  (LIGHT #ffffff)
   ============================================================ */
.six-section { position:relative; z-index:1; background:#fff; border-top:1px solid #e2e2e2; padding:clamp(72px,9vw,120px) 0; }
.six-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
@media(max-width:880px) { .six-grid{grid-template-columns:1fr;gap:52px} }
.six-text .eyebrow { color:rgba(10,10,10,0.40); }
.six-text .eyebrow::before { background:var(--sage); }
.six-text h2 { margin-top:16px; margin-bottom:18px; color:#0a0a0a; font-size:clamp(2rem,4vw,3.6rem); font-weight:300; letter-spacing:-0.03em; }
.six-text h2 sup { font-size:0.4em; vertical-align:super; color:rgba(10,10,10,0.36); margin-left:2px; font-weight:400; }
.six-text .section-sub { max-width:100%; margin-bottom:36px; color:rgba(10,10,10,0.52); }
.six-points { display:flex; flex-direction:column; margin-bottom:32px; }
.six-point { display:flex; align-items:flex-start; gap:16px; padding:18px 0; border-bottom:1px solid #e2e2e2; }
.six-point:first-child { border-top:1px solid #e2e2e2; }
.six-point-n { font-size:10px; font-weight:400; letter-spacing:0.12em; color:var(--sage); flex-shrink:0; padding-top:2px; transition:transform 0.4s var(--e); }
.six-point:hover .six-point-n { transform:translateX(4px); }
.six-point p { font-size:14px; color:rgba(10,10,10,0.52); line-height:1.66; }
.six-pricing {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin:8px 0 28px; padding:18px 24px;
  background:#f6f6f4; border:1px solid #e4e4e0; border-radius:16px;
  border-left:3px solid #1c2419;
}
.six-pricing b { font-size:2.3rem; font-weight:600; color:#0a0a0a; letter-spacing:-0.04em; line-height:1; }
.six-pricing span { font-size:12.5px; color:rgba(10,10,10,0.5); letter-spacing:0.01em; line-height:1.5; }

.six-ctas { display:flex; flex-wrap:wrap; gap:14px; }
.six-ctas .btn-solid {
  background:#0a0a0a; color:#fff; border:1.5px solid #0a0a0a;
  padding:15px 30px; font-size:14px; font-weight:600;
  box-shadow:0 10px 26px rgba(10,10,10,0.18);
}
.six-ctas .btn-solid:hover { background:#1c2419; border-color:#1c2419; transform:translateY(-2px); box-shadow:0 16px 34px rgba(10,10,10,0.26); }
.six-ctas .btn-ghost {
  background:transparent; color:#0a0a0a; border:1.5px solid rgba(10,10,10,0.28);
  padding:15px 28px; font-size:14px; font-weight:600;
}
.six-ctas .btn-ghost:hover { background:rgba(10,10,10,0.04); border-color:#0a0a0a; }

/* Card keeps dark look for contrast */
.six-card { background:#0a0a0a; border:1px solid #1e1e1e; border-radius:18px; overflow:hidden; }
.six-card-head { background:#0a0a0a; color:#fff; padding:28px 28px 24px; border-bottom:1px solid #1e1e1e; }
.six-card-head .kicker { font-size:9px; letter-spacing:0.28em; text-transform:uppercase; color:rgba(255,255,255,0.72); display:block; margin-bottom:10px; }
.six-card-head .figure { display:flex; align-items:baseline; gap:8px; }
.six-card-head .num { font-size:4.5rem; font-weight:300; line-height:1; letter-spacing:-0.04em; color:#fff; }
.six-card-head .unit { font-size:13px; color:rgba(255,255,255,0.85); line-height:1.3; }
.six-card-head .unit i { display:block; font-style:normal; font-size:10px; color:rgba(255,255,255,0.55); }

/* ── 6-week journey timeline (auto-playing) ── */
.six-journey { position:relative; list-style:none; margin:0; padding:14px 22px 18px 22px; --six-progress:0%; }
.six-journey::before { /* track */
  content:''; position:absolute; left:calc(22px + 17px); top:34px; bottom:34px; width:2px;
  background:rgba(255,255,255,0.14); border-radius:2px;
}
.six-journey::after { /* filled progress */
  content:''; position:absolute; left:calc(22px + 17px); top:34px; width:2px; height:var(--six-progress);
  max-height:calc(100% - 68px); background:linear-gradient(180deg,var(--sage),#5d7a51);
  border-radius:2px; transition:height 0.6s var(--e); box-shadow:0 0 10px rgba(138,170,124,0.6);
}
.six-wk {
  position:relative; z-index:1; display:grid; grid-template-columns:36px 1fr; align-items:center;
  gap:16px; padding:11px 0; cursor:pointer; transition:transform 0.3s var(--e);
}
.six-wk-node {
  position:relative; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background:#0a0a0a; border:2px solid rgba(255,255,255,0.22);
  transition:all 0.35s var(--e);
}
.six-wk-num { font-size:13px; font-weight:600; color:rgba(255,255,255,0.9); transition:opacity 0.2s; }
.six-wk-check { color:#0a0a0a; position:absolute; opacity:0; transform:scale(0.5); transition:opacity 0.2s, transform 0.3s var(--e); }
.six-wk-text { display:flex; flex-direction:column; gap:1px; }
.six-wk-label { font-size:9.5px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.55); }
.six-wk-theme { font-size:15px; font-weight:600; color:#ffffff; letter-spacing:-0.01em; }
.six-wk-sub { font-size:11.5px; color:rgba(255,255,255,0.6); line-height:1.4; max-height:0; opacity:0; overflow:hidden; transition:max-height 0.4s var(--e), opacity 0.3s, margin 0.4s; }

/* Active week */
.six-wk.is-active .six-wk-node { background:var(--sage); border-color:var(--sage); box-shadow:0 0 0 5px rgba(138,170,124,0.20), 0 0 18px rgba(138,170,124,0.5); transform:scale(1.08); }
.six-wk.is-active .six-wk-num { color:#0a0a0a; }
.six-wk.is-active .six-wk-theme { color:#fff; }
.six-wk.is-active .six-wk-sub { max-height:40px; opacity:1; margin-top:3px; }
/* Completed weeks */
.six-wk.is-done .six-wk-node { background:rgba(138,170,124,0.9); border-color:rgba(138,170,124,0.9); }
.six-wk.is-done .six-wk-num { opacity:0; }
.six-wk.is-done .six-wk-check { opacity:1; transform:scale(1); }
.six-wk:hover .six-wk-theme { color:#fff; }

.six-card-foot { border-top:1px solid #2a2a2a; display:grid; grid-template-columns:repeat(3,1fr); }
.six-card-stat { display:flex; flex-direction:column; gap:4px; padding:20px; border-right:1px solid #2a2a2a; }
.six-card-stat:last-child { border-right:none; }
.six-card-stat b { font-size:1.45rem; font-weight:500; letter-spacing:-0.03em; color:#fff; }
.six-card-stat span { font-size:9px; text-transform:uppercase; letter-spacing:0.12em; color:rgba(255,255,255,0.6); }


/* ============================================================
   06 — HOW IT WORKS  (DARK #0a0a0a)
   ============================================================ */
.flow-section { position:relative; z-index:1; background:#0a0a0a; border-top:1px solid #1e1e1e; padding:clamp(72px,9vw,120px) 0; color:#fff; }
.flow-inner { position:relative; }
.flow-head { margin-bottom:72px; max-width:640px; }
.flow-head .eyebrow { color:rgba(255,255,255,0.28); }
.flow-head .eyebrow::before { background:var(--sage); }
.flow-head h2 { color:#fff; margin-top:16px; font-size:clamp(2rem,4vw,4rem); font-weight:300; letter-spacing:-0.03em; }
.flow-head h2 em { font-style:italic; color:rgba(255,255,255,0.34); }
.flow-sub { font-size:1rem; color:rgba(255,255,255,0.38); line-height:1.78; max-width:480px; margin-top:18px; }
.flow-steps { display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative; list-style:none; }
.flow-steps::before { content:''; position:absolute; top:22px; left:0; right:0; height:1px; background:#1e1e1e; }
.flow-step { position:relative; z-index:1; padding:0 28px 0 0; transition:opacity 0.4s var(--e); }
.flow-step:last-child { padding-right:0; }
.flow-steps:hover .flow-step:not(:hover) { opacity:0.30; }
.flow-node { width:44px; height:44px; border-radius:50%; background:#0a0a0a; border:1px solid #1e1e1e; display:flex; align-items:center; justify-content:center; margin-bottom:28px; transition:background 0.3s,border-color 0.3s,transform 0.4s var(--e); }
.flow-step:hover .flow-node { background:#fff; border-color:#fff; transform:scale(1.15); }
.flow-n { font-size:10px; font-weight:400; letter-spacing:0.1em; color:rgba(255,255,255,0.36); transition:color 0.3s; }
.flow-step:hover .flow-n { color:#0a0a0a; }
.flow-step h3 { font-size:1rem; font-weight:400; color:#fff; margin-bottom:14px; transition:transform 0.4s var(--e); }
.flow-step:hover h3 { transform:translateX(4px); }
.flow-step p { font-size:13.5px; color:rgba(255,255,255,0.38); line-height:1.72; }
@media(max-width:1080px) { .flow-steps{grid-template-columns:repeat(3,1fr);gap:44px 24px} .flow-steps::before{display:none} }
@media(max-width:720px)  { .flow-steps{grid-template-columns:repeat(2,1fr)} }
@media(max-width:480px)  { .flow-steps{grid-template-columns:1fr} }


/* ============================================================
   07 — DONATE NUDGE  (WARM ACCENT)
   ============================================================ */
.donate-nudge { position:relative; z-index:1; background:linear-gradient(180deg,#1a1612 0%,#16130f 100%); border-top:1px solid rgba(212,175,100,0.12); border-bottom:1px solid rgba(212,175,100,0.12); padding:22px 0; overflow:hidden; }
.donate-nudge::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 100% at 50% 50%,rgba(212,175,100,0.06),transparent 70%); pointer-events:none; }
.donate-nudge-inner { display:flex; align-items:center; justify-content:center; gap:clamp(16px,3vw,32px); flex-wrap:wrap; position:relative; z-index:1; text-align:center; }
.donate-nudge-copy { margin:0; font-size:clamp(0.95rem,1.4vw,1.1rem); color:rgba(232,210,168,0.86); letter-spacing:0.005em; font-weight:400; font-style:italic; line-height:1.4; }
.donate-nudge-cta { display:inline-flex; align-items:center; gap:8px; padding:9px 22px; border-radius:100px; background:transparent; color:#d4af64; border:1px solid rgba(212,175,100,0.42); font-size:12.5px; font-weight:400; letter-spacing:0.08em; text-transform:uppercase; text-decoration:none; transition:background 0.3s var(--e),border-color 0.3s var(--e),color 0.3s,transform 0.3s var(--e); white-space:nowrap; }
.donate-nudge-cta:hover { background:rgba(212,175,100,0.08); border-color:rgba(212,175,100,0.7); color:#e8c987; transform:translateY(-1px); }
.donate-nudge-cta svg { transition:transform 0.3s var(--e); }
.donate-nudge-cta:hover svg { transform:translateX(4px); }
@media(max-width:540px) { .donate-nudge{padding:18px 0} .donate-nudge-inner{gap:14px} }


/* ============================================================
   08 — SOCIAL PROOF  (LIGHT #ffffff)
   ============================================================ */
.proof-section { position:relative; z-index:1; background:#fff; border-top:1px solid #e2e2e2; padding:clamp(72px,9vw,120px) 0; }
.proof-head { text-align:center; max-width:720px; margin:0 auto clamp(48px,6vw,72px); }
.proof-head h2 { margin-top:16px; margin-bottom:18px; color:#0a0a0a; font-size:clamp(2rem,4vw,3.6rem); font-weight:300; letter-spacing:-0.03em; line-height:1.06; }
.proof-head h2 em { font-style:italic; color:rgba(10,10,10,0.36); }
.proof-head .section-sub { margin:0 auto; max-width:480px; color:rgba(10,10,10,0.52); }
.proof-head .eyebrow { justify-content:center; color:rgba(10,10,10,0.40); }
.proof-head .eyebrow::before { display:none; }
.proof-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#e2e2e2; list-style:none; padding:0; }
.proof-card { background:#fff; padding:clamp(32px,3.5vw,48px) clamp(28px,3vw,40px); display:flex; flex-direction:column; position:relative; transition:background 0.4s var(--e); }
.proof-card:hover { background:#f7f7f7; }
.proof-grid:hover .proof-card:not(:hover) { opacity:0.55; }
.proof-mark { font-size:4rem; font-weight:400; line-height:0.6; color:var(--sage); opacity:0.85; margin-bottom:8px; font-family:'Switzer','Inter',system-ui,sans-serif; }
.proof-quote { font-size:clamp(0.95rem,1.25vw,1.05rem); line-height:1.72; color:rgba(10,10,10,0.72); margin:0 0 24px; flex:1; font-weight:400; letter-spacing:-0.005em; }
.proof-attr { font-size:10px; font-weight:400; letter-spacing:0.18em; text-transform:uppercase; color:rgba(10,10,10,0.36); padding-top:18px; border-top:1px solid #e2e2e2; }
.proof-foot { margin-top:clamp(44px,5vw,64px); display:flex; justify-content:center; }
@media(max-width:880px) { .proof-grid{grid-template-columns:1fr} }


/* ============================================================
   09 — EXPERTS  (DARK #0a0a0a)
   ============================================================ */
.experts-section { position:relative; z-index:1; background:#0a0a0a; border-top:1px solid #1e1e1e; padding:clamp(64px,8vw,104px) 0; }
.experts-section .section-head { color:#fff; }
.experts-section .section-head h2 { color:#fff; font-size:clamp(2rem,4vw,3.6rem); font-weight:300; letter-spacing:-0.03em; }
.experts-section .section-head h2 em { font-style:italic; color:rgba(255,255,255,0.38); }
.experts-section .section-sub { color:rgba(255,255,255,0.42); }
.experts-section .section-count b { color:rgba(255,255,255,0.78); }
.experts-section .section-count { color:rgba(255,255,255,0.28); }
.experts-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#1e1e1e; list-style:none; padding:0; }
@media(max-width:960px) { .experts-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:480px) { .experts-grid{grid-template-columns:1fr} }
.expert-card { background:#0a0a0a; overflow:hidden; position:relative; transition:background 0.3s; list-style:none; }
.expert-card:hover { background:#111; }
.experts-grid:hover .expert-card:not(:hover) { opacity:0.46; }
.expert-photo-wrap { position:relative; aspect-ratio:3/4; overflow:hidden; }
.expert-photo-wrap img { width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:filter 0.7s var(--e),transform 0.9s var(--e); }
.expert-card:hover .expert-photo-wrap img { filter:grayscale(0.1); transform:scale(1.04); }
.expert-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#111; font-size:2.5rem; font-weight:300; color:rgba(255,255,255,0.16); }
.expert-num-badge { position:absolute; top:12px; right:12px; background:rgba(10,10,10,0.75); backdrop-filter:blur(8px); width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:400; letter-spacing:0.06em; color:rgba(255,255,255,0.52); border:1px solid #1e1e1e; }
.expert-body { padding:18px 20px 22px; }
.expert-name { font-size:1rem; font-weight:400; margin-bottom:4px; color:#fff; transition:transform 0.4s var(--e); }
.expert-card:hover .expert-name { transform:translateX(4px); }
.expert-role { font-size:10px; text-transform:uppercase; letter-spacing:0.12em; color:var(--sage); font-weight:400; }
.experts-foot { margin-top:clamp(44px,5vw,64px); display:flex; justify-content:center; }


/* ============================================================
   10 — EVENTS  (LIGHT #ffffff)
   ============================================================ */
.events-section { position:relative; z-index:1; background:#fff; border-top:1px solid #e2e2e2; padding:clamp(64px,8vw,104px) 0; }
.events-section .section-head h2 { color:#0a0a0a; font-size:clamp(2rem,4vw,3.6rem); font-weight:300; letter-spacing:-0.03em; }
.events-section .section-sub { color:rgba(10,10,10,0.52); }
.events-section .section-count b { color:rgba(10,10,10,0.78); }
.events-section .section-count { color:rgba(10,10,10,0.36); }
.events-section .eyebrow { color:rgba(10,10,10,0.40); }
.events-section .eyebrow::before { background:var(--sage); }
.events-list { display:flex; flex-direction:column; list-style:none; padding:0; }
.event-row { display:grid; grid-template-columns:80px 64px 1fr auto; gap:24px; align-items:center; padding:26px 16px 26px 20px; border-bottom:1px solid #e2e2e2; cursor:pointer; transition:background 0.25s,padding-left 0.3s var(--e); position:relative; text-decoration:none; color:inherit; }
.event-row:first-child { border-top:1px solid #e2e2e2; }
.event-row::before { content:''; position:absolute; left:0; top:50%; width:2px; height:0; background:var(--sage); transform:translateY(-50%); transition:height 0.4s var(--e); }
.events-list:hover .event-row:not(:hover) { opacity:0.45; }
.event-row:hover { background:#f7f7f7; padding-left:26px; }
.event-row:hover::before { height:60%; }
.event-date-col { text-align:center; }
.event-day { font-size:2rem; font-weight:300; line-height:1; letter-spacing:-0.04em; display:block; color:#0a0a0a; transition:transform 0.3s var(--e); }
.event-row:hover .event-day { transform:translateY(-3px); }
.event-mon { font-size:10px; text-transform:uppercase; letter-spacing:0.12em; color:rgba(10,10,10,0.44); font-weight:400; }
.event-dow { font-size:9px; text-transform:uppercase; letter-spacing:0.1em; color:rgba(10,10,10,0.30); margin-top:2px; display:block; }
.event-thumb { width:64px; height:64px; border-radius:10px; overflow:hidden; background:#f2f2f2; flex-shrink:0; display:flex; align-items:center; justify-content:center; border:1px solid #e2e2e2; }
.event-thumb img { width:100%; height:100%; object-fit:cover; transition:transform 0.8s var(--e); }
.event-row:hover .event-thumb img { transform:scale(1.1); }
.event-thumb-letter { font-size:1.4rem; font-weight:300; color:rgba(10,10,10,0.22); }
.event-main { flex:1; min-width:0; }
.event-host { font-size:9px; text-transform:uppercase; letter-spacing:0.16em; color:var(--sage); font-weight:400; display:block; margin-bottom:7px; }
.event-title { font-size:1rem; font-weight:400; margin-bottom:7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#0a0a0a; transition:transform 0.3s var(--e); }
.event-row:hover .event-title { transform:translateX(6px); }
.event-meta-row { display:flex; gap:16px; font-size:11.5px; color:rgba(10,10,10,0.38); }
.event-side { text-align:right; flex-shrink:0; }
.event-seats { font-size:10px; font-weight:400; letter-spacing:0.1em; text-transform:uppercase; color:rgba(10,10,10,0.36); display:block; margin-bottom:8px; }
.event-seats.tight { color:#c0392b; }
.event-cta-text { display:flex; align-items:center; gap:6px; justify-content:flex-end; font-size:10px; font-weight:400; letter-spacing:0.12em; text-transform:uppercase; color:rgba(10,10,10,0.44); }
.event-cta-text svg { transition:transform 0.3s var(--e); }
.event-row:hover .event-cta-text svg { transform:translateX(5px); }
.event-row:hover .event-cta-text { color:#0a0a0a; }
.events-foot { margin-top:44px; display:flex; justify-content:center; }
@media(max-width:720px) { .event-row{grid-template-columns:64px 1fr} .event-thumb,.event-side{display:none} }


/* ============================================================
   11 — JOURNAL  (DARK #0a0a0a)
   ============================================================ */
.journal-section { position:relative; z-index:1; background:#0a0a0a; border-top:1px solid #1e1e1e; padding:clamp(72px,9vw,120px) 0 0; }
.journal-section .section-head h2 { color:#fff; font-size:clamp(2rem,4vw,3.6rem); font-weight:300; letter-spacing:-0.03em; }
.journal-section .section-head h2 em { font-style:italic; color:rgba(255,255,255,0.38); }
.journal-section .section-sub { color:rgba(255,255,255,0.38); }
.journal-featured { display:block; position:relative; overflow:hidden; min-height:clamp(360px,48vw,560px); background:#111; text-decoration:none; cursor:pointer; isolation:isolate; margin-top:clamp(48px,5vw,68px); }
.journal-featured-media { position:absolute; inset:0; z-index:0; }
.journal-featured-media img { width:100%; height:100%; object-fit:cover; object-position:center 30%; opacity:0.36; filter:grayscale(0.3) contrast(1.06); transition:transform 1.2s var(--e),opacity 0.7s,filter 0.8s; transform:scale(1.04); }
.journal-featured:hover .journal-featured-media img { transform:scale(1.0); opacity:0.50; filter:grayscale(0) contrast(1.08); }
.journal-featured-mark { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:6rem; color:rgba(255,255,255,0.06); }
.journal-featured::before { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to right,rgba(0,0,0,0.88) 0%,rgba(0,0,0,0.42) 55%,rgba(0,0,0,0.06) 100%),linear-gradient(to top,rgba(0,0,0,0.66) 0%,transparent 55%); }
.journal-featured-body { position:relative; z-index:2; padding:clamp(44px,5vw,76px) clamp(36px,5vw,76px); max-width:680px; display:flex; flex-direction:column; min-height:inherit; justify-content:flex-end; }
.journal-featured-meta { font-size:10px; font-weight:400; letter-spacing:0.24em; text-transform:uppercase; color:rgba(255,255,255,0.38); margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.journal-featured-meta::before { content:''; width:18px; height:1px; background:var(--sage); flex-shrink:0; }
.journal-featured-title { font-size:clamp(1.8rem,4vw,3.5rem); font-weight:300; letter-spacing:-0.03em; line-height:1.08; color:#fff; margin:0 0 16px; transition:transform 0.5s var(--e); }
.journal-featured:hover .journal-featured-title { transform:translateX(8px); }
.journal-featured-ex { font-size:clamp(0.88rem,1.2vw,1rem); color:rgba(255,255,255,0.50); line-height:1.72; margin:0 0 24px; max-width:520px; }
.journal-featured-read { display:inline-flex; align-items:center; gap:10px; font-size:10px; font-weight:400; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.58); border-bottom:1px solid rgba(255,255,255,0.18); padding-bottom:3px; transition:color 0.25s,border-color 0.25s,letter-spacing 0.35s var(--e); }
.journal-featured:hover .journal-featured-read { color:#fff; border-bottom-color:rgba(255,255,255,0.62); letter-spacing:0.24em; }
.journal-featured-read svg { transition:transform 0.3s var(--e); }
.journal-featured:hover .journal-featured-read svg { transform:translateX(5px); }
.journal-list { display:flex; flex-direction:column; padding:0 clamp(36px,5vw,76px) clamp(52px,7vw,84px); list-style:none; }
.journal-list-item { display:grid; grid-template-columns:40px 1fr auto; align-items:center; gap:22px; padding:22px 10px 22px 18px; border-top:1px solid #1e1e1e; text-decoration:none; color:inherit; position:relative; transition:opacity 0.4s var(--e),padding-left 0.38s var(--e); }
.journal-list:hover .journal-list-item:not(:hover) { opacity:0.32; }
.journal-list-item:last-child { border-bottom:1px solid #1e1e1e; }
.journal-list-item::before { content:''; position:absolute; left:0; top:50%; width:2px; height:0; background:var(--sage); transform:translateY(-50%); transition:height 0.42s var(--e); border-radius:2px; }
.journal-list-item:hover::before { height:62%; }
.journal-list-item:hover { padding-left:28px; }
.journal-item-n { font-size:10px; font-weight:400; letter-spacing:0.12em; color:rgba(255,255,255,0.16); transition:color 0.3s; }
.journal-list-item:hover .journal-item-n { color:var(--sage); }
.journal-item-main h4 { font-size:clamp(1rem,1.6vw,1.25rem); font-weight:400; color:rgba(255,255,255,0.76); line-height:1.32; margin-bottom:5px; transition:transform 0.4s var(--e),color 0.3s; }
.journal-list-item:hover h4 { transform:translateX(6px); color:#fff; }
.journal-item-meta { font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.24); font-weight:400; }
.journal-item-arr { color:rgba(255,255,255,0.20); opacity:0; transform:translateX(-8px); transition:opacity 0.35s,transform 0.4s var(--e),color 0.3s; }
.journal-list-item:hover .journal-item-arr { opacity:1; transform:none; color:var(--sage); }
.journal-foot { padding:0 clamp(36px,5vw,76px) clamp(44px,6vw,72px); }
.journal-all-link { display:inline-flex; align-items:center; gap:10px; font-size:10px; font-weight:400; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.34); border-bottom:1px solid rgba(255,255,255,0.13); padding-bottom:3px; transition:color 0.25s,border-color 0.25s,letter-spacing 0.35s var(--e); }
.journal-all-link:hover { color:#fff; border-bottom-color:rgba(255,255,255,0.55); letter-spacing:0.24em; }
.journal-all-link svg { transition:transform 0.3s var(--e); }
.journal-all-link:hover svg { transform:translateX(5px); }


/* ============================================================
   12 — CLOSING CTA  (LIGHT #ffffff)
   ============================================================ */
.close-section { position:relative; z-index:1; background:#fff; border-top:1px solid #e2e2e2; padding:clamp(72px,9vw,120px) 0; }
.close-inner { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
@media(max-width:880px) { .close-inner{grid-template-columns:1fr;gap:44px} }
.close-eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:10px; font-weight:400; letter-spacing:0.26em; text-transform:uppercase; color:rgba(10,10,10,0.34); }
.close-eyebrow::before { content:''; width:20px; height:1px; background:var(--sage); flex-shrink:0; }
.close-h2 { font-size:clamp(2.2rem,4.5vw,5rem); font-weight:300; letter-spacing:-0.04em; line-height:1.06; color:#0a0a0a; margin-top:18px; }
.close-h2 em { font-style:italic; color:rgba(10,10,10,0.36); }
.close-section .section-sub { color:rgba(10,10,10,0.52); max-width:100%; margin-bottom:36px; }
.close-actions { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:44px; }
.close-section .btn-solid { background:#0a0a0a; color:#fff; border-color:#0a0a0a; }
.close-section .btn-solid:hover { background:rgba(10,10,10,0.84); }
.close-secondary { display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:400; letter-spacing:0.14em; text-transform:uppercase; color:rgba(10,10,10,0.50); border-bottom:1px solid rgba(10,10,10,0.20); padding-bottom:3px; transition:color 0.25s,border-color 0.25s; }
.close-secondary:hover { color:#0a0a0a; border-bottom-color:rgba(10,10,10,0.62); }
.close-secondary svg { transition:transform 0.3s var(--e); }
.close-secondary:hover svg { transform:translateX(4px); }
.close-stats { display:flex; gap:0; padding-top:36px; border-top:1px solid #e2e2e2; flex-wrap:wrap; }
.close-stat { display:flex; align-items:baseline; gap:14px; flex:1; min-width:120px; padding:6px clamp(20px,3vw,44px) 6px 0; }
.close-stat+.close-stat { padding-left:clamp(20px,3vw,44px); border-left:1px solid #e2e2e2; }
.close-stat b { font-size:2.1rem; font-weight:400; letter-spacing:-0.04em; color:#0a0a0a; }
.close-stat span { font-size:9px; text-transform:uppercase; letter-spacing:0.14em; color:rgba(10,10,10,0.38); }
@media(max-width:480px) { .close-stat{flex:1 0 100%;padding:12px 0 0;border-left:none!important;border-top:1px solid #e2e2e2} .close-stat:first-child{border-top:none;padding-top:0} }

/* ============================================================
   HERO v2 — HEVA-style full-bleed video + editorial serif
   (overrides earlier .vh-hero block)
   ============================================================ */
.vh-hero {
  position:relative; width:100%; min-height:100svh;
  display:flex; align-items:center; justify-content:flex-start;
  overflow:hidden; isolation:isolate; z-index:0;
  background:#3c4636; color:#fff;
  padding:calc(var(--nav-h,66px) + clamp(40px,10vh,120px)) clamp(24px,6vw,96px) clamp(48px,8vh,96px);
}

/* Full-bleed video — warm, sunlit grade */
.hero-video-wrap { position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-video {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(1.05) contrast(1.02) brightness(1.02);
}
.hero-video-tint {
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(40,52,40,0.42) 0%, rgba(40,52,40,0.04) 34%, rgba(40,52,40,0.30) 100%),
    radial-gradient(130% 100% at 18% 42%, rgba(34,46,34,0.34), transparent 62%),
    linear-gradient(120deg, rgba(120,110,70,0.10), transparent 55%);
}

/* Content */
.hero-inner { position:relative; z-index:2; max-width:760px; width:100%; }

.hero-badge {
  display:inline-flex; align-items:center;
  padding:9px 20px; margin-bottom:clamp(20px,4vh,40px);
  font-family:var(--font); font-size:12px; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.92);
  border:1px solid rgba(255,255,255,0.45); border-radius:var(--r-pill);
  background:rgba(255,255,255,0.08); backdrop-filter:blur(6px);
}

/* Hero CTAs — refined cream + ghost (reference vibe), left aligned */
.hero-inner .hero-cta-row { justify-content:flex-start; padding-top:6px; }

.hero-inner .hero-btn-glass {
  background:#fdfcf7; color:#2c3526;
  border:1px solid #fdfcf7;
  box-shadow:0 14px 38px rgba(0,0,0,0.20);
  padding:15px 32px;
}
.hero-inner .hero-btn-glass:hover {
  background:#fff; border-color:#fff; transform:translateY(-2px);
  box-shadow:0 18px 44px rgba(0,0,0,0.26);
}

.hero-inner .hero-btn-light {
  border-color:rgba(255,255,255,0.55); color:#fff;
  background:rgba(255,255,255,0.04); backdrop-filter:blur(4px);
}
.hero-inner .hero-btn-light:hover {
  border-color:#fff; background:rgba(255,255,255,0.12);
}

.hero-serif {
  font-family:var(--font);
  font-weight:500; line-height:1.08; letter-spacing:-0.025em;
  font-size:clamp(1.9rem, 4.4vw, 3.4rem);
  max-width:24ch;
  margin:0 0 clamp(18px,2.6vh,28px);
  color:#fff; text-shadow:0 2px 30px rgba(0,0,0,0.25);
}
.hero-serif em { font-style:italic; font-weight:300; color:rgba(255,255,255,0.92); }

.hero-sub {
  font-family:var(--font); font-weight:400;
  font-size:clamp(0.95rem, 1.1vw, 1.05rem); line-height:1.6;
  color:rgba(255,255,255,0.85); max-width:520px;
  margin:0 0 18px;
}
.hero-support {
  font-family:var(--font); font-size:13px; font-weight:600; letter-spacing:0.02em;
  color:rgba(255,255,255,0.72); max-width:540px; margin:0 0 clamp(24px,4vh,40px);
}

.hero-cta-wide {
  display:flex; align-items:center; justify-content:center;
  width:100%; max-width:680px; height:clamp(58px,8vh,72px);
  font-family:var(--font); font-size:1.05rem; font-weight:600;
  color:#0d1512; background:#fdfcf7; border-radius:var(--r-pill);
  box-shadow:0 16px 40px rgba(0,0,0,0.22);
  transition:transform 0.25s var(--e), background 0.25s var(--e);
}
.hero-cta-wide:hover { transform:translateY(-2px); background:#fff; }
.hero-cta-wide:active { transform:translateY(0); }

@media(max-width:600px) {
  .hero-sub br { display:none; }
  .hero-cta-wide { max-width:none; }
  .hero-serif { font-size:clamp(1.7rem,7vw,2.4rem); max-width:none; }
  .hero-sub { font-size:0.9rem; line-height:1.55; }
  .hero-support { font-size:11.5px; }
}
/* Mobile: skip the heavy hero video, show the dedicated mobile hero image */
@media(max-width:768px) {
  .hero-video { display:none; }
  .hero-video-wrap {
    background:#0d1512 url("../images/heroMobile.png") center/cover no-repeat;
  }
}
@media(prefers-reduced-motion:reduce) { .hero-video { display:none; } }

/* ============================================================
   LIGHT THEME — first sections (ribbon · assessment · about)
   White backgrounds, no black; Libre Baskerville display serif
   ============================================================ */
:root { --serif: 'Libre Baskerville', Georgia, 'Times New Roman', serif; --ink: #1c2419; --ink-soft: rgba(28,36,25,0.62); --ink-faint: rgba(28,36,25,0.42); --line: rgba(28,36,25,0.10); }

/* Display serif accents */
.hero-serif em,
.about-photo-headline,
.about-pullquote { font-family:var(--serif); }
.hero-serif em { font-style:italic; font-weight:400; }

/* ---- Ribbon → light ---- */
.hero-ribbon { background:#fbfaf6; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.hero-ribbon-item { color:var(--ink-faint); border-right:1px solid var(--line); }
.hero-ribbon-dot { background:var(--sage); }

/* ---- Assessment (cats) → white ---- */
.cats-section { background:#ffffff; box-shadow:none; }
.cats-section::before { background:radial-gradient(ellipse 70% 55% at 50% 30%, rgba(138,170,124,0.07), transparent 70%); }
.cats-eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  color:var(--sage-deep, #5d7a51);
  font-size:11px; font-weight:600; letter-spacing:0.28em; text-transform:uppercase;
}
.cats-eyebrow::before,
.cats-eyebrow::after { content:''; display:inline-block; width:28px; height:1px; background:var(--sage, #8aaa7c); opacity:0.8; }
.cats-title {
  font-family:var(--font);
  color:var(--ink); font-weight:500;
  letter-spacing:-0.025em;
  font-size:clamp(2.4rem, 5vw, 4rem); line-height:1.06;
  margin:18px 0 22px;
}
.cats-title em {
  font-family:var(--serif);
  font-style:italic; font-weight:400;
  color:var(--sage-deep, #5d7a51);
  letter-spacing:-0.01em;
  position:relative; padding:0 0.04em;
}
.cats-title em::after {
  content:''; position:absolute; left:6%; right:6%; bottom:-0.04em; height:0.16em;
  background:rgba(138,170,124,0.22); border-radius:6px; z-index:-1;
}
.cats-subtitle { color:var(--ink-soft); font-size:clamp(0.95rem,1.15vw,1.05rem); line-height:1.65; max-width:520px; }
.cats-cta-pill { border-color:rgba(28,36,25,0.22); color:var(--ink); font-weight:500; padding:15px 40px; transition:all 0.3s var(--e); }
.cats-cta-pill:hover { background:#1f3a2e; color:#fff; border-color:#1f3a2e; transform:translateY(-2px); box-shadow:0 14px 30px rgba(31,58,46,0.18); }
.cats-cta-note { color:var(--ink-faint); font-size:11.5px; letter-spacing:0.04em; }

.cats-tile-btn { background:#fbfaf6; border:1px solid var(--line); }
.cats-tile.is-active .cats-tile-btn { border-color:rgba(28,36,25,0.16); box-shadow:0 26px 56px rgba(28,36,25,0.14); }
.cats-tile-body { background:#fbfaf6; }
.cats-tile-image::after { background:linear-gradient(to bottom, transparent 40%, rgba(251,250,246,0.0) 70%, rgba(251,250,246,0) 100%); }
.cats-tile-image img { filter:saturate(0.95) contrast(1.02); }
.cats-tile.is-hovered .cats-tile-image img { filter:saturate(1.05) contrast(1.04); }
.cats-tile-title { color:var(--ink); }
.cats-tile-quote { color:rgba(28,36,25,0.78); }
.cats-tile-question { color:var(--ink-faint); }
.cats-tile-lead { color:var(--ink-soft); }
.cats-tile.is-hovered .cats-tile-question { color:rgba(28,36,25,0.6); }
.cats-tile.is-hovered .cats-tile-lead { color:rgba(28,36,25,0.8); }
.cats-tile-go { background:rgba(28,36,25,0.04); color:var(--ink-soft); border:1px solid var(--line); }
.cats-tile.is-active .cats-tile-go,
.cats-tile.is-hovered .cats-tile-go { background:var(--ink); color:#fff; border-color:var(--ink); }

.cats-playpause { color:var(--ink-faint); }
.cats-playpause:hover { background:rgba(28,36,25,0.06); border-color:rgba(28,36,25,0.3); color:var(--ink); }
.cats-dot { background:rgba(28,36,25,0.16); }
.cats-dot:hover { background:rgba(28,36,25,0.32); }
.cats-dot.is-active { background:var(--ink); }

/* ---- Assessment: quiet editorial decoration (replaces the rounded photos) ---- */
/* Hide the photo cards — kept in markup but visually removed, reversible by deleting this line */
.cats-deco { display:none; }

/* Section needs to host the new ambient layers */
.cats-section { position:relative; isolation:isolate; }

/* Giant faint serif watermark sitting behind the title */
.cats-section::before {
  content:"vritti.";
  position:absolute; top:8%; left:50%;
  transform:translateX(-50%);
  font-family:var(--serif);
  font-style:italic; font-weight:400;
  font-size:clamp(8rem, 22vw, 22rem);
  line-height:1;
  color:rgba(28,36,25,0.035);
  pointer-events:none;
  z-index:0;
  white-space:nowrap;
  user-select:none;
}

/* Soft dotted texture across the whole section */
.cats-section::after {
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(28,36,25,0.06) 1px, transparent 1.4px);
  background-size:28px 28px;
  background-position:0 0;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 80%);
  pointer-events:none;
  z-index:0;
}

/* Make the existing ambient blobs (in markup) a touch more present */
.cats-orb { z-index:1; }

/* Make sure the header + stage sit above the new decoration */
.cats-header, .cats-stage, .cats-controls { position:relative; z-index:2; }

@media(max-width:768px){
  .cats-section::before { font-size:12rem; opacity:0.5; }
  .cats-section::after  { background-size:22px 22px; }
}

/* ── Designer signature ribbon: center label + slow serif marquee ── */
.cats-ribbon {
  position:relative; z-index:2;
  margin-top:clamp(48px, 6vh, 80px);
  padding-top:clamp(36px, 4vh, 56px);
  border-top:1px solid rgba(28,36,25,0.10);
}
.cats-ribbon-mark {
  position:absolute; top:0; left:50%;
  transform:translate(-50%,-50%);
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; padding:8px 18px;
  font-family:var(--font); font-size:11px; font-weight:600;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--ink-faint, rgba(28,36,25,0.42));
  border:1px solid rgba(28,36,25,0.10); border-radius:99px;
}
.cats-ribbon-mark svg { color:#8aaa7c; opacity:0.75; flex-shrink:0; }
.cats-ribbon-mark em {
  font-family:var(--serif); font-style:italic; font-weight:400;
  letter-spacing:0.02em; text-transform:none; font-size:12.5px;
  color:rgba(28,36,25,0.55);
}
.cats-ribbon-mq { overflow:hidden; padding:8px 0; mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
.cats-ribbon-track { display:flex; width:max-content; animation:catsRibbonMq 42s linear infinite; }
.cats-ribbon:hover .cats-ribbon-track { animation-play-state:paused; }
.cats-ribbon-seq { display:inline-flex; align-items:center; gap:28px; padding-right:28px; }
.cats-ribbon-seq i {
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.4rem, 2.2vw, 2rem);
  color:rgba(28,36,25,0.42);
  white-space:nowrap; letter-spacing:-0.01em;
}
.cats-ribbon-seq b { color:#8aaa7c; font-weight:400; font-size:1.4rem; }
@keyframes catsRibbonMq { to { transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){ .cats-ribbon-track { animation:none; } }
@media(max-width:600px){
  .cats-ribbon-mark { font-size:10px; padding:6px 14px; }
  .cats-ribbon-mark em { font-size:11px; }
  .cats-ribbon-seq i { font-size:1.15rem; }
}

/* ---- About → white, cleaned up ---- */
.about-section { background:#ffffff; border-top:1px solid var(--line); padding:clamp(40px,6vh,88px) clamp(20px,4vw,64px); }
.about-section::after { display:none; }
.cats-section { box-shadow:none; }

/* Balanced two-card layout with a breathing gap */
.about-grid { gap:clamp(20px,2.4vw,40px); min-height:auto; border-radius:28px; overflow:hidden; box-shadow:0 24px 60px rgba(28,36,25,0.10); }

.about-media-col { background:#eef0ea; border-radius:0; overflow:hidden; min-height:clamp(340px,44vh,520px); }
@media(max-width:960px) { .about-media-col { min-height:clamp(300px,46vw,420px); } }
.about-img-wrap img { opacity:1; filter:saturate(0.98) contrast(1.02); object-position:center 22%; }
/* single, softer legibility gradient (no doubled dark stack) */
.about-media-col::after { background:linear-gradient(to top, rgba(18,24,16,0.74) 0%, rgba(18,24,16,0.10) 50%, transparent 76%); }
.about-img-wrap::after { display:none; }
.about-photo-text { padding:clamp(22px,3vw,38px) clamp(22px,3vw,38px) clamp(24px,4vh,40px); }
.about-photo-headline { font-weight:500; font-size:clamp(1.6rem,3vw,2.6rem); margin-bottom:8px; }
.about-photo-caption { font-size:12px; max-width:340px; }

/* Right panel: tighter padding, compact list */
.about-body { background:#fbfaf6; border-left:none; padding:clamp(22px,2.2vw,36px) clamp(22px,2.2vw,38px); justify-content:center; }
.about-grid { gap:clamp(16px,1.6vw,28px); }
.about-pullquote { color:rgba(28,36,25,0.78); border-bottom-color:var(--line);
  font-size:clamp(0.95rem,1.4vw,1.2rem); line-height:1.4;
  margin:0 0 clamp(14px,1.8vw,20px); padding:0 0 clamp(14px,1.8vw,20px); }
.about-pullquote::before { color:var(--sage); font-size:clamp(1.6rem,2.6vw,2.2rem); margin-bottom:4px; }
.values-list { margin-bottom:clamp(16px,2vw,24px); }
.value-item { border-top-color:var(--line); padding:10px 0; gap:14px; }
.value-item:last-child { border-bottom-color:var(--line); }
.value-item b { color:var(--ink); font-size:13px; }
.value-item span { color:var(--ink-soft); font-size:11.5px; line-height:1.45; }
.value-n { color:var(--ink-faint); }
.about-cta-btn { background:var(--ink); border-color:var(--ink); margin-top:6px; padding:11px 22px; }
.about-cta-btn:hover { background:#11160e; }

/* How It Works — closing CTA */
.flow-foot { display:flex; justify-content:center; margin-top:clamp(36px,5vh,56px); }