/* ============================================================
   site-chrome.css
   Shared style layer for the 5 redesigned pages:
   /, /about, /method, /boardroom, /notes

   Tokens + base typography + nav + footer + common section
   scaffolding + .btn + reduced-motion + focus-visible.

   Page-specific styles (diagrams, cards, timelines, etc.) live
   inline in each page's <style> block to keep this file small.

   This file is the single source of truth for the new design's
   typography/colour system. If you change a token here it
   updates all 5 pages at once.
   ============================================================ */

:root{
  --cream:#F4EEE0;
  --cream-2:#EBE3D2;
  --ink:#15120B;
  --ink-soft:#2A2519;
  --gold:#C8A33E;
  --gold-deep:#A8842A;
  --muted:#6B6452;
  --line:rgba(21,18,11,.12);
  --maxw:1080px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Poppins',system-ui,sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Playfair Display',Georgia,serif;
  line-height:1.1;
  letter-spacing:-.01em;
  font-weight:700;
}

a{color:inherit;text-decoration:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

.eyebrow{
  font-weight:600;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-deep);
}

/* ===== NAV ===== */
.site-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(21,18,11,.96);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(200,163,62,.18);
}
.site-nav .nav-in{
  max-width:var(--maxw);margin:0 auto;padding:16px 28px;
  display:flex;align-items:center;justify-content:space-between;
}
.site-nav .brand{
  font-family:'Playfair Display';font-weight:700;
  color:var(--cream);font-size:1.1rem;letter-spacing:.02em;
}
.site-nav .brand span{color:var(--gold)}
.site-nav .nav-links{display:flex;gap:30px;align-items:center;list-style:none}
.site-nav .nav-links a{
  color:rgba(244,238,224,.72);font-size:.9rem;font-weight:400;
  transition:color .15s;
}
.site-nav .nav-links a:hover,
.site-nav .nav-links a.active{color:var(--cream)}
.site-nav .nav-cta{
  background:var(--gold);color:var(--ink) !important;
  padding:9px 18px;border-radius:9px;
  font-weight:600;font-size:.85rem !important;
}
.site-nav .nav-cta:hover{background:var(--gold-deep);color:var(--ink) !important}

/* hamburger (built by site-chrome.js; hidden on desktop) */
.site-nav .menu-toggle{
  display:none;appearance:none;border:0;background:none;cursor:pointer;
  width:42px;height:42px;padding:9px;position:relative;z-index:60;
}
.site-nav .menu-toggle span{
  display:block;height:2px;width:100%;background:var(--cream);border-radius:2px;
  margin:4px 0;transition:transform .3s ease,opacity .2s ease;
}
.site-nav .menu-toggle.on span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.site-nav .menu-toggle.on span:nth-child(2){opacity:0}
.site-nav .menu-toggle.on span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* slide-down mobile panel */
.site-nav .mobile-menu{
  position:absolute;left:0;right:0;top:100%;z-index:55;
  background:rgba(21,18,11,.98);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(200,163,62,.25);
  display:flex;flex-direction:column;padding:8px 0 18px;
  transform:translateY(-12px);opacity:0;visibility:hidden;
  transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .3s,visibility .3s;
}
.site-nav .mobile-menu.on{transform:none;opacity:1;visibility:visible}
.site-nav .mobile-menu a{
  color:rgba(244,238,224,.82);text-decoration:none;font-size:1.05rem;font-weight:500;
  padding:15px 28px;border-bottom:1px solid rgba(244,238,224,.06);
}
.site-nav .mobile-menu a:last-child{border-bottom:0}
.site-nav .mobile-menu a.active{color:var(--cream)}
.site-nav .mobile-menu a.mm-cta{
  margin:14px 24px 4px;background:var(--gold);color:var(--ink);
  text-align:center;border-radius:9px;font-weight:600;border-bottom:0;
}

/* ===== FOOTER ===== */
.site-footer{
  background:#0c0a06;color:rgba(244,238,224,.55);
  padding:54px 0;font-size:.9rem;
}
.site-footer .foot-in{
  max-width:var(--maxw);margin:0 auto;padding:0 28px;
  display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:20px;align-items:center;
}
.site-footer .foot-in a{
  color:rgba(244,238,224,.7);margin-right:20px;
}
.site-footer .foot-in a:hover{color:var(--gold)}
.site-footer .foot-tag{color:rgba(244,238,224,.55)}
.site-footer .foot-strap{display:block;font-family:'Playfair Display',Georgia,serif;font-style:italic;color:var(--gold);font-size:.98rem;margin-top:6px;letter-spacing:.02em}
.site-footer .foot-brandblock{text-align:center;max-width:var(--maxw);margin:0 auto 28px;padding:0 28px 30px;border-bottom:1px solid rgba(200,163,62,.14)}
.site-footer .fb-name{font-family:'Playfair Display',Georgia,serif;font-weight:700;color:var(--cream);font-size:1.5rem;letter-spacing:.2em}
.site-footer .fb-who{color:rgba(244,238,224,.62);font-size:.92rem;margin-top:6px}
.site-footer .fb-pos{color:var(--gold);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;margin-top:14px}
.site-footer .fb-promise{font-family:'Playfair Display',Georgia,serif;font-style:italic;color:var(--cream);font-size:1.15rem;margin-top:9px}

/* ===== SECTION SCAFFOLDING ===== */
section{padding:100px 0}
.alt{background:var(--cream-2)}
.dark{background:var(--ink);color:var(--cream)}
.center{text-align:center}

.sec-eyebrow{display:block;text-align:center;margin-bottom:16px}

h2.title{
  font-size:clamp(1.8rem,3.4vw,2.7rem);
  max-width:22ch;margin:0 auto 22px;text-align:center;
}
.dark h2.title{color:var(--cream)}
h2.title em{font-style:italic;color:var(--gold-deep)}
.dark h2.title em{color:var(--gold)}

.lead{text-align:center;max-width:62ch;margin:0 auto;color:var(--muted);font-size:1.12rem}
.dark .lead{color:rgba(244,238,224,.78)}

.body{max-width:62ch;margin:0 auto}
.body p{font-size:1.08rem;margin-bottom:20px;color:var(--ink-soft)}
.dark .body p{color:rgba(244,238,224,.82);font-weight:300}
.body p b{color:var(--ink);font-weight:600}
.dark .body p b{color:var(--cream)}

.seclink{display:block;text-align:center;margin-top:40px}
.seclink a{
  color:var(--gold-deep);font-weight:600;font-size:.98rem;
  border-bottom:1px solid rgba(200,163,62,.4);padding-bottom:2px;
}
.dark .seclink a{color:var(--gold)}

/* ===== BUTTONS ===== */
.btn{
  display:inline-block;
  background:var(--gold);color:var(--ink);
  font-family:'Poppins';font-weight:700;font-size:1.05rem;
  padding:18px 38px;border-radius:11px;
  text-decoration:none;border:none;cursor:pointer;
  transition:background .18s, transform .12s;
}
.btn:hover{background:var(--gold-deep);transform:translateY(-1px)}
.btn-sub{
  color:rgba(244,238,224,.75);font-size:.95rem;
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:rgba(200,163,62,.5);
}
.btn-sub:hover{color:var(--cream)}

/* ===== FINAL CTA (shared shell) ===== */
.final{text-align:center;padding:100px 0}
.final h2{font-size:clamp(1.9rem,4vw,2.9rem);max-width:20ch;margin:0 auto 18px}
.final .limit{
  margin-top:22px;font-size:.84rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);font-weight:600;
}

/* ===== ACCESSIBILITY ===== */
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.site-nav a:focus-visible{outline-offset:6px}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
}

/* ===== SHARED MOBILE BREAKPOINT (820px) =====
   Each page's <style> may add its own grid-template overrides
   under the same breakpoint; the rules here cover nav + section
   padding only. */
@media(max-width:820px){
  .site-nav .nav-links{display:none}
  .site-nav .menu-toggle{display:block}
  section{padding:68px 0}
}

/* ============================================================
   SCROLL REVEAL
   site-chrome.js adds .reveals-on to <html>, then .reveal to
   target elements, then .is-visible when they cross into view.
   The markup itself contains NO reveal classes, so without JS
   the content stays visible by default. Under reduced motion
   the JS bails early AND this @media rule keeps anything that
   slipped through visible.
   ============================================================ */
.reveals-on .reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),
             transform .7s cubic-bezier(.16,1,.3,1);
  will-change:opacity, transform;
}
.reveals-on .reveal.is-visible{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion: reduce){
  .reveals-on .reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}


/* ===== EMAIL BAND (5-min newsletter) — shared; black bg, gold #C9A84C ===== */
@keyframes shine{0%{left:-80%}55%{left:130%}100%{left:130%}}
.email-band{background:#0c0a06;padding:84px 0;text-align:center;position:relative;overflow:hidden}
.email-band::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 360px at 50% -20%,rgba(201,168,76,.14),transparent 60%);pointer-events:none}
.email-band .wrap{position:relative}
.email-band h2{color:#F4EEE0;font-size:clamp(2rem,4.6vw,3.4rem);letter-spacing:.04em;text-transform:uppercase;margin:0 0 14px}
.email-band .eb-sub{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:600;color:#C9A84C;font-size:clamp(1.2rem,2.2vw,1.7rem);margin:0 0 18px}
.email-band .eb-support{color:rgba(244,238,224,.7);font-weight:300;max-width:60ch;margin:0 auto 34px;font-size:1rem}
.email-band form{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;max-width:680px;margin:0 auto;position:relative}
.email-band input[type="text"],.email-band input[type="email"]{flex:1 1 200px;min-width:0;padding:16px 18px;border-radius:11px;border:1px solid rgba(201,168,76,.4);background:rgba(244,238,224,.06);color:#F4EEE0;font-family:'Poppins',sans-serif;font-size:1rem}
.email-band input::placeholder{color:rgba(244,238,224,.45)}
.email-band input:focus{outline:none;border-color:#C9A84C;box-shadow:0 0 0 3px rgba(201,168,76,.2)}
.email-band button{flex:0 0 auto;background:#C9A84C;color:#0c0a06;border:none;cursor:pointer;font-family:'Poppins',sans-serif;font-weight:700;font-size:1rem;padding:16px 32px;border-radius:11px;transition:background .18s,transform .12s;position:relative;overflow:hidden}
.email-band button:hover{background:#A8842A;transform:translateY(-1px)}
.email-band button::after{content:"";position:absolute;top:0;bottom:0;left:-80%;width:55%;background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.32) 50%,transparent 100%);transform:skewX(-22deg);animation:shine 4.2s ease-in-out 2s infinite;pointer-events:none}
.email-band .ml-thanks{display:none;color:#F4EEE0;font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:1.25rem;margin:10px auto 0;max-width:60ch}
.email-band form.sent{display:none}
.email-band form.sent ~ .ml-thanks{display:block}
.email-band .eb-micro{color:rgba(244,238,224,.45);font-size:.82rem;margin:18px 0 0}
.email-band .ml-embedded{max-width:560px;margin:0 auto}

/* ============================================================
   APEX DARK BRAND — funnel-matched (near-black #15120B / cream
   #F4EEE0 / gold #C8A33E). Appended override: flips the light
   theme to the funnel's dark look without rewriting rules above.
   ============================================================ */
:root{ --muted:#9a9078; --line:rgba(244,238,224,.12); }
body{ background:var(--ink); color:var(--cream); }
.alt{ background:#1b1710; }
.eyebrow,.sec-eyebrow{ color:var(--gold); }
h1,h2,h3{ color:var(--cream); }
h2.title em{ color:var(--gold); }
.lead{ color:rgba(244,238,224,.75); }
.body p{ color:rgba(244,238,224,.82); }
.body p b{ color:var(--cream); }
.seclink a{ color:var(--gold); }
.final .limit{ color:rgba(244,238,224,.6); }