/* =============================================================
   HENNY LO — master brand design system
   Luxury black / charcoal / chrome / electric lime.
   One system, used by every page. Sub-brands layer a theme on
   top (theme-credit.css) and are always scoped so they cannot
   bleed into the parent brand.
   ============================================================= */

:root{
  --ink:#000000;          /* the logo ground is true black */
  --char:#0D0D10;
  --char-2:#15151A;
  --char-3:#1E1E25;
  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.2);
  --white:#F7F7FA;
  --muted:#A2A2B0;
  --muted-2:#767684;
  --lime:#A3DC24;         /* brand lime, from the monogram + podcast cover */
  --lime-bright:#C6F24B;  /* highlight / hover */
  --lime-d:#78A813;
  --lime-w:rgba(163,220,36,.13);
  /* chrome bevel, matched to the logo's silver */
  --chrome:linear-gradient(135deg,#55555D 0%,#D8D8DF 22%,#F6F6F9 38%,#8E8E98 54%,#EFEFF4 72%,#5E5E68 100%);
  --maxw:1180px;
  --r:14px;
  --r-lg:20px;
  --paper:#F2F1EF;      /* off-white ground for light sections */
  --paper-2:#E7E5E1;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--white);font-family:'Montserrat',system-ui,-apple-system,sans-serif;font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wrap-sm{max-width:860px}

/* ---- type -------------------------------------------------- */
h1,h2,h3,h4{font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-weight:400;line-height:1.02;letter-spacing:.005em;text-transform:uppercase}
/* sentence-case sub-headings use the sans, so Anton stays for impact only */
.h-sans{font-family:'Montserrat',sans-serif;font-weight:800;text-transform:none;letter-spacing:-.015em;line-height:1.2}
.display{font-size:clamp(2.5rem,6.6vw,5rem);line-height:.96;letter-spacing:.004em}
.h1{font-size:clamp(2.2rem,5.4vw,3.8rem)}
.h2{font-size:clamp(1.9rem,4.4vw,3.1rem)}
.h3{font-size:clamp(1.3rem,2.4vw,1.75rem)}
.eyebrow{font-family:'Montserrat',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--lime);display:block}
.eyebrow-muted{color:var(--muted-2)}
.lede{font-size:clamp(1.02rem,1.7vw,1.2rem);color:var(--muted);max-width:62ch;line-height:1.7}
.lede-mid{margin-left:auto;margin-right:auto;text-align:center}
.small{font-size:14.5px;color:var(--muted);line-height:1.65}
.tiny{font-size:12.6px;color:var(--muted-2);line-height:1.7}
.chrome-text{background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.lime{color:var(--lime)}
.center{text-align:center}
.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-48{margin-top:48px}

/* ---- sections ---------------------------------------------- */
section{padding:92px 0;position:relative}
.sec-sm{padding:64px 0}
.bg-char{background:var(--char)}
.bg-char2{background:var(--char-2)}
.bg-light{background:var(--paper);color:var(--ink)}
.bg-light .lede,.bg-light .small{color:#55555F}
.bg-light h1,.bg-light h2,.bg-light h3{color:var(--ink)}
.bg-light .eyebrow{color:#0A7A52}
.hairline{height:1px;background:var(--line);border:0;margin:0}
.glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(42% 50% at 84% 6%,rgba(163,220,36,.12),transparent 64%),radial-gradient(38% 44% at 4% 96%,rgba(255,255,255,.055),transparent 66%)}
.sec-head{max-width:720px;margin-bottom:46px}
.sec-head.center{margin-left:auto;margin-right:auto}
.sec-head h2{margin-top:16px}
.sec-head .lede{margin-top:18px}

/* ---- buttons ----------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;padding:16px 28px;border-radius:999px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .22s cubic-bezier(.2,.7,.3,1),background .22s,box-shadow .22s,color .22s;line-height:1.1;text-align:center}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.btn-lime{background:var(--lime);color:#0A1200;box-shadow:0 10px 30px rgba(163,220,36,.26)}
.btn-lime:hover{background:var(--lime-bright);box-shadow:0 14px 36px rgba(163,220,36,.34)}
.btn-chrome{background:var(--chrome);color:#141418;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.btn-ghost{border-color:var(--line-2);color:var(--white);background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:var(--white)}
.btn-dark{background:var(--ink);color:var(--white)}
.btn-dark:hover{background:var(--char-2)}
.btn-sm{padding:12px 22px;font-size:14px}
.btn-lg{padding:20px 42px;font-size:17px}
.btn-block{display:flex;width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.btn-row.center{justify-content:center}

/* a destination we do not have yet is never a fake link */
.pending{display:inline-flex;align-items:center;gap:9px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);border:1px dashed var(--line-2);border-radius:999px;padding:14px 26px;background:rgba(255,255,255,.03)}
.pending::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted-2);flex:none}
.bg-light .pending{color:#6A6A74;border-color:rgba(0,0,0,.2);background:rgba(0,0,0,.03)}

/* ---- announcement bar -------------------------------------- */
.announce{background:var(--lime);color:#0A1200;font-size:14.5px}
.announce-in{max-width:var(--maxw);margin:0 auto;padding:11px 24px;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;text-align:center}
.announce b{font-weight:700}
.announce a{font-family:'Montserrat',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;background:#0B1400;color:var(--lime);padding:8px 18px;border-radius:999px;white-space:nowrap}
.announce a:hover{background:#16220A}

/* ---- nav ---------------------------------------------------- */
.nav{position:sticky;top:0;z-index:70;background:rgba(8,8,10,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand-mark{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand-mark .logo-slot{width:40px;height:40px;border-radius:50%;background:var(--chrome);display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-weight:700;font-size:16px;color:#141418;flex:none}
.brand-mark .wordmark{font-family:'Anton',sans-serif;font-weight:400;font-size:20px;text-transform:uppercase;letter-spacing:.02em;color:var(--white);line-height:1}
.brand-mark .wordmark span{display:block;font-family:'Montserrat',sans-serif;font-weight:600;font-size:8px;letter-spacing:.26em;color:var(--muted-2);margin-top:4px;font-weight:400}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links > a,.nav-drop > button{font-size:12.6px;font-weight:700;letter-spacing:.075em;text-transform:uppercase;font-family:'Montserrat',sans-serif;color:var(--muted);text-decoration:none;padding:10px 9px;border-radius:999px;background:none;border:0;font-family:'Karla',sans-serif;cursor:pointer;transition:color .2s,background .2s;white-space:nowrap}
.nav-links > a:hover,.nav-drop > button:hover,.nav-links > a[aria-current="page"]{color:var(--white);background:rgba(255,255,255,.07)}
.nav-links > a[aria-current="page"]{color:var(--lime)}
.nav-cta{background:var(--lime)!important;color:#0A1200!important;font-weight:700!important;padding:11px 20px!important;white-space:nowrap}
.nav-cta:hover{background:var(--lime-bright)!important}
.nav-drop{position:relative}
.nav-drop > button::after{content:"▾";margin-left:6px;font-size:11px;opacity:.7}
.nav-drop-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:230px;background:var(--char-2);border:1px solid var(--line);border-radius:var(--r);padding:8px;display:none;box-shadow:0 20px 44px rgba(0,0,0,.5)}
.nav-drop-menu a{display:block;padding:11px 14px;border-radius:12px;font-size:14.5px;font-weight:600;color:var(--muted);text-decoration:none}
.nav-drop-menu a:hover{background:rgba(255,255,255,.07);color:var(--white)}
.nav-drop-menu .d{display:block;font-size:12.4px;font-weight:400;color:var(--muted-2);margin-top:2px}
.nav-drop[data-open="true"] .nav-drop-menu{display:block}
.burger{display:none;background:none;border:1px solid var(--line-2);border-radius:12px;padding:10px 12px;cursor:pointer;flex-direction:column;gap:4px}
.burger span{display:block;width:19px;height:2px;background:var(--white);transition:transform .3s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* Mobile drawer.
   The header is sticky and sits above the drawer on purpose, so the burger
   stays clickable as the close button. The drawer therefore starts BELOW the
   header rather than underneath it: --navh is measured from the real header in
   site.js on open, on resize and on scroll, so it is right whether or not the
   announcement bar is still in view. A fixed padding-top cannot do that, which
   is what used to let the header cover the first menu item. */
.drawer{display:none;position:fixed;top:var(--navh,96px);left:0;right:0;bottom:0;z-index:68;
  background:var(--ink);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.drawer.open{display:block}
.drawer-in{padding:14px max(24px,env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}
.drawer a{display:block;font-family:'Anton',sans-serif;font-size:1.75rem;line-height:1.12;font-weight:400;text-transform:uppercase;color:var(--white);text-decoration:none;padding:16px 0;border-bottom:1px solid var(--line);overflow-wrap:break-word}
.drawer a:last-child{border-bottom:0}
.drawer a.hi{color:var(--lime)}
.drawer a:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.drawer:focus{outline:none}
@media(max-width:380px){.drawer a{font-size:1.5rem}}
/* iOS keeps scrolling the page behind a fixed overlay unless it is pinned */
body.locked{overflow:hidden;position:fixed;width:100%}
@media(max-width:1180px){.nav-links{display:none}.burger{display:flex}}
.skip{position:absolute;left:-9999px;z-index:200;background:var(--lime);color:#0A1200;padding:13px 20px;border-radius:0 0 12px 0;font-weight:700}
.skip:focus{left:0;top:0}

/* ---- hero --------------------------------------------------- */
.hero{padding:86px 0 78px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.16fr .84fr;gap:48px;align-items:center;position:relative;z-index:2}
.hero .display{margin:18px 0 22px}
.hero .lede{font-size:clamp(1.05rem,1.8vw,1.26rem)}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:40px}.hero{padding:62px 0 66px}}

/* ---- photo slots (no invented faces — labelled placeholders) */
.photo{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--char-2);border:1px solid var(--line)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo-45{aspect-ratio:4/5}
.photo-11{aspect-ratio:1/1}
.photo-169{aspect-ratio:16/9}
.photo .slot{position:absolute;inset:12px;border:1px dashed var(--line-2);border-radius:calc(var(--r-lg) - 6px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;padding:22px}
.photo .slot b{font-family:'Montserrat',sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700}
.photo .slot span{font-size:12.4px;color:var(--muted-2);line-height:1.6}
.photo-frame{box-shadow:0 30px 70px rgba(0,0,0,.55)}
/* Photographs shot on a light backdrop are blended into the dark page at the
   edges, so they read as part of the brand rather than a bright rectangle.
   Non-destructive: the image file itself is untouched. */
.photo-blend::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.28) 22%,transparent 48%),
    linear-gradient(to right,rgba(0,0,0,.42),transparent 26%,transparent 74%,rgba(0,0,0,.42)),
    radial-gradient(120% 90% at 50% 34%,transparent 44%,rgba(0,0,0,.5) 100%)}
.photo-blend img{filter:saturate(.92) contrast(1.04)}

/* Background-removed cutouts sit directly on the page instead of inside a
   framed rectangle: no card, no border, no crop, and a soft drop shadow so the
   figure still separates from the black. */
.photo-cut{background:none;border:0;border-radius:0;overflow:visible;box-shadow:none;aspect-ratio:auto}
.photo-cut img{position:static!important;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 26px 48px rgba(0,0,0,.6))}
.photo-cut::after{display:none}
.photo-cut .slot{position:static;min-height:320px;border-radius:var(--r-lg)}
/* never render a cutout larger than the file actually is */
.photo-cut{margin-inline:auto}
.cut-cap{max-width:430px}

/* an <img data-slot> swaps itself for the labelled slot if the file
   is not in assets/img/ yet — see assets/img/README.md */
.photo img[data-slot]{position:absolute;inset:0}
.photo.is-empty img{display:none}
.photo:not(.is-empty) .slot{display:none}
.logo-img{display:block;height:38px;width:auto}
/* the footer uses the full lockup, which already contains the name */
footer .logo-img{height:86px}
footer .brand-mark:not(.is-empty) .wordmark{display:none}
.brand-mark.is-empty .logo-img{display:none}
.brand-mark:not(.is-empty) .logo-slot{display:none}
.art{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--char-2);position:relative}
.art img{width:100%;height:auto;display:block}
.art.is-empty img{display:none}
.art:not(.is-empty) .slot{display:none}
.art .slot{position:relative;inset:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;padding:52px 24px;border:1px dashed var(--line-2);border-radius:var(--r-lg);margin:10px}
/* a cutout graphic in an .art slot: no box, no border, just the mark */
.art-cut{background:none;border:0;border-radius:0;overflow:visible}
.art-cut img{filter:drop-shadow(0 20px 40px rgba(0,0,0,.55))}
.art-cut .slot{border-radius:var(--r-lg)}

/* ---- cards -------------------------------------------------- */
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:1fr}}
@media(max-width:760px){.grid-2,.grid-4{grid-template-columns:1fr}}

.card{background:var(--char);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 30px 36px;display:flex;flex-direction:column;transition:transform .3s,border-color .3s,box-shadow .3s}
.card:hover{transform:translateY(-5px);border-color:var(--line-2);box-shadow:0 24px 56px rgba(0,0,0,.45)}
.card h3{margin-bottom:12px}
.card .lede{font-size:16px;margin-bottom:20px;flex:1}
.card .btn{align-self:flex-start;margin-top:auto}
.card-top{height:4px;border-radius:999px;margin-bottom:24px;width:56px}
.card-lime .card-top{background:var(--lime)}
.card-chrome .card-top{background:var(--chrome)}
.card-light{background:var(--white);color:var(--ink);border-color:rgba(0,0,0,.1)}
.card-light h3{color:var(--ink)}
.card-light .lede{color:#55555F}

/* feature rows */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.feature-rev > *:first-child{order:2}
@media(max-width:900px){.feature{grid-template-columns:1fr;gap:34px}.feature-rev > *:first-child{order:0}}

/* ---- lists -------------------------------------------------- */
.ticks{list-style:none;display:grid;gap:11px;margin-top:22px}
.ticks li{position:relative;padding-left:34px;font-size:15.8px;line-height:1.55}
.ticks .tk{position:absolute;left:0;top:2px;width:21px;height:21px;border-radius:50%;background:var(--lime-w);color:var(--lime);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;margin-top:2px}
.bg-light .ticks .tk{background:rgba(10,122,82,.12);color:#0A7A52}
/* "not a fit" lists: same layout, neutral marker — a green check against a
   disqualifier reads as an endorsement of it */
.ticks-neutral .tk{background:rgba(255,255,255,.06);color:var(--muted-2)}
.bg-light .ticks-neutral .tk{background:rgba(20,16,24,.07);color:#6A6074}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.chips span{font-size:13.5px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:9px 16px;background:rgba(255,255,255,.03)}

/* ---- steps / roadmap ---------------------------------------- */
.steps{display:grid;gap:16px;margin-top:40px}
.step{display:grid;grid-template-columns:72px 1fr;gap:22px;align-items:start;background:var(--char);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 30px}
.step .n{font-family:'Anton',sans-serif;font-size:2.2rem;line-height:1;background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.step h3{font-size:1.25rem;margin-bottom:8px}
.step p{color:var(--muted);font-size:15.4px}
@media(max-width:620px){.step{grid-template-columns:1fr;gap:12px}}
/* phase ranges ("61–90") need more room than a two-digit step number */
.steps-phase .step{grid-template-columns:132px 1fr}
.steps-phase .step .n{font-size:1.45rem;white-space:nowrap;letter-spacing:.01em}
@media(max-width:620px){.steps-phase .step{grid-template-columns:1fr}}

/* ---- pricing ------------------------------------------------ */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;align-items:stretch}
@media(max-width:980px){.tiers{grid-template-columns:1fr}}
.tier{background:var(--char);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 30px 36px;display:flex;flex-direction:column;position:relative}
.tier-featured{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime),0 26px 60px rgba(163,220,36,.14)}
.tier .flag{position:absolute;top:-13px;left:30px;background:var(--lime);color:#0A1200;font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:6px 14px;border-radius:999px}
.tier h3{font-size:1.4rem;margin-bottom:6px}
.tier .who{font-size:14px;color:var(--muted-2);margin-bottom:22px}
.tier .price{font-family:'Anton',sans-serif;font-size:3rem;letter-spacing:.01em;line-height:1;margin-bottom:6px}
.tier .price small{font-family:'Montserrat',sans-serif;font-size:.3em;color:var(--muted);letter-spacing:.06em;font-weight:600}
.tier .price-note{font-size:13px;color:var(--muted-2);margin-bottom:24px;min-height:20px}
.tier .ticks{flex:1;margin-bottom:26px}
.tier .ticks li{font-size:15px}

/* ---- ecosystem ---------------------------------------------- */
.eco{margin-top:46px}
.eco-parent{background:var(--chrome);color:#111;border-radius:var(--r-lg);padding:28px 32px;text-align:center;margin-bottom:10px}
.eco-parent b{font-family:'Anton',sans-serif;font-size:1.8rem;text-transform:uppercase;display:block;letter-spacing:-.01em}
.eco-parent span{font-family:'Montserrat',sans-serif;font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#2A2A33}
.eco-rail{display:flex;justify-content:center;margin:0 0 10px}
.eco-rail i{display:block;width:1px;height:26px;background:var(--line-2)}
.eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.eco-grid{grid-template-columns:1fr}}
.eco-node{background:var(--char);border:1px solid var(--line);border-radius:var(--r);padding:24px 24px 26px;text-decoration:none;color:inherit;display:block;transition:border-color .25s,transform .25s}
.eco-node:hover{border-color:var(--lime);transform:translateY(-3px)}
.eco-node b{display:block;font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:16px;margin-bottom:7px}
.eco-node .k{font-family:'Montserrat',sans-serif;font-weight:700;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--lime);display:block;margin-bottom:11px}
.eco-node p{font-size:14px;color:var(--muted);line-height:1.55}
.eco-node.sub{background:var(--char-2);border-style:dashed}
.eco-node.sub .k{color:var(--muted-2)}

/* ---- testimonials (real only; empty state when none) -------- */
.quote{background:var(--char);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 30px;display:flex;flex-direction:column;gap:18px}
.quote p{font-family:'Montserrat',sans-serif;font-style:italic;font-weight:500;font-size:1.18rem;line-height:1.45}
.quote .who{display:flex;align-items:center;gap:13px;margin-top:auto}
.quote .av{width:44px;height:44px;border-radius:50%;background:var(--char-3);border:1px dashed var(--line-2);flex:none}
.quote .who b{font-size:14.6px;display:block}
.quote .who span{font-size:13px;color:var(--muted-2)}
.empty-state{border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:46px 34px;text-align:center;background:rgba(255,255,255,.02)}
.empty-state b{font-family:'Montserrat',sans-serif;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:12px}
.empty-state p{color:var(--muted-2);font-size:15px;max-width:52ch;margin:0 auto}

/* ---- media / episode cards ---------------------------------- */
.mcard{background:var(--char);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .3s,border-color .3s}
.mcard:hover{transform:translateY(-4px);border-color:var(--line-2)}
.mcard .thumb{aspect-ratio:16/9;background:var(--char-2);position:relative;display:flex;align-items:center;justify-content:center}
.mcard .thumb .slot{font-family:'Montserrat',sans-serif;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);text-align:center;line-height:1.7}
.mcard .body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.mcard .cat{font-family:'Montserrat',sans-serif;font-weight:700;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--lime);margin-bottom:10px}
.mcard h3{font-size:1.16rem;margin-bottom:9px}
.mcard p{font-size:14.2px;color:var(--muted);flex:1}
.mcard .go{margin-top:16px;font-size:13.5px;font-weight:700;color:var(--lime)}
.player{aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:var(--char-2);border:1px solid var(--line);position:relative}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- forms --------------------------------------------------- */
.form-card{background:var(--char);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 32px 36px}
.bg-light .form-card{background:#fff;border-color:rgba(0,0,0,.1)}
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:700;letter-spacing:.02em;margin-bottom:7px;color:var(--white)}
.bg-light .field label{color:var(--ink)}
.field .opt{font-weight:400;color:var(--muted-2)}
.field input,.field select,.field textarea{width:100%;font-family:'Montserrat',sans-serif;font-size:16px;color:var(--white);background:var(--char-2);border:1px solid var(--line-2);border-radius:14px;padding:15px 16px;transition:border-color .2s,box-shadow .2s}
.bg-light .field input,.bg-light .field select,.bg-light .field textarea{background:#F3F3F6;color:var(--ink);border-color:rgba(0,0,0,.16)}
.field textarea{min-height:130px;resize:vertical}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--lime) 50%),linear-gradient(135deg,var(--lime) 50%,transparent 50%);background-position:calc(100% - 21px) 50%,calc(100% - 15px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:46px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(163,220,36,.18)}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#FF6B6B;box-shadow:0 0 0 3px rgba(255,107,107,.14)}
.field-error{display:block;font-size:12.8px;color:#FF8A8A;margin-top:6px;min-height:1px}
.field-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.field-row{grid-template-columns:1fr}}
.form-status{margin-top:14px;font-size:14px;color:#FF8A8A;line-height:1.6}
.form-status a{color:var(--lime);font-weight:700}
.consent{display:flex;gap:11px;align-items:flex-start;margin:4px 0 20px}
.consent input{width:18px;height:18px;flex:none;margin-top:3px;accent-color:var(--lime)}
.consent label{font-size:12.8px;color:var(--muted);font-weight:400;line-height:1.6}
.bg-light .consent label{color:#55555F}
.btn.is-busy{opacity:.65;cursor:progress}

/* ---- FAQ ----------------------------------------------------- */
.faq{display:grid;gap:10px;max-width:860px;margin:36px auto 0}
.faq details{background:var(--char);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.faq summary{cursor:pointer;padding:20px 24px;font-weight:700;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--lime);font-size:22px;line-height:1;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 24px 22px;color:var(--muted);font-size:15.4px}
.faq details p + p{padding-top:0}
.bg-light .faq details{background:#fff;border-color:rgba(0,0,0,.1)}
.bg-light .faq details p{color:#55555F}

/* ---- disclosures --------------------------------------------- */
.disclosure{font-size:12.6px;line-height:1.75;color:var(--muted-2);border-left:2px solid var(--line-2);padding-left:16px;max-width:76ch;margin-top:28px}
.disclosure b{color:var(--muted)}
.bg-light .disclosure{color:#6A6A74;border-color:rgba(0,0,0,.18)}
.bg-light .disclosure b{color:#2A2A33}

/* ---- footer --------------------------------------------------- */
footer{background:var(--char);border-top:1px solid var(--line);padding:68px 0 44px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:38px;margin-bottom:44px}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot-col h4{font-family:'Montserrat',sans-serif;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);font-weight:700;margin-bottom:16px}
.foot-col a{display:block;color:var(--muted);text-decoration:none;font-size:14.6px;padding:6px 0}
.foot-col a:hover{color:var(--lime)}
.foot-bottom{border-top:1px solid var(--line);padding-top:26px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.foot-bottom .tiny{max-width:none}
.foot-legal{margin-top:22px}

/* ---- motion -------------------------------------------------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
  .btn:hover,.card:hover,.mcard:hover,.eco-node:hover{transform:none}
}

/* keep inline cross-links from breaking mid-phrase inside narrow cards */
/* grid and tier children must be allowed to shrink below their content width,
   or one long unbreakable phrase widens the whole page on a phone */
.grid>*,.tiers>*{min-width:0}
.tiers-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:980px){.tiers-2{grid-template-columns:1fr}}

/* --- Apply for Funding stays reachable on mobile ------------------ */
.nav-cta-mobile{display:none;margin-left:auto;margin-right:10px;padding:10px 18px!important;font-size:12px!important;text-decoration:none}
@media(max-width:1180px){.nav-cta-mobile{display:inline-flex}}
@media(max-width:380px){.nav-cta-mobile{padding:9px 13px!important;font-size:11px!important}}
.brand-mark .wordmark span{white-space:nowrap}
@media(max-width:1180px){.brand-mark .wordmark span{display:none}}

/* the Access Unlocked lockup is portrait: cap it so the program page opens on
   the brand mark rather than a full screen of it */
.au-lockup{max-width:400px;margin:0 auto 40px}
@media(max-width:720px){.au-lockup{max-width:300px;margin-bottom:28px}}

/* ---- video ---------------------------------------------------
   The player is a facade: a black panel with a play control. The real embed
   is only injected on click, so no page ships a third-party iframe, no
   cookie is set before the viewer chooses, and the homepage does not load
   six players at once. */
.sec-video .vid{margin-top:40px}
.vid{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:var(--char);border:1px solid var(--line);box-shadow:0 30px 70px rgba(0,0,0,.5)}
.vid iframe,.vid .vid-el{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}
.vid-facade{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  background-color:var(--char);background-size:cover;background-position:center;border:0;cursor:pointer;padding:28px;text-align:center}
.vid-facade::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 50% 45%,rgba(163,220,36,.16),transparent 70%),rgba(0,0,0,.42)}
.vid-play{position:relative;width:76px;height:76px;border-radius:50%;background:var(--lime);display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 10px rgba(163,220,36,.16);transition:transform .2s,box-shadow .2s}
.vid-play::after{content:"";margin-left:5px;border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent #0A1200}
.vid-facade:hover .vid-play,.vid-facade:focus-visible .vid-play{transform:scale(1.07);box-shadow:0 0 0 14px rgba(163,220,36,.22)}
.vid-facade:focus-visible{outline:2px solid var(--lime);outline-offset:-4px}
.vid-meta{position:relative;display:flex;flex-direction:column;gap:6px;max-width:30ch}
.vid-meta b{font-family:'Anton',sans-serif;font-size:1.15rem;line-height:1.2;text-transform:uppercase;color:var(--white)}
.vid-meta span{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.vid.is-loading::after{content:"";position:absolute;inset:0;background:var(--char);
  background-image:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.06) 40%,transparent 60%);background-size:220% 100%;animation:vidload 1.1s linear infinite}
@keyframes vidload{from{background-position:140% 0}to{background-position:-40% 0}}
.vid-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:28px;text-align:center;background:var(--char)}
.vid-fallback p{color:var(--muted);font-size:15px;max-width:36ch}
.vid-transcript{margin-top:22px;border:1px solid var(--line);border-radius:var(--r);background:var(--char)}
.vid-transcript summary{cursor:pointer;padding:16px 20px;font-weight:600;font-size:15px}
.vid-transcript p{padding:0 20px 20px;color:var(--muted);font-size:15px;line-height:1.75;white-space:pre-line}
@media(prefers-reduced-motion:reduce){.vid-play{transition:none}.vid.is-loading::after{animation:none}}

/* ---- client stories ------------------------------------------
   One wall, no categories and no filters — the work connects, so the stories
   sit together. Renders only when approved stories exist. */
.stories{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px;margin-top:40px}
.story{background:var(--char);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 28px;margin:0;display:flex;flex-direction:column;gap:18px}
.story-media{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--char-2)}
.story-media .vid-el,.story-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-facade-sm{gap:0}
.vid-facade-sm .vid-play{width:54px;height:54px;box-shadow:0 0 0 7px rgba(163,220,36,.16)}
.vid-facade-sm .vid-play::after{border-width:9px 0 9px 15px}
.story-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.story blockquote{margin:0;font-size:16.5px;line-height:1.65;color:var(--white)}
.story blockquote::before{content:"\201C";display:block;font-family:'Anton',sans-serif;font-size:2.6rem;line-height:.6;color:var(--lime);margin-bottom:10px}
.story figcaption{display:flex;flex-direction:column;gap:3px;margin-top:auto}
.story figcaption b{font-family:'Montserrat',sans-serif;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--lime)}
.story figcaption span{font-size:13.5px;color:var(--muted-2)}
.story .story-result{color:var(--muted)}