/* ==========================================================================
   The Mental Immune System
   Brand: navy #133E5E · teal #9ABFBF · amber #E5A13B · Italiana + Mulish
   TYPE — five roles only. Never introduce a sixth.
     .display  Italiana, fluid          hero + section heads
     .label    Mulish 600, 11px, .24em  eyebrows, buttons, nav
     .lead     Mulish 200, 20px         opening paragraph of a section
     body      Mulish 300, 17px         everything else
     .fine     Mulish 300, 13.5px       notes, captions, footer
   ========================================================================== */
:root{
  --navy:#133E5E; --teal:#9ABFBF; --amber:#E5A13B;
  --abyss:#061523; --deep:#0B2233; --mid:#12304A;
  --ink:#fff; --muted:rgba(255,255,255,.62); --faint:rgba(255,255,255,.38);
  --rule:rgba(255,255,255,.13);
  --f:'Mulish',-apple-system,BlinkMacSystemFont,sans-serif;
  --d:'Italiana',Georgia,serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--abyss);color:var(--ink);font-family:var(--f);font-weight:300;
     font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(24px,5vw,56px)}

/* ---- the five type roles ---- */
.display{font-family:var(--d);font-weight:400;line-height:1.06;letter-spacing:.03em;
         font-size:clamp(2.4rem,6vw,4.6rem)}
h2.display{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:.4em}
.label{font-family:var(--f);font-size:11px;font-weight:600;letter-spacing:.24em;
       text-transform:uppercase;color:var(--teal);display:block;margin-bottom:20px}
.lead{font-size:clamp(18px,2vw,20px);font-weight:200;line-height:1.7;color:rgba(255,255,255,.88)}
p{margin-bottom:1.15em;color:var(--muted)}
p:last-child{margin-bottom:0}
.fine{font-size:13px;color:var(--faint);line-height:1.7}
strong{font-weight:500;color:#fff}
.rule{width:44px;height:1px;background:var(--amber);margin:24px 0 26px}
.rule.ctr{margin-inline:auto}

/* ---- buttons ---- */
.btn{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.24em;
     text-transform:uppercase;text-decoration:none;padding:17px 34px;border-radius:2px;
     transition:background .25s,color .25s,border-color .25s;border:1px solid transparent}
.solid{background:var(--amber);color:#08202f}
.solid:hover{background:#fff;color:#08202f}
.ghost{border-color:rgba(255,255,255,.35);color:#fff}
.ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btns.ctr{justify-content:center}

/* ---- nav ---- */
nav{position:fixed;top:0;left:0;right:0;z-index:100;height:64px;display:flex;
    align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,44px);
    background:linear-gradient(180deg,rgba(6,21,35,.80),rgba(6,21,35,.25) 70%,transparent);
    backdrop-filter:saturate(160%) blur(10px);transition:background .3s}
nav.solid-bar{background:rgba(6,21,35,.95);border-bottom:1px solid var(--rule)}
nav .logo img{height:34px;width:auto}
.navlinks{display:flex;align-items:center;gap:30px;list-style:none}
.navlinks a{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
            text-decoration:none;color:rgba(255,255,255,.78);transition:color .25s}
.navlinks a:hover{color:var(--teal)}
.navlinks a.btn{color:#08202f;padding:11px 22px}
.navlinks a.btn:hover{color:#08202f}
.burger{display:none;flex-direction:column;gap:5px;width:40px;height:40px;
        justify-content:center;background:none;border:0;cursor:pointer}
.burger span{display:block;height:1.5px;background:#fff;transition:transform .3s,opacity .2s}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobile{position:fixed;inset:64px 0 0;z-index:99;background:rgba(6,21,35,.98);
        backdrop-filter:blur(12px);padding:30px clamp(20px,6vw,40px);
        opacity:0;transform:translateY(-10px);pointer-events:none;transition:.28s}
.mobile.open{opacity:1;transform:none;pointer-events:auto}
.mobile ul{list-style:none}
.mobile li{border-bottom:1px solid var(--rule)}
.mobile a{display:block;padding:20px 2px;text-decoration:none;font-size:11px;font-weight:600;
          letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.mobile .btn{margin-top:28px;text-align:center;border-bottom:0}
@media(min-width:861px){.mobile{display:none}}

/* ---- hero ---- */
.hero{min-height:100svh;position:relative;display:flex;align-items:flex-end;overflow:hidden}
.hero .bg{position:absolute;inset:0;z-index:-3;
  background:url('/assets/hero-william.jpg') center 44%/cover no-repeat}
.hero .scrim{position:absolute;inset:0;z-index:-2;background:
  linear-gradient(95deg,rgba(6,21,35,.92) 0%,rgba(6,21,35,.66) 30%,rgba(6,21,35,.12) 58%,rgba(6,21,35,0) 78%),
  linear-gradient(180deg,rgba(6,21,35,.62) 0%,transparent 30%,transparent 58%,rgba(6,21,35,.88) 100%)}
.heroinner{width:100%;max-width:1180px;margin:0 auto;
           padding:0 clamp(24px,5vw,56px) clamp(72px,12vh,130px)}
.herotext{max-width:600px}
.herotext .lead{max-width:38ch}
@media(max-width:820px){
  .hero .bg{background-position:center 38%}
  .hero .scrim{background:linear-gradient(180deg,rgba(6,21,35,.55) 0%,transparent 26%,rgba(6,21,35,.90) 66%,rgba(6,21,35,.97) 100%)}
}

/* ---- stats band ---- */
.byline{text-align:center;font-size:11px;font-weight:600;letter-spacing:.24em;
        text-transform:uppercase;color:var(--faint);margin:0;padding:30px 20px 0}
.byline a{text-decoration:none;border-bottom:1px solid rgba(154,191,191,.4);transition:border-color .25s,color .25s}
.byline a:hover{border-bottom-color:var(--teal)}
.byline strong{color:var(--teal);font-weight:600}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);
       border-bottom:1px solid var(--rule);margin-top:26px}
.stat{padding:44px 26px;text-align:center;border-right:1px solid var(--rule);transition:background .35s}
.stat:hover{background:#0e2a3f}
.stat:last-child{border-right:0}
.stat .n{display:block;font-family:var(--f);font-weight:200;font-size:clamp(2.2rem,4.5vw,3.2rem);
         line-height:1;color:#fff;letter-spacing:.02em}
.stat .n u{text-decoration:none;font-size:.42em;letter-spacing:.08em;margin-left:2px}
.stat .l{display:block;margin-top:12px;font-size:11px;font-weight:600;letter-spacing:.22em;
         text-transform:uppercase;color:var(--faint)}
@media(max-width:700px){.stats{grid-template-columns:1fr}.stat{border-right:0;border-bottom:1px solid var(--rule);padding:30px 20px}.stat:last-child{border-bottom:0}}

/* ---- sections ---- */
section{padding:clamp(64px,8vh,96px) 0}
.deep{background:var(--deep)}
.mid{background:linear-gradient(180deg,var(--deep),var(--abyss))}
.center{text-align:center}
.center .lead{max-width:60ch;margin-inline:auto}
.sechead{max-width:60ch}
.center .sechead{margin-inline:auto}

/* ---- split ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,80px);align-items:center}
.split.even{align-items:stretch}
/* the photo must not contribute its own height, or it drives the row taller than
   the copy. Taking it out of flow makes the text column set the height and the
   image shrink to fit it exactly. */
.split.even .media{position:relative;min-height:280px}
.split.even .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split.rev .media{order:2}
.media img{border-radius:2px}

/* ---- problem cards ---- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:44px;
       background:var(--rule);border:1px solid var(--rule)}
.card{background:var(--abyss);padding:0 0 38px;transition:background .35s}
.card:hover{background:#0e2a3f}
.card img{width:100%;aspect-ratio:1/1;object-fit:cover;margin-bottom:26px;opacity:.94}
.card .no,.card h3,.card p{padding:0 30px}
.card .no{font-size:11px;font-weight:600;letter-spacing:.24em;color:var(--amber);display:block;margin-bottom:12px}

.card h3{font-family:var(--f);font-size:19px;font-weight:600;letter-spacing:.01em;
         margin-bottom:14px;line-height:1.15}
.deep .card{background:var(--deep)}
.deep .card:hover{background:#0e2a3f}

/* ---- video ---- */
.videoblock{max-width:940px;margin:0 auto}
.video{position:relative;aspect-ratio:16/9;background:#000;border-radius:2px;overflow:hidden;
       border:1px solid var(--rule)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- included ---- */
.incl{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:48px;
      background:var(--rule);border:1px solid var(--rule);overflow:hidden}
.incl .item{background:var(--deep);padding:34px 26px 110px;transition:background .35s}
.incl .item:hover{background:#0e2a3f}
.incl h3{font-size:15px;font-weight:600;letter-spacing:.04em;color:#fff;margin:18px 0 10px}
.incl p{font-size:15px;margin:0}
.incl-mock{position:relative;z-index:3;margin-top:-96px;pointer-events:none;
           display:flex;justify-content:center;align-items:flex-end;
           padding:0;font-size:0;line-height:0}
.incl-mock img{width:min(560px,72%);height:auto;display:block;margin:0;vertical-align:bottom;
               filter:drop-shadow(0 -18px 44px rgba(0,0,0,.55))}
@media(max-width:700px){.incl-mock{margin-top:-24px}.incl-mock img{width:88%}}
.motif{width:46px;height:46px;display:block}
.motif *{stroke:var(--amber);fill:none;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.motif .spin{transform-origin:23px 23px;animation:turn 14s linear infinite}
.motif .pulse{animation:pulse 3.4s ease-in-out infinite}
.motif .pulse2{animation:pulse 3.4s ease-in-out .6s infinite}
.motif .pulse3{animation:pulse 3.4s ease-in-out 1.2s infinite}
.motif .draw{stroke-dasharray:70;stroke-dashoffset:70;animation:draw 3.6s ease-in-out infinite}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes draw{0%{stroke-dashoffset:70}55%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
@media(prefers-reduced-motion:reduce){.motif *{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}}
@media(max-width:900px){.incl{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.incl{grid-template-columns:1fr}}

/* ---- quotes ---- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px);margin-top:60px}
.quote{border-left:1px solid var(--rule);padding-left:28px;display:flex;flex-direction:column}
.quote p{font-size:15px;line-height:1.75;color:rgba(255,255,255,.78);font-style:italic}
.quote .who{margin-top:auto;padding-top:20px}
.quote .who b{display:block;font-weight:600;font-size:13px;letter-spacing:.06em;color:#fff;font-style:normal}
.quote .who span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.quote .who a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.18);transition:color .25s,border-color .25s}
.quote .who a:hover{color:var(--teal);border-bottom-color:var(--teal)}

/* ---- offer ---- */
.offer{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,80px);align-items:center;
       border:1px solid var(--rule);padding:clamp(32px,5vw,64px);background:rgba(255,255,255,.02)}
.price{font-family:var(--f);font-weight:200;font-size:clamp(3.4rem,7vw,5rem);line-height:1;color:#fff}
.price sub{font-family:var(--f);font-size:15px;font-weight:300;letter-spacing:.06em;
           vertical-align:baseline;color:var(--muted);margin-left:8px}
.offer ul{list-style:none;margin:26px 0 0}
.offer li{padding:13px 0;border-bottom:1px solid var(--rule);font-size:15px;color:var(--muted)}
.offer li:last-child{border-bottom:0}
.offer li::before{content:"—";color:var(--amber);margin-right:12px}

/* ---- footer ---- */
footer{background:var(--abyss);border-top:1px solid var(--rule);padding:64px 0 34px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px;padding-bottom:46px}
.fgrid img{height:40px;margin-bottom:20px}
.fgrid h4{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
          color:var(--teal);margin-bottom:18px}
.fgrid ul{list-style:none;display:grid;gap:12px}
.fgrid a{font-size:15px;color:var(--muted);text-decoration:none;transition:color .25s}
.fgrid a:hover{color:#fff}
.fbot{border-top:1px solid var(--rule);padding-top:26px;display:flex;flex-wrap:wrap;
      gap:14px;justify-content:space-between;align-items:center}
.socials{display:flex;gap:12px}
.soc{width:42px;height:42px;border:1px solid var(--rule);border-radius:2px;
     display:flex;align-items:center;justify-content:center;
     transition:border-color .25s,background .25s}
.soc:hover{border-color:var(--teal);background:rgba(154,191,191,.10)}
.soc svg{width:19px;height:19px}
.soc svg *{fill:none;stroke:rgba(255,255,255,.72);stroke-width:1.5;
           stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s,fill .25s}
.soc svg .dot,.soc svg .fill,.soc svg path:not(.fill){}
.soc svg path{fill:rgba(255,255,255,.72);stroke:none}
.soc svg .fill{fill:rgba(255,255,255,.72);stroke:none}
.soc svg .dot{fill:rgba(255,255,255,.72);stroke:none}
.soc:hover svg *{stroke:var(--teal)}
.soc:hover svg path,.soc:hover svg .fill,.soc:hover svg .dot{fill:var(--teal)}

@media(max-width:860px){
  .navlinks{display:none}.burger{display:flex}
  .split,.cards,.incl,.quotes,.offer,.fgrid{grid-template-columns:1fr}
  .split.rev .media{order:-1}
  .cards{gap:1px}
}

/* ---- interior page header ---- */
.pagehead{position:relative;padding:clamp(150px,22vh,220px) 0 clamp(56px,8vh,84px);overflow:hidden}
.pagehead .bg{position:absolute;inset:0;z-index:-3;background-size:cover;background-position:center}
.pagehead .scrim{position:absolute;inset:0;z-index:-2;background:
  linear-gradient(180deg,rgba(6,21,35,.86) 0%,rgba(6,21,35,.62) 45%,rgba(6,21,35,.94) 100%)}
.pagehead .display{font-size:clamp(2.2rem,5.5vw,4rem)}
.pagehead .lead{max-width:52ch}

/* ---- figure block ---- */
.figs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);
      border:1px solid var(--rule);margin-top:44px}
.fig{background:var(--deep);padding:38px 32px;transition:background .35s}
.fig:hover{background:#0e2a3f}
.fig .n{display:block;font-weight:200;font-size:clamp(2.2rem,4.5vw,3.2rem);line-height:1;color:#fff}
.fig .n u{text-decoration:none;font-size:.42em;letter-spacing:.06em;margin-left:3px}
.fig p{margin:14px 0 0;font-size:15px}
.fig cite{display:block;margin-top:14px;font-style:normal;font-size:11px;letter-spacing:.14em;
          text-transform:uppercase;color:var(--faint)}
.fig cite a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.2)}
.fig cite a:hover{color:var(--teal);border-bottom-color:var(--teal)}
@media(max-width:700px){.figs{grid-template-columns:1fr}}

/* ---- numbered steps ---- */
.steps{counter-reset:s;margin-top:44px;border-top:1px solid var(--rule)}
.step{counter-increment:s;display:grid;grid-template-columns:74px 1fr;gap:clamp(18px,3vw,36px);
      padding:30px 0;border-bottom:1px solid var(--rule);transition:background .35s}
.step:hover{background:rgba(255,255,255,.025)}
.step::before{content:counter(s,decimal-leading-zero);font-size:11px;font-weight:600;
              letter-spacing:.2em;color:var(--amber);padding-top:6px}
.step h3{font-size:17px;font-weight:600;color:#fff;margin-bottom:6px}
.step p{margin:0;font-size:15px}
@media(max-width:560px){.step{grid-template-columns:1fr;gap:8px}}