/* ==========================================================================
   Beyond Mountains Psychology — site stylesheet
   Brand: navy #233C4D · dusty blue #5B7B87 · sage #9CBFAA · gold #E8C190 · cream #F2E8DB
   Type:  Cinzel (display/labels) + Mulish (headings/body, Avenir substitute)

   HOW TO EDIT: colours and spacing all live in the :root block below.
   Change a value there and it updates everywhere on the site.
   ========================================================================== */

:root{
  /* --- brand palette --- */
  --navy:        #233C4D;   /* primary. body text, hero + footer ground */
  --navy-deep:   #1B2E3B;   /* footer, deepest ground */
  --navy-mid:    #2E4A5C;   /* ridgeline fill */
  --blue:        #5B7B87;   /* structure, meters, large headings */
  --link:        #2F5A6B;   /* links on light — darkened for contrast */
  --sage:        #9CBFAA;   /* fills and chips. NEVER text on light */
  --gold:        #E8C190;   /* text on navy; rules and accents on light */
  --gold-deep:   #8A6A32;   /* gold-family text that is legible on light */
  --cream:       #F2E8DB;   /* alternating bands; text on navy */
  --paper:       #FBF7F1;   /* page reading ground */

  /* --- derived neutrals --- */
  --ink:         #233C4D;
  --ink-2:       #45606D;
  --ink-3:       #7A8C94;
  --rule:        #E2D8CA;
  --rule-soft:   #EDE5D9;

  /* --- type --- */
  --display: "Cinzel", Georgia, "Times New Roman", serif;
  --body:    "Mulish", "Helvetica Neue", Arial, sans-serif;

  /* --- layout --- */
  --measure: 66ch;
  --wide:    1080px;
  --pad:     clamp(1.15rem, 4vw, 2.6rem);
}

/* --------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;line-height:1.16;text-wrap:balance;font-weight:700;letter-spacing:-.018em}
p,ul,ol{margin:0}
a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:.07em}
a:hover{color:var(--navy)}
a:focus-visible,button:focus-visible{outline:3px solid var(--link);outline-offset:3px;border-radius:2px}
strong{font-weight:700;color:var(--ink)}
:target{scroll-margin-top:5rem}

/* --------------------------------------------------------- shared bits */
.in{max-width:var(--wide);margin:0 auto;padding:0 var(--pad)}
.measure{max-width:var(--measure)}
.lbl{
  font-family:var(--display);
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--gold-deep);
}
.skip{
  position:absolute;left:-9999px;top:0;background:var(--navy);color:var(--cream);
  padding:.7rem 1.1rem;z-index:99;
}
.skip:focus{left:.6rem;top:.6rem}

/* ------------------------------------------------------------ lockup */
.lock{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:inherit}
.lock svg{width:2.2rem;height:2.2rem;flex:none}
.lock .wm{display:flex;flex-direction:column;line-height:1}
.lock .wm b{font-family:var(--display);font-size:1.05rem;letter-spacing:.045em;font-weight:600}
.lock .wm span{font-family:var(--display);font-size:.57rem;letter-spacing:.28em;margin-top:.26rem;opacity:.82}

/* --------------------------------------------------------------- nav */
.nav{background:var(--navy);color:var(--cream)}
.nav .in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem;padding-bottom:1rem;flex-wrap:wrap}
.nav a{color:var(--cream)}
.nav-links{display:flex;gap:1.35rem;flex-wrap:wrap;list-style:none;padding:0;margin:0}
.nav-links a{font-size:.85rem;color:#C6D2D8;text-decoration:none}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--gold)}
.btn{
  display:inline-block;background:var(--gold);color:var(--navy-deep);
  padding:.66rem 1.25rem;border-radius:99px;font-weight:700;font-size:.88rem;
  text-decoration:none;border:none;cursor:pointer;
}
.btn:hover{background:#F0D2A8;color:var(--navy-deep)}
.btn-sm{padding:.38rem .9rem;font-size:.8rem}
.btn-ghost{background:transparent;color:#C6D2D8;border:1px solid #4E6B79}
.btn-ghost:hover{background:rgba(232,193,144,.1);color:var(--gold)}
.btn-out{background:transparent;color:var(--link);border:1.5px solid var(--link)}
.btn-out:hover{background:var(--link);color:var(--paper)}

/* -------------------------------------------------------------- hero */
.hero{background:var(--navy);color:var(--cream);padding-top:clamp(2.6rem,7vw,4.6rem);overflow:hidden}
.hero .prov{
  font-family:var(--display);font-size:clamp(.92rem,2vw,1.12rem);
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem;
}
.hero h1{font-size:clamp(1.95rem,5vw,3.15rem);font-weight:300;letter-spacing:-.024em;color:var(--paper);max-width:21ch}
.hero .sub{margin-top:1.15rem;max-width:54ch;color:#BFCCD3;font-size:1.04rem}
.hero .sub em{color:var(--paper);font-style:normal;font-weight:700}
.actions{display:flex;gap:.75rem;margin-top:1.7rem;flex-wrap:wrap;align-items:center}
.hero .fine{margin-top:1.55rem;font-size:.8rem;color:#8CA0A9;letter-spacing:.02em}
.ridge{display:block;width:100%;height:clamp(54px,8vw,88px);margin-top:1.9rem}

/* page header (interior pages) */
.phead{background:var(--navy);color:var(--cream);padding:clamp(2.2rem,5.5vw,3.4rem) 0}
.phead h1{font-size:clamp(1.75rem,4.2vw,2.6rem);font-weight:300;color:var(--paper);max-width:24ch}
.phead .lbl{color:var(--gold)}
.phead p{margin-top:1rem;max-width:56ch;color:#BFCCD3;font-size:1.02rem}

/* ---------------------------------------------------------- sections */
.sec{padding:clamp(2.5rem,6vw,4rem) 0;border-top:1px solid var(--rule)}
.sec.cream{background:var(--cream)}
.sec.navy{background:var(--navy);color:var(--cream);border-top:none}
.sec.navy h2{color:var(--paper)}
.sec.navy .lbl{color:var(--gold)}
.sec.navy p{color:#BFCCD3}
.sec h2{font-size:clamp(1.45rem,3.4vw,2.1rem);max-width:24ch}
.prose{margin-top:1.1rem;max-width:var(--measure);display:flex;flex-direction:column;gap:1rem;color:var(--ink-2);font-size:1.01rem}
.prose h3{margin-top:.9rem;font-size:1.15rem;color:var(--ink)}
.prose ul,.prose ol{padding-left:1.3rem;display:flex;flex-direction:column;gap:.5rem}
.prose li::marker{color:var(--blue)}
.prose blockquote{
  margin:.3rem 0;padding:.9rem 1.15rem;background:var(--cream);
  border-left:3px solid var(--gold);font-size:.98rem;
}
.sec.cream .prose blockquote{background:var(--paper)}

/* quote grid */
.quotes{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:1.6rem;grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.quotes p{background:var(--paper);padding:1.15rem 1.2rem;font-size:1.02rem;line-height:1.45;color:var(--ink);margin:0}

/* rates */
.rates{margin-top:1.6rem;border:1px solid var(--rule);max-width:var(--measure);background:var(--paper)}
.rate{display:flex;justify-content:space-between;gap:1rem;padding:.9rem 1.15rem;border-bottom:1px solid var(--rule);align-items:baseline}
.rate:last-child{border-bottom:none}
.rate .n{font-size:.99rem;font-weight:700}
.rate .n small{display:block;color:var(--ink-3);font-size:.85rem;font-weight:400;margin-top:.1rem}
.rate .p{font-family:var(--body);font-size:1rem;font-weight:700;white-space:nowrap;color:var(--link);font-variant-numeric:tabular-nums}

/* twelve-session track */
.track{margin-top:1.7rem;display:flex;flex-direction:column;gap:1.3rem;max-width:var(--measure)}
.phase{display:grid;grid-template-columns:auto 1fr;gap:1.15rem;align-items:start}
.chips{display:flex;gap:.3rem}
.chip{width:1.7rem;height:1.7rem;display:grid;place-items:center;font-size:.72rem;background:var(--sage);color:var(--navy-deep);font-weight:700}
.chip.last{background:var(--navy);color:var(--gold)}
.phase .t{font-weight:700;font-size:1.05rem;margin-bottom:.2rem}
.phase .d{font-size:.95rem;color:var(--ink-2)}
@media(max-width:620px){.phase{grid-template-columns:1fr;gap:.55rem}}

/* stuck-point widget */
.sp{margin-top:1.7rem;border:1px solid var(--rule);background:var(--paper);max-width:var(--measure)}
.sp-tabs{display:flex;border-bottom:1px solid var(--rule)}
.sp-tab{
  flex:1;padding:.78rem .9rem;font-family:var(--display);font-size:.7rem;
  letter-spacing:.15em;text-transform:uppercase;background:transparent;border:none;
  cursor:pointer;color:var(--ink-3);font-weight:600;
}
.sp-tab[aria-selected="true"]{background:var(--navy);color:var(--gold)}
.sp-panel{padding:1.3rem;display:flex;flex-direction:column;gap:1.05rem}
.sp-row{display:grid;grid-template-columns:6.4rem 1fr;gap:.9rem;align-items:baseline}
.sp-row dt{font-family:var(--display);font-size:.67rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.sp-row dd{margin:0;font-size:1rem;color:var(--ink)}
.sp-row dd.belief{font-family:var(--display);font-size:1.14rem;color:var(--link);font-weight:500;line-height:1.35}
.meter{display:flex;align-items:center;gap:.75rem}
.meter .track2{flex:1;height:.55rem;background:var(--rule);position:relative;max-width:220px}
.meter .fill{position:absolute;left:0;top:0;bottom:0;background:var(--blue)}
.meter .num{font-size:.85rem;color:var(--ink-2);font-variant-numeric:tabular-nums;font-weight:700}
.sp-note{font-size:.92rem;color:var(--ink-2);border-top:1px solid var(--rule);padding-top:.9rem;line-height:1.6}
@media(max-width:560px){.sp-row{grid-template-columns:1fr;gap:.15rem}}

/* diagram */
.diagram{display:flex;gap:clamp(1.1rem,3.5vw,2.6rem);flex-wrap:wrap;margin-top:1.7rem}
.dpanel{flex:1 1 300px;min-width:min(300px,100%);display:flex;flex-direction:column;gap:.6rem}
.dpanel svg{width:100%;height:auto}
.dpanel .cap{font-family:var(--display);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--ink-3)}
.dpanel.real .cap{color:var(--link)}
.dpanel .dcap b{display:block;font-size:.98rem;color:var(--ink)}
.dpanel .dcap span{font-size:.89rem;color:var(--ink-3)}

/* cards */
.cards{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));margin-top:1.7rem}
.card{border-top:2px solid var(--rule);padding-top:1rem;display:flex;flex-direction:column;gap:.6rem}
.card.hi{border-top-color:var(--gold)}
.card h3{font-size:1.08rem}
.card p{font-size:.95rem;color:var(--ink-2)}

/* faq */
details{border-bottom:1px solid var(--rule);padding:.95rem 0;max-width:var(--measure)}
details summary{cursor:pointer;font-weight:700;font-size:1.01rem;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--blue);font-weight:400;font-size:1.3rem;line-height:1}
details[open] summary::after{content:"–"}
details .prose{margin-top:.8rem}

/* callout */
.note{
  border-left:3px solid var(--gold);background:var(--cream);
  padding:1.1rem 1.3rem;display:flex;flex-direction:column;gap:.6rem;
  max-width:var(--measure);margin-top:1.4rem;font-size:.98rem;
}
.sec.cream .note{background:var(--paper)}
.note .h{font-family:var(--display);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}

/* cta band */
.cta{background:var(--navy-mid);color:var(--cream);padding:clamp(2.2rem,5vw,3.2rem) 0;text-align:left}
.cta h2{color:var(--paper);font-size:clamp(1.35rem,3vw,1.85rem);max-width:26ch}
.cta p{margin-top:.8rem;max-width:52ch;color:#C6D2D8}

/* ------------------------------------------------------------ footer */
.foot{background:var(--navy-deep);color:#A6B7BF;padding:2.4rem 0 2rem;font-size:.87rem}
.foot .in{display:flex;flex-direction:column;gap:1rem}
.foot a{color:#C6D2D8}
.foot strong{color:#E4EAED}
.foot .lock{color:#E4EAED}
.foot-links{display:flex;gap:1.2rem;flex-wrap:wrap;list-style:none;padding:0;margin:0}
.foot-links a{font-size:.85rem;text-decoration:none}
.foot-links a:hover{color:var(--gold)}
.foot .crisis{border-top:1px solid #2C4553;padding-top:1rem;line-height:1.6}

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

/* ------------------------------------------------------------- print */
@media print{
  .nav,.cta,.actions,.btn{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .hero,.phead,.sec.navy,.foot{background:#fff;color:#000}
  .hero h1,.phead h1{color:#000}
}