/* ===== Nexa Slab (Fontfabric Web license, adrguide.com) ===== */
@font-face{font-family:'Nexa Slab';src:url('../fonts/NexaSlab-Regular.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:'Nexa Slab';src:url('../fonts/NexaSlab-Heavy.woff2') format('woff2');font-weight:700 900;font-style:normal;font-display:swap}

:root{
  --black:#000; --darkest:#05233C; --dark:#19557D; --cyan:#0CC0DF;
  --steel:#ACC2D1; --mid:#3498DB; --white:#FFF; --ink:#04101C;
  --paper:#FFFFFF; --paper2:#F4F8FB;
  --slab:'Nexa Slab','Roboto Slab',Georgia,serif;
  --sans:'Montserrat',-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{font-family:var(--sans);color:#1a2b38;background:var(--paper);-webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
h1,h2,h3{font-family:var(--slab);font-weight:800;line-height:1.08;letter-spacing:-.01em}
.slab{font-family:var(--slab)}
.cy{color:var(--cyan)}.mid{color:var(--mid)}
.eyebrow{font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}

/* hex bullet */
.hexb{list-style:none;margin:0;padding:0}
.hexb li{display:flex;align-items:flex-start;gap:16px;margin:18px 0;font-size:1.05rem;line-height:1.45}
.hexb li .hx{flex-shrink:0;width:18px;height:20px;margin-top:4px;background:var(--cyan);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.hexb li b{color:var(--darkest);font-weight:700}
.hexb.lite li{color:#e8f1f7}.hexb.lite li b{color:#fff}

/* chevron callout */
.callout{position:relative;background:var(--dark);color:#eaf3f9;border-radius:14px;
  padding:22px 28px;font-style:italic;font-size:1rem;line-height:1.5;max-width:560px;overflow:hidden}
.callout.dark{background:var(--darkest)}
.callout b{font-style:normal;color:var(--cyan);font-weight:700}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:16px 0;transition:.4s;background:rgba(4,16,28,.82);backdrop-filter:blur(6px);border-bottom:1px solid rgba(172,194,209,.08)}
nav.s{background:rgba(5,35,60,.97);backdrop-filter:blur(12px);padding:11px 0;box-shadow:0 6px 30px rgba(0,0,0,.35)}
.ni{display:flex;align-items:center;justify-content:space-between}
.ni .lg img{display:block;transition:.4s}
.nl{display:flex;align-items:center;gap:26px;white-space:nowrap}
.nl a{color:#dce8f0;text-decoration:none;font-size:.85rem;font-weight:600;letter-spacing:.02em;transition:.25s}
.nl a:hover{color:#fff}
.nl a.lgn{border:1.5px solid rgba(172,194,209,.45);padding:9px 20px;border-radius:7px}
.nl a.lgn:hover{background:var(--cyan);border-color:var(--cyan);color:var(--darkest)}
.tg{display:none;background:none;border:0;color:#fff;font-size:1.6rem;cursor:pointer}


.hero{position:relative;min-height:100vh;display:flex;align-items:center;background:var(--ink);overflow:hidden}
.hero .bg{position:absolute;inset:0;z-index:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:center;opacity:1}
.hc{position:relative;z-index:2;max-width:820px;padding-top:70px}
.hc .eyebrow{color:var(--cyan)}
.hc h1{color:#fff;font-size:clamp(2.4rem,5.6vw,4.4rem);font-weight:900;margin:24px 0 0;letter-spacing:-.02em}
.hc h1 .b{color:var(--mid);display:block}
.hc .sub{font-family:var(--sans);font-size:clamp(1.05rem,1.7vw,1.3rem);color:#c5d6e2;font-weight:400;margin-top:26px;max-width:620px;line-height:1.55}
.hc .sub b{color:#fff;font-weight:600}
.hc .cta{margin-top:42px;display:flex;flex-direction:column;gap:14px;align-items:center;width:fit-content}
.btn{background:var(--cyan);color:var(--darkest);font-family:var(--sans);font-weight:700;font-size:1rem;
  padding:17px 36px;border:0;border-radius:9px;cursor:pointer;text-decoration:none;display:inline-block;transition:.25s}
.btn:hover{background:#36d2ec;transform:translateY(-2px);box-shadow:0 14px 36px rgba(12,192,223,.34)}
.btn.gh{background:transparent;color:#fff;border:1.5px solid rgba(172,194,209,.5)}
.btn.gh:hover{background:rgba(255,255,255,.08);box-shadow:none;transform:none;border-color:var(--cyan)}
.hc .mc{font-family:var(--sans);font-size:.84rem;color:#9fb3c2}
.scrl{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:2;color:#7d96a8;
  font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;text-align:center;animation:bob 2.4s infinite}
.scrl span{display:block;font-size:1.2rem}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}}

/* SECTIONS */
section{position:relative}
.clinic{background:var(--paper);padding:110px 0}
.clinic.alt{background:var(--paper2)}
.cinema{background:var(--ink);padding:120px 0;position:relative;overflow:hidden}
.cinema .bg{position:absolute;inset:0;z-index:0}
.cinema .bg img{width:100%;height:100%;object-fit:cover;object-position:center;opacity:1}
.cinema .wrap{position:relative;z-index:2}
.band-navy{background:var(--darkest);padding:108px 0}

/* section eyebrow header (clinic) */
.sh{margin-bottom:18px}
.sh .eyebrow{color:var(--mid)}
.clinic h2{color:var(--darkest);font-size:clamp(2rem,3.6vw,3rem);font-weight:800}
.clinic h2 .b{color:var(--mid)}
.lead{font-size:1.18rem;color:#3d5666;max-width:640px;margin-top:18px;font-family:var(--sans)}

/* two-col with hex image */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center;margin-top:40px}
.split.rev{grid-template-columns:.9fr 1.1fr}
.hexframe{position:relative;aspect-ratio:1/1.05;max-width:420px;margin:0 auto;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:#0a0f18}
.hexframe img{width:100%;height:100%;object-fit:cover}
.hexframe.acc{position:relative}
/* chevron accents bleeding off edge */
.chev{position:absolute;z-index:1}
.chev.c1{top:6%;right:-6%;width:120px;height:130px;background:var(--mid);
  clip-path:polygon(0 0,55% 0,100% 50%,55% 100%,0 100%,45% 50%);opacity:.92}
.chev.c2{bottom:4%;right:-3%;width:90px;height:100px;background:var(--dark);
  clip-path:polygon(0 0,55% 0,100% 50%,55% 100%,0 100%,45% 50%);opacity:.9}
.fpo{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:3;
  font-family:var(--sans);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.6);background:rgba(5,35,60,.55);padding:4px 10px;border-radius:4px;white-space:nowrap}

/* scatter chips */
.chips{display:flex;flex-wrap:wrap;gap:11px;margin:30px 0}
.chips span{font-family:var(--sans);font-size:.85rem;color:#5a7385;border:1px solid #cdddE8;
  padding:8px 16px;border-radius:30px;background:#fff}
.punch{font-family:var(--slab);font-weight:800;font-size:clamp(1.4rem,2.6vw,2rem);color:var(--darkest);line-height:1.3;margin-top:8px;max-width:720px}
.punch em{color:var(--mid);font-style:normal}

/* reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}
@media(max-width:1100px){
  .nl{display:none}
  .nl.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:rgba(5,35,60,.98);backdrop-filter:blur(12px);padding:8px 40px 22px;
    border-bottom:1px solid rgba(172,194,209,.14);align-items:stretch}
  .nl.open a{padding:15px 0;width:100%;border-bottom:1px solid rgba(172,194,209,.08);font-size:1rem}
  .nl.open a.lgn{border:1.5px solid rgba(172,194,209,.45);margin-top:14px;text-align:center;border-radius:7px}
  .tg{display:block}
  nav{position:fixed}
}
@media(max-width:560px){
  .wrap{padding:0 22px}
  .nl.open{padding:8px 22px 22px}
}

/* ---- HEXAGON LAYOUT ACCENTS (structural, from module deck) ---- */
.hexacc{position:absolute;z-index:0;pointer-events:none;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
/* faint large underlay for white sections */
.hexacc.faint{background:#ACC2D1;opacity:.13}
.hexacc.faint2{background:#E7F1F9;opacity:1}
/* edge-bleed accents for cinema (dark) sections */
.hexacc.edge-mid{background:#3498DB;opacity:.85}
.hexacc.edge-dark{background:#19557D;opacity:.8}
.clinic,.cinema,.band-navy{position:relative;overflow:hidden}
.clinic .wrap,.cinema .wrap,.band-navy .wrap{position:relative;z-index:2}
@media(max-width:760px){.hexacc{display:none}}

/* ===== MOBILE SPACING PASS — phones/tablets only; desktop layout unchanged ===== */
@media(max-width:760px){
  /* Collapse the two-column splits into one stacked column.
     !important overrides the inline grid-template-columns on the first split. */
  .split,.split.rev{grid-template-columns:1fr!important;gap:30px!important;margin-top:30px!important}
  /* Tighten the oversized desktop section padding on smaller screens */
  .clinic{padding:64px 0}
  .cinema{padding:68px 0}
  .band-navy{padding:60px 0}
}
@media(max-width:560px){
  /* Phones: tighter still */
  .clinic{padding:50px 0}
  .cinema{padding:54px 0}
  .band-navy{padding:48px 0}
  .split,.split.rev{gap:26px!important;margin-top:26px!important}
}

/* ---- Mobile fix #1: "Why this guide exists" (#story) uses an inline 2-col grid,
   not .split, so it needs its own collapse rule. Stacks text, then founder photo. ---- */
@media(max-width:760px){
  #story .wrap > div{grid-template-columns:1fr!important;gap:28px!important}
}

/* ---- Mobile fix #2: "Free, no purchase needed" (#optin) card uses an inline 2-col grid.
   Stack text over form, trim card padding, and keep the email input full-width. ---- */
@media(max-width:760px){
  #optin .wrap > div{grid-template-columns:1fr!important;gap:24px!important;padding:34px 24px!important}
  #optin input{width:100%;min-width:0}
}
@media(max-width:560px){
  #optin .wrap > div{padding:28px 20px!important}
}

/* ---- Mobile fix #3: "Watch two full modules free" (#preview) module cards sit in a
   hard 1fr 1fr grid. Stacking them full-width gives the thumbnail enough height that the
   "Free · Full Module" badge no longer overlaps the centered play button. ---- */
@media(max-width:760px){
  #preview .wrap > div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important;gap:22px!important;max-width:420px}
}

/* ---- Mobile fix #4: "The complete journey" (#journey) phase rows are a 60px/1fr/auto
   grid; on phones the right-hand "Modules X-Y" label floats with a gap, looking lopsided.
   Re-place the three cells: number top-left, title+desc beside it, modules label tucked
   underneath the description. ---- */
@media(max-width:560px){
  #journey [style*="grid-template-columns:60px 1fr auto"]{
    grid-template-columns:44px 1fr!important;align-items:start!important;gap:2px 16px!important;padding:18px 20px!important}
  #journey [style*="grid-template-columns:60px 1fr auto"] > div:nth-child(1){grid-column:1;grid-row:1}
  #journey [style*="grid-template-columns:60px 1fr auto"] > div:nth-child(2){grid-column:2;grid-row:1}
  #journey [style*="grid-template-columns:60px 1fr auto"] > div:nth-child(3){grid-column:2;grid-row:2;margin-top:8px}
}

/* ---- Mobile fix #5: About page (about.html). Its hero (.cinema#top) uses the same
   inline 1.15fr/.85fr 2-col grid as the homepage #story, so it needs the same collapse.
   Also trims the hero's inline desktop padding (150px/110px) on mobile. Scoped to
   .cinema#top so the homepage hero (.hero#top) is never affected. ---- */
@media(max-width:760px){
  .cinema#top .wrap > div{grid-template-columns:1fr!important;gap:28px!important}
  .cinema#top{padding-top:104px!important;padding-bottom:60px!important}
}
@media(max-width:560px){
  .cinema#top{padding-top:96px!important;padding-bottom:50px!important}
}

@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.scrl{animation:none}.hero .bg img{transform:none}html{scroll-behavior:auto}}

/* ===== Video lightbox (host-agnostic) ===== */
.vbox{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;background:rgba(2,10,18,.86);backdrop-filter:blur(6px);padding:24px}
.vbox.open{display:flex}
.vbox-bd{position:relative;width:100%;max-width:960px}
.vbox-frame{position:relative;aspect-ratio:16/9;background:#05233C;border-radius:12px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6);border:1px solid rgba(12,192,223,.25)}
.vbox-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vbox-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;font-family:var(--sans);color:#dce8f0;font-size:1.15rem;font-weight:700;padding:28px}
.vbox-ph small{font-weight:400;font-size:.82rem;color:#9fb3c2;max-width:380px;line-height:1.6}
.vbox-x{position:absolute;top:-48px;right:0;background:none;border:0;color:#fff;font-size:2.1rem;line-height:1;cursor:pointer;opacity:.82;transition:.2s}
.vbox-x:hover{opacity:1}
@media(max-width:560px){.vbox-x{top:-42px}}
.vthumb{cursor:pointer}

/* Keep specific headings on one line on desktop; allow wrap on narrow phones */
.oneline{white-space:nowrap}
@media(max-width:760px){.oneline{white-space:normal}}