:root{
--red:#EE3E3B; --red-deep:#c9302d; --black:#231F20; --white:#fff;
--yellow:#FAE900; --blue:#00AEFF; --grey:#E6E7E8; --grey-mid:#9a9b9e;
--display:"Figtree","Andes",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
--body:"Source Sans 3","Source Sans Pro",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
--pad:20px; --maxw:1240px; --hdr:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--body);font-weight:400;font-size:17px;line-height:1.6;color:var(--black);background:var(--white);text-wrap:pretty;overflow-x:hidden}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.05;letter-spacing:-0.02em;margin:0}
p{margin:0}
a{color:var(--red);text-decoration:none}
a:hover{color:var(--red-deep);text-decoration:underline}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.eyebrow{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--yellow);color:var(--black);padding:12px 18px;z-index:100}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
/* buttons — all tap targets >= 44px */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 26px;
font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:.01em;border-radius:999px;
border:2px solid transparent;cursor:pointer;transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease;text-decoration:none}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-red{background:var(--red);color:#fff;box-shadow:0 6px 18px rgba(238,62,59,.28)}
.btn-red:hover{background:var(--red-deep);color:#fff;box-shadow:0 10px 26px rgba(238,62,59,.34)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.85)}
.btn-ghost:hover{background:#fff;color:var(--black)}
.btn-dark{background:var(--black);color:#fff}
.btn-dark:hover{background:#000;color:#fff}
.btn-yellow{background:var(--yellow);color:var(--black)}
.btn-yellow:hover{background:#ffef3d;color:var(--black)}
/* photo placeholder: real ![]()
drops on top; stripes show until assets land */
.ph{position:relative;overflow:hidden;background:repeating-linear-gradient(135deg,#eceded,#eceded 11px,#e0e1e3 11px,#e0e1e3 22px)}
.ph::after{content:attr(data-ph);position:absolute;left:12px;right:12px;bottom:12px;
font:500 11px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;color:#6c6d70;letter-spacing:.02em}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 32%}
/* header */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--grey)}
.hdr-in{display:flex;align-items:center;gap:16px;min-height:var(--hdr);max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.hdr-in>.btn{white-space:nowrap}
.logo{display:flex;align-items:center;flex:0 0 auto}
.logo img{height:54px;width:auto}
.wordmark{font-family:var(--display);font-weight:900;font-size:22px;letter-spacing:-.03em;color:var(--red)}
.wordmark em{font-style:normal;color:var(--black)}
.ftr .wordmark{font-size:26px;display:inline-block;margin-bottom:14px}
.nav{display:none}
.nav a{font-family:var(--display);font-weight:700;font-size:15px;color:var(--black);padding:10px 0;position:relative;white-space:nowrap}
.nav a:hover{color:var(--red);text-decoration:none}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:4px;height:2px;background:var(--red);transition:right .22s ease}
.nav a:hover::after{right:0}
.hdr .btn{margin-left:auto}
.burger{margin-left:auto;width:48px;height:48px;display:grid;place-items:center;background:none;border:0;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--black);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:24px;height:2px;background:var(--black)}
.burger span::before{top:-7px}.burger span::after{top:7px}
.mobnav{display:none;border-top:1px solid var(--grey);background:#fff;padding:8px var(--pad) 20px}
.mobnav.open{display:block}
.mobnav a{display:block;font-family:var(--display);font-weight:700;font-size:18px;color:var(--black);padding:14px 0;border-bottom:1px solid var(--grey)}
.mobnav .btn{width:100%;margin-top:16px}
/* hero */
.hero{position:relative;min-height:clamp(540px,86svh,780px);display:flex;align-items:flex-end;isolation:isolate}
.hero .ph{position:absolute;inset:0;background-color:#c8c9cb}
.hero .ph::after{z-index:3;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.85);bottom:auto;top:14px}
.hero .ph img{object-position:70% 30%}
.hero::before{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(35,31,32,.42) 0%,rgba(35,31,32,.10) 34%,rgba(35,31,32,.62) 100%)}
.hero-in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) 44px;color:#fff}
.hero-copy{max-width:660px;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.hero .eyebrow{color:var(--yellow);text-shadow:0 1px 10px rgba(0,0,0,.5)}
.hero h1{font-size:clamp(40px,10.5vw,76px);color:#fff;margin:10px 0 14px}
.hero p{font-size:clamp(17px,4.4vw,21px);font-weight:400;max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
/* hero on a light/studio photo: light scrim, dark copy. The base .hero above still
holds for a dark full-bleed photo — add .hero-light only when the frame is bright. */
.hero-light .ph img{object-position:50% 0%}
.hero-light::before{background:none}
.hero-light .hero-in{color:var(--black)}
.hero-light .hero-copy{text-shadow:0 1px 14px rgba(255,255,255,.9)}
.hero-light .eyebrow{color:var(--red);text-shadow:0 1px 10px rgba(255,255,255,.9)}
.hero-light h1{color:var(--black)}
.hero-light .btn-ghost{color:var(--black);border-color:rgba(35,31,32,.45)}
.hero-light .btn-ghost:hover{background:var(--black);color:#fff;border-color:var(--black)}
/* stats */
.stats{background:var(--red);color:#fff}
.stats-in{max-width:var(--maxw);margin:0 auto;padding:34px var(--pad);
display:grid;grid-template-columns:repeat(2,1fr);gap:26px 18px}
.stat b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(30px,8.6vw,46px);line-height:1;letter-spacing:-.03em;
font-variant-numeric:tabular-nums}
/* Counters tumble in on first view. Only JS adds .is-armed, so a no-JS page
renders the finished numbers with no hidden state to recover from. */
.stat.is-armed b{opacity:0;transform:translateY(.32em)}
.stat.is-running b,.stat.is-done b{opacity:1;transform:none;
transition:opacity .4s ease,transform .55s cubic-bezier(.2,.85,.3,1)}
@media (prefers-reduced-motion:reduce){
.stat.is-armed b{opacity:1;transform:none}
}
.stat span{display:block;margin-top:8px;font-size:14px;font-weight:600;line-height:1.35;color:rgba(255,255,255,.95)}
/* sections */
section{scroll-margin-top:calc(var(--hdr) + 8px)}
.sec{padding:64px 0}
.sec-grey{background:#f6f6f7}
.sec h2{font-size:clamp(30px,7.6vw,46px);margin:10px 0 0}
.lede{font-size:clamp(17px,4.2vw,19px);margin-top:16px;max-width:62ch;color:#3a3638}
/* who we are */
.who-grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);margin-top:30px}
.who-grid .ph{border-radius:14px}
.who-grid .ph:nth-child(1){grid-column:1/-1;aspect-ratio:16/9}
.who-grid .ph:nth-child(2),.who-grid .ph:nth-child(3){aspect-ratio:1/1}
/* what we do */
.prog-flag{margin-top:32px;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 2px 0 var(--grey),0 18px 40px rgba(35,31,32,.08);display:grid}
.prog-flag .ph{aspect-ratio:16/10}
/* .prog-flag.photo43 -- the home page flagship (john-ukulele.jpg, 1440x1078) -- takes
a 4:3 box while stacked, so the photo is shown whole. That rule lives in the
max-width:1023px block with .square and .portrait; it must not sit here, because
from 1024 the image column is a grid track whose height comes from the copy, and
aspect-ratio would resolve the WIDTH from that height and spill over the text. */
/* Story 02 only: a 16/10 crop cuts the ballerina stand off at the knees, so this
card gets a portrait frame that fits the pose. */
.prog-flag .ph.ph-tall{aspect-ratio:4/5}
.prog-flag .body{padding:30px 24px 34px}
.flagtag{display:inline-flex;align-items:center;gap:8px;background:var(--yellow);color:var(--black);
font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border-radius:999px}
.prog-flag h3{font-size:clamp(26px,6.6vw,38px);margin:14px 0 12px}
/* Pill beside the heading rather than stacked above it. Reclaims ~47px of column
height, which is height the full-bleed photo beside it gets to keep. */
.flaghead{display:flex;align-items:center;flex-wrap:wrap;gap:12px 14px;margin-bottom:10px}
.flaghead h3{margin:0}
.prog-flag p+p{margin-top:10px}
.subhead{margin:44px 0 0;font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#6c6d70}
.prog-two{display:grid;gap:18px;margin-top:16px}
.card{background:#fff;border-radius:16px;overflow:hidden;border:1px solid var(--grey);transition:transform .22s ease,box-shadow .22s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(35,31,32,.12)}
.card .ph{aspect-ratio:16/10}
.card .ph img{transition:transform .5s ease}
.card:hover .ph img{transform:scale(1.05)}
.card .body{padding:20px 20px 24px}
.card h4{font-size:21px;margin-bottom:8px}
.card p{font-size:16px;color:#464244}
/* stories */
.stories{display:grid;gap:14px;margin-top:28px}
.story{position:relative;display:block;color:var(--black);border-radius:14px;overflow:hidden;border:1px solid var(--grey);background:#fff;transition:transform .22s ease,box-shadow .22s ease}
.story:hover{text-decoration:none;transform:translateY(-4px);box-shadow:0 16px 34px rgba(35,31,32,.12)}
.story .ph{aspect-ratio:4/3}
.story .ph img{transition:transform .5s ease}
.story:hover .ph img{transform:scale(1.06)}
.story .body{padding:16px 16px 18px}
.story .kicker{font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--red)}
.story h4{font-size:19px;margin:6px 0 8px}
.story p{font-size:15px;color:#464244}
.story .more{display:inline-block;margin-top:12px;font-family:var(--display);font-weight:800;font-size:14px;color:var(--black);opacity:0;transform:translateY(6px);transition:opacity .22s ease,transform .22s ease}
.story:hover .more,.story:focus-visible .more{opacity:1;transform:none}
.grid-cta{display:flex;justify-content:center;margin-top:28px}
/* real moments — testimonial cards, 3 up. `.story` above stays the link-card
component for the Impact Stories index and the individual story pages. */
.moments{display:grid;gap:14px;margin-top:28px}
.moment{margin:0;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;
border:1px solid var(--grey);background:#fff}
.moment .ph{aspect-ratio:4/3}
.moment .body{display:flex;flex-direction:column;flex:1;padding:18px 18px 20px}
.moment blockquote{margin:0;font-family:var(--display);font-weight:800;font-size:19px;
line-height:1.32;letter-spacing:-.01em;color:var(--black)}
/* attribution. Two lines — who they are in display bold, what they are in micro
caps beneath — over a hairline rule tipped with a red tick, the same red-marker
vocabulary as .check::before and .evid h3::before. `margin-top:auto` keeps the
rule on a shared baseline across the three cards however unevenly quotes wrap. */
.moment cite{display:block;margin-top:auto;padding-top:16px;font-style:normal;
position:relative;border-top:1px solid var(--grey)}
.moment cite::before{content:"";position:absolute;top:-1px;left:0;width:32px;height:3px;background:var(--red)}
.moment cite b{display:block;font-family:var(--display);font-weight:800;font-size:15px;
line-height:1.25;letter-spacing:-.01em;color:var(--black)}
.moment cite span{display:block;margin-top:4px;font-family:var(--display);font-weight:700;
font-size:11px;line-height:1.35;letter-spacing:.12em;text-transform:uppercase;color:#6c6d70}
/* video */
.video{max-width:960px;margin:26px auto 0;border-radius:16px;overflow:hidden;background:var(--black);aspect-ratio:16/9}
.video iframe{width:100%;height:100%;border:0;display:block}
/* announcement boxes — two up, always equal height */
.promo-grid{display:grid;gap:16px;grid-template-columns:1fr}
.promo{position:relative;overflow:hidden;border-radius:18px;color:#fff;
padding:30px 26px 32px;display:flex;flex-direction:column;align-items:flex-start;
box-shadow:0 18px 40px rgba(35,31,32,.10);
scroll-margin-top:calc(var(--hdr) + 8px)}
.promo>*{position:relative;z-index:1}
.promo .eyebrow{color:rgba(255,255,255,.92)}
.promo h3{font-size:clamp(24px,5.4vw,30px);color:#fff;margin:10px 0 10px}
.promo p{color:rgba(255,255,255,.95);font-size:16px;max-width:46ch;margin-bottom:22px}
.promo .btn{margin-top:auto}
.promo::after{content:"";position:absolute;width:170px;height:170px;border-radius:50%}
.p-gala{background:var(--red)}
.p-gala::after{right:-52px;top:-52px;background:rgba(250,233,0,.15)}
.p-rotn{background:var(--blue)}
.p-rotn::after{left:-58px;bottom:-62px;background:rgba(255,255,255,.14)}
/* signup */
.signup{background:var(--black);color:#fff}
.signup h2{color:#fff}
.signup p{color:rgba(255,255,255,.8);margin-top:14px}
form{margin-top:26px;display:grid;gap:14px;max-width:560px}
.field{display:grid;gap:7px}
label{font-family:var(--display);font-weight:700;font-size:14px;color:rgba(255,255,255,.9)}
input[type=text],input[type=email],input[type=tel],select,textarea{min-height:52px;padding:12px 16px;
font-family:var(--body);font-size:16px;color:#fff;
background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.28);border-radius:10px}
textarea{min-height:132px;resize:vertical;line-height:1.5}
input::placeholder{color:rgba(255,255,255,.45)}
input:focus,select:focus,textarea:focus{border-color:var(--yellow);background:rgba(255,255,255,.12);outline:none}
/* .consent is unused in the markup: newsletter signup is a link out to
Mailchimp's hosted form, so the site collects no email addresses itself and
has nothing to take consent for. Kept for the day a form is embedded here. */
.consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:rgba(255,255,255,.75)}
.consent input{width:20px;height:20px;margin-top:3px;flex:0 0 auto;accent-color:var(--red)}
.form-note{font-size:13px;color:rgba(255,255,255,.5)}
/* The inline reply an async form writes after submitting. Hidden until script
gives it a state class, so the button never sits above an empty gap. */
.form-status{display:none;padding:12px 16px;border-radius:10px;font-size:16px;line-height:1.5;
color:#fff;background:rgba(255,255,255,.07);border-left:4px solid var(--blue)}
.form-status.ok,.form-status.bad{display:block}
.form-status.bad{border-left-color:var(--red)}
.form-status a{color:var(--yellow);text-decoration:underline}
/* footer */
.ftr{background:#fff;border-top:1px solid var(--grey);padding:48px 0 32px;font-size:15px}
.ftr-grid{display:grid;gap:32px}
/* 404 link columns: footer nav treatment, outside .ftr */
.linkcols{display:grid;gap:32px}
.ftr img.mark{height:96px;width:auto;margin-bottom:16px}
.ftr p{color:#464244;max-width:44ch}
.ftr h5,.linkcols h5{font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:#6c6d70;margin:0 0 12px}
.ftr ul,.linkcols ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ftr ul a,.linkcols ul a{display:inline-block;padding:11px 0;color:var(--black)}
.ftr ul a:hover,.linkcols ul a:hover{color:var(--red)}
/* header social icons — desktop only; the mobile set lives in .mobnav */
/* margin-left:auto here and on .hdr .btn splits the free space either side of the
icons, so they sit centred between the nav and the Give Joy button. */
.hdr-socials{display:none;gap:4px;margin-left:auto}
.hdr-socials a{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--black)}
.hdr-socials a:hover{background:var(--red);color:#fff;text-decoration:none}
.hdr-socials svg{width:17px;height:17px;fill:currentColor;display:block}
.mob-socials{display:flex;gap:10px;padding:18px 0 2px}
.mob-socials a{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
background:var(--grey);color:var(--black);padding:0;border-bottom:0}
.mob-socials a:hover{background:var(--red);color:#fff;text-decoration:none}
.mob-socials svg{width:20px;height:20px;fill:currentColor;display:block}
.socials{display:flex;gap:10px;margin-top:18px}
.socials a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--grey);color:var(--black);
font-family:var(--display);font-weight:800;font-size:14px}
.socials a:hover{background:var(--red);color:#fff;text-decoration:none}
.socials svg{width:19px;height:19px;fill:currentColor;display:block}
.legal{margin-top:34px;padding-top:20px;border-top:1px solid var(--grey);font-size:13px;color:#6c6d70;display:flex;flex-wrap:wrap;gap:10px 22px}
@media (min-width:768px){
:root{--pad:32px;--hdr:96px}
.sec{padding:88px 0}
.logo img{height:76px}
.stats-in{grid-template-columns:repeat(4,1fr);padding:40px var(--pad)}
.who-grid{grid-template-columns:repeat(3,1fr)}
.who-grid .ph:nth-child(1){grid-column:1/3;aspect-ratio:16/11}
.who-grid .ph:nth-child(2),.who-grid .ph:nth-child(3){aspect-ratio:auto}
.prog-two{grid-template-columns:1fr 1fr}
.stories{grid-template-columns:repeat(3,1fr)}
.moments{grid-template-columns:repeat(3,1fr)}
.promo-grid{grid-template-columns:1fr 1fr;gap:20px}
.promo{padding:36px 34px 38px}
.promo::after{width:250px;height:250px}
.p-gala::after{right:-70px;top:-70px}
.p-rotn::after{left:-80px;bottom:-95px}
.ftr-grid{grid-template-columns:2fr 1fr 1fr 1.2fr}
.linkcols{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1180px){
.nav{display:flex;gap:20px;margin-left:20px}
.burger{display:none}
.mobnav{display:none!important}
.hdr-socials{display:flex}
}
@media (min-width:1024px){
.hero{min-height:clamp(560px,78vh,760px)}
.hero-in{padding-bottom:62px}
.prog-flag{grid-template-columns:1.05fr 1fr;align-items:stretch}
.prog-flag .ph{aspect-ratio:auto;height:100%;min-height:420px}
/* .photo43 keeps its 4:3 box only while stacked; on desktop it goes full bleed
like every other flagship card and the copy column is trimmed instead. */
.prog-flag .ph.ph-tall{min-height:560px}
.prog-flag .body{padding:30px 44px}
.story .ph{aspect-ratio:3/4}
.story h4{font-size:17px}
}
@media (max-width:767px){
/* hero stacks on mobile: the whole photo sits above the copy, uncropped and
unobscured. The overlaid treatment — copy on the photo — resumes at 768px.
.ph aspect-ratio matches hero-portrait.jpg exactly, so cover crops nothing. */
.hero{display:block;min-height:0}
.hero::before{content:none}
.hero .ph{position:relative;inset:auto;aspect-ratio:900/830;background:none}
.hero .ph img{object-position:50% 50%}
.hero-in{padding:28px var(--pad) 34px;color:var(--black)}
.hero-copy{max-width:none;text-shadow:none}
.hero h1{color:var(--black);margin:0 0 12px}
.hero .eyebrow{text-shadow:none}
}
/* ═══════════════════════════════════════════════════════════════════════════
INTERIOR PAGES
Components used by WhoWeAre / WhatWeDo / WhereWeWork / Leadership /
Transparency / Contact. Interior pages never take a photo hero — they open
with .pagehead (eyebrow + h1 + lede) on white, per the handoff README.
═══════════════════════════════════════════════════════════════════════ */
/* standalone full-width photograph inside a section */
.figwide{border-radius:16px;aspect-ratio:16/9;margin-top:30px}
/* interior-page variants of the homepage program components */
.prog-flag h2{font-size:clamp(26px,6.6vw,38px);margin:14px 0 12px} /* same as .prog-flag h3 */
.prog-flag .h3sub{font-size:20px;margin:24px 0 10px}
.sec h2.subhead{font-size:13px;margin:44px 0 0} /* .subhead used as a real heading */
/* Square source, shown whole while the card is stacked. MUST stay inside a max-width
query: from 1024 the image column is a grid track whose row height is set by the copy,
and aspect-ratio:1/1 then resolves the WIDTH from that height — a 662px-tall row makes
a 662px-wide image in a 602px column, which spills over and paints on the text. */
@media (max-width:1023px){
.prog-flag.square .ph{aspect-ratio:1/1}
/* Tall portrait source (Dot in the windowsill, 484x718): a square frame would
cut a third of it, so the stacked card matches the photo's own shape. */
.prog-flag.portrait .ph{aspect-ratio:2/3}
.prog-flag.photo43 .ph{aspect-ratio:4/3}
}
.card h3{font-size:21px;margin-bottom:8px}
.card p+p{margin-top:10px}
/* interior page header */
.pagehead{padding-top:40px}
/* a section that follows the page header on the same background */
.sec.tight{padding-top:24px}
.pagehead h1{font-size:clamp(34px,8.4vw,56px);margin:10px 0 0}
.pagehead .lede{margin-top:18px}
/* current page in the nav */
.nav a[aria-current=page]{color:var(--red)}
.nav a[aria-current=page]::after{right:0}
.mobnav a[aria-current=page]{color:var(--red)}
/* section-level heading for interior pages. Deliberately a class, not `.sec h3`
— a descendant rule would out-rank .prog-flag h3 and .promo h3 and resize them. */
.h3lead{font-size:clamp(22px,5.2vw,28px);margin-top:8px}
.h3lead+p{margin-top:14px;color:#3a3638}
/* copy + photo, side by side from 1024 */
.media{display:grid;gap:22px;margin-top:30px;align-items:center}
.media .ph{border-radius:16px;aspect-ratio:3/2}
.media-copy p+p{margin-top:14px}
.media-copy .btn{margin-top:22px}
/* bordered content box — works on white and on .sec-grey */
.panel{background:#fff;border:1px solid var(--grey);border-radius:16px;padding:26px 22px 28px}
.panel h3{font-size:clamp(21px,4.8vw,25px);margin-bottom:12px}
.panel p{color:#3a3638}
.split{display:grid;gap:16px;margin-top:30px}
/* numbered list — Our Values, How It Works */
.numlist{display:grid;gap:12px;margin-top:28px;counter-reset:n}
.numitem{counter-increment:n;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
background:#fff;border:1px solid var(--grey);border-radius:14px;padding:20px}
.numitem::before{content:counter(n,decimal-leading-zero);font-family:var(--display);font-weight:900;
font-size:18px;letter-spacing:-.02em;color:var(--red);line-height:1.5}
.numitem h3{font-size:19px;margin-bottom:6px}
.numitem p{font-size:16px;color:#464244}
/* The flagship card carries its own h2, so when it opens a section there is no heading
above it and the stock 32px top margin just stacks on the section padding. */
.prog-flag:first-child{margin-top:0}
.prog-flag h2{margin:16px 0 14px}
.prog-flag .h3sub{margin:28px 0 10px}
/* bind the label to the list it introduces: a clear gap above, a small one below */
.prog-flag+.subhead{margin-top:46px}
.subhead+.checks{margin-top:16px}
/* ── forms on a light background ────────────────────────────────────────────
The base form styling above is the black .signup section's: white type on a
translucent dark field. .form-light inverts it for a white or grey section. */
.form-light{max-width:640px}
.form-light label{color:var(--black)}
.form-light input[type=text],.form-light input[type=email],.form-light input[type=tel],
.form-light select,.form-light textarea{color:var(--black);background:#fff;border:1.5px solid #dcdde0}
.form-light input:focus,.form-light select:focus,.form-light textarea:focus{
border-color:var(--red);background:#fff}
.form-light ::placeholder{color:#9a9b9e}
.form-light .consent{color:#464244}
.form-light .consent input{accent-color:var(--red)}
.form-light .form-note{color:#6c6d70}
.form-light .form-status{color:var(--black);background:#fff;
border:1.5px solid #dcdde0;border-left:4px solid var(--blue)}
.form-light .form-status.bad{border-left-color:var(--red)}
.form-light .form-status a{color:var(--red)}
.form-light select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236c6d70' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
.req{color:var(--red)}
.form-row{display:grid;gap:14px}
/* ── modal ──────────────────────────────────────────────────────────────────
Native