/* v4 — bright, clean, photo-led (ParentSquare-inspired): white canvas, vivid blue, big rounded imagery, pill buttons */
:root{
  --c-ink:#0b1b3b;--c-ink-2:#34456b;--c-ink-3:#52628a;
  --c-paper:#ffffff;--c-paper-2:#f0f5ff;
  --c-teal-900:#071a4a;--c-teal-800:#0c2a80;--c-teal-700:#1b4fe0;--c-teal-500:#3f7bff;--c-teal-200:#bcd2ff;--c-teal-100:#e3edff;
  --c-sun-500:#ffb81f;--c-sun-300:#ffd566;--c-sun-100:#fff3cc;
  --c-coral-600:#c8401f;--c-coral-500:#ff6b4a;--c-coral-100:#ffe3dc;
  --c-sky-100:#dff0ff;--c-lilac-100:#ece6ff;
  --c-line:rgba(11,27,59,.1);--c-focus:#0b1b3b;
  --f-serif:"Bricolage Grotesque",system-ui,sans-serif;
  --f-sans:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r-lg:28px;--r-xl:40px;
}
body{background:#fff;font-family:var(--f-sans);color:var(--c-ink)}
h1,h2,h3,h4,.brand,.stat b{font-family:var(--f-serif);font-weight:700;letter-spacing:-.025em;line-height:1.05}
h1{font-size:clamp(2.5rem,1.4rem + 4.6vw,5rem);font-weight:800}
h1 em,h2 em{font-style:normal;color:var(--c-teal-700);background:linear-gradient(transparent 62%,var(--c-sun-300) 62% 92%,transparent 92%)}
.on-dark h1 em,.on-dark h2 em,.page-hero h1 em{background:none;color:var(--c-sun-300)}
.eyebrow{font-family:var(--f-sans);font-weight:800;letter-spacing:.08em;color:var(--c-teal-700);text-transform:uppercase;font-size:.78rem}
.eyebrow::before{display:none}
.eyebrow{display:inline-block;background:var(--c-teal-100);padding:.4em .9em;border-radius:99px}
.on-dark .eyebrow{background:rgba(255,255,255,.14);color:#fff}

/* header: clean white bar */
.site-header{background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--c-line);box-shadow:none}
.brand{font-weight:800;font-size:1.2rem;color:var(--c-teal-900)}
.brand small{font-family:var(--f-sans);font-weight:600;color:var(--c-ink-3);letter-spacing:.02em}
.dd-btn{font-weight:700;border-radius:99px}
.dd-btn:hover,.dd.is-open .dd-btn{background:var(--c-teal-100);color:var(--c-teal-700)}
.dd-panel{border-radius:24px;box-shadow:0 30px 70px -20px rgba(11,27,59,.28);border:1px solid var(--c-line);background:#fff}

/* buttons: solid, pill, bold */
.btn{border-radius:99px;font-weight:800;padding:.95em 1.6em;box-shadow:none;letter-spacing:0}
.btn--primary{background:var(--c-teal-700);color:#fff;border:2px solid var(--c-teal-700)}
.btn--primary:hover{background:var(--c-teal-800);border-color:var(--c-teal-800);transform:translateY(-2px);box-shadow:0 14px 28px -10px rgba(27,79,224,.55)}
.btn--ghost{background:#fff;border:2px solid var(--c-ink);color:var(--c-ink)}
.btn--ghost:hover{background:var(--c-ink);color:#fff}
.on-dark .btn--primary,.cta-band .btn--primary{background:var(--c-sun-500);border-color:var(--c-sun-500);color:var(--c-ink)}
.on-dark .btn--ghost,.cta-band .btn--ghost{background:transparent;border-color:#fff;color:#fff}

/* HERO */
.hero2{padding:clamp(7rem,10vw,9rem) 0 clamp(2.5rem,5vw,4rem);background:radial-gradient(60rem 30rem at 85% 10%,var(--c-teal-100),transparent 60%),#fff;overflow:hidden}
.hero2-grid{align-items:center;gap:clamp(2rem,5vw,5rem)}
.hero2 .lead{font-size:1.2rem;max-width:34rem}
.aud-tabs{background:var(--c-paper-2);border-radius:99px;padding:5px}
.aud-tabs button{font-weight:800;border-radius:99px}
.aud-tabs button[aria-selected=true]{background:var(--c-teal-700);color:#fff}
.hero2-stage .ph{border-radius:44px 44px 44px 140px;box-shadow:0 40px 80px -30px rgba(27,79,224,.5);aspect-ratio:4/4.4}
.hero2-stage::before{content:"";position:absolute;inset:6% -6% -6% 8%;background:var(--c-sun-300);border-radius:60px 60px 60px 160px;z-index:-1;transform:rotate(3deg)}
.hero2-stage{isolation:isolate}
.float-card{border-radius:20px;background:#fff;box-shadow:0 20px 40px -14px rgba(11,27,59,.3);border:0;font-weight:800}

/* sections */
.section{padding:clamp(4rem,8vw,7rem) 0}
.section--tint{background:var(--c-paper-2)}
.section--teal{background:var(--c-teal-700)!important;color:#fff;border-radius:48px;margin:0 clamp(.5rem,2vw,1.5rem)}
.section--teal h2,.section--teal h3,.section--teal p{color:#fff}
h2{font-size:clamp(2rem,1.2rem + 2.8vw,3.5rem)}
.paths .path,.card,.tile,.mcard{border-radius:28px;border:0;box-shadow:none;background:#fff;outline:1px solid var(--c-line);transition:transform .35s var(--ease-out,ease),box-shadow .35s}
.paths .path:hover,.tile:hover,.mcard:hover{transform:translateY(-6px);box-shadow:0 26px 50px -22px rgba(27,79,224,.45)}
.paths .path:nth-child(1){background:var(--c-teal-100);outline:0}
.paths .path:nth-child(2){background:var(--c-sun-100);outline:0}
.paths .path:nth-child(3){background:var(--c-coral-100);outline:0}
.paths .path:nth-child(4){background:var(--c-lilac-100);outline:0}
.path h3{font-size:1.2rem}
.ph{border-radius:32px}
.ph--wide{border-radius:36px}
.link-arrow{font-weight:800;color:var(--c-teal-700)}
.stat b{font-size:clamp(2.6rem,5vw,4.5rem);color:var(--c-sun-300)}
.cta-band{background:var(--c-teal-900);border-radius:48px;margin:0 clamp(.5rem,2vw,1.5rem);color:#fff}
.cta-band h2{color:#fff}
.chip,.tag{border-radius:99px;font-weight:700}
.quiz-opts button,.field input,.input,textarea{border-radius:16px}

/* inner page hero */
.page-hero{background:var(--c-teal-700);border-radius:0 0 48px 48px;color:#fff}
.page-hero h1{color:#fff}
.page-hero .eyebrow{background:rgba(255,255,255,.16);color:#fff}
.page-hero p{color:rgba(255,255,255,.9)}

/* footer */
.site-footer{background:var(--c-teal-900);color:#cfdcff;border-radius:48px 48px 0 0;margin-top:clamp(2rem,5vw,4rem)}
.site-footer a{color:#fff}
.site-footer h3,.site-footer h4{color:#fff}

/* mobile: tab bar as floating pill, white */
.tabbar{background:#fff;border:1px solid var(--c-line);box-shadow:0 18px 40px -12px rgba(11,27,59,.35);border-radius:99px}
.tab.is-active{color:var(--c-teal-700)}
.tab.is-active::before{background:var(--c-teal-100)}
.msheet{border-radius:32px 32px 0 0;background:#fff}
.mtile{border-radius:22px}
@media (max-width:820px){
  .hero2-stage::before{display:none}
  .section--teal,.cta-band,.site-footer{border-radius:28px}
  .site-footer{border-radius:28px 28px 0 0}
  .page-hero{border-radius:0 0 32px 32px}
}

/* tune scale */
h1{font-size:clamp(2.3rem,1.2rem + 3.4vw,4.1rem)}
.hero2{padding:clamp(5.5rem,7vw,7rem) 0 clamp(2rem,4vw,3rem)}
.hero2-stage .ph{aspect-ratio:4/4.6;max-height:78vh}
@media (min-width:821px){
  .page-hero{padding:clamp(6rem,8vw,8rem) 0 clamp(3rem,5vw,4.5rem);overflow:hidden;position:relative}
  .page-hero h1{font-size:clamp(2.2rem,1rem + 3vw,3.6rem);max-width:15em}
  .page-hero>.container{max-width:min(1180px,92vw);position:relative;z-index:2}
  .page-hero>.container>*{max-width:52%}
  .page-hero .page-hero-img{display:block!important;position:absolute!important;inset:auto!important;left:auto!important;bottom:auto!important;right:max(4vw,calc((100vw - 1180px)/2))!important;top:50%!important;transform:translateY(-50%)!important;animation:none!important;width:min(40vw,500px)!important;height:78%!important;max-height:440px;object-fit:cover;border-radius:36px 36px 36px 120px;box-shadow:0 30px 60px -20px rgba(0,0,0,.4);opacity:1!important;filter:none!important;z-index:1!important}
  .page-hero::after{display:none!important}
  .page-hero::before{display:none!important}
}

/* ===== Mobile: dock (logo + toggle) at the bottom, full-screen menu that opens upward ===== */
@media (max-width:820px){
  .site-header{display:none!important}
  .mhero,.page-hero.has-img{padding-top:0}
  .page-hero.has-img{padding-top:5rem}
  .tabbar.dock{display:flex;align-items:center;gap:8px;grid-template-columns:none;padding:8px 8px 8px 16px;border-radius:99px;background:#fff;border:1px solid var(--c-line)}
  .dock-logo{display:flex;align-items:center;gap:8px;flex:1;min-width:0;text-decoration:none;color:var(--c-teal-900);font-family:var(--f-serif)}
  .dock-logo svg{width:34px;height:34px;flex:none}
  .dock-logo b{font-size:1.02rem;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dock-call{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--c-teal-100);color:var(--c-teal-700);flex:none}
  .dock-call .icon{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .tab.dock-menu{display:flex!important;flex-direction:row!important;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px 0 16px;border-radius:99px;background:var(--c-teal-700);color:#fff;font-size:.95rem;font-weight:800;flex:none}
  .tab.dock-menu .icon{width:1.2rem;height:1.2rem}
  .tab.dock-menu[aria-expanded=true]{background:var(--c-teal-900)}

  .msheet--screen{inset:0;max-height:none;height:100dvh;border-radius:0;display:flex;flex-direction:column;padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));
    background:radial-gradient(40rem 24rem at 100% 0,#2a5cf0 0,transparent 60%),var(--c-teal-900);color:#fff;
    transform:translateY(100%);clip-path:inset(0 0 0 0 round 36px 36px 0 0);transition:transform .7s cubic-bezier(.16,1,.3,1),clip-path .7s cubic-bezier(.16,1,.3,1)}
  .msheet--screen.is-open{transform:translateY(var(--dy,0px));clip-path:inset(0 0 0 0 round 0)}
  .msheet--screen .msheet-grab{display:none}
  .mscr-head{flex:none;display:flex;align-items:center;justify-content:space-between;padding:6px 4px 14px}
  .mscr-logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-family:var(--f-serif);font-size:1.15rem}
  .mscr-logo svg{width:36px;height:36px}
  .msheet--screen .m-round{background:rgba(255,255,255,.14);color:#fff;border-color:transparent}
  .mgrid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:10px}
  .mt{position:relative;overflow:hidden;border-radius:20px;display:flex;flex-direction:column;justify-content:space-between;padding:9px;color:#fff;text-decoration:none;isolation:isolate;
    opacity:0;transform:translateY(40px) scale(.9);}
  .mt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s cubic-bezier(.16,1,.3,1)}
  .mt::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,26,74,.1) 30%,rgba(7,26,74,.88))}
  .mt-g{align-self:flex-start;font-size:.6rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.28em .65em;border-radius:99px;background:var(--c-sun-300);color:var(--c-ink)}
  .mt--about .mt-g{background:var(--c-coral-100)} .mt--involved .mt-g{background:var(--c-teal-200)}
  .mt-t{font-family:var(--f-serif);font-weight:700;font-size:.9rem;line-height:1.08;letter-spacing:-.01em}
  .mt[aria-current=page]{outline:3px solid var(--c-sun-300);outline-offset:-3px}
  .mt:active img{transform:scale(1.08)}
  .msheet--screen.is-open .mt{opacity:1;transform:none;transition:opacity .5s ease,transform .7s cubic-bezier(.16,1,.3,1);transition-delay:calc(220ms + var(--i)*45ms)}
  .mscr-foot{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:12px}
  .mscr-call,.mscr-talk{display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;border-radius:99px;font-weight:800;text-decoration:none;font-size:.95rem}
  .mscr-call{background:rgba(255,255,255,.14);color:#fff}
  .mscr-talk{background:var(--c-sun-500);color:var(--c-ink)}
  .mscr-foot .icon{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .msheet-backdrop{display:none!important}
}
@media (max-width:820px) and (max-height:640px){.mt-g{display:none}}
:root[data-calm="on"] .msheet--screen .mt{transition:none;opacity:1;transform:none}

/* ===== Home hero (desktop): copy + interactive photo collage ===== */
.hero4{position:relative;padding:clamp(5.5rem,7vw,7rem) 0 clamp(3rem,5vw,5rem);overflow:hidden;background:#fff}
.hero4-bg i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:h4float 14s ease-in-out infinite alternate}
.hero4-bg .b1{width:34rem;height:34rem;right:-8rem;top:-10rem;background:var(--c-teal-200)}
.hero4-bg .b2{width:24rem;height:24rem;left:-8rem;bottom:-6rem;background:var(--c-sun-300);animation-delay:-5s}
.hero4-bg .b3{width:18rem;height:18rem;right:30%;bottom:-8rem;background:var(--c-coral-100);animation-delay:-9s}
@keyframes h4float{to{transform:translate(40px,30px) scale(1.12)}}
.hero4-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(2rem,4vw,4.5rem);align-items:center}
.hero4 h1{font-size:clamp(2.4rem,1.2rem + 3.4vw,4.3rem);margin:.5rem 0 1.1rem}
.hero4 .rot{display:inline-grid;vertical-align:bottom;position:relative;white-space:nowrap}
.hero4 .rot b{grid-area:1/1;color:var(--c-teal-700);background:linear-gradient(transparent 64%,var(--c-sun-300) 64% 92%,transparent 92%);opacity:0;transform:translateY(60%) rotateX(-60deg);transition:opacity .5s,transform .6s cubic-bezier(.16,1,.3,1);transform-origin:50% 100%}
.hero4 .rot b.on{opacity:1;transform:none}
.hero4 .rot b.out{opacity:0;transform:translateY(-60%) rotateX(60deg)}
.hero4 .lead{font-size:1.15rem;max-width:36rem;margin-bottom:1.3rem}
.h4-proof{display:flex;gap:clamp(1rem,3vw,2.2rem);margin:1.8rem 0 0;padding-top:1.3rem;border-top:1px solid var(--c-line)}
.h4-proof div{display:flex;align-items:baseline;gap:.45rem}
.h4-proof dt{font-family:var(--f-serif);font-weight:800;font-size:2rem;color:var(--c-teal-700);line-height:1}
.h4-proof dd{margin:0;font-size:.9rem;color:var(--c-ink-2);font-weight:600}

.hero4-stage{position:relative;aspect-ratio:1/1.02;isolation:isolate;max-width:620px;justify-self:end;width:100%}
.hero4-stage [data-depth]{translate:var(--tx,0) var(--ty,0);transition:translate .35s cubic-bezier(.2,.7,.2,1)}
.h4-blob{position:absolute;inset:8% 2% 2% 14%;background:var(--c-sun-300);border-radius:48% 52% 44% 56%/56% 44% 56% 44%;z-index:-1;animation:h4morph 12s ease-in-out infinite alternate}
@keyframes h4morph{50%{border-radius:56% 44% 54% 46%/44% 58% 42% 56%;transform:rotate(4deg)}100%{border-radius:44% 56% 46% 54%/58% 42% 58% 42%;transform:rotate(-3deg)}}
.h4-main{position:absolute;margin:0;left:10%;top:2%;width:70%;height:82%;border-radius:48% 48% 40px 40px/36% 36% 40px 40px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(27,79,224,.55);background:var(--c-teal-100)}
.h4-main img{width:100%;height:100%;object-fit:cover;transition:opacity .25s,transform 1.2s cubic-bezier(.16,1,.3,1);animation:h4kb 18s ease-in-out infinite alternate}
@keyframes h4kb{to{transform:scale(1.08)}}
.h4-main:hover img{transform:scale(1.06)}
.h4-main figcaption{position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.94);padding:.45em 1em;border-radius:99px;font-weight:800;font-size:.85rem}
.is-out{opacity:0!important;transform:scale(1.04)}
.h4-sm{position:absolute;padding:0;border:6px solid #fff;background:#fff;overflow:hidden;cursor:pointer;box-shadow:0 20px 40px -14px rgba(11,27,59,.38);transition:translate .35s cubic-bezier(.2,.7,.2,1),scale .4s cubic-bezier(.34,1.56,.64,1)}
.h4-sm img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .25s,transform .6s}
.h4-sm:hover,.h4-sm:focus-visible{scale:1.1}
.h4-sm:hover img{transform:scale(1.12)}
.h4-a{left:0;top:48%;width:30%;aspect-ratio:1;border-radius:50%}
.h4-b{right:0;top:6%;width:27%;aspect-ratio:3/4;border-radius:28px}
.h4-c{right:4%;bottom:2%;width:36%;aspect-ratio:4/3;border-radius:28px 28px 28px 70px}
.h4-badge{position:absolute;left:4%;top:4%;width:22%;z-index:3;filter:drop-shadow(0 12px 18px rgba(0,0,0,.2))}
.h4-badge text{animation:none}
.h4-badge{animation:h4spin 22s linear infinite}
.h4-badge .icon{display:none}
@keyframes h4spin{to{rotate:360deg}}
.hero4-stage .float-card{position:absolute;z-index:4}
.hero4-stage .float-card.a{left:-2%;bottom:6%;top:auto;right:auto}
.hero4-stage .float-card.b{right:-2%;top:auto;bottom:33%;left:auto}
.hero4-stage.is-swapping .h4-main{animation:h4pop .7s cubic-bezier(.34,1.56,.64,1)}
@keyframes h4pop{40%{transform:scale(.97) rotate(-1deg)}}
:root[data-calm="on"] .hero4 *{animation:none!important}
:root[data-calm="on"] .hero4 .rot b:not(.on){display:none}
@media (prefers-reduced-motion:reduce){.hero4 *{animation:none!important}}

/* ===== Home hero (mobile): photo slideshow + thumbnails ===== */
@media (max-width:820px){
  .mhero-bg img.mh-s{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease,transform 6s ease-out;transform:scale(1.12)}
  .mhero-bg img.mh-s.is-on{opacity:1;transform:scale(1)}
  .mhero-body h1 em{font-style:normal;color:var(--c-sun-300);background:none}
  .mhero-thumbs{position:absolute;left:20px;right:20px;bottom:calc(88px + env(safe-area-inset-bottom));display:flex;gap:10px;z-index:3}
  .mhero-thumbs button{width:52px;height:52px;padding:0;border-radius:50%;border:3px solid rgba(255,255,255,.55);overflow:hidden;background:none;opacity:.8;transition:transform .4s cubic-bezier(.34,1.56,.64,1),border-color .3s,opacity .3s}
  .mhero-thumbs button img{width:100%;height:100%;object-fit:cover;display:block}
  .mhero-thumbs button.is-on{border-color:var(--c-sun-300);transform:scale(1.18);opacity:1}
  .mhero{padding-bottom:5.5rem}
}
@media (min-width:821px){
  .hero4{padding-top:clamp(5rem,6vw,6rem);padding-bottom:2.5rem}
  .hero4 h1{font-size:clamp(2.3rem,1rem + 3vw,3.7rem);margin:.7rem 0 .9rem}
  .hero4 .lead{font-size:1.08rem;margin-bottom:1.1rem}
  .hero4 #aud-points{display:none}
  .hero4 .aud-panel{margin-bottom:.9rem}
  .h4-proof{margin-top:1.2rem;padding-top:1rem}
  .hero4-stage{max-height:calc(100vh - 8rem);aspect-ratio:1/.95}
}
.h4-main figcaption{left:44%;bottom:auto;top:14px}
@media (max-width:820px){
  .mhero-thumbs{bottom:calc(24px + env(safe-area-inset-bottom))}
  .mhero{padding-bottom:7.5rem}
}

/* ===== Mobile logo: centred at the very top on load, glides into the bottom dock (left) once you scroll ===== */
.mlogo{display:none}
@media (max-width:820px){
  .dock-gap{flex:1}
  .tabbar.dock{padding:8px 8px 8px 16px;min-height:64px}
  .mlogo{display:flex;position:fixed;z-index:75;align-items:center;gap:9px;height:48px;padding:0 4px;text-decoration:none;white-space:nowrap;
    left:50%;bottom:calc(100dvh - 62px);transform:translateX(-50%);color:#fff;font-family:var(--f-serif);
    transition:left .75s cubic-bezier(.16,1,.3,1),bottom .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1),color .4s,background .4s,padding .4s,box-shadow .4s}
  .mlogo svg{width:38px;height:38px;flex:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));transition:transform .75s cubic-bezier(.34,1.56,.64,1)}
  .mlogo b{font-size:1.15rem;font-weight:800;letter-spacing:-.02em;text-shadow:0 1px 10px rgba(0,0,0,.45);transition:text-shadow .4s}
  .has-tabbar .mlogo{left:26px;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 8px);transform:none;color:var(--c-teal-900)}
  .has-tabbar .mlogo b{text-shadow:none}
  .has-tabbar .mlogo svg{transform:rotate(360deg) scale(.92);filter:none}
  body.sheet-open .mlogo{opacity:0;pointer-events:none}
}
:root[data-calm="on"] .mlogo,:root[data-calm="on"] .mlogo svg{transition-duration:1ms}