/* ===========================================================
   WALK THE TALK — Boardroom Brutalism
   Design tokens
=========================================================== */
:root{
  /* v7 palette — warm & white dominant, keyed off the logo's red/coral/gold.
     --rust/--ink/--clay/--stone keep their v6 names for minimal diff but now
     carry warm terracotta/espresso values instead of blue/navy. */
  --rust: #C1401C;
  --rust-dim: #8F2E15;
  --ink: #211311;
  --clay: #A15B3B;
  --paper: #FFFCFA;
  --paper-warm: #FCEEE2;
  --pure-white: #FFFFFF;
  --conviction-red: #FF4033;
  --coral: #FF675C;
  --executive-gold: #FFC94D;
  --charcoal: #4A3C37;
  --stone: #AE9A8E;

  --display: 'Inter', 'Arial Narrow', sans-serif;
  --editorial: 'Fraunces', Georgia, serif;
  --body: 'General Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Inter', monospace;

  --ease-weighted: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-stamp: cubic-bezier(0.83, 0, 0.17, 1);

  --container: 1360px;
  --gutter: clamp(24px, 5vw, 72px);
}

/* v13 — the Liquid Continuum's gradient now lives permanently in the
   light/pastel register (see below), so its text tokens are plain,
   static, universally-supported custom properties: no @property, no
   animated color-mix(), nothing that depends on a browser correctly
   interpolating a registered custom property. Dark ink is simply always
   correct against a backdrop that never goes dark — which is the most
   reliable way to guarantee contrast on every browser and device,
   rather than computing it live and risking a silent white-on-light
   fallback if any single browser mis-handles the animation. */
.liquid-continuum{
  --lc-fg: var(--ink);
  --lc-fg-soft: rgba(33,19,17,0.76);
  --lc-fg-softer: rgba(33,19,17,0.58);
  --lc-fg-faint: rgba(33,19,17,0.42);
  --lc-border: rgba(33,19,17,0.18);
  --lc-border-soft: rgba(33,19,17,0.1);
  --lc-surface: rgba(255,255,255,0.55);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: auto; overflow-x: hidden; max-width: 100%; }
html.lenis, html.lenis body{ height: auto; }
.lenis.lenis-smooth{ scroll-behavior: auto; }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; background:none; border:none; cursor:pointer; color: inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }

/* ===========================================================
   TEXT WRAPPING — headlines/quotes use text-wrap:balance so the
   browser recomputes line breaks per-viewport (evening out line
   lengths, no orphaned single words), and body copy uses
   text-wrap:pretty (with `balance` as the safe fallback) to keep
   the last line of a paragraph from ever being one short word.
   This replaces hand-placed <br> tags, which were tuned for one
   desktop width and produced orphans/widows at every other size —
   the actual cause of the mobile line-break complaints. Support is
   solid in evergreen Chrome/Edge/Firefox and Safari 17.4+; browsers
   without it just fall back to normal wrapping, never worse than
   before. */
h1, h2, h3,
.chapter-quote, .chip-quote, .flow-text, .proof-label,
.manifesto-lead, .manifesto-punch{
  text-wrap: balance;
}
p, .flow-copy{
  text-wrap: balance;
  text-wrap: pretty;
}

::selection{ background: var(--conviction-red); color: var(--pure-white); }

/* focus visibility for accessibility */
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--conviction-red);
  outline-offset: 3px;
}

.section-tag{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 20px;
  /* Deliberately NOT display:flex/inline-flex. This is plain block text so
     it always inherits the section's own text-align — centered sections
     center it, left sections left-align it — with zero per-section
     overrides required. The old .eyebrow was a flex row, which ignores
     inherited text-align entirely and needs justify-content set on every
     centered section individually; that's what caused the recurring
     desktop/mobile misalignment. Keep this a plain <p>, no flex children. */
}
.section-tag-on-dark{ color: var(--lc-fg-soft, rgba(33,19,17,0.76)); }
.hero-tag{ color: rgba(255,255,255,0.7); }

.grain-overlay{
  position: fixed; inset:0; pointer-events:none; z-index: 998;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===========================================================
   PRELOADER
=========================================================== */
.preloader{
  position: fixed; inset:0; z-index: 999;
  background: var(--ink);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.preloader-atmos{
  position:absolute; inset:-25%; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 28% 28%, rgba(193,64,28,0.4), transparent 55%),
    radial-gradient(circle at 76% 72%, rgba(255,201,77,0.28), transparent 55%);
  filter: blur(70px);
  animation: preloaderAtmosDrift 5s ease-in-out infinite alternate;
}
@keyframes preloaderAtmosDrift{
  from{ transform: translate(-2%,-2%) scale(1); }
  to{ transform: translate(2%,2%) scale(1.1); }
}
.preloader-inner{ position:relative; z-index:1; text-align:center; }
.preloader-mark-wrap{
  position:relative; width: clamp(60px,8vw,88px); height: clamp(60px,8vw,88px);
  margin: 0 auto 22px; display:flex; align-items:center; justify-content:center;
}
.preloader-ring{ position:absolute; inset:0; width:100%; height:100%; transform: rotate(-90deg); }
.preloader-ring-track{ fill:none; stroke: rgba(255,255,255,0.14); stroke-width:2.5; }
.preloader-ring-fill{
  fill:none; stroke: url(#preloaderGrad); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray: 339.3; stroke-dashoffset: 339.3;
  transition: stroke-dashoffset 0.1s linear;
}
.preloader-mark{
  position:relative; height: clamp(24px,3.4vw,34px); width:auto; display:block;
  opacity:0; animation: preloaderMarkIn 0.7s 0.15s var(--ease-weighted) forwards;
}
@keyframes preloaderMarkIn{ from{ opacity:0; transform: translateY(10px) scale(0.9);} to{ opacity:1; transform: translateY(0) scale(1);} }
.preloader-word{
  font-family: var(--display);
  font-weight: 600;
  color: var(--pure-white);
  font-size: clamp(20px, 7vw, 64px);
  letter-spacing: 0.02em;
  margin-bottom: 24px;
  white-space: nowrap;
}
.preloader-word .pl-char{ display:inline-block; }
.preloader-stairs{
  display:flex; align-items:flex-end; justify-content:center; gap:6px; height: 30px; margin-bottom: 20px;
}
.preloader-stairs span{
  width: 10px; display:block; background: var(--rust); transform: scaleY(0); transform-origin: bottom;
  border-radius: 2px 2px 0 0;
  transition: box-shadow 0.3s;
}
.preloader-stairs span:nth-child(1){ height: 8px; }
.preloader-stairs span:nth-child(2){ height: 14px; }
.preloader-stairs span:nth-child(3){ height: 20px; }
.preloader-stairs span:nth-child(4){ height: 26px; background: var(--conviction-red);}
.preloader-stairs span:nth-child(5){ height: 30px; background: var(--executive-gold);}
.preloader-stairs span.is-lit{ box-shadow: 0 0 14px 2px currentColor; }
.preloader-pct{
  font-family: var(--display); font-weight:700; color: var(--pure-white);
  font-size: clamp(26px,4.2vw,38px); letter-spacing:-0.01em;
  font-variant-numeric: tabular-nums;
}
.preloader-pct span{ display:inline-block; min-width: 2ch; text-align:right; }
.preloader-wipe{
  position:absolute; inset:-4% -12%; transform: translateY(101%) skewY(-4deg); z-index:2;
}
.wipe-rust{ background: var(--rust); }
.wipe-red{ background: var(--conviction-red); }
.wipe-gold{ background: var(--executive-gold); }
@media(prefers-reduced-motion: reduce){
  .preloader-atmos{ animation:none; }
}

/* ===========================================================
   STAIRCASE SCROLL RAIL — a live reading-progress indicator that
   works everywhere: a slim top bar on phones/tablets (the pattern
   people already know from reading apps), and a richer vertical rail
   with a glowing leading edge + live percentage on desktop, where
   there's room for it. Both read off one shared --p custom property
   (0–100) set by a single scroll listener — no separate mobile/desktop
   logic to keep in sync.
=========================================================== */
.stair-rail{
  --p: 0;
  position: fixed; z-index: 500;
  top:0; left:0; right:0; height:4px;
}
.stair-rail-track{
  position:relative; height:100%; width:100%;
  background: rgba(33,19,17,0.1);
  overflow:visible;
}
.stair-rail-fill{
  position:absolute; left:0; top:0; height:100%;
  width: calc(var(--p) * 1%);
  background: linear-gradient(90deg, var(--rust), var(--conviction-red) 55%, var(--executive-gold));
}
.stair-rail-glow{
  position:absolute; top:50%; left: calc(var(--p) * 1%);
  width:9px; height:9px; border-radius:50%;
  background: var(--executive-gold);
  box-shadow: 0 0 10px 3px rgba(255,201,77,0.55);
  transform: translate(-50%,-50%);
  opacity: clamp(0, calc((var(--p) - 1) * 999), 1);
}
.stair-rail-pct{ display:none; }
@media(min-width: 1000px){
  .stair-rail{
    top:50%; left:18px; right:auto; bottom:auto; transform: translateY(-50%);
    width:3px; height:45vh;
  }
  .stair-rail-track{ border-radius:3px; overflow:hidden; }
  .stair-rail-fill{
    width:100%; height: calc(var(--p) * 1%);
    background: linear-gradient(180deg, var(--rust), var(--conviction-red) 55%, var(--executive-gold));
  }
  .stair-rail-glow{ top: calc(var(--p) * 1%); left:50%; }
  .stair-rail-pct{
    display:block; position:absolute; left:50%; top: calc(var(--p) * 1%);
    transform: translate(-50%, calc(-100% - 14px));
    font-family: var(--mono); font-size:10px; letter-spacing:0.04em;
    color: var(--rust); background: var(--pure-white);
    padding: 3px 7px; border-radius:999px; white-space:nowrap;
    box-shadow: 0 6px 14px rgba(33,19,17,0.18);
    opacity: clamp(0, calc((var(--p) - 1) * 999), 1);
  }
}

/* ===========================================================
   NAV
=========================================================== */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 400;
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px var(--gutter);
  transition: background 0.5s var(--ease-weighted), padding 0.5s var(--ease-weighted), backdrop-filter 0.5s;
}
.nav.nav-scrolled{
  padding: 14px var(--gutter);
  background: rgba(250,250,247,0.72);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(33,19,17,0.06);
}
.nav-mark{ display:flex; align-items:center; gap:10px; }
.nav-mark-icon{ height:28px; width:auto; display:block; }
.nav-mark-word{
  font-family: var(--display); font-weight:700; font-size:13px; letter-spacing:0.03em;
  color: var(--ink); white-space:nowrap;
}
.nav:not(.nav-scrolled) .nav-mark-word{ color: var(--pure-white); }
@media(max-width:520px){ .nav-mark-word{ display:none; } }

.nav-links{ display:flex; align-items:center; gap: clamp(10px, 2vw, 28px); }
.nav-link{
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink); padding: 8px 4px; position:relative;
}
.nav.nav-scrolled .nav-link{ color: var(--ink); }
.nav:not(.nav-scrolled) .nav-link{ color: rgba(255,255,255,0.88); }
.nav-cta{
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--conviction-red); color: var(--pure-white);
  padding: 12px 20px; border-radius: 999px;
}
.nav-toggle{ display:none; }

@media(max-width: 900px){
  /* ---- Full-screen sheet menu, not a narrow slide-in drawer ---- */
  .nav-links{
    position: fixed; inset: 0; width: 100%; height: 100dvh;
    background: var(--ink);
    display:flex; flex-direction: column; align-items: stretch; justify-content:center;
    padding: 100px max(28px, var(--gutter)) 40px; gap: 4px;
    opacity: 0; visibility: hidden;
    transition: opacity 0.4s var(--ease-weighted), visibility 0s linear 0.4s;
    /* Six links + the CTA at this font size can exceed 100dvh on shorter
       phone screens; since body scroll is disabled while the menu is open
       (see body.nav-open below), any overflow used to be genuinely
       unreachable — reading as clipped text at the bottom of the menu.
       Letting the menu itself scroll keeps every link reachable. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links::before{
    /* faint concentric rings echo the hero/logo mark so the menu still feels like this brand, not a generic drawer */
    content:""; position:absolute; z-index:0; right:-18%; top:-14%; width:70vw; aspect-ratio:1/1;
    border-radius:50%; border:1px solid rgba(193,64,28,0.18);
    box-shadow: 0 0 0 44px rgba(255,201,77,0.03), 0 0 0 88px rgba(255,64,51,0.03);
    pointer-events:none;
  }
  .nav-links.open{
    opacity: 1; visibility: visible;
    transition: opacity 0.4s var(--ease-weighted), visibility 0s linear 0s;
  }
  body.nav-open{ overflow:hidden; }
  .nav-links .nav-link,
  .nav.nav-scrolled .nav-links .nav-link{
    position:relative; z-index:1;
    color: var(--pure-white) !important; font-family: var(--display); font-weight:600;
    font-size: clamp(28px, 8vw, 42px); letter-spacing:-0.01em; text-transform:none;
    padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.1);
    opacity:0; transform: translateY(16px);
  }
  .nav-links.open .nav-link{ animation: navLinkIn 0.6s var(--ease-weighted) forwards; }
  .nav-links .nav-link::before{
    content: counter(navlink, decimal-leading-zero); counter-increment: navlink;
    font-family: var(--mono); font-size:12px; letter-spacing:0.1em; color: var(--rust);
    margin-right:16px; vertical-align: middle;
  }
  .nav-links{ counter-reset: navlink; }
  @keyframes navLinkIn{ to{ opacity:1; transform:translateY(0); } }
  .nav-links.open .nav-link:nth-child(1){ animation-delay: 0.08s; }
  .nav-links.open .nav-link:nth-child(2){ animation-delay: 0.13s; }
  .nav-links.open .nav-link:nth-child(3){ animation-delay: 0.18s; }
  .nav-links.open .nav-link:nth-child(4){ animation-delay: 0.23s; }
  .nav-links.open .nav-link:nth-child(5){ animation-delay: 0.28s; }
  .nav-links.open .nav-link:nth-child(6){ animation-delay: 0.33s; }
  .nav-cta{
    position:relative; z-index:1; margin-top: 26px; text-align:center;
    padding: 18px 20px; font-size: 13px;
    opacity:0; transform: translateY(16px);
  }
  .nav-links.open .nav-cta{ animation: navLinkIn 0.6s var(--ease-weighted) forwards 0.4s; }

  .nav-toggle{
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px;
    width: 40px; height:40px; z-index: 401; position:relative;
  }
  .nav-toggle span{
    height:2px; width:22px; background: var(--ink); border-radius:2px;
    transition: transform 0.35s var(--ease-weighted), opacity 0.2s, background 0.3s;
  }
  .nav:not(.nav-scrolled) .nav-toggle span{ background: var(--pure-white); }
  .nav-toggle.active span{ background: var(--pure-white) !important; }
  .nav-toggle.active span:nth-child(1){ transform: translateY(4px) rotate(45deg); }
  .nav-toggle.active span:nth-child(2){ transform: translateY(-4px) rotate(-45deg); }
}

/* ===========================================================
   HERO
=========================================================== */
.hero{
  position: relative; min-height: 100svh; overflow:hidden;
  background: var(--ink);
  display:flex; align-items:flex-end;
  padding: 0 0 clamp(60px,10vh,120px);
}
.hero-rings{
  position:absolute; z-index:1; right:-6%; top:-8%; width:min(64vw,780px); aspect-ratio:1/1;
  opacity:0.55; pointer-events:none;
}
.hero-rings svg{ width:100%; height:100%; }
.hero-rings .ring{ fill:none; stroke-width:1; transform-origin: 300px 300px; }
.hero-rings .ring-blue{ stroke: var(--rust); opacity:0.55; }
.hero-rings .ring-red{ stroke: var(--conviction-red); opacity:0.4; }
.hero-rings .ring-gold{ stroke: var(--executive-gold); opacity:0.35; }

.hero-bg-photo{
  position:absolute; inset: -1%; z-index:2;
  mask-image: radial-gradient(ellipse 46% 60% at 68% 26%, #000 42%, rgba(0,0,0,0.5) 64%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 46% 60% at 68% 26%, #000 42%, rgba(0,0,0,0.5) 64%, transparent 90%);
  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
}
.hero-bg-photo picture{ display:block; width:100%; height:100%; }
.hero-bg-photo img{
  width:100%; height:100%; object-fit: cover; object-position: 68% 22%;
  filter: saturate(1.02) contrast(1.03);
}
.hero-photo-tint{
  /* the new hero photography is already warm-graded — keep only a
     whisper of rust to unify it with the rest of the palette */
  position:absolute; inset:0; z-index:2;
  background: var(--rust-dim);
  mix-blend-mode: color;
  opacity: 0.14;
  pointer-events:none;
}
.hero-lightsweep{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background: linear-gradient(75deg, transparent 42%, rgba(255,255,255,0.5) 49%, rgba(245,210,94,0.35) 52%, transparent 60%);
  transform: translateX(-140%) skewX(-14deg);
  mix-blend-mode: overlay;
}
.hero-vignette{
  position:absolute; inset:0; z-index:4;
  background:
    radial-gradient(64% 58% at 74% 22%, rgba(255,252,246,0.4) 0%, rgba(255,222,163,0.22) 32%, rgba(255,201,77,0.08) 52%, transparent 74%),
    linear-gradient(180deg, rgba(255,250,244,0.06) 0%, rgba(161,91,59,0.18) 34%, rgba(33,19,17,0.58) 78%, rgba(33,19,17,0.8) 100%),
    linear-gradient(100deg, rgba(33,19,17,0.46) 0%, rgba(33,19,17,0.08) 52%, transparent 74%);
  background-size: 160% 160%, 100% 100%, 100% 100%;
  background-position: 0% 0%, 0 0, 0 0;
  animation: heroGlowDrift 26s ease-in-out infinite;
}
@keyframes heroGlowDrift{
  0%,100%{ background-position: 0% 0%, 0 0, 0 0; }
  50%{ background-position: 14% 10%, 0 0, 0 0; }
}
.hero-gold-sticker{
  position:absolute; z-index:5; width:64px; height:64px;
  background: var(--executive-gold); right: 8%; bottom: 30%;
  transform: rotate(18deg);
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
/* HERO — mobile: the decorative ring artwork was sized for wide desktop
   negative space, and the desktop vignette darkens hard from the left edge
   (built for text sitting beside the photo, not under it). On narrow
   portraits that side-shadow and the tight elliptical mask cut a stray dark
   band across Mr. Jain's face. This override MUST come after the base
   .hero-bg-photo/.hero-vignette rules above so it actually wins the
   cascade — full-bleed the photo, drop the side gradient, and keep only a
   bottom-anchored fade for headline legibility. */
@media(max-width: 900px){
  .hero-rings{ display:none; }
  .hero-bg-photo{
    inset:0;
    mask-image: linear-gradient(180deg, #000 0%, #000 56%, rgba(0,0,0,0.82) 80%, rgba(0,0,0,0.62) 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 56%, rgba(0,0,0,0.82) 80%, rgba(0,0,0,0.62) 100%);
  }
  .hero-bg-photo img{ object-position: 50% 22%; }
  .hero-vignette{
    background:
      radial-gradient(90% 46% at 50% 8%, rgba(255,250,240,0.28) 0%, rgba(255,214,140,0.12) 40%, transparent 72%),
      linear-gradient(180deg, rgba(255,250,244,0.04) 0%, rgba(33,19,17,0.08) 42%, rgba(33,19,17,0.58) 76%, rgba(33,19,17,0.82) 100%);
    background-size: 100% 100%, 100% 100%;
    animation: none;
  }
  .hero-gold-sticker{ right: 7%; bottom: 26%; top:auto; width: 44px; height: 44px; }
}

.hero-content{
  position:relative; z-index: 6; width:100%;
  padding: 0 var(--gutter);
}
.hero-eyebrow{ color: rgba(255,255,255,0.7); }
.hero-word{
  /* "WALK THE TALK" must always render on one line — font-size is
     proportional to viewport width (vw) with no absolute min floor that
     could exceed it, so nowrap holds at every breakpoint. */
  font-family: var(--display); font-weight: 700; color: var(--pure-white);
  font-size: clamp(26px, 11.5vw, 168px);
  line-height: 0.92; letter-spacing: -0.01em;
  margin: 0 0 28px;
  display:flex; flex-wrap:nowrap; white-space:nowrap; column-gap: 0.22em;
  max-width: 100%;
  text-shadow: 0 6px 34px rgba(20,10,7,0.45);
}
.hero-word .hw-word{ display:inline-flex; }
.hero-word .hw-char{ display:inline-block; }
@media(max-width: 420px){
  .hero-word{ column-gap: 0.14em; letter-spacing: -0.02em; }
}
.hero-manifesto{
  max-width: 820px; display:flex; flex-direction:column; gap: 10px;
}
.manifesto-lead{
  font-family: var(--editorial); font-style: italic; font-weight:400;
  color: rgba(255,255,255,0.82);
  font-size: clamp(16px, 2vw, 22px);
  text-shadow: 0 3px 20px rgba(20,10,7,0.4);
}
.manifesto-punch{
  font-family: var(--display); font-weight:700; color: var(--pure-white);
  font-size: clamp(26px, 4.5vw, 54px); line-height: 1.15; letter-spacing: -0.01em;
  text-shadow: 0 4px 26px rgba(20,10,7,0.45);
}
.punch-mask{ display:inline-block; overflow:hidden; vertical-align:top; line-height:1.15; }
.punch-mask .punch-word{ display:inline-block; will-change: transform; }
.hero-scroll-cue{
  position:absolute; z-index:7; left: var(--gutter); bottom: 28px;
  display:flex; align-items:center; gap:10px;
  color: rgba(255,255,255,0.75);
}
.cue-print svg{ width:18px; height:18px; stroke: currentColor; fill:none; stroke-width:2; stroke-linecap:round; }
.cue-print{ animation: bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(6px);} }
.cue-text{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }

/* ===========================================================
   PROOF STRIP
=========================================================== */
.proof{
  position:relative; background: var(--paper);
  padding: clamp(80px,12vh,140px) var(--gutter) clamp(60px,8vh,100px);
  overflow: hidden;
}
.proof-line{
  position:absolute; left: var(--gutter); right: var(--gutter); bottom: 96px;
  height:1px; background: linear-gradient(90deg, var(--rust), var(--conviction-red), var(--executive-gold));
  transform-origin: left; transform: scaleX(0);
}
.proof-grid{
  max-width: var(--container); margin:0 auto;
  display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,3vw,40px);
  align-items:end; perspective: 1200px;
}
.proof-step{
  display:flex; flex-direction:column; gap: 14px; padding: 28px 22px;
  border-top: 6px solid; opacity:0; transform: translateY(40px);
}
.step-1{ border-color: var(--rust); }
.step-2{ border-color: var(--conviction-red); margin-bottom: 28px; }
.step-3{ border-color: var(--executive-gold); margin-bottom: 56px; }
.proof-num{
  font-family: var(--display); font-weight:700; font-size: clamp(48px,7vw,96px); line-height:1;
  color: var(--ink);
}
.proof-label{
  font-family: var(--mono); font-size: 12px; letter-spacing:0.06em; text-transform: uppercase;
  color: var(--charcoal);
}

/* ===========================================================
   MANIFESTO
=========================================================== */
.manifesto{
  position:relative; background: var(--ink); color: var(--pure-white);
  padding: clamp(100px,16vh,180px) var(--gutter);
  overflow:hidden;
}
.manifesto-globe{
  position:absolute; right: -8%; top:50%; transform: translateY(-50%);
  width: min(58vw, 600px); pointer-events:none;
}
.manifesto-globe svg{ width:100%; height:auto; opacity:0.35; }
.globe-ring{ fill:none; stroke: var(--rust); stroke-width:1; opacity:0.6; }
/* Vision Loop — the animated eye/circles motif sits inside the ring
   artwork, masked to a soft circle and screen-blended so its black
   background disappears into the section and only the glowing rings
   and eye read through. */
.manifesto-vision{
  position:absolute; inset:6%; border-radius:50%; overflow:hidden;
  mask-image: radial-gradient(circle at 50% 50%, #000 54%, transparent 76%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 54%, transparent 76%);
}
.manifesto-vision img{
  width:100%; height:100%; object-fit:cover;
  mix-blend-mode: screen; opacity:0.85; filter: saturate(1.15);
}
@media(max-width:760px){
  .manifesto{ padding-top: clamp(230px,58vw,300px); }
  .manifesto-globe{
    right:auto; left:50%; top: clamp(64px,15vw,96px);
    transform: translateX(-50%);
    width: min(64vw, 260px);
  }
}
.manifesto-text{
  position:relative; z-index:2;
  font-family: var(--editorial); font-style: italic; font-weight: 300;
  font-size: clamp(28px, 5vw, 64px); line-height: 1.18; max-width: 980px;
  margin-bottom: 40px;
}
.manifesto-text .mf-word{ opacity:0.15; }
.manifesto-support{
  position:relative; z-index:2;
  max-width: 560px; color: rgba(255,255,255,0.68); font-size: 17px; line-height: 1.6;
}

/* ===========================================================
   FOUNDER
=========================================================== */
.founder{
  background: var(--paper-warm);
  width: 100%;
  padding: clamp(80px,12vh,140px) max(var(--gutter), calc((100% - 1560px) / 2));
  display:grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px,6vw,90px);
  align-items:center;
}
.founder-portrait-wrap{ position:relative; }
.founder-portrait{
  border-radius: 4px; overflow:hidden;
  filter: grayscale(0.15) contrast(1.02);
  aspect-ratio: 4 / 3;
}
.founder-portrait img{ width:100%; height:100%; object-fit:cover; object-position: center 30%; }
.founder-sticker{
  position:absolute; background: var(--pure-white);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 10px 14px; box-shadow: 0 14px 30px rgba(33,19,17,0.16);
  border-left: 3px solid var(--rust);
  max-width: 170px;
}
.sticker-1{ top: 6%; left: -8%; transform: rotate(-6deg); border-left-color: var(--rust); }
.sticker-2{ top: 30%; right: -10%; transform: rotate(4deg); border-left-color: var(--conviction-red); }
.sticker-3{ bottom: 18%; left: -12%; transform: rotate(3deg); border-left-color: var(--executive-gold); }
.sticker-4{ bottom: -4%; right: -6%; transform: rotate(-4deg); border-left-color: var(--rust); }
.founder-name{
  font-family: var(--display); font-weight:700; font-size: clamp(38px,5vw,64px);
  margin-bottom: 20px;
}
.founder-bio{ font-size: 17px; line-height:1.7; color: var(--charcoal); margin-bottom: 26px; max-width: 560px; }
.founder-quote{
  font-family: var(--editorial); font-style: italic; font-weight:400;
  font-size: clamp(19px,2vw,24px); line-height:1.5; color: var(--ink);
  border-left: 3px solid var(--conviction-red); padding-left: 22px; margin-bottom: 30px; max-width: 560px;
}
.chip-row{ display:flex; flex-wrap:wrap; gap: 10px; }
.chip{
  font-family: var(--mono); font-size: 11px; letter-spacing:0.04em; text-transform: uppercase;
  border: 1px solid var(--clay); border-radius: 999px; padding: 9px 16px;
  color: var(--clay); transition: background 0.35s, color 0.35s, border-color 0.35s;
}
.chip:hover{ background: var(--rust); border-color: var(--rust); color: var(--pure-white); }

@media(max-width: 900px){
  .founder{ grid-template-columns: 1fr; }
  .founder-sticker{ display:none; }
}

/* ===========================================================
   MINDSET — signature horizontal gallery
=========================================================== */
.mindset{
  position:relative; background: transparent; color: var(--lc-fg, var(--ink));
  padding: clamp(80px,12vh,120px) 0 0;
  overflow:hidden;
}
.mindset-intro{ padding: 0 var(--gutter); margin-bottom: clamp(46px,7vh,80px); max-width: 900px; }
.mindset-title{
  font-family: var(--display); font-weight:700; font-size: clamp(32px,5.4vw,68px); line-height:1.05;
}
.mindset-sub{
  font-family: var(--mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color: var(--lc-fg-faint, rgba(33,19,17,0.42)); margin-top:16px;
}
.mindset-pin{ position:relative; height: min(78vh, 620px); min-height: 460px; }
.mindset-track{
  display:flex; height:100%; gap: clamp(16px,2vw,26px);
  padding: 0 var(--gutter); will-change: transform;
}
.mindset-card{
  position:relative; flex: 0 0 auto; width: min(76vw, 460px); height:100%;
  border-radius: 6px; overflow:hidden;
  border-top: 5px solid var(--rust);
}
.mindset-card[data-tint="blue"]{ border-top-color: var(--rust); }
.mindset-card[data-tint="red"]{ border-top-color: var(--conviction-red); }
.mindset-card[data-tint="gold"]{ border-top-color: var(--executive-gold); }
.mindset-card img{
  width:100%; height:100%; object-fit:cover; object-position: top center;
  filter: grayscale(0.3) contrast(1.05);
  transform: scale(1.14);
}
.mindset-card-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(33,19,17,0.05) 25%, rgba(33,19,17,0.6) 68%, rgba(33,19,17,0.95) 100%);
}
.mindset-card-copy{
  position:absolute; left:0; right:0; bottom:0; padding: clamp(22px,3vw,36px);
  color: var(--pure-white);
}
.mindset-card-num{
  font-family: var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color: var(--executive-gold); display:block; margin-bottom: 12px;
}
.mindset-card p{
  font-family: var(--editorial); font-style:italic; font-weight:400;
  font-size: clamp(16px,1.9vw,21px); line-height:1.45; max-width: 380px;
  color: var(--pure-white); text-shadow: 0 2px 14px rgba(20,10,7,0.4);
}

@media(min-width: 900px){
  .mindset-track::-webkit-scrollbar{ display:none; }
}
@media(max-width: 899px){
  .mindset-pin{ height:auto; }
  .mindset-track{
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding-bottom: 26px;
  }
  .mindset-track::-webkit-scrollbar{ display:none; }
  .mindset-card{ width: 82vw; height: 58vh; min-height: 400px; scroll-snap-align:center; }
}

/* ===========================================================
   PILLARS (WHAT WE DO) — v2: a sticky-visual + interactive accordion
   pairing, replacing the old ascending "staircase of buttons" plus a
   detached full-screen modal. The list and the image now live in the
   same eyeline, crossfading together, so picking a discipline feels
   like one continuous surface reacting rather than a popup interrupting
   the page.
=========================================================== */
.pillars{
  position:relative; background: transparent; color: var(--lc-fg, var(--ink));
  padding: clamp(90px,14vh,160px) var(--gutter) clamp(110px,15vh,180px);
}
.pillars-head{ max-width: 720px; margin: 0 auto clamp(50px,7vh,80px); text-align:center; }
.pillars-title{
  font-family: var(--display); font-weight:700; font-size: clamp(32px,5.6vw,64px);
  margin-bottom: 12px;
}
.pillars-sub{
  font-family: var(--mono); font-size: 12px; letter-spacing:0.08em; text-transform:uppercase;
  color: var(--lc-fg-faint, rgba(33,19,17,0.42));
}

.pillars-title .nowrap-phrase{ white-space: nowrap; }

.pillars-grid{
  max-width: 1200px; margin: 0 auto;
  display:grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(32px,5vw,68px);
  align-items:start;
}
.pillars-visual{ position: sticky; top: 100px; }
/* Strict 4:5 at every breakpoint — width is what flexes (capped so it
   never dominates the mobile layout), never the ratio, so every one of
   the four images crops the exact same way regardless of device. */
.pillars-visual-frame{
  position:relative; aspect-ratio: 4 / 5; width:100%; max-width: 420px;
  margin: 0 auto; border-radius: 22px; overflow:hidden;
  box-shadow: 0 40px 90px rgba(33,19,17,0.24), 0 6px 18px rgba(33,19,17,0.1);
}
.pillars-visual-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position: center 25%;
  opacity:0; transform: scale(1.12); filter: grayscale(0.25) contrast(1.05);
  transition: opacity 0.7s var(--ease-weighted);
}
.pillars-visual-img.is-active{
  opacity:1; z-index:1;
  animation: pillarsKenBurns 9s ease-out forwards;
}
@keyframes pillarsKenBurns{
  from{ transform: scale(1.12); }
  to{ transform: scale(1.02); }
}
.pillars-visual-tint{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(33,19,17,0.06) 42%, rgba(20,10,7,0.82) 100%);
}
.pillars-visual-tag{
  position:absolute; left:22px; bottom:22px; z-index:2;
  font-family: var(--mono); font-size:11px; letter-spacing:0.07em; text-transform:uppercase;
  color: var(--pure-white); background: rgba(20,10,7,0.4); backdrop-filter: blur(8px);
  padding: 9px 16px; border-radius:999px; white-space:nowrap;
}
.pillars-visual-dots{
  position:absolute; right:20px; bottom:22px; z-index:2;
  display:flex; gap:7px;
}
.pillars-visual-dots span{
  width:6px; height:6px; border-radius:50%; background: rgba(255,255,255,0.4);
  transition: background 0.3s, transform 0.3s;
}
.pillars-visual-dots span.is-active{ background: var(--executive-gold); transform: scale(1.3); }

.pillars-list{ display:flex; flex-direction:column; }
.pillar-row{ border-top: 1px solid rgba(33,19,17,0.13); }
.pillars-list .pillar-row:last-child{ border-bottom: 1px solid rgba(33,19,17,0.13); }
.pillar-row-head{
  width:100%; display:flex; align-items:center; gap:18px;
  padding: 24px 6px; text-align:left; background:none; border:none; cursor:pointer;
}
.pillar-row-num{
  font-family: var(--mono); font-size:13px; color: var(--rust); flex-shrink:0;
  transition: color 0.3s;
}
.pillar-row-name{
  font-family: var(--display); font-weight:600; font-size: clamp(18px,2.3vw,26px); flex:1;
  color: var(--ink); transition: color 0.3s;
}
.pillar-row.is-active .pillar-row-name{ color: var(--rust); }
.pillar-row-plus{ position:relative; width:22px; height:22px; flex-shrink:0; }
.pillar-row-plus::before, .pillar-row-plus::after{
  content:""; position:absolute; top:50%; left:50%; background: var(--executive-gold);
  transform: translate(-50%,-50%); border-radius:1px;
  transition: transform 0.35s var(--ease-weighted), opacity 0.35s;
}
.pillar-row-plus::before{ width:14px; height:2px; }
.pillar-row-plus::after{ width:2px; height:14px; }
.pillar-row.is-active .pillar-row-plus::after{ transform: translate(-50%,-50%) rotate(90deg); opacity:0; }
.pillar-row-body{
  display:grid; grid-template-rows: 0fr; opacity:0;
  transition: grid-template-rows 0.5s var(--ease-weighted), opacity 0.4s, margin 0.5s var(--ease-weighted);
}
.pillar-row-body p{ overflow:hidden; min-height:0; }
.pillar-row.is-active .pillar-row-body{ grid-template-rows: 1fr; opacity:1; margin-bottom: 24px; }
.pillar-row-body p{
  font-size:15px; line-height:1.7; color: var(--charcoal); max-width:500px; padding: 0 6px;
}

@media(max-width: 900px){
  .pillars-grid{ grid-template-columns: 1fr; }
  .pillars-visual{ position:static; }
  .pillars-visual-frame{ max-width: 340px; }
}
@media(max-width: 520px){
  .pillars-visual-frame{ border-radius:16px; max-width: 300px; }
  .pillar-row-name{ font-size: 17px; }
}
@media(prefers-reduced-motion: reduce){
  .pillars-visual-img.is-active{ animation:none; }
}

/* ===========================================================
   PLAYBOOK
=========================================================== */
.playbook{ position:relative; background: transparent; color: var(--lc-fg, var(--ink)); }
.playbook-pin{
  position: relative; min-height: 100svh;
  display:flex; align-items:center; overflow:hidden;
}
.playbook-chapter{
  position:absolute; inset:0;
  display:grid; grid-template-columns: 1.05fr 0.95fr; align-items:center; gap: clamp(30px,5vw,70px);
  padding: clamp(90px,10vh,120px) var(--gutter);
  opacity:0; pointer-events:none;
}
.playbook-chapter[data-chapter="1"]{
  /* Siblings are position:absolute; inset:0, which forces them to the full
     width of .playbook-pin. Chapter 1 alone stays in normal flow so it
     stays clickable/accessible before JS pins the section — but as a flex
     item that meant it was sized to shrink-to-fit content instead of
     filling the same width, making its visual card noticeably narrower
     than chapters 2/3. Locking width:100% (and matching inset/top so it
     shares the exact same box) keeps all three chapters pixel-identical. */
  position:relative; inset:0; width:100%; opacity:1; pointer-events:auto;
}
.playbook-chapter[data-tint]{ background: transparent; }
.chapter-copy{ min-width:0; }
.chapter-num{ font-family: var(--mono); font-size: 14px; letter-spacing:0.1em; color: var(--rust); margin-bottom: 20px; }
.chapter-quote{
  font-family: var(--editorial); font-style: italic; font-weight: 400;
  font-size: clamp(28px,4.2vw,56px); line-height:1.15; color: var(--lc-fg, var(--ink)); margin-bottom: 24px;
}
.chapter-hook{ font-size:17px; line-height:1.6; color: var(--lc-fg-soft, rgba(33,19,17,0.76)); max-width: 480px; margin-bottom: 26px; }

/* ---- "What You'll Learn" card: visible on first paint, no click required.
   A subtle top accent ties it to the chapter's tint (blue/red/gold). ---- */
.chapter-learn{
  background: var(--pure-white); border: 1px solid rgba(33,19,17,0.08);
  border-top: 3px solid var(--rust);
  border-radius: 16px; padding: clamp(20px,2.6vw,28px) clamp(22px,3vw,30px);
  max-width: 520px;
  box-shadow: 0 18px 40px rgba(33,19,17,0.1);
  display:flex; flex-direction:column; justify-content:space-between;
}
@media(min-width: 901px){
  /* Match all three chapter cards to the same footprint so none reads
     as smaller/lighter-weight than the others, regardless of how much
     each chapter's copy wraps. */
  .chapter-learn{ min-height: 320px; }
}
.playbook-chapter[data-tint="red"] .chapter-learn{ border-top-color: var(--conviction-red); }
.playbook-chapter[data-tint="gold"] .chapter-learn{ border-top-color: var(--executive-gold); }
.chapter-learn-label{
  font-family: var(--mono); font-size: 11px; letter-spacing:0.12em; text-transform:uppercase;
  color: var(--clay); display:flex; align-items:center; gap:10px; margin-bottom: 16px;
}
.chapter-learn-label::after{ content:""; flex:1; height:1px; background: rgba(33,19,17,0.12); }
.chapter-learn ul{ display:flex; flex-direction:column; gap:11px; }
.chapter-learn li{
  font-size:15px; line-height:1.5; color: var(--charcoal); padding-left:24px; position:relative;
}
.chapter-learn li::before{
  content:""; position:absolute; left:0; top:0.5em; width:9px; height:9px;
  background: var(--conviction-red); border-radius:2px; transform: rotate(45deg);
}
.playbook-chapter[data-tint="blue"] .chapter-learn li::before{ background: var(--rust); }
.playbook-chapter[data-tint="gold"] .chapter-learn li::before{ background: var(--executive-gold); }
.chapter-outcome{
  margin-top:16px; padding-top:16px; border-top: 1px dashed var(--lc-border, rgba(33,19,17,0.18));
  font-family: var(--editorial); font-style:italic; font-size:16px; color: var(--lc-fg, var(--ink));
}

/* ---- Chapter visual: atmospheric art panel that fills the empty
   right column, tinted per chapter to the brand colour it stands for ---- */
.chapter-visual{
  position:relative; height: clamp(340px,48vh,500px); border-radius: 22px; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding: 22px; box-shadow: 0 30px 70px rgba(33,19,17,0.22);
}
.chapter-visual-art{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter: saturate(1.15) contrast(1.02);
  transform: scale(1.05);
}
.chapter-visual-tint{ position:absolute; inset:0; mix-blend-mode: color; opacity:0.9; }
.playbook-chapter[data-tint="blue"] .chapter-visual-tint{ background: var(--rust); }
.playbook-chapter[data-tint="red"] .chapter-visual-tint{ background: var(--conviction-red); }
.playbook-chapter[data-tint="gold"] .chapter-visual-tint{ background: var(--executive-gold); }
.chapter-visual::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(33,19,17,0.05) 45%, rgba(33,19,17,0.55) 100%);
}
.chapter-visual-num{
  position:absolute; z-index:3; top:20px; left:20px;
  font-family: var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color: var(--pure-white); background: rgba(33,19,17,0.4); backdrop-filter: blur(6px);
  padding: 7px 14px; border-radius:999px;
}
.chapter-visual-tag{
  position:relative; z-index:3;
  font-family: var(--mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  color: var(--ink); background: rgba(250,250,247,0.94);
  padding: 12px 20px; border-radius: 12px; box-shadow: 0 14px 30px rgba(33,19,17,0.2);
}
.chapter-visual-quote{
  position:relative; z-index:3;
  font-family: var(--editorial); font-style:italic; font-size: clamp(19px,2.3vw,24px); line-height:1.45;
  color: var(--ink); text-align:center;
}

/* ---- Shared footprint for the chapter-visual centerpiece: the polygon
   widget (ch.1) and the quote cards (ch.2/3) are sized to match so no
   chapter reads as smaller or lighter-weight than the others. ---- */
.polygon-widget,
.visual-quote-card{
  position:relative; z-index:3; width: min(100%, 280px); min-height: 220px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  background: rgba(250,250,247,0.94); backdrop-filter: blur(10px);
  padding: 28px 24px; border-radius: 18px; box-shadow: 0 20px 46px rgba(33,19,17,0.24);
  margin-bottom: 14px;
}
#polygonSvg{ width: min(100%, 220px); touch-action:none; }
.poly-vertex{ fill: var(--conviction-red); cursor: grab; }
.poly-vertex:active{ cursor: grabbing; }
.polygon-caption{ font-family: var(--mono); font-size:11px; text-align:center; color: var(--clay); max-width:260px; line-height:1.5; }

@media(min-width: 901px){
  .chapter-visual .chapter-visual-tag{ display:none; }
}

@media(max-width: 900px){
  .playbook-chapter{ grid-template-columns:1fr; }
  /* height:auto + a min-height (rather than a hard-capped clamp) lets this
     panel grow to fit whatever it's holding — the polygon widget, a quote
     card, plus the num/tag chips — instead of a fixed 280-380px box with
     overflow:hidden clipping the bottom of that content off on shorter
     phone screens. */
  .chapter-visual{ height:auto; min-height: clamp(360px,50vh,440px); margin-top: 8px; padding-bottom: 26px; }
  .chapter-visual .chapter-visual-tag{ display:inline-block; }
  .chapter-learn{ max-width:100%; }
}

@media(max-width: 899px){
  .playbook-pin{ min-height:auto; display:block; overflow:visible; }
  .playbook-chapter{
    position:relative; inset:auto; opacity:1 !important; transform:none !important;
    pointer-events:auto !important;
    padding: 64px var(--gutter);
  }
}

/* ===========================================================
   THRESHOLD — scroll-scrubbed door sequence + reveal
=========================================================== */
.threshold{ position:relative; background: transparent; }
.threshold-pin{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding: clamp(90px,10vh,140px) var(--gutter);
}
.threshold-inner{
  max-width:1560px; margin:0 auto; width:100%;
  display:grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px,6vw,90px);
  align-items:center;
}
.threshold-copy{ position:relative; min-height: 200px; color: var(--lc-fg, var(--ink)); }
.threshold-line{
  position:absolute; left:0; top:44px; right:0;
  font-family: var(--display); font-weight:700;
  font-size: clamp(28px,4vw,48px); line-height:1.15;
  opacity:0; transform: translateY(18px);
  transition: opacity 0.6s var(--ease-weighted), transform 0.6s var(--ease-weighted);
}
.threshold-line.active{ opacity:1; transform: translateY(0); }

.threshold-visual{
  position:relative; width:100%; aspect-ratio: 4/3; border-radius: 18px; overflow:hidden;
  box-shadow: 0 40px 90px rgba(0,0,0,0.45);
}
.threshold-canvas{ width:100%; height:100%; display:block; object-fit:cover; }
.threshold-eye{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  opacity:0; mix-blend-mode:screen;
  transition: opacity 0.2s linear;
}
.threshold-progress{
  position:absolute; left: var(--gutter); right: var(--gutter); bottom: 28px;
  height:2px; background: var(--lc-border, rgba(33,19,17,0.18)); border-radius:2px; overflow:hidden;
}
.threshold-progress span{
  display:block; height:100%; width:0%;
  background: linear-gradient(90deg, var(--conviction-red), var(--executive-gold));
}
@media(max-width: 860px){
  .threshold-inner{ grid-template-columns:1fr; }
  .threshold-copy{ min-height:120px; order:2; }
  .threshold-line{ font-size: clamp(24px,6vw,34px); text-align:center; }
  .threshold-visual{ order:1; aspect-ratio: 4/3.4; }
}

/* ===========================================================
   PROGRAMME
=========================================================== */
.programme{
  position:relative; overflow:hidden; color: var(--lc-fg, var(--ink));
  background: transparent; padding: clamp(45px,7vh,80px) var(--gutter);
  text-align:center;
}
.programme-atmos{
  position:absolute; z-index:0; top:-10%; right:-14%; width:min(52vw,620px); aspect-ratio:1/1.3;
  opacity:0.16; pointer-events:none; filter: saturate(1.3);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 55%, transparent 100%);
}
.programme-atmos img{ width:100%; height:100%; object-fit:cover; }
.programme > *:not(.programme-atmos){ position:relative; z-index:1; }
.programme-title{
  font-family: var(--display); font-weight:700; font-size: clamp(32px,5.5vw,68px); line-height:1.05;
  margin-bottom: 16px;
}
.programme-sub{ font-size:17px; color: var(--lc-fg-soft, rgba(33,19,17,0.76)); margin-bottom: clamp(40px,6vh,56px); }
.programme-stats{
  display:flex; flex-wrap:wrap; justify-content:center; gap: clamp(28px,5vw,64px);
  max-width: 900px; margin: 0 auto clamp(50px,7vh,72px);
  padding: 26px var(--gutter); border-top: 1px solid var(--lc-border, rgba(33,19,17,0.18)); border-bottom: 1px solid var(--lc-border, rgba(33,19,17,0.18));
}
.programme-stat{ display:flex; flex-direction:column; gap:4px; }
.programme-stat-num{ font-family: var(--display); font-weight:700; font-size: clamp(28px,3.6vw,40px); color: var(--lc-fg, var(--ink)); }
.programme-stat-label{ font-family: var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color: var(--lc-fg-softer, rgba(33,19,17,0.58)); }
.programme-stairs{
  max-width: 900px; margin: 0 auto clamp(20px,3vh,32px);
  display:flex; align-items:flex-end; justify-content:center; gap: 3px; height: clamp(160px,20vh,240px);
}
.prog-step{
  flex:1; background: var(--pure-white); border: 1px solid rgba(33,19,17,0.1); position:relative;
  transition: background 0.5s var(--ease-weighted), transform 0.5s var(--ease-weighted), box-shadow 0.5s var(--ease-weighted);
  transform-origin: bottom;
}
.prog-step.lit{ background: var(--rust); border-color: var(--rust); }
.prog-step:hover{ transform: scaleY(1.05) translateY(-3px); box-shadow: 0 10px 24px rgba(193,64,28,0.28); }
.prog-step span{
  position:absolute; top:-24px; left:50%; transform:translateX(-50%);
  font-family: var(--mono); font-size:10px; color: var(--lc-fg-softer, rgba(33,19,17,0.58));
}
.programme-quarters{
  max-width: 900px; margin: 0 auto clamp(50px,7vh,72px);
  display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(10px,1.6vw,18px);
}
.programme-quarter{
  display:flex; flex-direction:column; gap:6px; padding: 14px 10px 0;
  border-top: 3px solid var(--rust);
  text-align:center;
}
.programme-quarter[data-tint="blue"]{ border-top-color: var(--rust); }
.programme-quarter[data-tint="red"]{ border-top-color: var(--conviction-red); }
.programme-quarter[data-tint="coral"]{ border-top-color: var(--coral); }
.programme-quarter[data-tint="gold"]{ border-top-color: var(--executive-gold); }
.pq-range{ font-family: var(--mono); font-size:11px; letter-spacing:0.06em; color: var(--lc-fg-softer, rgba(33,19,17,0.58)); }
.pq-name{ font-family: var(--display); font-weight:600; font-size: clamp(13px,1.6vw,16px); color: var(--lc-fg, var(--ink)); }

@media(max-width:700px){
  .programme-quarters{ grid-template-columns: repeat(2,1fr); gap: 22px 14px; }
  .programme-stats{ gap: 22px 36px; }
}

/* ===========================================================
   LIQUID CONTINUUM — single flowing gradient behind Trusted (07),
   Reach (08), Schedule a Call (09) and the Final CTA. One animated,
   oversized gradient + drifting blurred blobs sit on this wrapper;
   the four sections inside now paint with a transparent background
   so there is no visible seam between them, however tall the combined
   content gets on any given screen. Everything here is transform/
   background-position driven (no layout thrash) and scales purely off
   %, vw and vmax so it re-flows correctly at any viewport size.
=========================================================== */
.liquid-continuum{
  position:relative; overflow:hidden; isolation:isolate;
  background: #FFF3E4;
}
.liquid-continuum-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
/* Base flowing gradient — a genuinely LIGHT, water-like wash. Every stop
   lives in the pale/pastel register (no dark ink anchor at all) so the
   surface always reads as "light" while the hue keeps travelling —
   cream, blush, peach, apricot, gold, rose — like light moving across
   water. Dark ink text sits on top as the permanent, reliable
   complement (see the plain, static --lc-* tokens above: no runtime
   computation, so contrast can never silently fail). */
.liquid-continuum-bg::before{
  content:""; position:absolute; inset:-15% -15%;
  background: linear-gradient(125deg,
    #FFF9F1 0%, #FFE9D2 9%, #FFD9B8 19%, #FFC9A8 28%,
    #FFB89A 37%, #FFCE9E 46%, #FFE7B3 54%, #FFF6DE 62%,
    #FDEFE6 70%, #FFD9C4 79%, #FFC7AE 88%, #FFEAD6 95%, #FFF9F1 100%);
  background-size: 320% 320%;
  animation: liquidFlow 30s ease-in-out infinite;
}
@keyframes liquidFlow{
  0%{ background-position: 8% 22%; }
  50%{ background-position: 92% 78%; }
  100%{ background-position: 8% 22%; }
}
.continuum-blob{
  position:absolute; border-radius:50%; filter: blur(90px); will-change: transform;
}
.blob-1{
  width:60vw; height:60vw; left:-18%; top:2%;
  background: radial-gradient(circle, var(--conviction-red) 0%, transparent 70%);
  opacity:0.32; animation: continuumFloat1 26s ease-in-out infinite;
}
.blob-2{
  width:52vw; height:52vw; right:-16%; top:28%;
  background: radial-gradient(circle, var(--executive-gold) 0%, transparent 72%);
  opacity:0.28; animation: continuumFloat2 32s ease-in-out infinite;
}
.blob-3{
  width:44vw; height:44vw; left:20%; top:58%;
  background: radial-gradient(circle, #FF9D6B 0%, transparent 70%);
  opacity:0.26; animation: continuumFloat3 22s ease-in-out infinite;
}
.blob-4{
  width:50vw; height:50vw; right:-10%; top:82%;
  background: radial-gradient(circle, var(--coral) 0%, transparent 74%);
  opacity:0.2; animation: continuumFloat2 28s ease-in-out infinite reverse;
}
.blob-5{
  width:44vw; height:44vw; left:36%; top:38%;
  background: radial-gradient(circle, #FFFFFF 0%, transparent 70%);
  opacity:0.22; animation: continuumFloat3 30s ease-in-out infinite reverse;
}
@keyframes continuumFloat1{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(6%,4%) scale(1.12); } }
@keyframes continuumFloat2{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(-7%,5%) scale(1.08); } }
@keyframes continuumFloat3{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(-5%,-6%) scale(0.92); } }
.continuum-grain{
  position:absolute; inset:0; opacity:0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.liquid-continuum > section{ position:relative; z-index:1; background:transparent; }
@media (prefers-reduced-motion: reduce){
  .liquid-continuum-bg::before, .continuum-blob{ animation: none; }
}
@media(max-width:700px){
  .continuum-blob{ filter: blur(56px); }
}

/* ===========================================================
   FLOWING TEXT — headline + copy colors ride the same current as
   the liquid-continuum background, so text never sits static
   against a backdrop that never stops moving.

   .flow-text  → big standalone headlines: the glyphs are painted with a
   dark ink→rust→red→ink gradient (via background-clip:text) animated on
   the same clock as the background, so they visibly drift in sync with
   the backdrop without ever losing contrast (every stop is dark; only
   the hue shifts). Plain background-position keyframes only — no
   registered custom properties, no color-mix — so it renders identically
   on every browser that supports background-clip:text (all evergreen
   browsers, years now).

   .flow-copy  → supporting paragraphs/subheads: solid dark ink that
   gently breathes toward a warm clay tone and back on its own clock —
   two fixed colors animated directly, nothing computed at runtime.
=========================================================== */
@keyframes flowTextGradient{
  0%{ background-position: 8% 22%; }
  50%{ background-position: 92% 78%; }
  100%{ background-position: 8% 22%; }
}
.flow-text{
  background-image: linear-gradient(125deg,
    #211311 0%, #8F2E15 16%, #C1401C 32%, #FF4033 46%,
    #6b2410 60%, #211311 74%, #8F2E15 88%, #211311 100%);
  background-size: 320% 320%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important; -webkit-text-fill-color: transparent !important;
  animation: flowTextGradient 30s ease-in-out infinite;
}
@keyframes flowCopyTint{
  0%,100%{ color: var(--charcoal); }
  50%{ color: var(--clay); }
}
.flow-copy{
  color: var(--charcoal);
  animation: flowCopyTint 14s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .flow-text{ animation:none; background-position:50% 50%; }
  .flow-copy{ animation:none; }
}

/* ===========================================================
   TRUSTED BY
=========================================================== */
.trusted{
  position:relative; overflow:hidden;
  color: var(--lc-fg, var(--ink));
  padding: clamp(40px,6vh,60px) 0;
  text-align:center;
}
.trusted-atmos{
  position:absolute; inset:0; z-index:0; opacity:0.18; pointer-events:none;
  mix-blend-mode: multiply;
}
.trusted-atmos img{ width:100%; height:100%; object-fit:cover; }
.trusted > *:not(.trusted-atmos){ position:relative; z-index:1; }
.trusted .section-tag{ padding: 0 var(--gutter); }
.marquee{
  overflow:hidden; padding: 14px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.marquee-track{
  display:flex; width:max-content; gap: clamp(20px,3vw,32px); align-items:center;
  animation: marqueeScroll linear infinite; will-change: transform;
}
.marquee-1 .marquee-track{ padding: 6px 0; animation-duration: 34s; }
.marquee-2 .marquee-track{ animation-duration: 24s; animation-direction: reverse; }
.marquee:hover .marquee-track{ animation-play-state: paused; }
@keyframes marqueeScroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none; }
}
.logo-card{
  flex: 0 0 auto; width: clamp(128px,15vw,178px); height: 88px;
  display:flex; align-items:center; justify-content:center;
  background: var(--pure-white); border: 1px solid rgba(33,19,17,0.08);
  box-shadow: 0 8px 20px rgba(33,19,17,0.06);
  border-radius: 10px; padding: 16px 22px;
  transition: transform 0.4s var(--ease-weighted), box-shadow 0.4s var(--ease-weighted);
}
.logo-card img{
  max-width:100%; max-height:100%; object-fit:contain;
  filter: grayscale(1); opacity:0.62;
  transition: filter 0.4s var(--ease-weighted), opacity 0.4s var(--ease-weighted), transform 0.4s var(--ease-weighted);
}
.logo-card:hover{ transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,0.35); }
.logo-card:hover img{ filter:none; opacity:1; transform: scale(1.06); }
.marquee-2{ margin-top: 6px; }
.marquee-2 .marquee-track span{
  font-family: var(--mono); font-size:13px; letter-spacing:0.1em; color: var(--clay); white-space:nowrap;
}
.engagements-label{
  font-family: var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color: var(--lc-fg-faint, rgba(33,19,17,0.42)); margin: clamp(50px,7vh,80px) 0 26px;
}
.engagements{ display:flex; justify-content:center; gap: 24px; flex-wrap:wrap; padding: 0 var(--gutter); perspective: 1200px; }
.tape-card{
  background: var(--paper); color: var(--ink);
  font-family: var(--mono); font-size: 13px; padding: 16px 22px;
  box-shadow: 0 16px 34px rgba(0,0,0,0.3);
  display:flex; align-items:center; gap: 12px;
}
.tape-card img{ height: 22px; width:auto; display:block; }
.card-1{ transform: rotate(-3deg); }
.card-2{ transform: rotate(2deg); }

/* ===========================================================
   REACH — v7: living network orb + sector rail (redesigned)
=========================================================== */
.reach{
  position:relative; overflow:hidden; color: var(--lc-fg, var(--ink));
  padding: clamp(55px,8vh,85px) var(--gutter);
  display:grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(50px,7vw,110px); align-items:center;
  max-width: 1560px; margin: 0 auto;
}
/* v11 — the section now relies entirely on the shared .liquid-continuum
   wash behind it for background movement (same as Trusted/Schedule/CTA).
   An earlier version layered its own extra radial blobs + a large image
   on top of that, scoped to this section's own (max-width: 1560px) box
   rather than the full viewport — on any screen wider than ~1560px that
   produced a visible seam where the two backgrounds' edges didn't line
   up. Simplest fix that's guaranteed not to reintroduce that seam: don't
   give this section a second, independently-scoped background layer.
   The orb widget below gets its own contained glow instead — motion and
   richness, but scoped to content that's already centered correctly. */
.reach > *{ position:relative; z-index:1; }

.reach-orb-col{ display:flex; justify-content:center; }
.reach-orb{
  position:relative; width: min(100%, 360px); aspect-ratio: 1/1;
  display:flex; align-items:center; justify-content:center;
}
/* Contained glow pulse — sits fully inside the already-centered orb
   widget, so unlike a full-section background layer it can never drift
   out of alignment with anything at any viewport width. */
.reach-orb::after{
  content:""; position:absolute; inset:-14%; border-radius:50%; z-index:-1;
  background: radial-gradient(circle, rgba(193,64,28,0.28) 0%, rgba(255,201,77,0.16) 45%, transparent 72%);
  filter: blur(30px);
  animation: reachOrbGlow 8s ease-in-out infinite;
}
@keyframes reachOrbGlow{
  0%,100%{ transform: scale(1); opacity:0.85; }
  50%{ transform: scale(1.1); opacity:1; }
}
/* This widget stacks a lot of detail — spinning ring, big numeral,
   suffix, sub-label — onto one spot, so it gets a solid white disc
   behind it (independent of the moving gradient) to keep every layer
   crisp instead of competing with the backdrop. */
.reach-orb::before{
  content:""; position:absolute; inset:2%; border-radius:50%;
  background: var(--pure-white);
  box-shadow: 0 30px 70px rgba(33,19,17,0.16), 0 4px 16px rgba(33,19,17,0.08);
}
.reach-orb-ring{
  position:absolute; inset: 4%; border-radius:50%;
  border: 1px dashed var(--lc-border, rgba(33,19,17,0.18));
  animation: reachRingSpin 60s linear infinite;
}
@keyframes reachRingSpin{ to{ transform: rotate(360deg); } }
.reach-orb-label{
  position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center;
}
.reach-orb-num{ font-family: var(--display); font-weight:700; font-size: clamp(48px,6.6vw,68px); color: var(--lc-fg, var(--ink)); line-height:1; }
.reach-orb-suffix{ font-family: var(--display); font-weight:700; font-size: clamp(20px,2.4vw,26px); color: var(--executive-gold); margin-left:2px; }
.reach-orb-sub{
  font-family: var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color: var(--lc-fg-softer, rgba(33,19,17,0.58)); margin-top:10px;
}
.reach-orbit-tag{
  position:absolute; z-index:3;
  font-family: var(--mono); font-size:11px; letter-spacing:0.05em; text-transform:uppercase;
  background: var(--pure-white); color: var(--ink);
  padding: 10px 16px; border-radius:999px; box-shadow: 0 14px 30px rgba(0,0,0,0.35);
  border-left: 3px solid var(--executive-gold);
}
.reach-tag-1{ top: 2%; right: -2%; transform: rotate(-4deg); }
.reach-tag-2{ bottom: 6%; left: -6%; transform: rotate(3deg); border-left-color: var(--conviction-red); }

.reach-title{
  font-family: var(--display); font-weight:700; font-size: clamp(30px,4.6vw,56px); line-height:1.1; margin-bottom: 22px;
}
.reach-support{ font-size:17px; line-height:1.65; color: var(--lc-fg-soft, rgba(33,19,17,0.76)); max-width:520px; margin-bottom: 34px; }

.reach-sectors{ display:flex; flex-direction:column; max-width:520px; border-top: 1px solid var(--lc-border, rgba(33,19,17,0.18)); }
.reach-sector{
  display:flex; align-items:center; gap:18px; padding: 16px 2px;
  border-bottom: 1px solid var(--lc-border, rgba(33,19,17,0.18));
  transition: padding-left 0.35s var(--ease-weighted), background 0.35s;
}
.reach-sector:hover{ padding-left: 12px; background: var(--lc-surface, rgba(255,255,255,0.55)); }
.rs-index{ font-family: var(--mono); font-size:12px; color: var(--rust); flex-shrink:0; }
.rs-name{ font-family: var(--display); font-weight:600; font-size: clamp(16px,1.8vw,20px); color: var(--lc-fg, var(--ink)); }

@media(max-width: 860px){
  .reach{ grid-template-columns:1fr; text-align:center; }
  .reach-support{ margin-left:auto; margin-right:auto; }
  .reach-sectors{ margin: 0 auto; text-align:left; }
  .reach-orbit-tag{ display:none; }
}

/* ===========================================================
   SCHEDULE A CALL — real, wired booking form (09)
   Day chips + time-of-day slots + contact fields feed a live summary
   line and two working submit paths: a prefilled mailto (works with
   zero backend) and a prefilled WhatsApp deep link that stays in sync
   with the form as the person fills it in. Sits inside .liquid-continuum
   so it shares the same flowing base as Trusted/Reach/CTA.
=========================================================== */
.schedule{
  position:relative; padding: clamp(100px,14vh,160px) var(--gutter);
}
.schedule-inner{ max-width: 940px; margin:0 auto; }
.schedule-head{ text-align:center; margin-bottom: clamp(40px,6vh,64px); }
.schedule-title{
  font-family: var(--editorial); font-style:italic; font-weight:400;
  font-size: clamp(30px,4.6vw,52px); line-height:1.12; color: var(--lc-fg, var(--ink));
  margin-bottom: 18px;
}
.schedule-sub{ font-size:16px; line-height:1.65; color: var(--lc-fg-soft, rgba(33,19,17,0.76)); max-width:520px; margin:0 auto; }

/* ===========================================================
   CALENDLY-STYLE WIDGET — v11
   Deliberately broken out of the Liquid Continuum: this is the one
   surface on the page that stays a fixed, solid-white card regardless
   of what the animated gradient behind it is doing, because a booking
   form has to stay legible and typeable at every instant, not just the
   ones where the backdrop happens to be dark. Two-tone rail (warm paper
   left rail + pure white content) with brand-gradient accents, custom
   step pills, square-radius day cells and pill time slots — built from
   scratch rather than skinning a stock date-picker.
=========================================================== */
.calendly{
  position:relative;
  display:grid; grid-template-columns: 264px 1fr;
  background: var(--pure-white);
  border: 1px solid rgba(33,19,17,0.08);
  border-radius: 26px;
  box-shadow: 0 40px 90px rgba(26,13,8,0.35), 0 4px 18px rgba(26,13,8,0.12);
  overflow: hidden;
  align-items: stretch;
}
/* signature top accent — the same rust→red→gold sweep used elsewhere on
   the site as a section divider, here signalling "this card belongs to
   Walk The Talk" even though its surface has gone light. */
.calendly::before{
  content:""; position:absolute; top:0; left:0; right:0; height:5px; z-index:2;
  background: linear-gradient(90deg, var(--rust), var(--conviction-red), var(--executive-gold));
}

/* ---- Left rail: warm paper tone, separates cleanly from the white
   content pane without needing a heavy border ---- */
.calendly-info{
  position:relative;
  padding: clamp(30px,3vw,38px) clamp(24px,2.6vw,30px) clamp(24px,3vw,30px);
  background: linear-gradient(165deg, var(--paper-warm) 0%, var(--paper) 60%);
  border-right: 1px solid rgba(33,19,17,0.07);
  display:flex; flex-direction:column; min-width:0;
}
.calendly-avatar{
  width:46px; height:46px; border-radius:50%; object-fit:cover; margin-bottom:14px;
  box-shadow: 0 0 0 3px var(--pure-white), 0 0 0 4px rgba(193,64,28,0.25);
}
.calendly-info-host{ font-family: var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color: var(--clay); }
.calendly-info-title{
  font-family: var(--display); font-weight:700; font-size: clamp(20px,2.2vw,24px);
  color: var(--ink); margin: 6px 0 18px; word-break: break-word;
}

/* ---- Custom step progress — reads the existing data-step attribute on
   #calendly, no extra JS. ---- */
.calendly-steps{ display:flex; align-items:center; gap:8px; margin-bottom:22px; }
.calendly-step{
  display:flex; align-items:center; gap:7px;
  font-family: var(--mono); font-size:10.5px; letter-spacing:0.04em; text-transform:uppercase;
  color: var(--stone); transition: color 0.3s;
}
.calendly-step-dot{
  width:18px; height:18px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--display); font-size:10px; font-weight:700;
  background: var(--pure-white); border: 1.5px solid var(--stone); color: var(--stone);
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.calendly-step-line{ width:16px; height:1.5px; background: rgba(161,91,59,0.3); flex-shrink:0; }
.calendly[data-step="date"] .calendly-step[data-for="date"],
.calendly[data-step="details"] .calendly-step[data-for="date"],
.calendly[data-step="confirm"] .calendly-step[data-for="date"]{ color: var(--rust); }
.calendly[data-step="date"] .calendly-step[data-for="date"] .calendly-step-dot{
  background: var(--rust); border-color: var(--rust); color: var(--pure-white);
}
.calendly[data-step="details"] .calendly-step[data-for="date"] .calendly-step-dot,
.calendly[data-step="confirm"] .calendly-step[data-for="date"] .calendly-step-dot{
  background: var(--pure-white); border-color: var(--rust); color: var(--rust);
}
.calendly[data-step="details"] .calendly-step[data-for="details"],
.calendly[data-step="confirm"] .calendly-step[data-for="details"]{ color: var(--rust); }
.calendly[data-step="details"] .calendly-step[data-for="details"] .calendly-step-dot{
  background: var(--rust); border-color: var(--rust); color: var(--pure-white);
}

.calendly-info-meta{ display:flex; flex-direction:column; gap:11px; margin-bottom:18px; }
.calendly-info-meta li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:13px; line-height:1.4; color: var(--charcoal);
}
.calendly-info-meta svg{
  width:16px; height:16px; flex-shrink:0; margin-top:1px;
  fill:none; stroke: var(--rust); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.calendly-info-desc{ font-size:13px; line-height:1.6; color: var(--stone); }
.calendly-recap{
  margin-top:auto; padding-top:20px; border-top: 1px dashed rgba(33,19,17,0.16);
}
.calendly-recap-date, .calendly-recap-time{
  font-family: var(--editorial); font-style:italic; font-size:15px; color: var(--ink); line-height:1.4;
  word-break: break-word;
}
.calendly-recap-edit{
  margin-top:10px; background:none; border:none; padding:0; cursor:pointer;
  font-family: var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  color: var(--rust); text-decoration: underline; text-underline-offset:3px;
}

/* ---- Step 1: calendar + time list ---- */
.calendly-picker{
  display:grid; grid-template-columns: 1.15fr 1fr; min-width:0;
}
.calendly[data-step="details"] .calendly-picker,
.calendly[data-step="confirm"] .calendly-picker{ display:none; }
.calendly-calendar{
  padding: clamp(24px,2.8vw,32px); border-right: 1px solid rgba(33,19,17,0.08); min-width:0;
}
.cal-head-label{
  font-family: var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color: var(--stone); margin-bottom:14px;
}
.cal-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
.cal-nav{ display:flex; align-items:center; gap:10px; }
.cal-nav-btn{
  width:28px; height:28px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background: var(--paper-warm); border:1px solid rgba(33,19,17,0.1); cursor:pointer;
  transition: background 0.25s, border-color 0.25s;
}
.cal-nav-btn:hover:not(:disabled){ background: rgba(255,201,77,0.28); border-color: var(--executive-gold); }
.cal-nav-btn:disabled{ opacity:0.3; cursor:not-allowed; }
.cal-nav-btn svg{ width:14px; height:14px; fill:none; stroke: var(--ink); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.cal-month-label{ font-family: var(--display); font-weight:600; font-size: clamp(12px,3vw,15px); color: var(--ink); min-width: 84px; text-align:center; white-space: nowrap; }
.cal-weekdays{
  display:grid; grid-template-columns: repeat(7,1fr); gap:4px; margin: 14px 0 6px;
  font-family: var(--mono); font-size:10px; text-transform:uppercase; text-align:center; color: var(--stone);
}
.cal-grid{ display:grid; grid-template-columns: repeat(7,1fr); gap:5px; }
.cal-day{
  aspect-ratio: 1/1; display:flex; align-items:center; justify-content:center;
  border-radius:10px; border:none; background: transparent; cursor:pointer;
  font-family: var(--body); font-size:13px; font-weight:500; color: var(--charcoal);
  transition: background 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.cal-day:hover:not(:disabled):not(.is-empty){ background: var(--paper-warm); transform: translateY(-1px); }
.cal-day:disabled, .cal-day.is-empty{ visibility:hidden; pointer-events:none; }
.cal-day.is-past, .cal-day.is-unavailable{
  color: rgba(33,19,17,0.22); cursor:not-allowed; visibility:visible; pointer-events:none;
}
.cal-day.is-today{ box-shadow: inset 0 0 0 1.5px var(--rust); color: var(--rust); font-weight:700; }
.cal-day.active{
  background: linear-gradient(150deg, var(--conviction-red), var(--rust-dim));
  color: var(--pure-white); box-shadow: 0 10px 22px rgba(255,64,51,0.32);
  font-weight:700;
}

.calendly-times{ padding: clamp(24px,2.8vw,32px); min-width:0; }
.cal-times-list{
  display:flex; flex-direction:column; gap:8px; max-height: 320px; overflow-y:auto;
  padding-right:4px; scrollbar-width: thin;
}
.cal-time-slot{
  width:100%; text-align:left; padding: 12px 16px; border-radius: 12px;
  background: var(--paper); border: 1px solid rgba(33,19,17,0.1);
  color: var(--ink); font-family: var(--body); font-size:14px; font-weight:600;
  display:flex; align-items:center; gap:10px;
  cursor:pointer; transition: background 0.25s var(--ease-weighted), border-color 0.25s, transform 0.25s var(--ease-weighted), box-shadow 0.25s;
}
.cal-time-slot::before{
  content:""; width:7px; height:7px; border-radius:50%; flex-shrink:0;
  background: var(--rust); opacity:0.55; transition: background 0.25s, opacity 0.25s;
}
.cal-time-slot:hover{ transform: translateY(-2px); border-color: var(--executive-gold); box-shadow: 0 8px 18px rgba(33,19,17,0.08); }
.cal-time-slot.active{
  background: linear-gradient(150deg, var(--executive-gold), var(--rust));
  border-color: transparent; color: var(--ink);
  box-shadow: 0 12px 26px rgba(255,201,77,0.4);
}
.cal-time-slot.active::before{ background: var(--pure-white); opacity:1; }
.cal-times-empty{ font-size:13px; color: var(--stone); line-height:1.6; }

/* ---- Step 2: details form ---- */
.calendly-details{ padding: clamp(24px,3.2vw,40px); min-width:0; background: var(--pure-white); }
.calendly[data-step="date"] .calendly-details,
.calendly[data-step="confirm"] .calendly-details{ display:none; }
.calendly-back{
  display:inline-flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer;
  font-family: var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  color: var(--stone); padding:0; margin-bottom:18px; transition: color 0.25s;
}
.calendly-back:hover{ color: var(--rust); }
.calendly-back svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

/* ---- Step 3: confirmation ---- */
.calendly-confirm{
  grid-column: 1 / -1; padding: clamp(44px,6vw,68px) clamp(24px,4vw,40px);
  text-align:center; display:flex; flex-direction:column; align-items:center;
  background: linear-gradient(180deg, var(--pure-white) 0%, var(--paper-warm) 100%);
}
.calendly[data-step="date"] .calendly-confirm,
.calendly[data-step="details"] .calendly-confirm{ display:none; }
.calendly[data-step="confirm"] .calendly-info{ display:none; }
.calendly-confirm-check{
  position:relative;
  width:60px; height:60px; border-radius:50%; margin-bottom:22px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(150deg, var(--executive-gold), var(--conviction-red));
  box-shadow: 0 16px 34px rgba(255,64,51,0.3);
}
.calendly-confirm-check::after{
  content:""; position:absolute; inset:-7px; border-radius:50%;
  border: 1.5px solid rgba(193,64,28,0.35);
  animation: confirmRing 2.4s ease-out infinite;
}
@keyframes confirmRing{
  0%{ transform: scale(0.9); opacity:0.9; }
  100%{ transform: scale(1.35); opacity:0; }
}
.calendly-confirm-check svg{ width:27px; height:27px; fill:none; stroke: var(--pure-white); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.calendly-confirm-title{
  font-family: var(--editorial); font-style:italic; font-weight:400; color: var(--ink);
  font-size: clamp(26px,3.4vw,36px); margin-bottom:10px;
}
.calendly-confirm-sub{ font-size:15px; color: var(--charcoal); max-width:440px; margin-bottom:26px; line-height:1.6; }
.calendly-confirm-card{
  background: var(--pure-white); border: 1px solid rgba(33,19,17,0.1);
  border-left: 3px solid var(--rust);
  border-radius: 14px; padding: 18px 24px; margin-bottom: 28px; min-width: min(320px,100%);
  box-shadow: 0 14px 30px rgba(33,19,17,0.08);
}
.calendly-confirm-card p{ font-family: var(--display); font-weight:600; font-size:15px; color: var(--ink); word-break: break-word; }
.calendly-confirm-card p + p{ margin-top:6px; color: var(--charcoal); font-weight:400; font-family: var(--body); }
.calendly-confirm-actions{ justify-content:center; }

@media(max-width: 900px){
  .calendly{ grid-template-columns: 1fr; }
  .calendly-info{ border-right:none; border-bottom: 1px solid rgba(33,19,17,0.08); flex-direction:row; flex-wrap:wrap; align-items:center; gap: 10px 16px; }
  .calendly-avatar{ margin-bottom:0; }
  .calendly-info-title{ margin: 0; flex-basis:100%; }
  .calendly-steps{ flex-basis:100%; margin-bottom:6px; }
  .calendly-info-meta{ flex-direction:row; flex-wrap:wrap; gap: 10px 18px; margin-bottom:0; }
  .calendly-info-desc{ flex-basis:100%; }
  .calendly-recap{ flex-basis:100%; margin-top:12px; padding-top:12px; }
  .calendly-picker{ grid-template-columns: 1fr; }
  .calendly-calendar{ border-right:none; border-bottom: 1px solid rgba(33,19,17,0.08); }
  .cal-times-list{ max-height:none; }
}

/* ---- Contact fields ---- */
.schedule-fields{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-top: 4px; }
.schedule-field-wide{ grid-column: 1 / -1; }
.schedule-field{ display:flex; flex-direction:column; gap:8px; position:relative; }
.schedule-field label{
  font-family: var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  color: var(--stone);
}
.schedule-field label em{ font-style:normal; opacity:0.7; }
.schedule-field input, .schedule-field textarea{
  font-family: var(--body); font-size:15px; color: var(--ink);
  background: var(--paper); border: 1px solid rgba(33,19,17,0.14);
  border-radius: 11px; padding: 12px 14px; resize: vertical;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.schedule-field input::placeholder, .schedule-field textarea::placeholder{ color: var(--stone); }
.schedule-field input:focus, .schedule-field textarea:focus{
  outline:none; border-color: var(--executive-gold); background: var(--pure-white);
  box-shadow: 0 0 0 3px rgba(255,201,77,0.22);
}
.schedule-field.has-error input{ border-color: var(--conviction-red); }
.schedule-error{
  font-family: var(--mono); font-size:11px; color: var(--conviction-red); min-height:14px; display:block;
}

/* ---- Live summary line ---- */
.schedule-summary{
  display:flex; align-items:center; gap:12px;
  font-size:14px; color: var(--charcoal); line-height:1.5;
  background: var(--paper-warm); border: 1px dashed rgba(161,91,59,0.35);
  border-radius: 12px; padding: 14px 18px; margin-bottom: 26px;
}
.schedule-summary strong{ color: var(--ink); font-weight:600; }
.schedule-summary-dot{
  flex-shrink:0; width:9px; height:9px; border-radius:50%; background: var(--rust);
  box-shadow: 0 0 0 4px rgba(193,64,28,0.16);
  animation: summaryPulse 2.2s ease-in-out infinite;
}
@keyframes summaryPulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.4; } }

.schedule-actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.schedule-submit{ border:none; cursor:pointer; font: inherit; position:relative; overflow:hidden; }
.schedule-submit .schedule-submit-label{ display:inline-flex; align-items:center; gap:8px; }
.schedule-submit.is-sent{ background: #25D366; }
.schedule-note{ font-size:12px; color: var(--stone); margin-top:16px; }

@media(max-width:640px){
  .schedule-fields{ grid-template-columns: 1fr; }
}

/* ===========================================================
   FINAL CTA
=========================================================== */
/* v9 — the site's signature closing moment. The old ember-glow/metaball
   image pair is gone; in its place a rotating conic "beacon" plus a
   pulsing gold-red spotlight sit directly behind the headline, giving this
   section a look distinct from Reach's slower drifting orbs and pulling
   the eye straight to the CTA. Pure CSS, transform/opacity only. */
.final-cta{
  position:relative; overflow:hidden;
  color: var(--lc-fg, var(--ink));
  padding: clamp(60px,9vh,110px) var(--gutter);
  text-align:center;
}
.final-cta-atmos{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.final-cta-beam{
  position:absolute; left:50%; top:40%; width:78vmax; height:78vmax;
  transform: translate(-50%,-50%) rotate(0deg);
  background: conic-gradient(from 0deg, var(--conviction-red), var(--executive-gold), var(--rust), var(--coral), var(--conviction-red));
  filter: blur(130px) saturate(1.3);
  opacity:0.32;
  animation: ctaBeamSpin 42s linear infinite;
  will-change: transform;
}
@keyframes ctaBeamSpin{ to{ transform: translate(-50%,-50%) rotate(360deg); } }
.final-cta-pulse{
  position:absolute; left:50%; top:36%; width:44vmax; height:44vmax;
  transform: translate(-50%,-50%) scale(1);
  background: radial-gradient(circle, rgba(255,201,77,0.55) 0%, rgba(255,64,51,0.28) 42%, transparent 72%);
  filter: blur(50px);
  animation: ctaPulse 6s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes ctaPulse{
  0%,100%{ transform: translate(-50%,-50%) scale(1); opacity:0.7; }
  50%{ transform: translate(-50%,-50%) scale(1.14); opacity:1; }
}
.final-cta > *:not(.final-cta-atmos){ position:relative; z-index:1; }
@media(max-width:700px){
  .final-cta-beam{ width:92vmax; height:92vmax; filter: blur(56px) saturate(1.3); }
  .final-cta-pulse{ width:62vmax; height:62vmax; filter: blur(28px); }
}
.final-word{
  font-family: var(--display); font-weight:700;
  font-size: clamp(34px,8vw,120px); line-height:0.98; letter-spacing:-0.01em;
  margin-bottom: 30px;
}
.final-word .fw-char{ display:inline-block; }
.final-word .fw-word{ display:inline-block; }
.final-word .fw-nowrap{ display:inline-flex; flex-wrap:nowrap; white-space:nowrap; gap:0.14em; }
/* The brand phrase — "WALK THE TALK" — gets its own permanent solid-red
   block per word (independent of the flow-copy breathing color on the
   rest of the headline), a fixed, high-contrast graphic beat matching
   the brand's boxed-headline language used elsewhere on the site. */
.final-word .fw-nowrap .fw-word{
  background: var(--conviction-red);
  color: var(--pure-white);
  padding: 0.04em 0.22em 0.08em;
  border-radius: 3px;
  overflow: hidden;
}
.final-word .fw-nowrap .fw-word .fw-char{ color: var(--pure-white); }
.final-sub{ font-size:17px; color: var(--lc-fg-soft, rgba(33,19,17,0.76)); max-width:560px; margin: 0 auto clamp(40px,6vh,60px); }
.final-buttons{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }

.btn{
  font-family: var(--mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  padding: 17px 30px; border-radius: 999px; display:inline-block;
}
.btn-primary{ background: var(--conviction-red); color: var(--pure-white); }
.btn-whatsapp{ background: #25D366; color: #08240F; }
.btn-ghost{ border: 1px solid var(--lc-border, rgba(33,19,17,0.18)); color: var(--lc-fg, var(--ink)); }
.btn-resource{
  display:inline-flex; align-items:center; gap:9px;
  background: var(--pure-white);
  border: 1px solid rgba(33,19,17,0.1);
  color: var(--ink);
  box-shadow: 0 10px 26px rgba(33,19,17,0.1);
  transition: background 0.35s var(--ease-weighted), color 0.35s var(--ease-weighted), border-color 0.35s, box-shadow 0.35s, transform 0.35s;
}
.btn-resource svg{ width:15px; height:15px; stroke: var(--rust); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition: stroke 0.35s; }
.btn-resource:hover{
  background: var(--executive-gold); color: var(--ink); border-color: var(--executive-gold);
  transform: translateY(-2px); box-shadow: 0 16px 32px rgba(255,201,77,0.4);
}
.btn-resource:hover svg{ stroke: var(--ink); }

/* ===========================================================
   FOOTER
=========================================================== */
.footer{
  background: #170D0B; color: rgba(255,255,255,0.7);
  padding: 60px var(--gutter) 30px;
}
.footer-top{ display:flex; flex-direction:column; gap:14px; margin-bottom:36px; }
.footer-mark{ display:flex; align-items:center; gap:10px; }
.footer-mark-img{ height: clamp(48px,6vw,64px); width:auto; display:block; }
.footer-tagline{ font-family: var(--editorial); font-style:italic; font-size:26px; color: rgba(255,255,255,0.55); }
.footer-contact{ display:flex; flex-wrap:wrap; gap: 14px 28px; margin-bottom: 32px; }
.footer-contact-item{
  display:flex; align-items:center; gap:9px;
  font-family: var(--mono); font-size:12px; letter-spacing:0.03em; color: rgba(255,255,255,0.7);
  transition: color 0.3s;
}
.footer-contact-item svg{ width:15px; height:15px; stroke: currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.footer-contact-item:hover{ color: var(--executive-gold); }
.footer-contact-copy{
  background:none; border:none; padding:0; cursor:pointer; font: inherit; position:relative;
}
.footer-copy-icon{ opacity:0.5; transition: opacity 0.3s, transform 0.3s; }
.footer-contact-copy:hover .footer-copy-icon{ opacity:1; }
.footer-contact-copy.is-copied{ color: var(--executive-gold); }
.footer-contact-copy.is-copied .footer-copy-icon{ opacity:1; transform: scale(1.15); }
.footer-contact-copy::after{
  content: "Copied!"; position:absolute; left:0; top: calc(100% + 6px);
  font-family: var(--mono); font-size:10px; letter-spacing:0.05em; text-transform:uppercase;
  color: var(--ink); background: var(--executive-gold);
  padding: 4px 9px; border-radius:6px; white-space:nowrap;
  opacity:0; transform: translateY(-4px); pointer-events:none;
  transition: opacity 0.25s, transform 0.25s;
}
.footer-contact-copy.is-copied::after{ opacity:1; transform: translateY(0); }
.footer-nav{ display:flex; flex-wrap:wrap; gap: 22px; margin-bottom: 36px; }
.footer-nav a{ font-family: var(--mono); font-size:13px; letter-spacing:0.06em; text-transform:uppercase; color: rgba(255,255,255,0.55); }
.footer-nav a:hover{ color: var(--executive-gold); }
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap: 10px 20px;
  border-top: 1px solid rgba(255,255,255,0.1); padding-top: 22px;
  font-family: var(--mono); font-size:11px; color: rgba(255,255,255,0.4);
}
.footer-powered a{ color: rgba(255,255,255,0.6); text-decoration: underline; text-underline-offset:2px; transition: color 0.3s; }
.footer-powered a:hover{ color: var(--executive-gold); }
.footprint-btn svg{ width:16px; height:16px; stroke: currentColor; fill:none; stroke-width:2; stroke-linecap:round; transform: rotate(180deg); }
.footprint-btn{ color: rgba(255,255,255,0.5); transition: color 0.3s, transform 0.3s; }
.footprint-btn:hover{ color: var(--executive-gold); transform: translateY(-3px); }

/* ===========================================================
   CURSOR
=========================================================== */
.cursor-dot{
  position: fixed; top:0; left:0; width:14px; height:14px; border-radius:50%;
  background: var(--conviction-red); pointer-events:none; z-index: 997;
  transform: translate(-50%,-50%); mix-blend-mode: difference;
  display:none;
}
@media(hover:hover) and (pointer:fine){ .cursor-dot{ display:block; } }

/* ===========================================================
   REVEAL UTILITY (used by JS-driven ScrollTrigger reveals)
=========================================================== */
.reveal-up{ opacity:0; transform: translateY(50px); }

/* ===========================================================
   REDUCED MOTION
=========================================================== */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .stair-rail{ display:none; }
}

/* ===========================================================
   RESPONSIVE
=========================================================== */
@media(max-width: 700px){
  .proof-grid{ grid-template-columns:1fr; gap: 20px; }
  .step-1,.step-2,.step-3{ margin-bottom:0; }
  .final-buttons{ flex-direction:column; }
}
/* Remove lines/borders under the flagship programme stats */
.programme-stats {
  border-bottom: none !important;
  box-shadow: none !important;
}

.programme-stats::after,
.programme-stats::before {
  display: none !important;
}

/* If you meant the line below the proof strip stats earlier on the page */
.proof-line {
  display: none !important;
}

/* CSS Additions for Vertical Text & Smooth Expanding Flex Behaviour */
@layer utilities {
  /* Ensure writing-mode is supported smoothly across standard engines */
  .writing-mode-vertical {
    writing-mode: vertical-lr;
  }
}

/* Fallback or custom tuning for smooth accordion expansion */
.accordion-panel {
  transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* On smaller screens, switch panels to horizontal blocks instead of vertical strips */
@media (max-width: 1023px) {
  .accordion-panel {
    min-height: 120px;
  }
  .accordion-panel:hover {
    min-height: 280px;
  }
}


/* Added By Royston For Cards */
/* =========================================================
   SPLIT NAVIGATION
   ========================================================= */

.pm-split-nav {
  --pm-height: 100vh;
  --pm-transition: 0.75s cubic-bezier(.77,0,.18,1);

  width: 100%;
  height: var(--pm-height);
  min-height: 600px;

  margin: 0;
  padding: 0;

  overflow: hidden;

  font-family: "Manrope", Arial, sans-serif;

  background: #111;
}


/* =========================================================
   PANELS WRAPPER
   ========================================================= */

.pm-panels {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: row;

  overflow: hidden;
}


/* =========================================================
   INDIVIDUAL PANEL
   ========================================================= */

.pm-panel {
  position: relative;

  height: 100%;

  flex: 1 1 0%;

  min-width: 0;

  overflow: hidden;

  display: block;

  color: #fff;
  text-decoration: none;

  cursor: pointer;

  transition:
    flex var(--pm-transition),
    filter var(--pm-transition);
}


/* ACTIVE PANEL */

.pm-panel.active {
  flex: 3.8 1 0%;
}


/* =========================================================
   BACKGROUND IMAGE
   ========================================================= */

.pm-panel-bg {
  position: absolute;
  inset: 0;

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  transform: scale(1.02);

  transition:
    transform 1.2s cubic-bezier(.2,.65,.2,1),
    filter var(--pm-transition);
}




.pm-panel-home .pm-panel-bg {
  background: var(--conviction-red);
}

.pm-panel-about .pm-panel-bg {
  background: var(--executive-gold);
}

.pm-panel-work .pm-panel-bg {
  background: var(--coral);
}

.pm-panel-contact .pm-panel-bg {
  background: var(--pure-white);
}


/* =========================================================
   TEXT COLOR STATES: WHITE WHEN CLOSED, BLACK WHEN OPEN
   ========================================================= */

/* 1. Closed state: Vertical label text is always white across all panels */
.pm-panel:not(.active) .pm-panel-label span {
  color: var(--pure-white);
}

.pm-panel:not(.active):hover .pm-panel-label span {
  color: var(--pure-white);
  transform: rotate(180deg) translateY(6px);
}

/* 2. Active state: All content text inside ANY opened card turns to black (--ink) */
.pm-panel.active .pm-content-inner h2,
.pm-panel.active .pm-content-inner p,
.pm-panel.active .pm-content-inner .pm-eyebrow {
  color: var(--ink);
}

.pm-panel.active .pm-content-inner .pm-arrow {
  color: var(--ink);
  border-color: rgba(33, 19, 17, 0.3);
}

.pm-panel.active .pm-content-inner .pm-arrow:hover {
  background: var(--ink);
  color: var(--pure-white);
}

/* 3. Inner card wrapper adaptation for dark text readability on solid backgrounds */
.pm-panel.active .pm-content-inner {
  border-color: rgba(33, 19, 17, 0.15);
  background: rgba(255, 252, 250, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 25px 80px rgba(33, 19, 17, 0.08);
}

.pm-panel.active .pm-content-inner::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(33, 19, 17, 0.2),
    transparent
  );
}

/* Remove dark gradient overlays since we are using flat solid colors */
.pm-panel .pm-overlay {
  background: transparent;
  transition: background 0.35s ease;
}

.pm-panel:not(.active) .pm-overlay {
  background: rgba(33, 19, 17, 0.12);
}

.pm-panel:not(.active):hover {
  filter: brightness(0.95);
}
.pm-panel:not(.active) .pm-overlay {
  background: rgba(33, 19, 17, 0.12);
}

/* Hover state enhancements for solid panels */
.pm-panel:not(.active):hover {
  filter: brightness(0.95);
}

/* =========================================================
   IMAGE OVERLAY
   ========================================================= */

.pm-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.10) 0%,
      rgba(0,0,0,0.20) 45%,
      rgba(0,0,0,0.68) 100%
    );

  transition:
    background var(--pm-transition);
}


/* Darker collapsed panels */

.pm-panel:not(.active) .pm-overlay {
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.28),
      rgba(0,0,0,0.45)
    );
}


/* =========================================================
   PANEL DIVIDER
   ========================================================= */

.pm-panel:not(:last-child)::after {
  content: "";

  position: absolute;

  top: 0;
  right: 0;

  width: 1px;
  height: 100%;

  background: rgba(255,255,255,0.20);

  z-index: 5;
}


/* =========================================================
   COLLAPSED LABEL
   ========================================================= */

.pm-panel-label {
  position: absolute;

  inset: 0;

  z-index: 10;

  display: flex;

  align-items: center;
  justify-content: center;

  pointer-events: none;

  opacity: 1;

  transition:
    opacity .35s ease,
    transform .65s cubic-bezier(.77,0,.18,1);
}


.pm-panel-label span {

  font-family: "Manrope", Arial, sans-serif;

  font-size: clamp(26px, 3vw, 42px);

  font-weight: 300;

  line-height: 1;

  letter-spacing: -0.04em;

  white-space: nowrap;

  writing-mode: vertical-rl;

  text-orientation: mixed;

  transform: rotate(180deg);

  color: rgba(255,255,255,0.90);

  transition:
    opacity .35s ease,
    transform .55s cubic-bezier(.77,0,.18,1);
}


/* Hide vertical label on active panel */

.pm-panel.active .pm-panel-label {
  opacity: 0;
}


/* =========================================================
   ACTIVE CONTENT
   ========================================================= */

.pm-panel-content {

  position: absolute;

  inset: 0;

  z-index: 8;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: clamp(30px, 6vw, 90px);

  opacity: 0;

  visibility: hidden;

  transform: translateX(40px);

  transition:
    opacity .45s ease .15s,
    transform .75s cubic-bezier(.77,0,.18,1),
    visibility 0s linear .75s;

  pointer-events: none;
}


.pm-panel.active .pm-panel-content {

  opacity: 1;

  visibility: visible;

  transform: translateX(0);

  transition:
    opacity .55s ease .20s,
    transform .75s cubic-bezier(.77,0,.18,1),
    visibility 0s linear 0s;

  pointer-events: auto;
}


/* =========================================================
   CONTENT INNER
   ========================================================= */

.pm-content-inner {

  width: min(100%, 620px);

  position: relative;

  padding: clamp(28px, 4vw, 55px);

  border: 1px solid rgba(255,255,255,0.72);

  border-radius: 7px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.10),
      rgba(255,255,255,0.025)
    );

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow:
    0 25px 80px rgba(0,0,0,0.22);

  overflow: hidden;
}


/* subtle shine */

.pm-content-inner::before {

  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.9),
      transparent
    );

  opacity: .65;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.pm-eyebrow {

  display: block;

  margin-bottom: 25px;

  font-size: 11px;

  font-weight: 500;

  letter-spacing: .18em;

  text-transform: uppercase;

  color: rgba(255,255,255,.65);
}


/* =========================================================
   HEADING
   ========================================================= */

.pm-content-inner h2 {

  margin: 0 0 22px;

  padding: 0;

  font-family: "Manrope", Arial, sans-serif;

  font-size: clamp(38px, 5vw, 72px);

  line-height: .95;

  font-weight: 300;

  letter-spacing: -.055em;

  color: #fff;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.pm-content-inner p {

  max-width: 430px;

  margin: 0;

  font-family: "Manrope", Arial, sans-serif;

  font-size: clamp(15px, 1.2vw, 18px);

  line-height: 1.55;

  font-weight: 300;

  color: rgba(255,255,255,.78);
}


/* =========================================================
   ARROW
   ========================================================= */

.pm-arrow {

  display: flex;

  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  margin-top: 35px;

  border: 1px solid rgba(255,255,255,.5);

  border-radius: 50%;

  font-size: 20px;

  color: #fff;

  transition:
    background .3s ease,
    color .3s ease,
    transform .3s ease;
}


.pm-panel:hover .pm-arrow {

  transform: translate(3px,-3px);

  background: #fff;

  color: #111;
}


/* =========================================================
   HOVER EFFECT ON COLLAPSED PANELS
   ========================================================= */

.pm-panel:not(.active):hover .pm-panel-bg {

  transform: scale(1.07);
}


.pm-panel:not(.active):hover .pm-panel-label span {

  transform:
    rotate(180deg)
    translateY(6px);

  color: #fff;
}


/* =========================================================
   DESKTOP HOVER
   ========================================================= */

@media (min-width: 769px) {

  .pm-panel:not(.active):hover {

    filter: brightness(1.08);
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .pm-panel.active {
    flex: 3 1 0%;
  }

  .pm-panel-content {
    padding: 35px;
  }

  .pm-content-inner {
    padding: 30px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

  .pm-split-nav {

    height: 100svh;

    min-height: 650px;

  }


  .pm-panels {

    flex-direction: column;

  }


  .pm-panel {

    flex: 1 1 0%;

    width: 100%;

    min-height: 70px;

  }


  .pm-panel.active {

    flex: 5 1 0%;

  }


  .pm-panel:not(:last-child)::after {

    top: auto;
    bottom: 0;

    right: 0;

    width: 100%;
    height: 1px;

  }


  /* Horizontal labels on mobile */

  .pm-panel-label {

    justify-content: flex-start;

    padding: 0 25px;

  }


  .pm-panel-label span {

    writing-mode: horizontal-tb;

    transform: none;

    font-size: 22px;

  }


  .pm-panel:not(.active):hover .pm-panel-label span {

    transform: translateX(5px);

  }


  .pm-panel.active .pm-panel-label {

    opacity: 0;

  }


  .pm-panel-content {

    align-items: flex-end;

    justify-content: flex-start;

    padding: 25px;

  }


  .pm-content-inner {

    width: 100%;

    padding: 25px;

  }


  .pm-content-inner h2 {

    font-size: 42px;

  }


  .pm-content-inner p {

    font-size: 14px;

  }


  .pm-arrow {

    width: 42px;
    height: 42px;

    margin-top: 25px;

  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .pm-panel,
  .pm-panel-bg,
  .pm-panel-content,
  .pm-panel-label,
  .pm-panel-label span,
  .pm-arrow {

    transition: none !important;

  }

}





/* Royston */

/* =========================================
   RESOURCE DOWNLOAD MODAL
========================================= */

.resource-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 20px;
}

.resource-modal.active {
  display: flex;
}

/* BACKDROP */

.resource-overlay {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* MODAL BOX */

.resource-modal-box {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 480px;
  max-height: 90vh;

  overflow-y: auto;

  background: #f8f6f1;
  color: #111;

  border-radius: 18px;
  padding: 42px 34px 30px;

  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
}

/* CLOSE BUTTON */

.resource-close {
  position: absolute;
  top: 12px;
  right: 18px;

  width: 36px;
  height: 36px;

  border: none;
  background: transparent;

  font-size: 30px;
  line-height: 1;

  color: #111;
  cursor: pointer;

  display: grid;
  place-items: center;
}

.resource-close:hover {
  opacity: 0.6;
}

/* HEADER */

.resource-eyebrow {
  display: block;

  font-family: "Space Mono", monospace;
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 700;

  color: #777;
}

.resource-modal-content h2 {
  font-family: "Clash Display", sans-serif;

  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.1;

  letter-spacing: -1px;

  margin: 14px 0;
}

.resource-description {
  color: #666;

  font-family: "General Sans", sans-serif;
  font-size: 14px;
  line-height: 1.6;

  margin-bottom: 26px;
}

/* FORM FIELDS */

.resource-field {
  margin-bottom: 17px;
}

.resource-field label {
  display: block;

  font-family: "General Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;

  margin-bottom: 7px;
}

.resource-field input {
  display: block;

  width: 100%;
  box-sizing: border-box;

  padding: 13px 14px;

  border: 1px solid #d5d1c8;
  border-radius: 8px;

  background: #fff;

  color: #111;

  font-family: "General Sans", sans-serif;
  font-size: 14px;

  outline: none;

  transition: border-color 0.25s ease;
}

.resource-field input:focus {
  border-color: #111;
}

.resource-field input::placeholder {
  color: #999;
}

/* SUBMIT BUTTON */

.resource-submit {
  display: block;

  width: 100%;

  border: none;
  border-radius: 8px;

  padding: 15px;

  background: #111;
  color: #fff;

  font-family: "General Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;

  cursor: pointer;

  transition:
    background 0.3s ease,
    opacity 0.3s ease;
}

.resource-submit:hover {
  background: #333;
}

.resource-submit:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* FOOTNOTE */

.resource-form-note {
  text-align: center;

  font-family: "General Sans", sans-serif;
  font-size: 11px;
  line-height: 1.5;

  color: #888;

  margin-top: 16px;
}

/* PREVENT PAGE SCROLL */

body.resource-modal-open {
  overflow: hidden;
}

/* MOBILE */

@media (max-width: 480px) {

  .resource-modal {
    padding: 14px;
  }

  .resource-modal-box {
    max-height: 92vh;

    padding: 38px 22px 25px;

    border-radius: 14px;
  }

  .resource-modal-content h2 {
    font-size: 28px;
  }

}






/* ===========================================================
   FEATURED ARTICLE TOP BAR v2 — fixed tag + marquee + CTA.
   --bar-h is the single source of truth: nav + stair-rail offset off it.
=========================================================== */
:root{ --bar-h: 50px; }
.topbar{
  position: fixed; top:0; left:0; right:0; height: var(--bar-h); z-index: 410;
  display:flex; align-items:stretch; overflow:hidden;
  background:
    radial-gradient(60% 220% at 12% 0%, rgba(193,64,28,0.45), transparent 60%),
    radial-gradient(50% 220% at 92% 100%, rgba(255,201,77,0.2), transparent 60%),
    var(--ink);
  box-shadow: 0 8px 28px rgba(20,10,7,0.35);
}
/* animated gradient hairline along the bottom edge */
.topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:5;
  background: linear-gradient(90deg, var(--rust), var(--conviction-red), var(--executive-gold), var(--conviction-red), var(--rust));
  background-size: 200% 100%;
  animation: tbLine 8s linear infinite;
}
@keyframes tbLine{ to{ background-position: -200% 0; } }
/* slow light sweep across the bar */
.topbar::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,0.07) 50%, transparent 60%);
  transform: translateX(-100%); animation: tbSweep 9s ease-in-out infinite;
}
@keyframes tbSweep{ 0%,55%{ transform: translateX(-100%); } 100%{ transform: translateX(100%); } }

/* ---- left tag ---- */
.tb-tag{
  position:relative; z-index:3; flex-shrink:0;
  display:flex; align-items:center; gap:10px;
  padding: 0 38px 0 var(--gutter);
  background: linear-gradient(120deg, var(--rust-dim), var(--conviction-red));
  clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
  color: var(--pure-white);
  font-family: var(--mono); font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  white-space:nowrap;
}
.tb-dot{
  width:8px; height:8px; border-radius:50%; background: var(--executive-gold); flex-shrink:0;
  box-shadow: 0 0 0 0 rgba(255,201,77,0.7); animation: tbPulse 2s ease-out infinite;
}
@keyframes tbPulse{ 0%{ box-shadow:0 0 0 0 rgba(255,201,77,0.65);} 100%{ box-shadow:0 0 0 10px rgba(255,201,77,0);} }

/* ---- marquee ---- */
.tb-marquee{
  position:relative; z-index:2; flex:1; min-width:0; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.tb-track{
  display:flex; width:max-content; height:100%; align-items:center;
  animation: marqueeScroll 55s linear infinite; will-change: transform;
}
.tb-marquee:hover .tb-track{ animation-play-state: paused; }
.tb-group{ display:flex; align-items:center; height:100%; flex-shrink:0; }
.tb-unit{
  display:inline-flex; align-items:center; gap:22px; white-space:nowrap; height:100%;
  padding-right:22px; color: var(--pure-white);
}
.tb-title{
  font-family: var(--editorial); font-style:italic; font-weight:400;
  font-size:19px; letter-spacing:-0.005em; transition: color 0.3s;
}
.tb-unit:hover .tb-title{ color: var(--executive-gold); }
.tb-meta{
  font-family: var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  color: rgba(255,255,255,0.88);
}
.tb-meta b{ font-weight:400; color: var(--executive-gold); margin:0 2px; }
.tb-meta-dim{ color: rgba(255,255,255,0.5); }
/* four-point sparkle divider, slowly rotating */
.tb-star{
  width:12px; height:12px; flex-shrink:0; background: var(--conviction-red);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: tbSpin 7s linear infinite;
}
.tb-star-gold{ background: var(--executive-gold); animation-direction: reverse; }
@keyframes tbSpin{ to{ transform: rotate(360deg); } }

/* ---- right CTA ---- */
.tb-cta{
  position:relative; z-index:3; flex-shrink:0;
  display:flex; align-items:center; gap:10px;
  padding: 0 var(--gutter) 0 40px;
  background: var(--executive-gold); color: var(--ink);
  clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%);
  font-family: var(--mono); font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  white-space:nowrap; transition: background 0.3s;
}
.tb-cta svg{
  width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round; transition: transform 0.35s var(--ease-weighted);
}
.tb-cta:hover{ background: var(--pure-white); }
.tb-cta:hover svg{ transform: translate(3px,-3px); }

/* push the fixed nav / progress rail below the bar */
.nav{ top: var(--bar-h); }
.stair-rail{ top: var(--bar-h); }
@media(min-width:1000px){ .stair-rail{ top:50%; } }
body.nav-open .topbar{ display:none; }
body.nav-open .nav{ top:0; }
/* reserve the bar's height so the hero starts BELOW it instead of sliding underneath */
body{ padding-top: var(--bar-h); }
.hero{ min-height: calc(100svh - var(--bar-h)); }

@media(max-width:700px){
  :root{ --bar-h: 44px; }
  .tb-tag{ padding: 0 28px 0 14px; font-size:9px; gap:7px; }
  .tb-tag-text{ letter-spacing:0.1em; }
  .tb-dot{ width:9px; height:9px; }
  .tb-cta{ padding: 0 16px 0 30px; }
  .tb-cta-text{ display:none; }
  .tb-title{ font-size:16px; }
  .tb-meta{ font-size:10px; }
  .tb-unit{ gap:16px; padding-right:16px; }
}
@media (prefers-reduced-motion: reduce){
  .topbar::before, .topbar::after, .tb-track, .tb-star, .tb-dot{ animation:none; }
  .tb-marquee{ overflow-x:auto; }
}
@media(max-width:700px){ .tb-tag-extra{ display:none; } }


/* ===========================================================
   SCROLL PERCENTAGE RAIL — removed from view. The markup is left in the
   DOM (hidden) so script.js, which writes to it, doesn't hit a null element.
=========================================================== */
.stair-rail{ display:none !important; }

/* ===========================================================
   BACK TO TOP — circular wave-fill button, bottom right.
   --p (0→1, set by the inline script) drives how high the wave sits.
=========================================================== */
.btt{
  position:fixed; right: clamp(16px,2.4vw,32px); bottom: clamp(16px,2.4vw,32px); z-index: 420;
  width:58px; height:58px; border-radius:50%; padding:0; overflow:hidden; isolation:isolate;
  background: var(--pure-white);
  box-shadow: 0 0 0 1.5px rgba(33,19,17,0.12), 0 16px 34px rgba(33,19,17,0.22);
  opacity:0; transform: translateY(18px) scale(0.85); pointer-events:none;
  transition: opacity 0.4s var(--ease-weighted), transform 0.4s var(--ease-weighted), box-shadow 0.3s;
}
.btt.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.btt.is-visible:hover{ transform: translateY(-3px); box-shadow: 0 0 0 1.5px var(--conviction-red), 0 20px 40px rgba(255,64,51,0.3); }
.btt-fill{
  --p:0;
  position:absolute; inset:0; z-index:0;
  transform: translateY(calc((1 - var(--p)) * 100%));
  transition: transform 0.25s linear;
}
.btt-body{
  position:absolute; inset:0;
  background: linear-gradient(180deg, var(--executive-gold) 0%, var(--conviction-red) 55%, var(--rust) 100%);
}
.btt-wave{
  position:absolute; left:0; bottom:calc(100% - 1px); width:200%; height:12px;
  fill: var(--executive-gold); will-change: transform;
  animation: bttWave 3.2s linear infinite;
}
.btt-wave-2{ opacity:0.5; height:14px; animation-duration: 5.4s; animation-direction: reverse; fill: var(--coral); }
@keyframes bttWave{ to{ transform: translateX(-50%); } }
.btt-arrow{
  position:absolute; left:50%; top:50%; z-index:2; width:22px; height:22px;
  transform: translate(-50%,-50%); fill:none; stroke: var(--ink);
  stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
  transition: transform 0.35s var(--ease-weighted);
}
.btt:hover .btt-arrow{ transform: translate(-50%,-62%); }
@media(max-width:700px){ .btt{ width:50px; height:50px; } .btt-arrow{ width:19px; height:19px; } }
@media (prefers-reduced-motion: reduce){ .btt-wave{ animation:none; } .btt-fill{ transition:none; } }