/* ==========================================================================
   Coach Sishindri — main stylesheet
   Premium corporate leadership: near-black + navy, gold accent, white/grey text.
   Dark-first by design. No purple, no glassmorphism, no glow.
   ========================================================================== */

:root{
  /* Ink. The client's original brief: near-black with a navy-leaning band for
     rhythm, panels lifted a step at a time so cards read above the page. */
  --paper:#07080B;
  --paper-2:#0B0D12;
  --paper-3:#0A1020;
  --paper-4:#0E1729;
  --panel:#101319;
  --panel-2:#161A22;
  --panel-3:#1E232D;
  --espresso:#07080B;   /* kept as an alias so footer/skip rules still resolve */

  /* Gold. On dark the leaf gold carries itself, so the deepened brass the cream
     build needed is not wanted here - these are the original values. */
  --gold-600:#A8842F;
  --gold-500:#C9A227;
  --gold-400:#D9B65A;
  --gold-300:#E7CE86;
  --brass:#C9A227;      /* decorative: curtain wipe, progress hairline */

  /* Type on dark */
  --fg-strong:#FFFFFF;
  --fg-hi:#EDEFF3;
  --fg:#C2C7D1;
  --fg-muted:#9BA2AF;
  --fg-soft:#767D8B;
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);

  --r-sm:0;
  --r:2px;
  --r-lg:2px;

  --wrap:1680px;   /* full width - fills desktop, no narrow letterbox */
  --gut:clamp(20px,3.4vw,54px);

  --ff-head:"Archivo","Segoe UI",Arial,sans-serif;
  --ff-body:"IBM Plex Sans","Segoe UI",Arial,sans-serif;

  --grad-gold:linear-gradient(180deg,#E7CE86 0%,#C9A227 100%);
  --grad-rule:linear-gradient(90deg,rgba(201,162,39,0) 0%,#C9A227 22%,#E7CE86 50%,#C9A227 78%,rgba(201,162,39,0) 100%);
}


/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;
  font-family:var(--ff-body);
  font-size:17px;
  line-height:1.75;
  color:var(--fg);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-400);text-decoration:none}
a:hover{color:var(--gold-300)}
h1,h2,h3,h4,h5{font-family:var(--ff-head);color:var(--fg-strong);margin:0 0 .5em;line-height:1.12;font-weight:800;letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,6vw,4.6rem);font-weight:900}
h2{font-size:clamp(1.9rem,3.6vw,3rem)}
h3{font-size:clamp(1.15rem,1.8vw,1.45rem);font-weight:700}
h4{font-size:1.02rem;font-weight:700}
p{margin:0 0 1.15em}
ul,ol{margin:0 0 1.15em;padding-left:1.15em}
li{margin-bottom:.4em}
figure{margin:0}
:focus-visible{outline:2px solid var(--gold-400);outline-offset:3px}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--gold-500);color:#141006;padding:12px 18px;z-index:9999;font-weight:700}
.skip-link:focus{left:8px;top:8px}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:860px}
.section{padding:clamp(64px,8vw,124px) 0;position:relative}
.section--tight{padding:clamp(48px,5vw,80px) 0}
/* The band classes were renamed when the palette went light. A CDN can serve
   HTML cached before the rename for up to a week, so the old names are kept
   as aliases - otherwise stale markup renders with no band backgrounds. */
.section--alt,.section--ink{background:var(--paper-2)}
.section--alt-2,.section--navy{background:var(--paper-3)}
.section--line{border-top:1px solid var(--line-soft)}

.grid{display:grid;gap:24px}
@media(min-width:700px){ .g-2{grid-template-columns:repeat(2,1fr)} }
@media(min-width:960px){ .g-3{grid-template-columns:repeat(3,1fr)} .g-4{grid-template-columns:repeat(4,1fr)} }
@media(min-width:700px) and (max-width:959px){ .g-3,.g-4{grid-template-columns:repeat(2,1fr)} }

/* ---------- section headings ---------- */
.eyebrow{
  display:flex;align-items:center;gap:14px;
  font-family:var(--ff-head);font-size:.72rem;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold-400);
  margin:0 0 18px;
}
.eyebrow .num{
  font-size:.72rem;color:var(--gold-500);letter-spacing:.1em;
  padding-right:14px;border-right:1px solid rgba(201,162,39,.4);
}
.section-head{max-width:760px;margin-bottom:clamp(38px,4.5vw,60px)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head p{color:var(--fg-muted);font-size:1.06rem;margin-bottom:0}
.lede{font-size:1.12rem;color:var(--fg)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--ff-head);font-weight:700;font-size:.88rem;
  letter-spacing:.06em;text-transform:uppercase;
  padding:15px 28px;border-radius:var(--r);border:1px solid transparent;
  cursor:pointer;transition:background-color .18s,color .18s,border-color .18s,transform .18s;
  line-height:1.2;text-align:center;
}
.btn svg{width:17px;height:17px;flex:0 0 auto}
.btn:hover{transform:translateY(-2px)}
.btn--gold{background:var(--grad-gold);color:#191204;border-color:var(--gold-500)}
.btn--gold:hover{color:#191204;filter:brightness(1.06)}
.btn--ghost{border-color:rgba(255,255,255,.28);color:var(--fg-strong);background:transparent}
.btn--ghost:hover{border-color:var(--gold-400);color:var(--gold-300);background:rgba(201,162,39,.07)}
.btn--dark{background:var(--panel-2);color:var(--fg-strong);border-color:var(--line)}
.btn--dark:hover{border-color:var(--gold-500);color:var(--gold-300)}
.btn--sm{padding:11px 20px;font-size:.78rem}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.btn-row.center{justify-content:center}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:130;
  background:rgba(7,8,11,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:78px}

.brand{display:flex;align-items:center;gap:13px;flex:0 0 auto}
.brand__face{
  width:42px;height:42px;flex:0 0 auto;border-radius:50%;object-fit:cover;
  border:1px solid rgba(201,162,39,.55);filter:contrast(1.05);
}
.brand__name{font-family:var(--ff-head);font-weight:800;color:var(--fg-strong);font-size:1.02rem;letter-spacing:.01em;line-height:1.15}
.brand__sub{display:block;font-family:var(--ff-body);font-weight:400;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-500);margin-top:3px}
.brand img{height:44px;width:auto}

.nav ul{list-style:none;display:flex;align-items:center;gap:2px;margin:0;padding:0}
.nav li{margin:0}
.nav ul a{
  display:block;padding:9px 13px;border-radius:var(--r-sm);
  font-family:var(--ff-head);font-weight:600;font-size:.79rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--fg);
  transition:color .16s;
}
.nav ul a:hover{color:var(--fg-strong)}
.nav ul a.is-current{color:var(--gold-400)}
.header-cta{display:flex;align-items:center;gap:10px;flex:0 0 auto}

.nav-toggle{
  display:none;width:44px;height:44px;border:1px solid var(--line);
  background:transparent;border-radius:var(--r);cursor:pointer;padding:0;
  align-items:center;justify-content:center;
}
.nav-toggle span{display:block;width:19px;height:1.5px;background:var(--fg-strong);position:relative;transition:.2s}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:19px;height:1.5px;background:var(--fg-strong);transition:.2s}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media(max-width:1299px){
  .nav-toggle{display:inline-flex}
  .header-cta .btn{display:none}
  .nav{
    position:absolute;left:0;right:0;top:100%;
    background:var(--paper-2);border-top:1px solid var(--line-soft);
    border-bottom:2px solid var(--gold-500);
    padding:10px var(--gut) 22px;display:none;
    max-height:calc(100vh - 78px);overflow-y:auto;
  }
  .nav.open{display:block}
  .nav ul{flex-direction:column;align-items:stretch;gap:0}
  .nav ul a{padding:14px 2px;font-size:.88rem;border-bottom:1px solid var(--line-soft);border-radius:0}
  .header-inner{position:relative}
  /* wraps rather than squeezing: "Join Our Team" does not fit beside
     "Work With Me" on the narrowest phones */
  .nav-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding-bottom:4px}
  .nav-cta .btn{flex:1 1 138px}
  /* In the drawer there is no room shortage, so the second level is simply
     shown indented rather than hidden behind another tap. */
  .nav .sub-menu{padding-left:18px;border-left:1px solid var(--line-soft);margin:0 0 4px}
  .nav .sub-menu a{font-size:.82rem;color:var(--fg-muted);padding:11px 2px}
  .nav .sub-menu li:last-child a{border-bottom:0}
}
/* The horizontal nav needs room the old 1081px breakpoint never gave it.
   Ten uppercase items at .13em tracking want about 1590px once "Real Estate"
   becomes "Real-Estate & Insurance"; below that the row was not wrapping to a
   second line but being squeezed by flex, which pushed the header past the
   viewport and left the page scrolling sideways on ordinary 1366px laptops -
   true before this label grew, and worse after. So the row is held to one line,
   the tracking is eased just enough to bring the requirement down to ~1490px,
   and anything narrower gets the drawer, which reads better at that width
   anyway. */
@media(min-width:1300px){
  .nav-cta{display:none}
  .nav ul a{padding:9px 10px;letter-spacing:.09em;white-space:nowrap}

  /* ---- second level, on hover or keyboard focus ---- */
  .nav > ul > li{position:relative}
  /* The caret rides ::before, not ::after: ::after is already the hover
     underline further down this file, and being later it won every time -
     which is why the chevron first appeared as a stray dot under the label. */
  .nav .menu-item-has-children > a{padding-right:27px}
  .nav .menu-item-has-children > a::before{
    content:"";position:absolute;right:11px;top:50%;
    width:.38em;height:.38em;margin-top:-.30em;
    border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    transform:rotate(45deg);opacity:.6;transition:opacity .16s;
  }
  .nav .menu-item-has-children:hover > a::before{opacity:1}
  .nav .sub-menu{
    position:absolute;top:100%;left:0;min-width:212px;z-index:60;
    flex-direction:column;align-items:stretch;gap:0;margin:0;padding:7px 0;
    background:var(--paper-2);border:1px solid var(--line);
    border-top:2px solid var(--gold-500);border-radius:0 0 var(--r) var(--r);
    box-shadow:0 18px 42px rgba(0,0,0,.55);
    opacity:0;visibility:hidden;transform:translateY(7px);
    transition:opacity .16s ease,transform .16s ease,visibility .16s;
  }
  .nav > ul > li:hover > .sub-menu,
  .nav > ul > li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
  .nav .sub-menu a{padding:10px 17px;font-size:.74rem;letter-spacing:.08em;border-radius:0}
  .nav .sub-menu a:hover{background:rgba(255,255,255,.05);color:var(--gold-400)}
}

/* ---------- inner page title band ---------- */
.page-hero{
  position:relative;
  background:
    radial-gradient(110% 130% at 80% 0%, rgba(201,162,39,.09) 0%, rgba(201,162,39,0) 58%),
    linear-gradient(172deg,#0A0C11 0%,#0B0F1A 60%,#07080B 100%);
  padding:clamp(38px,4.6vw,74px) 0 clamp(40px,4.8vw,78px);
  border-bottom:1px solid var(--line-soft);
}
.page-hero h1{
  font-size:clamp(2.1rem,4.6vw,3.7rem);margin:0 0 .3em;
  text-transform:uppercase;letter-spacing:-.03em;
}
.page-hero__sub{color:var(--fg-muted);max-width:64ch;margin:0;font-size:1.06rem}
.crumbs{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-soft);margin-bottom:18px}
.crumbs a{color:var(--fg-muted)}
.crumbs a:hover{color:var(--gold-400)}
.crumbs em{font-style:normal;margin-inline:9px;color:rgba(255,255,255,.22)}
.eyebrow--center{justify-content:center}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 85% 15%, rgba(201,162,39,.10) 0%, rgba(201,162,39,0) 55%),
    linear-gradient(175deg,#0A0C11 0%,#0B0F1A 55%,#07080B 100%);
  padding:clamp(34px,3.6vw,58px) 0 clamp(36px,3.8vw,62px);
  border-bottom:1px solid var(--line-soft);
}
.hero-grid{display:grid;gap:36px;align-items:center}
@media(min-width:980px){ .hero-grid{grid-template-columns:1.06fr .94fr;gap:60px} }

.hero__name{
  font-size:clamp(2.4rem,5.6vw,4.4rem);font-weight:900;color:var(--fg-strong);
  letter-spacing:-.03em;line-height:.96;margin:0 0 16px;text-transform:uppercase;
}
.hero__name .gold{display:block;color:var(--gold-400)}
.hero__promise{
  font-family:var(--ff-head);font-weight:700;color:var(--fg-strong);
  font-size:clamp(1.05rem,2vw,1.42rem);letter-spacing:-.01em;margin:0 0 18px;
}
.hero__promise em{font-style:normal;color:var(--gold-400)}
.hero__role{
  font-family:var(--ff-head);font-size:.74rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-soft);margin:0 0 20px;
}
.hero__disciplines{
  display:flex;flex-wrap:wrap;gap:8px 0;align-items:center;
  font-family:var(--ff-head);font-size:.76rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--fg-muted);
  margin:0 0 24px;padding:0;list-style:none;
}
.hero__disciplines li{margin:0;display:flex;align-items:center}
.hero__disciplines li::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--gold-500);margin:0 14px}
.hero__disciplines li:last-child::after{display:none}

.hero-portrait{position:relative}
.hero-portrait img{
  width:100%;border-radius:var(--r-lg);
  /* The hero box is landscape but the supplied portraits are square-to-tall, so
     the image is capped and cropped rather than allowed to stretch the section.
     Biased towards the top so the face survives the crop at every width. */
  max-height:min(62vh,520px);object-fit:cover;object-position:50% 10%;
  filter:contrast(1.02) saturate(1.03);
  box-shadow:0 24px 64px rgba(0,0,0,.6);
}
.hero-portrait::before{
  content:"";position:absolute;inset:auto -16px -16px auto;width:64%;height:62%;
  border:1px solid rgba(201,162,39,.5);border-radius:var(--r-lg);z-index:-1;
}
.hero-badge{
  position:absolute;left:-10px;bottom:26px;z-index:2;
  background:var(--paper);border:1px solid rgba(201,162,39,.42);
  border-left:3px solid var(--gold-500);
  padding:13px 20px;border-radius:var(--r);max-width:73%;
}
.hero-badge b{display:block;font-family:var(--ff-head);font-size:.86rem;color:var(--fg-strong);letter-spacing:.02em}
.hero-badge span{display:block;font-size:.74rem;color:var(--gold-400);letter-spacing:.14em;text-transform:uppercase;margin-top:3px}
@media(max-width:620px){ .hero-badge{left:0;max-width:88%} }

/* ---------- scroll progress ----------
   A brass hairline across the foot of the header that tracks read
   position. Base state is scaleX(0), so where scroll-driven animation is
   unsupported it is simply invisible rather than a stuck full-width bar. */
.scroll-progress{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;z-index:2;
  background:var(--grad-gold);pointer-events:none;
  transform:scaleX(0);transform-origin:left center;
}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .scroll-progress{animation:csWipe linear both;animation-timeline:scroll(root)}
  }
}

/* ---------- ticker strip ---------- */
.strip{background:var(--paper);border-bottom:1px solid var(--line-soft)}
.strip .wrap{display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:center;padding-block:18px}
.strip span{
  font-family:var(--ff-head);font-size:.74rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-soft);display:flex;align-items:center;gap:10px;
}
.strip span svg{width:15px;height:15px;color:var(--gold-500)}

/* ---------- cards ---------- */
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 28px;position:relative;
  transition:border-color .2s,transform .2s,background-color .2s;
}
.card:hover{border-color:rgba(201,162,39,.4);transform:translateY(-3px);background:var(--panel-2)}
.card__ico{
  width:50px;height:50px;border-radius:var(--r);display:grid;place-items:center;
  border:1px solid rgba(201,162,39,.32);color:var(--gold-400);margin-bottom:20px;
  background:linear-gradient(160deg,rgba(201,162,39,.13),transparent);
}
.card__ico svg{width:24px;height:24px}
.card h3{margin-bottom:8px}
.card p{color:var(--fg-muted);font-size:.95rem;margin-bottom:0}
.card__line{
  font-family:var(--ff-head);font-size:.72rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold-500);margin:0 0 12px;
}

/* Pillars are ruled editorial rows, not cards — four identical boxes in a grid
   is the single most template-looking pattern on a page like this. */
.pillars{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.pillars li{
  margin:0;padding:34px 0;border-bottom:1px solid var(--line);
  display:grid;gap:6px 30px;align-items:start;
  grid-template-columns:auto 1fr;
}
@media(min-width:900px){
  .pillars li{grid-template-columns:110px 300px 1fr auto;gap:0 40px;align-items:center;padding:38px 0}
}
.pillars li:hover .pillar__n{color:var(--gold-500)}
.pillar__n{
  font-family:var(--ff-head);font-weight:900;font-size:clamp(1.6rem,2.6vw,2.4rem);
  line-height:1;color:rgba(255,255,255,.16);letter-spacing:-.03em;transition:color .2s;
}
.pillar__title{margin:0}
.pillar__title h3{margin:0 0 4px}
.pillar__line{
  font-family:var(--ff-head);font-size:.7rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-500);margin:0;
}
.pillar__desc{color:var(--fg-muted);font-size:.98rem;margin:0;max-width:62ch}
.pillar__ico{
  display:none;width:44px;height:44px;place-items:center;
  border:1px solid rgba(201,162,39,.28);color:var(--gold-400);
}
@media(min-width:900px){ .pillar__ico{display:grid} }
.pillar__ico svg{width:21px;height:21px}
@media(max-width:899px){
  .pillars li{grid-template-columns:auto 1fr}
  .pillar__desc{grid-column:1/-1}
}

/* ---------- about / timeline ---------- */
.about-grid{display:grid;gap:46px;align-items:start}
/* The portrait was a 1152x1536 crop shown at full column width, so it stood
   800px tall beside a homepage column holding about 340px of copy - a 570px
   hole under the text that read as a mistake rather than as space. Narrowing
   the column and holding the image to 4:5 brings it down to roughly 600px, and
   centring the two columns splits what is left evenly above and below the copy
   instead of dumping all of it at the bottom. The About page, whose timeline
   nearly matches the portrait, is unaffected either way. */
@media(min-width:980px){
  .about-grid{grid-template-columns:.68fr 1.32fr;gap:64px;align-items:center}
  .about-portrait img{aspect-ratio:4/5;object-fit:cover;object-position:50% 18%}
}
.about-portrait{position:relative}
.about-portrait img{width:100%;border-radius:var(--r-lg);filter:contrast(1.02) saturate(1.03);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.about-portrait__tag{
  margin-top:18px;padding:16px 20px;border:1px solid var(--line);
  border-left:3px solid var(--gold-500);border-radius:var(--r);background:var(--panel);
}
.about-portrait__tag b{display:block;font-family:var(--ff-head);color:var(--fg-strong);font-size:.92rem}
.about-portrait__tag span{font-size:.8rem;color:var(--fg-muted)}

.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{
  content:"";position:absolute;left:13px;top:10px;bottom:10px;width:1px;
  background:linear-gradient(180deg,rgba(201,162,39,.55),rgba(201,162,39,.06));
}
.timeline li{position:relative;padding:0 0 30px 46px;margin:0}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:"";position:absolute;left:8px;top:7px;width:11px;height:11px;border-radius:50%;
  background:var(--paper);border:2px solid var(--gold-500);
}
.timeline h3{margin:0 0 5px;color:var(--fg-strong);font-size:1.06rem;font-weight:700}
.timeline .when{
  display:block;font-family:var(--ff-head);font-size:.7rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-500);margin-bottom:7px;
}
.timeline p{color:var(--fg-muted);font-size:.96rem;margin:0}

/* ---------- programs ---------- */
.program{display:flex;flex-direction:column}
@media(min-width:960px){ .program--feature{grid-column:span 2} }
.program__flag{
  position:absolute;top:18px;right:18px;
  font-family:var(--ff-head);font-size:.63rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#191204;background:var(--grad-gold);
  padding:4px 10px;border-radius:100px;
}
.program h3{margin-bottom:4px}
.program__sub{
  font-family:var(--ff-head);font-size:.74rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-500);margin:0 0 14px;
}
.program p{flex:1;margin-bottom:20px}
.program .btn{align-self:flex-start}

/* ---------- impact ---------- */
.impact-grid{display:grid;gap:0;border-top:1px solid var(--line)}
@media(min-width:620px){ .impact-grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1060px){ .impact-grid{grid-template-columns:repeat(4,1fr)} }
.impact{
  padding:34px 30px 34px 0;border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;align-items:flex-start;
}
@media(min-width:620px){ .impact + .impact{padding-left:34px;border-left:1px solid var(--line)} }
@media(min-width:1060px){ .impact{border-bottom:0} }
.impact b{
  display:block;font-family:var(--ff-head);font-weight:900;
  font-size:clamp(2.4rem,4.4vw,3.6rem);line-height:.95;letter-spacing:-.04em;
  color:var(--gold-400);
}
.impact .unit{
  display:block;font-family:var(--ff-head);font-size:.66rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--fg-soft);margin-top:12px;
}
.impact .label{display:block;margin-top:6px;font-size:.95rem;color:var(--fg);max-width:22ch}

/* ---------- philosophy ---------- */
.philosophy{
  position:relative;text-align:center;
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(201,162,39,.14) 0%, rgba(201,162,39,0) 60%),
    var(--paper);
}
.philosophy .creed{
  font-family:var(--ff-head);font-weight:900;color:var(--fg-strong);
  font-size:clamp(1.8rem,5vw,4rem);line-height:1.06;letter-spacing:-.03em;
  margin:0 0 26px;text-transform:uppercase;
}
.philosophy .creed span{display:block}
.philosophy .creed .accent{
  color:var(--gold-400);
}
.philosophy p{color:var(--fg-muted);max-width:60ch;margin:0 auto;font-size:1.05rem}
.rule{height:1px;background:var(--grad-rule);border:0;margin:0}

/* ---------- media ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 34px;padding:0;list-style:none;justify-content:center}
.chips li{margin:0}
.chips span{
  display:inline-block;padding:8px 16px;border-radius:100px;border:1px solid var(--line);
  font-family:var(--ff-head);font-size:.74rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-muted);
}
.video-card{
  position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:var(--panel);aspect-ratio:16/10;display:block;
}
.video-card img{width:100%;height:100%;object-fit:cover;opacity:.72;transition:opacity .25s,transform .4s}
.video-card:hover img{opacity:.92;transform:scale(1.03)}
.video-card__play{
  position:absolute;inset:0;display:grid;place-items:center;color:#FFFFFF;
}
.video-card__play svg{width:52px;height:52px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.6))}
.video-card__meta{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 15px;background:linear-gradient(180deg,transparent,rgba(7,8,11,.94))}
.video-card__meta b{display:block;font-family:var(--ff-head);color:#FFFFFF;font-size:.95rem}
.video-card__meta span{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-400)}

/* stage photography strip */
/* Horizontal scroller rather than a wrapping grid: the client supplied a lot
   of photographs, and a row you swipe shows the whole set without turning the
   page into a wall of thumbnails. */
.stage-strip{
  display:flex;gap:14px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  padding-bottom:12px;
  scrollbar-width:thin;
  scrollbar-color:var(--gold-600) rgba(255,255,255,.08);
}
.stage-strip::-webkit-scrollbar{height:7px}
.stage-strip::-webkit-scrollbar-track{background:rgba(255,255,255,.07);border-radius:100px}
.stage-strip::-webkit-scrollbar-thumb{background:var(--gold-600);border-radius:100px}
.stage-strip::-webkit-scrollbar-thumb:hover{background:var(--gold-500)}
.stage-strip:focus-visible{outline:2px solid var(--gold-400);outline-offset:4px}
/* Filmstrip: fixed height, natural width. The set mixes portrait and
   landscape, and forcing a single aspect ratio cropped the tall ones badly. */
.stage-shot{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);
  flex:0 0 auto;height:clamp(210px,29vw,320px);width:auto;
  scroll-snap-align:start;
}
.stage-shot img{height:100%;width:auto;max-width:none;object-fit:cover;display:block;transition:transform .45s ease,filter .3s ease}
.stage-shot:hover img{transform:scale(1.04);filter:brightness(1.07)}
.stage-shot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:30px 15px 13px;
  font-family:var(--ff-head);font-size:.76rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:#FFFFFF;
  background:linear-gradient(180deg,rgba(7,8,11,0),rgba(7,8,11,.92));
}

/* placeholder shown until real videos are supplied */
.soon{
  border:1px dashed rgba(255,255,255,.16);border-radius:var(--r-lg);
  padding:46px 28px;text-align:center;background:var(--paper-2);
}
.soon svg{width:38px;height:38px;color:var(--gold-500);margin:0 auto 14px}
.soon b{display:block;font-family:var(--ff-head);color:var(--fg-strong);font-size:1.05rem;margin-bottom:6px}
.soon p{color:var(--fg-soft);font-size:.93rem;margin:0}

/* ---------- events ---------- */
.events-grid{display:grid;gap:38px;align-items:center}
@media(min-width:980px){ .events-grid{grid-template-columns:1.05fr .95fr;gap:56px} }
.events-photo{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.events-photo img{width:100%;display:block}
.speak-list{list-style:none;margin:0;padding:0}
.speak-list li{
  display:flex;gap:16px;align-items:flex-start;padding:17px 0;
  border-bottom:1px solid var(--line-soft);margin:0;
}
.speak-list li:last-child{border-bottom:0}
.speak-list .ico{
  width:38px;height:38px;flex:0 0 auto;border-radius:var(--r);display:grid;place-items:center;
  border:1px solid rgba(201,162,39,.3);color:var(--gold-400);
}
.speak-list .ico svg{width:18px;height:18px}
.speak-list b{display:block;font-family:var(--ff-head);color:var(--fg-strong);font-size:1rem;margin-bottom:2px}
.speak-list span{font-size:.92rem;color:var(--fg-muted)}

/* ---------- testimonials ---------- */
.quote-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 28px;position:relative;display:flex;flex-direction:column;
}
.quote-card > svg{width:30px;height:30px;color:rgba(201,162,39,.45);margin-bottom:16px}
.quote-card p{color:var(--fg);font-size:.99rem;flex:1;margin-bottom:20px}
.quote-who{display:flex;align-items:center;gap:13px;border-top:1px solid var(--line-soft);padding-top:16px}
.quote-who .av{
  width:42px;height:42px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  border:1px solid rgba(201,162,39,.4);color:var(--gold-400);
  font-family:var(--ff-head);font-weight:800;font-size:.95rem;
}
.quote-who b{display:block;font-family:var(--ff-head);color:var(--fg-strong);font-size:.94rem}
.quote-who span{display:block;font-size:.8rem;color:var(--fg-soft)}

/* ---------- contact ---------- */
.contact-grid{display:grid;gap:40px}
@media(min-width:980px){ .contact-grid{grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start} }

.channels{list-style:none;margin:0 0 26px;padding:0}
.channels li{
  display:flex;gap:15px;align-items:flex-start;padding:16px 0;
  border-bottom:1px solid var(--line-soft);margin:0;
}
.channels li:last-child{border-bottom:0}
.channels .ico{
  width:42px;height:42px;flex:0 0 auto;border-radius:var(--r);display:grid;place-items:center;
  border:1px solid rgba(201,162,39,.3);color:var(--gold-400);
}
.channels .ico svg{width:19px;height:19px}
.channels b{
  display:block;font-family:var(--ff-head);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-soft);margin-bottom:4px;
}
.channels a,.channels p{color:var(--fg-strong);font-size:.99rem;margin:0;font-weight:500}
.channels a:hover{color:var(--gold-300)}
.channels .pending{color:var(--fg-soft);font-style:italic;font-size:.92rem}

.socials{display:flex;gap:10px;flex-wrap:wrap}
.socials a{
  width:44px;height:44px;border-radius:var(--r);display:grid;place-items:center;
  border:1px solid var(--line);color:var(--fg);transition:.18s;
}
.socials a:hover{border-color:var(--gold-500);color:var(--gold-400);background:rgba(201,162,39,.08)}
.socials svg{width:19px;height:19px}

.form-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:34px;border-top:2px solid var(--gold-500);
}
@media(max-width:620px){ .form-card{padding:24px} }
.form-grid{display:grid;gap:18px}
@media(min-width:620px){ .form-grid{grid-template-columns:1fr 1fr} .f-full{grid-column:1/-1} }
.field label{
  display:block;font-family:var(--ff-head);font-size:.72rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:8px;
}
.field label .req{color:var(--gold-400);margin-left:3px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--ff-body);font-size:.97rem;color:var(--fg-strong);
  background:var(--paper-2);transition:border-color .16s,box-shadow .16s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-soft)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(201,162,39,.14);
}
.field textarea{min-height:120px;resize:vertical}
.field select{
  appearance:none;padding-right:40px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BA2AF' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:17px;
}
.field select option{background:var(--paper-2);color:var(--fg-strong)}
.hp-field{position:absolute!important;left:-9999px!important}
.form-note{font-size:.82rem;color:var(--fg-soft);margin:14px 0 0}

.notice{padding:15px 18px;border-radius:var(--r);margin-bottom:22px;font-size:.94rem;border:1px solid}
.notice--ok{background:rgba(46,160,102,.12);border-color:rgba(46,160,102,.45);color:#8FE3B6}
.notice--err{background:rgba(200,70,60,.12);border-color:rgba(200,70,60,.45);color:#F3AFA8}
.notice b{display:block;margin-bottom:3px;font-family:var(--ff-head)}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;text-align:center;
  background:linear-gradient(160deg,#0C111C 0%,#07080B 100%);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.cta-band h2{max-width:20ch;margin-inline:auto}
.cta-band p{color:var(--fg-muted);max-width:58ch;margin:0 auto 30px;font-size:1.05rem}

/* ---------- footer ---------- */
.site-footer{background:var(--paper);color:var(--fg-muted);font-size:.94rem;border-top:1px solid var(--line-soft)}
.footer-top{padding:clamp(50px,6vw,76px) 0 42px}
.footer-grid{display:grid;gap:36px}
@media(min-width:760px){ .footer-grid{grid-template-columns:1.6fr 1fr 1.3fr} }
.site-footer h4{
  color:var(--fg-strong);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:20px;padding-bottom:11px;position:relative;
}
.site-footer h4::after{content:"";position:absolute;left:0;bottom:0;width:30px;height:2px;background:var(--grad-gold)}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer ul li{margin-bottom:11px}
.site-footer a{color:var(--fg)}
.site-footer a:hover{color:var(--gold-400)}
.footer-brand p{color:var(--fg-soft);max-width:40ch;font-size:.93rem}
.footer-contact li{display:flex;gap:11px;align-items:flex-start;color:var(--fg-muted)}
.footer-contact svg{width:15px;height:15px;color:var(--gold-500);flex:0 0 auto;margin-top:5px}
.footer-bottom{border-top:1px solid var(--line-soft);padding:20px 0}
.footer-bottom .wrap{text-align:center;font-size:.84rem;color:var(--fg-soft)}
.footer-legal{margin:0;line-height:1.9}
.footer-legal .sep{margin:0 9px;color:rgba(255,255,255,.2)}
/* Agency wordmark: gold lockup with a pure-white centre X.
   Scoped under .site-footer so it outranks the generic `.site-footer a` colour. */
.site-footer .credit-link{color:#F0C419;font-family:var(--ff-head);font-weight:700;white-space:nowrap}
.site-footer .credit-link .x{color:#FFFFFF}
.site-footer .credit-link:hover{color:#F0C419;text-decoration:underline}
.site-footer .credit-link:hover .x{color:#FFFFFF}

/* ---------- floating whatsapp ---------- */
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:200;width:54px;height:54px;border-radius:50%;
  background:#25A366;color:#fff;display:grid;place-items:center;
  box-shadow:0 8px 24px rgba(0,0,0,.5);transition:transform .18s;
}
.wa-float:hover{transform:scale(1.07);color:#fff}
.wa-float svg{width:28px;height:28px}
@media(max-width:600px){ .wa-float{right:15px;bottom:15px;width:50px;height:50px} }

/* ---------- programme tag under a pillar ---------- */
.pillar__prog{
  display:block;margin-top:10px;
  font-family:var(--ff-head);font-size:.72rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold-400);
}

/* ---------- real estate & insurance ---------- */
.rei-intro{display:grid;gap:40px;align-items:center}
@media(min-width:980px){ .rei-intro{grid-template-columns:1.1fr .9fr;gap:64px} }
.rei-intro h2{max-width:20ch;font-size:clamp(1.7rem,3vw,2.5rem)}
.rei-portrait{position:relative}
.rei-portrait img{
  width:100%;border-radius:var(--r-lg);
  border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.rei-portrait::before{
  content:"";position:absolute;inset:auto -14px -14px auto;width:60%;height:58%;
  border:1px solid rgba(201,162,39,.45);border-radius:var(--r-lg);z-index:-1;
}

.rei-block{display:grid;gap:40px;align-items:center}
@media(min-width:980px){
  .rei-block{grid-template-columns:.95fr 1.05fr;gap:60px}
  /* the second block leads with copy so the page alternates rather than
     marching down the same side */
  .rei-block--flip .rei-shot{order:2}
}
.rei-shot{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.rei-shot img{width:100%;height:100%;object-fit:cover;display:block}
.rei-ico{
  display:grid;place-items:center;width:52px;height:52px;margin-bottom:20px;
  border:1px solid rgba(201,162,39,.32);border-radius:var(--r);color:var(--gold-400);
  background:linear-gradient(160deg,rgba(201,162,39,.13),transparent);
}
.rei-ico svg{width:25px;height:25px}
.rei-copy h2{margin-bottom:.45em}
.rei-copy p{color:var(--fg-muted)}

.rei-list{
  list-style:none;margin:26px 0 0;padding:0;
  display:grid;gap:12px 30px;
}
@media(min-width:620px){ .rei-list{grid-template-columns:repeat(2,1fr)} }
.rei-list li{
  display:flex;gap:11px;align-items:flex-start;margin:0;
  font-size:.96rem;color:var(--fg);
  padding-bottom:12px;border-bottom:1px solid var(--line-soft);
}
.rei-list__tick{flex:0 0 auto;color:var(--gold-500);display:grid;place-items:center;margin-top:1px}
.rei-list__tick svg{width:16px;height:16px}

/* ---------- mission + ladder ---------- */
.rei-mission__lead{
  font-family:var(--ff-head);font-weight:800;color:var(--fg-strong);
  font-size:clamp(1.15rem,2.2vw,1.6rem);line-height:1.35;
  text-align:center;margin:0 0 .35em;
}
.rei-mission__body{text-align:center;color:var(--fg-muted);max-width:62ch;margin:18px auto 0}

.ladder{list-style:none;margin:clamp(34px,4vw,52px) 0 0;padding:0;display:grid;gap:0}
.ladder li{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;
  margin:0;padding:20px 0;border-top:1px solid var(--line-soft);
}
.ladder li:last-child{border-bottom:1px solid var(--line-soft)}
.ladder__from{
  font-family:var(--ff-head);font-size:clamp(1rem,1.9vw,1.28rem);font-weight:700;
  color:var(--fg-muted);letter-spacing:-.01em;
}
.ladder__to{
  font-family:var(--ff-head);font-size:clamp(1.05rem,2.1vw,1.42rem);font-weight:800;
  color:var(--gold-400);letter-spacing:-.01em;
}
.ladder__arrow{display:grid;place-items:center;color:var(--gold-500)}
.ladder__arrow svg{width:20px;height:20px}

.rei-signoff{margin:clamp(32px,4vw,46px) 0 0;text-align:center}
.rei-signoff b{
  display:block;font-family:var(--ff-head);font-weight:900;color:var(--fg-strong);
  font-size:clamp(1.1rem,2vw,1.5rem);letter-spacing:.04em;
}
.rei-signoff span{
  display:block;margin-top:8px;font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-500);
}

/* two phone numbers sit on one row */
.channels .sep{color:var(--fg-soft)}

/* ---------- programme card: schedule note ---------- */
.program__note{
  display:flex;align-items:center;gap:9px;margin:0 0 18px;
  font-family:var(--ff-head);font-size:.76rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gold-400);
}
.program__note svg{width:16px;height:16px;flex:0 0 auto}
.program .btn-row{gap:10px}

/* ---------- B.O.S.S. ---------- */
.boss-open{text-align:center;max-width:900px;margin-inline:auto}
.boss-quote{
  font-family:var(--ff-head);font-weight:800;color:var(--fg-strong);
  font-size:clamp(1.25rem,2.8vw,2.1rem);line-height:1.3;letter-spacing:-.02em;
  margin:0 0 26px;
}
.boss-entry{
  display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;
  margin:0;padding:13px 22px;border-radius:var(--r);
  border:1px solid rgba(201,162,39,.42);
  background:linear-gradient(160deg,rgba(201,162,39,.13),transparent);
}
.boss-entry__ico{display:grid;place-items:center;color:var(--gold-400)}
.boss-entry__ico svg{width:18px;height:18px}
.boss-entry b{
  font-family:var(--ff-head);font-size:.86rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold-300);
}
.boss-entry span:not(.boss-entry__ico){font-size:.92rem;color:var(--fg)}

.boss-objectives{display:grid;gap:40px;margin-top:clamp(46px,5vw,72px)}
@media(min-width:980px){ .boss-objectives{grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start} }

.boss-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.boss-list li{
  display:flex;gap:18px;align-items:baseline;margin:0;
  padding:16px 0;border-bottom:1px solid var(--line);
  font-size:1rem;color:var(--fg);
}
.boss-list__n{
  flex:0 0 auto;font-family:var(--ff-head);font-weight:900;font-size:.9rem;
  color:var(--gold-500);letter-spacing:.04em;min-width:2.2ch;
}

/* ---------- problem / solution comparison ---------- */
.compare{display:grid;gap:24px}
@media(min-width:860px){ .compare{grid-template-columns:repeat(2,1fr);gap:30px} }
.compare__col{
  padding:30px 28px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--panel);
}
@media(max-width:620px){ .compare__col{padding:24px 20px} }
.compare__col h3{
  font-size:1.05rem;margin:0 0 20px;padding-bottom:14px;
  border-bottom:1px solid var(--line-soft);
}
.compare__col ul{list-style:none;margin:0;padding:0}
.compare__col li{
  display:flex;gap:12px;align-items:flex-start;margin:0;
  padding:11px 0;font-size:.97rem;color:var(--fg);
}
.compare__mark{flex:0 0 auto;display:grid;place-items:center;margin-top:1px}
.compare__mark svg{width:16px;height:16px}
/* the two marks have to read differently at a glance without relying on colour
   alone - one is a cross, the other a tick */
.compare__mark--no{color:#C86A5E}
.compare__mark--yes{color:var(--gold-400)}
.compare__col--problem{border-top:2px solid rgba(200,106,94,.5)}
.compare__col--solution{border-top:2px solid var(--gold-500)}

.boss-close{
  font-family:var(--ff-head);font-weight:800;color:var(--fg-strong);
  font-size:clamp(1.1rem,2.4vw,1.7rem);line-height:1.35;
  text-align:center;margin:0;
}

/* ==========================================================================
   MOTION
   Two rules govern everything below, both learned the hard way on HYRA:

   1. Motion is ADDITIVE, and an element's resting state is VISIBLE. Reveals
      are CSS *animations* starting from a hidden keyframe - never a transition
      off a pre-hidden base - so if JavaScript never runs, or an animation is
      silently dropped, the page degrades to a plain readable page instead of a
      blank one. `.cs-anim` still pre-hides, but only to stop the first screen
      flashing before its animation starts; main.js removes it after the hero
      has played and a 2.5s failsafe removes it regardless.
   2. CSS *animations* run reliably on this stack; transitions and smooth
      scrolling do not. Anything that must actually move is an animation.

   The consequence of (1) worth knowing: because reveals no longer depend on
   the gate being present, they keep working the entire way down the page.
   The previous build dropped the gate after 2.4s and everything below simply
   appeared, which is why scrolling felt dead past the first screen.
   ========================================================================== */
@keyframes csRise    {from{opacity:0;transform:translateY(28px)}             to{opacity:1;transform:none}}
@keyframes csSlideL  {from{opacity:0;transform:translateX(-54px)}            to{opacity:1;transform:none}}
@keyframes csSlideR  {from{opacity:0;transform:translateX(54px)}             to{opacity:1;transform:none}}
@keyframes csFade    {from{opacity:0}                                        to{opacity:1}}
@keyframes csWipe    {from{transform:scaleX(0)}                              to{transform:scaleX(1)}}
@keyframes csPortrait{from{opacity:0;transform:translateY(30px) scale(1.03)} to{opacity:1;transform:none}}
@keyframes csCurtain {from{transform:scaleX(1)}                              to{transform:scaleX(0)}}
@keyframes csMarquee {from{transform:translateX(0)}                          to{transform:translateX(-50%)}}

/* ---- pre-hide, first screen only ---- */
.cs-anim .reveal:not(.in),
.cs-anim .pillars li:not(.in),
.cs-anim .timeline li:not(.in),
.cs-anim .grid > .card:not(.in),
.cs-anim .impact:not(.in),
.cs-anim .stage-shot:not(.in),
.cs-anim .speak-list li:not(.in),
.cs-anim .quote-card:not(.in),
.cs-anim .channels li:not(.in){opacity:0}

/* ---- the reveals themselves ---- */
.reveal.in,
.pillars li.in,
.timeline li.in,
.grid > .card.in,
.impact.in,
.stage-shot.in,
.speak-list li.in,
.quote-card.in,
.channels li.in,
.events-photo.in{animation:csRise .8s cubic-bezier(.22,.61,.36,1) both}

/* Direction is assigned by main.js from where a block actually sits, so the
   two halves of a split section slide in towards each other. Same specificity
   as the rule above and defined after it, so it wins on order. */
[data-anim="left"].in {animation-name:csSlideL}
[data-anim="right"].in{animation-name:csSlideR}

/* the gold rule under a section heading draws itself */
.rule.in{animation:csWipe .95s cubic-bezier(.22,.61,.36,1) both;transform-origin:left center}

/* ---- hero entrance (the one pre-hidden thing) ---- */
.cs-anim .hero__stagger > *{opacity:0}
.cs-anim .hero.in .hero__stagger > *{animation:csRise .85s cubic-bezier(.22,.61,.36,1) both}
.cs-anim .hero.in .hero__stagger > *:nth-child(1){animation-delay:.05s}
.cs-anim .hero.in .hero__stagger > *:nth-child(2){animation-delay:.14s}
.cs-anim .hero.in .hero__stagger > *:nth-child(3){animation-delay:.23s}
.cs-anim .hero.in .hero__stagger > *:nth-child(4){animation-delay:.32s}
.cs-anim .hero.in .hero__stagger > *:nth-child(5){animation-delay:.41s}
.cs-anim .hero-portrait{opacity:0}
.cs-anim .hero.in .hero-portrait{animation:csPortrait 1.05s cubic-bezier(.22,.61,.36,1) .16s both}

/* ---- curtain wipe: a brass panel slides off the image ----
   Resting state is scaleX(0) - no curtain - so an image is never left covered
   by a panel that failed to animate away. Only used on boxes that contain
   nothing but the photo. */
.hero-portrait::after,
.events-photo::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(160deg,var(--brass),var(--gold-600));
  transform:scaleX(0);transform-origin:right center;
}
/* fill-mode is FORWARDS, deliberately, not `both`: with `both` the panel would
   hold its opening scaleX(1) if the animation were ever applied but not run,
   leaving the photo covered by a brass slab. With `forwards` the resting state
   stays scaleX(0), so a dropped animation means no curtain rather than a
   permanently hidden image. No delay, so it cannot sit closed while waiting. */
.hero.in .hero-portrait::after{animation:csCurtain 1s cubic-bezier(.76,0,.24,1) forwards}
.events-photo.in::after{animation:csCurtain 1s cubic-bezier(.76,0,.24,1) forwards}

/* ---- scroll-driven parallax ----
   Native scroll timelines: no JS, and no rAF to be throttled. Only applied to
   images whose container clips, and the keyframes carry a scale so the drift
   can never expose an edge. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    @keyframes csParallax{
      from{transform:scale(1.10) translateY(-3.2%)}
      to  {transform:scale(1.10) translateY(3.2%)}
    }
    .stage-shot img,
    .events-photo img{
      animation:csParallax linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
  }
}

/* ---- sliding credential strip ----
   main.js duplicates the items and adds .strip--marquee; until it does, this
   is the plain centred row it has always been. */
.strip__track{display:contents}
.strip--marquee .wrap{
  display:block;overflow:hidden;padding-block:16px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.strip--marquee .strip__track{
  display:flex;flex-wrap:nowrap;width:max-content;
  animation:csMarquee 38s linear infinite;
  will-change:transform;
}
/* Spacing is margin per item, not a track gap: with gap, half the track width
   is not one whole copy (2N items carry 2N-1 gaps) and the loop seam jumps. */
.strip--marquee .strip__track span{flex:0 0 auto;margin-right:54px}
.strip--marquee:hover .strip__track{animation-play-state:paused}

/* header condenses once you leave the hero */
.site-header{transition:min-height .25s ease,background-color .25s ease}
.site-header.is-stuck{background:rgba(7,8,11,.985);box-shadow:0 1px 0 rgba(201,162,39,.16)}
.site-header.is-stuck .header-inner{min-height:62px}
.site-header.is-stuck .brand__face{width:34px;height:34px}
.header-inner,.brand__face{transition:min-height .25s ease,width .25s ease,height .25s ease}

/* nav underline grows from the left */
.nav ul a{position:relative}
@media(min-width:1300px){
  .nav ul a::after{
    content:"";position:absolute;left:13px;right:13px;bottom:4px;height:1px;
    background:var(--gold-500);transform:scaleX(0);transform-origin:left center;
    transition:transform .26s cubic-bezier(.22,.61,.36,1);
  }
  .nav ul a:hover::after,.nav ul a.is-current::after{transform:scaleX(1)}
  .nav .menu-item-has-children > a::after{right:27px}
  .nav .sub-menu a::after{display:none}
}

/* arrows step forward on hover */
.btn svg{transition:transform .22s cubic-bezier(.22,.61,.36,1)}
.btn:hover svg{transform:translateX(3px)}
.pillars li{transition:background-color .25s ease}
.pillars li:hover{background:rgba(255,255,255,.018)}

/* counters hold their width so the layout does not jitter while counting */
.impact b{font-variant-numeric:tabular-nums}

/* One reset covers every animation above. Because motion is additive, landing
   on the end state instantly is the correct still frame in each case. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .strip--marquee .strip__track{animation:none!important;transform:none!important}
  .cs-anim .reveal:not(.in),
  .cs-anim .pillars li:not(.in),
  .cs-anim .timeline li:not(.in),
  .cs-anim .grid > .card:not(.in),
  .cs-anim .impact:not(.in),
  .cs-anim .stage-shot:not(.in),
  .cs-anim .speak-list li:not(.in),
  .cs-anim .quote-card:not(.in),
  .cs-anim .channels li:not(.in),
  .cs-anim .hero__stagger > *,
  .cs-anim .hero-portrait{opacity:1}
}

/* ---------- persistent mobile CTA ---------- */
.mobile-bar{display:none}
@media(max-width:860px){
  .mobile-bar{
    display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:190;
    padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(7,8,11,.96);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
  }
  .mobile-bar .btn{flex:1;padding:13px 14px;font-size:.76rem}
  /* the bar already carries WhatsApp, so the float would duplicate it */
  .wa-float{display:none}
  /* keep the footer clear of the fixed bar */
  body{padding-bottom:74px}
}

/* ---------- phone-size hero ----------
   The hero ran over 1000px tall on a 390px screen: three stacked full-width
   buttons and a tall portrait. Tightened so the promise and the first CTA are
   above the fold. */
@media(max-width:640px){
  .hero{padding:26px 0 30px}
  .hero-grid{gap:26px}
  .hero__name{font-size:clamp(2.1rem,10vw,2.9rem);margin-bottom:12px}
  .hero__promise{font-size:1.02rem;margin-bottom:14px}
  .hero__disciplines{gap:6px 16px;margin-bottom:20px;font-size:.68rem}
  .hero__disciplines li::after{display:none}   /* separators dangle at line ends */
  .hero .btn-row{gap:10px}
  .hero .btn{flex:1 1 calc(50% - 5px);padding:13px 12px;font-size:.75rem}
  .hero .btn:first-child{flex:1 1 100%}
  .hero-portrait img{max-height:42vh}
  .hero-badge{padding:10px 15px}
  .section{padding:52px 0}
}

/* ---------- utility ---------- */
.text-center{text-align:center}
.mt-3{margin-top:30px}
.mt-4{margin-top:44px}
.mb-0{margin-bottom:0}
.small{font-size:.87rem}
.muted{color:var(--fg-soft)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Content is never hidden behind an animation — a stalled transition must not
   be able to leave a section invisible. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn:hover,.card:hover,.wa-float:hover,.video-card:hover img{transform:none}
}

@media print{
  .site-header,.site-footer,.wa-float,.cta-band,.btn{display:none!important}
  body{background:#fff;color:#000;font-size:12pt}
}

/* =========================================================================
   Lead popup — B.O.S.S. Saturday registration
   Resting state is hidden by the [hidden] attribute, so if the script never
   runs the popup simply never appears and nothing is trapped behind a veil.
   ========================================================================= */
.lead-pop{
  position:fixed;inset:0;z-index:1200;
  display:grid;place-items:center;
  padding:20px;
}
.lead-pop[hidden]{display:none}

.lead-pop__veil{
  position:absolute;inset:0;
  background:rgba(3,4,6,.80);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:popVeil .28s ease both;
}

.lead-pop__card{
  position:relative;
  width:min(400px,100%);
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  background:linear-gradient(180deg,#12161E 0%,#0B0D12 100%);
  border:1px solid rgba(201,162,39,.30);
  border-radius:var(--r-lg);
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03) inset;
  padding:30px 26px 26px;
  animation:popCard .34s cubic-bezier(.2,.8,.3,1) both;
}
/* a thin gold seam along the top edge, same device as the section rules */
.lead-pop__card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--grad-rule);
}

@keyframes popVeil{from{opacity:0}to{opacity:1}}
@keyframes popCard{
  from{opacity:0;transform:translateY(16px) scale(.98)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .lead-pop__veil,.lead-pop__card{animation:none}
}

.lead-pop__x{
  position:absolute;top:10px;right:10px;
  width:34px;height:34px;display:grid;place-items:center;
  background:transparent;border:0;border-radius:var(--r);
  color:var(--fg-soft);cursor:pointer;transition:.18s;
}
.lead-pop__x:hover{color:var(--fg-strong);background:rgba(255,255,255,.06)}
.lead-pop__x svg{width:17px;height:17px}
.lead-pop__x:focus-visible{outline:2px solid var(--gold-400);outline-offset:2px}

/* ---- the pitch ---- */
.lead-pop__live{
  display:inline-flex;align-items:center;gap:7px;
  margin:0 auto 14px;padding:5px 12px;
  background:rgba(214,48,49,.14);border:1px solid rgba(214,48,49,.45);
  border-radius:100px;
  font:700 10px/1 var(--ff-head);letter-spacing:.16em;text-transform:uppercase;
  color:#FF6B6B;
}
.lead-pop__dot{
  width:6px;height:6px;border-radius:50%;background:#E03131;
  box-shadow:0 0 0 0 rgba(224,49,49,.65);
  animation:popPulse 1.8s ease-out infinite;
}
@keyframes popPulse{
  70%{box-shadow:0 0 0 7px rgba(224,49,49,0)}
  100%{box-shadow:0 0 0 0 rgba(224,49,49,0)}
}
@media (prefers-reduced-motion:reduce){.lead-pop__dot{animation:none}}

.lead-pop__body{text-align:center}

.lead-pop__title{
  margin:0 0 12px;
  font:800 clamp(19px,4.6vw,23px)/1.22 var(--ff-head);
  letter-spacing:.005em;color:var(--fg-strong);text-transform:uppercase;
}
.lead-pop__title span{display:block;color:var(--gold-400)}

.lead-pop__note{
  margin:0 0 20px;
  font-size:13.5px;line-height:1.62;color:var(--fg-muted);
}

/* ---- fields ---- */
.lead-pop__form{display:grid;gap:11px;text-align:left}

.lead-pop__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.lead-pop__field{position:relative;display:block}
.lead-pop__ico{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;color:var(--gold-500);pointer-events:none;
}
.lead-pop__ico svg{width:16px;height:16px}

.lead-pop__field input{
  width:100%;
  padding:14px 14px 14px 40px;
  background:rgba(255,255,255,.045);
  border:1px solid var(--line);
  border-radius:var(--r);
  color:var(--fg-strong);
  font:500 14.5px/1.2 var(--ff-body);
  transition:border-color .18s,background .18s;
}
.lead-pop__field input::placeholder{color:var(--fg-soft)}
.lead-pop__field input:focus{
  outline:none;
  border-color:var(--gold-500);
  background:rgba(255,255,255,.07);
}
.lead-pop__field input[aria-invalid="true"]{border-color:#E03131}

.lead-pop__err{
  margin:0;padding:9px 12px;
  background:rgba(224,49,49,.10);border:1px solid rgba(224,49,49,.38);
  border-radius:var(--r);
  font-size:12.5px;color:#FF8787;
}

.lead-pop__go{
  width:100%;justify-content:center;gap:9px;
  margin-top:3px;padding:15px 18px;
  font-size:12.5px;letter-spacing:.09em;
}
.lead-pop__go svg{width:16px;height:16px;transition:transform .2s}
.lead-pop__go:hover svg{transform:translateX(3px)}
.lead-pop__go[disabled]{opacity:.6;cursor:default}
.lead-pop__go[disabled]:hover svg{transform:none}

/* ---- the WhatsApp alternative ---- */
.lead-pop__or{
  display:flex;align-items:center;gap:14px;
  margin:18px 0 14px;
  font:600 10px/1 var(--ff-head);letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg-soft);
}
.lead-pop__or::before,.lead-pop__or::after{
  content:"";flex:1;height:1px;background:var(--line);
}

.lead-pop__wa{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:14px 18px;
  background:#fff;border:1px solid #fff;border-radius:var(--r);
  color:#0B0D12;text-decoration:none;
  font:700 12.5px/1 var(--ff-head);letter-spacing:.09em;text-transform:uppercase;
  transition:background .18s,transform .18s;
}
.lead-pop__wa:hover{background:#F1F3F5;transform:translateY(-1px)}
.lead-pop__wa svg{width:19px;height:19px;color:#25D366;flex:0 0 auto}
.lead-pop__wa:focus-visible{outline:2px solid var(--gold-400);outline-offset:3px}

/* ---- after a successful registration ---- */
.lead-pop__done{text-align:center;padding:8px 0 2px}
.lead-pop__done[hidden]{display:none}
.lead-pop__tick{
  display:grid;place-items:center;width:52px;height:52px;margin:0 auto 16px;
  border-radius:50%;
  background:rgba(201,162,39,.12);border:1px solid rgba(201,162,39,.45);
  color:var(--gold-400);
}
.lead-pop__tick svg{width:26px;height:26px}
.lead-pop__done h2{
  margin:0 0 8px;
  font:800 20px/1.25 var(--ff-head);text-transform:uppercase;color:var(--fg-strong);
}
.lead-pop__done p{margin:0 0 20px;font-size:13.5px;line-height:1.6;color:var(--fg-muted)}
.lead-pop__later{
  margin-top:12px;background:none;border:0;
  color:var(--fg-soft);font:500 12.5px var(--ff-body);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
}
.lead-pop__later:hover{color:var(--fg-hi)}

/* On phones the sticky CTA bar owns the bottom of the screen; lift clear. */
@media (max-width:860px){
  .lead-pop{padding:16px 16px 84px;align-items:center}
  .lead-pop__card{padding:26px 20px 22px}
}

/* The home page no longer carries the portrait, so the credential that used to
   sit beneath it moves into the copy column and hugs its own content. */
.about-cred{
  display:inline-block;margin-top:26px;padding:16px 20px;
  border:1px solid var(--line);border-left:3px solid var(--gold-500);
  border-radius:var(--r);background:var(--panel);
}
.about-cred b{display:block;font-family:var(--ff-head);color:var(--fg-strong);font-size:.92rem}
.about-cred span{font-size:.8rem;color:var(--fg-muted)}

/* One column once the portrait is gone. Without a cap the paragraphs would run
   the full 1680px of the page, which is past the point of being readable. */
.about-grid.about-grid--solo{max-width:940px}
@media(min-width:980px){
  .about-grid.about-grid--solo{grid-template-columns:1fr}
}