/* ===========================================================
   Botswana Surgical Society — shared styles
   Brand: navy #202248 · surgical blue #009EE3
   =========================================================== */
/* --- Photo gallery (Projects page) --- */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.gitem{display:block;padding-top:75%;background-size:cover;background-position:var(--focal,center 32%);border-radius:12px;box-shadow:0 1px 5px rgba(32,34,72,.12);transition:transform .2s ease,box-shadow .2s ease}
.gitem:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 8px 22px rgba(32,34,72,.2)}
.gallery-group{margin-top:34px}
.gallery-group:first-of-type{margin-top:8px}
.gallery-group-title{font-family:"Fraunces";font-size:1.15rem;color:var(--ink);margin:0 0 14px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.gallery-group-title span{font-family:"Inter";font-weight:500;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.proj-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pthumb{width:64px;height:64px;border-radius:8px;background-size:cover;background-position:var(--focal,center 28%);box-shadow:0 1px 4px rgba(32,34,72,.15);transition:transform .15s ease}
.pthumb:hover{transform:scale(1.06)}
/* --- Feature media as a real image (reliable rendering) --- */
.feature .media{padding:0;overflow:hidden;position:relative;min-height:360px}
.feature a.media{cursor:pointer;display:block}
.feature .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--focal,center 30%);display:block;transition:transform .4s ease}
.feature a.media:hover img{transform:scale(1.03)}
/* --- Clickable project title + cards --- */
.proj-link{color:inherit;text-decoration:none}
.proj-link:hover{color:var(--blue-deep);text-decoration:underline}
a.proj-card{text-decoration:none;color:inherit;display:flex;flex-direction:column}
a.proj-card .proj-card-photo{display:block;aspect-ratio:16/10;height:auto;min-height:150px;border-radius:10px;margin-bottom:14px;background-size:cover;background-position:var(--focal,center 30%)}
a.proj-card h3{color:var(--ink)}
a.proj-card:hover h3{color:var(--blue-deep)}
a.proj-card:hover{transform:translateY(-3px)}
/* --- Partners / sponsors strip --- */
.partners{padding:46px 0;border-top:1px solid var(--line);background:#fff}
.partners .k{text-align:center;font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 26px}
.plogos{display:flex;flex-wrap:wrap;gap:22px 40px;align-items:center;justify-content:center}
.plogo{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.plogo img{max-height:66px;max-width:190px;width:auto;object-fit:contain;opacity:.85;transition:opacity .25s ease,transform .25s ease}
.plogo:hover img{opacity:1;transform:scale(1.04)}
.plogo-text{font-family:"Fraunces";font-weight:600;color:var(--ink);font-size:1.08rem}
a.plogo:hover .plogo-text{color:var(--blue-deep)}
/* --- "Powered by" credit (footer, centered, bottom) --- */
.powered{text-align:center;margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);font-size:.4rem;color:rgba(255,255,255,.6);letter-spacing:.03em;white-space:nowrap}
.powered a{color:rgba(255,255,255,.85);text-decoration:underline}
.powered a:hover{color:#fff}
/* --- About page "Who we are" — text + photo side by side --- */
.about-intro{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.about-intro.no-photo{display:block;max-width:68ch}
.about-intro-text .lede{font-size:1.3rem;color:var(--ink-2)}
.about-intro-text p{margin-top:14px;color:#3c4a5e;font-size:1.2rem}
.about-photo{width:100%;border-radius:16px;box-shadow:var(--shadow);aspect-ratio:4/3;max-height:460px;object-fit:cover;object-position:var(--focal,center 28%);display:block}
@media(max-width:820px){
  .about-intro{grid-template-columns:1fr;gap:22px}
  .about-photo{aspect-ratio:4/3;max-height:340px}
}
/* --- Objectives icon list (About page) --- */
.objectives{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:14px}
.objectives li{display:flex;gap:14px;align-items:flex-start;line-height:1.6;color:var(--ink-2)}
.objectives .oic{flex:0 0 auto;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:1.2rem;line-height:1;background:linear-gradient(135deg,var(--sky),#cfe6f4);color:var(--blue);box-shadow:inset 0 0 0 1px var(--line)}
.objectives .oic svg{width:20px;height:20px}
/* --- Project photo preview strip --- */
.proj-preview{display:flex;gap:6px;margin-top:16px;flex-wrap:wrap}
.proj-preview .pp{position:relative;width:56px;height:56px;border-radius:8px;background-size:cover;background-position:var(--focal,center 28%);box-shadow:0 1px 4px rgba(32,34,72,.16)}
.proj-preview .pp b{position:absolute;inset:0;display:grid;place-items:center;background:rgba(20,34,72,.58);color:#fff;border-radius:8px;font-size:.9rem;font-weight:700}
/* --- Back link --- */
.back-link{display:inline-block;margin-bottom:22px;color:var(--blue-deep);font-weight:600;text-decoration:none}
.back-link:hover{text-decoration:underline}
/* --- Project detail layout --- */
.project-detail{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.project-lead img{width:100%;border-radius:16px;display:block;box-shadow:var(--shadow);cursor:zoom-in}
.project-body .prose p{margin-top:14px;color:var(--muted)}
@media(max-width:820px){.project-detail{grid-template-columns:1fr}}
/* --- Lightbox --- */
.lightbox{position:fixed;inset:0;background:rgba(10,14,30,.93);display:none;align-items:center;justify-content:center;z-index:1000}
.lightbox.open{display:flex}
.lb-img{max-width:90vw;max-height:86vh;border-radius:8px;box-shadow:0 12px 50px rgba(0,0,0,.55)}
.lb-close{position:absolute;top:14px;right:22px;font-size:2.4rem;line-height:1;background:none;border:0;color:#fff;cursor:pointer;opacity:.85}
.lb-close:hover{opacity:1}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);font-size:3rem;line-height:1;background:none;border:0;color:#fff;cursor:pointer;padding:0 22px;opacity:.75}
.lb-nav:hover{opacity:1}
.lb-prev{left:4px}.lb-next{right:4px}
.lb-count{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#dfe7f5;font-size:.9rem;letter-spacing:.05em}
@media(max-width:640px){.lb-nav{font-size:2.1rem;padding:0 10px}}
:root{
  --ink:#202248;          /* brand navy */
  --ink-2:#2C2F5C;
  --blue:#009EE3;         /* brand surgical blue */
  --blue-deep:#007BB8;
  --sky:#E1F2FB;          /* pale cyan surface */
  --sky-soft:#F1F8FD;
  --gold:#009EE3;         /* action accent — now brand surgical blue */
  --gold-deep:#007BB8;    /* brand blue, darker */
  --paper:#FAFBFC;
  --muted:#5A6B82;
  --line:#DCE6EE;
  --white:#fff;
  --maxw:1180px;
  --r:14px;
  --shadow:0 18px 40px -20px rgba(32,34,72,.30);
  --shadow-sm:0 8px 22px -14px rgba(32,34,72,.35);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:"Inter",system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif;line-height:1.08;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-weight:600;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-deep)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.95rem;padding:.8em 1.4em;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:transform .15s ease,background .2s ease,box-shadow .2s,border-color .2s;text-align:center}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.btn-donate{background:var(--gold);color:#fff}
.btn-donate:hover{background:var(--gold-deep);transform:translateY(-2px)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-deep);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue-deep)}
.btn-light{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.55);backdrop-filter:blur(4px)}
.btn-light:hover{background:rgba(255,255,255,.22)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#171836;transform:translateY(-2px)}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(250,251,252,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:108px;gap:18px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand img{height:27px;width:auto}
.brand img.logo-full{height:72px}
.brand .bt{font-family:"Fraunces";font-weight:600;font-size:1.05rem;color:var(--ink);line-height:1.05;white-space:nowrap}
.brand .bt small{display:block;font-family:"Inter";font-weight:500;font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:2px}
nav.primary ul{list-style:none;display:flex;align-items:center;gap:0}
nav.primary .navlink{position:relative;font-weight:500;font-size:.88rem;padding:.5em .62em;border-radius:8px;color:var(--ink);display:inline-flex;align-items:center;gap:.3em;white-space:nowrap}
nav.primary .navlink:hover{background:var(--sky-soft);color:var(--blue-deep)}
nav.primary .navlink.active{color:var(--blue-deep)}
nav.primary .navlink.active::after{content:"";position:absolute;left:.8em;right:.8em;bottom:.25em;height:2px;background:var(--blue)}
.caret{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:.55}
.has-menu{position:relative}
.dropdown{position:absolute;top:calc(100% + 6px);left:0;min-width:236px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s ease}
.has-menu:hover .dropdown,.has-menu:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:block;padding:.6em .8em;border-radius:8px;font-size:.9rem;color:var(--ink)}
.dropdown a:hover{background:var(--sky-soft);color:var(--blue-deep)}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-cta .btn-ghost{display:none} /* "Get involved" is redundant with Donate + the Work With Us menu */
.menu-toggle{display:none;background:none;border:1px solid var(--line);border-radius:9px;width:46px;height:42px;cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.menu-toggle span{width:20px;height:2px;background:var(--ink);border-radius:2px}
.mobile-nav{display:none;position:fixed;inset:78px 0 0;background:var(--paper);z-index:55;padding:22px 24px;overflow:auto;transform:translateX(100%);transition:transform .25s ease}
.mobile-nav.open{transform:none}
.mobile-nav a{display:block;padding:.8em 0;border-bottom:1px solid var(--line);font-weight:500}
.mobile-nav a.sub{padding-left:16px;font-size:.9rem;color:var(--muted);border-bottom:1px dashed var(--line)}
.mobile-nav .btn{margin-top:18px;width:100%;justify-content:center}

/* ---------- Hero (home) ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(160deg,#191b3d 0%,#202248 45%,#143a5e 100%);color:#fff}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:
   radial-gradient(900px 420px at 82% -10%,rgba(0,159,227,.40),transparent 60%),
   radial-gradient(600px 320px at 8% 115%,rgba(224,152,46,.16),transparent 60%);pointer-events:none}

/* ---- Full-cover hero photo + professional gradient fade ---- */
.hero-photo{position:absolute;inset:0;z-index:0;background-size:cover;background-position:var(--focal,center 30%);
  animation:heroKb 40s ease-in-out infinite;will-change:transform;backface-visibility:hidden}
.hero-video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:var(--focal,center 30%);
  animation:heroKb 40s ease-in-out infinite;will-change:transform;backface-visibility:hidden}
/* Slow cinematic drift: gentle zoom in/out with a subtle diagonal pan (Ken Burns) */
@keyframes heroKb{
  0%   {transform:scale(1.03) translate(0,0)}
  33%  {transform:scale(1.10) translate(-1.5%,-1%)}
  66%  {transform:scale(1.06) translate(1.2%,.7%)}
  100% {transform:scale(1.03) translate(0,0)}
}
.hero.has-photo{min-height:560px}
.hero.has-photo::after{z-index:1;background:
   linear-gradient(90deg,rgba(17,19,42,.97) 0%,rgba(17,19,42,.90) 30%,rgba(19,24,52,.55) 58%,rgba(19,28,58,.12) 100%),
   linear-gradient(180deg,rgba(17,19,42,.55) 0%,rgba(17,19,42,.05) 26%,rgba(15,20,40,.20) 70%,rgba(15,20,40,.82) 100%),
   radial-gradient(900px 420px at 82% -10%,rgba(0,159,227,.28),transparent 60%);pointer-events:none}
.hero.has-photo .hero-grid{grid-template-columns:1fr}
.hero.has-photo .hero-copy{max-width:600px}

.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:84px 0 92px}
.hero h1{font-size:clamp(2.3rem,4.6vw,3.7rem);font-weight:600;color:#fff;letter-spacing:-.02em}
.hero h1 em{font-style:italic;color:#7fd2f5}
.hero .lead{margin-top:20px;font-size:1.12rem;color:#cfe1ef;max-width:36ch}
.hero-cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px}
.hero-note{margin-top:22px;font-size:.85rem;color:#9fb7cc}
.hero-art{position:relative;height:430px;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.18);
   background:linear-gradient(135deg,rgba(0,159,227,.32),rgba(20,24,54,.7)),repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 14px,transparent 14px 28px);
   box-shadow:var(--shadow);display:grid;place-items:center;text-align:center}
.ph{color:#bcd4e6;font-size:.82rem;letter-spacing:.03em;max-width:24ch;padding:18px}
.ph strong{display:block;font-family:"Fraunces";font-size:1.05rem;color:#fff;margin-bottom:6px}
.pula-tag{position:absolute;left:18px;bottom:18px;background:rgba(255,255,255,.92);color:var(--ink);font-size:.72rem;font-weight:600;letter-spacing:.05em;padding:.4em .8em;border-radius:999px}

/* ---------- Page banner (inner pages) ---------- */
.banner{position:relative;overflow:hidden;background:linear-gradient(150deg,#202248,#143a5e);color:#fff;padding:70px 0 62px}
.banner::after{content:"";position:absolute;inset:0;background:radial-gradient(700px 300px at 85% -20%,rgba(0,159,227,.4),transparent 60%);pointer-events:none}

/* Banner with a background photo + gradient fade */
.banner.has-photo{padding:92px 0 79px}
.banner-photo{position:absolute;inset:0;z-index:0;background-size:cover;background-position:var(--focal,center 32%)}
.banner.has-photo::after{background:
   linear-gradient(90deg,rgba(17,19,42,.95) 0%,rgba(17,19,42,.82) 34%,rgba(19,24,52,.5) 64%,rgba(19,28,58,.18) 100%),
   linear-gradient(180deg,rgba(17,19,42,.4) 0%,transparent 35%,rgba(15,20,40,.55) 100%)}
.banner .wrap{position:relative;z-index:2}
body.projects-page .banner.has-photo{padding:120px 0 108px}
body.projects-page .banner-photo{background-position:center top}
.banner .crumb{font-size:.82rem;color:#9fc3e0;margin-bottom:12px}
.banner .crumb a:hover{color:#fff}
.banner h1{font-size:clamp(2rem,4vw,3rem);color:#fff}
.banner p{margin-top:14px;color:#cfe1ef;max-width:58ch;font-size:1.06rem}

/* ---------- Impact ---------- */
/* Impact band: subtle logo watermark behind the stats, matching the tiled
   mark used on .wm-page. Sits under the content (z-index) and is decorative
   only, so it never affects layout or clicks. */
.impact{background:var(--white);border-bottom:1px solid var(--line);position:relative;isolation:isolate}
.impact::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('images/logo-icon.png') 0 0/120px 120px repeat;opacity:.045;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
.impact-inner{padding:64px 0;position:relative;z-index:1}
.impact-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.impact-head h2{font-size:clamp(1.8rem,3vw,2.5rem)}
.impact-head p{color:var(--muted);max-width:46ch}
/* auto-fit, so three stats fill the row instead of leaving a dead 4th column */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.stat{background:linear-gradient(180deg,var(--sky-soft),#fff);border:1px solid var(--line);border-radius:var(--r);padding:28px 24px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:#cfe1ef}
.stat::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:linear-gradient(90deg,var(--blue),var(--ink))}
.stat .num{font-family:"Fraunces";font-weight:700;font-size:clamp(2.1rem,3.4vw,2.9rem);color:var(--ink);line-height:1;letter-spacing:-.02em}
.stat .num .plus{color:var(--blue)}
.stat .label{margin-top:10px;font-size:.92rem;color:var(--muted);font-weight:500}
/* pinned to the card foot so the eyebrows line up across cards of unequal
   text length (they were staggered before) */
.stat .sub{font-size:.72rem;color:var(--blue-deep);margin-top:auto;padding-top:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.placeholder-note{margin-top:22px;font-size:.8rem;color:var(--muted);background:var(--sky-soft);border:1px dashed var(--gold);border-radius:10px;padding:.7em 1em;display:inline-block}

/* ---------- Sections ---------- */
.block{padding:84px 0}
.block.alt{background:var(--sky-soft)}
.block.tight{padding:60px 0}
.sec-head{max-width:62ch;margin-bottom:40px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(1.8rem,3.2vw,2.6rem);margin-top:10px}
.sec-head p{margin-top:14px;color:var(--muted);font-size:1.05rem}
.sec-head p.journey-sub{font-size:1.26rem}
/* Medical Programmes intro — 20% larger than the standard 1.05rem lead. */
.sec-head p.programs-intro{font-size:1.26rem}
.timeline{list-style:none;margin:26px auto 0;padding:0;max-width:760px;position:relative}
.timeline::before{content:"";position:absolute;left:11px;top:8px;bottom:10px;width:2px;background:linear-gradient(var(--blue),var(--sky))}
.tl-item{position:relative;padding:0 0 34px 46px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:4px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px var(--sky)}
.tl-year{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.2rem;color:var(--blue-deep);margin-bottom:5px;line-height:1}
.tl-text{margin:0;color:var(--ink-2);line-height:1.65}
.sec-head p.events-sub{font-size:1.26rem}
.sec-head p.news-sub{font-size:1.26rem}
.sec-head p.how-sub{font-size:1.26rem}
.sec-head p.benefits-sub{font-size:1.26rem}

.lede{font-size:1.16rem;color:var(--ink);max-width:64ch}
.prose{max-width:68ch}
.prose p{margin-top:16px;color:#3c4a5e}
.prose h3{margin-top:30px;font-size:1.35rem}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cards.two-col{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;transition:transform .18s ease,box-shadow .2s;position:relative}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .ic{width:46px;height:46px;border-radius:12px;background:var(--sky);display:grid;place-items:center;margin-bottom:16px;color:var(--blue);font-size:1.2rem}
.card .ic svg{width:22px;height:22px}   /* SVG icons inherit the blue above */
/* .ic-blue was a hack that tinted emoji by hiding the glyph and casting a
   coloured shadow. The icons are SVG now and inherit --blue directly, so the
   rule is gone — it would have made them invisible (color:transparent). */
.card h3{font-size:1.22rem}
.card p{margin-top:10px;color:var(--muted);font-size:.96rem}
.card .more{margin-top:16px;font-weight:600;font-size:.9rem;color:var(--blue-deep);display:inline-flex;gap:.4em;align-items:center}
.card:hover .more{gap:.7em}

/* feature split */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.feature.flip .media{order:2}
.feature .media{min-height:340px;background:linear-gradient(135deg,#16456b,#009EE3);position:relative;display:grid;place-items:center;color:#cfe6f4;text-align:center}
.feature .body{padding:44px}
.feature .body .eyebrow{margin-bottom:12px;display:block}
.feature .body h3{font-size:1.7rem}
.feature .body p{margin-top:14px;color:var(--muted)}
.feature .tags{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
.tag{font-size:.78rem;font-weight:600;color:var(--blue-deep);background:var(--sky);padding:.4em .8em;border-radius:999px}

/* two panels */
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.panel{border-radius:var(--r);padding:34px;border:1px solid var(--line)}
.panel.part{background:linear-gradient(160deg,var(--ink),#16456b);color:#fff}
.panel.vol{background:#fff}
.panel h3{font-size:1.4rem}
.panel.part h3{color:#fff}
.panel p{margin-top:12px;font-size:.98rem}
.panel.part p{color:#cfe1ef}
.panel.vol p{color:var(--muted)}
.panel ul{margin-top:16px;padding-left:0;list-style:none}
.panel li{padding:.35em 0 .35em 1.6em;position:relative;font-size:.96rem}
.panel li::before{content:"\2713";position:absolute;left:0;color:var(--blue);font-weight:700}
.panel.part li::before{color:#7fd2f5}
.panel .btn{margin-top:22px}

/* committee */
.people{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.person{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-align:center}
.person .pic{aspect-ratio:1/1;background:linear-gradient(135deg,var(--sky),#cfe6f4);display:grid;place-items:center;color:var(--blue-deep);font-family:"Fraunces";font-size:2rem;font-weight:700}
.person .meta{padding:18px}
.person h3{font-size:1.05rem}
.person .role{font-size:.85rem;color:var(--blue-deep);font-weight:600;margin-top:4px}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.field{margin-bottom:16px}
.field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);border-radius:10px;padding:.8em .9em;font:inherit;background:#fff;color:var(--ink)}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--blue);border-color:var(--blue)}
.contact-info{background:var(--sky-soft);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.contact-info .row{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.contact-info .row:last-child{border-bottom:none}
.contact-info .ic{width:40px;height:40px;border-radius:10px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--blue);flex:none}
.contact-info .ic svg{width:19px;height:19px}
.contact-info .row strong{display:block;font-size:.92rem}
.contact-info .row span{color:var(--muted);font-size:.92rem}

/* ways to give */
.give{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.give .g{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;text-align:center}
.give .g .amt{font-family:"Fraunces";font-weight:700;font-size:1.8rem;color:var(--ink)}
.give .g p{color:var(--muted);font-size:.92rem;margin-top:8px}

/* partners */
.partners{padding:60px 0;text-align:center}
.partners p.k{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
.plogos{margin-top:26px;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.plogo{border:1px solid var(--line);background:#fff;border-radius:10px;padding:.85em 1.3em;font-weight:600;font-size:.92rem;color:var(--ink);opacity:.9}

/* donate band */
.donate{background:linear-gradient(135deg,var(--blue),var(--ink));color:#fff;text-align:center;padding:74px 0}
.donate h2{font-size:clamp(1.9rem,3.4vw,2.7rem);color:#fff}
.donate p{margin:14px auto 0;max-width:52ch;color:#eaf1f8;font-size:1.27rem}
.donate .btn{margin-top:26px}

/* callout */
.callout{background:linear-gradient(160deg,var(--ink),#16456b);color:#fff;border-radius:18px;padding:48px;text-align:center}
.callout h2{color:#fff;font-size:clamp(1.6rem,3vw,2.3rem)}
.callout p{color:#cfe1ef;margin:12px auto 0;max-width:52ch}
.callout p.lead-text{font-size:1.2rem}
.callout .btn{margin-top:22px}
/* --- Banking details panel (manual-payment confirmation) ---
   Sits inside .callout, whose paragraph colour is a pale blue for a dark
   background. On a white panel that is unreadable, so every colour here is
   set explicitly rather than inherited. A real table keeps the label/value
   pairs aligned instead of relying on white-space:pre-line. */
.paybox{background:#fff;border:1px solid #d7e3ee;border-left:5px solid var(--blue);border-radius:12px;
  padding:20px 24px;margin:18px auto 0;max-width:460px;text-align:left;box-shadow:0 10px 24px -18px rgba(10,20,50,.55)}
.paybox h3{margin:0 0 12px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-deep);font-weight:700}
.paybox table{width:100%;border-collapse:collapse}
.paybox th,.paybox td{padding:7px 0;vertical-align:top;font-size:.95rem;border-bottom:1px solid #eef3f8}
.paybox tr:last-child th,.paybox tr:last-child td{border-bottom:0}
.paybox th{text-align:left;font-weight:500;color:#5A6B82;white-space:nowrap;padding-right:16px;width:44%}
.paybox td{color:var(--ink);font-weight:700}
.paybox td.ref{font-weight:600}
@media(max-width:520px){
  .paybox{padding:16px 18px}
  .paybox table,.paybox tbody,.paybox tr,.paybox th,.paybox td{display:block;width:auto}
  .paybox th{padding:0;border:0;font-size:.76rem;text-transform:uppercase;letter-spacing:.05em}
  .paybox td{padding:0 0 10px;border-bottom:1px solid #eef3f8}
}

/* footer */
footer{background:var(--ink);color:#bcc6dd;padding:64px 0 30px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:32px}
footer h4{font-family:"Inter";font-weight:600;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:16px}
footer a{display:block;color:#bcc6dd;font-size:.92rem;padding:.28em 0}
footer a:hover{color:#fff}
.fbrand{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.fbrand .chip{background:#fff;border-radius:10px;padding:6px;display:grid;place-items:center}
.fbrand .chip img{height:34px}
.fbrand .bt{color:#fff;font-family:"Fraunces";font-weight:600;font-size:1.05rem}
.fbrand .flogo{height:160px;width:auto;max-width:100%}
.fabout{font-size:.92rem;color:#9aa6c4;max-width:34ch}
.fcontact{font-size:.92rem;color:#9aa6c4;line-height:1.55}
.fcontact p{margin:0 0 14px}
.fcontact p:last-child{margin-bottom:0}
.fcontact strong{color:#fff;font-weight:600}
.fbar{margin-top:48px;border-top:1px solid rgba(255,255,255,.12);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.82rem;color:#7e8bab}

/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* responsive */
@media(max-width:1180px){
  nav.primary ul{display:none}
  .menu-toggle{display:flex}
  .mobile-nav{display:block}
}
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:32px;padding:56px 0}
  .hero-art{height:300px}
  .hero.has-photo{min-height:0}
  .hero.has-photo .hero-photo{background-position:center 22%}
  .hero.has-photo::after{background:
     linear-gradient(180deg,rgba(17,19,42,.86) 0%,rgba(17,19,42,.62) 42%,rgba(15,20,40,.55) 70%,rgba(15,20,40,.88) 100%),
     radial-gradient(700px 380px at 80% 0,rgba(0,159,227,.22),transparent 60%)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .people{grid-template-columns:repeat(2,1fr)}
  .feature{grid-template-columns:1fr}
  .feature.flip .media{order:0}
  .feature .media{min-height:220px}
  .two{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .give{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .cards,.cards.two-col{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .nav-cta .btn-ghost{display:none}
  .brand .bt small{display:none}
  /* keep the header on one line: let the name shrink, slim the donate button */
  .wrap{padding:0 16px}
  .nav{gap:10px}
  .brand{flex-shrink:1;min-width:0}
  .brand .bt{font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav-cta{flex-shrink:0}
  .nav-cta .btn-donate{padding:.58em 1em;font-size:.88rem}
  .menu-toggle{width:42px;height:40px}
}
@media(max-width:380px){
  .nav{gap:8px}
  .brand img{height:26px}
  .brand img.logo-full{height:50px}
  .brand .bt{font-size:.8rem}
  .nav-cta .btn-donate{padding:.5em .8em;font-size:.8rem}
  .menu-toggle{width:38px;height:38px}
}
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none;transition:none}
  .hero-photo,.hero-video{animation:none}
  .stat{transition:none}
  .stat:hover{transform:none}
}

/* --- Online donation form (DPO Pay) --- */
.dpo-give{margin:40px auto 0;max-width:680px}
.dpo-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px;box-shadow:var(--shadow)}
.dpo-card h3{font-family:"Fraunces";font-size:1.4rem;color:var(--ink);margin:0 0 6px}
.dpo-card .muted{color:var(--muted);margin:0 0 18px}
.dpo-label{display:block;font-weight:600;color:var(--ink);margin:0 0 10px;font-size:.92rem}
.dpo-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
.dpo-chip{border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font-weight:600;padding:.6em 1.1em;border-radius:999px;cursor:pointer;font-size:.92rem;transition:all .15s}
.dpo-chip:hover{border-color:var(--gold)}
.dpo-chip.on{background:var(--gold);border-color:var(--gold);color:#fff}

/* =============================================
/* --- Membership paid: fee badges + application fee box --- */
.cat-card h3{padding-right:78px}
.cat-fee{position:absolute;top:16px;right:16px;background:var(--sky);color:var(--blue-deep);font-family:"Fraunces";font-weight:600;font-size:1.05rem;padding:.28em .7em;border-radius:10px;line-height:1.05;text-align:right}
.cat-fee small{display:block;font-family:"Inter";font-weight:500;font-size:.58rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.m-feebox{background:var(--sky-soft);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.m-feebox>span{font-weight:600;font-size:.88rem;color:var(--ink)}
.m-feeval{margin-top:4px}
.m-feeval strong{font-family:"Fraunces";font-size:1.3rem;color:var(--blue-deep)}
.m-feeval small{color:var(--muted);font-size:.85rem}
.m-paynote{margin-top:14px;font-size:.86rem;color:var(--muted);background:var(--sky-soft);border:1px solid var(--line);border-radius:10px;padding:12px 14px}

/* --- Membership application form --- */
.m-form{margin-top:28px;max-width:900px}
.m-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 22px}
.m-form .fld{display:flex;flex-direction:column;gap:7px}
.m-form .fld>span{font-size:.82rem;font-weight:600;letter-spacing:.01em;color:var(--ink)}
.m-form .fld>span b{color:var(--blue-deep);font-weight:700;margin-left:1px}
.m-form input,.m-form select,.m-form textarea{width:100%;padding:.72em .85em;border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:.95rem;background:#fff;color:var(--ink);transition:border-color .18s,box-shadow .18s}
.m-form input:focus,.m-form select:focus,.m-form textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,158,227,.15)}
.m-form input::placeholder{color:#9aa8bd}
.m-form input[type=file]{padding:.5em .6em;background:var(--sky-soft);cursor:pointer;color:var(--muted);font-size:.88rem}
.m-form input[type=file]::file-selector-button{font:inherit;font-weight:600;font-size:.84rem;margin-right:12px;padding:.55em 1em;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--blue-deep);cursor:pointer;transition:.18s}
.m-form input[type=file]::file-selector-button:hover{border-color:var(--blue);color:var(--blue)}
.m-col2{grid-column:1 / -1}
.m-feeval{margin-top:4px}
.m-terms{display:flex;align-items:flex-start;gap:11px;margin-top:24px;font-size:.92rem;color:var(--ink-2);line-height:1.55}
.m-terms input{width:18px;height:18px;margin-top:2px;flex:0 0 auto;accent-color:var(--blue)}
.m-submit{margin-top:24px}
.m-alert{border-radius:12px;padding:15px 18px;margin:0 0 22px;font-size:.95rem}
.m-alert.ok{background:#e9f7ef;border:1px solid #a9dcbf;color:#1c6b39}
.m-alert.err{background:#fdecea;border:1px solid #f5b7b1;color:#992222}
@media(max-width:640px){.m-grid{grid-template-columns:1fr}}

/* --- Event registration form --- */
.dpo-form{margin-top:18px}
.dpo-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.dpo-form label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;font-weight:600;color:var(--ink)}
.dpo-form input{width:100%;padding:.72em .85em;border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:.95rem;font-weight:400;background:#fff;color:var(--ink);transition:border-color .18s,box-shadow .18s}
.dpo-form input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,158,227,.15)}
.dpo-form input::placeholder{color:#9aa8bd}
.dpo-form .btn{margin-top:20px}
.dpo-alert{background:#fdecea;border:1px solid #f5b7b1;color:#992222;border-radius:10px;padding:11px 14px;font-size:.92rem;margin:0 0 14px}
.dpo-paylogo{display:flex;align-items:center;gap:10px;margin-top:16px;color:var(--muted);font-size:.8rem}
.dpo-paylogo img{height:26px;width:auto}
@media(max-width:560px){.dpo-grid{grid-template-columns:1fr}}

/* --- Education intro quote block (matches the About page pull-quote) --- */
.edu-quote{margin:0;padding:24px 30px;border-left:4px solid var(--blue);background:var(--sky-soft);border-radius:0 14px 14px 0;font-family:"Fraunces",Georgia,serif;font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.55;color:var(--ink)}
/* Same box, but keeping the body (sans-serif) font */
.edu-box{margin-top:16px;padding:22px 28px;border-left:4px solid var(--blue);background:var(--sky-soft);border-radius:0 14px 14px 0;color:var(--ink-2);font-size:1.05rem;line-height:1.6}
.edu-box p{margin:0}
.edu-box p+p{margin-top:12px}

/* --- Event cards (ASSA-style horizontal listing) --- */
.evx{max-width:960px;margin:0 auto 18px;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .2s ease,transform .2s ease}
.evx:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.evx-main{display:grid;grid-template-columns:1fr 270px}
.evx-body{padding:30px 34px}
.evx-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}
.evx-pill{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 10px;border-radius:999px}
.evx-pill.up{background:#e1f4ff;color:var(--blue-deep)}
.evx-pill.free{background:#e3f6e8;color:#1c7a3b}
.evx-pill.fee{background:#fff4e0;color:#9a6a10}
.evx-pill.info{background:#eef1f6;color:#5A6B82}
/* Published ahead of pricing — details are live, registration is not open. */
.evx-pill.soon{background:#ede9fb;color:#4b3fa7}
.evx-type{font-weight:600;color:var(--muted);font-size:.82rem}
.evx-title{font-family:"Fraunces";font-weight:600;font-size:1.7rem;line-height:1.14;color:var(--ink);letter-spacing:-.01em}
.evx-title a{color:inherit}
.evx-title a:hover{color:var(--blue-deep)}
.evx-dot{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--gold);margin-left:10px;vertical-align:middle}
.evx-desc{margin-top:14px;color:var(--muted);font-size:.98rem;line-height:1.6}
.evx-left{margin-top:12px;font-size:.82rem;font-weight:600;color:var(--blue-deep)}
.evx-meta{border-left:1px solid var(--line);padding:30px 26px;display:flex;flex-direction:column;justify-content:center;gap:18px}
.evx-mrow{display:flex;align-items:center;gap:12px;color:var(--ink);font-size:.98rem}
.evx-mrow svg{width:20px;height:20px;flex:0 0 auto;color:var(--blue)}
.evx-mrow b{font-weight:700;letter-spacing:.03em}
.evx-mrow .mt{color:var(--muted)}
.evx-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px;background:var(--sky-soft);border-top:1px solid var(--line)}
.evx-share{width:42px;height:42px;border:1px solid var(--line);border-radius:9px;background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--muted);position:relative;transition:border-color .15s,color .15s}
.evx-share svg{width:18px;height:18px}
.evx-share:hover{border-color:var(--blue);color:var(--blue-deep)}
.evx-share.copied::after{content:"Copied";position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:.66rem;font-weight:600;padding:3px 8px;border-radius:6px;white-space:nowrap}
.evx-detail{border:1.5px solid var(--line);border-radius:8px;padding:.72em 1.5em;font-weight:600;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);background:#fff;transition:border-color .15s,color .15s,background .15s}
.evx-detail:hover{border-color:var(--blue);color:var(--blue-deep);background:#fff}
@media(max-width:640px){
  .evx-main{grid-template-columns:1fr}
  .evx-meta{border-left:0;border-top:1px solid var(--line);flex-direction:row;flex-wrap:wrap;gap:10px 22px;padding:20px 34px}
  .evx-body{padding:26px 26px 18px}
  .evx-title{font-size:1.4rem}
}

/* --- Event card: flyer poster + clickable card --- */
.evx{cursor:pointer}
.evx-main.has-flyer{grid-template-columns:200px 1fr 260px}
.evx-poster{display:block;background-size:cover;background-position:var(--focal,center 30%);background-color:var(--sky);min-height:100%}
@media(max-width:820px){
  .evx-main.has-flyer{grid-template-columns:1fr}
  .evx-poster{min-height:190px}
}

/* --- RESTORED: floating WhatsApp button --- */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:80;width:56px;height:56px;border-radius:50%;box-shadow:0 10px 26px -8px rgba(37,211,102,.7),0 4px 10px rgba(0,0,0,.18);background:#fff;display:grid;place-items:center;transition:transform .18s ease,box-shadow .18s ease}
.wa-float svg{width:100%;height:100%;border-radius:50%}
.wa-float:hover{transform:scale(1.08) translateY(-2px)}
.wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(37,211,102,.5);animation:waPulse 2.4s infinite}
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}70%{box-shadow:0 0 0 14px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@media(max-width:560px){.wa-float{right:14px;bottom:14px;width:52px;height:52px}}

/* --- RESTORED: homepage highlights --- */
.hl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:8px}
.hl-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease;display:flex;flex-direction:column}
.hl-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.hl-photo{position:relative;aspect-ratio:16/9;height:auto;min-height:160px;background:linear-gradient(135deg,var(--sky),#cfe6f4);background-size:cover;background-position:var(--focal,center 30%);display:grid;place-items:center}
.hl-ph{font-size:.8rem;font-weight:600;color:var(--blue-deep);opacity:.7;letter-spacing:.08em;text-transform:uppercase}
.hl-badge{position:absolute;top:12px;left:12px;background:var(--blue);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.4em .8em;border-radius:999px;box-shadow:0 4px 10px rgba(0,159,227,.35)}
.hl-body{padding:18px 18px 22px}
.hl-body h3{font-size:1.12rem;color:var(--ink)}
.hl-role{margin-top:4px;font-size:.82rem;font-weight:600;color:var(--blue-deep);text-transform:uppercase;letter-spacing:.04em}
.hl-note{margin-top:10px;font-size:.92rem;color:#3c4a5e}
@media(max-width:900px){.hl-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.hl-grid{grid-template-columns:1fr}}

/* --- RESTORED: membership hero + overview --- */
.m-hero{position:relative;background:radial-gradient(1200px 500px at 80% -10%,rgba(0,159,227,.35),transparent),linear-gradient(135deg,#141633 0%,#202248 55%,#123 100%);color:#fff;padding:84px 0 76px;overflow:hidden}
.m-hero::after{display:none}
.m-hero.has-photo{background-size:cover;background-position:var(--focal,center 18%);background-repeat:no-repeat;min-height:560px;display:flex;flex-direction:column;justify-content:center}
.m-hero.has-photo::after{display:none}
.m-hero-inner{position:relative}
.m-hero-copy{max-width:720px}
.m-hero h1{color:#fff;font-size:clamp(2.1rem,4.5vw,3.2rem);margin-top:14px}
.m-hero .lead{color:#d7e2ee;font-size:1.12rem;margin-top:16px;max-width:60ch}
.m-hero .hero-cta{margin-top:26px}
.m-overview{align-items:start;gap:40px}
.m-para{margin-top:14px;color:#3c4a5e;font-size:1.2rem}
.m-obj{list-style:none;margin-top:6px;display:flex;flex-direction:column;gap:12px}
.m-obj li{position:relative;padding-left:26px;color:#eaf2f9;line-height:1.55}
.m-obj li::before{content:"\2713";position:absolute;left:0;top:0;color:#7fd2f5;font-weight:800}

/* --- RESTORED: membership benefits --- */
.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
.benefit-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 22px;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease}
.benefit-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.benefit-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:1.5rem;background:linear-gradient(135deg,var(--sky),#cfe6f4);box-shadow:inset 0 0 0 1px var(--line);margin-bottom:14px;color:transparent;text-shadow:0 0 0 #009ee3}
.check-list{list-style:none;padding-left:0;margin-top:6px}
.check-list li{position:relative;padding:.35em 0 .35em 1.7em;line-height:1.5;color:var(--ink-2)}
.check-list .ck{position:absolute;left:0;top:.35em;color:#009ee3;font-weight:800}
.benefit-card h3{font-size:1.08rem;color:var(--ink)}
.benefit-card p{margin-top:8px;font-size:.92rem;color:#3c4a5e}
@media(max-width:900px){.benefit-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.benefit-grid{grid-template-columns:1fr}}

/* --- RESTORED: membership categories --- */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.cat-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 24px;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease;border-top:3px solid var(--blue)}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.cat-card h3{font-size:1.14rem;color:var(--ink)}
.cat-card p{margin-top:8px;font-size:.94rem;color:#3c4a5e}
@media(max-width:820px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cat-grid{grid-template-columns:1fr}}

/* --- Responsive nav fix: fit the desktop nav in its container, and
       collapse to the hamburger menu earlier so tablets/small laptops
       get the mobile menu instead of an overflowing bar. --- */
header .wrap{max-width:1240px}
/* The header container is 60px wider than the page grid (--maxw) so the desktop
   nav fits on one line. That pushed the logo left of every other section.
   Nudge the brand back onto the 1180px content line so the logo's left edge
   starts exactly where the hero heading — and all body copy — starts.
   100% here is the header wrap's own content width (1240px - 48px padding), so
   the offset is (header width − page-grid width) / 2, capped at 30px, and 0 on
   narrow screens. Percentages, unlike 100vw, exclude the scrollbar. */
header .brand{
  margin-left:clamp(0px, calc((100% - (var(--maxw) - 48px)) / 2), 30px);
}
.nav{gap:14px}
nav.primary ul{gap:2px}
nav.primary .navlink{font-size:.84rem;padding:.46em .5em}
@media(max-width:1200px){
  nav.primary ul{display:none}
  .menu-toggle{display:flex}
  .mobile-nav{display:block}
}
/* Belt-and-braces: never allow a sideways scroll on any screen. */
html,body{max-width:100%;overflow-x:hidden}

/* --- Mini events calendar: base widget styles --- */
.ev-cal{background:#fff;border:1px solid #e3eaf2;border-radius:18px;padding:20px 20px 16px;box-shadow:0 18px 44px -18px rgba(12,14,36,.25)}
.ev-cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.ev-cal-head h3{margin:0;font-size:1.02rem;color:var(--ink)}
.ev-cal-nav{display:flex;gap:6px}
.ev-cal-nav button{width:30px;height:30px;border-radius:9px;border:1px solid #dfe6ee;background:#fff;color:var(--blue-deep);font-size:1.05rem;line-height:1;cursor:pointer;transition:.15s}
.ev-cal-nav button:hover{background:var(--sky);border-color:transparent}
.ev-cal table{width:100%;border-collapse:collapse;table-layout:fixed}
.ev-cal th{padding:6px 0 7px;font-size:.6rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#8a97a8;text-align:center}
.ev-cal td{height:38px;padding:0;text-align:center;font-size:.83rem}
.ev-cal td span,.ev-cal td a{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;text-decoration:none;font-weight:600}
.ev-cal td.has a{background:var(--blue)}
.ev-cal td.has.pastday a{background:#c2ccd8}
.ev-cal-key{display:flex;gap:16px;margin-top:12px;font-size:.72rem;font-weight:600;color:#5A6B82}
.ev-cal-key span{display:inline-flex;align-items:center;gap:6px}
.ev-cal-key i{width:10px;height:10px;border-radius:50%}
.ev-cal-key .k1 i{background:var(--blue)}
.ev-cal-key .k2 i{background:#c2ccd8}

/* --- Homepage News & Events: calendar beside the next-event panel --- */
.ev-top{display:grid;grid-template-columns:380px 1fr;gap:26px;align-items:stretch;margin-bottom:34px}
.ev-next{background:linear-gradient(135deg,var(--ink),var(--ink-2));border-radius:18px;padding:34px 38px;color:#fff;
  display:flex;flex-direction:column;justify-content:center;box-shadow:0 24px 54px -22px rgba(12,14,36,.55)}
.ev-next .eyebrow{color:var(--blue)}
.ev-next h3{margin:8px 0 6px;font-size:1.55rem;color:#fff}
.ev-next-meta{color:#b9c6d8;font-size:.92rem;margin-bottom:18px}
.ev-count{display:flex;gap:12px;margin-bottom:22px}
.ev-count div{min-width:76px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:12px 10px;text-align:center}
.ev-count b{display:block;font-family:"Fraunces",Georgia,serif;font-size:1.7rem;line-height:1;color:#fff}
.ev-count small{display:block;margin-top:5px;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9fb0c4}
/* Light variant — the same countdown on a white card (event detail page).
   Without this the digits inherit the dark-panel styling above and render
   white on white, i.e. invisible. */
.ev-count.light{margin-bottom:16px}
.ev-count.light div{background:var(--sky-soft);border:1px solid var(--line)}
.ev-count.light b{color:var(--ink)}
.ev-count.light small{color:var(--blue-deep)}
@media(max-width:900px){.ev-top{grid-template-columns:1fr}.ev-next{padding:26px 22px}}
@media(max-width:520px){.ev-count{flex-wrap:wrap}.ev-count div{flex:1 1 40%}}

/* --- Events & News banner with calendar on the right --- */
.news-banner .banner-grid{display:grid;grid-template-columns:1fr 360px;gap:44px;align-items:center}
.news-banner .banner-copy{min-width:0}
.news-banner .banner-copy p{max-width:46ch}
.banner-cal{min-width:0}
.banner-cal .ev-cal{margin:0;box-shadow:0 26px 60px -22px rgba(0,0,0,.6);border-color:rgba(255,255,255,.5)}
.ev-next-solo{max-width:660px;margin:0 auto 46px}
@media(max-width:900px){
  .news-banner .banner-grid{grid-template-columns:1fr;gap:26px}
  .banner-cal{max-width:400px}
}
@media(max-width:520px){
  .banner-cal{max-width:none}
  .banner-cal .ev-cal{padding:16px 16px}
  .ev-cal td{height:34px}
}

/* --- Events banner: fixed height, calendar hangs below (not clipped) --- */
.news-banner{overflow:visible}                 /* let the calendar spill outside the banner */
.news-banner .banner-grid{display:block;position:relative}
.news-banner .banner-copy{max-width:640px}
.news-banner .banner-copy p{max-width:46ch}
/* Calendar floats top-right of the banner and overhangs its bottom edge.
   Being absolute, it no longer stretches the banner's height. */
.banner-cal{position:absolute;top:52px;right:0;width:340px;z-index:5}
.banner-cal .ev-cal{margin:0;box-shadow:0 28px 60px -18px rgba(0,0,0,.55)}
.ev-cal{overflow:visible}                        /* show every week row */
.ev-next-solo{max-width:660px;margin:0 auto 46px}
/* Give the events section a little head-room on the right so the overhang
   sits above empty space, then normal content flows beneath. */
#events{padding-top:88px}
@media(max-width:1040px){ .banner-cal{width:320px;top:44px} }
@media(max-width:900px){
  /* On tablet/phone the calendar returns to normal flow under the heading. */
  .banner-cal{position:static;width:auto;max-width:400px;margin-top:26px;z-index:auto}
  #events{padding-top:0}
}
/* keep normal breathing room under the banner on small screens */
@media(max-width:900px){#events{padding-top:48px}}
/* Calendar sits on a white card; force dark text so every date shows even
   when the calendar is placed inside the (white-text) banner. */
.ev-cal{color:var(--ink)}
.ev-cal td span{color:var(--ink)}
.ev-cal td.out span{color:#b9c3d0}
.ev-cal td.today span{color:var(--blue-deep)}
.ev-cal td.has a{color:#fff}
/* "Today" marker: same solid-circle format & size as an event day, highlighted
   with a lighter blue fill (event days stay the strong solid blue). */
.ev-cal td.today span{background:var(--sky);border:0;color:var(--blue-deep);font-weight:700}

/* --- Slim "Next event" strip, floating in the band beside the calendar --- */
.ev-strip{position:absolute;left:0;bottom:-92px;width:calc(100% - 384px);max-width:610px;z-index:4;
  display:flex;align-items:center;gap:15px;text-decoration:none;
  background:linear-gradient(135deg,#141633 0%,#202248 62%,#2b2f66 100%);color:#fff;
  border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:11px 14px;
  box-shadow:0 24px 50px -20px rgba(12,14,36,.75);transition:transform .18s ease,box-shadow .18s ease}
.ev-strip:hover{transform:translateY(-2px);box-shadow:0 30px 58px -18px rgba(12,14,36,.85)}
.ev-strip-badge{flex:0 0 auto;width:52px;height:52px;border-radius:12px;background:var(--blue);
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
  box-shadow:0 8px 18px -6px rgba(0,159,227,.6)}
.ev-strip-badge b{font-family:"Fraunces";font-size:1.35rem;color:#fff}
.ev-strip-badge small{font-size:.56rem;font-weight:700;letter-spacing:.08em;color:#e6f4fc;margin-top:1px}
.ev-strip-main{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.ev-strip-label{font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.ev-strip-title{font-family:"Fraunces";font-size:1.04rem;line-height:1.15;color:#fff;margin:1px 0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-strip-meta{font-size:.78rem;color:#c3d0e8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-strip-count{flex:0 0 auto;display:flex;gap:5px}
.ev-strip-count>span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:8px;
  padding:5px 6px;font-size:.55rem;font-weight:700;letter-spacing:.04em;color:#9fb0d0;
  display:flex;flex-direction:column;align-items:center;line-height:1.15;min-width:30px}
.ev-strip-count b{font-family:"Fraunces";color:#fff;font-size:.95rem}
.ev-strip-cta{flex:0 0 auto;background:var(--gold);color:#fff;font-weight:700;font-size:.78rem;
  padding:.62em 1em;border-radius:999px;white-space:nowrap}
.ev-strip:hover .ev-strip-cta{background:var(--gold-deep)}
@media(max-width:1040px){ .ev-strip{width:calc(100% - 360px);bottom:-84px} }
@media(max-width:900px){
  /* On tablet/phone the strip drops into normal flow under the calendar. */
  .ev-strip{position:static;width:auto;max-width:460px;bottom:auto;margin-top:22px}
  .ev-strip-count{display:none}
}
@media(max-width:520px){
  .ev-strip{flex-wrap:wrap;max-width:none}
  .ev-strip-main{flex:1 1 60%}
  .ev-strip-cta{margin-left:auto}
}

/* --- Latest News list (summary + Read more) --- */
.news-list{display:flex;flex-direction:column;gap:16px;max-width:860px;margin:0 auto}
.news-card{display:grid;grid-template-columns:220px 1fr;gap:0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease}
.news-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.news-card:only-child{max-width:860px}
.news-thumb{display:block;background:var(--sky) center/cover no-repeat;min-height:170px}
.news-body{padding:24px 26px}
.news-card:not(:has(.news-thumb)){grid-template-columns:1fr}
.news-date{font-size:.76rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--blue-deep)}
.news-doc{color:var(--gold-deep)}
.news-title{font-size:1.28rem;margin:6px 0 8px;line-height:1.2}
.news-title a{color:var(--ink)}
.news-title a:hover{color:var(--blue-deep)}
.news-sum{color:#3c4a5e;font-size:.96rem;line-height:1.6}
.news-more{display:inline-block;margin-top:12px;font-weight:700}
@media(max-width:640px){.news-card{grid-template-columns:1fr}.news-thumb{min-height:180px}}

/* --- Article page + inline document viewer --- */
.art-wrap{max-width:900px}
.art-date{margin-top:10px;color:#cfe1ef;font-weight:600;font-size:.9rem}
.banner .art-date{color:#cfe1ef}
.art-lede{font-size:1.15rem;line-height:1.6;color:var(--ink-2);margin:18px 0 24px;padding-left:16px;border-left:3px solid var(--blue)}
.art-body,.doc-html .prose{color:#33405a;line-height:1.75}
.art-body p,.doc-html .prose p{margin-top:14px}
.doc-html .prose h1,.doc-html .prose h2,.doc-html .prose h3{margin:22px 0 8px;color:var(--ink)}
.doc-html .prose img{max-width:100%;height:auto;border-radius:10px;margin:14px 0}
.doc-html .prose table{border-collapse:collapse;width:100%;margin:16px 0}
.doc-html .prose td,.doc-html .prose th{border:1px solid var(--line);padding:8px 10px}
.doc-html .prose ul,.doc-html .prose ol{margin:12px 0 12px 22px}
.doc-view{margin-top:8px;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);background:#f3f5f8}
.doc-frame{width:100%;height:82vh;min-height:520px;border:0;display:block}
.doc-loading{color:var(--muted);padding:26px 0}
.doc-fallback{margin-top:12px;font-size:.9rem;color:var(--muted)}
.doc-fallback a{color:var(--blue-deep);text-decoration:underline}
.doc-legacy{background:var(--sky-soft);border:1px solid var(--line);border-radius:14px;padding:26px}
.art-foot{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}
@media(max-width:640px){.doc-frame{height:72vh;min-height:420px}}

/* Header should NOT follow the scroll — keep it at the top of the page. */
header{position:static}

/* Pin the menu bar to the top of the screen at all times — it never scrolls
   away and never moves. (Overrides the earlier static/sticky rules.) */
header{position:fixed;top:0;left:0;right:0;width:100%;z-index:120}
body{padding-top:78px}
/* Offset in-page anchor jumps so they aren't hidden behind the fixed header. */
html{scroll-padding-top:90px}

/* --- PDF rendered inline as a seamless web article (PDF.js) --- */
.doc-pages{margin-top:8px;display:flex;flex-direction:column;gap:18px}
.pdf-page{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-sm);background:#fff}

/* --- Medical Programs card band: brand sky-blue (#7FD2F5) behind the cards --- */
.block.medprog-band{background:#7FD2F5}
.medprog-band .eyebrow{color:var(--ink)}
.medprog-band .sec-head h2{color:var(--ink)}
.medprog-band .sec-head p{color:#173a52}

/* --- Medical Programmes brand watermark (tiled across the whole page) --- */
body.wm-page::before{content:"";position:fixed;inset:0;background:url('images/logo-icon.png') 0 0/130px 130px repeat;opacity:.05;pointer-events:none;z-index:-1}
body.wm-page{background:var(--paper)}
body.wm-page .block:not(.alt):not(.banner){background:transparent}

/* --- Homepage "Who we are" section background photo --- */
.who-we.has-bg{background-size:cover;background-position:var(--focal,center 30%);background-repeat:no-repeat}
.who-we.has-bg .card{background:rgba(255,255,255,.96);backdrop-filter:blur(2px)}

/* --- Downloads page --------------------------------------------------- */
.dl-toolbar{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin:0 0 30px}
.dl-search{position:relative;flex:1 1 260px;max-width:360px}
.dl-search-ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:.9rem;opacity:.6;pointer-events:none}
.dl-search input{width:100%;padding:.72em 1em .72em 2.5em;border:1.5px solid var(--line);border-radius:999px;font:inherit;font-size:.92rem;background:#fff;transition:border-color .2s,box-shadow .2s}
.dl-search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,158,227,.14)}
.dl-filters{display:flex;flex-wrap:wrap;gap:8px}
.dl-chip{font:inherit;font-size:.82rem;font-weight:600;padding:.5em 1em;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;transition:.18s}
.dl-chip:hover{border-color:var(--blue);color:var(--blue-deep)}
.dl-chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.dl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.dl-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease,border-color .18s}
.dl-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#c9dbe9}
.dl-top{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-bottom:16px}
.dl-ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:1.5rem;background:linear-gradient(135deg,var(--sky),#cfe6f4);box-shadow:inset 0 0 0 1px var(--line)}
.dl-cat{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-deep);background:var(--sky-soft);border:1px solid var(--line);padding:.4em .7em;border-radius:999px;white-space:nowrap}
.dl-title{font-size:1.08rem;line-height:1.25;margin:0}
.dl-desc{color:var(--muted);font-size:.9rem;margin-top:8px;flex:1 1 auto}
.dl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:16px;font-size:.78rem;color:var(--muted)}
.dl-tag{font-weight:700;font-size:.68rem;letter-spacing:.05em;color:#fff;background:var(--ink);padding:.28em .55em;border-radius:6px}
.dl-lock{color:var(--blue-deep);font-weight:600}
.dl-btn{margin-top:20px;justify-content:center;width:100%}
.dl-pager{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:34px}
.dl-page{font:inherit;font-weight:600;min-width:40px;height:40px;padding:0 .6em;border-radius:10px;border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:.18s}
.dl-page:hover{border-color:var(--blue);color:var(--blue-deep)}
.dl-page.on{background:var(--blue);border-color:var(--blue);color:#fff}
.dl-empty{text-align:center;color:var(--muted);padding:30px 0}
.dl-empty-state{text-align:center;padding:56px 20px;border:1px dashed var(--line);border-radius:18px;background:var(--sky-soft)}
.dl-empty-ic{font-size:2.6rem}
.dl-empty-state h2{margin-top:10px}
.dl-empty-state p{color:var(--muted);margin-top:8px}
@media(max-width:560px){.dl-grid{grid-template-columns:1fr}}

/* --- Member Portal ---------------------------------------------------- */
.portal-body{background:var(--paper);min-height:100vh;display:flex;flex-direction:column}
.p-topbar{background:#fff;border-bottom:1px solid var(--line)}
.p-topbar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.p-topbar .brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.p-topbar .brand img{height:30px;width:auto;display:block}
.p-topbar .brand .bt{font-family:"Fraunces",Georgia,serif;font-weight:600;color:var(--ink);font-size:1.02rem}
.p-topnav{display:flex;align-items:center;gap:20px}
.p-topnav a{text-decoration:none;color:var(--muted);font-size:.9rem;font-weight:600;transition:color .18s}
.p-topnav a:hover{color:var(--blue-deep)}
.p-topnav .p-logout{color:var(--blue-deep)}
.p-main{flex:1 0 auto;padding:48px 0}
.p-foot{background:#fff;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem;padding:20px 0;text-align:center}

.p-auth{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;max-width:1000px;margin:0 auto;align-items:stretch}
.p-auth-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:40px}
.p-auth-card h1{color:var(--ink);margin-top:6px}
.p-auth-sub{color:var(--muted);margin-top:8px;line-height:1.55}
.p-form{display:flex;flex-direction:column;gap:16px;margin-top:24px}
.p-form .fld{display:flex;flex-direction:column;gap:7px}
.p-form .fld>span{font-size:.82rem;font-weight:600;color:var(--ink)}
.p-form input[type=email],.p-form input[type=password],.p-form input[type=text]{width:100%;padding:.75em 1em;border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:.95rem;background:#fff;transition:border-color .18s,box-shadow .18s}
.p-form input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,158,227,.14)}
.p-form-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.88rem}
.p-remember{display:flex;align-items:center;gap:8px;color:var(--muted);cursor:pointer}
.p-remember input{accent-color:var(--blue)}
.p-link{color:var(--blue-deep);font-weight:600;text-decoration:none}
.p-link:hover{text-decoration:underline}
.p-form .btn{margin-top:4px}
.p-auth-alt{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:.92rem}
.p-auth-alt a{color:var(--blue-deep);font-weight:600;text-decoration:none}
.p-auth-alt a:hover{text-decoration:underline}

.p-auth-aside{background:linear-gradient(160deg,var(--ink),#16456b);border-radius:var(--r);padding:40px;color:#fff;display:flex;flex-direction:column;justify-content:center;box-shadow:var(--shadow)}
.p-auth-aside h2{color:#fff;font-size:1.5rem;line-height:1.2}
.p-perks{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:15px}
.p-perks li{display:flex;align-items:flex-start;gap:12px;color:#dcecf7;line-height:1.4;font-size:.98rem}
.p-perks li span{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:.8rem;font-weight:700;margin-top:1px}
@media(max-width:760px){.p-auth{grid-template-columns:1fr;gap:20px}.p-auth-card,.p-auth-aside{padding:30px}.p-auth-aside{order:2}}

/* ===========================================================
   FAQ accordion (Membership page)
   Question: brand navy (--ink) · Answer: surgical blue (--blue-deep)
   =========================================================== */
.m-faq-wrap .faq{display:flex;flex-direction:column;gap:16px;max-width:900px}
.faq-item{background:var(--white);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow .28s ease,border-color .28s ease,transform .28s ease}
.faq-item:hover{border-color:#BFDCEF;box-shadow:0 16px 34px -20px rgba(32,34,72,.42);transform:translateY(-2px)}
.faq-item.is-open{border-color:var(--blue);box-shadow:0 20px 40px -22px rgba(0,158,227,.55)}
.faq-q{margin:0;font-family:inherit;font-weight:inherit;letter-spacing:normal}
.faq-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;text-align:left;background:none;border:0;cursor:pointer;padding:24px 26px;font-family:"Fraunces",Georgia,serif;font-size:1.1rem;font-weight:600;line-height:1.35;color:var(--ink);transition:background .25s ease,color .25s ease}
.faq-btn:hover{background:var(--sky-soft);color:var(--blue-deep)}
.faq-item.is-open .faq-btn{background:var(--sky-soft)}
.faq-btn:focus-visible{outline:3px solid var(--blue);outline-offset:-3px;border-radius:18px}
.faq-q-text{flex:1 1 auto}
.faq-ic{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--sky);color:var(--blue-deep);transition:transform .32s cubic-bezier(.4,0,.2,1),background .25s ease,color .25s ease}
.faq-ic svg{width:17px;height:17px;display:block}
.faq-btn:hover .faq-ic{background:#CFE7F6}
.faq-item.is-open .faq-ic{transform:rotate(180deg);background:var(--blue);color:#fff}
.faq-panel{height:0;overflow:hidden;transition:height .32s cubic-bezier(.4,0,.2,1)}
.faq-panel[hidden]{display:none}
.faq-a{padding:2px 26px 26px;color:var(--blue-deep);font-size:1.02rem;line-height:1.72}
.faq-a p{margin:0 0 12px;color:var(--blue-deep)}
.faq-a p:last-child{margin-bottom:0}
.faq-a a{color:var(--blue-deep);font-weight:600;text-decoration:underline}
@media(max-width:640px){
  .m-faq-wrap .faq{gap:12px}
  .faq-item{border-radius:14px}
  .faq-btn{padding:18px 18px;font-size:1rem;gap:12px}
  .faq-ic{width:30px;height:30px}
  .faq-ic svg{width:15px;height:15px}
  .faq-a{padding:0 18px 20px;font-size:.98rem}
}
@media(prefers-reduced-motion:reduce){
  .faq-panel,.faq-ic,.faq-item{transition:none}
}

/* ===========================================================
   CME listing cards + CME detail page
   =========================================================== */
.cme-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px}
.cme-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:26px 26px 22px;box-shadow:var(--shadow-sm);transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s ease,border-color .3s ease}
.cme-card:hover{transform:translateY(-4px);border-color:#BFDCEF;box-shadow:0 22px 44px -24px rgba(32,34,72,.45)}
.cme-card-top{flex:1 1 auto}
.cme-card-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.cme-card-date{font-size:.76rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--blue-deep)}
.cme-chip{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--blue);border-radius:999px;padding:3px 10px;line-height:1.5}
.cme-chip.alt{background:var(--sky);color:var(--blue-deep)}
.cme-card-title{font-size:1.12rem;line-height:1.28;margin:0 0 8px}
.cme-card-title a{color:var(--ink);transition:color .2s ease}
.cme-card-title a:hover{color:var(--blue-deep)}
.cme-card-sum{color:var(--muted);font-size:.97rem;margin:0}

/* preview strip — 3–5 photos pulled from the CME's gallery */
.cme-prev{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:7px;margin:18px 0 4px}
.cme-prev-i{position:relative;display:block;padding-top:74%;border-radius:10px;background-size:cover;background-position:var(--focal,center 30%);box-shadow:0 1px 4px rgba(32,34,72,.16);transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s ease,filter .3s ease}
.cme-prev-i:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 10px 20px -8px rgba(32,34,72,.4);z-index:2}
.cme-prev:hover .cme-prev-i:not(:hover){filter:saturate(.7) brightness(.94)}
.cme-prev-more{position:absolute;inset:0;display:grid;place-items:center;background:rgba(20,34,72,.6);color:#fff;border-radius:10px;font-weight:700;font-size:.95rem;letter-spacing:.02em}
.cme-card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.cme-more{padding:.62em 1.15em;font-size:.9rem}
.cme-more span{transition:transform .25s ease;display:inline-block}
.cme-more:hover span{transform:translateX(3px)}
.cme-card-count{font-size:.8rem;color:var(--muted)}

/* --- CME detail page --- */
.cme-detail{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:40px;align-items:start;margin-top:8px}
.cme-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.cme-badge{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px;background:var(--sky);color:var(--blue-deep)}
.cme-badge.up{background:var(--blue);color:#fff}
.cme-badge.ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}
.cme-lede{font-size:1.22rem;line-height:1.6;color:var(--ink-2);margin:0 0 18px}
.cme-prose p{color:#3c4a5e;font-size:1.06rem;margin-bottom:14px}
.cme-block{margin-top:30px}
.cme-h2{font-size:1.35rem;margin-bottom:14px}
.cme-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cme-list li{display:flex;gap:13px;align-items:flex-start;line-height:1.6;color:var(--ink-2)}
.cme-tick{flex:0 0 auto;width:22px;height:22px;border-radius:50%;margin-top:3px;background:var(--sky);position:relative}
.cme-tick::after{content:"";position:absolute;left:7px;top:5px;width:5px;height:9px;border:solid var(--blue-deep);border-width:0 2px 2px 0;transform:rotate(45deg)}
.cme-list-hl .cme-tick{background:#E4F5E8}
.cme-list-hl .cme-tick::after{border-color:#2E7D4F}
.cme-list-out .cme-tick{background:#FFF2DC}
.cme-list-out .cme-tick::after{border-color:#B47B12}

.cme-aside{display:grid;gap:18px;position:sticky;top:100px}
.cme-facts,.cme-speakers{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow-sm)}
.cme-facts-h{font-size:1.05rem;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.cme-facts dl{margin:0;display:grid;gap:13px}
.cme-facts dl div{display:grid;gap:2px}
.cme-facts dt{font-size:.72rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.cme-facts dd{margin:0;color:var(--ink);font-weight:500}
.cme-facts-btn{width:100%;justify-content:center;margin-top:18px}
.cme-speakers ul{list-style:none;margin:0;padding:0;display:grid;gap:15px}
.cme-speakers li{display:flex;gap:12px;align-items:center}
.cme-sp-photo{flex:0 0 auto;width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:var(--focal,center 22%)}
.cme-sp-initials{display:grid;place-items:center;background:var(--sky);color:var(--blue-deep);font-weight:700;font-size:1.05rem;font-family:"Fraunces",Georgia,serif}
.cme-speakers strong{display:block;color:var(--ink);font-size:.96rem;line-height:1.3}
.cme-speakers span{display:block;color:var(--muted);font-size:.84rem;line-height:1.35}

/* --- Downloadable resources --- */
.cme-res{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.cme-res a{display:flex;align-items:center;gap:15px;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.cme-res a:hover{transform:translateY(-2px);border-color:var(--blue);box-shadow:0 16px 30px -20px rgba(0,158,227,.6)}
.cme-res-ic{flex:0 0 auto;width:46px;height:46px;border-radius:11px;display:grid;place-items:center;background:var(--sky);color:var(--blue-deep);font-size:.66rem;font-weight:700;letter-spacing:.03em}
.cme-res-txt{flex:1 1 auto;min-width:0}
.cme-res-txt strong{display:block;color:var(--ink);font-size:.98rem;line-height:1.3}
.cme-res-txt em{display:block;font-style:normal;color:var(--muted);font-size:.86rem;margin-top:2px}
.cme-res-txt small{display:block;color:var(--muted);font-size:.76rem;margin-top:3px;letter-spacing:.03em}
.cme-res-dl{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--sky);color:var(--blue-deep);font-weight:700;transition:background .25s ease,color .25s ease,transform .25s ease}
.cme-res a:hover .cme-res-dl{background:var(--blue);color:#fff;transform:translateY(2px)}
.cme-foot-nav{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

@media(max-width:960px){
  .cme-detail{grid-template-columns:1fr;gap:28px}
  .cme-aside{position:static;grid-template-columns:1fr}
}
@media(max-width:640px){
  .cme-cards{grid-template-columns:1fr;gap:18px}
  .cme-card{padding:20px 18px 18px;border-radius:14px}
  .cme-prev{gap:5px;margin:15px 0 2px}
  .cme-card-foot{flex-direction:column;align-items:stretch;gap:10px}
  .cme-more{justify-content:center;width:100%}
  .cme-card-count{text-align:center}
  .cme-lede{font-size:1.08rem}
  .cme-facts,.cme-speakers{padding:20px}
  .cme-res{grid-template-columns:1fr}
  .cme-foot-nav{flex-direction:column;align-items:stretch}
  .cme-foot-nav .btn{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .cme-card,.cme-prev-i,.cme-res a,.cme-more span,.cme-res-dl{transition:none}
}

/* --- CME cover image (detail page hero) --- */
.cme-cover{display:block;position:relative;border-radius:18px;overflow:hidden;margin:22px 0 30px;box-shadow:var(--shadow);max-height:420px}
.cme-cover img{width:100%;height:auto;aspect-ratio:16/7;max-height:420px;object-fit:cover;object-position:var(--focal,center 30%);display:block;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.cme-cover:hover img{transform:scale(1.02)}
@media(max-width:640px){
  .cme-cover{border-radius:14px;margin:16px 0 22px;max-height:none}
  .cme-cover img{aspect-ratio:4/3;max-height:none}
}
@media(prefers-reduced-motion:reduce){.cme-cover img{transition:none}}

/* ===========================================================
   Projects — listing blocks, detail page, grouped gallery
   =========================================================== */
.proj-blocks{display:flex;flex-direction:column;gap:34px}
.proj-block{background:var(--white);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s ease,border-color .3s ease}
.proj-block:hover{transform:translateY(-3px);border-color:#BFDCEF;box-shadow:0 26px 50px -28px rgba(32,34,72,.45)}
.proj-block-banner{position:relative;display:block;overflow:hidden;max-height:340px}
.proj-block-banner img{width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;object-position:var(--focal,center 30%);display:block;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.proj-block:hover .proj-block-banner img{transform:scale(1.03)}
.proj-flag{position:absolute;top:16px;left:16px;background:var(--blue);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:6px 13px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.proj-block-body{padding:28px 30px 26px}
.proj-block-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.proj-date{font-size:.76rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--blue-deep)}
.proj-loc{font-size:.82rem;color:var(--muted)}
.proj-loc::before{content:"\1F4CD";margin-right:5px;font-size:.78rem}
.proj-chip{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--blue);border-radius:999px;padding:3px 10px;line-height:1.5}
.proj-chip.alt{background:var(--sky);color:var(--blue-deep)}
.proj-block-title{font-size:1.42rem;line-height:1.24;margin:0 0 10px}
.proj-block-title a{color:var(--ink);transition:color .2s ease}
.proj-block-title a:hover{color:var(--blue-deep)}
.proj-block-sum{color:var(--muted);font-size:1.02rem;line-height:1.65;margin:0;max-width:78ch}
.proj-block-tags{margin-top:14px}

/* preview strip — 3–5 photos pulled from the project's gallery */
.proj-prev{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:9px;margin:20px 0 4px}
.proj-prev-i{position:relative;display:block;padding-top:70%;border-radius:12px;background-size:cover;background-position:var(--focal,center 30%);box-shadow:0 1px 5px rgba(32,34,72,.18);transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s ease,filter .3s ease}
.proj-prev-i:hover{transform:translateY(-4px) scale(1.04);box-shadow:0 14px 26px -10px rgba(32,34,72,.45);z-index:2}
.proj-prev:hover .proj-prev-i:not(:hover){filter:saturate(.7) brightness(.94)}
.proj-prev-more{position:absolute;inset:0;display:grid;place-items:center;background:rgba(20,34,72,.62);color:#fff;border-radius:12px;font-weight:700;font-size:1rem}
.proj-block-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.proj-more span{transition:transform .25s ease;display:inline-block}
.proj-more:hover span{transform:translateX(3px)}
.proj-count{font-size:.82rem;color:var(--muted)}

/* --- Project detail page --- */
.proj-hero{position:relative;display:block;border-radius:20px;overflow:hidden;margin:22px 0 32px;box-shadow:var(--shadow);max-height:440px}
.proj-hero img{width:100%;height:auto;aspect-ratio:16/7;max-height:440px;object-fit:cover;object-position:var(--focal,center 30%);display:block;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.proj-hero:hover img{transform:scale(1.02)}
.proj-detail{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:44px;align-items:start}
.proj-lede{font-size:1.24rem;line-height:1.6;color:var(--ink-2);margin:0 0 20px}
.proj-prose p{color:#3c4a5e;font-size:1.06rem;margin-bottom:14px}
.proj-sec{margin-top:32px}
.proj-h2{font-size:1.38rem;margin-bottom:16px}
.proj-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.proj-list li{display:flex;gap:13px;align-items:flex-start;line-height:1.6;color:var(--ink-2)}
.proj-tick{flex:0 0 auto;width:22px;height:22px;border-radius:50%;margin-top:3px;background:var(--sky);position:relative}
.proj-tick::after{content:"";position:absolute;left:7px;top:5px;width:5px;height:9px;border:solid var(--blue-deep);border-width:0 2px 2px 0;transform:rotate(45deg)}
.proj-list-out .proj-tick{background:#E4F5E8}
.proj-list-out .proj-tick::after{border-color:#2E7D4F}
.proj-impact{margin:0;padding:20px 24px;background:var(--sky-soft);border-left:4px solid var(--blue);border-radius:0 14px 14px 0}
.proj-impact p{margin:0 0 10px;color:var(--ink-2);font-size:1.06rem;line-height:1.65}
.proj-impact p:last-child{margin-bottom:0}

.proj-aside{display:grid;gap:18px;position:sticky;top:100px}
.proj-facts,.proj-partners,.proj-tagbox{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow-sm)}
.proj-facts-h{font-size:1.05rem;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.proj-facts dl{margin:0;display:grid;gap:13px}
.proj-facts dl div{display:grid;gap:2px}
.proj-facts dt{font-size:.72rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.proj-facts dd{margin:0;color:var(--ink);font-weight:500}
.proj-partners ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.proj-partners li{display:flex;gap:11px;align-items:flex-start;color:var(--ink-2);font-size:.96rem;line-height:1.45}
.proj-pt-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--blue);margin-top:7px}
.proj-foot-nav{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* --- Gallery page: jump nav + per-project groups --- */
.gal-jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.gal-jump a{display:inline-flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:.9rem;font-weight:500;color:var(--ink);transition:background .22s ease,border-color .22s ease,color .22s ease,transform .22s ease}
.gal-jump a:hover{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-2px)}
.gal-jump a span{font-size:.74rem;font-weight:700;background:var(--sky);color:var(--blue-deep);border-radius:999px;padding:2px 8px;transition:background .22s ease,color .22s ease}
.gal-jump a:hover span{background:rgba(255,255,255,.25);color:#fff}
.gal-group-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:22px;scroll-margin-top:110px}
.gal-group-title{font-size:1.6rem;margin:8px 0 6px}
.gal-group-title a{color:var(--ink);transition:color .2s ease}
.gal-group-title a:hover{color:var(--blue-deep)}
.gal-group-meta{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0;color:var(--muted);font-size:.9rem}
.gal-group-meta span:not(:last-child)::after{content:"";margin-left:16px;border-left:1px solid var(--line)}
.gal-group-btn{flex:0 0 auto}

@media(max-width:960px){
  .proj-detail{grid-template-columns:1fr;gap:28px}
  .proj-aside{position:static}
  .proj-block-banner img{aspect-ratio:16/8}
  .proj-hero img{aspect-ratio:16/8}
}
@media(max-width:640px){
  .proj-blocks{gap:22px}
  .proj-block{border-radius:14px}
  .proj-block-banner img{aspect-ratio:4/3}
  .proj-block-body{padding:20px 18px 18px}
  .proj-block-title{font-size:1.2rem}
  .proj-block-sum{font-size:.97rem}
  .proj-prev{gap:6px;margin:16px 0 2px}
  .proj-prev-i{border-radius:9px}
  .proj-block-foot{flex-direction:column;align-items:stretch;gap:10px}
  .proj-block-foot .btn{justify-content:center;width:100%}
  .proj-count{text-align:center}
  .proj-hero{border-radius:14px;margin:16px 0 22px}
  .proj-hero img{aspect-ratio:4/3}
  .proj-lede{font-size:1.08rem}
  .proj-facts,.proj-partners,.proj-tagbox{padding:20px}
  .proj-impact{padding:16px 18px}
  .gal-group-head{flex-direction:column;align-items:stretch}
  .gal-group-title{font-size:1.3rem}
  .gal-group-btn{width:100%;justify-content:center}
  .proj-foot-nav{flex-direction:column;align-items:stretch}
  .proj-foot-nav .btn{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .proj-block,.proj-prev-i,.proj-block-banner img,.proj-hero img,.gal-jump a,.proj-more span{transition:none}
}

/* Grid children — min-width:0 stops long words/images forcing overflow */
.cme-detail-main,.proj-detail-main{min-width:0}

/* --- Event page: informational sections (objectives / highlights / outcomes) --- */
.ev-sec{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.ev-sec-h{font-size:1.15rem;margin:0 0 14px}
@media(max-width:640px){.ev-sec{margin-top:20px;padding-top:18px}.ev-sec-h{font-size:1.05rem}}

/* ===========================================================
   Responsive, head-safe image cropping
   -----------------------------------------------------------
   Every cropped image reads its focal point from --focal, which the CMS sets
   per image (see focal_style() in inc/data.php). The fallback biases the crop
   toward the upper third of the photo, because that is where faces sit — a
   centred crop on a tall group photo is what decapitates people.

   Cropped slots use aspect-ratio rather than a fixed pixel height so that a
   narrow screen gets a TALLER box (a gentler crop) instead of a letterbox
   sliver through the middle of the picture.
   =========================================================== */
:root{--focal:center 30%}

/* Committee / person headshots: faces sit higher still in a portrait shot. */
.person .pic{aspect-ratio:1/1;background-size:cover;background-position:var(--focal,center 22%)}
.person .pic img{width:100%;height:100%;object-fit:cover;object-position:var(--focal,center 22%);display:block}

/* Generic helper for any cropped image added later. */
.img-cover{width:100%;height:100%;object-fit:cover;object-position:var(--focal,center 30%);display:block}

/* Portrait-shaped source photos are the ones most at risk in a wide slot;
   on very narrow screens give every hero-type crop more vertical room. */
@media(max-width:520px){
  .banner.has-photo{min-height:300px}
  .cme-cover img,.proj-hero img,.proj-block-banner img{aspect-ratio:1/1;max-height:none}
  .hl-photo{aspect-ratio:4/3}
  a.proj-card .proj-card-photo{aspect-ratio:4/3}
}

/* ===========================================================
   Membership fees (membership.php #fees)
   These previously had no styles at all and fell back to the
   browser's default table rendering.
   =========================================================== */

/* --- Single flat fee: one clear price card --- */
.fee-card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:30px 32px;
  box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.fee-card::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;
  background:linear-gradient(180deg,var(--blue),var(--blue-deep))}
.fee-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.fee-num{font-family:"Fraunces",Georgia,serif;font-size:clamp(2.4rem,5vw,3.2rem);font-weight:600;
  line-height:1;color:var(--ink);letter-spacing:-.02em}
.fee-per{font-size:.9rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-deep)}
.fee-lead{margin:12px 0 0;color:var(--muted);font-size:1rem;line-height:1.6}
.fee-cats{list-style:none;margin:20px 0 0;padding:20px 0 0;border-top:1px solid var(--line);
  display:grid;gap:11px}
.fee-cats li{display:flex;align-items:flex-start;gap:11px;color:var(--ink-2);font-size:1rem;line-height:1.45}
.fee-ck{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:var(--sky);position:relative;margin-top:2px}
.fee-ck::after{content:"";position:absolute;left:6.5px;top:4.5px;width:4px;height:8px;
  border:solid var(--blue-deep);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* --- Different fee per category: clean rows, no table --- */
.fee-rows{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fee-rows li{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--white);border:1px solid var(--line);border-radius:13px;padding:16px 20px;
  box-shadow:var(--shadow-sm);transition:border-color .25s ease,transform .25s ease}
.fee-rows li:hover{border-color:#BFDCEF;transform:translateY(-1px)}
.fee-row-cat{display:flex;flex-direction:column;gap:2px;min-width:0}
.fee-row-cat strong{color:var(--ink);font-weight:600;font-size:1rem;line-height:1.3}
.fee-row-cat small{color:var(--muted);font-size:.82rem}
.fee-row-amt{flex:0 0 auto;font-family:"Fraunces",Georgia,serif;font-size:1.25rem;font-weight:600;
  color:var(--blue-deep);white-space:nowrap;display:flex;align-items:baseline;gap:5px}
.fee-row-amt em{font-family:"Inter",system-ui,sans-serif;font-style:normal;font-size:.76rem;
  font-weight:500;color:var(--muted)}

/* --- Footnote --- */
.fee-foot{display:flex;gap:9px;margin:18px 0 0;padding:13px 16px;background:var(--sky-soft);
  border-radius:11px;color:var(--muted);font-size:.88rem;line-height:1.55}
.fee-foot span{flex:0 0 auto;color:var(--blue-deep);font-size:1rem;line-height:1.35}

@media(max-width:640px){
  .fee-card{padding:24px 20px;border-radius:14px}
  .fee-rows li{flex-direction:column;align-items:flex-start;gap:6px;padding:14px 16px}
  .fee-row-amt{font-size:1.15rem}
}
@media(prefers-reduced-motion:reduce){.fee-rows li{transition:none}}

/* ===========================================================
   Accessibility: skip link + visible keyboard focus everywhere
   =========================================================== */
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--ink);color:#fff;
  padding:12px 22px;border-radius:0 0 10px 0;font-weight:600;text-decoration:none}
.skip-link:focus{left:0}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
.gitem:focus-visible,.cme-prev-i:focus-visible,.proj-prev-i:focus-visible{outline-offset:3px}

/* Gallery tiles now carry a real lazy-loaded <img> instead of a CSS
   background, so large galleries no longer load every photo up front. */
.gitem{position:relative;overflow:hidden}
.gitem>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--focal,center 32%);display:block}

/* --- Registration category picker (profession-based fees) --- */
.dpo-form .tier-pick{display:block;margin-bottom:6px;font-weight:600;color:var(--ink)}
.dpo-form .tier-pick select{width:100%;margin-top:6px;padding:.7em .9em;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff;color:var(--ink)}
.dpo-form .tier-pick select:focus{outline:2px solid var(--blue);outline-offset:1px}
.tier-total{margin:0 0 14px;font-size:.95rem;color:var(--ink);background:var(--sky-soft);border:1px solid var(--line);border-radius:10px;padding:.7em 1em}
.tier-total strong{color:var(--blue-deep)}

/* --- Manual donation confirmation pop-up --- */
.give-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(16,22,45,.6);padding:20px;overflow-y:auto}
.give-modal.on{display:flex}
.give-modal-box{background:#fff;border-radius:16px;max-width:520px;width:100%;padding:30px 32px;position:relative;
  box-shadow:0 30px 60px -30px rgba(10,20,50,.6);text-align:left}
.give-modal-box h2{font-size:1.5rem;margin:0 0 10px;color:var(--ink)}
.give-modal-box p{color:var(--ink-2);font-size:.95rem}
.give-modal-box .paybox{margin:16px 0 0;max-width:none}
.give-modal-x{position:absolute;top:12px;right:14px;width:34px;height:34px;border:0;background:#f2f5f9;border-radius:50%;
  font-size:1.4rem;line-height:1;color:var(--muted);cursor:pointer}
.give-modal-x:hover{background:#e6ebf2;color:var(--ink)}
@media(max-width:520px){.give-modal-box{padding:24px 20px}}

/* --- Contact form feedback + spam honeypot --- */
.form-ok{background:#eaf7ee;border:1px solid #bfe3ca;border-left:4px solid #1e8449;border-radius:12px;padding:18px 22px;margin-bottom:18px}
.form-ok strong{display:block;color:#1e8449;font-size:1.05rem;margin-bottom:4px}
.form-ok p{margin:0;color:var(--ink-2);font-size:.95rem}
.form-err{background:#fdecea;border:1px solid #f5c6c0;border-left:4px solid #c0392b;border-radius:10px;padding:12px 16px;margin-bottom:16px;color:#8e2a20;font-size:.94rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}