:root{
  --burgundy:#5b0a1b;
  --burgundy-2:#3b0611;
  --gold:#d7b35a;
  --ink:#0f0f12;
  --muted:#6b6b73;
  --card:rgba(91,10,27,.86);
  --glass:rgba(255,255,255,.10);
  --border:rgba(255,255,255,.16);
  --shadow:0 18px 40px rgba(0,0,0,.28);
  --radius:18px;
}

/* Hard stop any horizontal scroll on mobile */
html, body{
  max-width: 100%;
  overflow-x: hidden;
}

img, svg, video, canvas{
  max-width: 100%;
  height: auto;
}

.container, .hero-card, .section-card{
  max-width: 100%;
}

*{box-sizing:border-box;}
*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0; width:100%; max-width:100%; overflow-x:hidden;}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: linear-gradient(180deg, #0b0507 0%, #2a070f 18%, #ffffff 82%, #ffffff 100%);
  color:var(--ink);
  overflow-x:hidden;
}

/* Light pages where we want black text over a very subtle burgundy tint */
body.page-soft{
  background: linear-gradient(180deg, #f6f1f2 0%, #ffffff 70%, #ffffff 100%);
  color:#111;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}

.container{width:100%;max-width:1120px;margin:0 auto;padding:0 16px;}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(245,245,247,.82);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.header-inner{position:relative;display:flex;align-items:center;justify-content:space-between;padding:10px 12px;gap:12px;flex-wrap:nowrap;}
.brand{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none;cursor:pointer;}
.brand img{width:34px;height:34px;object-fit:contain;}
.logo{width:34px;height:34px;object-fit:contain;}
.brand-title{display:flex;flex-direction:column;line-height:1.05;min-width:0;}
.brand-title strong{font-size:17px;color:var(--burgundy);letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.brand-title span{font-size:12px;color:#444;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;}

.menu-btn{
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;
  flex:0 0 auto;
}
.menu-panel{
  /* Slide-in drawer (mobile-first) */
  position:fixed;
  top:0;right:0;bottom:0;
  width:min(86vw, 340px);
  background:rgba(255,255,255,.98);
  border-left:1px solid rgba(0,0,0,.10);
  padding:16px;
  box-shadow:-18px 0 40px rgba(0,0,0,.18);
  display:none;
  overflow:auto;
  z-index:70;
}
body.menu-open .menu-panel{display:block;}

/* Some pages use .mobile-menu instead of .menu-panel */
.mobile-menu{
  position:fixed;
  top:0;right:0;bottom:0;
  width:min(86vw, 340px);
  background:rgba(255,255,255,.98);
  border-left:1px solid rgba(0,0,0,.10);
  padding:16px;
  box-shadow:-18px 0 40px rgba(0,0,0,.18);
  display:none;
  overflow:auto;
  z-index:70;
}
body.menu-open .mobile-menu{display:block;}
.mobile-menu a{display:block;padding:10px 12px;border-radius:10px;text-decoration:none;color:#1a1a1d;font-weight:600;}
.mobile-menu a:hover{background:rgba(91,10,27,.08);}
body.menu-open{overflow:hidden;}
.menu-panel a{display:block;padding:10px 12px;border-radius:10px;text-decoration:none;color:#1a1a1d;font-weight:600;}
.menu-panel a:hover{background:rgba(91,10,27,.08);}

/* Hero */
.hero{
  position:relative;
  color:#fff;
  padding:26px 0 18px;
  background:url('images/jah-stage.jpg') top center/cover no-repeat;
}
.hero::before{
  content:"";
  position:absolute;inset:0;
  /* lighter overlay so the stage photo is visible immediately */
  background:linear-gradient(180deg, rgba(91,10,27,.46) 0%, rgba(91,10,27,.26) 55%, rgba(255,255,255,0) 100%);
}
.hero-inner{position:relative;}
.hero-card{
  background:rgba(91,10,27,.42);
  border:1px solid rgba(255,255,255,.16);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:18px;
  backdrop-filter: blur(4px);
}

.formula{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:clamp(18px, 5vw, 26px);
  font-weight:800;
  letter-spacing:.2px;
  margin:0 0 8px;
  white-space:nowrap;
}
.formula .gold{color:var(--gold);text-shadow:0 0 12px rgba(212,175,55,.22);}
.formula .muted{color:rgba(255,255,255,.88);}

.credentials-strip{margin:10px 0 14px;}
.strip-title{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85);margin:0 0 8px;}
.creds-row{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding:10px 8px 6px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.creds-row::-webkit-scrollbar{
  height:6px;
}
.creds-row::-webkit-scrollbar-track{
  background:transparent;
}
.creds-row::-webkit-scrollbar-thumb{
  background:rgba(212,175,55,.35);
  border-radius:999px;
}
.creds-row::-webkit-scrollbar-thumb:hover{
  background:rgba(212,175,55,.55);
}
.cred-card{
  scroll-snap-align:start;
  flex:0 0 auto;
  width:140px;
  padding:10px 10px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  text-align:center;
}
.cred-card img{width:44px;height:44px;object-fit:contain;filter: drop-shadow(0 8px 14px rgba(0,0,0,.28));margin:0 auto 8px;display:block;}
.cred-card div{font-weight:800;font-size:12px;line-height:1.15;color:rgba(255,255,255,.92);}

.kicker{font-size:12px;letter-spacing:.20em;text-transform:uppercase;color:rgba(255,255,255,.86);margin:0 0 6px;}
.hero h1{margin:0 0 10px;font-size:clamp(30px,6.2vw,40px);line-height:1.05;overflow-wrap:anywhere;}
.hero p{margin:0 0 10px;font-size:16px;line-height:1.5;color:rgba(255,255,255,.92);}
.hero ul{margin:10px 0 14px;padding-left:18px;color:rgba(255,255,255,.92);} 
.hero li{margin:6px 0;}
.hero li strong{color:#fff;}

.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;}
.btn{
  appearance:none;border:none;cursor:pointer;
  text-decoration:none;
  padding:13px 16px;border-radius:14px;
  font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:160px;
}

/* Gold CTA for lighter areas */
.btn-gold{
  background: linear-gradient(180deg, rgba(210,165,75,.96), rgba(168,122,35,.96));
  color: #1f0a10;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}
.btn-gold:hover{ filter: brightness(1.03); }

/* Section divider line */
.divider{
  height: 1px;
  width: 100%;
  margin: 16px 0;
  background: linear-gradient(90deg, rgba(118,20,45,0), rgba(118,20,45,.55), rgba(210,165,75,.38), rgba(118,20,45,.55), rgba(118,20,45,0));
}
.btn.primary{background:linear-gradient(180deg, rgba(91,10,27,1) 0%, rgba(59,6,17,1) 100%);color:#fff;box-shadow:0 12px 26px rgba(0,0,0,.28);} 
.btn.secondary{background:transparent;color:#fff;border:2px solid rgba(215,179,90,.70);} 

/* White sections below */
.main{background:#fff;}
.section{padding:26px 0;}
.section h2{margin:0 0 8px;font-size:22px;color:var(--burgundy);} 
.section p{margin:0 0 10px;color:#2a2a2e;line-height:1.55;}

.card{
  border-radius:var(--radius);
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  box-shadow:0 14px 32px rgba(0,0,0,.10);
  padding:16px;
}
.card.burgundy{
  background:linear-gradient(180deg, rgba(91,10,27,.92), rgba(59,6,17,.94));
  color:#fff;
  border:1px solid rgba(215,179,90,.18);
}
.card.burgundy p{color:rgba(255,255,255,.88);} 

.grid{display:grid;gap:12px;}
.grid.cols3{grid-template-columns:1fr;}
@media (min-width:880px){.grid.cols3{grid-template-columns:repeat(3,1fr);}}

.price{font-size:20px;font-weight:900;color:var(--gold);} 
.badge{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--gold);letter-spacing:.04em;text-transform:uppercase;font-size:12px;}

/* Collapsible sections */
details.fold{border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:12px 14px;background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.08);} 
details.fold + details.fold{margin-top:12px;}
details.fold summary{list-style:none;cursor:pointer;font-weight:900;color:var(--burgundy);font-size:16px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
details.fold summary::-webkit-details-marker{display:none;}
details.fold summary .chev{color:var(--gold);font-size:18px;}
details.fold[open] summary{margin-bottom:10px;}

/* Footer */
footer{
  padding: 26px 0 90px; /* extra bottom room for floating CTA */
  color: rgba(255,255,255,.90);
  font-size: 13px;
  border-top: 0;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0) 0%,
    rgba(91,10,27,.10) 30%,
    rgba(59,6,17,.92) 85%,
    rgba(201,162,76,.30) 130%
  );
}
footer a{color: rgba(255,255,255,.92);} 

/* Floating apply */
.floating-apply{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:14px;z-index:60;
  width:min(420px, calc(100% - 24px));
}
.floating-apply a{display:flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(180deg, rgba(91,10,27,1) 0%, rgba(59,6,17,1) 100%);
  color:#fff;text-decoration:none;font-weight:900;
  border-radius:16px;padding:14px 16px;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  border:1px solid rgba(215,179,90,.26);
}


/* Tabs (method page) */
.tabs{display:flex;gap:10px;overflow:auto;padding:8px 2px;margin:10px 0 14px;-webkit-overflow-scrolling:touch;}
.tabs::-webkit-scrollbar{height:0;}
.tab-btn{flex:0 0 auto;border:1px solid rgba(0,0,0,.12);background:#fff;color:var(--burgundy);padding:10px 12px;border-radius:14px;font-weight:900;cursor:pointer;}
.tab-btn.active{background:rgba(91,10,27,.10);border-color:rgba(91,10,27,.22);} 
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* Coaching teaser background: second photo */
.coaching-wrap{
  position: relative;
  padding: 14px 0;
  /* keep the coaching area readable with black text */
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.82));
  color: #111;
}
.coaching-wrap .container{ position: relative; z-index:1; }

.tier-row{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding: 6px 2px 8px;
  -webkit-overflow-scrolling: touch;
}
.tier-pill{
  flex:1;
  background:rgba(123,10,29,.96);
  border-radius:14px;
  padding:12px 12px 10px;
  min-width:0;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 20px rgba(0,0,0,.10);
}
.tier-title{font-size:11px;font-weight:800;letter-spacing:.6px;color:rgba(255,255,255,.92);text-transform:uppercase;margin:0 0 4px}
.tier-price{font-size:28px;font-weight:900;color:var(--gold);margin:0;line-height:1}
.tier-sub{font-size:12px;font-weight:800;color:rgba(255,255,255,.92);margin:4px 0 0}
.tier-title{ display:block; font-weight:800; letter-spacing:.02em; text-transform:uppercase; font-size:12px; color: rgba(91,10,27,.78); }
.tier-price{ display:block; font-size:22px; font-weight:900; margin-top:4px; color: var(--gold); }
.tier-sub{ display:block; margin-top:2px; color: rgba(0,0,0,.68); font-size:13px; }

/* Top navigation */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  background: rgba(232,226,226,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.brand{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none;cursor:pointer;}
.brand-mark{width:34px; height:34px;}
.brand-title{font-weight:900; letter-spacing:-.01em; color:#4c0918;}
.brand-sub{font-size:11px; letter-spacing:.22em; font-weight:800; color: rgba(0,0,0,.55);}
.menuBtn{
  border:0;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 18px;
  line-height: 1;
}
.drawer{
  position: fixed;
  top: 60px;
  right: 12px;
  width: min(240px, calc(100vw - 24px));
  background: rgba(66,10,22,.94);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 10px;
  display:none;
  z-index: 60;
}
.drawer a{
  display:block;
  padding: 10px 10px;
  border-radius: 12px;
  color: rgba(255,255,255,.92);
  text-decoration:none;
  font-weight: 700;
}
.drawer a:hover{ background: rgba(255,255,255,.08); }
.drawer.open{ display:block; }

/* Free program block */
.free-wrap{padding:12px 0 6px;}
.free-card{background:rgba(255,255,255,.92);color:#111;border:1px solid rgba(91,10,27,.14)}
.free-card h2{margin:0 0 6px;color:#111}
.free-card .muted{color:rgba(0,0,0,.70)}


/* subtle background on detail pages */
.page-soft{position:relative;overflow-x:hidden;}
.page-soft::before{content:"";position:fixed;inset:0;background:url('assets/jah_coaching_live.jpg') center/cover no-repeat;opacity:.06;pointer-events:none;z-index:-2;filter:saturate(.95) contrast(1.02);}
.page-soft::after{content:"";position:fixed;inset:0;background:linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.92) 35%, rgba(255,255,255,.98) 100%);pointer-events:none;z-index:-1;}


/* mobile tier row: swipeable */
@media (max-width: 420px){
  .tier-row{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;}
  .tier-pill{min-width:170px;scroll-snap-align:start;}
}

.btn-outline{border:1px solid rgba(255,255,255,.85); color:#fff; background:transparent;}
.btn-outline:active,.btn-outline:hover{background:var(--burgundy); border-color:var(--burgundy); color:#fff;}

.journal-wrap{background:linear-gradient(180deg, rgba(88,12,28,.85) 0%, rgba(120,20,45,.35) 45%, #fff 100%); padding:28px 0 10px;}
.journal-card{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); padding:18px; border-radius:18px; backdrop-filter: blur(10px);}
.journal-card h2{color:#fff; margin:0 0 6px;}
.journal-card .muted{color:rgba(255,255,255,.85);}
.btn-burgundy{background:var(--burgundy); color:var(--gold); border:1px solid rgba(0,0,0,0);}
.btn-outline-dark{background:transparent; color:#111; border:1px solid rgba(17,17,17,.25);}

.menu-details{width:100%;}
.menu-details summary{list-style:none; cursor:pointer; font-weight:700; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.06);}
.menu-details summary::-webkit-details-marker{display:none;}
.menu-details[open] summary{background:rgba(255,255,255,.10);}
.menu-details a{display:block; padding:8px 14px; font-weight:600; color:rgba(255,255,255,.9);}
.menu-cta{margin-top:6px; background:var(--burgundy); color:var(--gold)!important; border:1px solid rgba(255,255,255,.12);}



/* ===== v37 fixes ===== */
body.page-brand{
  background: radial-gradient(1200px 600px at 20% 0%, rgba(106, 8, 35, 0.55), rgba(20, 5, 10, 0.92)) fixed;
  color: #fff;
}
body.page-brand main{ color:#fff; }

/* Coaching page background */
.page-brand .page-hero,
.page-brand .page-card{
  background: rgba(88, 7, 28, 0.55);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
}
.coach-bg{
  background:
    linear-gradient(180deg, rgba(88,7,28,0.88), rgba(88,7,28,0.72), rgba(245,245,245,0.96)),
    url("assets/jah_coaching_live.jpg") center/cover no-repeat;
}
.page-brand .coach-bg{ color:#111; }
.page-brand .coach-bg h1, .page-brand .coach-bg h2, .page-brand .coach-bg p, .page-brand .coach-bg li{ color:#111; }
.page-brand .coach-bg .tier-chip{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(88,7,28,0.92);
  color:#fff;
  font-weight:800;
}
.page-brand .coach-bg .price{ color:#d9b46d; font-weight:900; }

/* Journal page tabs */
.journal-tabs{
  display:flex;
  gap:10px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding: 10px 0 14px;
  margin: 10px 0 18px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.journal-tabs::-webkit-scrollbar{ height:6px; }
.journal-tabs::-webkit-scrollbar-thumb{ background: rgba(217,180,109,0.55); border-radius: 999px; }
.tab-btn{
  flex:0 0 auto;
  background: rgba(88,7,28,0.55);
  border:1px solid rgba(255,255,255,0.14);
  color:#fff;
  padding:10px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:0.92rem;
}
.tab-btn.active{
  border-color: rgba(217,180,109,0.9);
  box-shadow: 0 0 0 2px rgba(217,180,109,0.22);
}
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* Menu panel: ensure it's visible when opened and not a white box */
.menu-panel{
  position: fixed;
  top: 76px;
  right: 12px;
  width: min(320px, calc(100vw - 24px));
  background: rgba(88,7,28,0.96);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 14px;
  display: none;
  z-index: 9999;
}
.menu-panel a, .menu-panel summary{ color:#fff; text-decoration:none; font-weight:800; }
.menu-panel a{ display:block; padding: 10px 10px; border-radius: 12px; }
.menu-panel a:hover{ background: rgba(255,255,255,0.08); }
.menu-panel .menu-cta{
  margin-top: 10px;
  background: rgba(217,180,109,0.16);
  border: 1px solid rgba(217,180,109,0.55);
}
.menu-details summary{ padding: 10px 10px; border-radius: 12px; cursor:pointer; }
.menu-details[open] summary{ background: rgba(255,255,255,0.08); }
.menu-details a{ margin-left: 8px; font-weight:700; opacity:0.95; }
.menu-open .menu-panel{ display:block; }
.menu-open .mobile-menu{ display:block; }

.menu-btn span{
  display:block;
  width:18px;height:3px;
  background: var(--burgundy);
  border-radius:999px;
  margin:2px 0;
  transition: transform .2s ease, opacity .2s ease;
}
body.menu-open .menu-btn span:nth-child(1){ transform: translateY(4px) rotate(45deg); }
body.menu-open .menu-btn span:nth-child(2){ opacity:0; }
body.menu-open .menu-btn span:nth-child(3){ transform: translateY(-4px) rotate(-45deg); }

/* ===== v38 clean premium ===== */
:root{
  --burgundy:#5a0a1f;
  --burgundy-2:#7a1230;
  --gold:#d9b46d;
  --ink:#121212;
  --paper:#ffffff;
  --radius:16px;
  --shadow:0 18px 46px rgba(0,0,0,.18);
}

body{ color: var(--ink); background: #f7f6f6; }

/* Home continuous background */
.home-bg{
  background:
    linear-gradient(180deg, rgba(90,10,31,.92) 0%, rgba(90,10,31,.62) 36%, rgba(247,246,246,1) 76%),
    url("images/stage.jpg") center top/cover no-repeat fixed;
}

/* keep sections from looking chunked */
section{ background: transparent; }
.section-divider{
  height:1px;
  width:100%;
  background: linear-gradient(90deg, rgba(90,10,31,.0), rgba(90,10,31,.35), rgba(90,10,31,.0));
  margin: 22px 0;
}

/* Buttons */
.btn{ border-radius: 999px; font-weight: 900; letter-spacing: .01em; }
.btn-primary{
  background: var(--burgundy);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
}
.btn-primary:hover{ filter: brightness(1.05); }
.btn-outline{
  background: transparent;
  color: var(--burgundy);
  border:2px solid rgba(90,10,31,.45);
}
.btn-outline:hover{ background: rgba(90,10,31,.06); }

/* Coaching page clean, but branded */
body.page-clean{ background: #f7f6f6; color: var(--ink); }
.page-clean .page-hero{
  background:
    linear-gradient(180deg, rgba(90,10,31,.92), rgba(90,10,31,.62), rgba(247,246,246,1)),
    url("images/coaching.jpg") center/cover no-repeat;
  color:#fff;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
}
.page-clean .page-hero h1, .page-clean .page-hero p{ color:#fff; }
.page-clean .page-card{
  background: var(--paper);
  border-radius: var(--radius);
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}

/* Tier cards */
.tier-card{
  background: var(--burgundy);
  color:#fff;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}
.tier-card *{ text-decoration:none !important; }
.tier-card .price{ color: var(--gold); font-weight: 900; }
.tier-chip{ background: rgba(255,255,255,.10); color:#fff; }

/* Journal page readability */
.journal-page{
  background: #f7f6f6;
  color: var(--ink);
}
.journal-page .journal-shell{
  background: var(--paper);
  border-radius: var(--radius);
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  padding: 18px;
}
.journal-page h1, .journal-page h2, .journal-page p{ color: var(--ink); }

/* Tabs */
.journal-tabs{ border-bottom:1px solid rgba(0,0,0,.08); }
.tab-btn{
  background: rgba(90,10,31,.08);
  border:1px solid rgba(90,10,31,.14);
  color: var(--burgundy);
}
.tab-btn.active{
  background: rgba(90,10,31,.12);
  border-color: rgba(217,180,109,.9);
  color: var(--burgundy);
  box-shadow: 0 0 0 2px rgba(217,180,109,.18);
}

/* Menu panel */
.menu-panel{
  background: rgba(255,255,255,.98);
  border:1px solid rgba(0,0,0,.10);
}
.menu-panel a, .menu-panel summary{ color: var(--ink); }
.menu-panel .menu-cta{
  background: rgba(90,10,31,.92);
  color:#fff !important;
  border:1px solid rgba(255,255,255,.12);
}

/* Fix washed-out opacity issues by forcing text opacity */
*{ opacity: 1; }

/* v39 header flex */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
}
.brand{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none;cursor:pointer;}
.brand-text{min-width:0;}
.brand-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.brand-sub{letter-spacing:.24em;}
.menu-btn{margin-left:auto;}

.hero-btn{
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
  padding: 14px 18px;
  font-size: 1.05rem;
}
@media (max-width:480px){
  .hero-btn{width:100%;justify-content:center;display:flex;}
}

#journal h2{display:none;}
@media (max-width:480px){ #journal h2{display:none;} }

/* v39 coaching cards match CTA */
.coaching-grid .tier-card{
  border-radius: 22px;
}
.coaching-grid .tier-card .price{ font-size: 1.35rem; }
.coaching-grid .tier-card .freq{ color:#fff; opacity:.95; font-weight:800; }
.coaching-grid .tier-card .tier-label{ color:#fff; opacity:.9; font-weight:900; letter-spacing:.06em; }

/* v39 journal header */
.journal-meta{padding:6px 2px 14px 2px;}
.journal-kicker{letter-spacing:.34em;font-weight:900;color:rgba(90,10,31,.55);font-size:.75rem;}
.journal-title{margin:10px 0 6px 0;color:var(--gold);font-size:2rem;}
.journal-sub{font-weight:900;color:var(--burgundy);font-size:1.1rem;margin-top:4px;}
.journal-date{color:rgba(0,0,0,.55);font-weight:800;margin-top:6px;}

.journal-page{
  background: linear-gradient(180deg, rgba(90,10,31,.08) 0%, rgba(247,246,246,1) 36%);
}

/* v40 home coaching tier buttons */
:root{ --burgundy-dark:#3f0616; }
#coaching .tier-card{
  background: var(--burgundy-dark) !important;
  color: var(--gold) !important;
}
#coaching .tier-card .price{ color: var(--gold) !important; }
#coaching .tier-card .tier-label,
#coaching .tier-card .freq{ color: var(--gold) !important; opacity: .95; }
#coaching .tier-card, #coaching .tier-card *{ text-decoration:none !important; }

#coaching a{ text-decoration:none; }

/* v40 gold boxes */
.page-clean{
  background: linear-gradient(180deg, rgba(90,10,31,.06) 0%, rgba(247,246,246,1) 30%);
}
.coaching-preface h2{ margin-top:0; color: var(--burgundy); }
.coaching-preface .muted{ color: rgba(0,0,0,.6); font-weight:700; }

.gold-box{
  margin-top:12px;
  background: linear-gradient(180deg, rgba(217,180,109,.28), rgba(217,180,109,.14));
  border: 1px solid rgba(217,180,109,.55);
  border-radius: 16px;
  padding: 12px;
}
.gold-box-inner{
  background: rgba(255,255,255,.72);
  border-radius: 14px;
  padding: 12px;
}
.gold-box ul{ margin: 0; padding-left: 18px; }
.gold-box li{ color: rgba(0,0,0,.82); font-weight: 650; line-height: 1.35; }

/* v41 journal single CTA */
#journal{ padding-top: 26px; padding-bottom: 26px; }
#journal .journal-center{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:14px;
  min-height: 220px;
}
#journal .journal-cta{
  width: min(520px, 92vw);
  padding: 18px 18px;
  font-size: 1.15rem;
  box-shadow: 0 18px 46px rgba(0,0,0,.22);
}

/* v41 coaching packages style */
#coaching .tier-card{
  background: var(--burgundy) !important;
  color: var(--gold) !important;
  border:1px solid rgba(255,255,255,.14);
}
#coaching .tier-card .tier-label{ color: var(--gold) !important; }
#coaching .tier-card .freq{ color: var(--gold) !important; }
#coaching .tier-card .price{ color: var(--gold) !important; font-size: 1.55rem; }

/* v42 coaching header + label styling */
.system-title{letter-spacing:.18em;font-weight:900;color:rgba(90,10,31,.85);font-size:.9rem;margin:18px 0 10px 0;}
.system-list{margin:0;padding-left:18px;}
.system-list li{margin:10px 0;line-height:1.35;color:rgba(255,255,255,.92);}
.system-list strong{color:#fff;}

.coaching-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin: 10px auto 18px auto;
}
.coaching-head-logo{ width:52px; height:auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,.18)); }
.coaching-title{
  margin:0;
  display:inline-block;
  padding:10px 18px;
  border-radius:16px;
  background: rgba(90,10,31,.18);
  color:#111;
  font-size:1.65rem;
  font-weight:900;
}

#coaching .tier-card .tier-label,
#coaching .tier-card .freq{
  color:#111 !important;
  font-weight:900;
}
#coaching .tier-card .price{
  color: var(--gold) !important;
}
#coaching .tier-card *{
  text-decoration:none !important;
}

/* v3 system logo + swipe carousel */
.system-logo-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 10px 0 14px 0;
}
.system-logo{
  width: 78px;
  height: auto;
  opacity: .85;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.22));
}

/* Coaching swipe carousel */
.tier-carousel{
  display:flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 10px 4px 6px 4px;
  margin: 8px 0 10px 0;
}
.tier-carousel::-webkit-scrollbar{ height: 6px; }
.tier-carousel::-webkit-scrollbar-thumb{
  background: rgba(90,10,31,.25);
  border-radius: 999px;
}
.tier-card{
  flex: 0 0 88%;
  max-width: 88%;
  scroll-snap-align: center;
  background: rgba(90,10,31,.92);
  border-radius: 20px;
  padding: 18px 16px;
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
}
@media (min-width: 680px){
  .tier-card{ flex-basis: 320px; max-width: 320px; scroll-snap-align: start; }
}
.tier-card *{ text-decoration:none !important; }
.tier-card .tier-label{
  color: rgba(255,255,255,.95);
  font-weight: 900;
  letter-spacing: .08em;
  font-size: .92rem;
  margin-bottom: 10px;
}
.tier-card .price{
  color: var(--gold);
  font-weight: 900;
  font-size: 2rem;
  line-height: 1.05;
  margin-bottom: 8px;
}
.tier-card .freq{
  color: rgba(255,255,255,.92);
  font-weight: 700;
}
.coaching-title{
  text-align:center;
  letter-spacing: .12em;
}

#coaching .tier-card .tier-label, #coaching .tier-card .freq{ color: rgba(255,255,255,.95) !important; }

/* v4 journal + clickable tiers */
.journal-cta-wrap{
  display:flex;
  justify-content:center;
  margin: 16px 0 6px 0;
}
.btn-journal{
  width:min(520px, 92%);
  border-radius: 999px;
  padding: 16px 18px;
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow: 0 18px 34px rgba(0,0,0,.22);
}

.tier-card-link{
  text-decoration:none !important;
  display:block;
  flex: 0 0 auto;
}
.tier-card-link:focus-visible{
  outline: 3px solid rgba(212,175,55,.55);
  outline-offset: 4px;
  border-radius: 22px;
}
.tier-card{
  cursor:pointer;
}

.coaching-ctas{
  display:flex;
  flex-direction:column;
  gap: 12px;
  margin-top: 14px;
}


/* Coaching details page (light gradient + photo @ ~50% opacity) */
body.coach-details {
  background: linear-gradient(180deg, #f6f0f2 0%, #ffffff 55%, #f6f0f2 100%);
}
body.coach-details::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background-image: url("assets/jah_coaching_live.png");
  background-size: cover;
  background-position: center;
  opacity: 0.50;
  filter: saturate(0.95) contrast(0.95);
  pointer-events:none;
}
body.coach-details::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.88) 55%, rgba(255,255,255,0.92) 100%);
  pointer-events:none;
}

.plan-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
  margin-top:12px;
}
.plan-card{
  display:block;
  padding:16px 16px;
  border-radius:18px;
  background: rgba(214,179,106,0.92);
  border:1px solid rgba(214,179,106,0.95);
  box-shadow: 0 12px 30px rgba(0,0,0,0.10);
  text-decoration:none;
}
.plan-name{
  color: var(--burgundy);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.plan-price{
  color: var(--burgundy);
  font-weight: 900;
  font-size: 34px;
  line-height: 1;
}
@media (min-width: 700px){
  .plan-grid{ grid-template-columns: repeat(3, 1fr); }
  .plan-price{ font-size: 30px; }
}

/* =============== JOURNAL =============== */
.journal-hero{padding:18px 0 10px 0;}
.journal-kicker{letter-spacing:.35em;font-weight:800;color:rgba(91,10,27,.45);font-size:12px;}
.journal-h1{margin:10px 0 10px 0;font-size:40px;line-height:1.05;}
.journal-selected{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:999px;border:2px solid var(--burgundy);color:#f5d7dc;background:transparent;font-weight:900;margin-top:6px;}
.journal-date{margin-top:8px;color:rgba(0,0,0,.55);font-weight:700;}
.journal-tabs{display:flex;gap:10px;overflow:auto;padding:14px 0 10px 0;scrollbar-width:thin;}
.journal-tab{white-space:nowrap;border-radius:999px;border:2px solid #C9A84C;background:rgba(91,10,27,.88);color:rgba(255,242,245,1);font-weight:800;padding:10px 14px;}
.journal-tab.active{border-color:#D4AF37;background:rgba(91,10,27,1);}
.journal-panel{padding:10px 0 6px 0;font-size:18px;line-height:1.55;}
.journal-cta{padding:22px 0 30px 0;}

/* ===== v9 patch: menu + journal polish ===== */
.menu-btn{width:48px;height:48px;border-radius:16px}
.menu-btn span{height:4px}
.menu-panel{z-index:1200}

/* Ensure menu works on pages that used .mobile-menu */
.mobile-menu{position:absolute;top:64px;right:16px;left:auto;width:min(320px,calc(100vw - 32px));background:rgba(255,255,255,.96);border:1px solid rgba(0,0,0,.08);border-radius:18px;padding:10px;box-shadow:0 18px 50px rgba(0,0,0,.18);display:none;z-index:1200}
.menu-open .mobile-menu{display:block}
.mobile-menu a,.menu-panel a{display:block;padding:12px 12px;border-radius:12px;color:var(--ink);text-decoration:none;font-weight:700}
.mobile-menu a:hover,.menu-panel a:hover{background:rgba(115,13,37,.06)}
.mobile-menu details summary{padding:12px 12px;border-radius:12px;font-weight:800;cursor:pointer}
.mobile-menu details[open] summary{background:rgba(115,13,37,.06)}

/* Journal page */
.journal-page .container{padding-top:18px}
.journal-shell .kicker{letter-spacing:.22em;font-weight:800;color:rgba(115,13,37,.55);margin-bottom:8px}
.journal-tabs{display:flex;gap:10px;overflow:auto;padding:8px 0 10px;scrollbar-width:thin}
.journal-tabs::-webkit-scrollbar{height:6px}
.journal-tabs::-webkit-scrollbar-thumb{background:rgba(115,13,37,.25);border-radius:99px}
.journal-tab{white-space:nowrap;border:2px solid #C9A84C;background:rgba(91,10,27,.88);color:rgba(255,242,245,1);font-weight:800;padding:10px 14px;border-radius:999px}
.journal-tab.is-active{background:rgba(91,10,27,1);border-color:#D4AF37;color:rgba(255,242,245,1)}
.journal-selected{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 14px}
.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:10px 14px;font-weight:900}
.pill-invert{border:2px solid var(--burgundy);color:rgba(255,242,245,0.95);background:transparent}
.journal-date{font-weight:900;color:rgba(0,0,0,.55)}
.journal-section{display:none;background:rgba(255,255,255,.85);border:1px solid rgba(0,0,0,.06);border-radius:18px;padding:16px;box-shadow:0 10px 28px rgba(0,0,0,.08)}
.journal-section.is-active{display:block}
.journal-section p{margin:0 0 10px;line-height:1.55}
.journal-section p:last-child{margin-bottom:0}

.journal-cta{margin:18px 0 34px}
.journal-cta-card{background:rgba(255,255,255,.92);border:1px solid rgba(0,0,0,.06);border-radius:18px;padding:16px;box-shadow:0 10px 28px rgba(0,0,0,.08)}

/* Coaching details page background with photo */
.details-page{position:relative}
.details-page::before{content:"";position:fixed;inset:0;background-image:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.82)), url('assets/training_client.jpg');background-size:cover;background-position:center;opacity:.5;pointer-events:none;z-index:-1}

/* v9 patch: coaching section tighter + consistent tier colors */
.coaching-wrap{
  padding: 14px 0 22px;
  /* Brand-friendly fade so the bottom doesn't end in flat white */
  background: linear-gradient(
    180deg,
    rgba(115, 13, 37, 0.08) 0%,
    rgba(255, 255, 255, 0.97) 54%,
    rgba(115, 13, 37, 0.10) 84%,
    rgba(201, 162, 76, 0.18) 100%
  );
}
.coaching-wrap .tier-pill{background:rgba(123,10,29,.96)}
.coaching-wrap .tier-pill .tier-title{color:rgba(255,255,255,.92)}
.coaching-wrap .tier-pill .tier-sub{color:rgba(255,255,255,.92)}

/* Prevent endless blank space below last section */
main{padding-bottom:24px}

/* ============================================================
   v13 PATCH — All 11 tasks
   ============================================================ */

/* TASK 2 — Hamburger bars: shorter + slightly thicker */
.menu-btn span {
  display: block;
  width: 16px !important;   /* shorter */
  height: 3.5px !important; /* slightly thicker */
  background: var(--burgundy);
  border-radius: 999px;
  margin: 2.5px 0;
  transition: transform .22s ease, opacity .22s ease;
}
/* keep the X animation offsets matching new height */
body.menu-open .menu-btn span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
body.menu-open .menu-btn span:nth-child(2){ opacity:0; }
body.menu-open .menu-btn span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* TASK 3 — Home coaching section: burgundy → gold gradient, no white slab */
.coaching-wrap {
  background: linear-gradient(
    180deg,
    rgba(90,10,31,0.00)  0%,
    rgba(90,10,31,0.18) 10%,
    rgba(90,10,31,0.52) 28%,
    rgba(140,60,20,0.38) 54%,
    rgba(195,148,55,0.28) 76%,
    rgba(215,170,70,0.22) 100%
  ) !important;
  padding: 22px 0 30px !important;
  position: relative;
}

/* TASK 4 — Carousel scroll arrows */
.carousel-wrap {
  position: relative;
}
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 10px;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
  animation: arrowNudge 1.6s ease-in-out infinite;
  opacity: 0.82;
  user-select: none;
}
.carousel-arrow.left  { left:  2px; animation-direction: reverse; }
.carousel-arrow.right { right: 2px; }
@keyframes arrowNudge {
  0%, 100% { transform: translateY(-50%) translateX(0); opacity: 0.65; }
  50%       { transform: translateY(-50%) translateX(3px); opacity: 1; }
}

/* TASK 5 — Journal tab active state: visibly bigger */
.journal-tab {
  transition: transform .18s ease, box-shadow .18s ease;
}
.journal-tab.is-active {
  transform: scale(1.12);
  box-shadow: 0 4px 14px rgba(91,10,27,.35);
  z-index: 1;
  position: relative;
}

/* TASK 7 — Journal page premium gradient accents */
.journal-page {
  position: relative;
  overflow-x: hidden;
}
.journal-accent-top {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--burgundy), var(--gold), var(--burgundy));
  z-index: 100;
  pointer-events: none;
}
.journal-accent-corner {
  position: fixed;
  bottom: 0; right: 0;
  width: 220px; height: 220px;
  background: radial-gradient(ellipse at bottom right,
    rgba(215,170,70,0.13) 0%,
    rgba(91,10,27,0.07) 55%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* TASK 9 — Journal tab row: same arrow cues */
.journal-tabs-wrap {
  position: relative;
}

/* Coaching page hero photo — TASK 10 */
.coach-hero-photo {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(0,0,0,.22), 0 0 0 3px rgba(215,170,70,.22);
  display: block;
  object-fit: cover;
  max-height: 420px;
  border: 2px solid rgba(215,170,70,.28);
  margin: 0 auto 18px auto;
}
.coach-photo-wrap {
  width: 100%;
  max-width: 540px;
  margin: 0 auto 20px;
}

/* Menu panel — ensure links show correctly on all pages */
.menu-panel a.menu-cta,
.mobile-menu a.menu-cta {
  margin-top: 10px;
  background: linear-gradient(180deg, rgba(91,10,27,1), rgba(59,6,17,1));
  color: #fff !important;
  border-radius: 12px;
  font-weight: 900;
  text-align: center;
  letter-spacing: .03em;
  padding: 13px 12px;
}

/* Task 6 — per-entry date line */
.entry-date {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: rgba(91,10,27,.50);
  text-transform: uppercase;
  margin: 0 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(91,10,27,.12);
}

/* Task 7 — Journal accent top bar position fix */
.journal-accent-top {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--burgundy), var(--gold), var(--burgundy));
  z-index: 200;
  pointer-events: none;
}

/* Task 9 — journal arrow colors: burgundy on light bg */
.journal-tabs-wrap .carousel-arrow {
  color: var(--burgundy);
  opacity: 0.55;
}

/* Task 5 — active tab scale needs overflow visible on parent */
.journal-tabs {
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 8px;
}
.journal-tabs-wrap {
  overflow: visible;
}

/* ============================================================
   v14 PATCH
   ============================================================ */

/* 1A — Logo text not clipped: increase header padding + line-height */
.site-header {
  padding: 12px 14px 14px;
  border-bottom: none !important; /* 1C: remove separator bar */
}
.brand-title {
  line-height: 1.25 !important;
  overflow: visible !important;
}
.brand-title strong {
  overflow: visible !important;
  text-overflow: unset !important;
}

/* 1B — Hamburger menu: full usable drawer */
.menu-panel {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(85vw, 320px) !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow-y: auto !important;
  border-radius: 0 !important;
  border-left: 1px solid rgba(255,255,255,.12) !important;
  padding: 60px 20px 40px !important;
  display: none;
  z-index: 9999 !important;
  background: rgba(88,7,28,0.97) !important;
  box-shadow: -18px 0 50px rgba(0,0,0,.32) !important;
}
.menu-open .menu-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.menu-panel a {
  display: block !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  font-size: 1.05rem !important;
  min-height: 48px !important;
  color: rgba(255,255,255,.92) !important;
  font-weight: 700 !important;
}
.menu-panel a:hover {
  background: rgba(255,255,255,.09) !important;
}
.menu-panel a.menu-cta {
  margin-top: 14px !important;
  background: linear-gradient(180deg, var(--gold), rgba(180,130,40,1)) !important;
  color: #1f0a10 !important;
  font-weight: 900 !important;
  text-align: center !important;
}

/* 1C — Remove header separator (belt-and-suspenders) */
.site-header { border-bottom: none !important; box-shadow: none !important; }

/* 1D — Hero image: crop higher + reduce opacity slightly */
.hero {
  background-position: center 15% !important; /* shift crop up */
}
.hero::before {
  background: linear-gradient(
    180deg,
    rgba(91,10,27,.52) 0%,
    rgba(91,10,27,.30) 55%,
    rgba(255,255,255,0) 100%
  ) !important; /* +6% opacity on overlay = image appears ~6% darker/less prominent */
}

/* 2A — Journal selected tab: stronger pink+burgundy, gold aura */
.journal-tab.is-active {
  background: rgba(91,10,27,1) !important;
  color: rgba(255,180,195,1) !important;       /* brighter pink */
  border-color: #D4AF37 !important;
  box-shadow:
    0 0 0 3px rgba(212,175,55,.28),
    0 0 14px rgba(212,175,55,.22),
    0 6px 18px rgba(91,10,27,.40) !important;
  transform: scale(1.13) !important;
}
.journal-tab:not(.is-active) {
  color: rgba(255,242,245,1) !important;       /* regular pink stays */
  border-color: #C9A84C !important;
  box-shadow: 0 0 8px rgba(212,175,55,.12) !important; /* subtle gold aura on all */
}

/* 3 — Homepage: ONE continuous gradient from hero bottom through coaching section */
body.home-bg .main,
body.home-bg main.main {
  background: transparent !important;
}
body.home-bg section,
body.home-bg .coaching-wrap {
  background: transparent !important;
}
body.home-bg {
  background:
    linear-gradient(
      180deg,
      rgba(90,10,31,.94)  0%,
      rgba(90,10,31,.70) 22%,
      rgba(90,10,31,.38) 42%,
      rgba(120,45,15,.22) 58%,
      rgba(185,138,45,.18) 72%,
      rgba(210,165,60,.14) 86%,
      rgba(247,246,246,1) 100%
    ),
    url("images/jah-stage.jpg") center top / cover no-repeat fixed !important;
}
/* Kill the section divider line */
.section-divider { display: none !important; }
.coaching-wrap { background: transparent !important; padding: 22px 0 30px !important; }

/* 4 — Horizontal scroll arrows: ~4x larger, double thickness */
.carousel-arrow {
  font-size: 38px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  opacity: 0.75 !important;
  color: var(--gold) !important;
}
.journal-tabs-wrap .carousel-arrow {
  color: var(--burgundy) !important;
  opacity: 0.60 !important;
  font-size: 38px !important;
}
@keyframes arrowNudge {
  0%, 100% { transform: translateY(-50%) translateX(0);   opacity: 0.60; }
  50%       { transform: translateY(-50%) translateX(4px); opacity: 0.90; }
}

/* ============================================================
   v15 PATCH
   ============================================================ */

/* 1 — Coaching details page: photo 0.60 opacity + soft gold vertical gradient */
body.coach-details {
  background: #fff !important;
}
body.coach-details::before {
  opacity: 0.60 !important;
  filter: saturate(0.92) contrast(0.96) !important;
}
body.coach-details::after {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.96)  0%,
    rgba(255,255,255,0.82) 12%,
    rgba(215,170,70,0.10)  38%,
    rgba(215,170,70,0.16)  62%,
    rgba(215,170,70,0.20)  82%,
    rgba(215,170,70,0.18) 100%
  ) !important;
  z-index: 0 !important;
}
/* ensure content sits above the pseudo layers */
body.coach-details main,
body.coach-details footer {
  position: relative;
  z-index: 1;
}

/* 2 — Homepage hero: revert to natural scale, photo stays inside hero only */
body.home-bg {
  background: #f7f6f6 !important; /* plain body bg below hero */
}
.hero {
  background: url('images/jah-stage.jpg') center top / cover no-repeat !important;
  background-attachment: scroll !important;
}
.hero::before {
  background: linear-gradient(
    180deg,
    rgba(91,10,27,.50) 0%,
    rgba(91,10,27,.28) 55%,
    rgba(91,10,27,.06) 82%,
    rgba(247,246,246,0) 100%
  ) !important;
}
/* seamless fade from bottom of hero into coaching section */
.hero::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(180deg, rgba(247,246,246,0) 0%, rgba(247,246,246,1) 100%);
  pointer-events: none;
}
/* coaching section inherits the neutral body bg, unified look */
body.home-bg .main,
body.home-bg main.main,
body.home-bg section,
body.home-bg .coaching-wrap {
  background: transparent !important;
}
body.home-bg main {
  background: #f7f6f6 !important;
}
.coaching-wrap {
  background: linear-gradient(
    180deg,
    rgba(247,246,246,1)   0%,
    rgba(225,185,80,0.08) 40%,
    rgba(215,170,60,0.13) 70%,
    rgba(200,155,50,0.16) 100%
  ) !important;
  padding: 22px 0 30px !important;
}

/* 3 — Journal selected subheading: single centered pill, pink bg, burgundy text, gold aura, 2x size */
.journal-selected {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 14px 0 !important;
  gap: 0 !important;
}
/* Hide the date element entirely */
#journalSelectedDate {
  display: none !important;
}
/* Restyle the pill */
.pill.pill-invert,
#journalSelectedTitle {
  border: 2px solid #D4AF37 !important;
  background: rgba(255,242,245,0.95) !important;
  color: var(--burgundy) !important;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  padding: 14px 28px !important;
  border-radius: 999px !important;
  box-shadow:
    0 0 0 4px rgba(212,175,55,0.20),
    0 0 22px rgba(212,175,55,0.28),
    0 8px 24px rgba(91,10,27,0.12) !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 200px !important;
}

/* 4 — Menu: Book Call → gold bg black text; remove Free 4-Day, add Free Programs */
/* (links handled in script.js) */
.menu-panel a.menu-book {
  background: linear-gradient(180deg, #D4AF37, #b8942e) !important;
  color: #1a0a0f !important;
  font-weight: 900 !important;
  border-radius: 12px !important;
}
.menu-panel a.menu-book:hover {
  filter: brightness(1.06) !important;
  background: linear-gradient(180deg, #D4AF37, #b8942e) !important;
}

/* 5 — Free Programs small button in hero */
.btn-free {
  background: linear-gradient(180deg, #D4AF37, #b8942e);
  color: #1a0a0f;
  font-weight: 900;
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 0.82rem;
  letter-spacing: .02em;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  min-width: 0;
  white-space: nowrap;
}
.btn-free:hover { filter: brightness(1.06); }

/* ============================================================
   v16 PATCH
   ============================================================ */

/* SECTION 1 and 2: Restore homepage hero photo, seamless gradient below */

/* Remove the pink/mauve body background that was washing the page */
body.home-bg {
  background: #0b0507 !important;
}

/* Hero: natural scale, contained to its section, original burgundy look */
.hero {
  background: url('images/jah-stage.jpg') center top / cover no-repeat !important;
  background-attachment: scroll !important;
  position: relative !important;
}

/* Restore original burgundy overlay on photo, no white bleed */
.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    180deg,
    rgba(91,10,27,.50) 0%,
    rgba(91,10,27,.28) 60%,
    rgba(91,10,27,.08) 100%
  ) !important;
  pointer-events: none !important;
}

/* Remove the pink fade-out that was bleeding into page */
.hero::after {
  display: none !important;
}

/* Main content area below hero: dark to neutral gradient, no pink, no white slab */
body.home-bg main,
body.home-bg main.main {
  background: linear-gradient(
    180deg,
    rgba(60,8,20,.85)   0%,
    rgba(60,8,20,.50)  15%,
    rgba(90,20,10,.22) 35%,
    rgba(180,135,45,.14) 60%,
    rgba(210,168,58,.10) 80%,
    rgba(245,240,235,1) 100%
  ) !important;
}

/* Coaching section: transparent so gradient shows through seamlessly */
body.home-bg .coaching-wrap,
body.home-bg section {
  background: transparent !important;
}

/* Section divider stays hidden */
.section-divider { display: none !important; }


/* SECTION 3: Coaching details page */

/* Raise photo visibility to ~0.60 */
body.coach-details::before {
  opacity: 0.60 !important;
  filter: saturate(0.92) contrast(0.96) !important;
}

/* Keep gold gradient overlay but not as heavy */
body.coach-details::after {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.90)  0%,
    rgba(255,255,255,0.75) 15%,
    rgba(215,170,60,0.10)  45%,
    rgba(215,170,60,0.16)  70%,
    rgba(215,170,60,0.18) 100%
  ) !important;
  z-index: 0 !important;
}

/* Cards: slightly transparent so image bleeds through subtly */
body.coach-details .card {
  background: rgba(255,255,255,0.87) !important;
  backdrop-filter: blur(2px) !important;
}

body.coach-details main,
body.coach-details footer {
  position: relative;
  z-index: 1;
}


/* SECTION 4: Journal selected pill - clean single pill, proportional */
.journal-selected {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 12px 0 !important;
  gap: 0 !important;
}

#journalSelectedDate {
  display: none !important;
}

.pill.pill-invert,
#journalSelectedTitle {
  border: 2px solid #D4AF37 !important;
  background: rgba(255,242,245,0.95) !important;
  color: var(--burgundy) !important;
  font-size: 1.10rem !important;
  font-weight: 900 !important;
  padding: 11px 22px !important;
  border-radius: 999px !important;
  box-shadow:
    0 0 0 3px rgba(212,175,55,0.18),
    0 0 16px rgba(212,175,55,0.22),
    0 6px 18px rgba(91,10,27,0.10) !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 160px !important;
}


/* SECTION 5: Journal entry centering */
.journal-section {
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.entry-date {
  text-align: center !important;
}

/* paragraph text stays left aligned */
.journal-section p:not(.entry-date) {
  text-align: left !important;
}


/* ============================================================
   v16b PATCH
   ============================================================ */

/* Hero: competition photo, focus on upper body/face area */
.hero {
  background: url('images/jah-stage.jpg') center 18% / cover no-repeat !important;
  background-attachment: scroll !important;
}

/* Coaching page: slightly more photo visibility */
body.coach-details::before {
  opacity: 0.68 !important;
}

/* Frequency plan cards: smaller, burgundy background, gold text, burgundy glow */
.plan-card {
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: var(--burgundy) !important;
  border: 1px solid rgba(212,175,55,0.55) !important;
  box-shadow:
    0 0 0 2px rgba(212,175,55,0.20),
    0 0 18px rgba(91,10,27,0.45),
    0 8px 22px rgba(0,0,0,0.18) !important;
}
.plan-name {
  color: var(--gold) !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.10em !important;
  margin-bottom: 4px !important;
}
.plan-price {
  color: var(--gold) !important;
  font-size: 24px !important;
  font-weight: 900 !important;
}
@media (min-width: 700px) {
  .plan-price { font-size: 22px !important; }
}
.plan-card:hover {
  filter: brightness(1.08) !important;
  box-shadow:
    0 0 0 2px rgba(212,175,55,0.35),
    0 0 24px rgba(91,10,27,0.55),
    0 10px 28px rgba(0,0,0,0.22) !important;
}

/* ============================================================
   v16c PATCH
   ============================================================ */

/* Free Programs button: centered, slightly smaller */
.hero-actions {
  align-items: center !important;
}
.btn-free {
  padding: 7px 16px !important;
  font-size: 0.76rem !important;
  align-self: center !important;
  display: block !important;
  margin: 0 auto !important;
}

/* More space between Start the Application button and What you get dropdown */
.coaching-ctas {
  margin-bottom: 28px !important;
}
.fold, details.fold {
  margin-top: 0 !important;
}
.actions + hr + details.fold,
.coaching-ctas + .section-divider,
.actions {
  /* extra top breathing room on the fold that follows */
}
/* Target the gap directly via adjacent sibling */
details.fold:first-of-type {
  margin-top: 28px !important;
}

/* Smoother background blend in the lower coaching section */
body.home-bg main,
body.home-bg main.main {
  background: linear-gradient(
    180deg,
    rgba(55,6,18,.80)    0%,
    rgba(55,6,18,.45)   14%,
    rgba(80,18,8,.20)   30%,
    rgba(150,110,35,.14) 50%,
    rgba(185,145,48,.11) 68%,
    rgba(210,168,58,.08) 82%,
    rgba(232,222,205,.70) 93%,
    rgba(245,240,235,1) 100%
  ) !important;
}

/* fold cards: slightly transparent so they sit into the background rather than floating */
details.fold {
  background: rgba(255,255,255,0.88) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
}


/* ============================================================
   v16c COACHING PAGE BACKGROUND FINAL FIX
   ============================================================ */

/* Reset body so no tint bleeds */
body.coach-details {
  background: #fff !important;
}

/* THE photo — scroll so it covers entire page length, not just viewport */
body.coach-details::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100vh !important;
  z-index: 0 !important;
  background-image: url('assets/jah_coaching_live.png') !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  opacity: 0.62 !important;
  filter: saturate(0.94) contrast(0.97) !important;
  pointer-events: none !important;
}

/* Thin tinted overlay only — do NOT wash out with heavy white */
body.coach-details::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.30) 0%,
    rgba(215,170,60,0.08)  50%,
    rgba(215,170,60,0.12) 100%
  ) !important;
  pointer-events: none !important;
}

/* Stack content above both layers */
body.coach-details {
  position: relative !important;
}
body.coach-details header,
body.coach-details main,
body.coach-details footer {
  position: relative !important;
  z-index: 2 !important;
}

/* Cards slightly transparent so photo shows through */
body.coach-details .card {
  background: rgba(255,255,255,0.84) !important;
  backdrop-filter: blur(3px) !important;
}
body.coach-details .plan-card {
  background: var(--burgundy) !important;
}

/* ============================================================
   v16d HERO PHOTO FINAL — competition photo, cropped, hero-only
   ============================================================ */

/* Hero section contains the photo — NOT fixed, NOT full page */
.hero {
  background-image: url('images/jah-stage.jpg') !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Burgundy overlay — lets photo read clearly but keeps brand tone */
.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    180deg,
    rgba(91,10,27,0.42) 0%,
    rgba(91,10,27,0.22) 50%,
    rgba(91,10,27,0.10) 100%
  ) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Remove the bottom fade bleed from previous patch */
.hero::after {
  display: none !important;
}

/* All content inside hero must sit above the overlay */
.hero-inner,
.hero .container {
  position: relative !important;
  z-index: 1 !important;
}

/* ============================================================
   v16e LOGO RESTORE + STRATEGIC PLACEMENTS
   ============================================================ */

/* Header logo: larger so shield detail is visible */
.logo,
.brand img,
.brand-logo {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  flex-shrink: 0 !important;
}

/* Strategic watermark logo — bottom corner accent */
.logo-watermark {
  position: fixed;
  bottom: 88px;
  right: 16px;
  width: 52px;
  height: 52px;
  object-fit: contain;
  opacity: 0.13;
  pointer-events: none;
  z-index: 10;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.18));
}

/* Journal page: faint logo behind CTA card */
.journal-cta-logo {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
  opacity: 0.18;
  margin: 0 auto 10px;
  filter: drop-shadow(0 2px 8px rgba(91,10,27,.22));
}

/* Coaching page section divider logo */
.section-logo-accent {
  display: block;
  width: 38px;
  height: 38px;
  object-fit: contain;
  opacity: 0.22;
  margin: 0 auto;
  filter: drop-shadow(0 2px 6px rgba(91,10,27,.20));
}

/* ============================================================
   v16f HERO CARD PHOTO — photo inside the card, not outer section
   ============================================================ */

/* Outer hero section: plain dark bg, no photo */
.hero {
  background: #0d0407 !important;
  background-image: none !important;
  padding: 14px 0 20px !important;
  position: relative !important;
}
.hero::before {
  display: none !important;
}
.hero::after {
  display: none !important;
}

/* Hero card: photo fills the card entirely, content overlays it */
.hero-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.45) !important;
  padding: 18px !important;
  background: #1a0408 !important; /* fallback */
  isolation: isolate !important;
}

/* Photo layer inside the card */
.hero-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url('images/jah-stage.jpg') !important;
  background-size: cover !important;
  background-position: center 12% !important;
  background-repeat: no-repeat !important;
  opacity: 0.72 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Dark burgundy overlay on top of photo so text stays legible */
.hero-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    180deg,
    rgba(60,5,16,0.55) 0%,
    rgba(60,5,16,0.38) 40%,
    rgba(60,5,16,0.52) 100%
  ) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* All direct children of hero-card must sit above the photo layers */
.hero-card > * {
  position: relative !important;
  z-index: 2 !important;
}

/* hero-inner and container: transparent, no background */
.hero-inner {
  position: relative !important;
  background: transparent !important;
}

/* ============================================================
   v16g HERO PHOTO FINAL CORRECT
   ============================================================ */

/* Outer hero section ALSO gets the photo — fills beyond the card edges */
.hero {
  background-image: url('images/jah-stage.jpg') !important;
  background-size: cover !important;
  background-position: center 8% !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  padding: 14px 0 20px !important;
  position: relative !important;
}

/* Single soft burgundy overlay on the SECTION — low opacity so photo reads clearly */
.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(45, 4, 14, 0.45) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.hero::after {
  display: none !important;
}

/* Hero inner and container sit above overlay */
.hero-inner,
.hero .container {
  position: relative !important;
  z-index: 1 !important;
}

/* Hero card: semi-transparent dark burgundy tint — photo bleeds through from section behind */
.hero-card {
  background: rgba(50, 4, 16, 0.42) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 22px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35) !important;
  padding: 18px !important;
  backdrop-filter: none !important;
  position: relative !important;
  overflow: visible !important;
  isolation: auto !important;
}

/* Remove any photo pseudo-elements on the card itself */
.hero-card::before,
.hero-card::after {
  display: none !important;
}

/* All card children normal stacking */
.hero-card > * {
  position: relative !important;
  z-index: auto !important;
}

/* ============================================================
   v17 FINAL — Hero photo layering + hamburger menu z-index fix
   Only these two things. Nothing else changed.
   ============================================================ */

/* ── PART 1: HERO PHOTO ──────────────────────────────────────
   Layer order:
   1. .hero           — position:relative, overflow:hidden, NO opacity on wrapper
   2. .hero-bg        — absolute image layer, cover, center top, no filter/transform
   3. .hero-overlay   — absolute tint layer, opacity 0.30
   4. .hero-inner     — position:relative, z-index:2 — all content above
   ------------------------------------------------------------- */

.hero {
  position: relative !important;
  overflow: hidden !important;
  background: #0d0407 !important;        /* fallback only, no photo on wrapper */
  background-image: none !important;
  padding: 14px 0 20px !important;
  /* NO opacity here — never on wrapper */
}

/* Image layer — absolutely positioned inside hero, no transform, no filter */
.hero-bg {
  position: absolute !important;
  inset: 0 !important;
  background-image: url('images/jah-stage.jpg') !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  z-index: 0 !important;
  /* NO transform, NO scale, NO filter, NO blur, NO opacity on THIS layer */
}

/* Overlay layer — only this element gets opacity for readability */
.hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    180deg,
    rgba(30, 3, 10, 0.32) 0%,
    rgba(50, 5, 18, 0.28) 100%
  ) !important;
  opacity: 1 !important;               /* opacity lives in the rgba values above */
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Content layer — sits above both image and overlay */
.hero-inner,
.hero .container {
  position: relative !important;
  z-index: 2 !important;
}

/* Hero card — transparent so photo from section shows through */
.hero-card {
  background: rgba(40, 3, 14, 0.38) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 22px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35) !important;
  padding: 18px !important;
  backdrop-filter: none !important;     /* no backdrop-filter — avoids stacking context */
  position: relative !important;
  overflow: visible !important;
  isolation: auto !important;           /* no isolation — avoids stacking context */
}

/* Clear any lingering photo pseudo-elements on the card */
.hero-card::before,
.hero-card::after {
  display: none !important;
}

.hero::before,
.hero::after {
  display: none !important;            /* disable old overlay pseudo-elements */
}


/* ── PART 2: HAMBURGER MENU Z-INDEX ─────────────────────────
   Problem: backdrop-filter on site-header creates its own stacking context,
   which can trap children. Fix: remove backdrop-filter from header,
   use a plain semi-opaque bg instead. Menu panel gets the highest z-index.
   ------------------------------------------------------------- */

.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 500 !important;             /* high enough to beat any section */
  background: rgba(245,245,247,0.94) !important;
  backdrop-filter: none !important;    /* REMOVED — was creating a stacking context */
  -webkit-backdrop-filter: none !important;
}

.menu-panel {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(85vw, 320px) !important;
  height: 100dvh !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
  z-index: 9000 !important;            /* above everything */
  background: rgba(88,7,28,0.97) !important;
}

/* Ensure body.menu-open does not create a clipping context */
body.menu-open {
  overflow: hidden !important;         /* prevents scroll but does not clip fixed elements */
}

/* ============================================================
   FINAL DEFINITIVE FIX — Hero layering + menu z-index
   This block is last in the file and overrides everything above.
   ============================================================ */

/* 1. Hero wrapper: position context only, no opacity, no background image */
.hero {
  position: relative !important;
  overflow: hidden !important;
  background: #0d0407 !important;
  background-image: none !important;
  padding: 14px 0 20px !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  isolation: auto !important;
}

/* Disable ALL ::before and ::after on .hero */
.hero::before,
.hero::after {
  display: none !important;
  content: none !important;
}

/* 2. Image layer: fills hero, cover, center top, nothing else */
.hero-bg {
  position: absolute !important;
  inset: 0 !important;
  background-image: url('images/jah-stage.jpg') !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  background-color: transparent !important;
  z-index: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  pointer-events: none !important;
}

/* 3. Overlay layer: ONLY this gets the tint, no opacity property, tint is in rgba */
.hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    180deg,
    rgba(25, 2, 8, 0.30) 0%,
    rgba(40, 4, 14, 0.28) 100%
  ) !important;
  z-index: 1 !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

/* 4. Content: sits above both layers */
.hero-inner,
.hero .container {
  position: relative !important;
  z-index: 2 !important;
}

/* 5. Hero card: transparent shell, no pseudo-elements, no backdrop-filter */
.hero-card {
  background: rgba(35, 3, 12, 0.36) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 22px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.32) !important;
  padding: 18px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative !important;
  overflow: visible !important;
  isolation: auto !important;
  opacity: 1 !important;
  transform: none !important;
}
.hero-card::before,
.hero-card::after {
  display: none !important;
  content: none !important;
}
.hero-card > * {
  position: relative !important;
  z-index: 2 !important;
}

/* ── MENU: header z-index 500, panel z-index 9999 ──────────── */

.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 500 !important;
  background: rgba(245,245,247,0.95) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.menu-panel,
.mobile-menu {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(85vw, 320px) !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
  z-index: 9999 !important;
  background: rgba(88,7,28,0.98) !important;
  border-radius: 0 !important;
  border-left: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: -12px 0 40px rgba(0,0,0,0.40) !important;
  padding: 60px 20px 40px !important;
  display: none !important;
}

.menu-open .menu-panel,
.menu-open .mobile-menu {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* Prevent any hero stacking context from clipping menu */
.hero,
.hero-card,
.hero-inner,
section,
main {
  isolation: auto !important;
}

/* ============================================================
   v18 PATCH - 5 targeted fixes only
   ============================================================ */

/* 1. HOMEPAGE FAQ SPACING - 20px gap between What you get and Quick FAQs */
details.fold + details.fold {
  margin-top: 20px !important;
}

/* 2. HOMEPAGE LOWER SECTION - single smooth gradient, no bands */
body.home-bg main,
body.home-bg main.main {
  background: linear-gradient(
    180deg,
    rgba(48, 5, 16, 0.72) 0%,
    rgba(245, 238, 225, 1) 100%
  ) !important;
}

/* 3. JOURNAL OUTER PILL REMOVED - strip all border and bg from wrapper */
.journal-selected {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 14px 0 !important;
  gap: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 4. COACHING DETAILS BACKGROUND - fixed attachment so it stays consistent on scroll */
body.coach-details {
  position: relative !important;
}
body.coach-details::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-image: url('assets/jah_coaching_live.png') !important;
  background-size: cover !important;
  background-position: center 20% !important;
  background-repeat: no-repeat !important;
  opacity: 0.58 !important;
  filter: none !important;
  pointer-events: none !important;
}
body.coach-details::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.22) 0%,
    rgba(215,170,60,0.08)  50%,
    rgba(215,170,60,0.12) 100%
  ) !important;
  pointer-events: none !important;
}
body.coach-details header,
body.coach-details main,
body.coach-details footer {
  position: relative !important;
  z-index: 2 !important;
}
body.coach-details .card {
  background: rgba(255,255,255,0.80) !important;
  backdrop-filter: none !important;
}

/* 5. LOGO WATERMARK OPACITY - 0.80 on coaching and journal */
body.coach-details .logo-watermark,
body.journal-page .logo-watermark {
  opacity: 0.80 !important;
}
body.coach-details .section-logo-accent {
  opacity: 0.80 !important;
}
body.journal-page .journal-cta-logo {
  opacity: 0.80 !important;
}

/* ============================================================
   v19 — HERO FINAL: subdued film look, stable across all breakpoints
   Three layers only. No changes to layout, typography, or other sections.
   ============================================================ */

/* ── HERO WRAPPER ───────────────────────────────────────────
   Position context only.
   No background image here. No opacity. No filter. No transform.
   overflow:hidden keeps cover from ever showing edges.
   Height bounded per breakpoint to reduce cropping feel.
------------------------------------------------------------ */
.hero {
  position: relative !important;
  overflow: hidden !important;
  background: #0d0407 !important;
  background-image: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  isolation: auto !important;
  padding: 14px 0 20px !important;
  /* Mobile: natural height driven by content */
  min-height: 0 !important;
  max-height: none !important;
}

/* Tablet: cap height so cover doesn't crop as aggressively */
@media (min-width: 600px) {
  .hero {
    min-height: 520px !important;
    max-height: 780px !important;
  }
}

/* Desktop/laptop: tighter cap reduces zoom feel further */
@media (min-width: 1024px) {
  .hero {
    min-height: 560px !important;
    max-height: 860px !important;
  }
}

/* Kill every ::before and ::after on .hero — all old overlays */
.hero::before,
.hero::after {
  display: none !important;
  content: none !important;
}


/* ── BACKGROUND IMAGE LAYER ─────────────────────────────────
   Single absolute layer. cover always. center top always.
   No transform. No scale. No filter. No opacity on this layer.
   background-attachment scroll (never fixed).
   No per-breakpoint overrides on size or position.
------------------------------------------------------------ */
.hero-bg {
  position: absolute !important;
  inset: 0 !important;
  background-image: url('images/jah-stage.jpg') !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  background-color: transparent !important;
  z-index: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  pointer-events: none !important;
}


/* ── OVERLAY LAYER ───────────────────────────────────────────
   This is the ONLY element that controls photo darkness.
   Darker than before — targets ~70% of previous visibility.
   Single smooth gradient, no banding.
   opacity:1 on the element; darkness lives in rgba values.
------------------------------------------------------------ */
.hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    180deg,
    rgba(12, 1, 4, 0.72) 0%,
    rgba(30, 3, 12, 0.65) 45%,
    rgba(45, 5, 18, 0.58) 100%
  ) !important;
  opacity: 1 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  transform: none !important;
  filter: none !important;
}


/* ── CONTENT LAYER ───────────────────────────────────────────
   Sits above both image and overlay.
   No opacity change here.
------------------------------------------------------------ */
.hero-inner,
.hero .container {
  position: relative !important;
  z-index: 2 !important;
  opacity: 1 !important;
}

/* Hero card: transparent so section photo shows through */
.hero-card {
  background: rgba(30, 2, 10, 0.32) !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  border-radius: 22px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.30) !important;
  padding: 18px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative !important;
  overflow: visible !important;
  isolation: auto !important;
  opacity: 1 !important;
  transform: none !important;
}
.hero-card::before,
.hero-card::after {
  display: none !important;
  content: none !important;
}
.hero-card > * {
  position: relative !important;
  z-index: 2 !important;
}


/* ── HEADER AND MENU — unchanged, confirmed above hero ───────
   Header z-index 500, menu panel z-index 9999.
   backdrop-filter removed from header to avoid stacking context.
------------------------------------------------------------ */
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 500 !important;
  background: rgba(245,245,247,0.95) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.menu-panel,
.mobile-menu {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(85vw, 320px) !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
  z-index: 9999 !important;
  background: rgba(88,7,28,0.98) !important;
  border-radius: 0 !important;
  border-left: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: -12px 0 40px rgba(0,0,0,0.40) !important;
  padding: 60px 20px 40px !important;
  display: none !important;
}
.menu-open .menu-panel,
.menu-open .mobile-menu {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* No stacking context on any section that could trap menu */
.hero, .hero-card, .hero-inner, section, main {
  isolation: auto !important;
}


/* ============================================================
   v20 MASTER PATCH — Final definitive override, placed last.
   Covers: hero, menu, coaching bg, logos, journal pill,
   homepage spacing + gradient, header, menu items.
   Every rule here wins over all previous declarations.
   ============================================================ */


/* ── P1: HERO WRAPPER ──────────────────────────────────────
   Position context only. No bg image. No opacity. No filter.
   overflow:hidden ensures cover never shows edges.
   Height bounded per breakpoint to prevent aggressive crop.
─────────────────────────────────────────────────────────── */
.hero {
  position: relative !important;
  overflow: hidden !important;
  background: #0a0204 !important;
  background-image: none !important;
  padding: 14px 0 20px !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  isolation: auto !important;
  /* Mobile: content drives height */
  min-height: 0 !important;
  max-height: none !important;
}
@media (min-width: 600px) {
  .hero {
    min-height: 500px !important;
    max-height: 760px !important;
  }
}
@media (min-width: 1024px) {
  .hero {
    min-height: 540px !important;
    max-height: 840px !important;
  }
}
.hero::before,
.hero::after {
  display: none !important;
  content: none !important;
}


/* ── P1: BACKGROUND IMAGE LAYER ───────────────────────────
   Absolute, inset:0, cover, center center.
   No transform. No scale. No filter. No blur. opacity:1.
─────────────────────────────────────────────────────────── */
.hero-bg {
  position: absolute !important;
  inset: 0 !important;
  background-image: url('images/jah-stage.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  background-color: transparent !important;
  z-index: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  pointer-events: none !important;
}


/* ── P1: OVERLAY LAYER ─────────────────────────────────────
   Darkness ONLY lives here. Targeting ~70% of reference visibility.
   Single gradient, no banding, near-black burgundy top to deep
   burgundy bottom. opacity:1 on element; strength in rgba.
─────────────────────────────────────────────────────────── */
.hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    180deg,
    rgba(8, 1, 3, 0.76) 0%,
    rgba(20, 2, 8, 0.70) 50%,
    rgba(38, 4, 14, 0.64) 100%
  ) !important;
  z-index: 1 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: none !important;
  filter: none !important;
}


/* ── P1: CONTENT LAYER ─────────────────────────────────────
   Relative, z-index:2. No opacity change.
─────────────────────────────────────────────────────────── */
.hero-inner,
.hero .container {
  position: relative !important;
  z-index: 2 !important;
  opacity: 1 !important;
}

/* Hero card: semi-transparent so photo bleeds through */
.hero-card {
  background: rgba(28, 2, 10, 0.34) !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  border-radius: 22px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.30) !important;
  padding: 18px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative !important;
  overflow: visible !important;
  isolation: auto !important;
  opacity: 1 !important;
  transform: none !important;
}
.hero-card::before,
.hero-card::after {
  display: none !important;
  content: none !important;
}
.hero-card > * {
  position: relative !important;
  z-index: 2 !important;
}

/* No stacking context on any wrapper that could trap menu */
.hero, .hero-card, .hero-inner,
section, main, .coaching-wrap {
  isolation: auto !important;
}


/* ── P2: HAMBURGER MENU ────────────────────────────────────
   Header sticky z-index:500, no backdrop-filter (that creates
   a stacking context trapping children).
   Menu panel: fixed, full screen height, z-index:9999.
   Menu backdrop: covers full viewport to block clicks behind.
─────────────────────────────────────────────────────────── */
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 500 !important;
  background: rgba(245,245,247,0.96) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 10px 14px 12px !important;
}

/* Full-viewport backdrop when menu open */
body.menu-open::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.45) !important;
  z-index: 9000 !important;
  pointer-events: auto !important;
}

.menu-panel,
.mobile-menu {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(85vw, 320px) !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
  z-index: 9999 !important;
  background: rgba(88,7,28,0.98) !important;
  border-radius: 0 !important;
  border-left: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: -12px 0 40px rgba(0,0,0,0.50) !important;
  padding: 64px 20px 40px !important;
  display: none;
  flex-direction: column;
  gap: 4px;
}
.menu-open .menu-panel,
.menu-open .mobile-menu {
  display: flex !important;
  pointer-events: auto !important;
}
.menu-panel a,
.mobile-menu a {
  display: block !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.92) !important;
  text-decoration: none !important;
  min-height: 48px !important;
}
.menu-panel a:hover,
.mobile-menu a:hover {
  background: rgba(255,255,255,0.09) !important;
}

/* Book a Free Call: gold bg, black text — matches Apply Now weight */
.menu-panel a.menu-book,
.mobile-menu a.menu-book {
  background: linear-gradient(180deg, #D4AF37, #b8942e) !important;
  color: #1a0a0f !important;
  font-weight: 900 !important;
  text-align: center !important;
  margin-top: 8px !important;
}
.menu-panel a.menu-book:hover,
.mobile-menu a.menu-book:hover {
  filter: brightness(1.07) !important;
  background: linear-gradient(180deg, #D4AF37, #b8942e) !important;
}

/* Apply Now: keep current gold-on-burgundy CTA style */
.menu-panel a.menu-cta,
.mobile-menu a.menu-cta {
  margin-top: 6px !important;
  background: linear-gradient(180deg, rgba(91,10,27,1), rgba(59,6,17,1)) !important;
  color: #fff !important;
  font-weight: 900 !important;
  text-align: center !important;
}


/* ── P3: COACHING DETAILS PAGE BACKGROUND ─────────────────
   Photo fixed behind content — stable on scroll, no jitter.
   Opacity reduced by 15 points vs previous.
   Cards more transparent so photo shows through.
─────────────────────────────────────────────────────────── */
body.coach-details {
  position: relative !important;
  background: #fff !important;
}
body.coach-details::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-image: url('assets/jah_coaching_live.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: 0.43 !important;
  filter: none !important;
  pointer-events: none !important;
}
body.coach-details::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.18) 0%,
    rgba(215,170,60,0.07)  50%,
    rgba(215,170,60,0.11) 100%
  ) !important;
  pointer-events: none !important;
}
body.coach-details header,
body.coach-details main,
body.coach-details footer {
  position: relative !important;
  z-index: 2 !important;
}
/* Cards: 72% opaque so photo bleeds through more clearly */
body.coach-details .card {
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: none !important;
}


/* ── P4: LOGO WATERMARKS — no duplicates, one per page ────
   .section-logo-accent is the mid-page divider logo on coaching.
   .logo-watermark is the fixed corner logo on coaching + journal.
   .journal-cta-logo is inside the CTA card on journal.
   Opacity 0.80. Size slightly increased. Position nudged down 6px.
─────────────────────────────────────────────────────────── */
.logo-watermark {
  position: fixed !important;
  bottom: 82px !important;
  right: 16px !important;
  width: 58px !important;
  height: 58px !important;
  object-fit: contain !important;
  opacity: 0.80 !important;
  pointer-events: none !important;
  z-index: 10 !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.20)) !important;
}

.section-logo-accent {
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  object-fit: contain !important;
  opacity: 0.80 !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 2px 6px rgba(91,10,27,0.22)) !important;
}

.journal-cta-logo {
  display: block !important;
  width: 62px !important;
  height: 62px !important;
  object-fit: contain !important;
  opacity: 0.80 !important;
  margin: 0 auto 10px !important;
  filter: drop-shadow(0 2px 8px rgba(91,10,27,0.24)) !important;
}


/* ── P5: JOURNAL SELECTED PILL ─────────────────────────────
   Outer .journal-selected wrapper: invisible, no border, no bg.
   Inner #journalSelectedTitle: styled pill, pink bg, gold border.
   Slightly smaller than previous — proportional.
   Date hidden — dates only appear as .entry-date above each entry.
   Content centered.
─────────────────────────────────────────────────────────── */
.journal-selected {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 12px 0 !important;
  gap: 0 !important;
}

#journalSelectedDate {
  display: none !important;
}

.pill.pill-invert,
#journalSelectedTitle {
  border: 2px solid #D4AF37 !important;
  background: rgba(255,242,245,0.95) !important;
  color: var(--burgundy) !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  padding: 10px 22px !important;
  border-radius: 999px !important;
  box-shadow:
    0 0 0 3px rgba(212,175,55,0.16),
    0 0 14px rgba(212,175,55,0.20),
    0 4px 14px rgba(91,10,27,0.10) !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 140px !important;
}

/* Journal entries: centered container, date centered, text left */
.journal-section {
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.entry-date {
  text-align: center !important;
}
.journal-section p:not(.entry-date) {
  text-align: left !important;
}


/* ── P6: HOMEPAGE BOTTOM SPACING + GRADIENT ────────────────
   20px gap between the two fold accordions.
   Single smooth 2-stop gradient on main — no banding.
─────────────────────────────────────────────────────────── */
details.fold + details.fold {
  margin-top: 20px !important;
}

body.home-bg main,
body.home-bg main.main {
  background: linear-gradient(
    180deg,
    rgba(44, 4, 14, 0.70) 0%,
    rgba(245, 238, 225, 1) 100%
  ) !important;
}

/* fold cards slightly transparent on home */
details.fold {
  background: rgba(255,255,255,0.88) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
}


/* ── P7: HEADER LOGO CLIPPING FIX ─────────────────────────
   Ensure brand title never clips; logo correct size.
─────────────────────────────────────────────────────────── */
.logo,
.brand img {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}
.brand-title {
  line-height: 1.25 !important;
  overflow: visible !important;
  white-space: nowrap !important;
}
.brand-title strong {
  overflow: visible !important;
  text-overflow: unset !important;
}
a.brand {
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer !important;
}

/* ============================================================
   v21 FINAL — Menu overlay fix + hero frosted glass restore
   Only these two areas changed. Everything else untouched.
   ============================================================ */

/* ── KILL the body::before overlay hack — replaced by real DOM div ── */
body.menu-open::before {
  display: none !important;
  content: none !important;
  pointer-events: none !important;
}

/* ── REAL DOM OVERLAY DIV ───────────────────────────────────
   Sits BELOW the menu panel (z-index 8000 vs panel 9999).
   pointer-events: none when hidden so nothing is blocked.
   pointer-events: auto only when menu is open — taps on
   overlay close menu, taps on panel pass through to links.
─────────────────────────────────────────────────────────── */
.menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
  z-index: 8000;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
}
.menu-open .menu-overlay {
  display: block;
  pointer-events: auto;
}

/* ── MENU PANEL: z-index ABOVE overlay ─────────────────────
   Panel at 9999, overlay at 8000.
   Links inside panel: pointer-events auto, z-index clear.
─────────────────────────────────────────────────────────── */
.menu-panel,
.mobile-menu {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(85vw, 320px) !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow-y: auto !important;
  z-index: 9999 !important;
  background: rgba(88,7,28,0.98) !important;
  border-left: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: -12px 0 40px rgba(0,0,0,0.50) !important;
  padding: 64px 20px 40px !important;
  display: none !important;
  flex-direction: column !important;
  gap: 4px !important;
  pointer-events: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.menu-open .menu-panel,
.menu-open .mobile-menu {
  display: flex !important;
  pointer-events: auto !important;
}
.menu-panel a,
.mobile-menu a {
  display: block !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.92) !important;
  text-decoration: none !important;
  min-height: 48px !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 10000 !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: rgba(255,255,255,0.1) !important;
}
.menu-panel a:hover,
.menu-panel a:active,
.mobile-menu a:hover,
.mobile-menu a:active {
  background: rgba(255,255,255,0.09) !important;
}
.menu-panel a.menu-book,
.mobile-menu a.menu-book {
  background: linear-gradient(180deg, #D4AF37, #b8942e) !important;
  color: #1a0a0f !important;
  font-weight: 900 !important;
  text-align: center !important;
  margin-top: 8px !important;
}
.menu-panel a.menu-cta,
.mobile-menu a.menu-cta {
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  color: #fff !important;
  font-weight: 900 !important;
  text-align: center !important;
  margin-top: 4px !important;
}

/* Header: sticky, above page content, BELOW menu panel */
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 500 !important;
  background: rgba(245,245,247,0.96) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* No stacking context on wrappers that could trap menu */
.hero, .hero-bg, .hero-overlay, .hero-card,
.hero-inner, section, main {
  isolation: auto !important;
}


/* ── HERO WRAPPER ───────────────────────────────────────────
   Position context. No image here. overflow:hidden = no edges.
─────────────────────────────────────────────────────────── */
.hero {
  position: relative !important;
  overflow: hidden !important;
  background: #0a0204 !important;
  background-image: none !important;
  padding: 14px 0 20px !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}
.hero::before,
.hero::after {
  display: none !important;
  content: none !important;
}
@media (min-width: 600px) {
  .hero { min-height: 500px !important; max-height: 760px !important; }
}
@media (min-width: 1024px) {
  .hero { min-height: 540px !important; max-height: 840px !important; }
}


/* ── HERO BACKGROUND IMAGE LAYER ───────────────────────────
   cover, center center, scroll. No transform/filter/blur.
─────────────────────────────────────────────────────────── */
.hero-bg {
  position: absolute !important;
  inset: 0 !important;
  background-image: url('images/jah-stage.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  z-index: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  pointer-events: none !important;
}


/* ── HERO OVERLAY — controls darkness only ─────────────────
   Reduced visibility by ~30 points vs reference.
   Single gradient, no banding.
─────────────────────────────────────────────────────────── */
.hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    180deg,
    rgba(8,1,3,0.74) 0%,
    rgba(22,2,8,0.68) 50%,
    rgba(38,4,14,0.62) 100%
  ) !important;
  z-index: 1 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: none !important;
  filter: none !important;
}


/* ── HERO CONTENT LAYER ────────────────────────────────────
   z-index 2, above both image and overlay.
─────────────────────────────────────────────────────────── */
.hero-inner,
.hero .container {
  position: relative !important;
  z-index: 2 !important;
  opacity: 1 !important;
}


/* ── HERO CARD — FROSTED GLASS RESTORED ───────────────────
   backdrop-filter blur restored. Transparent burgundy tint.
   This is the "blurred rectangle content box" from the old look.
   isolation:isolate needed for backdrop-filter to work correctly.
─────────────────────────────────────────────────────────── */
.hero-card {
  background: rgba(35, 3, 14, 0.42) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 22px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.32) !important;
  padding: 18px !important;
  backdrop-filter: blur(10px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.2) !important;
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
  opacity: 1 !important;
  transform: none !important;
}
.hero-card::before,
.hero-card::after {
  display: none !important;
  content: none !important;
}
.hero-card > * {
  position: relative !important;
  z-index: 2 !important;
}

/* ============================================================
   v22 PATCH
   1) .btn-journal  - pink fill, burgundy text, medium size
   2) .site-header  - pink background all pages
   3) .hero-card    - reduced blur 10px to 4px
   4) .hero-overlay - slightly lightened overlay
   ============================================================ */

/* 1. Junction Journal button */
.btn-journal {
  background: rgba(255,242,245,0.97) !important;
  color: var(--burgundy) !important;
  border: 2px solid #D4AF37 !important;
  border-radius: 999px !important;
  font-size: 0.96rem !important;
  font-weight: 900 !important;
  padding: 11px 20px !important;
  letter-spacing: .02em !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  box-shadow:
    0 0 0 3px rgba(212,175,55,0.18),
    0 0 14px rgba(212,175,55,0.20),
    0 6px 18px rgba(0,0,0,0.16) !important;
}
.btn-journal:hover {
  filter: brightness(1.04) !important;
}
@media (max-width: 480px) {
  .btn-journal {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }
}

/* 2. Header soft pink background across all pages */
.site-header {
  background: rgba(255,242,245,0.97) !important;
}

/* 3. Hero card: reduced blur so facial details show through */
.hero-card {
  backdrop-filter: blur(4px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(4px) saturate(1.1) !important;
}

/* 4. Hero overlay: lighter by ~8 alpha points */
.hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(8,1,3,0.66) 0%,
    rgba(22,2,8,0.60) 50%,
    rgba(38,4,14,0.54) 100%
  ) !important;
}
/* test */
/* v23 PATCH */

/* 1. HAMBURGER: burgundy bg, gold bars */
.menu-btn { background: var(--burgundy) !important; border: 1px solid rgba(212,175,55,0.30) !important; }
.menu-btn span { background: #D4AF37 !important; }
body.menu-open .menu-btn span { background: #D4AF37 !important; }

/* 2. MENU LAYERING */
body.menu-open::before { display: none !important; content: none !important; pointer-events: none !important; }
.menu-overlay { display: none !important; position: fixed !important; inset: 0 !important; background: rgba(0,0,0,0.48) !important; z-index: 8000 !important; pointer-events: none !important; }
.menu-open .menu-overlay { display: block !important; pointer-events: auto !important; }
.menu-panel, .mobile-menu { z-index: 9999 !important; pointer-events: auto !important; position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: min(85vw, 320px) !important; height: 100dvh !important; overflow-y: auto !important; }
.menu-panel a, .mobile-menu a { pointer-events: auto !important; position: relative !important; z-index: 10000 !important; cursor: pointer !important; -webkit-tap-highlight-color: rgba(255,255,255,0.08) !important; display: block !important; padding: 14px 16px !important; min-height: 48px !important; color: rgba(255,255,255,0.92) !important; font-weight: 700 !important; text-decoration: none !important; border-radius: 12px !important; }
.menu-panel a.menu-book, .mobile-menu a.menu-book { background: linear-gradient(180deg,#D4AF37,#b8942e) !important; color: #1a0a0f !important; font-weight: 900 !important; text-align: center !important; margin-top: 8px !important; }
.site-header { z-index: 500 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.hero, .hero-bg, .hero-overlay, .hero-card, .hero-inner, section, main { isolation: auto !important; }

/* 3. HERO OVERLAY: brighten */
.hero-overlay { background: linear-gradient(180deg, rgba(8,1,3,0.60) 0%, rgba(22,2,8,0.54) 50%, rgba(38,4,14,0.48) 100%) !important; }

/* 4. FOLD ACCORDIONS: pink summary buttons */
details.fold { border: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; }
details.fold > summary { background: rgba(255,242,245,0.95) !important; color: var(--burgundy) !important; border: 2px solid #D4AF37 !important; border-radius: 14px !important; padding: 12px 16px !important; font-size: 16px !important; font-weight: 900 !important; cursor: pointer !important; list-style: none !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; box-shadow: 0 0 0 3px rgba(212,175,55,0.14), 0 0 12px rgba(212,175,55,0.18), 0 4px 12px rgba(0,0,0,0.10) !important; }
details.fold > summary:hover { filter: brightness(1.04) !important; }
details.fold > summary::-webkit-details-marker { display: none !important; }
details.fold[open] > summary { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; border-bottom-color: rgba(212,175,55,0.25) !important; }
details.fold > summary .chev { color: var(--burgundy) !important; font-size: 18px !important; }
details.fold > p, details.fold > p.muted { background: rgba(255,255,255,0.93) !important; padding: 12px 16px !important; margin: 0 !important; border: 1px solid rgba(212,175,55,0.20) !important; border-top: none !important; }
details.fold > p:last-child { border-radius: 0 0 14px 14px !important; }
/* v24 menu fix test */

/* ================================================================
   v24 FINAL MENU FIX
   ================================================================ */

body.menu-open::before,
body.menu-open::after {
  display: none !important;
  content: none !important;
  pointer-events: none !important;
  background: none !important;
}

.menu-overlay {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0,0,0,0.45) !important;
  z-index: 99000 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.menu-open .menu-overlay {
  display: block !important;
  pointer-events: auto !important;
}

.menu-panel,
.mobile-menu,
nav.menu-panel {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(85vw, 320px) !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow-y: auto !important;
  background: rgba(70,5,22,0.98) !important;
  border-left: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: -10px 0 40px rgba(0,0,0,0.5) !important;
  padding: 64px 18px 40px !important;
  display: none !important;
  flex-direction: column !important;
  gap: 4px !important;
  z-index: 99999 !important;
  pointer-events: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.menu-open .menu-panel,
.menu-open .mobile-menu,
.menu-open nav.menu-panel {
  display: flex !important;
  pointer-events: auto !important;
}

.menu-panel a,
.mobile-menu a,
nav.menu-panel a {
  display: block !important;
  padding: 14px 16px !important;
  min-height: 48px !important;
  border-radius: 12px !important;
  color: rgba(255,255,255,0.92) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  position: relative !important;
  z-index: 100000 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: rgba(255,255,255,0.1) !important;
}
.menu-panel a:active,
.mobile-menu a:active {
  background: rgba(255,255,255,0.12) !important;
}
.menu-panel a.menu-book,
.mobile-menu a.menu-book {
  background: linear-gradient(180deg,#D4AF37,#b8942e) !important;
  color: #111 !important;
  font-weight: 900 !important;
  text-align: center !important;
  margin-top: 8px !important;
}
.menu-panel a.menu-cta,
.mobile-menu a.menu-cta {
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  font-weight: 900 !important;
  text-align: center !important;
  margin-top: 4px !important;
}

.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 500 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.hero, .hero-inner, .hero-card, .hero-bg, .hero-overlay,
section, main, footer {
  isolation: auto !important;
}
/* v25 FINAL MENU - LAST IN FILE - WINS ALL PRIOR PATCHES */
body::before,body.menu-open::before,body.menu-open::after{display:none !important;content:none !important;pointer-events:none !important;background:none !important;}
.menu-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:8000;pointer-events:none;}
.menu-open .menu-overlay{display:block !important;pointer-events:auto !important;}
.menu-panel,nav.menu-panel,.mobile-menu{position:fixed !important;top:0 !important;right:0 !important;bottom:0 !important;left:auto !important;width:min(85vw,300px) !important;height:100dvh !important;overflow-y:auto !important;z-index:9999 !important;pointer-events:auto !important;background:rgba(88,7,28,0.98) !important;border-left:1px solid rgba(255,255,255,0.10) !important;box-shadow:-12px 0 40px rgba(0,0,0,0.55) !important;padding:64px 20px 40px !important;display:none;flex-direction:column !important;gap:4px !important;-webkit-overflow-scrolling:touch !important;}
.menu-open .menu-panel,.menu-open nav.menu-panel,.menu-open .mobile-menu{display:flex !important;pointer-events:auto !important;}
.menu-panel a,nav.menu-panel a,.mobile-menu a{display:block !important;position:relative !important;z-index:10000 !important;pointer-events:auto !important;cursor:pointer !important;padding:14px 16px !important;min-height:48px !important;border-radius:12px !important;font-size:1.05rem !important;font-weight:700 !important;color:rgba(255,255,255,0.92) !important;text-decoration:none !important;-webkit-tap-highlight-color:rgba(255,255,255,0.10) !important;touch-action:manipulation !important;}
.menu-panel a:active{background:rgba(255,255,255,0.12) !important;}
.menu-panel a.menu-book,nav.menu-panel a.menu-book{background:linear-gradient(180deg,#D4AF37,#b8942e) !important;color:#1a0a0f !important;font-weight:900 !important;text-align:center !important;margin-top:8px !important;}
.menu-panel a.menu-cta,nav.menu-panel a.menu-cta{background:var(--burgundy) !important;color:rgba(255,242,245,0.95) !important;font-weight:900 !important;text-align:center !important;border:1px solid rgba(212,175,55,0.30) !important;}
.site-header{z-index:500 !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
.hero,.hero-bg,.hero-overlay,.hero-card,.hero-inner,section,main{isolation:auto !important;}

/* ============================================================
   v26 PATCH — coaching bg + menu panel (last in file)
   ============================================================ */

/* COACHING BG RESTORED */
body.coach-details { background: #f6f0f2 !important; position: relative !important; }
body.coach-details::before {
  content: '' !important; position: fixed !important; inset: 0 !important;
  z-index: 0 !important;
  background-image: url('assets/jah_coaching_live.png') !important;
  background-size: cover !important; background-position: center center !important;
  background-repeat: no-repeat !important; opacity: 0.35 !important;
  pointer-events: none !important; filter: none !important;
}
body.coach-details::after {
  content: '' !important; position: fixed !important; inset: 0 !important;
  z-index: 1 !important; background: rgba(246,240,242,0.25) !important;
  pointer-events: none !important;
}
body.coach-details header, body.coach-details main, body.coach-details footer {
  position: relative !important; z-index: 2 !important;
}
body.coach-details .card, body.coach-details .plan-card {
  background: rgba(255,255,255,0.75) !important; backdrop-filter: none !important;
}

/* MENU FINAL — last in file, no !important on base display:none */
body::before, body.menu-open::before, body.menu-open::after {
  display: none !important; content: none !important;
  pointer-events: none !important; background: none !important;
}
.menu-overlay {
  display: none; position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45); z-index: 8000; pointer-events: none;
}
.menu-open .menu-overlay { display: block !important; pointer-events: auto !important; }
.menu-panel, nav.menu-panel, .mobile-menu {
  position: fixed !important; top: 0 !important; right: 0 !important;
  bottom: 0 !important; left: auto !important;
  width: min(85vw, 300px) !important; height: 100dvh !important;
  overflow-y: auto !important; z-index: 9999 !important;
  pointer-events: auto !important;
  background: rgba(88,7,28,0.98) !important;
  border-left: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: -12px 0 40px rgba(0,0,0,0.55) !important;
  padding: 64px 20px 40px !important;
  display: none;
  flex-direction: column !important; gap: 4px !important;
  -webkit-overflow-scrolling: touch !important;
}
.menu-open .menu-panel, .menu-open nav.menu-panel, .menu-open .mobile-menu {
  display: flex !important; pointer-events: auto !important;
}
.menu-panel a, nav.menu-panel a, .mobile-menu a {
  display: block !important; position: relative !important;
  z-index: 10000 !important; pointer-events: auto !important;
  cursor: pointer !important; padding: 14px 16px !important;
  min-height: 48px !important; border-radius: 12px !important;
  font-size: 1.05rem !important; font-weight: 700 !important;
  color: rgba(255,255,255,0.92) !important; text-decoration: none !important;
  -webkit-tap-highlight-color: rgba(255,255,255,0.10) !important;
  touch-action: manipulation !important;
}
.menu-panel a:active { background: rgba(255,255,255,0.12) !important; }
.menu-panel a.menu-book, nav.menu-panel a.menu-book {
  background: linear-gradient(180deg,#D4AF37,#b8942e) !important;
  color: #1a0a0f !important; font-weight: 900 !important;
  text-align: center !important; margin-top: 8px !important;
}
.menu-panel a.menu-cta, nav.menu-panel a.menu-cta {
  background: var(--burgundy) !important;
  color: rgba(255,242,245,0.95) !important; font-weight: 900 !important;
  text-align: center !important; border: 1px solid rgba(212,175,55,0.30) !important;
}
.site-header { z-index: 500 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.hero, .hero-bg, .hero-overlay, .hero-card, .hero-inner, section, main { isolation: auto !important; }

/* v27 menu link styles - final */
.menu-panel a{display:block !important;padding:14px 16px !important;min-height:48px !important;border-radius:12px !important;font-size:1.05rem !important;font-weight:700 !important;color:rgba(255,255,255,0.92) !important;text-decoration:none !important;pointer-events:auto !important;cursor:pointer !important;touch-action:manipulation !important;}
.menu-panel a.menu-book{background:linear-gradient(180deg,#D4AF37,#b8942e) !important;color:#1a0a0f !important;font-weight:900 !important;text-align:center !important;margin-top:8px !important;}
.menu-panel a.menu-cta{background:var(--burgundy) !important;color:rgba(255,242,245,0.95) !important;font-weight:900 !important;text-align:center !important;border:1px solid rgba(212,175,55,0.30) !important;}
.site-header{z-index:500 !important;position:sticky !important;top:0 !important;}
.menu-btn{position:relative !important;z-index:501 !important;pointer-events:auto !important;cursor:pointer !important;}
/* v28 */.menu-btn span{margin:1px 0 !important;height:3px !important;width:18px !important;}
body.menu-open .menu-btn span:nth-child(1){transform:translateY(4px) rotate(45deg) !important;}
body.menu-open .menu-btn span:nth-child(2){opacity:0 !important;}
body.menu-open .menu-btn span:nth-child(3){transform:translateY(-4px) rotate(-45deg) !important;}