/* Gaydio Academy — one stylesheet, no build step.
 *
 * Effra @font-face block, then the approved mockup's CSS verbatim, then the
 * additions the extracted markup needs (see the banner near the bottom).
 */

@font-face{font-family:'Effra';font-weight:300;font-style:normal;font-display:swap;src:url('../fonts/effra/effra-300.woff2') format('woff2')}
@font-face{font-family:'Effra';font-weight:300;font-style:italic;font-display:swap;src:url('../fonts/effra/effra-300-italic.woff2') format('woff2')}
@font-face{font-family:'Effra';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/effra/effra-400.woff2') format('woff2')}
@font-face{font-family:'Effra';font-weight:400;font-style:italic;font-display:swap;src:url('../fonts/effra/effra-400-italic.woff2') format('woff2')}
@font-face{font-family:'Effra';font-weight:500;font-style:normal;font-display:swap;src:url('../fonts/effra/effra-500.woff2') format('woff2')}
@font-face{font-family:'Effra';font-weight:500;font-style:italic;font-display:swap;src:url('../fonts/effra/effra-500-italic.woff2') format('woff2')}
@font-face{font-family:'Effra';font-weight:700;font-style:normal;font-display:swap;src:url('../fonts/effra/effra-700.woff2') format('woff2')}
@font-face{font-family:'Effra';font-weight:700;font-style:italic;font-display:swap;src:url('../fonts/effra/effra-700-italic.woff2') format('woff2')}
@font-face{font-family:'Effra';font-weight:900;font-style:normal;font-display:swap;src:url('../fonts/effra/effra-900.woff2') format('woff2')}
@font-face{font-family:'Effra';font-weight:900;font-style:italic;font-display:swap;src:url('../fonts/effra/effra-900-italic.woff2') format('woff2')}

:root{--p:#09475D;--s:#008577;--a:#00C9A7;--light:#F4F9FB;--white:#fff;--dark:#061318;--text:#1a3340;--muted:#6b8fa0;--bdr:#dce8ed;--gap:clamp(60px,7vw,110px);--r:22px}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Effra',sans-serif;color:var(--text);background:var(--white);overflow-x:hidden}
h1,h2,h3,h4,h5{font-family:'Effra',sans-serif;line-height:1.1;font-weight:900}
a{text-decoration:none;color:inherit}
.page{display:none}.page.active{display:block}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(14px,3.5vw,56px);height:68px;background:rgba(9,71,93,0);transition:background .4s,box-shadow .4s}
nav.scrolled,nav.solid{background:rgba(9,71,93,0.97);backdrop-filter:blur(18px);box-shadow:0 2px 28px rgba(0,0,0,.2)}
.nav-logo{cursor:pointer;display:flex;align-items:center}
.nav-logo img{height:36px;width:auto}
.nav-links{display:flex;align-items:center;gap:4px;list-style:none}
.nav-links>li{position:relative}
.nav-links>li>a{color:rgba(255,255,255,.82);font-size:13.5px;font-weight:500;padding:8px 12px;border-radius:8px;cursor:pointer;transition:color .2s,background .2s;display:flex;align-items:center;gap:4px;background:none;border:none;font-family:'Effra',sans-serif}
.nav-links>li>a:hover,.nav-links>li>a.active-link{color:white;background:rgba(255,255,255,.08)}
.dropdown{display:none;position:absolute;top:calc(100% + 4px);left:0;background:rgba(9,71,93,0.98);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:8px;flex-direction:column;gap:2px;min-width:210px;box-shadow:0 12px 40px rgba(0,0,0,.3);z-index:200}
.dropdown.open{display:flex}
.dropdown a{color:rgba(255,255,255,.75);font-size:13px;padding:9px 14px;border-radius:8px;cursor:pointer;transition:all .2s;white-space:nowrap}
.dropdown a:hover{color:white;background:rgba(255,255,255,.1)}
.nav-cta{background:var(--s)!important;color:white!important;padding:9px 20px!important;border-radius:50px!important;font-weight:600!important;font-size:13px!important;transition:transform .2s,box-shadow .2s!important}
.nav-cta:hover{transform:translateY(-1px)!important;box-shadow:0 6px 20px rgba(0,133,119,.4)!important}
.chevron{font-size:10px;opacity:.6}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}
.hamburger span{width:22px;height:2px;background:white;border-radius:2px;transition:all .3s}
.mobile-nav{display:none;position:fixed;top:68px;left:0;right:0;z-index:999;background:rgba(9,71,93,.98);backdrop-filter:blur(18px);padding:16px clamp(14px,3.5vw,56px) 28px;flex-direction:column;gap:2px;max-height:80vh;overflow-y:auto}
.mobile-nav.open{display:flex}
.mobile-nav a{color:rgba(255,255,255,.78);font-size:15px;font-weight:500;padding:11px 12px;border-radius:8px;cursor:pointer;transition:all .2s}
.mobile-nav a:hover{color:white;background:rgba(255,255,255,.08)}
.mob-section{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--a);padding:12px 12px 4px;margin-top:4px}

/* BUTTONS */
.btn{background:var(--s);color:white;padding:14px 32px;border-radius:50px;font-family:'Effra',sans-serif;font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:transform .2s,box-shadow .2s;border:none}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,133,119,.4)}
.btn-out{background:transparent;border:2px solid var(--p);color:var(--p);padding:12px 28px;border-radius:50px;font-family:'Effra',sans-serif;font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:all .2s}
.btn-out:hover{background:var(--p);color:white}
.btn-ghost{background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.3);color:white;padding:14px 32px;border-radius:50px;font-family:'Effra',sans-serif;font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;backdrop-filter:blur(8px);transition:all .2s;border-bottom-color:rgba(255,255,255,.3)}
.btn-ghost:hover{background:rgba(255,255,255,.18)}

/* SECTION COMMONS */
.lbl{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--s);margin-bottom:16px}
.lbl::before{content:'';width:24px;height:2px;background:var(--s);border-radius:2px}
.ttl{font-size:clamp(32px,4.2vw,56px);color:var(--p);letter-spacing:-1.5px;line-height:1.05;max-width:660px;margin-bottom:14px}
.ttl em{font-style:normal;color:var(--s)}
.body-txt{font-size:16px;line-height:1.78;color:var(--muted);max-width:560px}
.inner{max-width:1240px;margin:0 auto;padding:0 clamp(14px,4vw,60px)}

/* REVEAL */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s}
.rv.vis{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}

/* PAGE HERO */
.ph{background:var(--p);padding:clamp(100px,11vw,140px) clamp(14px,4vw,60px) clamp(56px,6vw,80px);position:relative;overflow:hidden}
.ph::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 0,rgba(0,201,167,.15),transparent 55%)}
.ph .lbl{color:var(--a)}
.ph h1{font-size:clamp(36px,5.5vw,72px);color:white;letter-spacing:-2px;margin-bottom:14px}
.ph h1 em{font-style:normal;color:var(--a)}
.ph p{color:rgba(255,255,255,.65);font-size:16px;max-width:540px;line-height:1.65}

/* CTA SECTION */
.cta-sec{background:var(--p);text-align:center;padding:clamp(70px,9vw,120px) clamp(14px,4vw,60px);position:relative;overflow:hidden}
.cta-sec::before{content:'';position:absolute;width:600px;height:600px;border:60px solid rgba(0,201,167,.05);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}
.cta-sec h2{font-size:clamp(34px,5vw,68px);color:white;letter-spacing:-2px;margin-bottom:16px;position:relative;z-index:1}
.cta-sec h2 em{font-style:normal;color:var(--a)}
.cta-sec>p{color:rgba(255,255,255,.6);font-size:16px;max-width:460px;margin:0 auto 32px;line-height:1.65;position:relative;z-index:1}
.cta-note{color:rgba(255,255,255,.3);font-size:12px;margin-top:16px;position:relative;z-index:1}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}

/* FOOTER */
footer{background:#09475D;padding:52px clamp(14px,4vw,60px) 26px;color:rgba(255,255,255,.6)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:40px}
.foot-brand p{font-size:13px;line-height:1.75;margin-top:12px;max-width:270px}
.foot-tagline{margin-top:16px;font-family:'Effra',sans-serif;font-size:11px;color:var(--a);letter-spacing:1.2px;font-weight:600}
.foot-brand img{height:32px;width:auto;margin-bottom:0}
.foot-col h5{font-size:11px;color:rgba(255,255,255,.6);letter-spacing:.5px;margin-bottom:14px;text-transform:uppercase}
.foot-col ul{list-style:none}
.foot-col ul li{margin-bottom:8px}
.foot-col ul a{color:rgba(255,255,255,.55);font-size:13px;cursor:pointer;transition:color .2s}
.foot-col ul a:hover{color:rgba(255,255,255,.95)}
.foot-btm{border-top:1px solid rgba(255,255,255,.15);padding-top:20px;display:flex;justify-content:space-between;align-items:center;font-size:11px;flex-wrap:wrap;gap:8px}
.foot-links{display:flex;gap:16px}
.foot-links a{color:rgba(255,255,255,.5);font-size:11px;cursor:pointer;transition:color .2s}
.foot-links a:hover{color:rgba(255,255,255,.6)}

/* COURSE CARDS */
.cc{background:white;border-radius:16px;overflow:hidden;border:1.5px solid var(--bdr);transition:transform .3s,box-shadow .3s,border-color .3s;display:flex;flex-direction:column;cursor:pointer}
.cc:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(9,71,93,.1);border-color:rgba(0,133,119,.3)}
.cc-img{height:160px;display:flex;align-items:center;justify-content:center;font-size:44px;position:relative;overflow:hidden}
.ci1{background:#09475D}.ci2{background:#008577}.ci3{background:#08374a}.ci4{background:#005f50}.ci5{background:#003d4d}.ci6{background:#007a6a}
.free-tag{position:absolute;top:12px;left:12px;background:var(--s);color:#042a1e;padding:3px 10px;border-radius:50px;font-size:10px;font-weight:700;letter-spacing:.5px}
.lvl-tag{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px);color:white;padding:3px 10px;border-radius:50px;font-size:10px;font-weight:600}
.cc-body{padding:22px;flex:1;display:flex;flex-direction:column}
.cc-meta{display:flex;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.cc-meta span{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);font-weight:500}
.cc h3{font-size:17px;color:var(--p);margin-bottom:8px;letter-spacing:-.3px}
.cc p{font-size:13px;color:var(--muted);line-height:1.65;flex:1;margin-bottom:18px}
.cc-cta{display:inline-flex;align-items:center;gap:6px;color:var(--s);font-weight:700;font-family:'Effra',sans-serif;font-size:12px;transition:gap .2s}
.cc:hover .cc-cta{gap:12px}

/* CHIPS (FILTER) */
.chip-bar{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:6px 15px;border-radius:50px;border:1.5px solid var(--bdr);background:white;font-family:'Effra',sans-serif;font-size:12px;font-weight:500;color:var(--muted);cursor:pointer;transition:all .2s}
.chip.on,.chip:hover{background:var(--p);border-color:var(--p);color:white}

/* FORM ELEMENTS */
.fg{margin-bottom:16px}
.fg label{display:block;font-size:11px;font-weight:700;color:var(--p);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px}
.fc{width:100%;padding:12px 14px;border:1.5px solid var(--bdr);border-radius:10px;font-family:'Effra',sans-serif;font-size:14px;color:var(--text);background:white;transition:border-color .2s;outline:none}
.fc:focus{border-color:var(--s)}
textarea.fc{height:90px;resize:vertical}
select.fc{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b8fa0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}

/* TESTIMONIAL SLIDER */
.t-slider{position:relative;overflow:hidden}
.t-track{display:flex;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.t-slide{min-width:100%;padding:0 4px}
.t-dots{display:flex;justify-content:center;gap:8px;margin-top:24px}
.t-dot{width:8px;height:8px;border-radius:50%;background:var(--bdr);cursor:pointer;transition:all .3s}
.t-dot.on{background:var(--s);width:24px;border-radius:4px}
.t-card{background:white;border-radius:18px;padding:36px;border:1.5px solid var(--bdr);max-width:740px;margin:0 auto;position:relative}
.t-card::before{content:'"';position:absolute;top:16px;right:22px;font-family:'Effra',sans-serif;font-size:64px;color:var(--a);opacity:.12;line-height:1}
.t-card p{font-size:15px;line-height:1.8;color:var(--text);font-style:italic;margin-bottom:24px}
.t-author{display:flex;align-items:center;gap:14px}
.av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Effra',sans-serif;font-weight:800;font-size:16px;color:white;flex-shrink:0;background:var(--p)}
.av img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.av2{background:var(--s)}
.av3{background:#062f3f}
.av4{background:#005f50}
.author-name{font-family:'Effra',sans-serif;font-weight:700;font-size:13px;color:var(--p)}
.author-role{font-size:11px;color:var(--muted);margin-top:2px}

/* PODCAST SLIDER (HOME) */
.pod-slider{position:relative;overflow:hidden;margin-top:44px}
.pod-track{display:flex;gap:20px;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.pod-card{min-width:280px;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.1);border-radius:16px;padding:20px;flex-shrink:0;cursor:pointer;transition:background .3s,transform .3s}
.pod-card:hover{background:rgba(255,255,255,.13);transform:translateY(-3px)}
.pod-art{aspect-ratio:1;border-radius:10px;margin-bottom:14px;display:flex;align-items:center;justify-content:center;font-size:34px;position:relative;overflow:hidden}
.pa1{background:#008577}.pa2{background:#003d4d}.pa3{background:#005f50}.pa4{background:#006a58}
.play-c{position:absolute;bottom:8px;right:8px;width:28px;height:28px;background:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--p)}
.pod-card h4{font-size:14px;color:white;margin-bottom:4px;letter-spacing:-.2px}
.pod-card p{font-size:12px;color:rgba(255,255,255,.5);line-height:1.5}
.slider-nav{display:flex;gap:10px;margin-top:24px;justify-content:center}
.sl-btn{width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:white;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.sl-btn:hover{background:rgba(255,255,255,.2)}

/* PARTNER TICKER */
.ticker-wrap{overflow:hidden;padding:28px 0;background:white;border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr)}
.ticker-track{display:flex;gap:0;animation:tickerAnim 28s linear infinite;width:max-content}
.ticker-track:hover{animation-play-state:paused}
.ticker-item{display:flex;align-items:center;padding:0 36px;white-space:nowrap;font-family:'Effra',sans-serif;font-weight:700;font-size:14px;color:var(--p);opacity:.55;transition:opacity .2s;border-right:1px solid var(--bdr)}
.ticker-item:hover{opacity:1}
.ticker-item span{margin-right:10px;font-size:18px}
@keyframes tickerAnim{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* STATS COUNTER */
.stats-bar{background:var(--p);padding:clamp(36px,5vw,54px) clamp(14px,4vw,60px)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);max-width:1240px;margin:0 auto;gap:2px}
.s-item{text-align:center;padding:26px 16px}
.s-item:not(:last-child){border-right:1px solid rgba(255,255,255,.12)}
.s-num{font-family:'Effra',sans-serif;font-weight:800;font-size:clamp(34px,4vw,58px);color:white;letter-spacing:-2px;line-height:1;margin-bottom:5px}
.s-num span{color:var(--a)}
.s-lbl{font-size:12px;color:rgba(255,255,255,.5)}

/* HERO */
.hero{position:relative;height:100vh;min-height:580px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.hero-bg{position:absolute;inset:0;background:#09475D}

.hero-rings{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.ring{position:absolute;border:1.5px solid rgba(0,201,167,.5);border-radius:50%;animation:pR 5s cubic-bezier(.2,.6,.4,1) infinite}
.r1{width:160px;height:160px;animation-delay:0s}.r2{width:340px;height:340px;animation-delay:1.2s}.r3{width:560px;height:560px;animation-delay:2.4s}.r4{width:820px;height:820px;animation-delay:3.6s}
@keyframes pR{0%{transform:scale(.85);opacity:0}40%{opacity:.16}100%{transform:scale(1.15);opacity:0}}
.hero-ov{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(9,71,93,.3) 0%,rgba(9,71,93,.55) 50%,rgba(9,71,93,.88) 100%)}
.hero-content{position:relative;z-index:2;text-align:center;padding:0 20px;max-width:900px}
.hero-content .lbl{color:var(--a);justify-content:center;animation:fU 1s .1s ease both}
.hero h1{font-size:clamp(44px,8.5vw,106px);color:white;letter-spacing:-2px;line-height:.93;margin-bottom:26px;animation:fU 1s .2s ease both}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--a),#6eecd8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:clamp(14px,1.7vw,18px);color:rgba(255,255,255,.7);max-width:520px;margin:0 auto 36px;line-height:1.65;font-weight:300;animation:fU 1s .3s ease both}
.hero-acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;animation:fU 1s .4s ease both}
@keyframes fU{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}

/* STORY */
.story-wrap{background:var(--light);border-radius:var(--r);margin:0 clamp(8px,2vw,36px);padding:clamp(48px,7vw,86px) clamp(32px,5vw,80px)}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.story-vis{border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:var(--p);display:flex;align-items:center;justify-content:center;position:relative}
.story-vis::before{content:'';position:absolute;width:200px;height:200px;border:56px solid rgba(0,201,167,.1);border-radius:50%;top:-56px;right:-56px}
.story-vis::after{content:'';position:absolute;width:100px;height:100px;background:rgba(0,201,167,.08);border-radius:50%;bottom:16px;left:16px}
.story-vis-inner{text-align:center;color:white;position:relative;z-index:1}
.big-icon{font-size:68px;margin-bottom:12px;display:block}
.story-vis-inner p{font-family:'Effra',sans-serif;font-weight:700;font-size:16px;opacity:.6}
.take-parts{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.tp-item{display:flex;align-items:flex-start;gap:11px;font-size:15px;color:var(--text);line-height:1.6}
.tp-item::before{content:'✓';width:20px;height:20px;background:var(--s);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;color:white;font-weight:700;flex-shrink:0;margin-top:2px}

/* PROJECT CARDS */
.prj-card{border-radius:16px;overflow:hidden;position:relative;min-height:200px;display:flex;align-items:flex-end;padding:20px;cursor:pointer;transition:transform .3s}
.prj-card:hover{transform:scale(1.02)}
.prj-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:48px}
.pb1{background:#09475D}.pb2{background:#008577}.pb3{background:#062f3f}.pb4{background:#005f50}.pb5{background:#003d4d}.pb6{background:#006a58}
.prj-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(9,71,93,.92) 0%,transparent 60%)}
.prj-cnt{position:relative;z-index:1}
.ptag{display:inline-block;background:rgba(0,201,167,.2);border:1px solid rgba(0,201,167,.4);color:var(--a);padding:3px 9px;border-radius:50px;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;margin-bottom:6px}
.prj-card h3{color:white;font-size:16px;letter-spacing:-.3px}
.prj-card p{color:rgba(255,255,255,.58);font-size:12px;margin-top:3px}

/* PDF CARDS */
.pdf-card{background:white;border-radius:14px;border:1.5px solid var(--bdr);padding:24px;display:flex;align-items:center;gap:16px;cursor:pointer;transition:all .2s}
.pdf-card:hover{border-color:var(--s);box-shadow:0 8px 24px rgba(0,133,119,.12);transform:translateY(-2px)}
.pdf-icon{width:48px;height:48px;border-radius:12px;background:var(--p);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.pdf-info h4{font-size:15px;color:var(--p);margin-bottom:4px}
.pdf-info p{font-size:12px;color:var(--muted)}
.pdf-dl{margin-left:auto;color:var(--s);font-size:18px}

/* WORK RADIO CARDS */
.radio-co{background:white;border-radius:14px;border:1.5px solid var(--bdr);padding:20px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all .2s;text-decoration:none}
.radio-co:hover{border-color:var(--s);box-shadow:0 6px 20px rgba(0,133,119,.1);transform:translateY(-2px)}
.radio-co-logo{width:60px;height:40px;border-radius:8px;background:var(--light);display:flex;align-items:center;justify-content:center;font-family:'Effra',sans-serif;font-weight:800;font-size:11px;color:var(--p);flex-shrink:0;text-align:center;padding:4px}
.radio-co-info h4{font-size:14px;color:var(--p);margin-bottom:3px}
.radio-co-info p{font-size:12px;color:var(--muted);line-height:1.5}
.radio-co-arr{margin-left:auto;color:var(--s);font-size:14px}

/* FAQ */
.faq-item{border-bottom:1px solid var(--bdr)}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:18px 0;cursor:pointer;font-family:'Effra',sans-serif;font-weight:700;font-size:16px;color:var(--p);gap:16px}
.faq-q .ico{font-size:12px;color:var(--s);transition:transform .3s;flex-shrink:0}
.faq-item.open .faq-q .ico{transform:rotate(180deg)}
.faq-a{display:none;padding:0 0 18px;font-size:15px;color:var(--muted);line-height:1.75}
.faq-item.open .faq-a{display:block}

/* VOLUNTEER REASONS */
.vol-r{display:flex;align-items:flex-start;gap:14px;padding:20px;background:white;border-radius:14px;border:1.5px solid var(--bdr)}
.vol-ico{width:42px;height:42px;border-radius:11px;background:var(--s);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.vol-r h4{font-size:14px;color:var(--p);margin-bottom:4px}
.vol-r p{font-size:12px;color:var(--muted);line-height:1.55}

/* TEAM */
.team-card{background:var(--light);border-radius:16px;padding:24px;display:flex;align-items:center;gap:16px}
.team-av{width:64px;height:64px;border-radius:50%;background:var(--p);display:flex;align-items:center;justify-content:center;font-family:'Effra',sans-serif;font-weight:800;font-size:22px;color:white;flex-shrink:0}
.team-av img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.team-info h4{font-size:16px;color:var(--p);margin-bottom:2px}
.team-info .role{font-size:13px;color:var(--s);font-weight:600;margin-bottom:2px}
.team-info .pronouns{font-size:11px;color:var(--muted)}

/* WORK-WITH-US */
.wwu-card{background:white;border-radius:18px;border:1.5px solid var(--bdr);padding:28px;transition:box-shadow .3s,border-color .3s}
.wwu-card:hover{border-color:rgba(0,133,119,.3);box-shadow:0 12px 32px rgba(9,71,93,.09)}
.wwu-icon{width:52px;height:52px;border-radius:14px;background:var(--p);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px}
.wwu-card h3{font-size:18px;color:var(--p);margin-bottom:8px;letter-spacing:-.3px}
.wwu-card p{font-size:14px;color:var(--muted);line-height:1.65}

/* ALUMNI PAGE */
.alum-card{background:white;border-radius:18px;padding:28px;border:1.5px solid var(--bdr);position:relative;transition:box-shadow .3s;display:flex;flex-direction:column}
.alum-card::before{content:'"';position:absolute;top:16px;right:18px;font-family:'Effra',sans-serif;font-size:58px;color:var(--a);opacity:.1;line-height:1}
.alum-card p{font-size:14px;line-height:1.78;color:var(--text);font-style:italic;margin-bottom:20px;flex:1}
.alum-card:hover{box-shadow:0 12px 32px rgba(9,71,93,.09)}
.circle-av{width:56px;height:56px;border-radius:50%;background:var(--p);display:flex;align-items:center;justify-content:center;font-family:'Effra',sans-serif;font-weight:800;font-size:18px;color:white;border:3px solid var(--s)}
.read-more-btn{color:var(--s);font-weight:700;font-size:13px;font-family:'Effra',sans-serif;cursor:pointer;background:none;border:none;display:inline-flex;align-items:center;gap:6px;transition:gap .2s;margin-top:12px;padding:0}
.read-more-btn:hover{gap:12px}

/* NEWSLETTER */
.nl-box{background:var(--p);border-radius:18px;padding:32px;color:white}
.nl-box h3{font-size:20px;margin-bottom:10px;letter-spacing:-.4px}
.nl-box p{color:rgba(255,255,255,.6);font-size:14px;margin-bottom:20px;line-height:1.6}
.nl-row{display:flex;gap:10px;flex-wrap:wrap}
.nl-row input{flex:1;padding:12px 14px;border-radius:10px;border:none;font-family:'Effra',sans-serif;font-size:14px;min-width:160px}

/* STUDIO IMAGES PLACEHOLDER */
.studio-img{border-radius:16px;overflow:hidden;background:var(--p);aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;font-size:60px;position:relative}
.studio-img::before{content:'';position:absolute;inset:0;background:rgba(9,71,93,.2)}
.studio-caption{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(9,71,93,.8),transparent);padding:16px;color:white;font-family:'Effra',sans-serif;font-weight:700;font-size:14px}

/* KEEP UPDATED B2B */
.tab-btns{display:flex;gap:0;background:var(--light);border-radius:12px;padding:4px;margin-bottom:28px;width:fit-content}
.tab-btn{padding:10px 22px;border-radius:10px;border:none;background:transparent;font-family:'Effra',sans-serif;font-weight:700;font-size:13px;color:var(--muted);cursor:pointer;transition:all .2s}
.tab-btn.on{background:white;color:var(--p);box-shadow:0 2px 8px rgba(0,0,0,.08)}

/* RESPONSIVE */
@media(max-width:960px){.nav-links{display:none}.hamburger{display:flex}.story-grid,.vol-grid,.connect-grid{grid-template-columns:1fr;gap:36px}.stats-grid{grid-template-columns:repeat(2,1fr)}.s-item:nth-child(2){border-right:none}.foot-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:640px){.stats-grid{grid-template-columns:1fr 1fr}.foot-grid{grid-template-columns:1fr;gap:22px}.ph h1{letter-spacing:-1.5px}}
/* ══════════════════════════════════════════════════════════════════════════
   ADDITIONS TO THE MOCKUP

   Everything above this line is the approved mockup's CSS, unchanged. What
   follows covers the markup that changed on the way out of the single file:
   real links where there were click handlers, real forms where there were
   alert() calls, and a visible focus ring now that the whole site can be
   driven from the keyboard.
   ══════════════════════════════════════════════════════════════════════════ */

/* The logo and the course cards became links; the hamburger became a button.
   None of them should look any different for it. */
a.nav-logo{text-decoration:none}
a.cc{color:inherit;text-decoration:none}
button.hamburger{background:none;border:none;font:inherit;color:inherit}
.has-dropdown>a{cursor:pointer}

/* Keyboard focus. The mockup had none: every control was a div or an <a> with
   no href, so nothing could be tabbed to in the first place. */
:focus-visible{outline:3px solid var(--a);outline-offset:2px;border-radius:4px}
nav :focus-visible,footer :focus-visible,.hero :focus-visible,.ph :focus-visible,
.cta-sec :focus-visible{outline-color:var(--a)}

/* Skip link — first stop for a keyboard or screen-reader visitor. */
.skip{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--p);color:white;
  padding:12px 20px;border-radius:0 0 10px 0;font-weight:700;font-size:14px}
.skip:focus{left:0}

/* Visually hidden, still read out. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Honeypot: a field no person sees and no person fills in. */
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;
  opacity:0!important;pointer-events:none}

/* Cards that carry their own information and go nowhere. The mockup gave these
   a pointer and an alert() saying "coming soon"; they now simply sit there. */
.static-card{cursor:default}
.static-card:hover{border-color:var(--bdr);box-shadow:none;transform:none}
.pdf-soon{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--muted);background:var(--light);border-radius:50px;padding:5px 12px}

/* Contact page social links (was a repeated inline style plus two JS hover
   handlers). */
.social-row{display:flex;align-items:center;gap:10px;padding:12px 16px;background:white;
  border-radius:10px;border:1.5px solid var(--bdr);color:var(--p);font-weight:600;
  font-size:14px;transition:border-color .2s}
.social-row:hover{border-color:var(--s)}

/* Form feedback. Empty until the server has actually answered. */
.form-msg{margin-top:12px;font-size:13.5px;line-height:1.6}
.form-msg:empty{margin-top:0}
.form-msg.ok{color:var(--s);font-weight:600}
.form-msg.bad{color:#b3261e;font-weight:600}
.nl-row .form-msg{flex-basis:100%;color:white}
.nl-row .form-msg.ok{color:var(--a)}
.nl-row .form-msg.bad{color:#ffd0cc}
.enq button[type=submit][disabled]{opacity:.6;cursor:progress;transform:none;box-shadow:none}
.fc:invalid:not(:placeholder-shown){border-color:#b3261e}

/* Beacon-embedded forms. The application and volunteering forms are Beacon's,
   shown in place — see assets/js/beacon-forms.js. */
a.btn,a.btn-out,a.btn-ghost{text-decoration:none}
.beacon-frame{position:relative;background:var(--white);border:1.5px solid var(--bdr);
  border-radius:16px;overflow:hidden}
.beacon-frame iframe{display:block;width:100%;height:1180px;border:0}
.beacon-alt{margin-top:12px;font-size:13px;color:var(--muted);line-height:1.6}
.beacon-alt a{color:var(--s);font-weight:600}
.beacon-empty{background:var(--white);border:1.5px dashed var(--bdr);border-radius:16px;padding:28px}
.beacon-empty h4{font-family:'Effra',sans-serif;font-weight:900;font-size:17px;color:var(--p);
  margin-bottom:10px;letter-spacing:-.3px}
.beacon-empty p{font-size:14px;color:var(--muted);line-height:1.7}
.beacon-empty a{color:var(--s);font-weight:600}
@media(max-width:760px){.beacon-frame iframe{height:1400px}}

/* Layout classes for the section library. The mockup carried these as inline
   styles on one-off elements; they are classes now so assets/js/sections.js can
   name them instead of repeating a style string. Values are the mockup's. */
.cc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:24px}
.radio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.course-filters{background:white;border-bottom:1.5px solid var(--bdr);
  padding:0 clamp(14px,4vw,60px);position:sticky;top:68px;z-index:500}
.filter-lbl{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.txt-link{color:var(--s);font-weight:600}

.no-results{grid-column:1/-1;text-align:center;padding:48px 20px;color:var(--muted);font-size:15px}

/* Respect a request for less movement. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1!important;transform:none!important}
}

/* ── SUPPORT AND PROJECT PAGES ──────────────────────────────────────────────
   Three section types added 2026-09-07 with the /life/ pages and the project
   pages: an urgent notice, a directory of organisations, and a plain list of
   pages. All three use the tokens above rather than new colours.             */

/* The emergency notice. Deliberately the loudest thing on the page: somebody
   reading it may be in trouble and should not have to hunt for the number. */
.notice-sec{padding:clamp(28px,4vw,44px) clamp(14px,4vw,60px) 0}
.notice{background:#fff5f4;border:1.5px solid #f3c9c4;border-left:5px solid #c0392b;
  border-radius:14px;padding:clamp(18px,2.6vw,26px)}
.notice-hd{font-size:14px;letter-spacing:.09em;text-transform:uppercase;color:#a5301f;margin-bottom:10px}
.notice p{color:var(--text);font-size:16px;line-height:1.65}
.notice p+p{margin-top:9px}
.notice a{color:#a5301f;text-decoration:underline;text-underline-offset:2px}

/* A directory of organisations. A list, not cards: these are read top to
   bottom by somebody looking for one specific thing. */
.dir-sec{padding:clamp(26px,3.5vw,44px) clamp(14px,4vw,60px) var(--gap)}
.dir-list{list-style:none;display:flex;flex-direction:column;gap:14px}
.dir-item{background:var(--light);border:1.5px solid var(--bdr);border-radius:16px;
  padding:clamp(18px,2.4vw,24px);transition:border-color .25s,box-shadow .25s}
.dir-item:hover{border-color:rgba(0,133,119,.35);box-shadow:0 10px 30px rgba(9,71,93,.07)}
.dir-name{font-size:clamp(18px,2.1vw,21px);color:var(--p);margin-bottom:7px}
.dir-text{color:var(--text);font-size:15.5px;line-height:1.7;max-width:70ch}
.dir-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.dir-links a{display:inline-flex;align-items:baseline;gap:7px;background:white;
  border:1.5px solid var(--bdr);border-radius:50px;padding:7px 15px;font-size:13.5px;
  transition:border-color .2s,background .2s;max-width:100%}
.dir-links a:hover{border-color:var(--s);background:#f2fbf9}
.dir-link-lbl{font-weight:700;color:var(--s);white-space:nowrap}
.dir-link-val{color:var(--muted);overflow-wrap:anywhere}

/* A list of pages: the support index, and every project we have run. */
.pl-sec{padding:clamp(26px,3.5vw,44px) clamp(14px,4vw,60px) var(--gap)}
.pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.pl-item{display:flex;flex-direction:column;background:white;border:1.5px solid var(--bdr);
  border-radius:16px;padding:clamp(18px,2.2vw,24px);transition:transform .3s,box-shadow .3s,border-color .3s}
.pl-item:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(9,71,93,.1);border-color:rgba(0,133,119,.3)}
.pl-meta{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--s);margin-bottom:8px}
.pl-title{font-size:clamp(17px,1.9vw,20px);color:var(--p);line-height:1.22;margin-bottom:8px}
.pl-text{color:var(--muted);font-size:14.5px;line-height:1.6;flex:1}
.pl-cta{margin-top:14px;font-size:13px;font-weight:700;color:var(--s)}

@media(max-width:640px){
  .dir-links a{width:100%}
  .pl-grid{grid-template-columns:1fr}
}

/* ═══ SECTIONS THAT USED TO BE HAND-WRITTEN MARKUP ═══════════════════════════
   Fourteen blocks on this site were raw HTML held in the content, which meant
   the styling was typed out again in every one of them and nobody could edit
   the words without editing markup. They are proper section types now; these
   are the styles those types need, moved out of the content and into the one
   place a look belongs. */

/* Two columns — About, Contact, Keep Updated, Work With Us, Volunteer.
   The ratio arrives as --cols so this can override it: written straight into
   the element's style attribute, as it was before, `1fr 1fr` held all the way
   down to a phone and no media query could reach it. */
.col-grid{display:grid;grid-template-columns:var(--cols,1fr 1fr);gap:var(--col-gap,48px);align-items:start}
@media(max-width:860px){.col-grid{grid-template-columns:1fr;gap:36px}}

.panel-box{background:var(--light);border-radius:18px;padding:32px}
.panel-box-sm{border-radius:16px;padding:24px}
.panel-hd{font-size:20px;color:var(--p);margin-bottom:22px;letter-spacing:-.4px}
.panel-hd-sm{font-size:18px;margin-bottom:16px;letter-spacing:-.3px}
.panel-features{display:flex;flex-direction:column;gap:14px;margin-top:28px}
.panel-images{display:flex;flex-direction:column;gap:14px}
/* A picture inside the boxed split. The type has always taken an `image`,
   but every page using one wrote the positioning inline, so the rule was
   never needed until the home page stopped being raw markup: without it the
   photo renders at its natural size and pushes the whole page sideways. */
.story-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.panel-images .studio-img{overflow:hidden}
.panel-images .studio-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.social-list{display:flex;flex-direction:column;gap:10px}
.nl-btn{padding:12px 20px;font-size:14px}

/* A button that fills its column — a form's submit, a link in a grid of them. */
.btn-wide{width:100%;justify-content:center}
.btn-grid{display:grid;gap:14px;margin-top:24px}

/* The centred callout: Projects' "check back soon", the FAQ's "still got a
   question?". */
.cl-panel{background:var(--light);border-radius:16px;padding:32px;text-align:center;margin-top:24px}
.cl-icon{font-size:36px;margin-bottom:12px}
.cl-head{font-size:20px;color:var(--p);margin-bottom:8px;letter-spacing:-.3px}
.cl-text{font-size:14px;color:var(--muted);line-height:1.65}
.cl-acts{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:20px}

/* Podcast cards: artwork, then the words under it. */
.media-card{background:white;border:1.5px solid var(--bdr);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .3s,border-color .3s}
.media-card:hover{border-color:rgba(0,133,119,.3);box-shadow:0 12px 32px rgba(9,71,93,.09)}
.media-art{height:200px;overflow:hidden;position:relative}
.media-art img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.media-body{padding:24px}
.media-body h3{font-size:18px;color:var(--p);margin-bottom:8px;letter-spacing:-.3px}
.media-body p{font-size:14px;color:var(--muted);line-height:1.65;margin-bottom:18px}
/* The listening platforms are labels, not buttons — a series that is not out
   yet has nowhere to send anyone, and a button that does nothing when pressed
   is worse than a label that never asked to be. */
.media-body .chip{cursor:default}
.media-body .chip:hover{background:white;border-color:var(--bdr);color:var(--muted)}

/* Alumni cards: who said it, then what they said. */
.story-who{display:flex;align-items:center;gap:12px;margin-bottom:18px}

/* The team. */
.team-bio{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.6}

/* A quote card that names its source, and one that links onward. */
.q-source{font-family:'Effra',sans-serif;font-weight:700;font-size:14px;color:var(--s);margin-bottom:12px}
.q-more{display:inline-flex;align-items:center;gap:6px;color:var(--s);font-weight:700;font-size:13px;font-family:'Effra',sans-serif;margin-top:14px;transition:gap .2s}
.q-more:hover{gap:12px}

/* A section heading that sits in the middle rather than at the left. */
.sec-centre{text-align:center}
.sec-centre .lbl{justify-content:center}
.sec-centre .ttl{margin:0 auto;text-align:center}
.sec-centre .btn,.sec-centre .btn-out,.sec-centre .btn-ghost{display:inline-flex}

/* The podcast shelf on the home page. */
.pod-sec{background:var(--p);padding:var(--gap) clamp(14px,4vw,60px)}
.pod-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px}
.lbl-a{color:var(--a)}
.ttl-inv{color:white}
.ttl-inv em{color:var(--a)}
.pod-card .pod-art{position:relative;overflow:hidden}
.pod-card .pod-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pod-card .play-c{position:absolute;bottom:8px;right:8px;z-index:1}

/* The funders. */
.ticker-sec{padding:40px 0}