/* ============================================================
   Center for Ethics in Suicide-Safer Care
   "The Charted Course" — a celestial-navigation editorial system.
   Brand colors held per client spec (deep purple / turquoise / gold);
   everything else redesigned 2026-07-20.
   Type: Newsreader (editorial serif) · Public Sans (UI) · IBM Plex Mono (instruments)
   Motif: compass rose, bearing ticks, chart linework. Gold = true north.
   ============================================================ */

:root{
  /* Brand (locked) */
  --purple:#571F7D;
  --turquoise:#3FB8A0;
  --gold:#C8A84B;

  /* Extended */
  --purple-lit:#9A5AD0;
  --ink:#3B1661;          /* deepest ground — medium-dark purple (client: was too black) */
  --ink-2:#4C2179;        /* raised panel on dark */
  --ink-3:#5C2C90;        /* hover on dark */
  --banner:#40155F;       /* hero/banner band — client 7/26 wanted the banner distinct from the page ground */
  --banner-2:#2C0E45;     /* banner gradient foot */
  --turquoise-lit:#63D7BE;
  --turquoise-deep:#256E5A;
  --gold-bright:#F0C860;  /* true north, on dark */
  --gold-warm:#9C7521;    /* gold text on light */

  /* Surfaces */
  --parchment:#F5EFE2;    /* warm chart-paper reading ground */
  --parchment-2:#EDE4D1;  /* raised panel on parchment */
  --paper-line:#D9CBAC;   /* hairline on parchment */
  --ink-line:rgba(240,200,96,0.20);   /* gold hairline on dark */
  --ink-line-soft:rgba(240,200,96,0.10);

  /* Text */
  --body-ink:#2E1F3C;     /* body on parchment — darkened 7/27 per client */
  --body-dark:rgba(250,245,235,0.94); /* body on dark — darkened/strengthened 7/27 per client */
  --mute-ink:#6C5A7C;
  --red:#C02A20;
  --red-deep:#8F1E18;

  --max:1180px;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--serif);
  color:var(--body-ink);
  background:var(--parchment);
  line-height:1.72;
  font-size:19px;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4,.serif{
  font-family:var(--serif);line-height:1.1;font-weight:500;letter-spacing:-0.015em;
  color:var(--purple);
}
h1{font-weight:400;}
a{color:inherit;}
img{max-width:100%;display:block;}
p{overflow-wrap:break-word;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 34px;}

/* ---------- Instrument label (mono kicker / bearing) ---------- */
.kicker{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--mono);text-transform:uppercase;letter-spacing:0.24em;
  font-size:12.5px;font-weight:500;color:var(--gold-warm);margin:0 0 22px;
}
.kicker::before{content:"";width:26px;height:1px;background:currentColor;flex:none;opacity:0.8;}
.kicker.on-dark{color:var(--gold-bright);}
.center{text-align:center;}
.center .kicker{justify-content:center;}

.skip{position:absolute;left:-999px;top:0;background:var(--purple);color:#fff;padding:10px 16px;z-index:999;}
.skip:focus{left:10px;top:10px;}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  position:sticky;top:0;z-index:100;
  background:rgba(59,22,97,0.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ink-line);
  transition:box-shadow .3s ease;
}
.topbar.scrolled{box-shadow:0 12px 34px rgba(20,8,28,0.34);}
.topbar .row{display:flex;align-items:center;justify-content:space-between;padding:13px 34px;max-width:var(--max);margin:0 auto;gap:18px;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;}
.brand img{height:44px;width:auto;}
.brand-name{font-family:var(--serif);font-weight:500;font-size:18px;line-height:1.12;color:#fff;letter-spacing:-0.01em;}
/* Bigger than the original 8.5px per client note, but the 0.2em tracking is what
   actually ate the header width: at 10.5px/0.2em this wrapped to two lines and
   pushed the nav (and NEED HELP NOW) onto a second row. Tighter tracking buys the
   size back for free. Must stay on one line. */
.brand-name small{
  display:block;font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:0.1em;
  color:var(--gold-bright);text-transform:uppercase;margin-top:4px;white-space:nowrap;
}
nav.main{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
nav.main > a, .dropdown > button{
  font-family:var(--sans);font-size:13.5px;text-decoration:none;color:rgba(247,241,228,0.82);
  font-weight:500;white-space:nowrap;background:none;border:none;cursor:pointer;padding:0;letter-spacing:0.01em;
  position:relative;transition:color .2s ease;
}
nav.main > a:hover, .dropdown > button:hover{color:#fff;}
nav.main > a:not(.help-btn)::after{
  content:"";position:absolute;left:0;bottom:-6px;height:1.5px;width:100%;
  background:var(--gold-bright);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
nav.main > a:not(.help-btn):hover::after{transform:scaleX(1);}
nav.main > a.active{color:#fff;}
nav.main > a.active::after{transform:scaleX(1);}
.dropdown{position:relative;}
.dropdown > button::after{content:" \25BE";font-size:9px;color:var(--gold-bright);}
.dropdown-menu{
  display:none;position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  background:var(--ink-2);border:1px solid var(--ink-line);min-width:230px;padding:8px;z-index:120;
  box-shadow:0 20px 40px rgba(20,8,28,0.45);
}
.dropdown.open .dropdown-menu{display:block;}
.dropdown-menu a{display:block;padding:11px 15px;text-decoration:none;font-family:var(--sans);font-size:13px;font-weight:500;color:rgba(247,241,228,0.85);}
.dropdown-menu a:hover{background:var(--ink-3);color:var(--gold-bright);}
.help-btn, nav.main > a.help-btn{
  font-family:var(--mono);background:var(--red);color:#fff;padding:9px 17px;font-weight:500;
  font-size:11px;letter-spacing:0.14em;text-decoration:none;white-space:nowrap;text-transform:uppercase;
  border:1px solid rgba(255,255,255,0.14);
}
.help-btn:hover, nav.main > a.help-btn:hover{background:var(--red-deep);color:#fff;}
.nav-toggle{display:none;background:none;border:1px solid var(--gold-bright);color:var(--gold-bright);font-size:20px;padding:2px 11px;cursor:pointer;}
/* 1140px, not 960px: the full nav needs ~1118px (brand 298 + nav 734 + gaps/padding).
   Between 961 and 1118 it used to wrap onto a second row and drop NEED HELP NOW.
   Hand over to the hamburger before that can happen. */
@media (max-width:1140px){
  .nav-toggle{display:block;}
  nav.main{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--ink);
    flex-direction:column;align-items:flex-start;padding:18px 34px 26px;gap:17px;
    border-bottom:1px solid var(--ink-line);
  }
  nav.main.open{display:flex;}
  .dropdown-menu{position:static;transform:none;box-shadow:none;border:none;padding:6px 0 0 14px;background:none;}
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:0;text-decoration:none;font-family:var(--mono);
  font-weight:500;font-size:12px;padding:15px 26px;letter-spacing:0.12em;text-transform:uppercase;
  border:1px solid transparent;transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.btn::after{
  content:"\2192";display:inline-block;opacity:0;max-width:0;overflow:hidden;
  transform:translateX(-6px);transition:opacity .28s ease,transform .28s ease,max-width .28s ease,margin-left .28s ease;
}
.btn:hover::after{opacity:1;transform:none;max-width:1.4em;margin-left:10px;}
.btn-gold{background:var(--gold-bright);color:var(--ink);}
.btn-gold:hover{background:#fff;}
.btn-outline{border-color:rgba(240,200,96,0.5);color:var(--gold-bright);margin-left:14px;}
.btn-outline:hover{border-color:var(--gold-bright);background:rgba(240,200,96,0.08);}
.btn-purple{background:var(--purple);color:#fff;}
.btn-purple:hover{background:var(--ink);}
/* Crisis page needs a second, non-tel: route: tel: links silently do nothing on a
   desktop with no dialer, and in-app email browsers can block them outright. */
.btn-purple-outline{border-color:var(--purple);color:var(--purple);background:none;}
.btn-purple-outline:hover{background:var(--purple);color:#fff;}
@media (max-width:520px){.btn-outline{margin-left:0;margin-top:12px;}}

/* ============================================================
   HERO — the compass at the center
   ============================================================ */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(120% 90% at 72% 18%, rgba(63,184,160,0.10), transparent 55%),
    radial-gradient(100% 80% at 18% 92%, rgba(138,76,190,0.26), transparent 62%),
    linear-gradient(168deg, var(--banner) 0%, var(--banner-2) 100%);
  border-bottom:1px solid var(--ink-line);
}
/* The generic section{padding:112px 0} rule below also applies to .hero, which
   stacked on top of the wrap padding and left a dead band under the header. */
.hero{padding-top:0;padding-bottom:0;}
.hero .wrap{position:relative;z-index:2;padding-top:92px;padding-bottom:104px;}
/* Company name: spans the full hero width as a rule-flanked banner line, rather
   than a right-floated block that pushed the hero taller (client 7/30). */
.hero-orgname{
  position:relative;z-index:2;display:flex;align-items:center;gap:20px;
  margin:0 0 34px;font-family:var(--serif);font-weight:400;line-height:1.15;
  letter-spacing:-0.015em;font-size:clamp(19px,2.5vw,34px);color:#fff;white-space:nowrap;
}
.hero-orgname::before,.hero-orgname::after{
  content:"";height:1px;background:var(--gold-bright);opacity:0.45;flex:1 1 auto;
}
@media (max-width:760px){
  .hero-orgname{font-size:17px;gap:12px;margin-bottom:24px;white-space:normal;text-align:center;}
}
/* brand strapline — puts "risk management" in the banner (client request) */
.hero-strap{
  font-family:var(--mono);text-transform:uppercase;letter-spacing:0.18em;font-size:12.5px;
  color:var(--gold-bright);margin:0 0 30px;
}
.hero-lead{max-width:760px;}
.hero h1{
  font-size:clamp(38px,6vw,78px);margin:0 0 26px;color:#fff;font-weight:400;
  line-height:1.02;letter-spacing:-0.025em;
}
.hero h1 em{font-style:italic;color:var(--gold-bright);}
.hero .tagline{
  font-family:var(--mono);text-transform:uppercase;letter-spacing:0.24em;font-size:12px;
  color:var(--turquoise-lit);margin:0 0 30px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.hero .tagline::before{content:"\25C6";color:var(--gold-bright);font-size:9px;}
.hero p.lede{
  font-size:20px;max-width:37em;color:var(--body-dark);margin:0 0 40px;line-height:1.7;font-weight:300;
}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:0;}

/* Compass rose backdrop (inline SVG) */
.compass-bg{
  position:absolute;top:50%;right:-9%;transform:translateY(-50%);
  width:min(860px,72vw);aspect-ratio:620/420;height:auto;z-index:1;pointer-events:none;
  opacity:0.75;
}
@media (max-width:900px){
  /* Further off-canvas on phones so the brighter rings sit behind the corner
     rather than the lede. Effective ring opacity is still ~0.29 here against
     0.12 before, so the compass reads far better than it did. */
  .compass-bg{right:-46%;opacity:0.44;}
  .hero .wrap{padding-top:84px;padding-bottom:88px;}
}
/* Client 8/3: the compass outlines must read as gold so the two roses and their
   overlap are actually visible. These multiply with .compass-bg opacity, so 0.32
   was landing at 0.24 on desktop and 0.12 on mobile — effectively invisible.
   ring-t was turquoise, which also disagreed with the logo files, where the inner
   dashed ring is gold. */
.compass .ring{fill:none;stroke:var(--gold-bright);stroke-opacity:0.68;}
.compass .ring-t{fill:none;stroke:var(--gold-bright);stroke-opacity:0.40;}
.compass .tick{stroke:var(--gold-bright);stroke-opacity:0.45;}
.compass .tick-min{stroke:var(--gold-bright);stroke-opacity:0.18;}
.compass .star-n{fill:var(--gold-bright);fill-opacity:0.85;}
.compass .star-s{fill:var(--turquoise-lit);fill-opacity:0.5;}
.compass .card-label{fill:var(--gold-bright);font-family:var(--mono);font-size:16px;letter-spacing:0.1em;}
/* Compass motion: restored 2026-07-27 per client ("we liked the movement").
   Only the outer tick rings rotate; the star points and shared bearing stay fixed.
   Removed in review round 1 as "distracting" — the real cause was scale, so the
   roses are smaller now (see .compass-bg) and the rotation is slow. */
/* Client 7/27 call: motion on the HOME page only. She raised that constant movement
   across every page could be a lot for neurodivergent visitors. Interior pages use the
   static .compass-corner mark, which carries no .rotor, so scoping to .hero .compass
   keeps the home hero animated and everything else still. */
.compass .rotor{transform-box:fill-box;transform-origin:center;}
.hero .compass .rotor{animation:spin 150s linear infinite;}
.hero .compass .rotor.ccw{animation:spinccw 150s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes spinccw{to{transform:rotate(-360deg);}}

/* Page hero (interior pages) */
.hero-page{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(90% 120% at 88% 10%, rgba(63,184,160,0.10), transparent 55%),
    linear-gradient(168deg, var(--banner) 0%, var(--banner-2) 100%);
  border-bottom:1px solid var(--ink-line);
}
.hero-page .wrap{position:relative;z-index:2;padding-top:76px;padding-bottom:76px;max-width:var(--max);}
.hero-page h1{font-size:clamp(32px,4.6vw,54px);color:#fff;margin:0 0 16px;max-width:64%;}
.hero-page p{color:var(--body-dark);max-width:min(44em,64%);font-size:20px;margin:0;font-weight:400;}
/* Client 7/26: "make compasses brighter again and move over left a bit" */
.hero-page .compass-corner{
  position:absolute;top:50%;right:4%;transform:translateY(-50%);
  width:min(470px,48vw);aspect-ratio:620/420;height:auto;
  z-index:1;opacity:0.8;pointer-events:none;
}
@media (max-width:980px){.hero-page h1,.hero-page p{max-width:100%;}}
/* 0.22 was near-invisible on a phone, which is where the client noticed it. */
@media (max-width:760px){.hero-page .compass-corner{opacity:0.36;right:-26%;}}

/* ============================================================
   SECTIONS
   ============================================================ */
section{padding:112px 0;position:relative;}
.section-dark{
  background:
    radial-gradient(100% 120% at 15% 0%, rgba(138,76,190,0.22), transparent 55%),
    var(--ink);
  color:#fff;border-top:1px solid var(--ink-line);border-bottom:1px solid var(--ink-line);
}
.section-parchment{background:var(--parchment);}
.section-panel{background:var(--parchment-2);}
.section-aqua{background:linear-gradient(180deg,#E7F4EF,#DDEEE7);}
.section-lavender{background:var(--parchment-2);}   /* legacy alias */
.section-lilac{background:var(--parchment);}         /* legacy alias */
.section-rule{border-top:1px solid var(--paper-line);}

h2.section-title{font-size:clamp(28px,3.6vw,44px);margin:0 0 18px;color:var(--purple);letter-spacing:-0.02em;}
.section-dark h2.section-title{color:#fff;}
p.section-sub{font-size:20.5px;max-width:42em;margin:0 0 46px;color:var(--body-ink);line-height:1.72;font-weight:400;}
.section-dark p.section-sub{color:var(--body-dark);}

/* Bearing-tick divider */
.tickrule{
  height:14px;width:100%;max-width:220px;margin:0 auto;
  background-image:repeating-linear-gradient(90deg,var(--gold-warm) 0 1px,transparent 1px 11px);
  opacity:0.5;
}
.section-dark .tickrule{background-image:repeating-linear-gradient(90deg,var(--gold-bright) 0 1px,transparent 1px 11px);}
.divider-course{border:none;height:1px;background:repeating-linear-gradient(90deg,var(--paper-line) 0 6px,transparent 6px 12px);max-width:200px;margin:0 auto;}

/* Generic two-column layout (backward-compat + interior CTAs) */
.hero-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center;}
@media (max-width:900px){.hero-split{grid-template-columns:minmax(0,1fr);gap:34px;}}

/* Two-column editorial intro */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:60px;}
@media (max-width:820px){.duo{grid-template-columns:minmax(0,1fr);gap:40px;}}
.duo .col{padding-top:26px;border-top:1px solid var(--paper-line);position:relative;}
.duo .col::before{content:"";position:absolute;top:-1px;left:0;width:54px;height:3px;background:var(--gold);}
.duo .col.teal::before{background:var(--turquoise);}
.duo h3{margin:0 0 14px;color:var(--purple);font-size:26px;font-weight:500;}
.duo p{margin:0;color:var(--body-ink);font-size:18px;line-height:1.7;}

/* Numbered ledger */
.ledger{position:relative;}
.ledger .row{
  display:grid;grid-template-columns:120px minmax(0,3fr) minmax(0,7fr);gap:30px;
  padding:34px 0;border-bottom:1px solid var(--paper-line);align-items:baseline;
  transition:background .25s ease;
}
.ledger .row:first-child{border-top:1px solid var(--paper-line);}
@media (max-width:820px){.ledger .row{grid-template-columns:minmax(0,1fr);gap:10px;padding:26px 0;}}
.ledger .num{font-family:var(--mono);font-size:12px;color:var(--gold-warm);letter-spacing:0.18em;text-transform:uppercase;}
.ledger h3{margin:0;font-size:24px;color:var(--purple);font-weight:500;transition:transform .25s ease;}
.ledger p{margin:0;color:var(--body-ink);font-size:18px;line-height:1.65;}
.ledger .row:hover{background:rgba(87,31,125,0.04);}
.ledger .row:hover h3{transform:translateX(7px);}
.section-dark .ledger .row,.section-dark .ledger .row:first-child{border-color:var(--ink-line);}
.section-dark .ledger h3{color:#fff;}
.section-dark .ledger p{color:var(--body-dark);}
.section-dark .ledger .num{color:var(--gold-bright);}
.section-dark .ledger .row:hover{background:rgba(240,200,96,0.05);}

/* Pull quote */
.pullquote{max-width:860px;position:relative;}
.pullquote blockquote{
  margin:0;padding:10px 0 10px 40px;border-left:2px solid var(--gold);position:relative;
  font-family:var(--serif);font-size:clamp(23px,3vw,34px);font-style:italic;line-height:1.4;color:var(--purple);font-weight:400;
}
.pullquote blockquote::before{
  content:"\201C";position:absolute;left:14px;top:-30px;font-size:96px;line-height:1;
  color:var(--gold);opacity:0.28;font-family:var(--serif);
}
.section-dark .pullquote blockquote{color:#fff;border-left-color:var(--gold-bright);}
.section-dark .pullquote blockquote::before{color:var(--gold-bright);}
.pullquote cite{
  display:block;margin:22px 0 0 42px;font-style:normal;font-family:var(--mono);font-size:12px;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--gold-warm);
}
.section-dark .pullquote cite{color:var(--gold-bright);}

/* Panels / cards */
.panel{background:var(--parchment-2);border:1px solid var(--paper-line);padding:32px;}
.panel h3{margin:0 0 12px;color:var(--purple);font-size:22px;font-weight:500;}
.panel p{margin:0;color:var(--body-ink);font-size:18px;}
.card{border-top:2px solid var(--turquoise);padding-top:24px;}
.card.gold{border-top-color:var(--gold);}
.card.purple{border-top-color:var(--purple);}
.card h3{margin:0 0 12px;color:var(--purple);font-size:23px;font-weight:500;}
.card p{margin:0;color:var(--body-ink);font-size:18px;line-height:1.65;}
.card .icon{display:none;}
.section-dark .card h3{color:#fff;}
.section-dark .card p{color:var(--body-dark);}
.grid{display:grid;gap:24px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:860px){.grid-3,.grid-2{grid-template-columns:minmax(0,1fr);}}

/* Logo story */
.logo-story{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:60px;align-items:start;}
@media (max-width:860px){.logo-story{grid-template-columns:minmax(0,1fr);}}
.logo-story .mark{border:1px solid var(--paper-line);background:var(--parchment-2);padding:40px;}
.section-dark .logo-story .mark{border-color:var(--ink-line);background:var(--ink-2);}
.logo-story p{color:var(--body-ink);font-size:18px;line-height:1.75;margin:0 0 20px;}
.section-dark .logo-story p{color:var(--body-dark);}
.logo-story p:last-child{margin-bottom:0;}
.logo-story p:first-of-type::first-letter{
  font-family:var(--serif);float:left;font-size:62px;line-height:0.82;padding:8px 12px 0 0;color:var(--gold-warm);font-weight:400;
}
.section-dark .logo-story p:first-of-type::first-letter{color:var(--gold-bright);}

/* Audience checklist */
/* true 2-col grid so each row shares a height and the rules line up (client 7/30) */
.audience{display:grid;grid-template-columns:1fr 1fr;column-gap:70px;max-width:980px;}
@media (max-width:820px){.audience{grid-template-columns:1fr;}}
.audience .item{
  display:flex;gap:15px;align-items:flex-start;
  padding:16px 0;border-bottom:1px solid var(--paper-line);
  font-size:18px;font-weight:400;color:var(--body-ink);transition:padding-left .25s ease;
}
.audience .item:hover{padding-left:8px;}
.audience .item:nth-last-child(-n+2){border-bottom:none;}
@media (max-width:820px){.audience .item:nth-last-child(-n+2){border-bottom:1px solid var(--paper-line);}.audience .item:last-child{border-bottom:none;}}
/* home page: each audience type links through to the training page */
a.item{text-decoration:none;color:inherit;cursor:pointer;}
a.item:hover span:last-child{color:var(--purple);text-decoration:underline;text-underline-offset:3px;}
.audience .item span.marker{color:var(--gold-warm);font-size:13px;line-height:1.7;flex:none;transition:transform .25s ease;}
.audience .item:hover span.marker{transform:translateX(4px);}
.section-dark .audience .item{color:var(--body-dark);border-color:var(--ink-line);}
.section-dark .audience .item span.marker{color:var(--gold-bright);}

/* Accordion */
.acc{border:1px solid var(--paper-line);background:var(--parchment-2);margin:-1px 0 0;transition:border-color .25s ease;}
.acc:first-of-type{margin-top:0;}
.acc:hover{border-color:var(--gold);z-index:1;position:relative;}
.acc > button{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:var(--serif);
  font-size:21px;color:var(--purple);font-weight:500;padding:26px 64px 26px 30px;position:relative;line-height:1.3;
}
.acc > button::after{
  content:"+";position:absolute;right:28px;top:50%;transform:translateY(-50%);
  font-size:24px;color:var(--gold-warm);font-family:var(--sans);font-weight:300;transition:transform .3s ease;
}
.acc.open{border-left:2px solid var(--gold);}
.acc.open > button::after{transform:translateY(-50%) rotate(45deg);}
.acc .body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s ease;}
.acc.open .body{grid-template-rows:1fr;}
.acc .body > .body-inner{overflow:hidden;min-height:0;padding:0 30px;color:var(--body-ink);font-size:18px;line-height:1.7;}
.acc.open .body > .body-inner{padding-bottom:30px;}
.acc .body h4{color:var(--purple);margin:24px 0 8px;font-size:18px;font-weight:600;font-family:var(--sans);}
.acc .body ul{padding-left:22px;margin:10px 0;}
.acc .body li{margin-bottom:7px;}
.acc .body li::marker{color:var(--gold-warm);}
.pill{
  display:inline-block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;
  padding:4px 10px;margin-left:12px;vertical-align:middle;
}
.pill.teal{background:#DCF0E9;color:var(--turquoise-deep);}
.pill.soon{background:var(--parchment);color:var(--gold-warm);border:1px solid var(--paper-line);}

/* Team */
.team-toggle{display:flex;margin-bottom:48px;border:1px solid var(--purple);width:max-content;overflow:hidden;}
.team-toggle button{
  font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;
  padding:12px 26px;cursor:pointer;border:none;background:none;color:var(--purple);
}
.team-toggle button.active{background:var(--purple);color:#fff;}
.founder{display:grid;grid-template-columns:200px 1fr;gap:44px;align-items:start;padding:48px 0;border-top:1px solid var(--paper-line);}
.founder:last-child{border-bottom:1px solid var(--paper-line);}
@media (max-width:760px){.founder{grid-template-columns:minmax(0,1fr);}}
.founder .photo img{border:1px solid var(--paper-line);filter:saturate(0.95);transition:filter .4s ease;}
.founder .photo:hover img{filter:saturate(1.05);}
.founder h3{margin:0;color:var(--purple);font-size:28px;font-weight:500;}
.founder .role{font-family:var(--mono);color:var(--gold-warm);font-weight:500;font-size:12px;letter-spacing:0.16em;text-transform:uppercase;margin:8px 0 20px;}
.founder p{color:var(--body-ink);font-size:18px;line-height:1.7;}
.team-photo{max-width:420px;margin:0 0 12px;}
.team-photo img{border:1px solid var(--paper-line);filter:saturate(0.94);transition:filter .4s ease;}
.team-photo:hover img{filter:saturate(1.04);}
.team-photo figcaption{font-family:var(--mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold-warm);margin-top:12px;}

/* Crisis strip + Get Help */
.crisis-strip{background:var(--red);color:#fff;text-align:center;padding:13px 20px;font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:0.01em;}
.crisis-strip a{color:#fff;font-weight:800;}
.help-card{background:var(--parchment-2);border:1px solid var(--paper-line);border-top:3px solid var(--red);padding:32px;transition:transform .25s ease,box-shadow .25s ease;}
.help-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(37,16,47,0.12);}
.help-card h3{margin:0 0 6px;color:var(--purple);font-size:22px;font-weight:500;}
.help-card .big{font-family:var(--serif);font-size:36px;color:var(--red);font-weight:500;margin:8px 0;}
.help-card p{margin:0;color:var(--body-ink);font-size:16px;}

/* Resources */
.res-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--paper-line);max-width:880px;}
.res-list li{padding:24px 6px;border-bottom:1px solid var(--paper-line);transition:padding-left .28s ease,background .28s ease;}
.res-list li:hover{padding-left:16px;background:rgba(87,31,125,0.04);}
.res-list a{font-family:var(--serif);font-weight:500;color:var(--purple);text-decoration:none;font-size:20px;}
.res-list a::after{content:" \2197";color:var(--gold-warm);font-size:15px;display:inline-block;transition:transform .25s ease;}
.res-list li:hover a::after{transform:translate(3px,-3px);}
.res-list p{margin:7px 0 0;font-size:15.5px;color:var(--body-ink);}
.res-title{font-family:var(--serif);font-weight:500;color:var(--purple);font-size:20px;}
.note-box{background:var(--parchment-2);border:1px solid var(--paper-line);border-left:3px solid var(--gold);padding:26px 30px;color:var(--body-ink);font-size:16px;max-width:880px;}

/* Forms */
form .field{margin-bottom:20px;}
form label{display:block;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:8px;color:var(--gold-warm);}
form label .opt{font-weight:400;color:var(--mute-ink);text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:12px;}
form input,form select,form textarea{
  width:100%;padding:13px 15px;border:1px solid var(--paper-line);background:#fff;
  font-family:var(--serif);font-size:18px;color:var(--body-ink);
}
form input:focus,form select:focus,form textarea:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(87,31,125,0.14);}
form textarea{min-height:140px;resize:vertical;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;}
@media (max-width:700px){.form-grid{grid-template-columns:minmax(0,1fr);}}
.form-note{font-size:13px;color:var(--mute-ink);margin-top:16px;font-family:var(--sans);}
.form-crisis{background:#FBEAE8;border-left:3px solid var(--red);padding:16px 18px;font-size:15px;color:#7a241f;margin-bottom:30px;text-align:center;text-wrap:balance;}
.form-crisis .line{display:block;}
.form-status{display:none;margin-top:18px;padding:15px 18px;font-weight:600;font-family:var(--sans);}
.form-status.ok{display:block;background:#DCF0E9;color:var(--turquoise-deep);}
.form-status.err{display:block;background:#FBEAE8;color:var(--red);}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden;}

/* ============================================================
   OFFERINGS — training programs as distinct objects (editorial index)
   ============================================================ */
.offerings{border-top:1px solid var(--paper-line);margin-top:8px;}
.section-dark .offerings{border-color:var(--ink-line);}
.offering{
  display:grid;grid-template-columns:70px minmax(0,1fr) minmax(0,300px);gap:40px;align-items:start;
  padding:48px 0;border-bottom:1px solid var(--paper-line);position:relative;text-decoration:none;color:inherit;
  transition:padding-left .35s cubic-bezier(.2,.7,.3,1);
}
.section-dark .offering{border-color:var(--ink-line);}
.offering::before{
  content:"";position:absolute;left:-24px;top:48px;bottom:48px;width:2px;background:var(--gold);
  opacity:0;transition:opacity .35s ease;
}
a.offering:hover{padding-left:24px;}
a.offering:hover::before{opacity:1;}
.offering .idx{font-family:var(--mono);font-size:13px;letter-spacing:0.1em;color:var(--gold-warm);padding-top:12px;}
.section-dark .offering .idx{color:var(--gold-bright);}
.offering.teal .idx{color:var(--turquoise-deep);}
.section-dark .offering.teal .idx{color:var(--turquoise-lit);}
.offering h3{
  font-family:var(--serif);font-weight:400;font-size:clamp(25px,3vw,36px);line-height:1.12;
  color:var(--purple);margin:0 0 14px;letter-spacing:-0.02em;transition:color .3s ease;
}
.section-dark .offering h3{color:#fff;}
.offering .desc{margin:0;color:var(--body-ink);font-size:19.5px;line-height:1.6;max-width:40em;}
.section-dark .offering .desc{color:var(--body-dark);}
.offering .aside{display:flex;flex-direction:column;gap:14px;align-items:flex-start;padding-top:6px;}
.offering .fmt{
  font-family:var(--mono);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--gold-warm);border:1px solid var(--paper-line);padding:6px 12px;
}
.section-dark .offering .fmt{color:var(--gold-bright);border-color:var(--ink-line);}
.offering .go{font-family:var(--mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--purple);display:inline-flex;align-items:center;gap:8px;}
.section-dark .offering .go{color:var(--gold-bright);}
.offering .go::after{content:"\2192";transition:transform .3s ease;}
a.offering:hover .go::after{transform:translateX(6px);}
.offering .flag{font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink);background:var(--gold-bright);padding:4px 10px;align-self:flex-start;}
.offering.muted{opacity:0.62;}
.offering.muted h3{color:var(--mute-ink);}
.section-dark .offering.muted h3{color:rgba(247,241,228,0.6);}
@media (max-width:820px){
  .offering{grid-template-columns:minmax(0,1fr);gap:16px;padding:36px 0;}
  .offering .aside{flex-direction:row;flex-wrap:wrap;align-items:center;}
  a.offering:hover{padding-left:0;}
  a.offering:hover::before{opacity:0;}
}

/* ============================================================
   SHARED COMPASS FRAMEWORK — tiers + program cards (boxes with art)
   ============================================================ */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:44px;}
@media(max-width:760px){.tiers{grid-template-columns:1fr;gap:24px;}}
.tier-item{border-top:2px solid var(--gold-bright);padding-top:20px;}
.tier-item .n{font-family:var(--mono);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold-bright);}
.tier-item h3{font-family:var(--serif);font-weight:400;font-size:26px;color:#fff;margin:10px 0 10px;}
.tier-item p{color:var(--body-dark);font-size:16px;line-height:1.6;margin:0;}

.programs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px;}
@media(max-width:900px){.programs{grid-template-columns:1fr;}}
.program{
  border:1px solid var(--paper-line);background:var(--parchment-2);display:flex;flex-direction:column;
  text-decoration:none;color:inherit;overflow:hidden;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
a.program:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(37,16,47,0.14);border-color:var(--gold);}
.program .art{
  aspect-ratio:16/8;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(130% 150% at 68% 28%, rgba(154,90,208,0.40), transparent 60%), var(--ink);
}
.program .art img{width:74%;max-width:300px;display:block;}
/* full-bleed illustrated art for the three tier cards */
.program .art.art-full{padding:0;}
.program .art.art-full img{width:100%;max-width:none;height:100%;object-fit:cover;}
.program .pc{padding:26px 28px 28px;display:flex;flex-direction:column;flex:1;}
.program .tier{font-family:var(--mono);font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold-warm);}
.program h3{font-family:var(--serif);font-weight:400;font-size:25px;color:var(--purple);margin:11px 0 12px;line-height:1.15;letter-spacing:-0.02em;}
.program .desc{color:var(--body-ink);font-size:19px;line-height:1.62;margin:0 0 20px;flex:1;}
.program .meta{
  font-family:var(--mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold-warm);
  border-top:1px solid var(--paper-line);padding-top:15px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center;
}
.program .meta .go{color:var(--purple);}
a.program:hover .meta .go::after{content:" \2192";}
.prog-facts{list-style:none;padding:0;margin:0 0 20px;}
.prog-facts li{font-family:var(--mono);font-size:12px;letter-spacing:0.02em;color:var(--body-ink);padding:8px 0 8px 20px;position:relative;border-bottom:1px dashed var(--paper-line);text-transform:none;}
.prog-facts li::before{content:"\25C6";position:absolute;left:0;top:9px;color:var(--gold-warm);font-size:9px;}
.program.flagship{grid-column:1 / -1;flex-direction:row;}
.program.flagship .art{flex:0 0 40%;aspect-ratio:auto;}
.program.flagship .pc{flex:1;padding:34px 38px;}
@media(max-width:900px){.program.flagship{flex-direction:column;}.program.flagship .art{flex:auto;aspect-ratio:16/8;}}
.program.soon{opacity:0.72;}
.program.soon .art{filter:saturate(0.55);}

/* Asynchronous band — narrower than the tiers, full width across */
.async-band{
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  margin-top:24px;padding:22px 30px;
  background:var(--parchment-2);border:1px solid var(--paper-line);border-left:3px solid var(--gold);
}
.async-band h3{font-family:var(--serif);font-weight:400;font-size:21px;color:var(--purple);margin:0 0 6px;line-height:1.2;letter-spacing:-0.02em;}
.async-band p{color:var(--body-ink);font-size:16px;line-height:1.55;margin:0;}
.async-band .async-when{
  font-family:var(--mono);font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--gold-warm);white-space:nowrap;
}
@media(max-width:760px){.async-band{flex-direction:column;align-items:flex-start;gap:12px;}}

/* Crisis intro block above the help cards */
.crisis-intro{max-width:760px;margin:0 auto 40px;text-align:center;}
.crisis-intro .section-title{margin-bottom:14px;}
.crisis-intro .section-sub{margin:0 0 12px;}
.crisis-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:22px 0 14px;}
.crisis-note{font-family:var(--sans);font-size:14px;color:var(--mute-ink);margin:0;}
.crisis-intro .btn{margin-top:10px;}

/* ============================================================
   OUR TEAM — founders, partners, advisors
   ============================================================ */
.founders-lead{text-align:center;max-width:440px;margin:0 auto 8px;}
.founders-lead img{border:1px solid var(--paper-line);filter:saturate(0.96);}
.founders-lead figcaption{font-family:var(--mono);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--gold-warm);margin-top:14px;}
.founders-duo{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:56px;align-items:stretch;}
.founder-col{display:flex;flex-direction:column;}
.founder-col .cvlink{margin-top:auto;align-self:flex-start;}
@media(max-width:820px){.founders-duo{grid-template-columns:1fr;gap:44px;}}
.founder-col{border-top:2px solid var(--gold);padding-top:22px;}
.founder-col.teal{border-top-color:var(--turquoise);}
.founder-col h3{font-family:var(--serif);font-weight:500;font-size:26px;color:var(--purple);margin:0;}
.founder-col .role{font-family:var(--mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold-warm);margin:8px 0 18px;}
.founder-email{margin:-10px 0 0;font-family:var(--sans);font-size:13.5px;word-break:break-word;}
.founder-email a{color:var(--purple);text-decoration:none;border-bottom:1px solid rgba(87,31,125,0.28);}
.founder-email a:hover{color:var(--gold-warm);border-bottom-color:var(--gold-warm);}
.founder-col p{color:var(--body-ink);font-size:17px;line-height:1.7;margin:0 0 14px;}
.founder-col .cvlink{font-family:var(--mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--purple);text-decoration:none;}
.founder-col .cvlink::after{content:" \2197";color:var(--gold-warm);}

.partners-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:40px;}
@media(max-width:700px){.partners-grid{grid-template-columns:1fr;}}
.partner{border:1px solid var(--paper-line);background:var(--parchment-2);overflow:hidden;}
.partner .plogo{background:#fff;border-bottom:1px solid var(--paper-line);height:100px;display:grid;place-items:center;padding:18px 26px;}
.partner .plogo img{max-height:58px;max-width:78%;object-fit:contain;}
.partner .pbody{padding:24px 28px 28px;}
.partner h3{font-family:var(--serif);font-weight:500;font-size:21px;color:var(--purple);margin:0 0 8px;}
.partner p{color:var(--body-ink);font-size:16px;line-height:1.55;margin:0;}

/* Advisor / founder bio modal */
.advisor-more{margin-top:14px;background:none;border:none;padding:0;font-family:var(--mono);font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--purple);cursor:pointer;}
.advisor-more::after{content:" \2192";color:var(--gold-warm);transition:transform .25s ease;display:inline-block;}
.advisor-more:hover::after{transform:translateX(4px);}
.bio-modal{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(37,16,47,0.64);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.bio-modal.open{display:flex;animation:bmfade .3s ease;}
@keyframes bmfade{from{opacity:0;}}
.bio-modal-inner{background:var(--parchment);max-width:640px;width:100%;max-height:86vh;overflow-y:auto;border:1px solid var(--paper-line);position:relative;box-shadow:0 30px 70px rgba(20,8,28,0.5);}
.bio-modal-close{position:absolute;top:12px;right:16px;background:none;border:none;font-size:30px;line-height:1;color:var(--purple);cursor:pointer;}
.bio-modal .bm-head{display:flex;gap:26px;align-items:flex-start;padding:38px 40px 0;}
@media(max-width:520px){.bio-modal .bm-head{flex-direction:column;gap:16px;padding:34px 26px 0;}}
.bio-modal .bm-photo{width:130px;aspect-ratio:4/5;object-fit:cover;object-position:top center;border:1px solid var(--paper-line);flex:none;}
.bio-modal .bm-name{font-family:var(--serif);font-weight:500;font-size:27px;color:var(--purple);margin:0 0 8px;line-height:1.15;}
.bio-modal .bm-role{font-family:var(--mono);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold-warm);margin:0;}
.bio-modal .bm-body{padding:24px 40px 40px;}
@media(max-width:520px){.bio-modal .bm-body{padding:20px 26px 32px;}}
.bio-modal .bm-body p{font-size:17px;line-height:1.7;color:var(--body-ink);margin:0 0 15px;}
.bio-modal .bm-body p:last-child{margin-bottom:0;}

.advisors-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:40px;}
@media(max-width:820px){.advisors-grid{grid-template-columns:1fr 1fr;gap:28px;}}
@media(max-width:520px){.advisors-grid{grid-template-columns:1fr;}}
.advisor{display:flex;flex-direction:column;align-items:center;text-align:center;}
.advisor .headshot{
  width:132px;aspect-ratio:1/1;object-fit:cover;object-position:top center;
  border:1px solid var(--paper-line);filter:saturate(0.96);border-radius:50%;margin-bottom:18px;
}
.advisor p:not(.role){flex:1 1 auto;}
.advisor .advisor-more{margin-top:16px;}
.advisor h3{font-family:var(--serif);font-weight:500;font-size:21px;color:var(--purple);margin:0 0 4px;line-height:1.2;}
.advisor .role{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold-warm);margin:0 0 12px;}
.advisor p{color:var(--body-ink);font-size:15.5px;line-height:1.55;margin:0;}

/* Even up the cards. Names wrap to different line counts (Janet York's runs to two,
   most run to one), which pushed her role, bio and button out of line with the rest
   of her row. Subgrid hands every card in a row the same row tracks, so headshot,
   name, role, bio and button all align however long the text is. Falls back to the
   flex layout above where subgrid is unsupported. */
@supports (grid-template-rows: subgrid){
  .advisors-grid{column-gap:32px;row-gap:0;}
  .advisor{
    display:grid;grid-template-rows:subgrid;grid-row:span 5;
    justify-items:center;align-items:center;   /* centre each part in its shared track,
                                                  so a one-line name does not sit high in
                                                  a track sized for a two-line one */
    padding-bottom:44px;          /* stands in for the row-gap we just removed */
  }
  .advisor .headshot{align-self:end;}
  @media(max-width:820px){.advisors-grid{column-gap:28px;row-gap:0;}}
}

/* Technical advisor panel — sits below the advisors behind a rule, photo left,
   text running the full width, so it reads as its own box rather than a tenth card. */
.tech-advisor{
  margin-top:8px;padding-top:26px;border-top:1px solid var(--paper-line);
  /* rule spans the full column so it reads as a divider under the advisors;
     the content itself stays small and sits to the left */
  display:grid;grid-template-columns:72px minmax(0,540px);gap:18px;align-items:center;
  justify-content:start;
}
.tech-advisor .headshot{
  width:72px;aspect-ratio:1/1;object-fit:cover;object-position:top center;
  border:1px solid var(--paper-line);filter:saturate(0.96);border-radius:50%;
}
.tech-advisor h3{font-family:var(--serif);font-weight:500;font-size:17px;color:var(--purple);margin:0 0 2px;line-height:1.2;}
.tech-advisor .role{font-family:var(--mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold-warm);margin:0 0 6px;}
.tech-advisor p{color:var(--mute-ink);font-size:13.5px;line-height:1.5;margin:0;}
.tech-advisor p a{color:var(--purple);}
@media(max-width:520px){
  .tech-advisor{grid-template-columns:1fr;justify-items:center;text-align:center;gap:14px;}
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  overflow:hidden;white-space:nowrap;background:var(--ink);
  border-top:1px solid var(--ink-line);border-bottom:1px solid var(--ink-line);padding:20px 0;
}
.marquee-track{display:inline-flex;align-items:center;gap:56px;padding-left:56px;animation:marquee 46s linear infinite;will-change:transform;}
.marquee-track span{font-family:var(--serif);font-style:italic;font-size:clamp(18px,2.2vw,25px);color:rgba(247,241,228,0.75);}
.marquee-track span.star{color:var(--gold-bright);font-style:normal;font-size:14px;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  background:var(--ink);color:var(--body-dark);padding:70px 0 34px;font-family:var(--sans);font-size:14.5px;
  border-top:1px solid var(--ink-line);position:relative;overflow:hidden;
}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:40px;margin-bottom:44px;position:relative;z-index:2;}
@media (max-width:1080px){footer .cols{grid-template-columns:1fr 1fr;gap:34px;}}
@media (max-width:620px){footer .cols{grid-template-columns:1fr;}}
footer h4{font-family:var(--mono);color:var(--gold-bright);font-size:12px;margin:0 0 16px;letter-spacing:0.18em;text-transform:uppercase;font-weight:500;}
footer a{color:var(--body-dark);text-decoration:none;}
footer a:hover{color:var(--gold-bright);}
footer ul{list-style:none;padding:0;margin:0;}
footer li{margin-bottom:10px;}
footer p{color:var(--body-dark);}
.foot-disclaimer{font-size:12.5px;color:rgba(247,241,228,0.55);border-top:1px solid var(--ink-line);padding-top:24px;line-height:1.7;position:relative;z-index:2;}
.foot-legal{margin-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:0.04em;color:rgba(247,241,228,0.5);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;position:relative;z-index:2;}

/* Our Approach: copy left, photo right with the consult button beneath it.
   Client 2026-08-06 — replaced the founders' pullquote + holding-hands photo. */
.approach-split{display:grid;grid-template-columns:1.15fr 0.85fr;gap:56px;align-items:center;}
.approach-media{display:flex;flex-direction:column;align-items:stretch;gap:20px;}
.approach-media .photo-frame{margin:0;}
.approach-media .btn{align-self:start;margin:0;}
@media (max-width:900px){
  .approach-split{grid-template-columns:1fr;gap:32px;}
  .approach-media .btn{align-self:stretch;justify-content:center;}
}

/* ============================================================
   PHOTOGRAPHY
   ============================================================ */
.photo-frame{border:1px solid var(--paper-line);padding:12px;background:var(--parchment-2);overflow:hidden;}
.section-dark .photo-frame{border-color:var(--ink-line);background:var(--ink-2);}
.photo-frame img{width:100%;filter:saturate(0.94);transition:transform .8s cubic-bezier(.2,.7,.3,1);}
.photo-frame:hover img{transform:scale(1.04);}
.photo-frame figcaption{font-family:var(--mono);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--gold-warm);margin-top:12px;text-align:center;}
.split-media{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:60px;align-items:center;}
@media (max-width:860px){.split-media{grid-template-columns:minmax(0,1fr);gap:38px;}}

/* ============================================================
   MOTION
   ============================================================ */
::selection{background:var(--gold-bright);color:var(--ink);}
:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px;}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}
.split-media > .reveal:first-child,.hero-split > .reveal:first-child{transform:translateY(16px) translateX(-18px);}
.split-media > .reveal:last-child,.hero-split > .reveal:last-child{transform:translateY(16px) translateX(18px);}
.split-media > .reveal.in,.hero-split > .reveal.in{transform:none;}

/* Hero entrance choreography */
@keyframes rise{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}
.hero-lead .kicker{animation:rise .7s ease both .1s;}
.hero-lead h1{animation:rise .8s ease both .2s;}
.hero-lead .tagline{animation:rise .8s ease both .34s;}
.hero-lead .lede{animation:rise .8s ease both .46s;}
.hero-lead .hero-actions{animation:rise .8s ease both .58s;}
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(0.6em);animation:wordRise .6s cubic-bezier(.2,.7,.3,1) both;}
@keyframes wordRise{to{opacity:1;transform:none;}}
.hero h1.split{animation:none;}
.compass-bg{animation:fadeCompass 1.6s ease both .5s;}
@keyframes fadeCompass{from{opacity:0;transform:translateY(-50%) scale(0.92) rotate(-8deg);}}

/* Reading progress bar */
.progress-bar{position:fixed;top:0;left:0;height:2px;width:0;z-index:300;background:linear-gradient(90deg,var(--gold-warm),var(--gold-bright));}

.compass-ornament{animation:wobble 12s ease-in-out infinite;transform-origin:center;}
@keyframes wobble{0%,100%{transform:rotate(-3deg);}50%{transform:rotate(3deg);}}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;}
  .reveal{opacity:1;transform:none;transition:none;}
  .compass-bg{opacity:0.9;transform:translateY(-50%);}
  html{scroll-behavior:auto;}
}

/* Mobile safety */
@media (max-width:480px){.kicker{letter-spacing:0.16em;}.wrap{padding:0 22px;}}

/* ============================================================
   TESTIMONIALS (home) — .testimonials-solo is the one-quote fallback
   ============================================================ */
.testimonials{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:44px;align-items:stretch;}
.testimonials.testimonials-solo{grid-template-columns:1fr;max-width:860px;}
@media (max-width:820px){.testimonials{grid-template-columns:1fr;}}
.tmi{
  margin:0;padding:30px 32px;background:var(--parchment-2);
  border:1px solid var(--paper-line);border-left:3px solid var(--gold);
  display:flex;flex-direction:column;
}
.tmi blockquote{
  margin:0 0 18px;font-family:var(--serif);font-size:21px;line-height:1.5;
  color:var(--purple);font-style:italic;letter-spacing:-0.01em;
}
/* quotes differ in length; keep every attribution on the same baseline */
.tmi figcaption{display:flex;flex-direction:column;gap:3px;margin-top:auto;}
.tmi figcaption strong{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--body-ink);}
.tmi figcaption span{font-family:var(--mono);font-size:11.5px;letter-spacing:0.13em;text-transform:uppercase;color:var(--gold-warm);}

/* ============================================================
   CONTINUING EDUCATION BAND (training page)
   ============================================================ */
.ce-note{
  font-family:var(--mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--gold-warm);margin:14px 0 0;
}
/* client: give the asynchronous band its own tint so it does not get lost */
.async-band{background:#EDE3F5;border-color:#D6C2E8;border-left-color:var(--purple);}


/* provider note — client asked for bigger, full width, more purple */
.provider-note{
  background:var(--purple);color:#fff;border:none;border-left:4px solid var(--gold-bright);
  padding:30px 34px;margin:0 0 34px;font-size:19.5px;line-height:1.6;max-width:none;
}
.provider-note strong{color:var(--gold-bright);}
/* general (non-crisis) contact line under the helper resources */
.contact-note{
  margin-top:22px;font-size:16.5px;color:var(--body-ink);
}
.contact-note a{color:var(--purple);font-weight:500;}

/* training cards: "View details" trigger matches the advisor one */
.program-more{
  background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--purple);
}
.program-more::after{content:" \2192";color:var(--gold-warm);display:inline-block;transition:transform .25s ease;}
.program-more:hover::after{transform:translateX(4px);}
.program{cursor:default;}

/* contact page: direct email alternative to the form */
.contact-alt{
  margin-top:40px;padding:26px 30px;
  background:var(--parchment-2);border:1px solid var(--paper-line);border-left:3px solid var(--turquoise);
  max-width:760px;
}
.contact-alt p{margin:0;color:var(--body-ink);font-size:17px;line-height:1.6;}
.contact-alt a{color:var(--purple);font-weight:500;}
.contact-alt .contact-alt-crisis{margin-top:12px;font-size:15px;color:var(--mute-ink);}

/* ============================================================
   FOUNDER CARDS — photo and name read as one header block, and both
   columns run to equal length with the full bio behind "Read full bio".
   ============================================================ */
.founder-head{display:flex;align-items:center;gap:22px;margin-bottom:22px;}
.founder-photo{
  width:132px;flex:0 0 132px;aspect-ratio:1/1;object-fit:cover;object-position:top center;
  border:1px solid var(--paper-line);filter:saturate(0.96);border-radius:50%;margin:0;
}
.founder-head h3{margin:0 0 6px;font-size:24px;line-height:1.15;}
.founder-head .role{margin:0;}
.founder-links{margin-top:auto;padding-top:22px;display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
.founder-links .advisor-more,.founder-links .cvlink{margin:0;line-height:1;display:inline-flex;align-items:center;}
.founder-links .cvlink{margin:0;}
@media (max-width:560px){
  .founder-head{gap:16px;}
  .founder-photo{width:96px;flex:0 0 96px;}
  .founder-head h3{font-size:20px;}
}