/* Havening Techniques — static site · Deep Ocean */
:root{
  --navy:#0D2440; --navy2:#123457; --teal:#177E89; --teal-d:#116470; --teal-l:#4FB3BF;
  --amber:#E9A94F; --ink:#1C2B3A; --soft:#54677D; --wash:#F2F7F9; --line:#DEE8EE; --bg:#FFFFFF;
}
*{margin:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--bg);color:var(--ink);line-height:1.7;font-size:16.5px}
h1,h2,h3,h4{font-family:Lora,Georgia,serif;line-height:1.18;color:var(--navy)}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.narrow{max-width:820px}
a{color:var(--teal)}
img{max-width:100%}

/* header */
header{position:sticky;top:0;background:var(--navy);z-index:50;box-shadow:0 2px 14px rgba(13,36,64,.25)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;flex-shrink:0}
.brand img{height:42px}
.brand b{font-family:Lora,Georgia,serif;font-size:1.1rem;font-weight:600;white-space:nowrap}
#nav-toggle{display:none;background:none;border:1.5px solid rgba(255,255,255,.4);color:#fff;border-radius:8px;padding:7px 12px;font-size:1rem;cursor:pointer}
nav ul{display:flex;gap:6px;list-style:none;align-items:center;flex-wrap:wrap}
nav li{position:relative}
nav a{color:#BCD0E2;text-decoration:none;font-weight:500;font-size:.93rem;padding:10px 12px;display:block;border-radius:8px}
nav li>a:hover,nav li>a:focus{color:#fff;background:rgba(255,255,255,.08)}
nav a.active{color:#fff}
nav .sub{display:none;position:absolute;top:100%;left:0;background:#fff;min-width:240px;border-radius:10px;box-shadow:0 14px 40px rgba(13,36,64,.22);padding:8px;flex-direction:column;gap:0}
nav li:hover .sub,nav li:focus-within .sub{display:flex}
nav .sub a{color:var(--ink);font-weight:500;border-radius:7px;padding:9px 12px}
nav .sub a:hover{background:var(--wash);color:var(--teal-d)}
nav .caret{font-size:.68em;opacity:.7;margin-left:3px}

/* hero */
.hero{background:linear-gradient(160deg,var(--navy) 0%,var(--navy2) 55%,#14526B 100%);color:#fff;padding:92px 0 108px;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:64px;background:var(--bg);clip-path:ellipse(78% 100% at 50% 100%)}
.kicker{letter-spacing:.2em;text-transform:uppercase;font-size:.74rem;color:var(--teal-l);font-weight:600}
.hero h1{font-size:clamp(2.2rem,5vw,3.4rem);margin:16px 0 20px;max-width:16em;color:#fff}
.hero p{max-width:44em;color:#C3D4E4;font-size:1.06rem}
.ctas{margin-top:30px}
.cta{display:inline-block;background:var(--amber);color:#2B1E07;padding:13px 28px;border-radius:8px;text-decoration:none;font-weight:600;margin:0 10px 10px 0}
.cta:hover{filter:brightness(1.06)}
.cta.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.cta.teal{background:var(--teal);color:#fff}

/* page header (subpages) */
.page-head{background:linear-gradient(160deg,var(--navy) 0%,var(--navy2) 70%,#14526B 100%);color:#fff;padding:56px 0 52px}
.page-head h1{color:#fff;font-size:clamp(1.9rem,4vw,2.7rem);margin-top:10px}
.page-head p.sub{color:#C3D4E4;max-width:46em;margin-top:12px;font-size:1.03rem}

/* content */
main.article{padding:56px 0 72px}
.article h2{font-size:1.55rem;margin:38px 0 14px}
.article h3{font-size:1.22rem;margin:30px 0 10px}
.article p{margin:0 0 16px;color:#2A3A4D}
.article ul,.article ol{margin:0 0 18px 22px;color:#2A3A4D}
.article li{margin-bottom:10px}
.article blockquote{border-left:3px solid var(--teal);background:var(--wash);padding:16px 20px;border-radius:0 10px 10px 0;margin:0 0 18px;color:#33465C}
.article .note{background:#FDF6EA;border:1px solid #F0DDB8;border-radius:10px;padding:16px 20px;margin:0 0 18px;color:#5B4A26;font-size:.97rem}
.article hr{border:0;border-top:1px solid var(--line);margin:34px 0}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;padding:16px 0 60px;margin-top:-30px;position:relative;z-index:2}
.card{background:#fff;border-radius:12px;padding:30px;box-shadow:0 10px 34px rgba(13,36,64,.10)}
.card h3{font-size:1.2rem;margin:0 0 10px}
.card p{color:var(--soft);font-size:.95rem;margin-bottom:12px}
.card a{font-weight:600;text-decoration:none;font-size:.94rem}
.card .n{width:42px;height:42px;border-radius:10px;background:var(--wash);display:flex;align-items:center;justify-content:center;color:var(--teal);font-weight:700;font-size:1.05rem;margin-bottom:16px;font-family:Lora,Georgia,serif}

/* bands / sections */
.band{background:var(--wash);padding:64px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band h2{font-size:1.8rem;margin-bottom:12px}
.band p{max-width:46em;color:var(--soft)}
.band .cta{margin-top:22px}
.section{padding:64px 0}
.section h2{font-size:1.8rem;margin-bottom:12px}
.section>.wrap>p{max-width:46em;color:var(--soft)}

/* faq */
.faq-item{border:1px solid var(--line);border-radius:12px;margin-bottom:14px;overflow:hidden}
.faq-item summary{cursor:pointer;padding:18px 22px;font-weight:600;font-family:Lora,Georgia,serif;font-size:1.05rem;color:var(--navy);list-style:none;position:relative;padding-right:48px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);color:var(--teal);font-size:1.4rem;font-weight:400}
.faq-item[open] summary:after{content:"–"}
.faq-item .a{padding:0 22px 18px;color:#2A3A4D}
.faq-item[open] summary{border-bottom:1px solid var(--line);margin-bottom:14px}

/* trainers */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:30px}
.trow{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px}
.trow b{font-family:Lora,Georgia,serif;font-size:1.04rem;color:var(--navy);font-weight:600}
.trow .tag{display:inline-block;background:var(--wash);color:var(--teal-d);font-size:.72rem;font-weight:600;border-radius:999px;padding:2px 10px;margin-left:8px;vertical-align:2px}
.trow .links{margin-top:4px;font-size:.9rem}
.trow .links a{text-decoration:none;font-weight:500}
.trow .links a:hover{text-decoration:underline}
.trow .links .sep{color:#B8C6D4;margin:0 7px}
.trow .nolink{color:#8DA0B4;font-size:.9rem}
.alpha-nav{margin-top:26px;display:flex;flex-wrap:wrap;gap:6px}
.alpha-nav a{display:inline-block;min-width:34px;text-align:center;padding:6px 8px;border:1px solid var(--line);border-radius:8px;text-decoration:none;font-weight:600;font-size:.9rem}
.alpha-nav a:hover{background:var(--wash)}
.letter{font-family:Lora,Georgia,serif;font-size:1.5rem;color:var(--teal);border-bottom:2px solid var(--line);padding-bottom:6px;margin:38px 0 4px}

/* leadership */
.person{display:grid;grid-template-columns:180px 1fr;gap:28px;margin:34px 0;align-items:start}
.person img{border-radius:12px;width:100%;box-shadow:0 8px 24px rgba(13,36,64,.15)}
.person h3{margin:0 0 4px}
.person .role{color:var(--teal-d);font-weight:600;font-size:.95rem;margin-bottom:12px}
@media(max-width:640px){.person{grid-template-columns:1fr}.person img{max-width:220px}}

/* steps */
.step{display:grid;grid-template-columns:56px 1fr;gap:20px;margin:26px 0}
.step .num{width:56px;height:56px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-family:Lora,Georgia,serif;font-size:1.3rem}
.step h3{margin:8px 0 8px}

/* footer */
footer{background:var(--navy);color:#8FA6BC;padding:52px 0 40px;font-size:.92rem;margin-top:40px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:36px}
footer img{height:44px;margin-bottom:14px}
footer a{color:#BCD0E2;text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
footer h4{color:#fff;font-size:.95rem;margin-bottom:12px;font-family:Inter,sans-serif;font-weight:600}
footer ul{list-style:none}
footer li{margin-bottom:8px}
.legal{border-top:1px solid rgba(255,255,255,.12);margin-top:36px;padding-top:22px;font-size:.84rem;color:#6E87A0}
@media(max-width:860px){footer .cols{grid-template-columns:1fr}}

/* mobile nav */
@media(max-width:920px){
  #nav-toggle{display:block}
  nav{display:none;width:100%}
  nav.open{display:block}
  nav ul{flex-direction:column;align-items:stretch;gap:0;padding-bottom:12px}
  nav .sub{display:flex;position:static;background:transparent;box-shadow:none;padding:0 0 4px 18px}
  nav .sub a{color:#9FB6CB}
  .nav{flex-wrap:wrap}
}

/* v2 additions */
.hero .welcome{color:#fff;font-size:1.05rem;margin-bottom:18px}
.hero .welcome a{color:#E9A94F}
.hero .small-note{color:#9FB6CB;font-size:.9rem;margin-top:22px;font-weight:600}
.selfimg{border-radius:14px;box-shadow:0 14px 40px rgba(13,36,64,.18);margin:14px 0 22px;width:100%}
.vidgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:28px;margin-top:28px}
.vid iframe{width:100%;aspect-ratio:16/10;border:0;border-radius:10px;background:#0D2440}
.vid p{margin-top:12px;font-size:.95rem;color:#54677D}
.pubs{list-style:none;margin:22px 0 0 0 !important;padding:0}
.pubs li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 20px;margin-bottom:12px}
.pubs a{font-size:1.02rem}
.band .pubs li{box-shadow:0 4px 14px rgba(13,36,64,.05)}
.trow .meta{color:#54677D;font-size:.85rem;margin-top:3px}
.article .center{text-align:center}