/* ==================================================================
   KESHIA FREELAND ARMSTRONG — SITE STYLES
   One stylesheet for the whole site. Every colour is a token from the
   brand palette; nothing is mixed by eye.

     Green  #005542  is who she is  — headlines, buttons, dark bands
     Royal  #183C9F  is what you click — links and ONE button per page
     Gold   #D8A818  is the mark — rules and marks only, never text

   If you are changing a colour, change the token in :root. Do not
   paste a hex value anywhere else in this file.
   ================================================================== */
:root{
  --page:#FFFFFF;      --surface:#F0F8F4;   --border:#D1D9D5;
  --border-strong:#919694; --band:#05241C;  --band-warm:#FFF4DC;
  --ink:#1E1F1F;       --muted:#606462;
  --headline:#005542;  --inverse:#FFFFFF;   --on-band:#CBF2E4;
  --btn:#005542;       --btn-hover:#003B2D;
  --cta:#183C9F;       --cta-hover:#101080;
  --link:#183C9F;      --link-underline:#99BAFE;
  --focus:#376FFE;     --focus-dark:#99BAFE;
  --accent:#D8A818;    --tag-bg:#F0F5FF;    --tag-text:#183C9F;
  --accent-text:#281C00;
  --r-btn:10px; --r-card:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);
  font-family:Karla,system-ui,-apple-system,sans-serif;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:Fraunces,Georgia,serif;font-weight:400;
  letter-spacing:-.02em;line-height:1.06;margin:0;color:var(--headline)}
p{margin:0}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;width:100%}
/* photo sections that earned more room. Only for sources 1000px or
   wider: worship (533px), mission (600px) and blazer (671px) stay 1180 */
.wrap.wide{max-width:1360px}
.sec{padding:96px 40px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;background:#fff;padding:10px 16px;z-index:200}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.hero :focus-visible,.speak :focus-visible,.story :focus-visible,
.ladder :focus-visible,.optin :focus-visible,.foot :focus-visible,
.phero.dark :focus-visible{outline-color:var(--focus-dark)}

/* ---------- eyebrow + the 46x3 gold rule ---------- */
.eye{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.eye::after{content:"";display:block;width:46px;height:3px;border-radius:2px;
  background:var(--accent);margin-top:12px}
.eye.ctr{text-align:center}
.eye.ctr::after{margin-left:auto;margin-right:auto}
.eye.lt{color:var(--on-band)}
.head{max-width:640px;margin:0 0 44px}
.head.ctr{margin-left:auto;margin-right:auto;text-align:center}
.head h2{font-size:clamp(30px,3.7vw,46px)}
.head p{margin-top:16px;color:var(--muted);font-size:17px}
.ladder .head h2,.story h2,.speak h2,.optin h2{color:var(--inverse)}
.ladder .head p{color:var(--on-band)}

/* ---------- buttons ---------- */
.b{display:inline-flex;align-items:center;justify-content:center;
  font-family:Karla,sans-serif;font-size:14.5px;font-weight:700;letter-spacing:.01em;
  padding:14px 24px;border-radius:var(--r-btn);border:0;cursor:pointer;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease;
  margin:0 10px 10px 0}
.b1{background:var(--btn);color:#fff}
.b1:hover{background:var(--btn-hover)}
.b-cta{background:var(--cta);color:#fff}         /* the ONE royal action */
.b-cta:hover{background:var(--cta-hover)}
.b2{background:transparent;color:var(--headline);
  box-shadow:inset 0 0 0 1.5px var(--border-strong)}
.b2:hover{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--headline)}
.bw{background:#fff;color:var(--headline)}
.bw:hover{background:var(--surface)}
.bwo{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.bwo:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1.5px #fff}

/* ---------- announcement bar ---------- */
.bar{background:var(--band);color:var(--on-band);text-align:center;
  font-size:13.5px;padding:11px 20px;border-bottom:3px solid var(--accent)}
.bar b{font-weight:400}
.bar a{color:#fff;font-weight:700;border-bottom:1.5px solid var(--accent);padding-bottom:1px}

/* ---------- nav ---------- */
.nav{display:flex;align-items:center;gap:24px;padding:18px 40px;position:relative;
  border-bottom:1px solid var(--border);background:var(--page)}
.mark{font-family:Fraunces,serif;font-size:21px;color:var(--headline);
  line-height:1.1;margin-right:auto;white-space:nowrap}
.nav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0;
  font-size:14.5px;font-weight:500;color:var(--muted)}
.nav ul li.on>a{color:var(--headline);font-weight:700}
.nav ul a:hover{color:var(--link)}
.nav li.mob{display:none}   /* Contact: in the mobile menu only */
/* Events dropdown. Opens on hover and on keyboard focus; the ::after on
   the li bridges the gap so the pointer can travel down into it. */
.nav li.sub{position:relative}
.nav li.sub>a::after{content:"";display:inline-block;width:6px;height:6px;
  border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);
  margin:0 0 3px 7px}
.nav li.sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:18px}
.nav li.sub>ul{display:none;position:absolute;top:calc(100% + 18px);left:-18px;z-index:90;
  flex-direction:column;gap:0;min-width:300px;padding:8px 0;background:var(--page);
  border:1px solid var(--border);border-radius:var(--r-card);
  box-shadow:0 20px 44px rgba(16,22,26,.14)}
.nav li.sub:hover>ul,.nav li.sub:focus-within>ul{display:flex}
.nav li.sub>ul a{display:block;padding:11px 18px;white-space:nowrap;color:var(--ink);
  font-weight:500}
.nav .b{margin:0;padding:11px 18px;font-size:13px}
.navtog{display:none;background:none;border:1px solid var(--border-strong);
  border-radius:8px;padding:9px;cursor:pointer;line-height:0;order:3}
.navtog span{display:block;width:19px;height:2px;background:var(--headline);
  transition:transform .22s ease,opacity .18s ease}
.navtog span+span{margin-top:5px}

/* ---------- the video hero ---------- */
.hero{position:relative;min-height:min(92vh,860px);display:flex;align-items:center;
  overflow:hidden;background:var(--band);padding:0 40px}
.vbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform-origin:58% 42%}
.vbg.kb{animation:kb 30s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.06)}to{transform:scale(1.18) translate3d(-2.2%,-1.6%,0)}}
.vscrim{position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(5,36,28,.93) 0%,rgba(5,36,28,.78) 36%,
  rgba(5,36,28,.34) 68%,rgba(5,36,28,.5) 100%),
  linear-gradient(180deg,rgba(5,36,28,.7) 0%,rgba(5,36,28,0) 24%,
  rgba(5,36,28,0) 60%,rgba(5,36,28,.8) 100%)}
.hero.playing .vscrim{background:
  linear-gradient(100deg,rgba(5,36,28,.88) 0%,rgba(5,36,28,.7) 36%,
  rgba(5,36,28,.26) 68%,rgba(5,36,28,.44) 100%),
  linear-gradient(180deg,rgba(5,36,28,.66) 0%,rgba(5,36,28,0) 24%,
  rgba(5,36,28,0) 60%,rgba(5,36,28,.78) 100%)}
.hero-in{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto;
  padding:150px 0 110px}
.hero .eye{color:var(--accent)}
.hero h1{color:#fff;font-size:clamp(44px,6.4vw,92px);line-height:.98;margin-bottom:22px;
  text-shadow:0 2px 30px rgba(0,0,0,.45)}
.hero h1 em{font-style:italic;font-weight:300}
.hero .lede{max-width:31em;color:#E4EFEA;font-size:clamp(16.5px,1.3vw,19px);
  margin-bottom:30px;text-shadow:0 1px 18px rgba(0,0,0,.5)}
.hero .fine{margin-top:22px;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:#A9C6BA}
.hero-col{width:100%}
.hero .fine a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);background:var(--surface);
  border-bottom:1px solid var(--border)}
.stats div{padding:38px 24px;text-align:center;border-right:1px solid var(--border)}
.stats div:last-child{border-right:0}
.stats b{display:block;font-family:Fraunces,serif;font-weight:400;font-size:46px;
  color:var(--headline);line-height:1}
.stats span{display:block;margin-top:8px;font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---------- router cards ---------- */
.rg{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rg>div{background:var(--page);border:1px solid var(--border);border-radius:var(--r-card);
  padding:26px 22px 22px;display:flex;flex-direction:column;transition:.16s}
.rg>div:hover{border-color:var(--headline);box-shadow:0 10px 30px rgba(16,22,26,.07)}
.rg h3{font-size:21px;font-weight:500;margin-bottom:9px}
.rg p{color:var(--muted);font-size:15px;margin-bottom:auto;padding-bottom:22px}
.rg .b{align-self:flex-start;margin:0;padding:12px 18px;font-size:13.5px}

/* ---------- offer ladder, on the dark band ---------- */
.ladder{background:var(--band)}
.lg{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lg article{background:rgba(255,255,255,.06);border:1px solid rgba(216,168,24,.24);
  border-radius:var(--r-card);padding:26px 24px 24px;display:flex;flex-direction:column}
.lg article.warm{background:var(--band-warm);border-color:var(--band-warm)}
/* gold cards: dark text on gold (8:1), green buttons */
.lg.gold{grid-template-columns:repeat(4,1fr)}
.lg.gold article{background:var(--accent);border-color:var(--accent)}
.lg.gold h3{color:var(--accent-text)}
.lg.gold p{color:var(--accent-text)}
.lg.gold .tag{background:rgba(255,255,255,.85);color:var(--accent-text)}
.lg.gold .b{background:var(--btn);color:#fff;box-shadow:none}
.lg.gold .b:hover{background:var(--btn-hover)}
.lg article.warm h3{color:#003B2D}
.lg article.warm p{color:#5E5432}
.lg article.warm .tag{background:#fff;color:var(--accent-text)}
.lg h3{color:#fff;font-size:23px;font-weight:500;margin:14px 0 9px}
.lg p{color:var(--on-band);font-size:15px;margin-bottom:auto;padding-bottom:24px}
.lg .b{align-self:flex-start;margin:0;padding:12px 18px;font-size:13.5px}
.tag{align-self:flex-start;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  background:var(--tag-bg);color:var(--tag-text);padding:6px 10px;border-radius:6px}

/* ---------- her story, dark band ---------- */
.story{background:var(--band);color:#fff}
.story .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center}
.story h2{color:#fff;font-size:clamp(28px,3.4vw,42px);margin-bottom:20px}
.story p{color:var(--on-band);font-size:16.5px;margin-bottom:16px}
.story img{border-radius:var(--r-card);width:100%;aspect-ratio:4/5;object-fit:cover;
  object-position:center 12%;border:1px solid rgba(216,168,24,.3)}
.verse{border-left:3px solid var(--accent);padding:6px 0 6px 22px;margin:26px 0 28px}
.verse q{font-family:Fraunces,serif;font-size:20px;line-height:1.4;color:#fff;
  font-style:italic;quotes:none}
.verse cite{display:block;margin-top:10px;font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  font-style:normal}

/* ---------- two-up ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
/* .wide keeps a landscape photo landscape, so two people on a stage
   are not cropped down to one */
.two img.wide{aspect-ratio:5/4}
.two img{border-radius:var(--r-card);width:100%;aspect-ratio:4/5;
  object-fit:cover;object-position:center 12%;border:1px solid var(--border)}
.two h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:22px}
.checks{list-style:none;margin:0 0 30px;padding:0}
.checks li{position:relative;padding:13px 0 13px 32px;border-bottom:1px solid var(--border);
  color:var(--muted);font-size:16px}
.checks li::before{content:"";position:absolute;left:0;top:19px;width:16px;height:16px;
  border-radius:50%;background:var(--headline)}
/* the tick is pinned to the circle's centre (left 8px, top = circle top
   + 8px), then lifted a little: its weight gathers at the corner */
.checks li::after{content:"";position:absolute;left:8px;top:27px;width:4.5px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:translate(-30%,-78%) rotate(45deg)}

/* ---------- events ---------- */
.events{background:var(--surface)}
.ev{display:grid;gap:12px}
.evrow{display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:var(--page);
  border:1px solid var(--border);border-radius:var(--r-card);padding:20px 22px}
.evtag{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;
  letter-spacing:.06em;background:var(--tag-bg);color:var(--tag-text);
  padding:9px 13px;border-radius:8px;white-space:nowrap;min-width:96px;text-align:center}
.evname{font-family:Fraunces,serif;font-size:21px;color:var(--headline);margin:0}
.evwhere{margin:3px 0 0;font-size:14.5px;color:var(--muted)}
.evrow .b{margin:0 0 0 auto;padding:12px 20px;font-size:13.5px}

/* ---------- speaking band ---------- */
.speak{background:var(--headline);color:#fff;display:grid;
  grid-template-columns:1.05fr 1fr;align-items:stretch}
.speak-t{padding:92px 56px 92px 40px;max-width:660px;margin-left:auto}
.speak h2{font-size:clamp(30px,3.7vw,46px);margin-bottom:20px}
.speak p{color:var(--on-band);font-size:16.5px;margin-bottom:26px;max-width:40em}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.tags span{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;border:1px solid rgba(216,168,24,.5);color:var(--on-band);
  padding:7px 12px;border-radius:6px}
.speak-i video{display:block;width:100%;height:100%;object-fit:cover;min-height:600px;
  background:var(--band)}
.speak-i img{width:100%;height:100%;object-fit:cover;object-position:center 14%;
  min-height:600px}

/* ---------- quotes, the one warm band: one voice at a time ----------
   Every quote sits in the same grid cell, so the band is as tall as the
   longest one and never jumps. site.js adds .on and turns the pages
   (arrows, or every ten seconds); with no script they simply stack. */
.testi{background:var(--band-warm)}
.testi .head h2{color:#003B2D}
.tsl{max-width:960px;margin:0 auto;text-align:center}
.tsl-track{display:grid;gap:28px}
.tsl blockquote{margin:0}
.tsl q{display:block;font-family:Fraunces,serif;font-size:clamp(22px,2.3vw,30px);
  line-height:1.32;color:#003B2D;quotes:none;max-width:34em;margin:0 auto}
.tsl cite{display:block;margin-top:22px;font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  font-style:normal}
.tsl.on .tsl-track{gap:0}
.tsl.on .tsl-track>blockquote{grid-area:1/1;visibility:hidden;opacity:0;
  transition:opacity .35s ease,visibility 0s linear .35s}
.tsl.on .tsl-track>blockquote.cur{visibility:visible;opacity:1;
  transition:opacity .35s ease,visibility 0s}
.tsl-nav{display:none;align-items:center;justify-content:center;gap:18px;margin-top:36px}
.tsl.on .tsl-nav{display:flex}
.tsl-btn{position:relative;width:46px;height:46px;padding:0;border-radius:50%;
  border:1.5px solid var(--border-strong);background:transparent;color:var(--headline);
  cursor:pointer;transition:border-color .16s ease,background .16s ease}
.tsl-btn:hover{border-color:var(--headline);background:var(--page)}
/* the chevrons are the nav dropdown's arrow, turned */
.tsl-btn::before{content:"";position:absolute;top:50%;left:50%;width:10px;height:10px;
  border:solid currentColor;border-width:0 1.5px 1.5px 0;
  transform:translate(-65%,-50%) rotate(-45deg)}
.tsl-prev::before{transform:translate(-35%,-50%) rotate(135deg)}
.tsl-n{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;
  color:var(--muted);min-width:4.5em}

/* ---------- sound button on the speaking-band clip ---------- */
.speak-i{position:relative}
.snd{position:absolute;right:18px;bottom:18px;display:inline-flex;align-items:center;gap:9px;
  padding:10px 16px 10px 13px;border:0;border-radius:999px;cursor:pointer;
  background:rgba(5,36,28,.78);color:#fff;font:600 13px/1 Karla,sans-serif;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.snd:hover{background:rgba(5,36,28,.92)}
.snd:focus-visible{outline:3px solid var(--focus-dark);outline-offset:2px}
.snd-i{position:relative;width:16px;height:14px}
.snd-i::before{content:"";position:absolute;left:0;top:3px;width:6px;height:8px;background:#fff;
  clip-path:polygon(0 25%,45% 25%,100% 0,100% 100%,45% 75%,0 75%)}
.snd-i::after{content:"";position:absolute;left:9px;top:2px;width:7px;height:10px;
  border:solid #fff;border-width:0 2px 0 0;border-radius:50%}
.snd[aria-pressed="false"] .snd-i::after{border:0;width:8px;height:2px;top:6px;left:8px;
  background:#fff;transform:rotate(45deg);border-radius:0;box-shadow:0 0 0 0 #fff}

/* ---------- outreach photos (About) ---------- */
.mission-cap{margin-top:14px;font-size:14.5px;color:var(--on-band)}
.mission-cap a{color:var(--inverse)}
.story p.mission-cap{margin:-8px 0 24px;font-size:14.5px}
.mstrip{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.story .mstrip img{aspect-ratio:4/3;border-radius:var(--r-card)}
.vids.two-up{grid-template-columns:repeat(2,1fr)}

/* ---------- outreach photo grid (Partner) ---------- */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:6px 0 34px}
.pgrid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-card)}

/* ---------- Instagram plug ---------- */
.igp{background:var(--page)}
.igrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 30px}
.igrid img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;transition:opacity .2s}
.igrid:hover img{opacity:.85}
.igp p.ctr{text-align:center}
.igp .social .b{margin:0 5px 10px}

/* ---------- full-width photo band ---------- */
.pband{position:relative;min-height:min(72vh,640px);display:flex;align-items:flex-end;
  justify-content:flex-end;overflow:hidden;background:var(--band)}
.pband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pband::after{content:"";position:absolute;inset:0;background:
  linear-gradient(270deg,rgba(5,36,28,.88) 0%,rgba(5,36,28,.45) 38%,rgba(5,36,28,0) 64%),
  linear-gradient(0deg,rgba(5,36,28,.55) 0%,rgba(5,36,28,0) 40%)}
.pband-t{position:relative;z-index:1;max-width:28em;padding:56px 56px 60px;text-align:right}
.pband .eye{color:var(--accent)}
.pband .eye::after{margin-left:auto}
.pband-l{font-family:Fraunces,serif;font-weight:300;font-size:clamp(24px,2.6vw,36px);
  line-height:1.2;color:var(--inverse);margin:0}

/* ---------- where she has ministered ---------- */
.proof{background:var(--page);border-bottom:1px solid var(--border);padding:34px 0 30px}
.proof .eye{margin-bottom:22px}

/* ---------- scrolling row (the logo strip) ----------
   The track holds the items twice (site.js adds the copy), and slides
   left by exactly one copy, so the loop has no seam. Hover pauses it. */
.marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marq-track{display:flex;width:max-content;list-style:none;margin:0;padding:0;
  animation:marq var(--marq-time,40s) linear infinite}
.marq:hover .marq-track,.marq:focus-within .marq-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marq{-webkit-mask-image:none;mask-image:none}
  .marq-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
  .marq-track [aria-hidden="true"]{display:none}}
.proof li{display:flex;align-items:center;gap:10px;height:76px;padding:0 34px;
  filter:grayscale(1);opacity:.72;transition:filter .3s,opacity .3s}
.proof li:hover{filter:none;opacity:1}
.proof li img{height:64px;width:auto}
.proof li img[src*="redeeming"]{height:38px}
.proof .lw{font-family:Fraunces,serif;font-size:20px;line-height:1.05;color:var(--ink);
  white-space:nowrap}
.proof .lw small{display:block;font-family:'IBM Plex Mono',monospace;font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:5px}

/* ---------- opt-in ---------- */
.optin{background:var(--headline);color:#fff}
.optin .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.optin h2{color:#fff;font-size:clamp(26px,3vw,38px);margin-bottom:14px}
.optin p{color:var(--on-band);font-size:16.5px}
.form input{width:100%;padding:15px 16px;border-radius:var(--r-btn);border:0;
  font-family:Karla,sans-serif;font-size:15.5px;margin-bottom:11px;color:var(--ink);
  background:#fff}
.form input::placeholder{color:var(--muted)}
.form button{width:100%;background:#fff;color:var(--headline);font-weight:700;
  font-family:Karla,sans-serif;font-size:14.5px;padding:15px;border:0;
  border-radius:var(--r-btn);cursor:pointer}
.form button:hover{background:var(--band-warm)}
.form small{display:block;margin-top:11px;font-size:12.5px;color:var(--on-band)}

/* ---------- footer ---------- */
.foot{background:var(--band);color:#fff;padding:72px 40px 34px}
.fg{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;
  max-width:1180px;margin:0 auto}
.fmark{font-family:Fraunces,serif;font-size:23px;color:#fff;line-height:1.15}
/* thank-you page: the h1 takes the story band's heading style */
.thanks h1{color:var(--inverse);font-size:clamp(30px,3.6vw,46px);margin-bottom:20px}
.thanks .t-msg>div:last-child .b{margin-top:10px}
.ftag{margin-top:12px;font-family:Fraunces,serif;font-style:italic;font-weight:300;
  font-size:16px;color:var(--on-band);max-width:16em}
.foot h4{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:8px}
.foot h4::after{content:"";display:block;width:46px;height:3px;border-radius:2px;
  background:var(--accent);margin-top:10px}
.foot ul{list-style:none;margin:14px 0 0;padding:0;color:var(--on-band);font-size:15px;
  line-height:2.1}
.foot ul a:hover{color:#fff}
.legal{max-width:1180px;margin:52px auto 0;padding-top:22px;font-size:13px;
  color:#7FAF9C;border-top:1px solid rgba(216,168,24,.32)}

/* ==================================================================
   INTERIOR PAGES
   ================================================================== */
.phero{background:var(--surface);border-bottom:1px solid var(--border);
  padding:78px 40px 70px}
.phero h1{font-size:clamp(36px,5vw,64px);max-width:16em;margin-bottom:18px}
.phero .lede{max-width:44em;color:var(--muted);font-size:clamp(17px,1.4vw,20px)}
.phero .b{margin-top:30px}
.phero.dark{background:var(--band);border-bottom:0}
.phero.dark h1{color:#fff}
.phero.dark .lede{color:var(--on-band)}
.phero.dark .eye{color:var(--on-band)}

/* ---- interior hero variants ----
   split  copy on the content column, portrait bleeding to the right
          edge. The header is its own grid: gutter | 560 | 620 | gutter.
          560+620 is the 1180 .wrap and the gutters share the rest, so the
          copy's left edge lands exactly where .wrap's does (130px at 1440,
          40px at 1260 and below). No column-gap: it would shift that; the
          breathing room is the copy's padding-right.
   plain  a white ground, for the cut-out portraits (Work with Keshia)
   prod   the book mock-up shown whole, with a soft gold glow (Book)
   cine   full-bleed photo, the homepage scrim, copy bottom-left; .r puts
          the copy bottom-right (Speaking, Events)
   tight  the compact typographic one (Contact) ---- */
.phero.split{display:grid;align-items:stretch;padding:0;
  grid-template-columns:minmax(40px,1fr) minmax(0,560px) minmax(0,620px) minmax(0,1fr)}
.phero.split .copy{grid-column:2;align-self:center;padding:64px 56px 64px 0}
.phero.split .fig{grid-column:3/5;position:relative;background:var(--surface);
  min-height:clamp(480px,56vh,560px)}
.phero.split .fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero.split .fig::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--surface) 0%,transparent 16%)}
.phero.split h1{font-size:clamp(32px,3.8vw,50px)}
.phero.split.plain,.phero.split.plain .fig{background:var(--page)}
/* the cut-out keeps its own shape: 140% of the box tall, centred in the
   column, cropped below the chest. Stretched across the column, a 2:3
   portrait shows only the face */
.phero.split.plain .fig{overflow:hidden}
.phero.split.plain .fig img{inset:auto;top:0;left:50%;width:auto;height:140%;max-width:none;
  transform:translateX(-50%)}
.phero.split.plain .fig::after{background:linear-gradient(90deg,var(--page) 0%,transparent 16%)}
.phero.dark.split .fig{background:var(--band)}
.phero.dark.split .fig::after{background:linear-gradient(90deg,rgba(5,36,28,.55) 0%,rgba(5,36,28,0) 22%)}
.phero.prod .fig{display:flex;align-items:center;justify-content:center;
  padding:48px 40px;overflow:hidden}
.phero.prod .fig::after{display:none}
.phero.prod .fig::before{content:"";position:absolute;left:50%;top:50%;width:620px;
  height:620px;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(216,168,24,.3) 0%,rgba(216,168,24,.1) 36%,
  rgba(5,36,28,0) 66%)}
.phero.prod .fig img{position:relative;inset:auto;width:min(100%,520px);height:auto;
  object-fit:contain;filter:drop-shadow(0 30px 40px rgba(0,0,0,.35))}
.phero.cine{position:relative;display:flex;align-items:flex-end;overflow:hidden;
  min-height:clamp(480px,62vh,580px);padding:0 40px}
.phero.cine .fig{position:absolute;inset:0}
.phero.cine .fig img,.phero.cine .fig .vbg{width:100%;height:100%;object-fit:cover}
/* the Speaking clip: she is on the right of the frame; x keeps her in on a phone */
.phero.cine .fig .vbg{object-position:72% 30%}
.phero.cine .fig::after{content:"";position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(5,36,28,.93) 0%,rgba(5,36,28,.78) 36%,
  rgba(5,36,28,.34) 68%,rgba(5,36,28,.5) 100%),
  linear-gradient(180deg,rgba(5,36,28,.35) 0%,rgba(5,36,28,0) 30%,
  rgba(5,36,28,0) 55%,rgba(5,36,28,.82) 100%)}
/* once footage is moving the scrim eases a little, as on the homepage */
.phero.cine.playing .fig::after{background:
  linear-gradient(100deg,rgba(5,36,28,.88) 0%,rgba(5,36,28,.7) 36%,
  rgba(5,36,28,.26) 68%,rgba(5,36,28,.44) 100%),
  linear-gradient(180deg,rgba(5,36,28,.3) 0%,rgba(5,36,28,0) 30%,
  rgba(5,36,28,0) 55%,rgba(5,36,28,.78) 100%)}
.phero.cine .wrap{position:relative;z-index:1;padding:72px 0 64px}
.phero.cine h1{max-width:12em;text-shadow:0 2px 30px rgba(0,0,0,.45)}
.phero.cine .lede{max-width:30em;text-shadow:0 1px 18px rgba(0,0,0,.5)}
.phero.cine .eye{color:var(--accent)}
.phero.cine.r .fig::after{background:
  linear-gradient(260deg,rgba(5,36,28,.93) 0%,rgba(5,36,28,.78) 36%,
  rgba(5,36,28,.34) 68%,rgba(5,36,28,.5) 100%),
  linear-gradient(180deg,rgba(5,36,28,.35) 0%,rgba(5,36,28,0) 30%,
  rgba(5,36,28,0) 55%,rgba(5,36,28,.82) 100%)}
.phero.cine.r .wrap{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.phero.cine.r .eye::after{margin-left:auto}
.phero.tight{padding:56px 40px 50px}
.phero.tight h1{font-size:clamp(32px,4vw,50px);margin-bottom:12px}
.phero.tight .lede{font-size:clamp(16px,1.2vw,18px)}

.prose{max-width:44em}
.prose p{margin-bottom:20px;font-size:17.5px;color:var(--ink)}
.prose p.big{font-size:21px;line-height:1.5;color:var(--headline);font-family:Fraunces,serif}
.prose ul{margin:0 0 22px;padding:0;list-style:none}
.prose ul li{position:relative;padding:9px 0 9px 26px;color:var(--muted);font-size:16.5px;
  border-bottom:1px solid var(--border)}
.prose ul li::before{content:"";position:absolute;left:0;top:19px;width:8px;height:8px;
  border-radius:2px;background:var(--accent)}

.pro{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.pro article{background:var(--page);border:1px solid var(--border);
  border-radius:var(--r-card);padding:30px 28px}
.pro img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;
  border-radius:var(--r-card);margin-bottom:24px;background:var(--surface)}
.pro h3{font-size:25px;margin-bottom:4px}
.pro .role{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.pro p{color:var(--muted);font-size:16px;margin-bottom:14px}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
.steps article{counter-increment:s}
.steps article::before{content:"0" counter(s);display:block;
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.16em;
  color:var(--accent);margin-bottom:14px;padding-bottom:14px;
  border-bottom:1px solid var(--border)}
.steps h3{font-size:21px;margin-bottom:8px}
.steps p{color:var(--muted);font-size:15.5px}
.ladder .steps article::before,.story .steps article::before{
  border-bottom-color:rgba(216,168,24,.3)}
.ladder .steps h3,.story .steps h3{color:#fff}
.ladder .steps p,.story .steps p{color:var(--on-band)}

.topics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.topics article{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-card);padding:26px 24px}
.topics h3{font-size:20px;margin-bottom:9px}
.topics p{color:var(--muted);font-size:15px}

.books{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.bk{display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:start;
  background:var(--page);border:1px solid var(--border);border-radius:var(--r-card);
  padding:28px}
.bk .cov{width:150px;aspect-ratio:2/3;object-fit:contain;border-radius:6px;
  background:var(--surface);border:1px solid var(--border);padding:8px}
.bk.one{grid-template-columns:1fr}
.bk h3{font-size:24px;margin-bottom:6px}
.bk .sub{font-style:italic;color:var(--muted);font-size:15.5px;margin-bottom:14px}
.bk p{color:var(--muted);font-size:15.5px;margin-bottom:18px}
.bk .b{margin:0}

.faq{max-width:48em}
.faq details{border-bottom:1px solid var(--border);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;padding:19px 0;font-family:Fraunces,serif;
  font-size:20px;color:var(--headline);display:flex;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"";flex:0 0 auto;width:10px;height:10px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform .2s ease;margin-top:-4px}
.faq details[open] summary::before{transform:rotate(-135deg);margin-top:4px}
.faq p{color:var(--muted);font-size:16.5px;padding:0 0 20px 24px}

.bigform{max-width:640px}
.bigform .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bigform label{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin:0 0 7px}
.bigform .f{margin-bottom:18px}
.bigform input,.bigform select,.bigform textarea{width:100%;padding:14px 15px;
  font-family:Karla,sans-serif;font-size:16px;color:var(--ink);background:var(--page);
  border:1px solid var(--border-strong);border-radius:var(--r-btn)}
.bigform textarea{min-height:130px;resize:vertical}
.bigform input:focus,.bigform select:focus,.bigform textarea:focus{
  outline:3px solid var(--focus);outline-offset:1px;border-color:var(--link)}
.bigform .note{font-size:13.5px;color:var(--muted);margin-top:12px}
.bigform .b{margin:6px 0 0}

.routes{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:56px}
.routes article{border:1px solid var(--border);border-radius:var(--r-card);
  padding:26px 24px;background:var(--page)}
.routes h3{font-size:20px;margin-bottom:8px}
.routes p{color:var(--muted);font-size:15px;margin-bottom:16px}
.routes .b{margin:0}

.inc{columns:2;column-gap:40px;margin:0 0 30px;padding:0;list-style:none}
.inc li{break-inside:avoid;position:relative;padding:11px 0 11px 30px;
  color:var(--muted);font-size:16px;border-bottom:1px solid var(--border)}
.inc li::before{content:"";position:absolute;left:0;top:17px;width:16px;height:16px;
  border-radius:50%;background:var(--headline)}
.inc li::after{content:"";position:absolute;left:8px;top:25px;width:4.5px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:translate(-30%,-78%) rotate(45deg)}

.offer{scroll-margin-top:24px}
.offer+.offer{border-top:1px solid var(--border)}
.offer .meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}

/* ---------- video grid (Speaking) ---------- */
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.vids figure{margin:0}
.vids .frame{position:relative;aspect-ratio:16/9;border-radius:var(--r-card);
  overflow:hidden;background:var(--band);border:1px solid var(--border)}
.vids .frame iframe,.vids .frame video{position:absolute;inset:0;width:100%;height:100%;
  border:0;object-fit:cover}
.vids .pending{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;text-align:center;padding:20px;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-band)}
.vids figcaption{margin-top:12px;font-size:15px;color:var(--muted)}
.vids figcaption b{display:block;font-family:Fraunces,serif;font-size:19px;
  color:var(--headline);font-weight:500;margin-bottom:3px}

/* ---------- partner steps ---------- */
.psteps{display:grid;gap:12px;counter-reset:p}
.psteps article{counter-increment:p;display:grid;grid-template-columns:64px 1fr;
  gap:20px;align-items:start;background:var(--page);border:1px solid var(--border);
  border-radius:var(--r-card);padding:24px}
.psteps article::before{content:"0" counter(p);font-family:Fraunces,serif;font-size:28px;
  color:var(--accent);line-height:1}
.psteps h3{font-size:20px;margin-bottom:6px}
.psteps p{color:var(--muted);font-size:16px}

/* ---------- 404 ---------- */
.nf{text-align:center;padding:120px 40px 130px}
.nf h1{font-size:clamp(40px,6vw,74px);margin-bottom:16px}
.nf p{color:var(--muted);font-size:18px;max-width:34em;margin:0 auto 30px}

/* ---------- lists on the dark bands: gold marks, not green on green ---------- */
.story .inc li,.ladder .inc li,.phero.dark .inc li{color:var(--on-band);
  border-bottom-color:rgba(216,168,24,.28)}
.story .inc li::before,.ladder .inc li::before,.phero.dark .inc li::before{
  background:var(--accent)}
.story .inc li::after,.ladder .inc li::after,.phero.dark .inc li::after{
  border-color:var(--accent-text)}
.story .checks li,.ladder .checks li{color:var(--on-band);
  border-bottom-color:rgba(216,168,24,.28)}
.story .checks li::before,.ladder .checks li::before{background:var(--accent)}
.story .checks li::after,.ladder .checks li::after{border-color:var(--accent-text)}
.story .prose p,.ladder .prose p{color:var(--on-band)}

/* ==================================================================
   MOBILE
   ================================================================== */
@media (max-width:960px){
  .sec{padding:60px 22px}
  .nav{padding:12px 16px;gap:10px;flex-wrap:nowrap}
  .nav ul{display:none}
  .navtog{display:block}
  .mark{font-size:16px}
  .nav .b{order:2;padding:10px 13px;font-size:12px;white-space:nowrap}
  .nav.open ul{display:flex;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;background:var(--page);padding:6px 22px 22px;
    border-bottom:1px solid var(--border);box-shadow:0 20px 44px rgba(16,22,26,.14);z-index:80}
  .nav.open ul li{padding:15px 0;border-bottom:1px solid var(--surface);font-size:17px}
  .nav.open li.sub::after{display:none}
  .nav.open li.sub>ul{display:flex;position:static;min-width:0;padding:6px 0 0 16px;
    background:none;border:0;border-radius:0;box-shadow:none}
  .nav.open li.sub>ul li{padding:9px 0;border-bottom:0;font-size:15.5px}
  .nav.open li.sub>ul a{padding:0;white-space:normal;color:var(--muted)}
  .nav.open .navtog span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav.open .navtog span:nth-child(2){opacity:0}
  .nav.open .navtog span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav.open li.mob{display:list-item}
  .hero{min-height:auto;padding:0 22px}
  .hero-in{padding:120px 0 70px}
  .hero h1{font-size:42px}
  .b{display:block;width:100%;margin:0 0 10px}
  .nav .b,.evrow .b{display:inline-flex;width:auto}
  .stats{grid-template-columns:1fr}
  .stats div{border-right:0;border-bottom:1px solid var(--border);padding:26px 20px}
  .rg,.lg,.lg.gold,.ev,.vids,.vids.two-up{grid-template-columns:1fr}
  .proof{padding:28px 22px}
  .pband{min-height:440px}
  .igrid{grid-template-columns:repeat(2,1fr)}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .pband::after{background:linear-gradient(0deg,rgba(5,36,28,.9) 0%,rgba(5,36,28,.4) 45%,rgba(5,36,28,0) 70%)}
  .pband-t{padding:0 22px 34px;text-align:left}
  .pband .eye::after{margin-left:0}
  .proof li{height:60px;padding:0 22px}
  .proof li img{height:48px}
  .proof li img[src*="redeeming"]{height:30px}
  .two,.story .wrap,.optin .wrap{grid-template-columns:1fr;gap:30px}
  .two img,.story img{aspect-ratio:3/4}
  .two img.wide{aspect-ratio:5/4}
  .speak{grid-template-columns:1fr}
  .speak-t{padding:56px 22px}
  .speak-i img{min-height:340px}
  .speak-i video{min-height:0;height:auto;aspect-ratio:16/9}
  .evrow .b{margin-left:0}
  .foot{padding:56px 22px 28px}
  .fg{grid-template-columns:1fr 1fr;gap:30px}
  .phero{padding:52px 22px 46px}
  .phero.split{grid-template-columns:1fr}
  .phero.split .copy{grid-column:1;padding:40px 22px 46px}
  .phero.split .fig{grid-column:1;order:-1;min-height:0;aspect-ratio:4/5;max-height:440px}
  .phero.split .fig::after,.phero.split.plain .fig::after{background:none}
  .phero.dark.split .fig::after{background:linear-gradient(0deg,rgba(5,36,28,.6) 0%,rgba(5,36,28,0) 22%)}
  .phero.prod .fig{aspect-ratio:auto;max-height:none;padding:40px 22px 0}
  .phero.prod .fig img{width:min(100%,340px)}
  .phero.cine{min-height:min(70vh,520px);padding:0 22px}
  .phero.cine .wrap{padding:160px 0 40px}
  .phero.cine .fig::after,.phero.cine.r .fig::after{background:linear-gradient(0deg,rgba(5,36,28,.92) 0%,
    rgba(5,36,28,.6) 40%,rgba(5,36,28,.15) 72%,rgba(5,36,28,.3) 100%)}
  .phero.cine.r .wrap{align-items:flex-start;text-align:left}
  .phero.cine.r .eye::after{margin-left:0}
  .phero.tight{padding:40px 22px 36px}
  .pro,.books,.topics,.routes,.steps{grid-template-columns:1fr}
  .bk{grid-template-columns:1fr;gap:18px}
  .bk .cov{width:120px}
  .bigform .row{grid-template-columns:1fr}
  .inc{columns:1}
  .psteps article{grid-template-columns:1fr;gap:10px}
  .nf{padding:80px 22px 90px}
}
/* small phones (360-400px): the wordmark, Book Keshia and the menu button
   have to share one row */
@media (max-width:400px){
  .nav{padding:12px 14px;gap:8px}
  .mark{font-size:15px}
  .nav .b{padding:9px 10px;font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){
  .vbg.kb{animation:none;transform:scale(1.06)}
  .tsl.on .tsl-track>blockquote,.tsl.on .tsl-track>blockquote.cur{transition:none}
  html{scroll-behavior:auto}
}