/* =========================================================
   Mildheart – 2026 visual refresh (dev). Loaded after style.css + motion.css.
   Core brand colours are kept from style.css; a few warm accents are added.
   Fonts are self-hosted (latin subset, font-display: swap).
   ========================================================= */
@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/fonts/dmsans.woff2) format("woff2");font-weight:100 1000;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/fonts/dmsans-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  /* core brand (unchanged) */
  --pink:#FE80C0; --pink-dark:#E0287D; --sky:#5EC1E0; --blue:#6EC1E4; --button-blue:#1A7EFB; --navy:#122368; --ice:#A0E8FF;
  /* complementary accents */
  --ink:#2A1B3D;      /* deep plum – text & dark sections */
  --pink-deep:#C0186F;/* accessible pink for small text/links */
  --cream:#FFF8F1;    /* warm page background */
  --blush:#FFE6F2;    /* soft pink surfaces */
  --mist:#E6F6FC;     /* soft blue surfaces */
  --sunshine:#FFC857; /* highlight */
  --peach:#FF9F7A;    /* warm accent */
  --text:#3B2E4A; --muted:#6E6480; --grey-bg:#fff;
  --radius:24px;
  --font-body:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-head:"Bricolage Grotesque","DM Sans",system-ui,sans-serif;
  --font-nav:var(--font-body);
  --shadow:0 10px 30px rgba(42,27,61,.08);
  --shadow-lg:0 18px 44px rgba(42,27,61,.14);
  --container:1200px;
}
body{background:var(--cream);color:var(--text);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--ink);letter-spacing:-.01em}
::selection{background:var(--pink);color:#fff}
.container{padding:0 24px}

/* ---------- Buttons ---------- */
.btn{border-radius:999px;padding:13px 26px;font-size:15px;font-weight:700;letter-spacing:.01em;gap:.55em;border-width:2px}
.btn-pink{background:linear-gradient(135deg,var(--pink-dark),var(--pink-deep));color:#fff;box-shadow:0 8px 20px rgba(224,40,125,.28)}
.btn-blue{background:var(--sky);color:var(--ink);box-shadow:0 8px 20px rgba(94,193,224,.3)}
.btn-sky{background:var(--sky);color:var(--ink)}
.btn-white{background:#fff;color:var(--ink)}
.btn:hover{filter:brightness(1.04)}
.btn-wide{min-width:170px}

/* ---------- Header ---------- */
.site-header{background:rgba(255,255,255,.96);box-shadow:0 1px 0 rgba(42,27,61,.06)}
.header-inner{min-height:84px}
.brand img{width:158px}
.menu{gap:6px;font-family:var(--font-body);font-weight:600;font-size:15px}
.menu>li>a,.menu .sub-label{color:var(--ink);padding:8px 14px;border-radius:999px;display:inline-block;transition:background .2s,color .2s}
.menu>li>a:hover,.menu .sub-label:hover{background:var(--blush);color:var(--pink-deep)}
.menu a[aria-current="page"],.has-sub.is-current>.sub-label{color:var(--pink-deep)}
.menu a::after,.sub-label::after{left:14px;right:14px;bottom:4px;background:var(--pink)}
.sub{border-radius:18px;padding:10px;min-width:200px;box-shadow:var(--shadow-lg);border:1px solid #f3e7ef;left:0}
.sub li a{border-radius:12px;color:var(--ink);padding:9px 14px}
.sub li a:hover{background:var(--blush);color:var(--pink-deep)}
.header-cta{font-size:13px;padding:11px 20px;letter-spacing:.04em}
.nav-toggle{color:var(--ink);background:var(--blush);border-radius:14px;width:46px;height:46px;font-size:20px;display:none}

/* ---------- Heroes ---------- */
.hero::before{background:linear-gradient(105deg,rgba(42,27,61,.88) 0%,rgba(42,27,61,.62) 45%,rgba(42,27,61,.18) 100%)}
.hero-home{min-height:min(92vh,760px)}
.hero-home .hero-content{padding-top:40px;padding-bottom:90px}
.hero-home h1{font-family:var(--font-head);font-size:clamp(46px,7.4vw,96px);font-weight:800;line-height:.98;letter-spacing:-.03em;color:#fff;margin-bottom:.35em;max-width:9.5em}
.hero-home h1 .w:nth-child(1){color:var(--pink)}
.hero-home h1 .w:nth-child(2){color:var(--ice)}
.hero-home h1 .w:nth-child(3){color:var(--sunshine)}
.hero-home p{font-size:clamp(17px,1.6vw,20px);max-width:600px;color:#f6eef9;line-height:1.6}
.hero-home .btn-row{margin-top:30px}
.hero-page{min-height:400px}
.hero-page .hero-content{padding:60px 24px 80px}
.page-title{font-size:clamp(38px,6vw,72px);font-weight:800;letter-spacing:-.03em;color:#fff;text-decoration:underline wavy var(--sunshine);text-decoration-thickness:3px;text-underline-offset:14px}
.hero-donate{min-height:min(88vh,700px)}
.hero-donate::before{background:linear-gradient(180deg,rgba(42,27,61,.55),rgba(42,27,61,.82))}
.hero-donate h1{font-family:var(--font-head);font-size:clamp(34px,5.4vw,66px);font-weight:800;color:#fff;letter-spacing:-.02em}
.hero-kicker{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:6px 16px;font-size:14px;font-weight:600}
.hero-sub{font-size:18px;color:#f6eef9}

/* ---------- Section headings ---------- */
.section{padding:100px 0}
.section-tight{padding:56px 0}
.section-title{gap:12px;margin-bottom:14px}
.section-title h2{font-family:var(--font-body);font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--pink-deep)}
.section-title .line{width:44px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--pink),var(--sky))}
.section-title.light h2{color:var(--sunshine);font-weight:700}
.lead-title{font-family:var(--font-head);color:var(--ink);font-size:clamp(28px,3.6vw,46px);font-weight:800;line-height:1.08;letter-spacing:-.02em;margin-bottom:.6em}
.lead-title.light{font-weight:700}
.big-title{font-family:var(--font-head);color:var(--ink);font-size:clamp(34px,4.6vw,56px);font-weight:800;letter-spacing:-.03em}
.strong-line{color:var(--ink);font-weight:700;font-size:18px}
.intro-text{max-width:620px;font-size:17px}
.split p{font-size:17px}
.accent-link{color:var(--pink-deep);font-weight:600}
.rounded{border-radius:28px}
.split img.rounded{box-shadow:18px 18px 0 var(--blush)}
.split>div:last-child img.rounded{transform:rotate(1.2deg)}

/* ---------- Core areas ---------- */
.core-areas{padding:100px 0}
.core-areas.dark-bg{background-color:var(--ink)}
.core-areas.dark-bg::before{background:linear-gradient(160deg,rgba(42,27,61,.94),rgba(42,27,61,.84) 60%,rgba(192,24,111,.7))}
.core-grid{gap:22px;margin-top:34px}
.core-item{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:28px 24px}
.core-item img{width:56px;height:56px;border-radius:16px;background:#fff;padding:6px;margin-bottom:20px}
.core-item h3{font-family:var(--font-head);font-size:20px;font-weight:700;color:#fff;line-height:1.2}
.core-item p{font-size:14px}
.learn-more{font-size:14px;font-weight:700}
.dark-bg .learn-more a{color:var(--sunshine)}
.core-areas.blue-bg{background:linear-gradient(135deg,#BDEBFA 0%,var(--blue) 100%);color:var(--ink)}
.blue-bg .core-item{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.8)}
.blue-bg .core-item h3,.blue-bg .core-heading{color:var(--ink)}
.blue-bg .section-title.light h2{color:var(--ink)}
.core-heading{font-family:var(--font-head);font-size:clamp(28px,3.4vw,40px);font-weight:800;color:#fff}

/* ---------- Cards: programmes, tools, info ---------- */
.programme-grid{gap:28px;margin-top:40px}
.programme-card{background:#fff;border-radius:26px!important;box-shadow:var(--shadow);overflow:hidden}
.programme-body{padding:22px 24px 28px}
.programme-label{display:inline-block;background:var(--blush);color:var(--pink-deep);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:4px 12px;margin-bottom:6px}
.programme-card h3{font-size:21px;font-weight:700;margin-top:10px;line-height:1.2}
.programme-card p{font-size:15px}
.podcast-links a{background:var(--mist);color:var(--pink-deep);border-radius:14px;height:48px;font-size:18px}
.tools-grid{gap:20px;margin-top:34px}
.tool-card{background:#fff;border-radius:24px;box-shadow:var(--shadow)}
.tool-card img{aspect-ratio:4/3}
.tool-body h3{font-family:var(--font-head);font-size:19px;font-weight:700;color:var(--ink)}
.tool-body p{font-size:14px;color:var(--muted)}
.info-card,.grey-card,.address-card{background:#fff;border-radius:22px;box-shadow:var(--shadow);border:1px solid #f4eaf0}
.info-card h3{font-family:var(--font-head);font-size:19px;border-bottom:3px solid var(--pink);display:inline-block}
.kv{font-size:15px}
.card-title{font-family:var(--font-head);text-transform:none;font-size:24px;color:var(--ink)}

/* ---------- Engagements ---------- */
.engagement{gap:70px;margin:70px 0}
.engagement h3{font-family:var(--font-head);color:var(--ink);font-size:clamp(24px,2.6vw,32px);font-weight:800;line-height:1.15}
.engagement p{font-size:16px;text-align:left}
.engagement-text{max-width:500px}
.engagement.reverse .engagement-text{text-align:left}
.engagement-img img{border-radius:28px}
.engagement-img{box-shadow:16px 16px 0 var(--blush);border-radius:28px}
.engagement.reverse .engagement-img{box-shadow:-16px 16px 0 var(--mist)}
.btn-block{display:inline-flex;width:auto}

/* ---------- Banner + CTA ---------- */
.banner{padding:120px 0 130px}
.banner::before{background:linear-gradient(135deg,rgba(42,27,61,.9),rgba(192,24,111,.72))}
.banner h2{font-size:clamp(34px,4.4vw,56px);font-weight:800;color:var(--sunshine)}
.banner-text{font-size:clamp(18px,2vw,23px);line-height:1.55}
.banner-text .count-up{color:var(--sunshine)}
.cta-box{border-radius:36px;padding:90px 8%;margin:40px 0 90px;box-shadow:var(--shadow-lg)}
.cta-box::before{background:linear-gradient(135deg,rgba(192,24,111,.86),rgba(42,27,61,.86))}
.cta-box h2{font-family:var(--font-head);font-size:clamp(20px,2.4vw,30px);font-weight:700;line-height:1.3;color:#fff;max-width:900px;margin:0 auto .6em}
.events-teaser img{border-radius:30px;box-shadow:var(--shadow-lg)}

/* Learn & Explore section on a playful pattern */
section[aria-labelledby="learn-explore-title"]{background:var(--mist);position:relative;padding:90px 0}
section[aria-labelledby="learn-explore-title"]::before{content:"";position:absolute;inset:0;background:rgba(255,248,241,.55)}
section[aria-labelledby="learn-explore-title"]>.container{position:relative}

/* ---------- About / team ---------- */
.team-title{font-family:var(--font-head);color:var(--ink);font-size:clamp(28px,3.4vw,40px);text-transform:none;font-weight:800}
.team-card{background:#fff;border-radius:28px;padding:22px 22px 26px;box-shadow:var(--shadow)}
.team-card img{border-radius:22px;width:100%;max-width:260px;height:280px}
.team-card h3{font-size:20px}
.team-social a{background:var(--ink);border-radius:8px;width:28px;height:28px;font-size:13px}

/* ---------- Projects ---------- */
.comics-header .section-title h2{font-size:13px}
.comics-count{font-weight:700;color:var(--pink-deep)}
.comic{background:#fff;border:0;border-radius:28px;box-shadow:var(--shadow);padding:26px 28px 30px;margin-bottom:26px}
.comic-head h3{font-family:var(--font-head);font-size:20px}
.comic-head h3 span{color:var(--pink-deep);font-size:20px}
.comic-meta{font-size:12px;font-weight:600}
.comic-meta li{background:var(--mist);border-radius:999px;padding:4px 12px}
.comic-meta li+li::before{display:none}
.comic-meta{gap:8px;flex-wrap:wrap}
.comic-info h4{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--muted)}
.comic-info p{font-size:15px}
.comic-cover img{border-radius:20px}
.accordion-title{font-family:var(--font-head);font-size:clamp(24px,2.8vw,34px);font-weight:800}
.accordion summary{background:#fff;color:var(--ink);text-transform:none;font-family:var(--font-head);font-size:20px;padding:18px 22px;border-radius:18px;box-shadow:var(--shadow);border:2px solid transparent;transition:border-color .2s}
.accordion summary:hover{border-color:var(--pink)}
.accordion summary::before{content:"+";display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--blush);color:var(--pink-deep);margin-right:12px}
.accordion[open] summary::before{content:"−"}
.accordion>div,.accordion>p{padding:6px 4px}
.progress-ring{background:conic-gradient(var(--pink-dark) calc(var(--pct)*1%),#F3E6EE 0);width:200px;height:200px}
.progress-ring>div{background:var(--cream);width:164px;height:164px}
.progress-ring strong{font-family:var(--font-head);font-size:34px;color:var(--ink)}
.goal-count strong{color:var(--pink-deep);font-size:20px}

/* ---------- Events gallery ---------- */
.gallery{gap:18px}
.gallery img{border-radius:20px;height:230px}
.marquee img{border-radius:20px}

/* ---------- Forms ---------- */
.form input,.form textarea,.form select,.newsletter-form input,.pt-form input,.pt-form select{border-radius:14px;border:1.5px solid #E8DDEB;padding:12px 14px;font-size:15px;transition:border-color .2s,box-shadow .2s}
.form input:focus,.form textarea:focus,.form select:focus,.newsletter-form input:focus,.pt-form input:focus,.pt-form select:focus{outline:0;border-color:var(--pink-dark);box-shadow:0 0 0 4px rgba(254,128,192,.25)}
.form label{font-size:14px;font-weight:600;color:var(--ink)}
.form .btn-blue{background:linear-gradient(135deg,var(--pink-dark),var(--pink-deep));color:#fff}
.form-section{background:radial-gradient(circle at 15% 20%,rgba(254,128,192,.35),transparent 45%),radial-gradient(circle at 85% 80%,rgba(94,193,224,.35),transparent 45%),var(--ink)}
.form-intro h1,.form-intro h2{font-family:var(--font-head);color:#fff;font-size:clamp(32px,4vw,52px);font-weight:800;letter-spacing:-.02em}
.form-intro p{color:#eadff0}
.kicker{color:var(--sunshine);font-weight:700}
.dark-form{border-radius:28px;padding:34px;box-shadow:var(--shadow-lg)}
.btn-pink.btn-block{display:flex;width:100%;height:52px}
.contact-list{color:var(--ink)}
.map iframe{border-radius:24px}
.text-socials a{color:var(--ink);font-weight:600}

/* ---------- Partners + footer ---------- */
.partners{padding:60px 20px 80px}
.partners img{background:#fff;border-radius:999px;padding:6px 18px;box-shadow:var(--shadow)}
.site-footer{background:var(--ink);font-size:14px;padding-top:70px}
.footer-grid{gap:36px}
.footer-title{font-family:var(--font-head);font-size:17px;font-weight:700;color:var(--sunshine);margin-bottom:20px}
.footer-links a{color:#E9DFF2}
.footer-links a:hover{color:var(--pink)}
.footer-tagline{font-family:var(--font-head);font-size:16px;max-width:220px;color:#fff}
.footer-address{color:#E9DFF2}
.newsletter-form input{border:0}
.newsletter-form .btn{background:var(--pink-dark)}
.social-icons a{width:34px;height:34px;font-size:14px;background:rgba(255,255,255,.1);color:#fff}
.social-icons a:hover{background:var(--pink)}
.follow-title{font-family:var(--font-head);color:#fff}
.copyright{border-top-color:rgba(255,255,255,.12);color:#cbbfd8}

/* ---------- New feature pages: align with the refresh ---------- */
.notice{border-radius:16px;background:#fff;box-shadow:var(--shadow)}
.pt-panel,.quiz-card{background:#fff;border-radius:28px;box-shadow:var(--shadow)}
.pt-panel h2{font-family:var(--font-head);color:var(--ink);font-weight:800}
.phase{background:#fff;border-radius:22px;box-shadow:var(--shadow)}
.phase h3{color:var(--pink-deep);font-size:18px}
.comic-tile{background:#fff;border-radius:26px;box-shadow:var(--shadow)}
.comic-tile h3{font-size:22px}
.coming-soon{border-radius:26px;background:var(--mist)}
.ep{border-top-color:#F0E6EE}
.ep h3{font-family:var(--font-head);font-size:17px}
.ep-play{background:linear-gradient(135deg,var(--pink-dark),var(--pink-deep))}
.listen-links a{border-radius:999px;background:#fff;box-shadow:var(--shadow);color:var(--pink-deep)}
.chip{border-color:#E7D9E7;font-weight:600}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink)}
.search-input{border-radius:999px;border:1.5px solid #E8DDEB;padding:14px 22px}
.quiz-statement{font-family:var(--font-head);font-weight:700;color:var(--ink)}
.quiz-choice{border-radius:18px;font-family:var(--font-head);font-size:20px}
.quiz-choice.myth{background:linear-gradient(135deg,var(--pink-dark),var(--pink-deep))}
.quiz-choice.fact{background:linear-gradient(135deg,#2C9FC4,#1E7FA0)}
.quiz-score{font-family:var(--font-head);font-weight:800;color:var(--pink-deep)}
.tag{background:var(--mist);color:var(--ink)}
.reader{border-radius:28px;background:var(--ink)}
.reader-btn{border-radius:999px;background:var(--pink-dark)}
.faq details{border-bottom-color:#F0E6EE}
.thanks{border-radius:24px}
.cal .day{border-radius:12px}

/* ---------- Responsive ---------- */
@media (max-width:1024px){.menu{gap:0}.menu>li>a,.menu .sub-label{padding:8px 10px}}
@media (max-width:820px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .site-nav{border-radius:0 0 26px 26px;padding:12px 24px 26px}
  .menu>li>a,.menu .sub-label{display:block;padding:12px 6px;border-radius:12px}
  .menu>li{border-bottom-color:#F4ECF2}
  .section{padding:68px 0}
  .core-areas{padding:70px 0}
  .hero-home{min-height:600px}
  .hero-page{min-height:300px}
  .engagement{gap:34px;margin:50px 0}
  .split img.rounded{box-shadow:10px 10px 0 var(--blush)}
  .engagement-img{box-shadow:10px 10px 0 var(--blush)}
  .engagement.reverse .engagement-img{box-shadow:-10px 10px 0 var(--mist)}
  .banner{padding:90px 0 100px}
  .cta-box{padding:60px 7%;border-radius:28px}
  .team-card img{height:260px}
}
@media (max-width:560px){
  .container{padding:0 20px}
  .hero-home h1{font-size:clamp(44px,13vw,60px)}
  .hero-home .btn-row .btn{flex:1 1 auto}
  .core-grid{grid-template-columns:1fr}
  .comic{padding:20px}
  .gallery img{height:150px}
}
.menu>li>a:hover:not([aria-current])::after{transform:scaleX(0)}
.wave{color:var(--cream)}
.site-footer .wave{color:var(--ink)}