:root{
  --pink:#E8125C; --pink-lt:#FF6FA3; --pink-dk:#B80E48; --pink-tint:#FDECF2;
  --ink:#0E1622; --ink-2:#16202E; --text:#232323;
  --body:#5A5A5E; --line:#E6E2E4; --tint:#FAF7F8;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --wrap:1240px; --pad:clamp(3.5rem,7vw,6rem); --r:24px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:hidden;font-family:var(--sans);color:var(--body);line-height:1.75;background:#fff;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--serif);color:var(--text);font-weight:700;line-height:1.14;letter-spacing:-.018em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.08}
h2{font-size:clamp(1.75rem,3.1vw,2.5rem);max-width:26ch}
h3{font-size:1.2rem}
p{margin:0 0 1.05em;font-size:1.04rem;max-width:68ch}
p:last-child{margin-bottom:0}
a{color:var(--pink)}
strong{color:var(--text);font-weight:600}
a:focus-visible,button:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.skip{position:absolute;left:-9999px;background:var(--pink);color:#fff;padding:12px 20px;z-index:999}
.skip:focus{left:12px;top:12px}
.container{width:min(var(--wrap),calc(100% - 44px));margin-inline:auto}

/* header */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);transition:box-shadow .25s}
.site-header.is-stuck{box-shadow:0 6px 24px rgba(26,26,26,.07)}
.header-inner{display:flex;align-items:center;gap:18px;padding:14px 0}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand svg{width:38px;height:38px;flex:none}
.brand b{font-family:var(--serif);font-size:1.12rem;color:var(--pink);font-weight:700;line-height:1.1}
.brand b span{color:var(--text);font-weight:600}
.brand small{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#8A8A8E;font-weight:600}
.primary-nav{margin-left:auto}
.primary-nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;flex-wrap:nowrap}
.primary-nav a{display:block;padding:10px 13px;border-radius:999px;font-weight:600;font-size:.92rem;color:var(--text);text-decoration:none;white-space:nowrap;transition:.2s}
.primary-nav a:hover{background:var(--pink-tint);color:var(--pink)}
.primary-nav a[aria-current="page"]{background:var(--pink);color:#fff}
.header-cta{display:flex;flex-direction:column;padding:8px 18px;border-radius:999px;border:2px solid var(--line);text-decoration:none;flex:none;transition:.2s}
.header-cta:hover{border-color:var(--pink)}
.header-cta__label{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pink);font-weight:700}
.header-cta__num{font-weight:700;color:var(--text);font-size:.98rem;white-space:nowrap}
.nav-toggle{display:none;margin-left:auto;width:48px;height:44px;border:0;background:transparent;cursor:pointer;flex-direction:column;justify-content:center;gap:6px}
.nav-toggle span{display:block;height:3px;background:var(--text);border-radius:2px;transition:.25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;min-height:54px;padding:0 28px;border-radius:999px;background:var(--pink);border:2px solid var(--pink);color:#fff;font-weight:600;font-size:.99rem;text-decoration:none;transition:.22s}
.btn:hover{background:var(--pink-dk);border-color:var(--pink-dk);transform:translateY(-2px);color:#fff}
.btn--outline{background:transparent;color:var(--text);border-color:var(--line)}
.btn--outline:hover{background:transparent;border-color:var(--pink);color:var(--pink)}
.btn--ghost{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.26);color:#fff}
.btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:2rem}

/* sections */
.section{padding:var(--pad) 0}
.section--tint{background:var(--tint)}
.section--dark{background:var(--ink)}
.section--dark h2,.section--dark h3{color:#fff}
.section--dark p{color:#AEB8C4}
.kicker{display:inline-flex;align-items:center;gap:12px;font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--pink);margin:0 0 1.1rem}
/* The rule that used to sit before every kicker has been removed at the
   client's request. The gap goes with it, or the text sits off its margin. */
.kicker{gap:0}
/* Used for the short, weighted lines in the founders' account on Who we are.
   Deliberately not a box: it should read as someone speaking. */
.prose__lead{font-family:var(--serif);font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.45;
  color:var(--ink);font-weight:600;margin:1.6rem 0 1.2rem}

.section-head{max-width:46rem;margin-bottom:3rem}
.section-title{margin-bottom:1.4rem}

/* ===== HERO ===== */
.hero{position:relative;overflow:hidden;background:radial-gradient(115% 92% at 80% 46%,var(--ink-2) 0%,var(--ink) 60%);isolation:isolate}
.hero__grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.2;
  background-image:linear-gradient(to right,rgba(232,18,92,.5) 1px,transparent 1px),linear-gradient(to bottom,rgba(232,18,92,.5) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 62% 76% at 80% 50%,#000 5%,transparent 70%);
  mask-image:radial-gradient(ellipse 62% 76% at 80% 50%,#000 5%,transparent 70%)}
.hero__inner{position:relative;z-index:2;width:min(var(--wrap),calc(100% - 44px));margin-inline:auto;
  display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(1.5rem,3vw,3rem);align-items:center;
  min-height:clamp(500px,62vw,650px);padding:clamp(3rem,6vw,4.5rem) 0 clamp(1rem,2vw,1.5rem)}
.hero__slides{position:relative;display:grid}
.hero__slide{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease,visibility .6s;pointer-events:none}
.hero__slide.is-on{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.hero__dots{grid-area:2/1;display:flex;gap:9px;margin-top:2.25rem}
.hero__dots button{width:11px;height:11px;padding:0;border-radius:999px;cursor:pointer;border:2px solid rgba(255,255,255,.42);background:transparent;transition:.25s}
.hero__dots button.is-on{background:var(--pink);border-color:var(--pink);width:32px}
.hero .kicker{color:var(--pink)}
.hero h1{color:#fff;max-width:16ch;font-size:clamp(2.1rem,4.4vw,3.6rem);letter-spacing:-.025em}
.hero h1 em{font-style:normal;color:var(--pink)}
.hero__lead{color:#C4CBD6;font-size:clamp(.99rem,1.3vw,1.11rem);margin:0 0 2rem;max-width:36rem}
.hero__stage{position:relative;display:flex;justify-content:flex-end;align-items:center}
.hero__heartwrap{position:relative;width:100%;max-width:560px;aspect-ratio:1;display:grid;place-items:center;
  margin-right:clamp(-3rem,-4vw,0rem)}
.hero__heart{position:relative;z-index:2;width:100%;height:100%;overflow:visible;animation:beat 1s ease-in-out infinite;transform-origin:center}
@keyframes beat{0%,55%,100%{transform:scale(1)}38%{transform:scale(1.045)}46%{transform:scale(1.015)}}
.hero__field{position:absolute;z-index:1;width:88%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(232,18,92,.40) 0%,rgba(232,18,92,.13) 42%,rgba(232,18,92,0) 68%);
  animation:field 1s ease-in-out infinite}
@keyframes field{0%,55%,100%{transform:scale(1);opacity:.85}38%{transform:scale(1.13);opacity:1}}
.hero__ring{position:absolute;z-index:1;width:64%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(232,18,92,.5);opacity:0;animation:ring 2s ease-out infinite}
.hero__ring--2{animation-delay:1s}
@keyframes ring{0%{transform:scale(.72);opacity:.6}70%{opacity:.08}100%{transform:scale(1.5);opacity:0}}
.hero__pulse{position:absolute;z-index:3;left:-8%;width:116%;height:34%;top:50%;transform:translateY(-50%);pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.hero__line{fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 7px rgba(255,255,255,.95)) drop-shadow(0 0 16px rgba(232,18,92,.9))}
.hero__dot{fill:#fff;filter:drop-shadow(0 0 9px #fff) drop-shadow(0 0 20px rgba(232,18,92,1))}
.hero__strip{position:relative;z-index:3;border-top:1px solid rgba(255,255,255,.09);background:linear-gradient(180deg,rgba(255,255,255,.028),transparent)}
.hero__stripwrap{width:min(var(--wrap),calc(100% - 44px));margin-inline:auto;display:flex;align-items:center;gap:20px;padding:16px 0 22px}
.hero__tag{display:inline-flex;align-items:center;gap:9px;flex:none;font-size:.69rem;letter-spacing:.15em;text-transform:uppercase;color:#8A94A2;white-space:nowrap}
.hero__tag i{width:7px;height:7px;border-radius:50%;background:var(--pink);font-style:normal;box-shadow:0 0 0 0 rgba(232,18,92,.7);animation:blip 1.5s ease-out infinite}
@keyframes blip{0%{box-shadow:0 0 0 0 rgba(232,18,92,.6)}70%{box-shadow:0 0 0 11px rgba(232,18,92,0)}100%{box-shadow:0 0 0 0 rgba(232,18,92,0)}}
.hero__stripbox{position:relative;flex:1;height:84px;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.hero__stripbox svg{width:100%;height:100%}
.hero__trace{fill:none;stroke:var(--pink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(232,18,92,.6))}
.hero__head{fill:#fff;filter:drop-shadow(0 0 8px rgba(232,18,92,.95))}

/* ===== ARTWORK ===== */
.art{width:100%;height:auto;overflow:visible}

/* --- every illustration on the page is alive --- */
.art--beat{animation:artBeat 1s ease-in-out infinite;transform-origin:center}
@keyframes artBeat{0%,55%,100%{transform:scale(1)}38%{transform:scale(1.055)}46%{transform:scale(1.018)}}

.art--spin{animation:artSpin 9s ease-in-out infinite;transform-origin:center}
@keyframes artSpin{0%,100%{transform:rotate(-4deg) scale(1)}50%{transform:rotate(4deg) scale(1.03)}}

.art--sway{animation:artSway 5s ease-in-out infinite;transform-origin:center bottom}
@keyframes artSway{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.02)}}

.art--glowpulse{animation:artGlow 2.4s ease-in-out infinite;transform-origin:center}
@keyframes artGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(232,18,92,0));transform:scale(1)}
  50%{filter:drop-shadow(0 0 14px rgba(232,18,92,.65));transform:scale(1.03)}}

.art--screen{animation:artScreen 1s ease-in-out infinite;transform-origin:center}
@keyframes artScreen{0%,100%{filter:drop-shadow(0 0 0 rgba(232,18,92,0))}
  38%{filter:drop-shadow(0 0 12px rgba(232,18,92,.7))}}

/* the trace that runs inside every monitor illustration */
.live-trace{filter:drop-shadow(0 0 5px rgba(255,255,255,.8))}
.live-dot{filter:drop-shadow(0 0 6px #fff)}

/* a soft halo behind artwork sitting on light backgrounds */
.artbox::before{animation:artHalo 1s ease-in-out infinite}
@keyframes artHalo{0%,55%,100%{transform:scale(1);opacity:.9}38%{transform:scale(1.12);opacity:1}}
.service__art .art,.quicklink__art .art{width:100%;height:100%}
.artbox{position:relative;display:grid;place-items:center;padding:clamp(1.5rem,3vw,2.5rem)}
.artbox::before{content:"";position:absolute;width:82%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(232,18,92,.20) 0%,rgba(232,18,92,.06) 45%,rgba(232,18,92,0) 70%)}
.artbox .art{position:relative;z-index:1;max-width:340px}
.artbox--float .art{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* quick links */
.quicklinks{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.quicklink{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 26px 26px;text-decoration:none;display:block;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.quicklink::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--pink);transition:width .3s ease}
.quicklink:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(26,26,26,.09);border-color:#D9D3D6}
.quicklink:hover::before{width:100%}
.quicklink__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.quicklink__art{display:block;width:62px;height:62px;flex:none}
.quicklink:hover .art{animation-duration:.7s}
.quicklink__num{color:#C9C2C6;font-weight:700;font-size:1.05rem;font-family:var(--serif)}
.quicklink h3{font-size:1.08rem;margin-bottom:.45em}
.quicklink p{color:var(--body);font-size:.92rem;margin:0;max-width:none}
.quicklink__go{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:.86rem;font-weight:600;color:var(--pink)}
.quicklink:hover .quicklink__go span{transform:translateX(4px)}
.quicklink__go span{transition:transform .25s}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem);align-items:center}
.split--reverse .split__media{order:-1}
.checklist{list-style:none;margin:1.6rem 0 0;padding:0}
.checklist li{position:relative;padding:11px 0 11px 36px;color:#3E3E42}
.checklist li::before{content:"";position:absolute;left:0;top:16px;width:20px;height:20px;border-radius:50%;border:2px solid var(--pink)}
.checklist li::after{content:"";position:absolute;left:6px;top:22px;width:8px;height:4px;border-left:2px solid var(--pink);border-bottom:2px solid var(--pink);transform:rotate(-45deg)}

/* tabs */
.tabs{margin-top:2.5rem}
.tablist{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.tablist::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;font:inherit;font-weight:600;font-size:.95rem;padding:13px 26px;border-radius:999px;border:2px solid var(--line);background:#fff;color:var(--body);cursor:pointer;white-space:nowrap;transition:.22s}
.tab:hover{border-color:var(--pink);color:var(--pink)}
.tab.is-active{background:var(--pink);border-color:var(--pink);color:#fff}
.panel{margin-top:2rem}
.panel[hidden]{display:none}
.panel__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,3vw,3rem);align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.6rem,3vw,2.6rem)}
.dotlist{list-style:none;margin:1.4rem 0 0;padding:0}
.dotlist li{position:relative;padding:11px 0 11px 26px;border-top:1px solid var(--line);font-size:.98rem}
.dotlist li:last-child{border-bottom:1px solid var(--line)}
.dotlist li::before{content:"";position:absolute;left:0;top:20px;width:9px;height:9px;border-radius:50%;background:var(--pink)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:0 0 30px;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s,border-color .25s;overflow:hidden}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(26,26,26,.09);border-color:#D9D3D6}
.card__art{position:relative;background:linear-gradient(160deg,#151F2C,var(--ink));padding:34px;display:grid;place-items:center;overflow:hidden}
.card__art::before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(232,18,92,.28) 0%,rgba(232,18,92,0) 66%);
  animation:artHalo 1s ease-in-out infinite}
.card__art .art{max-width:170px}
.card__body{padding:26px 26px 0;flex:1;display:flex;flex-direction:column}
.card h3{font-size:1.12rem}
.card p{font-size:.96rem;flex:1;max-width:none}
.card__link{display:inline-flex;align-items:center;gap:6px;margin-top:1.1rem;font-weight:600;font-size:.92rem;color:var(--pink);text-decoration:none}
.card:hover .card__link span{transform:translateX(4px)}
.card__link span{transition:transform .25s}

/* services */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:2.25rem 3rem;margin-top:3rem}
.service{padding-top:1.4rem;border-top:2px solid rgba(255,255,255,.22)}
.service__art{position:relative;display:block;width:92px;height:92px;margin-bottom:18px}
.service__art::before{content:"";position:absolute;inset:-14%;border-radius:50%;
  background:radial-gradient(circle,rgba(232,18,92,.26) 0%,rgba(232,18,92,0) 68%);
  animation:artHalo 1s ease-in-out infinite}
.service__art svg{position:relative;z-index:1}
.service h3{font-size:1.12rem}
.service p{font-size:.96rem;margin:0;max-width:none}

/* cta + notice + footer */
.cta-band{background:var(--ink);border-radius:var(--r);padding:clamp(2.5rem,5vw,4rem);text-align:center;position:relative;overflow:hidden}
.cta-band h2{color:#fff;margin-inline:auto}
.cta-band p{color:#AEB8C4;max-width:42rem;margin-inline:auto}
.cta-band .actions{justify-content:center}
.cta-band__art{display:block;position:absolute;right:-50px;bottom:-70px;width:300px;height:300px;opacity:.14;pointer-events:none}
.notice{background:#fff;border:1px solid var(--line);border-left:5px solid var(--pink);border-radius:0 var(--r) var(--r) 0;padding:30px 32px}
.notice h3{font-size:1.1rem}
.notice p{font-size:.94rem}
/* The emergency notice reads better with the three steps drawn beside it.
   One column below 860px so the artwork never squeezes the words. */
.notice--art{display:grid;grid-template-columns:1fr minmax(240px,300px);gap:clamp(1.5rem,4vw,3rem);align-items:center}
.notice__text>*:last-child{margin-bottom:0}
.notice__art img{display:block;width:100%;height:auto}
@media(max-width:860px){
  .notice--art{grid-template-columns:1fr;gap:1.75rem}
  .notice__art img{width:min(100%,320px);margin-inline:auto}
}
.site-footer{background:var(--ink);color:#A7B1BD;padding:var(--pad) 0 0;border-top:4px solid var(--pink)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:44px;padding-bottom:44px}
.footer-brand{display:flex;align-items:center;gap:11px;margin-bottom:18px;text-decoration:none}
.footer-brand svg{width:40px;height:40px;flex:none}
.footer-brand b{font-family:var(--serif);font-size:1.18rem;color:var(--pink);font-weight:700}
.footer-brand b span{color:#fff}
.footer-brand small{display:block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#8B94A0;font-weight:600}
.footer-about p{font-size:.96rem;color:#A7B1BD;max-width:32rem}
.footer-legal{font-size:.85rem;color:#8B94A0;margin-top:1.2rem;max-width:36rem}
.footer-col h4{color:#fff;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1.4em}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin-bottom:11px}
.footer-col a,.footer-contact li{color:#A7B1BD;text-decoration:none;font-size:.95rem}
.footer-col a:hover{color:var(--pink)}
.footer-bottom{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);padding:22px 0}
.footer-bottom p{font-size:.86rem;margin:0;color:#8B94A0}
.to-top{position:fixed;right:22px;bottom:22px;z-index:70;width:48px;height:48px;border-radius:50%;border:0;background:var(--pink);color:#fff;font-size:20px;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(10px);transition:.25s;box-shadow:0 10px 26px rgba(232,18,92,.35)}
.to-top.on{opacity:1;pointer-events:auto;transform:none}

/* responsive */
@media(max-width:1180px){
  .nav-toggle{display:flex}
  .header-cta{display:none}
  .primary-nav{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .3s ease;margin:0}
  .primary-nav.is-open{max-height:70vh;overflow:auto}
  .primary-nav ul{flex-direction:column;gap:0;padding:10px 20px 20px}
  .primary-nav a{padding:14px 12px;border-radius:10px}
  .quicklinks{grid-template-columns:repeat(2,1fr)}
  .hero__heartwrap{max-width:430px}
}
@media(max-width:960px){
  .hero__inner{grid-template-columns:1fr;gap:1.75rem;min-height:0;text-align:center;padding:clamp(2rem,5vw,3rem) 0 clamp(.5rem,2vw,1rem)}
  .hero__stage{order:-1;justify-content:center}
  .hero__heartwrap{max-width:min(380px,70vw)}
  .hero h1{max-width:none;margin-inline:auto}
  .hero__lead{margin-inline:auto}
  .hero .kicker,.hero .actions,.hero__dots{justify-content:center}
  .hero__grid{-webkit-mask-image:radial-gradient(ellipse 95% 42% at 50% 22%,#000 5%,transparent 74%);mask-image:radial-gradient(ellipse 95% 42% at 50% 22%,#000 5%,transparent 74%)}
  .split,.panel__grid{grid-template-columns:1fr}
  .split--reverse .split__media{order:-1}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .container,.hero__inner,.hero__stripwrap{width:min(var(--wrap),calc(100% - 32px))}
  .hero__heartwrap{max-width:min(300px,66vw)}
  .hero h1{font-size:clamp(1.85rem,7.4vw,2.4rem)}
  .hero__stripbox{height:64px}
  .hero__tag{font-size:.64rem}
  .quicklinks{grid-template-columns:1fr}
}
@media(max-width:480px){
  :root{--r:18px}
  .hero__heartwrap{max-width:min(250px,62vw)}
  .hero h1{font-size:1.75rem}
  .actions{flex-direction:column;width:100%}
  .actions .btn{width:100%;justify-content:center;min-height:50px}
  .hero__tag:last-of-type{display:none}
  .hero__stripbox{height:54px}
  .footer-grid{grid-template-columns:1fr}
  .notice{padding:22px 20px;border-radius:0 14px 14px 0}
  .brand small{display:none}
}
@media(max-width:360px){
  .hero__heartwrap{max-width:210px}
  .hero__tag{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .live-dot{display:none}
  html{scroll-behavior:auto}
  .hero__ring{display:none}
  .hero__line{filter:none}
}


/* ===== UNDERSTAND THE CONDITION ===== */

.usec{
  --pink:#E8125C; --pink-lt:#FF6FA3; --pink-dk:#B80E48; --pink-tint:#FDECF2;
  --ink:#0E1622; --text:#232323; --body:#5A5A5E; --line:#E6E2E4; --tint:#FAF7F8;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  display:block;background:var(--tint);padding:clamp(3.5rem,7vw,6rem) 22px;
  font-family:var(--sans);color:var(--body);line-height:1.75;-webkit-font-smoothing:antialiased;
}
.usec *,.usec *::before,.usec *::after{box-sizing:border-box}
.usec__wrap{width:min(1240px,100%);margin-inline:auto}
.usec__head{max-width:48rem;margin-bottom:2.75rem}
.usec__kicker{display:inline-flex;align-items:center;gap:12px;font-size:.76rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--pink);margin:0 0 1.1rem}
.usec__kicker{gap:0}
.usec h2{font-family:var(--serif);color:var(--text);font-weight:700;
  font-size:clamp(1.75rem,3.1vw,2.5rem);line-height:1.14;letter-spacing:-.018em;
  margin:0 0 .55em;max-width:22ch;text-wrap:balance}
.usec__lead{font-size:1.06rem;margin:0;max-width:60ch}

/* tabs */
.u-tablist{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.u-tablist::-webkit-scrollbar{display:none}
.u-tab{flex:0 0 auto;font:inherit;font-weight:600;font-size:.95rem;padding:13px 26px;border-radius:999px;
  border:2px solid var(--line);background:#fff;color:var(--body);cursor:pointer;white-space:nowrap;transition:.22s}
.u-tab:hover{border-color:var(--pink);color:var(--pink)}
.u-tab.is-on{background:var(--pink);border-color:var(--pink);color:#fff}

.u-panel{margin-top:2rem}
.u-panel[hidden]{display:none}
.u-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.75rem,3.5vw,3.25rem);
  align-items:center;background:#fff;border:1px solid var(--line);border-radius:24px;
  padding:clamp(1.75rem,3vw,2.75rem)}
.u-copy h3{font-family:var(--serif);color:var(--text);font-weight:700;font-size:clamp(1.25rem,2vw,1.6rem);
  line-height:1.2;letter-spacing:-.015em;margin:0 0 .6em;max-width:24ch}
.u-copy p{margin:0 0 1.1em;font-size:1.02rem;max-width:60ch}
.u-list{list-style:none;margin:1.4rem 0 0;padding:0}
.u-list li{position:relative;padding:12px 0 12px 28px;border-top:1px solid var(--line);font-size:.98rem}
.u-list li:last-child{border-bottom:1px solid var(--line)}
.u-list li::before{content:"";position:absolute;left:0;top:21px;width:9px;height:9px;border-radius:50%;background:var(--pink)}
.u-list strong{color:var(--text);font-weight:600}
.u-btn{display:inline-flex;align-items:center;gap:9px;min-height:52px;padding:0 28px;margin-top:1.75rem;
  border-radius:999px;background:var(--pink);border:2px solid var(--pink);color:#fff!important;
  font-weight:600;font-size:.98rem;text-decoration:none!important;transition:.22s}
.u-btn:hover{background:var(--pink-dk);border-color:var(--pink-dk);transform:translateY(-2px)}

/* artwork */
.u-art{position:relative;display:grid;place-items:center;padding:clamp(1rem,2vw,1.75rem)}
.u-art::before{content:"";position:absolute;width:86%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(232,18,92,.18) 0%,rgba(232,18,92,.05) 45%,rgba(232,18,92,0) 70%)}
.u-svg{position:relative;z-index:1;width:100%;max-width:330px;height:auto;display:block}
.u-art--float .u-svg{animation:uFloat 6s ease-in-out infinite}
@keyframes uFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* panel 1: beating heart */
.u-art--heart{background:linear-gradient(160deg,#151F2C,var(--ink));border-radius:20px;padding:clamp(1.5rem,3vw,2.5rem)}
.u-art--heart::before{display:none}
.u-heart{position:relative;z-index:2;width:100%;max-width:330px;height:auto;display:block;overflow:visible;
  animation:uBeat 1s ease-in-out infinite;transform-origin:center}
@keyframes uBeat{0%,55%,100%{transform:scale(1)}38%{transform:scale(1.045)}46%{transform:scale(1.015)}}
.u-field{position:absolute;z-index:1;width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(232,18,92,.42) 0%,rgba(232,18,92,.13) 42%,rgba(232,18,92,0) 68%);
  animation:uField 1s ease-in-out infinite}
@keyframes uField{0%,55%,100%{transform:scale(1);opacity:.85}38%{transform:scale(1.13);opacity:1}}
.u-ring{position:absolute;z-index:1;width:58%;aspect-ratio:1;border-radius:50%;
  border:2px solid rgba(232,18,92,.5);opacity:0;animation:uRing 2s ease-out infinite}
.u-ring--2{animation-delay:1s}
@keyframes uRing{0%{transform:scale(.72);opacity:.6}70%{opacity:.08}100%{transform:scale(1.5);opacity:0}}
.u-cross{position:absolute;z-index:3;left:6%;width:88%;height:30%;top:50%;transform:translateY(-50%);
  pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.u-crossline{fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 7px rgba(255,255,255,.95)) drop-shadow(0 0 16px rgba(232,18,92,.9))}
.u-crossdot{fill:#fff;filter:drop-shadow(0 0 9px #fff) drop-shadow(0 0 20px rgba(232,18,92,1))}

/* panel 2: warning marks */
.u-chest{animation:uChest 2.4s ease-in-out infinite;transform-origin:300px 352px}
@keyframes uChest{0%,100%{opacity:.6;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
.u-warn{animation:uWarn 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.u-warn--1{animation-delay:0s}
.u-warn--2{animation-delay:.5s}
.u-warn--3{animation-delay:1s}
@keyframes uWarn{0%,100%{opacity:.45}50%{opacity:1}}

/* panel 3: monitor */
.u-mon{fill:none;stroke:#FF6FA3;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(232,18,92,.85))}
.u-mondot{fill:#fff;filter:drop-shadow(0 0 8px #fff) drop-shadow(0 0 16px rgba(232,18,92,1))}
.u-led{animation:uLed 1s ease-out infinite}
@keyframes uLed{0%,100%{opacity:.35}38%{opacity:1}}

/* panel 4 */
.u-inner{animation:uInner 1s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes uInner{0%,55%,100%{transform:scale(1)}38%{transform:scale(1.06)}}

/* responsive */
@media(max-width:960px){
  .u-grid{grid-template-columns:1fr}
  .u-art{order:-1}
  .u-svg,.u-heart{max-width:250px}
}
@media(max-width:600px){
  .usec{padding-left:15px;padding-right:15px}
  .u-tab{padding:11px 20px;font-size:.9rem}
  .u-svg,.u-heart{max-width:200px}
  .u-btn{width:100%;justify-content:center}
  .u-grid{padding:1.4rem;border-radius:18px}
}
@media(prefers-reduced-motion:reduce){
  .u-heart,.u-field,.u-ring,.u-chest,.u-warn,.u-led,.u-inner,.u-art--float .u-svg{animation:none}
  .u-ring{display:none}
  .u-btn:hover{transform:none}
}
/* ==========================================================================
   INNER PAGES
   ========================================================================== */
.pagehead{position:relative;overflow:hidden;background:radial-gradient(115% 100% at 78% 50%,var(--ink-2) 0%,var(--ink) 62%);isolation:isolate}
.pagehead__grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.18;
  background-image:linear-gradient(to right,rgba(232,18,92,.5) 1px,transparent 1px),linear-gradient(to bottom,rgba(232,18,92,.5) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 60% 88% at 82% 50%,#000 5%,transparent 72%);
  mask-image:radial-gradient(ellipse 60% 88% at 82% 50%,#000 5%,transparent 72%)}
.pagehead__inner{position:relative;z-index:2;width:min(var(--wrap),calc(100% - 44px));margin-inline:auto;
  display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(1.5rem,3vw,3rem);align-items:center;
  padding:clamp(3rem,6vw,5rem) 0}
.crumb{display:flex;gap:10px;align-items:center;margin:0 0 1.1rem;font-size:.84rem;color:#8A94A2;flex-wrap:wrap}
.crumb a{color:#C4CBD6;text-decoration:none}
.crumb a:hover{color:#fff}
.crumb span{opacity:.5}
.pagehead h1{color:#fff;max-width:18ch;margin-bottom:.5em}
.pagehead__lead{color:#C4CBD6;font-size:clamp(1rem,1.4vw,1.14rem);max-width:44rem;margin:0}
.pagehead__art{position:relative;display:flex;justify-content:flex-end;align-items:center}
.pagehead__art .art{max-width:300px;width:100%}
.pagehead__art::before{content:"";position:absolute;width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(232,18,92,.32) 0%,rgba(232,18,92,.08) 45%,rgba(232,18,92,0) 70%);
  animation:artHalo 1s ease-in-out infinite}

/* pillars: goal / vision / mission */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pillar{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:36px 30px;transition:transform .25s,box-shadow .25s,border-color .25s}
.pillar:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(26,26,26,.09);border-color:#D9D3D6}
.pillar__art{position:relative;display:block;width:84px;height:84px;margin-bottom:18px}
.pillar__art::before{content:"";position:absolute;inset:-14%;border-radius:50%;
  background:radial-gradient(circle,rgba(232,18,92,.24) 0%,rgba(232,18,92,0) 68%);animation:artHalo 1s ease-in-out infinite}
.pillar__art svg{position:relative;z-index:1}
.pillar h2{font-size:1.45rem;max-width:none}
.pillar--dark{background:var(--ink);border-color:var(--ink)}
.pillar--dark h2{color:#fff}
.pillar--dark p{color:#AEB8C4}

/* numbered objectives */
.objlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:22px;margin-top:3rem}
.obj{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px 28px;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.obj::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--pink);transition:width .35s ease}
.obj:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(26,26,26,.09);border-color:#D9D3D6}
.obj:hover::before{width:100%}
.obj__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.obj__art{position:relative;display:block;width:64px;height:64px}
.obj__art::before{content:"";position:absolute;inset:-16%;border-radius:50%;
  background:radial-gradient(circle,rgba(232,18,92,.24) 0%,rgba(232,18,92,0) 68%);animation:artHalo 1s ease-in-out infinite}
.obj__art svg{position:relative;z-index:1}
.obj__num{font-family:var(--serif);font-size:2rem;font-weight:700;color:#EDE7EA;line-height:1}
.obj h3{font-size:1.14rem}
.obj p{font-size:.97rem;max-width:none;margin:0}

/* team */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:24px;margin-top:3rem}
.member{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:0 0 28px;overflow:hidden;text-align:center;transition:transform .25s,box-shadow .25s,border-color .25s}
.member:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(26,26,26,.09);border-color:#D9D3D6}
.member__art{background:linear-gradient(160deg,#151F2C,var(--ink));padding:30px;display:grid;place-items:center;position:relative;overflow:hidden}
.member__art::before{content:"";position:absolute;width:74%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(232,18,92,.28) 0%,rgba(232,18,92,0) 66%);animation:artHalo 1s ease-in-out infinite}
.member__art .art{max-width:110px;position:relative;z-index:1}
.member__body{padding:24px 22px 0}
.member h3{font-size:1.1rem;margin-bottom:.2em}
.member__role{color:var(--pink);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1em}
.member p{font-size:.93rem;max-width:none}

/* awareness gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:22px;margin-top:3rem}
.gal{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.gal:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(26,26,26,.09);border-color:#D9D3D6}
.gal__art{position:relative;background:linear-gradient(160deg,#151F2C,var(--ink));aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.gal__art::before{content:"";position:absolute;width:72%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(232,18,92,.3) 0%,rgba(232,18,92,0) 66%);animation:artHalo 1s ease-in-out infinite}
.gal__art .art{max-width:64%;position:relative;z-index:1}
.gal__body{padding:22px 22px 24px}
.gal h3{font-size:1.05rem;margin-bottom:.35em}
.gal p{font-size:.92rem;max-width:none;margin:0}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.field{margin-bottom:20px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
label{display:block;font-weight:600;color:var(--text);margin-bottom:8px;font-size:.95rem}
input,textarea{width:100%;font:inherit;padding:14px 16px;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--text)}
input:focus,textarea:focus{border-color:var(--pink);outline:none}
.form-note{font-size:.86rem;margin-top:1rem;color:#7B848E}
.contact-side{background:var(--tint);border:1px solid var(--line);border-radius:var(--r);padding:30px 28px}
.contact-list{list-style:none;margin:0;padding:0}
.contact-list li{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.contact-list li:last-child{border-bottom:0}
.contact-list__art{position:relative;width:44px;height:44px;flex:none}
.contact-list strong{display:block;color:var(--text);font-size:.95rem;margin-bottom:2px}
.contact-list a,.contact-list span{font-size:.95rem;color:var(--body);text-decoration:none}
.contact-list a:hover{color:var(--pink)}

/* prose */
.prose h3{margin-top:2rem}
.prose h3:first-child{margin-top:0}

@media(max-width:960px){
  .pagehead__inner{grid-template-columns:1fr;text-align:center;gap:2rem}
  .pagehead__art{order:-1;justify-content:center}
  .pagehead__art .art{max-width:210px}
  .pagehead h1{max-width:none;margin-inline:auto}
  .pagehead__lead{margin-inline:auto}
  .crumb{justify-content:center}
  .pillars{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .field-row{grid-template-columns:1fr}
  .pagehead__art .art{max-width:170px}
}

/* ============================================================
   Added for the dynamic site: donate button, gallery, forms.
   ============================================================ */

/* Header now carries two actions, so the row has to be told how to give way:
   the nav tightens first, then the phone pill goes, and the Donate button
   survives all the way down to the smallest screen. */
.header-actions{display:flex;align-items:center;gap:10px;flex:none}
.brand{flex:none}
.brand b,.brand small{white-space:nowrap}
.primary-nav{min-width:0}

/* The container caps at 1240px however wide the screen is, so the full menu,
   the Donate button and the phone pill cannot all fit. On desktop the menu and
   Donate win; the number is still in the footer and on the contact page. Below
   the nav breakpoint the menu becomes a burger and the phone pill comes back,
   which is where tapping to call matters most anyway. */
@media(min-width:1501px){
  /* Nine capitalised labels plus NEWS need more room than the usual
     1240px column, so the header alone is allowed to run wider. */
  .header-inner{width:min(1580px,calc(100% - 40px));gap:10px}
  .primary-nav a{padding:9px 8px;font-size:.78rem;letter-spacing:0}
  .header-cta{display:none}
}
.btn--sm{min-height:44px;padding:0 20px;font-size:.9rem}
.btn--wide{width:100%;justify-content:center}
.btn[disabled]{opacity:.5;pointer-events:none}

/* the donate button, deliberately the loudest thing on the page */
.btn--donate{background:linear-gradient(135deg,#F02168,#B80E48);border-color:#C20E4E;color:#fff;
  box-shadow:0 8px 22px rgba(232,18,92,.32)}
.btn--donate:hover{background:linear-gradient(135deg,#FF3D7F,#9E0A3E);border-color:#9E0A3E;color:#fff;
  box-shadow:0 12px 28px rgba(232,18,92,.42)}
.btn--donate:focus-visible{outline:3px solid #FF8DB4;outline-offset:3px}

/* Below the nav breakpoint the menu becomes a burger. That frees the room the
   Donate button needs, so it stays visible right down to a phone — the phone
   pill is what gives way, since the burger menu and the footer both carry the
   number anyway. */
@media(max-width:1180px){
  .header-inner{flex-wrap:nowrap;gap:10px}
  .header-actions{margin-left:auto;order:2}
  .nav-toggle{margin-left:0;order:3;width:44px}
}
@media(max-width:820px){
  .header-cta{display:none}
}
@media(max-width:640px){
  .brand{min-width:0}
  .brand > span{min-width:0;overflow:hidden}
  .brand b{font-size:.95rem}
  .brand b span{display:none}          /* "The Brugada" alone still reads */
  .brand small{display:none}
  .header-donate{padding:0 15px;font-size:.85rem;min-height:40px}
  .header-donate span{display:none}    /* drop the heart, keep the words */
}
@media(max-width:430px){
  .brand > span{display:none}          /* heart only — cannot overflow */
  .brand svg{width:34px;height:34px}
  .header-inner{padding:11px 0;gap:8px}
}

/* flash strips */
.site-flash{margin:18px 0;padding:14px 18px;border-radius:14px;font-size:.95rem;border:1px solid}
.site-flash--success{background:#EAF7EF;border-color:#BFE4CE;color:#0A5E31}
.site-flash--warning{background:#FFF7E6;border-color:#F2DFB4;color:#7A5300}
.site-flash--danger{background:#FDECF0;border-color:#F3C6D3;color:#8E0837}
.admin-strip{background:var(--ink);color:#fff;text-align:center;padding:10px 16px;font-size:.88rem}
.admin-strip a{color:#FF8DB4}

/* forms */
.site-form .field__error{display:block;margin-top:7px;font-size:.86rem;color:#C4123C;font-weight:600}
.site-form .field--check{display:flex;gap:11px;align-items:flex-start}
.site-form .field--check input{width:auto;flex:none;margin-top:5px;accent-color:var(--pink)}
.site-form .field--check label{margin:0;font-weight:500;font-size:.94rem;color:var(--body)}
.site-form fieldset{border:0;padding:0;margin:0 0 24px}
.site-form legend{font-weight:600;color:var(--text);font-size:.95rem;margin-bottom:12px;padding:0}
.form-success{background:#EAF7EF;border:1px solid #BFE4CE;border-radius:var(--r);padding:28px 30px}
.form-success h3{color:#0A5E31;margin-bottom:.4em}
.form-success p{color:#14603A;margin-bottom:0}
.form-error{background:#FDECF0;border:1px solid #F3C6D3;border-radius:16px;padding:16px 20px;margin-bottom:24px;color:#8E0837;font-size:.95rem}
.form-error a{color:#8E0837;font-weight:600}
/* honeypot: off-screen but reachable to a bot, invisible to a person */
.hp-field{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.muted-note{color:#8A8A8E;font-style:italic}

/* ---------------------------------------------------------- donate page */
.donate-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
/* while the card form is on screen, use one centred column so Stripe's
   fields have room and everything stays comfortable on a phone */
.donate-layout--pay{grid-template-columns:1fr;max-width:640px;margin-inline:auto}
.donate-embed{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.1rem,4.5vw,2rem);box-shadow:0 14px 34px rgba(14,22,34,.07)}
.donate-embed .donate-form__sub{font-size:clamp(1.15rem,4.5vw,1.35rem)}
.donate-embed #checkout{width:100%;min-height:340px}
.donate-layout--pay .donate-side{margin-top:1.6rem}
.donate-form__sub{margin:2.4rem 0 1.2rem;font-size:1.15rem}
.secure-note{display:flex;gap:9px;align-items:flex-start;color:#4B7A5C}

.freq-toggle{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.freq-toggle__opt{position:relative;margin:0}
.freq-toggle__opt input{position:absolute;opacity:0;width:1px;height:1px}
.freq-toggle__opt span{display:block;border:2px solid var(--line);border-radius:16px;padding:16px 18px;cursor:pointer;transition:.2s}
.freq-toggle__opt strong{display:block;color:var(--text);font-size:1rem}
.freq-toggle__opt small{display:block;color:#8A8A8E;font-size:.84rem;line-height:1.5;margin-top:2px}
.freq-toggle__opt input:checked + span{border-color:var(--pink);background:var(--pink-tint)}
.freq-toggle__opt input:focus-visible + span{outline:3px solid var(--pink);outline-offset:2px}

.amount-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:12px}
.amount-opt{position:relative;margin:0}
.amount-opt input{position:absolute;opacity:0;width:1px;height:1px}
.amount-opt span{display:block;border:2px solid var(--line);border-radius:14px;padding:15px 14px;text-align:center;cursor:pointer;transition:.2s}
.amount-opt strong{display:block;font-family:var(--serif);font-size:1.35rem;color:var(--text)}
.amount-opt small{display:block;font-size:.78rem;color:#8A8A8E;line-height:1.4;margin-top:3px}
.amount-opt input:checked + span{border-color:var(--pink);background:var(--pink-tint)}
.amount-opt input:checked + span strong{color:var(--pink)}
.amount-opt input:focus-visible + span{outline:3px solid var(--pink);outline-offset:2px}
.custom-amount{margin-top:16px}
.giftaid-panel{border-left:3px solid var(--pink-tint);padding-left:20px;margin-bottom:22px}

.donate-side{position:sticky;top:100px;display:grid;gap:20px}
.donate-side__card{background:var(--tint);border:1px solid var(--line);border-radius:var(--r);padding:28px 30px}
.donate-side__card h2{font-size:1.3rem}
.donate-side__card--quiet{background:#fff}
.donate-side .give-list{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.65rem}
.donate-side .give-list li{position:relative;padding-left:1.5rem;font-size:.95rem;line-height:1.45}
.donate-side .give-list li::before{content:"";position:absolute;left:0;top:.55em;width:.5rem;height:.5rem;border-radius:50%;background:var(--pink)}
.donate-side__photo{padding:0;overflow:hidden}
.donate-side__photo img{display:block;width:100%;height:auto;max-height:230px;object-fit:cover}
.donate-side__photo p{margin:0;padding:14px 20px;font-weight:600}
.donate-impact{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:14px}
.donate-impact li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline}
.donate-impact strong{font-family:var(--serif);color:var(--pink);font-size:1.15rem;white-space:nowrap}
.donate-impact span{font-size:.92rem;line-height:1.6}

.thanks-card{max-width:44rem;margin-inline:auto;text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(2.5rem,5vw,3.5rem)}
.thanks-card__mark{width:120px;margin:0 auto 1.5rem}
.thanks-card p{margin-inline:auto}
.thanks-card .actions{justify-content:center}
.thanks-detail{display:grid;gap:12px;margin:2rem auto;max-width:26rem;text-align:left}
.thanks-detail div{display:grid;grid-template-columns:auto 1fr;gap:16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.thanks-detail dt{color:#8A8A8E;font-size:.88rem}
.thanks-detail dd{margin:0;font-weight:600;color:var(--text)}

/* donation band on the home page */
.section--donate{background:var(--tint)}
.donate-band{position:relative;overflow:hidden;background:var(--ink);border-radius:var(--r);
  padding:clamp(2.5rem,5vw,3.8rem);display:grid;grid-template-columns:1.35fr .65fr;gap:2rem;align-items:center}
.donate-band h2{color:#fff}
.donate-band p{color:#AEB8C4}
.donate-band__art{width:min(210px,100%);margin-inline:auto;opacity:.9}
.donate-chips{display:flex;flex-wrap:wrap;gap:11px;margin-top:1.6rem}
.donate-chip{display:flex;flex-direction:column;gap:2px;padding:12px 20px;border-radius:14px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);text-decoration:none;transition:.2s}
.donate-chip:hover{background:#fff;border-color:#fff}
.donate-chip strong{color:#fff;font-family:var(--serif);font-size:1.15rem}
.donate-chip span{color:#AEB8C4;font-size:.78rem}
.donate-chip:hover strong{color:var(--ink)}
.donate-chip:hover span{color:#5A5A5E}

/* ------------------------------------------------------------- gallery */
.gallery-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:2rem}
.gallery-filter__btn{font:inherit;font-size:.9rem;font-weight:600;padding:10px 20px;border-radius:999px;
  border:2px solid var(--line);background:#fff;color:var(--text);cursor:pointer;transition:.2s}
.gallery-filter__btn:hover{border-color:var(--pink);color:var(--pink)}
.gallery-filter__btn.is-on{background:var(--pink);border-color:var(--pink);color:#fff}

.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));gap:20px}
.gallery-item{margin:0;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  transition:transform .25s,box-shadow .25s,border-color .25s}
.gallery-item:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(26,26,26,.1);border-color:#D9D3D6}
.gallery-item[hidden]{display:none}
/* A square tile suits a mixed set of portrait, square and landscape
   photographs better than a fixed landscape crop, and keeps the grid even.
   The aspect is set on the button so the width/height attributes on the image
   cannot fight it. */
.gallery-item__btn{display:block;width:100%;padding:0;border:0;background:#F3EFF1;cursor:zoom-in;position:relative;line-height:0;aspect-ratio:1}
.gallery-item__btn img{width:100%;height:100%;object-fit:cover;object-position:center}
.gallery-item__zoom{position:absolute;right:12px;bottom:12px;width:34px;height:34px;border-radius:50%;
  background:rgba(14,22,34,.72);color:#fff;display:grid;place-items:center;font-size:20px;line-height:1;
  opacity:0;transition:.2s}
.gallery-item:hover .gallery-item__zoom,.gallery-item__btn:focus-visible .gallery-item__zoom{opacity:1}
.gallery-item figcaption{padding:16px 18px;font-size:.9rem;line-height:1.6;color:var(--body)}
.gallery-item figcaption strong{display:block;color:var(--text);margin-bottom:2px}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(9,13,20,.94);display:grid;
  grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:clamp(1rem,4vw,3rem)}
.lightbox[hidden]{display:none}
.lightbox__figure{margin:0;display:grid;place-items:center;gap:14px;max-height:100%;min-width:0}
.lightbox__figure img{max-width:100%;max-height:78vh;border-radius:12px;object-fit:contain}
.lightbox__figure figcaption{color:#D6DBE2;font-size:.94rem;text-align:center;max-width:52ch}
.lightbox__close,.lightbox__nav{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  color:#fff;width:52px;height:52px;border-radius:50%;font-size:26px;line-height:1;cursor:pointer;transition:.2s}
.lightbox__close:hover,.lightbox__nav:hover{background:#fff;color:var(--ink)}
.lightbox__close{position:absolute;top:20px;right:20px;font-size:30px}

/* photographs in team cards */
.member__art--photo{padding:0;background:#F3EFF1}
.member__art--photo img{width:100%;aspect-ratio:1;object-fit:cover}

/* footer extras */
.footer-social{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 0;padding:0}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:.88rem;transition:background .2s,color .2s,transform .2s}
.footer-social a:hover,.footer-social a:focus-visible{background:var(--pink);color:#fff;transform:translateY(-2px)}
.footer-social svg{display:block}
.footer-admin-link{opacity:.55;font-size:.85rem}
.footer-admin-link:hover{opacity:1}

@media(max-width:960px){
  .donate-layout{grid-template-columns:1fr}
  .donate-side{position:static}
  .donate-band{grid-template-columns:1fr;text-align:center}
  .donate-band__art{display:none}
  .donate-chips{justify-content:center}
  .donate-band .actions{justify-content:center}
  .donate-band h2,.donate-band p{margin-inline:auto}
}
@media(max-width:600px){
  .freq-toggle{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:14px}
  .lightbox{grid-template-columns:1fr;gap:8px}
  .lightbox__nav{position:fixed;bottom:26px}
  .lightbox__nav--prev{left:26px}
  .lightbox__nav--next{right:26px}
}
@media(prefers-reduced-motion:reduce){
  .gallery-item:hover,.member:hover{transform:none}
}

/* ============================================================
   Brand intro, shown while the page loads.
   Black field, pink badge beating on the same one-second clock
   as the rest of the artwork, organisation name beneath.
   ============================================================ */

.brandload{
  position:fixed;inset:0;z-index:9999;background:var(--load-bg,#000);
  display:grid;place-items:center;
  transition:opacity .5s ease,visibility .5s ease;
}
.brandload__inner{display:grid;justify-items:center;gap:clamp(18px,3vw,28px);padding:24px;text-align:center}

.brandload__name{
  font-family:var(--sans);
  font-size:clamp(.66rem,1.15vw,.86rem);
  font-weight:700;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--load-text,#22D3EE);
  padding-left:.34em;              /* balance the trailing letter-space */
  opacity:0;
  animation:blFade .7s ease .15s forwards;
}
@keyframes blFade{to{opacity:1}}

/* Dismissed by main.js once the page is ready. */
.brandload.is-done{opacity:0;visibility:hidden;pointer-events:none}

/* Hold the page still underneath while the intro is up, so nothing
   flashes through and the scroll position cannot jump. */
body.has-loader{overflow:hidden}
body.loader-done{overflow:visible}

/* Anyone who has asked for less motion gets the name, held still, and a
   much shorter stay. */
@media(prefers-reduced-motion:reduce){
  .brandload__badge{animation:none}
  .brandload__name{animation:none;opacity:1}
}

/* ---- the real logo in the header and footer (stacked lockup) ---- */
.brand__logo{
  height:clamp(50px,5.5vw,64px);width:auto;
}
.footer-brand .brand__logo{height:66px;width:auto;filter:brightness(0) invert(1) opacity(.95)}
.footer-brand{display:inline-block}

/* The landing page waits for the Enter button. There is deliberately no
   timed auto-hide: the visitor decides when to enter. If JavaScript is off
   entirely, the <noscript> rule in the header shows the site instead of
   trapping anyone on the intro. */

/* ---- intro: the heart and the rhythm ---- */
.brandload__stage{
  position:relative;width:min(92vw,880px);height:clamp(220px,32vh,320px);
  display:grid;place-items:center;
}
.brandload__ecg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.brandload__ecg path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:3}
.bl-ecg-ghost{stroke:var(--load-mark,#E8125C);opacity:.16}
.bl-ecg{
  stroke:var(--load-mark,#E8125C);
  filter:drop-shadow(0 0 7px rgba(232,18,92,.85));
  stroke-dasharray:1600;
  stroke-dashoffset:1600;
  animation:blSweep 2s linear infinite;
}
/* The trace draws itself left to right, over and over. */
@keyframes blSweep{
  0%   {stroke-dashoffset:1600}
  70%  {stroke-dashoffset:0}
  100% {stroke-dashoffset:-1600}
}

.brandload__heart{
  position:relative;z-index:2;
  width:clamp(140px,20vh,220px);aspect-ratio:1;display:block;
  animation:blBeat 1s cubic-bezier(.2,.7,.3,1) infinite;
  filter:drop-shadow(0 0 44px rgba(232,18,92,.55));
}
.brandload__heart svg{width:100%;height:100%;overflow:visible}

/* A real systole: fast squeeze, slower release. */
@keyframes blBeat{
  0%   {transform:scale(1)}
  14%  {transform:scale(1.13)}
  28%  {transform:scale(.97)}
  42%  {transform:scale(1.05)}
  60%,100%{transform:scale(1)}
}

.brandload__tagline{
  margin:clamp(14px,3vh,30px) 0 0;
  font-family:var(--sans);
  font-size:clamp(.72rem,1.5vw,1.02rem);
  font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--load-text,#22D3EE);
  padding-left:.26em;max-width:none;
  /* Full opacity always. The entrance is a movement only — nothing here can
     leave the words dim or invisible if the animation misbehaves. */
  opacity:1;
  animation:blRise .9s cubic-bezier(.2,.7,.3,1) .2s both;
}
@keyframes blRise{
  from{transform:translateY(12px) scale(.98)}
  to  {transform:none}
}

/* Offered only when the browser refuses to start audio on its own. */
.brandload__sound{
  position:absolute;bottom:26px;right:26px;z-index:3;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);
  color:#fff;font:inherit;font-size:.78rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:9px 16px;border-radius:999px;cursor:pointer;
}
.brandload__sound:hover{background:#fff;color:#000}
.brandload__sound{animation:blSoundPulse 2.2s ease-in-out infinite}
@keyframes blSoundPulse{0%,100%{box-shadow:0 0 0 0 rgba(232,18,92,.5)}55%{box-shadow:0 0 0 10px rgba(232,18,92,0)}}
@media(prefers-reduced-motion:reduce){.brandload__sound{animation:none}}

@media(prefers-reduced-motion:reduce){
  .brandload__heart{animation:none}
  .bl-ecg{animation:none;stroke-dashoffset:0}
  .brandload__tagline{animation:none;opacity:1}
}

/* ============================================================
   Drop-down menus, and the blocks an editor can add to a page.
   ============================================================ */

.primary-nav li{position:relative}
.primary-nav .caret{display:inline-block;width:0;height:0;margin-left:6px;vertical-align:middle;
  border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.6}
.sub-toggle{display:none}
.sub-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:70;min-width:230px;margin:0;padding:8px;
  list-style:none;background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 18px 40px rgba(26,26,26,.14);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s}
.has-sub:hover > .sub-menu,
.has-sub:focus-within > .sub-menu,
.has-sub.is-open > .sub-menu{opacity:1;visibility:visible;transform:none}
.sub-menu a{display:block;padding:9px 14px;border-radius:10px;font-size:.9rem;white-space:normal}
/* Keeps the menu from closing as the pointer crosses the gap. */
.has-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}

/* section blocks */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.split__media img{width:100%;border-radius:var(--r);object-fit:cover}
.split__media .art{width:min(100%,280px);margin-inline:auto}
.section--dark .split__media img{box-shadow:0 20px 50px rgba(0,0,0,.4)}
.wide-figure{margin:0}
.wide-figure img{width:100%;border-radius:var(--r)}
.wide-figure figcaption{margin-top:14px;font-size:.9rem;color:#7B848E}
.pull-quote{margin:0;border-left:4px solid var(--pink);padding:6px 0 6px 28px}
.pull-quote p{font-family:var(--serif);font-size:clamp(1.2rem,2.4vw,1.7rem);line-height:1.4;color:var(--text)}
.section--dark .pull-quote p{color:#fff}
.pull-quote cite{display:block;margin-top:14px;font-style:normal;font-size:.9rem;color:#7B848E}
.section--dark .prose{color:#AEB8C4}

/* the anti-spam question */
.field--spam input{max-width:260px}

@media(max-width:1080px){
  .primary-nav ul{flex-wrap:wrap}
}
@media(max-width:960px){
  .split{grid-template-columns:1fr}
  .split__media{order:-1}
  /* On a phone the menu is a stack, so sub-menus open in place. */
  .sub-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-left:2px solid var(--line);border-radius:0;margin:2px 0 6px 14px;padding:0 0 0 8px;
    display:none}
  .has-sub.is-open > .sub-menu{display:block}
  .has-sub > a .caret{display:none}
  .sub-toggle{display:block;position:absolute;right:6px;top:4px;width:38px;height:38px;
    border:0;background:transparent;cursor:pointer}
  .sub-toggle::before{content:"";position:absolute;inset:0;margin:auto;width:9px;height:9px;
    border-right:2px solid var(--text);border-bottom:2px solid var(--text);transform:rotate(45deg) translate(-3px,-3px)}
  .has-sub.is-open .sub-toggle::before{transform:rotate(225deg) translate(-3px,-3px)}
}

/* ============================================================
   News and articles.
   ============================================================ */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:26px}
.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.post-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(26,26,26,.1);border-color:#D9D3D6}
.post-card__media{display:block;line-height:0;background:#F3EFF1}
.post-card__media img{width:100%;aspect-ratio:16/10;object-fit:cover}
.post-card__body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:8px;flex:1}
.post-card__meta{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--pink);font-weight:700;margin:0}
.post-card h3{font-size:1.2rem;margin:0}
.post-card h3 a{color:var(--text);text-decoration:none}
.post-card h3 a:hover{color:var(--pink)}
.post-card p{font-size:.95rem;margin:0}
.post-card__more{margin-top:auto;padding-top:10px;font-weight:600;font-size:.92rem;text-decoration:none}

.pagehead--post .pagehead__inner--single{grid-template-columns:1fr;max-width:52rem}
.post-meta{color:#8A94A2;font-size:.92rem;margin:0}
.post-hero{margin:-3rem 0 0;position:relative;z-index:3}
.post-hero img{width:100%;max-height:520px;object-fit:cover;border-radius:var(--r);box-shadow:0 24px 60px rgba(14,22,34,.22)}
.post-layout{display:grid;grid-template-columns:minmax(0,1fr) 19rem;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.post-body{max-width:44rem}
.post-standfirst{font-size:1.18rem;line-height:1.7;color:var(--text);font-weight:500;
  border-left:4px solid var(--pink);padding-left:22px;margin-bottom:2rem}
.post-body img{width:100%;border-radius:var(--r);margin:1.8rem 0}
.post-body h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-top:2.2rem}
.post-body h3{font-size:1.15rem;margin-top:1.8rem}
.post-body blockquote{border-left:4px solid var(--pink);margin:1.8rem 0;padding:4px 0 4px 24px;
  font-family:var(--serif);font-size:1.2rem;color:var(--text)}
.post-body ul,.post-body ol{padding-left:24px;line-height:1.9}
.post-side{position:sticky;top:100px;display:grid;gap:20px}
.share-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.share-list a{display:block;padding:11px 16px;border:2px solid var(--line);border-radius:12px;
  text-decoration:none;font-weight:600;font-size:.92rem;color:var(--text);transition:.2s}
.share-list a:hover{border-color:var(--pink);color:var(--pink)}

.pager--public{justify-content:center;margin-top:3rem}
.pager--public a{padding:11px 18px;border:2px solid var(--line);border-radius:12px;
  text-decoration:none;color:var(--body);font-weight:600}
.pager--public a.is-on{background:var(--pink);border-color:var(--pink);color:#fff}

@media(max-width:960px){
  .post-layout{grid-template-columns:1fr}
  .post-side{position:static}
  .post-hero{margin-top:-1.5rem}
}

/* the filter row is used with both buttons and links */
a.gallery-filter__btn{text-decoration:none;display:inline-block}

/* ------------------------------------------------------------------
   Header sizing for small screens.
   The brand is now a single image rather than an icon plus text, so the
   old rules that shrank those parts no longer apply to anything. Without
   this the logo keeps its full width, the header grows past the viewport,
   and every section below inherits that width — which is what pushed the
   hero artwork off the side of the phone.
   ------------------------------------------------------------------ */
.header-inner{min-width:0}
.brand{min-width:0;flex:0 1 auto}
.brand__logo{max-width:100%}

@media(max-width:1180px){
  .brand__logo{height:56px}
}
@media(max-width:700px){
  .brand__logo{height:50px}
  .header-donate{padding:0 14px;font-size:.84rem;min-height:38px}
}
@media(max-width:430px){
  .brand__logo{height:44px}
  .header-donate{padding:0 12px;font-size:.8rem;min-height:36px}
  .header-inner{gap:7px;padding:10px 0}
}
@media(max-width:360px){
  .brand__logo{height:40px}
  .header-donate{padding:0 10px;font-size:.75rem}
}

/* ------------------------------------------------------------------
   Client revisions, August 2026.
   ------------------------------------------------------------------ */

/* The intro now waits for the visitor rather than timing out at them. */
.brandload__enter{
  position:absolute;left:50%;bottom:clamp(48px,9vh,110px);transform:translateX(-50%);
  z-index:4;display:inline-flex;align-items:center;gap:12px;
  padding:16px 42px;border-radius:999px;cursor:pointer;
  background:transparent;border:2px solid var(--load-mark,#E8125C);
  color:#fff;font-family:var(--sans);font-size:.92rem;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;
  transition:background .25s,color .25s,box-shadow .25s,transform .25s;
  animation:blEnterIn .8s ease .9s both;
}
.brandload__enter:hover,
.brandload__enter:focus-visible{
  background:var(--load-mark,#E8125C);
  box-shadow:0 10px 34px rgba(232,18,92,.45);
  transform:translateX(-50%) translateY(-2px);
}
.brandload__enter span{transition:transform .25s}
.brandload__enter:hover span{transform:translateY(3px)}
@keyframes blEnterIn{from{opacity:0;transform:translateX(-50%) translateY(14px)}
                     to{opacity:1;transform:translateX(-50%)}}

/* A calmer pulse. The client felt the old rhythm was hurried. */
.brandload__heart{animation-duration:1.6s}
.bl-ecg{animation-duration:3.2s}
.hero__heart{animation-duration:1.6s}
.hero__field{animation-duration:1.6s}
.hero__ring{animation-duration:3.2s}
.hero__ring--2{animation-delay:1.6s}

/* The sinus-rhythm strip under the hero is no longer wanted. */
.hero__strip{display:none !important}

@media(max-width:600px){
  .brandload__enter{padding:14px 32px;font-size:.82rem;letter-spacing:.22em;bottom:40px}
}
@media(prefers-reduced-motion:reduce){
  .brandload__enter{animation:none}
}

/* Free downloads on the Resources page */
.dl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:22px}
.dl-card{display:grid;gap:9px;align-content:start;padding:28px 30px;border-radius:var(--r);
  background:#fff;border:1px solid var(--line);text-decoration:none;transition:.22s}
.dl-card:hover{border-color:var(--pink);transform:translateY(-3px);box-shadow:0 16px 36px rgba(26,26,26,.1)}
.dl-card__tag{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pink)}
.dl-card strong{font-family:var(--serif);font-size:1.3rem;color:var(--text);line-height:1.2}
.dl-card span:not(.dl-card__tag):not(.dl-card__go){color:var(--body);font-size:.95rem;line-height:1.65}
.dl-card__go{margin-top:6px;font-weight:700;color:var(--pink);font-size:.95rem}
.dl-card__go::after{content:" \2193"}

/* The values read as flowing text now, not a row of boxes. */
.page-goals .values,
.page-goals .pillars,
.page-goals .grid{display:grid;grid-template-columns:1fr;gap:2.2rem;max-width:52rem}
.page-goals .values > *,
.page-goals .pillars > *,
.page-goals .grid > *{background:none;border:0;box-shadow:none;padding:0;border-radius:0}
.page-goals .values > *::before,
.page-goals .pillars > *::before{content:"";display:block;width:44px;height:3px;background:var(--pink);margin-bottom:14px}
.page-goals .values h3,.page-goals .pillars h3,.page-goals .grid h3{font-size:1.25rem;margin-bottom:.5rem}
.page-goals .values .art,.page-goals .pillars .art,.page-goals .grid .art{display:none}

/* ------------------------------------------------------------------
   Menu width, August 2026.
   The labels went to capitals and grew by roughly half, which pushed the
   Donate button underneath CONTACT US. The menu now becomes a burger while
   there is still room for it, and the items themselves are tighter.
   ------------------------------------------------------------------ */
@media(max-width:1500px){
  .nav-toggle{display:flex}
  .header-cta{display:none}
  .primary-nav{position:absolute;left:0;right:0;top:100%;background:#fff;
    border-bottom:1px solid var(--line);max-height:0;overflow:hidden;
    transition:max-height .3s ease;margin:0}
  .primary-nav.is-open{max-height:78vh;overflow:auto}
  .primary-nav ul{flex-direction:column;gap:0;padding:10px 20px 20px}
  .primary-nav a{padding:14px 12px;border-radius:10px;font-size:.95rem}
  .header-inner{flex-wrap:nowrap;gap:10px}
  .header-actions{margin-left:auto;order:2}
  .nav-toggle{margin-left:0;order:3;width:44px}
}
/* Nothing in the header may ever sit on top of anything else. */
.header-inner{position:relative}
.header-actions{flex:none;white-space:nowrap}
.primary-nav{min-width:0}

/* ============================================================
   September review: photographs in place of drawn symbols
   ============================================================ */

/* page header: a photograph beside the title, no glow behind it */
.pagehead__art--photo::before{display:none}
.pagehead__art--photo img{width:min(100%,360px);aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);
  box-shadow:0 24px 60px rgba(0,0,0,.45)}
.pagehead__inner--single{grid-template-columns:1fr}

/* the four cards on the home page: the picture runs across the top */
.quicklink__art--photo{display:block;width:100%;height:auto;aspect-ratio:16/9;margin-bottom:14px;
  border-radius:calc(var(--r) - 8px);overflow:hidden}
.quicklink__art--photo img{width:100%;height:100%;object-fit:cover;display:block}
.quicklink__top:has(.quicklink__art--photo){display:block;position:relative}
.quicklink__top:has(.quicklink__art--photo) .quicklink__num{position:absolute;top:10px;right:12px;
  background:rgba(14,22,34,.72);color:#fff;padding:2px 9px;border-radius:999px;font-size:.78rem}

/* the six "what we do" cards */
.service__art--photo{width:100%;height:auto;aspect-ratio:16/10;border-radius:12px;overflow:hidden;margin-bottom:16px}
.service__art--photo::before{display:none}
.service__art--photo img{width:100%;height:100%;object-fit:cover;display:block}

/* the three "who we help" cards */
.card__art--photo{padding:0;background:none}
.card__art--photo::before{display:none}
.card__art--photo img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}

/* pictures beside a paragraph, and inside the condition tabs */
.split__media > img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);
  box-shadow:0 18px 44px rgba(14,22,34,.16)}
.u-art--photo{padding:0}
.u-art--photo::before{display:none}
.u-art--photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}

/* a team member without a photograph shows their initials, not a symbol */
.member__art--initials{display:grid;place-items:center;background:var(--pink-tint);color:var(--pink-dk);
  font-family:var(--serif);font-weight:700;font-size:2.4rem;aspect-ratio:1}

/* the vision page is one statement */
.statement{max-width:52rem;text-align:center;padding:clamp(1rem,4vw,3rem) 0}
.statement .kicker{justify-content:center;display:flex}
.statement__text{font-family:var(--serif);font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1.35;color:var(--ink);margin:0}

/* contact details list without its icons */
.contact-list li{align-items:flex-start}

/* the donation amounts stand alone */
.amount-opt small{display:none}
.coming-soon{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.4rem);color:var(--ink);text-align:center;padding:3rem 0;letter-spacing:.02em}

/* Emergency notice: the numbers that fill the space beside the text */
.notice--art{display:grid;grid-template-columns:1fr auto;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.notice__numbers{display:grid;gap:12px;justify-items:center;text-align:center;padding-left:clamp(1rem,3vw,2rem);
  border-left:2px solid var(--line)}
.notice__call{display:inline-flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;
  background:var(--pink);color:#fff;border-radius:16px;padding:12px 30px;line-height:1.05}
.notice__call span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.92}
.notice__call strong{font-size:2.4rem;font-weight:800;letter-spacing:.04em}
.notice__call:hover{background:var(--pink-dk)}
.notice__foundation{font-size:.86rem;color:var(--body);margin:0;line-height:1.5}
.notice__foundation a{color:var(--pink);font-weight:600;text-decoration:none}
@media(max-width:720px){.notice--art{grid-template-columns:1fr}
  .notice__numbers{padding-left:0;border-left:0;border-top:2px solid var(--line);padding-top:1.4rem}}

/* ============================================================
   Team: a featured leader, a grid below, and a click-through pop-up
   ============================================================ */
.team-wrap{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
.team-lead{display:grid;justify-items:center}
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:clamp(1rem,2.4vw,1.75rem)}
.member{display:block;text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;cursor:pointer;padding:0;font:inherit;color:inherit;transition:box-shadow .2s,transform .2s}
.member:hover{box-shadow:0 18px 44px rgba(14,22,34,.14);transform:translateY(-3px)}
.member__art{aspect-ratio:1;display:block;background:var(--pink-tint)}
.member__art--photo img{width:100%;height:100%;object-fit:cover;display:block}
.member__art--initials{display:grid;place-items:center;color:var(--pink-dk);font-family:var(--serif);font-weight:700;font-size:2.6rem}
.member__body{padding:16px 18px 18px}
.member__body h3{font-size:1.12rem;margin:0 0 3px}
.member__role{color:var(--pink);font-weight:600;font-size:.9rem;margin:0 0 8px}
.member__more{font-size:.82rem;font-weight:600;color:var(--body);display:inline-flex;align-items:center;gap:5px}
.member__more::after{content:"\2197"}
/* the leader, larger and side-by-side */
.member--lead{max-width:640px;width:100%;display:grid;grid-template-columns:220px 1fr;align-items:stretch}
.member--lead .member__art{aspect-ratio:auto;height:100%;min-height:220px}
.member--lead .member__body{align-self:center;padding:clamp(18px,3vw,28px)}
.member--lead .member__body h3{font-size:1.5rem}
.member--lead .member__role{font-size:1rem}
@media(max-width:560px){.member--lead{grid-template-columns:1fr}.member--lead .member__art{min-height:0;aspect-ratio:16/10}}

/* the pop-up */
.member-modal[hidden]{display:none}
.member-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px}
.member-modal__backdrop{position:absolute;inset:0;background:rgba(14,22,34,.6)}
.member-modal__panel{position:relative;z-index:1;background:#fff;border-radius:18px;max-width:560px;width:100%;
  max-height:88vh;overflow:auto;box-shadow:0 40px 90px rgba(0,0,0,.4)}
.member-modal__close{position:absolute;top:12px;right:14px;z-index:2;border:0;background:rgba(255,255,255,.9);
  width:38px;height:38px;border-radius:50%;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--ink)}
.member-modal__close:hover{background:var(--pink);color:#fff}
.member-modal__art{width:200px;height:200px;margin:28px auto 0;border-radius:50%;background:var(--pink-tint);display:grid;place-items:center;overflow:hidden;border:4px solid #fff;box-shadow:0 10px 30px rgba(14,22,34,.18)}
.member-modal__art img{width:100%;height:100%;object-fit:cover}
.member-modal__initials{font-family:var(--serif);font-weight:700;font-size:3.2rem;color:var(--pink-dk)}
.member-modal__body{padding:clamp(20px,4vw,32px);text-align:center}
.member-modal__bio{text-align:left}
.member-modal__body h3{font-size:1.6rem;margin:0 0 4px}
.member-modal__role{color:var(--pink);font-weight:600;margin:0 0 1.2rem}
.member-modal__bio p{margin:0 0 1rem;color:var(--body);line-height:1.7}
.member-modal__email a{color:var(--pink);font-weight:600;text-decoration:none}

/* Team layout: centred, with the leader card filled out */
.team-wrap{justify-items:center}
.team{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1rem,2.4vw,1.75rem)}
.team .member{width:240px}
.member--lead{max-width:620px}
.member--lead .member__body{display:flex;flex-direction:column;justify-content:center;gap:2px}
.member__lead-bio{color:var(--body);font-size:.95rem;line-height:1.55;margin:.4rem 0 .8rem}

/* Numbers made bolder and darker, and shown as 1 2 3 (no leading zero) */
.obj__num{color:var(--ink);font-weight:800;opacity:.9}
.quicklink__num{color:var(--ink);font-weight:800}
.quicklink__top:has(.quicklink__art--photo) .quicklink__num{background:var(--ink);color:#fff}

/* Vision statement: the supporting paragraphs under the big line */
.statement__body{max-width:46rem;margin:1rem auto 0;color:var(--body);line-height:1.7;font-size:1.02rem}

/* Donation form: title/first/last row, and consistent 2-3 column rows */
.donate-form .field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.field--title{max-width:130px}
@media(max-width:520px){.donate-form .field-row{grid-template-columns:1fr}.field--title{max-width:none}}

/* Select fields styled to match the text inputs (Title dropdown, etc.) */
select{width:100%;font:inherit;padding:14px 40px 14px 16px;border:2px solid var(--line);border-radius:12px;
  background-color:#fff;color:var(--text);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235A5A5E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
select:focus{border-color:var(--pink);outline:none}
.field--title{max-width:150px}