/* ==================================================================
   Greener Financial Future — production stylesheet
   Palette taken from the supplied logo vectors. Lime is a FILL carrying
   dark ink, never text on light. Photography runs clean; legibility is
   bought with a corner-confined scrim plus type shadow, never by
   darkening the whole frame.
   ================================================================== */
:root{
  --ink:#06120E; --ink-2:#0A1B14; --surf:#0F2419;
  --fg:#EAF2ED; --fg-2:#93AA9E; --rule:#1C3A2C; --field:#48755F;
  --forest:#006838; --emerald:#00A651; --mid:#39B54A; --teal:#2BB673;
  --lime:#8DC63F; --grey:#4E4E4E;
  --display:"Franklin Gothic Medium","Segoe UI Semibold","Trebuchet MS",Tahoma,sans-serif;
  --body:Georgia,"Iowan Old Style","Times New Roman",serif;
  --label:"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--fg);font-family:var(--body);
     font-size:19px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--lime)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.024em;text-wrap:balance}
p{margin:0 0 17px;max-width:64ch;color:#BACAC1}
p:last-child{margin-bottom:0}
.wrap{max-width:1220px;margin:0 auto;padding:0 36px}

.brandrule{display:flex;height:4px}
.brandrule i{flex:1}
.brandrule i:nth-child(1){background:var(--forest)}
.brandrule i:nth-child(2){background:var(--emerald)}
.brandrule i:nth-child(3){background:var(--teal)}
.brandrule i:nth-child(4){background:var(--mid)}
.brandrule i:nth-child(5){background:var(--lime)}

header{border-bottom:1px solid var(--rule);background:var(--ink);position:relative;z-index:5}
.nav-in{max-width:1220px;margin:0 auto;padding:16px 36px;display:flex;justify-content:space-between;
        align-items:center;gap:20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .mark{width:32px;flex:none}
.word{font-family:var(--display);font-size:19px;letter-spacing:-.01em;text-transform:uppercase;color:var(--fg)}
.word em{font-style:normal;color:var(--lime)}
.nav-links{display:flex;gap:4px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav-links a{font-family:var(--label);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
             color:var(--fg-2);text-decoration:none;padding:9px 13px;display:block}
.nav-links a:hover{color:var(--fg)}
.nav-links a.on{background:var(--forest);color:var(--fg)}

/* hero + stages: clean plate, corner-confined scrim, type carries its own shadow */
.hero,.stage{position:relative;display:flex;align-items:flex-end;overflow:hidden}
.hero{min-height:86vh}
.stage{height:66vh;min-height:440px}
.hero>img,.stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Two layers. The diagonal is the mood; the vertical guarantees the copy band is
   dark enough to read. Tuning the diagonal alone left the trailing end of long
   lines at 1.36:1 over the brighter plates — text-shadow gets no WCAG credit, so
   the scrim has to do the work. */
.corner{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top,
      rgba(5,15,11,.94) 0%, rgba(5,15,11,.90) 30%, rgba(5,15,11,.80) 46%,
      rgba(5,15,11,.52) 60%, rgba(5,15,11,.20) 74%, rgba(5,15,11,0) 88%),
    linear-gradient(to top right,
      rgba(5,15,11,.88) 0%, rgba(5,15,11,.66) 26%, rgba(5,15,11,.34) 46%,
      rgba(5,15,11,.10) 60%, rgba(5,15,11,0) 72%)}
.hero-in,.stage-in{position:relative;z-index:2;width:100%;max-width:1220px;margin:0 auto}
.hero-in{padding:120px 36px 58px}
.stage-in{padding:0 36px 54px}
.hero-in h1,.hero-in .stand,.stage-in h2,.stage-in p{
  text-shadow:0 1px 3px rgba(0,0,0,.85), 0 2px 18px rgba(0,0,0,.6)}
.hero-in h1,.stage-in h2{color:#F2F8F4}
.hero-in .stand,.stage-in p{color:#DCE8E1}
h1{font-size:clamp(36px,4.7vw,64px);line-height:1.0;margin:0 0 18px;max-width:19ch}
h1 em{font-style:normal;color:var(--lime)}
.stand{font-size:19.5px;max-width:46ch;margin:0 0 28px}
.kicker,.step-n{display:inline-block;font-family:var(--label);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;padding:7px 13px;margin:0 0 20px;text-shadow:none;color:#EAF2ED;
  background:var(--forest)}
.s2 .step-n{background:var(--teal);color:#06120E}
.s3 .step-n{background:var(--lime);color:#0A1A08}
.stage-in h2{max-width:22ch;font-size:clamp(26px,3.2vw,42px);line-height:1.04;margin:0 0 16px}
.stage-in p{max-width:52ch}

.cta{display:flex;gap:0;flex-wrap:wrap;align-items:stretch;margin:26px 0 0}
.btn{background:var(--lime);color:#0A1A08;padding:16px 30px;text-decoration:none;
     font-family:var(--label);font-size:12px;letter-spacing:.1em;text-transform:uppercase;border:none;cursor:pointer}
.btn2{color:var(--fg);text-decoration:none;font-family:var(--label);font-size:12px;letter-spacing:.1em;
      text-transform:uppercase;padding:16px 26px;border:1px solid rgba(234,242,237,.5);border-left:none}
.btn2.solo{border-left:1px solid rgba(234,242,237,.5)}

.factline{background:var(--ink-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.factline .wrap{padding-top:12px;padding-bottom:12px;display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.factline b{font-family:var(--label);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--lime)}
.factline span{font-family:var(--label);font-size:11px;color:var(--fg-2);line-height:1.5;letter-spacing:.03em}

.band{padding:70px 0}
.band.pt0{padding-top:0}
.sl{font-family:var(--label);font-size:11px;letter-spacing:.17em;text-transform:uppercase;
    color:var(--lime);margin-bottom:18px}
h2{font-size:clamp(27px,3.4vw,44px);line-height:1.03;margin:0 0 18px}
.h2s{font-size:clamp(22px,2.5vw,29px);margin-bottom:14px}
.h1p{font-size:clamp(32px,4.2vw,56px);line-height:1.02;max-width:24ch;margin:0 0 20px}
.lede{font-size:20px;max-width:60ch;color:#C6D6CC}
.prose h2{margin-top:34px}
.prose p{max-width:68ch}
.draftnote{border-left:4px solid var(--lime);padding:14px 18px;background:var(--ink-2);
           font-family:var(--label);font-size:12.5px;line-height:1.6;color:var(--fg-2);max-width:none}
.draftnote strong{color:var(--lime)}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-left:1px solid var(--rule)}
.cell{border:1px solid var(--rule);border-left:none;padding:28px 26px}
.cell h3{font-size:21px;margin:0 0 9px}
/* --forest as a foreground on its own tint measured 2.37:1. Lime on the same
   tint is 8.01:1 and keeps the badge unmistakably brand. */
.soon{font-family:var(--label);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
      color:var(--lime);background:rgba(0,104,56,.22);display:inline-block;padding:5px 9px;margin-top:6px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:start;border:1px solid var(--rule)}
.split>div{padding:30px 28px}
.split>div:first-child{border-right:1px solid var(--rule);background:var(--surf)}
.split .poster{padding:0;border-right:1px solid var(--rule);background:none}
.clist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.clist li{display:grid;grid-template-columns:18px 1fr;gap:12px;font-size:16.5px;color:#BACAC1}
.clist i{width:9px;height:9px;background:var(--lime);margin-top:9px;display:block}
.clist li.no i{background:var(--grey)}

.tool{border:1px solid var(--rule);background:var(--ink-2);margin-top:22px}
.tool-h{padding:13px 24px;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;
        gap:12px;flex-wrap:wrap;font-family:var(--label);font-size:10.5px;letter-spacing:.12em;
        text-transform:uppercase;color:var(--fg-2)}
.tool-h b{color:var(--lime)}
.tool-b{padding:24px}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:6px}
.row .il{font-family:var(--label);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
.row .iv{font-family:var(--display);font-size:30px;color:var(--lime);font-variant-numeric:tabular-nums}
input[type=range]{width:100%;margin:10px 0 20px;accent-color:var(--lime);height:24px}
.ro{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid var(--rule);padding-top:16px}
.ro b{display:block;font-family:var(--display);font-size:26px;color:var(--fg);
      font-variant-numeric:tabular-nums;margin-bottom:4px}
.ro span{font-size:14px;color:var(--fg-2);line-height:1.4;display:block}
.toolsrc{font-family:var(--label);font-size:9.5px;line-height:1.6;color:var(--fg-2);
         border-top:1px solid var(--rule);padding:12px 24px;letter-spacing:.03em;margin:0;max-width:none}

.poster{position:relative;overflow:hidden}
.poster img{width:100%;aspect-ratio:16/9;object-fit:cover}
.play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2}
.play i{width:0;height:0;border-style:solid;border-width:20px 0 20px 32px;
        border-color:transparent transparent transparent var(--fg);display:block;
        filter:drop-shadow(0 0 16px rgba(0,0,0,.6))}
.hostbadge{position:absolute;left:0;top:0;z-index:2;font-family:var(--label);font-size:9.5px;
           letter-spacing:.11em;text-transform:uppercase;background:var(--forest);color:#EAF2ED;padding:7px 12px}
.disc{font-family:var(--label);font-size:11px;line-height:1.6;color:var(--fg-2);
      border-left:2px solid var(--lime);padding-left:13px;margin-top:16px}

/* the film */
.lede.sm{font-size:17.5px;max-width:56ch;margin-bottom:22px}
.filmwrap{position:relative;border:1px solid var(--rule);background:#000;
  max-width:1000px;line-height:0}
.film{width:100%;height:auto;aspect-ratio:16/9;display:block;background:#000}
.film:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
/* the badge must never sit over the native control bar */
.filmwrap .hostbadge{top:0;left:0}
.nofilm{line-height:1.6;padding:26px;color:var(--fg-2);font-size:15px}
.nofilm a{color:var(--lime)}

.tx{max-width:1000px;margin-top:26px;border-top:1px solid var(--rule)}
.tx summary{cursor:pointer;padding:16px 0;font-family:var(--label);font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--lime);
  display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.tx summary::-webkit-details-marker{display:none}
.tx summary span{color:var(--fg-2);letter-spacing:.06em}
.tx summary:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.txb{padding-bottom:14px}
.txr{display:grid;grid-template-columns:74px 1fr;gap:18px;padding:15px 0;
  border-top:1px solid var(--rule)}
.txt-t{font-family:var(--label);font-size:11px;color:var(--fg-2);
  font-variant-numeric:tabular-nums;padding-top:5px}
.txl{font-family:var(--label);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--lime);margin:0 0 6px}
.txr p{margin:0;font-size:17px}

/* forms — complete markup, no backend wired yet */
.bookform{margin-top:22px;max-width:780px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.fld{margin:0 0 18px;max-width:none}
.fld label{display:block;font-family:var(--label);font-size:10.5px;letter-spacing:.11em;
           text-transform:uppercase;color:var(--fg-2);margin-bottom:7px}
/* --rule is a divider token: against the field fill it measures 1.43:1, so the
   inputs had no perceivable boundary. --field clears 3:1 against both the fill
   and the page without touching dividers elsewhere. */
.fld input,.fld select,.fld textarea{width:100%;background:var(--ink-2);border:1px solid var(--field);
  color:var(--fg);font-family:var(--body);font-size:17px;padding:13px 14px;border-radius:0}
.fld textarea{resize:vertical}
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible{
  outline:2px solid var(--lime);outline-offset:2px}

.toolin{margin-bottom:6px}
.toolin .fld{margin-bottom:14px}
.formmsg{display:none}
.formmsg.show{display:block;font-family:var(--label);font-size:12.5px;line-height:1.6;
  color:var(--fg);background:rgba(0,104,56,.20);border-left:3px solid var(--lime);
  padding:13px 15px;margin:0 0 12px;max-width:780px}

/* first focusable element on every page */
.skip{position:absolute;left:-9999px;top:0;z-index:99;
  font-family:var(--label);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--lime);color:#0A1A08;padding:12px 18px;text-decoration:none}
.skip:focus{left:0}
.consent{display:block;margin:6px 0 4px;max-width:70ch}
.consent label{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;
               font-size:15.5px;color:#BACAC1;line-height:1.5}
.consent input{margin-top:4px;accent-color:var(--lime);width:17px;height:17px}
.formnote{font-family:var(--label);font-size:11px;line-height:1.6;color:var(--fg-2);
          border-left:3px solid var(--forest);padding-left:13px;margin-top:20px}

.deets{margin:0;display:grid;grid-template-columns:auto 1fr;gap:9px 20px;font-size:16.5px}
.deets dt{font-family:var(--label);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
          color:var(--fg-2);padding-top:4px}
.deets dd{margin:0;color:#BACAC1}

footer{padding:48px 0 66px;border-top:1px solid var(--rule);font-size:15px;color:var(--fg-2)}
.lockup{width:200px;margin-bottom:18px}
.fnav{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:16px;max-width:none}
.fnav a{font-family:var(--label);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
        color:var(--fg-2);text-decoration:none}
.fnav a:hover{color:var(--lime)}
footer p{color:var(--fg-2);max-width:none;margin-bottom:8px}
.disambig{color:#7E958A}
.legal{font-size:13.5px;line-height:1.6;margin-top:16px;max-width:84ch;color:#7E958A}

@media (max-width:900px){
  body{font-size:18px}
  .wrap,.nav-in{padding-left:22px;padding-right:22px}
  .hero{min-height:0}
  .hero,.stage{display:block;height:auto;min-height:0}
  .hero>img,.stage>img{position:static;height:auto}
  .corner{display:none}
  .hero-in,.stage-in{padding:28px 22px 34px;background:var(--ink-2)}
  .hero-in h1,.hero-in .stand,.stage-in h2,.stage-in p{text-shadow:none}
  .grid3,.split,.ro,.f2{grid-template-columns:1fr;border-left:none}
  .cell{border-left:1px solid var(--rule)}
  .split>div:first-child{border-right:none;border-bottom:1px solid var(--rule)}
  .split .poster{border-right:none;border-bottom:1px solid var(--rule)}
  .band{padding:48px 0}
  .nav-links{gap:0}
  .txr{grid-template-columns:1fr;gap:4px}
  .txt-t{padding-top:0}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}