/* DM Sans is served from this theme, not from Google.
An @import on line 2 of the stylesheet is the most expensive shape a
font request can take: the browser has to fetch pd.css, parse the
first line, then fetch Google's stylesheet, then fetch the font files,
all in series and all blocking the render. All four weights already
ship as woff2 in assets/fonts and are declared in theme.json, so this
was downloading a second copy of fonts we already had.
It also sent every visitor's IP address to Google on every page view,
which is worth avoiding on a mental health service's website. */
:root{
--navy:#131C45; --navy-2:#1B2559; --indigo:#2B3990; --indigo-lt:#3C4CB8;
--mint:#5DCAA5; --mint-lt:#A8E6CF; --mint-dp:#2E9E7A;
--band:#EDF1FA; --cloud:#F4F6FB; --cloud-2:#FAFBFD; --line:#E4E8F2; --line-soft:#EFF2F8;
--ink:#131C45; --body:#525E77; --coral:#E76F51;
--t-xs:12.5px; --t-sm:14.5px; --t-base:17px; --t-lg:19.5px;
--t-xl:24px; --t-2xl:31px; --t-3xl:39px; --t-4xl:50px; --t-5xl:66px;
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
--s7:48px; --s8:64px; --s9:96px; --s10:132px;
--wrap:1200px; --r:18px; --r-lg:26px; --r-xl:34px; --r-pill:999px;
--sh-1:0 1px 2px rgba(19,28,69,.05),0 4px 12px rgba(19,28,69,.05);
--sh-2:0 2px 4px rgba(19,28,69,.05),0 12px 28px rgba(19,28,69,.08);
--sh-3:0 4px 8px rgba(19,28,69,.06),0 24px 56px rgba(19,28,69,.13);
--sh-mint:0 18px 44px rgba(93,202,165,.28);
--ease:cubic-bezier(.2,.7,.3,1); --ease-out:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'DM Sans',system-ui,-apple-system,Segoe UI,sans-serif;font-size:var(--t-base);
line-height:1.68;color:var(--body);background:#fff;-webkit-font-smoothing:antialiased;
font-optical-sizing:auto;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:var(--indigo)}
h1,h2,h3,h4,h5{color:var(--ink);line-height:1.08;letter-spacing:-.032em;font-weight:800;
text-wrap:balance}
h1{font-size:clamp(38px,5.4vw,var(--t-5xl));font-weight:1000;letter-spacing:-.042em}
h2{font-size:clamp(28px,3.8vw,var(--t-4xl))}
h3{font-size:clamp(22px,2.5vw,var(--t-2xl));letter-spacing:-.026em}
h4{font-size:var(--t-xl);letter-spacing:-.022em}
p{max-width:68ch;text-wrap:pretty}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s5)}
section{padding-block:clamp(40px,5vw,80px);position:relative}
section.wrap{padding-block:clamp(40px,5vw,80px)}
/* two sections on the same background read as one block: collapse the seam */
section:not([class])+section:not([class]),
section.band-cloud+section.band-cloud{padding-top:0}
/* a heading-only or nav-only strip does not need a full band */
section.band-tight{padding-block:clamp(22px,2.4vw,36px)}
section.band-tight+section{padding-top:clamp(22px,2.4vw,36px)}
.lede{font-size:var(--t-lg);color:var(--body);max-width:62ch;line-height:1.7}
.center{text-align:center}.center p,.center .lede{margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--navy);color:#fff;
padding:12px 22px;border-radius:var(--r-pill);font-weight:700}
.skip:focus{left:16px}
:focus-visible{outline:3px solid var(--mint);outline-offset:3px;border-radius:8px}
::selection{background:var(--mint);color:#06301D}
/* scroll progress */
.prog{position:fixed;top:0;left:0;height:3px;z-index:90;
background:linear-gradient(90deg,var(--mint),var(--indigo-lt));width:0;transition:width .1s linear}
/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;font-weight:700;
font-size:16px;padding:15px 30px;border-radius:var(--r-pill);border:2px solid transparent;
cursor:pointer;font-family:inherit;line-height:1.2;overflow:hidden;isolation:isolate;
transition:transform .28s var(--ease-out),box-shadow .28s var(--ease-out),color .2s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .28s var(--ease-out)}
.btn:hover{transform:translateY(-3px)}
.btn svg{width:15px;height:15px;stroke-width:2.5;transition:transform .28s var(--ease-out)}
.btn:hover svg{transform:translateX(4px)}
.btn-primary{background:var(--navy);color:#fff;box-shadow:var(--sh-1)}
.btn-primary::before{background:linear-gradient(120deg,var(--indigo),var(--indigo-lt))}
.btn-primary:hover{box-shadow:var(--sh-3);color:#fff}
.btn-primary:hover::before{opacity:1}
.btn-mint{background:var(--mint);color:#06301D;box-shadow:var(--sh-1)}
.btn-mint::before{background:linear-gradient(120deg,var(--mint-lt),var(--mint))}
.btn-mint:hover{box-shadow:var(--sh-mint);color:#06301D}
.btn-mint:hover::before{opacity:1}
.btn-ghost{border-color:var(--line);color:var(--navy);background:#fff}
.btn-ghost:hover{border-color:var(--navy);background:var(--navy);color:#fff;box-shadow:var(--sh-2)}
.btn-ghost-light{border-color:rgba(255,255,255,.4);color:#fff;backdrop-filter:blur(6px);
background:rgba(255,255,255,.06)}
.btn-ghost-light:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn-sm{padding:11px 22px;font-size:var(--t-sm)}
.cta-row{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s7)}
.center .cta-row{justify-content:center}
.link-arrow{font-weight:700;display:inline-flex;align-items:center;gap:7px;color:var(--indigo);
font-size:15px;position:relative}
.link-arrow svg{width:14px;height:14px;transition:transform .28s var(--ease-out)}
.link-arrow::after{content:"";position:absolute;left:0;bottom:-3px;height:2px;width:0;
background:var(--mint);transition:width .3s var(--ease-out)}
.card:hover .link-arrow::after,.link-arrow:hover::after{width:calc(100% - 22px)}
.card:hover .link-arrow svg,.link-arrow:hover svg{transform:translateX(5px)}
/* ---------- announcement + header ---------- */
.announce{background:linear-gradient(90deg,var(--mint-dp),var(--mint),var(--mint-dp));
background-size:200% 100%;animation:slide 14s linear infinite;
color:#06301D;font-size:var(--t-sm);font-weight:700;text-align:center;padding:11px var(--s5)}
@keyframes slide{to{background-position:200% 0}}
.announce a{color:#06301D;text-decoration:underline;text-underline-offset:3px}
.hdr{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.82);
backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid transparent;
transition:box-shadow .3s var(--ease),border-color .3s var(--ease),padding .3s var(--ease)}
.hdr.stuck{border-bottom-color:var(--line);box-shadow:0 6px 24px rgba(19,28,69,.06)}
/* The header sits directly above a hero, and the hero measure is wider than
a body section. Capping the header at --wrap put the logo 60px inside the
headline underneath it, which the eye catches immediately because the two
are stacked. The header follows the hero. */
.hdr-in{display:flex;align-items:center;gap:var(--s3);max-width:1320px;margin-inline:auto;
padding:var(--s3) var(--s5);transition:padding .3s var(--ease)}
.hdr.stuck .hdr-in{padding-block:9px}
.brand img{height:54px;width:auto;transition:height .3s var(--ease)}
.hdr.stuck .brand img{height:44px}
.nav{margin-left:auto;display:flex;align-items:center;gap:2px;list-style:none}
.nav>li{position:relative}
.nav>li>a{display:block;padding:10px 15px;font-weight:700;font-size:15.5px;color:var(--navy);
border-radius:11px;position:relative;transition:color .2s}
.nav>li>a::after{content:"";position:absolute;left:15px;right:15px;bottom:5px;height:2px;
background:var(--mint);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out)}
.nav>li:hover>a::after{transform:scaleX(1)}
.sub{position:absolute;top:calc(100% + 10px);left:0;min-width:308px;background:#fff;
border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-3);padding:var(--s2);
list-style:none;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);
transition:.24s var(--ease-out)}
.nav>li:hover .sub,.nav>li:focus-within .sub{opacity:1;visibility:visible;transform:none}
.sub a{display:block;padding:11px 14px;border-radius:10px;font-size:15px;color:var(--body);font-weight:500;
transition:.18s var(--ease)}
.sub a:hover{background:var(--cloud);color:var(--navy);transform:translateX(3px)}
.hdr-cta{display:flex;align-items:center;gap:var(--s2);flex:0 0 auto}
.burger{display:none;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--navy);margin:5px 0;transition:.25s var(--ease)}
/* ---------- crisis ---------- */
/* The crisis notice is a card, not a band.
It used to run full bleed, so its coral rule sat against the browser edge
with nothing to belong to and the whole notice read as a stray stripe rather
than a deliberate piece of safety information. Encasing it gives the warning
an edge, which is what makes it read as a warning. */
.crisis{background:transparent;padding-block:var(--s6)}
.crisis .wrap{display:flex;gap:var(--s4);align-items:flex-start;
background:var(--navy);color:#AEB9DA;border-radius:var(--r-lg);
padding:var(--s5) var(--s5) var(--s5) calc(var(--s5) + 6px);
position:relative;overflow:hidden;box-shadow:var(--sh-1)}
.crisis .wrap::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
background:linear-gradient(180deg,var(--coral),#F2A488)}
.crisis-mark{flex:0 0 auto;width:36px;height:36px;border-radius:12px;
background:rgba(231,111,81,.18);color:var(--coral);display:grid;place-items:center}
.crisis-mark svg{width:19px;height:19px}
.crisis b{color:#fff;display:block;margin-bottom:3px;font-size:var(--t-base);letter-spacing:-.01em}
.crisis p{font-size:15.5px;max-width:94ch}
.crisis strong{color:var(--mint-lt)}
/* ---------- hero ---------- */
.hero{background:var(--navy);color:#fff;padding-block:clamp(44px,5.4vw,88px);position:relative;overflow:hidden;
isolation:isolate}
.hero::before{content:"";position:absolute;inset:-30%;z-index:-2;
background:
radial-gradient(48% 44% at 18% 22%,rgba(43,57,144,.85),transparent 62%),
radial-gradient(42% 40% at 82% 18%,rgba(93,202,165,.24),transparent 64%),
radial-gradient(52% 48% at 72% 88%,rgba(60,76,184,.55),transparent 66%);
animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(-3%,2%,0) scale(1.06)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
background-image:radial-gradient(rgba(255,255,255,.11) 1px,transparent 1px);background-size:26px 26px;
mask-image:radial-gradient(70% 60% at 70% 30%,#000,transparent)}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:var(--s9);align-items:center}
.hero h1{color:#fff}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--mint-lt),var(--mint));
-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .tag{color:var(--mint);font-size:clamp(17px,2vw,var(--t-xl));font-weight:600;margin-top:var(--s4);
letter-spacing:-.018em}
.hero p.lead{color:#C4CDE8;font-size:var(--t-lg);margin-top:var(--s5);max-width:54ch}
.hero p.lead strong{color:#fff;font-weight:700;
box-shadow:inset 0 -.55em 0 rgba(93,202,165,.24)}
.hero-meta{margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.14);
display:flex;gap:var(--s5);flex-wrap:wrap;color:#95A2CC;font-size:var(--t-sm);font-weight:600}
.hero-meta span{display:flex;align-items:center;gap:9px}
.hero-meta span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint);
box-shadow:0 0 0 4px rgba(93,202,165,.18)}
.hero-help{margin-top:var(--s5);font-weight:700;color:#fff;display:inline-flex;align-items:center;gap:10px}
.hero-help::before{content:"";width:26px;height:2px;background:var(--mint);border-radius:2px}
/* The telehealth link the live hero carries. PD's clients use it to join a
session, so it has to be findable without hunting through the footer. */
.hero-tele{margin-top:var(--s3)}
.hero-tele a{color:var(--mint);font-weight:600;text-decoration:none;
border-bottom:1px solid rgba(125,211,172,.45);padding-bottom:2px}
.hero-tele a:hover{color:#fff;border-bottom-color:#fff}
.hero-shot{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/3;
box-shadow:0 40px 90px rgba(0,0,0,.45);transform:perspective(1400px) rotateY(-5deg) rotateX(2deg);
transition:transform .6s var(--ease-out)}
.hero-shot:hover{transform:perspective(1400px) rotateY(0) rotateX(0) translateY(-6px)}
.hero-shot img{width:100%;height:100%;object-fit:cover}
.hero-shot::after{content:"";position:absolute;inset:0;
background:linear-gradient(210deg,transparent 52%,rgba(19,28,69,.5));pointer-events:none}
.hero-shot::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
/* ---------- section heading rule ---------- */
.center h2::after{content:"";display:block;width:56px;height:4px;border-radius:2px;margin:var(--s5) auto 0;
background:linear-gradient(90deg,var(--mint),var(--indigo-lt))}
/* ---------- cards ---------- */
.grid{display:grid;gap:var(--s5)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.card{position:relative;background:#fff;border-radius:var(--r-lg);padding:var(--s6);
display:flex;flex-direction:column;gap:var(--s3);box-shadow:var(--sh-1);
transition:transform .38s var(--ease-out),box-shadow .38s var(--ease-out);isolation:isolate}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:-1;
background:linear-gradient(150deg,var(--line),transparent 45%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;transition:background .38s var(--ease-out)}
.card:hover{transform:translateY(-7px);box-shadow:var(--sh-3)}
.card:hover::before{background:linear-gradient(150deg,var(--mint),var(--indigo-lt) 70%)}
.card .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff;
background:linear-gradient(140deg,var(--indigo),var(--indigo-lt));box-shadow:0 8px 18px rgba(43,57,144,.24);
transition:transform .38s var(--ease-out)}
.card:hover .ic{transform:scale(1.08) rotate(-4deg)}
.card .ic svg{width:21px;height:21px}
.card p{font-size:15.8px}
/* The icon belongs to the heading, not to the top of the card.
Grouped as one unit, with the link pinned below, the card reads as a single
object instead of three things floating in a column. */
.card{gap:var(--s2)}
.card .ic{margin-bottom:var(--s2)}
.card h2,.card h3{margin:0}
.card .link-arrow{margin-top:var(--s4)}
.grid .card .link-arrow{margin-top:auto;padding-top:var(--s4)}
.card-media{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--cloud);
margin:calc(var(--s6) * -1) calc(var(--s6) * -1) 0;position:relative}
.card-media::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,transparent 55%,rgba(19,28,69,.28));opacity:0;transition:opacity .4s}
.card:hover .card-media::after{opacity:1}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.card:hover .card-media img{transform:scale(1.07)}
/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s9);align-items:center}
.split-media{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/3;background:var(--cloud);
box-shadow:var(--sh-3);position:relative}
.split-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.split-media:hover img{transform:scale(1.04)}
.split-media::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
box-shadow:inset 0 0 0 1px rgba(19,28,69,.07)}
/* ---------- bands ---------- */
.band-cloud{background:var(--band)}
.band-mint{background:#EAF8F2}
/* ---------- logo wall ---------- */
.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s6) var(--s7);align-items:center;
margin-top:var(--s8)}
.logos .lw{aspect-ratio:3/2;display:grid;place-items:center;filter:grayscale(1) contrast(.85);
opacity:.52;transition:.35s var(--ease-out)}
.logos .lw:hover{filter:none;opacity:1;transform:translateY(-4px) scale(1.04)}
.logos img{max-height:58px;width:auto;object-fit:contain}
/* ---------- testimonial ---------- */
.tcard{position:relative;background:#fff;border-radius:var(--r-xl);padding:var(--s8);text-align:left;
box-shadow:var(--sh-2);overflow:hidden}
.tcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
background:linear-gradient(180deg,var(--mint),var(--indigo-lt))}
.tcard::after{content:"\201C";position:absolute;right:var(--s7);top:-14px;font-size:190px;line-height:1;
color:var(--cloud);font-weight:1000;pointer-events:none}
.tcard .stars{color:var(--mint);letter-spacing:4px;font-size:15px;margin-bottom:var(--s5)}
.tcard p{font-size:clamp(18px,2vw,22px);line-height:1.6;color:var(--ink);max-width:none;
font-weight:500;letter-spacing:-.014em;position:relative;z-index:1}
.tcard footer{margin-top:var(--s7);display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s5)}
.tcard cite{font-style:normal;font-weight:800;color:var(--navy);display:block;font-size:16px}
.tcard span{font-size:13.5px;color:#8391AF}
.tnav{display:flex;gap:var(--s3)}
.tnav button{width:50px;height:50px;border-radius:50%;border:2px solid var(--line);background:#fff;
color:var(--navy);display:grid;place-items:center;cursor:pointer;transition:.28s var(--ease-out)}
.tnav button:hover{background:var(--navy);border-color:var(--navy);color:#fff;transform:translateY(-3px);
box-shadow:var(--sh-2)}
.tnav svg{width:17px;height:17px;stroke-width:2.3}
.tdots{display:flex;gap:9px;margin-top:var(--s6);justify-content:center}
.tdots button{width:9px;height:9px;border-radius:50%;border:0;background:#C9D0E6;cursor:pointer;padding:0;
transition:.3s var(--ease-out)}
.tdots button[aria-current="true"]{background:linear-gradient(90deg,var(--mint),var(--indigo-lt));width:30px;border-radius:5px}
/* ---------- feature trio ---------- */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s6)}
.feat{background:#fff;border-radius:var(--r);padding:var(--s5) var(--s4);text-align:center;
box-shadow:var(--sh-1);transition:.3s var(--ease-out)}
.feat:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.feat .ic{color:var(--indigo);margin-bottom:var(--s3);display:grid;place-items:center}
.feat .ic svg{width:26px;height:26px;stroke-width:1.7}
.feat b{display:block;font-size:14.5px;color:var(--navy);font-weight:800;letter-spacing:-.01em}
/* ---------- support list ---------- */
.sgroups{list-style:none;display:grid;gap:10px;margin-top:var(--s5)}
.sgroups a{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
background:#fff;border-radius:14px;padding:17px 21px;font-size:15.5px;font-weight:700;color:var(--navy);
box-shadow:var(--sh-1);position:relative;overflow:hidden;transition:.3s var(--ease-out)}
.sgroups a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--mint);
transform:scaleY(0);transform-origin:top;transition:transform .3s var(--ease-out)}
.sgroups a:hover{transform:translateX(6px);box-shadow:var(--sh-2)}
.sgroups a:hover::before{transform:scaleY(1)}
.sgroups svg{width:15px;height:15px;flex:0 0 auto;color:var(--indigo);transition:transform .3s var(--ease-out)}
.sgroups a:hover svg{transform:translateX(4px)}
/* ---------- mosaic ---------- */
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:140px;gap:10px}
.mosaic figure{overflow:hidden;border-radius:14px;box-shadow:var(--sh-1);position:relative}
.mosaic figure:nth-child(1){grid-column:span 2;grid-row:span 2}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.mosaic figure:hover img{transform:scale(1.08)}
.mosaic figure::after{content:"";position:absolute;inset:0;border-radius:inherit;
box-shadow:inset 0 0 0 1px rgba(19,28,69,.07)}
/* ---------- donation ---------- */
.promise{position:relative;background:linear-gradient(135deg,var(--mint) 0%,var(--mint-dp) 100%);
border-radius:var(--r-xl);padding:var(--s9) var(--s8);color:#04291A;overflow:hidden;
box-shadow:var(--sh-mint)}
.promise::before{content:"";position:absolute;right:-90px;top:-90px;width:420px;height:420px;border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.3),transparent 62%)}
.promise::after{content:"";position:absolute;inset:0;opacity:.28;pointer-events:none;
background-image:radial-gradient(rgba(255,255,255,.5) 1px,transparent 1px);background-size:22px 22px}
.promise>*{position:relative;z-index:1}
.promise h2{color:#04291A;max-width:22ch}
.promise p{color:#0A4430;font-size:var(--t-lg);margin-top:var(--s4);max-width:70ch}
/* ---------- footer ---------- */
.ftr{background:var(--navy);color:#96A2C6;padding-block:var(--s9) var(--s5);font-size:15px;
position:relative;overflow:hidden}
.ftr::before{content:"";position:absolute;left:-140px;bottom:-180px;width:520px;height:520px;border-radius:50%;
background:radial-gradient(circle,rgba(43,57,144,.6),transparent 66%)}
.ftr .wrap{position:relative;z-index:1}
.ftr-top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:var(--s7)}
/* A fixed height plus an inherited max-width is a squash waiting to happen.
The lockup is 520x125, so at 54px tall it wants 224.6px of width. On the
homepage the footer's first column computes to 216px, max-width:100% clamps
the width, the fixed height holds, and the circular badge renders as an
ellipse. object-fit keeps the proportions whatever the column does. */
.ftr img.mark{height:54px;width:auto;max-width:100%;
object-fit:contain;object-position:left center;margin-bottom:var(--s5)}
.ftr h5{color:#fff;font-size:var(--t-xs);letter-spacing:.17em;text-transform:uppercase;
margin-bottom:var(--s5);font-weight:800}
.ftr ul{list-style:none;display:grid;gap:11px}
.ftr a{color:#96A2C6;transition:.2s var(--ease)}
.ftr a:hover{color:var(--mint)}
.social{display:flex;gap:10px;margin-top:var(--s5)}
.social a{width:40px;height:40px;border-radius:13px;border:1px solid rgba(255,255,255,.16);
display:grid;place-items:center;transition:.28s var(--ease-out)}
.social a:hover{background:var(--mint);border-color:var(--mint);color:#06301D;transform:translateY(-3px)}
.social svg{width:17px;height:17px;fill:currentColor}
.contact li{display:flex;gap:11px;align-items:flex-start}
.contact svg{width:14px;height:14px;flex:0 0 auto;margin-top:5px;color:var(--mint);opacity:.85}
.ftr-btm{margin-top:var(--s9);padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.1);
display:flex;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;font-size:13.5px}
.ftr-btm ul{display:flex;gap:var(--s5);list-style:none}
/* ---------- inner pages ---------- */
.phero{background:var(--navy);color:#fff;padding-block:var(--s9);position:relative;overflow:hidden}
.phero h1{color:#fff;max-width:20ch}
.phero p{color:#C4CDE8;font-size:var(--t-lg);margin-top:var(--s4)}
.prose{max-width:72ch}
.prose p+p{margin-top:var(--s4)}
.prose ul{margin:var(--s4) 0 var(--s4) var(--s5);display:grid;gap:11px}
.prose li::marker{color:var(--mint)}
.prose h3{margin-top:var(--s7);margin-bottom:var(--s3)}
.prose a{text-decoration:underline;text-underline-offset:3px;font-weight:600}
/* simple heading list, used for "What We Help With" style blocks */
.hlist{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:var(--s6);text-align:left}
.hlist div{background:#fff;border-radius:14px;padding:18px 22px;box-shadow:var(--sh-1);
font-weight:700;color:var(--navy);font-size:16px;display:flex;gap:13px;align-items:flex-start;
transition:.28s var(--ease-out)}
.hlist div:hover{transform:translateX(4px);box-shadow:var(--sh-2)}
.hlist div::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;margin-top:9px;
background:var(--mint);box-shadow:0 0 0 4px rgba(93,202,165,.18)}
.hlist.one{grid-template-columns:1fr}
.hlist.plain div{font-weight:500;color:var(--body)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s7);text-align:left;
counter-reset:s}
.step{background:#fff;border-radius:var(--r-lg);padding:var(--s6);box-shadow:var(--sh-1);position:relative;
transition:.3s var(--ease-out)}
.step:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.step::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:38px;height:38px;
border-radius:12px;background:linear-gradient(140deg,var(--indigo),var(--indigo-lt));color:#fff;
font-weight:800;font-size:16px;margin-bottom:var(--s4)}
.step h4{font-size:17px;margin-bottom:var(--s3)}
.step p{font-size:15.5px}
@media(max-width:880px){.hlist,.steps{grid-template-columns:1fr}}
/* checklist + FAQ + plain list */
.checks{list-style:none;display:grid;gap:14px;margin-top:var(--s6);text-align:left;max-width:64ch;
margin-inline:auto}
.checks li{display:flex;gap:14px;align-items:flex-start;font-size:16.5px;color:var(--body)}
.checks li::before{content:"";flex:0 0 auto;width:24px;height:24px;border-radius:8px;margin-top:2px;
background:var(--mint);
-webkit-mask:url("data:image/svg+xml;utf8,") center/16px no-repeat,linear-gradient(#000,#000);
-webkit-mask-composite:destination-out;
box-shadow:0 4px 12px rgba(93,202,165,.35)}
.faq{display:grid;gap:12px;margin-top:var(--s7);text-align:left;max-width:76ch;margin-inline:auto}
.faq details{background:#fff;border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden;
transition:.25s var(--ease-out)}
.faq details[open]{box-shadow:var(--sh-2)}
.faq summary{cursor:pointer;padding:20px 24px;font-weight:700;color:var(--navy);font-size:16.5px;
list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:11px;height:11px;flex:0 0 auto;border-right:2.5px solid var(--indigo);
border-bottom:2.5px solid var(--indigo);transform:rotate(45deg) translateY(-3px);transition:transform .25s var(--ease-out)}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq .a{padding:0 24px 22px;color:var(--body);font-size:16px}
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s7);text-align:left}
.way{background:#fff;border-radius:var(--r-lg);padding:var(--s6);box-shadow:var(--sh-1);
transition:.3s var(--ease-out)}
.way:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.way h4{font-size:17px;margin-bottom:var(--s3)}
.way p{font-size:15.5px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:var(--s7)}
.gallery a{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;display:block;box-shadow:var(--sh-1)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.gallery a:hover img{transform:scale(1.06)}
@media(max-width:880px){.ways,.gallery{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ways,.gallery{grid-template-columns:1fr}}
/* stat counters */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s8)}
.stat{background:#fff;border-radius:var(--r-lg);padding:var(--s6);text-align:center;box-shadow:var(--sh-1);
transition:.3s var(--ease-out)}
.stat:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.stat b{display:block;font-size:clamp(38px,5vw,56px);font-weight:1000;letter-spacing:-.04em;line-height:1;
background:linear-gradient(120deg,var(--indigo),var(--mint));-webkit-background-clip:text;
background-clip:text;color:transparent}
.stat span{display:block;margin-top:var(--s3);font-size:15px;color:var(--body);font-weight:600}
.stat i{font-style:normal;font-size:12.5px;color:#8391AF;display:block;margin-top:var(--s2)}
.statnote{margin-top:var(--s5);font-size:13.5px;color:#8391AF;text-align:center}
@media(max-width:880px){.stats{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.stats{grid-template-columns:1fr}}
/* On a phone the quote card came out 327 wide and 796 tall: 48px of
padding on every side and every card stretched to the height of the
longest quote. That is most of a screen for one testimonial. */
@media(max-width:560px){
.tcard{padding:var(--s5)}
.tcard p{font-size:16px}
[data-carousel] .tcard{flex:0 0 100%}
}
/* newsletter */
.signup input{padding:15px 20px;border-radius:var(--r-pill);border:1.5px solid var(--line);
font-family:inherit;font-size:15px;background:#fff;transition:.2s var(--ease)}
.signup input:focus{border-color:var(--mint);outline:none;box-shadow:0 0 0 4px rgba(93,202,165,.18)}
@media (prefers-reduced-motion:no-preference){
.rv{opacity:0;transform:translateY(20px);transition:opacity .75s var(--ease-out),transform .75s var(--ease-out)}
.rv.in{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(max-width:1040px){.logos{grid-template-columns:repeat(4,1fr)}.ftr-top{grid-template-columns:1fr 1fr}}
@media(max-width:880px){
/* padding is fluid now; nothing to override here */
.nav,.hdr-cta .btn-ghost{display:none}
.burger{display:block;margin-left:auto}
.g3,.g2,.split,.hero-grid,.feats{grid-template-columns:1fr}
.split,.hero-grid{gap:var(--s7)}
.hero-shot{transform:none}
.nav.open{display:flex;position:fixed;inset:78px 0 0;background:#fff;flex-direction:column;
align-items:stretch;padding:var(--s5);overflow:auto;z-index:70}
.nav.open .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
border-left:2px solid var(--line);border-radius:0;margin:0 0 var(--s3) var(--s4)}
.promise{padding:var(--s7) var(--s5)}
.tcard{padding:var(--s6)}.tcard::after{display:none}
.mosaic{grid-auto-rows:112px}.mosaic figure:nth-child(1){grid-column:span 2;grid-row:span 2}
.card-media{margin:calc(var(--s6) * -1) calc(var(--s6) * -1) 0}
}
@media(max-width:560px){.logos{grid-template-columns:repeat(2,1fr)}.ftr-top{grid-template-columns:1fr}
.crisis .wrap{flex-direction:column}.mosaic{grid-template-columns:repeat(2,1fr)}}
@media print{.hdr,.ftr,.tnav,.tdots,.btn,.announce,.prog{display:none}body{color:#000}}
/* two- and three-up photo rows (CT Support Group, Trainings) */
.pair{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4);margin-top:var(--s7)}
.trio-img{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s7)}
.pair img,.trio-img img,.pair .slot,.trio-img .slot{border-radius:var(--r-lg);box-shadow:var(--sh-1)}
@media(max-width:760px){.pair,.trio-img{grid-template-columns:1fr}}
/* the three "what makes it unique" panels */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s8);text-align:left}
.trio div{background:#fff;border-radius:var(--r-lg);padding:var(--s6);box-shadow:var(--sh-1);
border-top:4px solid var(--mint);font-size:16.5px;color:var(--body);line-height:1.7;
transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.trio div:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
@media(max-width:880px){.trio{grid-template-columns:1fr}}
/* image caption used under the QPR and PSA photos */
.capt{margin-top:var(--s3);font-style:italic;font-size:14.5px;color:var(--body);text-align:center}
/* coalition partner cards */
.coal{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5);margin-top:var(--s7);text-align:left}
.coal article{background:#fff;border-radius:var(--r-lg);padding:var(--s6);box-shadow:var(--sh-1);
transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.coal article:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.coal h4{margin-bottom:var(--s3)}
.coal p{color:var(--body);font-size:16px;line-height:1.7}
.coal .sub-label{grid-column:1/-1;text-align:center;font-weight:800;font-style:italic;
color:var(--indigo);letter-spacing:.02em;margin-top:var(--s4)}
.coal .mark{grid-column:1/-1;display:flex;justify-content:center;align-items:center;padding:var(--s4) 0}
.coal .mark img{max-width:230px;height:auto}
@media(max-width:880px){.coal{grid-template-columns:1fr}}
/* video grid */
.vgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5);margin-top:var(--s8)}
.vgrid video{width:100%;aspect-ratio:16/9;border-radius:var(--r-lg);background:var(--navy);
box-shadow:var(--sh-2);display:block}
@media(max-width:760px){.vgrid{grid-template-columns:1fr}}
/* "content coming soon" pages */
.soon{max-width:640px;margin:var(--s8) auto 0;background:#fff;border-radius:var(--r-xl);
padding:var(--s9) var(--s7);box-shadow:var(--sh-1);border:1px dashed var(--line);text-align:center}
.soon p{font-size:var(--t-lg);color:var(--body);margin:0}
.soon .dots{display:flex;gap:8px;justify-content:center;margin-bottom:var(--s5)}
.soon .dots i{width:9px;height:9px;border-radius:50%;background:var(--mint);opacity:.35;
animation:sdot 1.4s var(--ease) infinite}
.soon .dots i:nth-child(2){animation-delay:.18s}
.soon .dots i:nth-child(3){animation-delay:.36s}
@keyframes sdot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-5px)}}
@media(prefers-reduced-motion:reduce){.soon .dots i{animation:none;opacity:.5}}
/* staff grid */
.people{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);margin-top:var(--s8);text-align:left}
.person{display:block;background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);
transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.person:hover{transform:translateY(-6px);box-shadow:var(--sh-2)}
.person img,.person .slot{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--cloud)}
.person .pb{padding:var(--s4) var(--s5) var(--s5)}
.person h5{font-size:17px;margin:0 0 4px;color:var(--navy);line-height:1.25}
.person .role{font-size:13.5px;color:var(--body);line-height:1.5}
.person .cred{font-size:12.5px;color:var(--indigo);font-weight:700;letter-spacing:.02em;margin-top:3px}
@media(max-width:1000px){.people{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.people{grid-template-columns:repeat(2,1fr)}}
/* section tabs / jump chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:var(--s6)}
.chips a{padding:9px 18px;border-radius:var(--r-pill);background:#fff;box-shadow:var(--sh-1);
font-weight:700;font-size:14.5px;color:var(--navy);transition:all .25s var(--ease-out)}
.chips a:hover{background:var(--indigo);color:#fff;transform:translateY(-2px)}
/* board columns */
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);margin-top:var(--s7);text-align:left}
.board section{background:#fff;border-radius:var(--r-lg);padding:var(--s6);box-shadow:var(--sh-1)}
.board h3{font-size:19px;margin-bottom:var(--s4);padding-bottom:var(--s3);
border-bottom:2px solid var(--mint)}
.board ul{list-style:none;display:grid;gap:9px}
.board li{color:var(--body);font-size:16px}
.board li b{color:var(--navy)}
@media(max-width:880px){.board{grid-template-columns:1fr}}
/* article / news cards */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s8);text-align:left}
.news article{background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);
display:flex;flex-direction:column;transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.news article:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.news img,.news .slot{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.news .nb{padding:var(--s5);display:flex;flex-direction:column;flex:1}
.news .meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12.5px;color:var(--body);
margin-bottom:var(--s3)}
.news .tag{background:var(--mint-lt);color:var(--navy);font-weight:700;padding:3px 10px;
border-radius:var(--r-pill);font-size:11.5px;letter-spacing:.03em;text-transform:uppercase}
.news h3{font-size:19px;line-height:1.3;margin-bottom:var(--s3)}
.news h3 a{color:var(--navy)}
.news h3 a:hover{color:var(--indigo)}
.news p{color:var(--body);font-size:15px;line-height:1.65;flex:1}
.news .link-arrow{margin-top:var(--s4)}
@media(max-width:980px){.news{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.news{grid-template-columns:1fr}}
/* job listings */
.jobs{display:grid;gap:var(--s4);margin-top:var(--s7);text-align:left;max-width:900px;margin-inline:auto}
.job{background:#fff;border-radius:var(--r-lg);padding:var(--s6);box-shadow:var(--sh-1);
transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.job:hover{transform:translateX(4px);box-shadow:var(--sh-2)}
.job h3{font-size:21px;margin-bottom:var(--s3)}
.job .tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--s4)}
.job .tags span{background:var(--cloud);color:var(--body);font-size:12.5px;font-weight:600;
padding:4px 12px;border-radius:var(--r-pill)}
.job p{color:var(--body);font-size:15.5px;line-height:1.7;margin-bottom:var(--s4)}
/* sponsor wall groups */
.swall{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s5);margin-top:var(--s7);
align-items:center}
.swall .lw{background:#fff;border-radius:var(--r);padding:var(--s4);box-shadow:var(--sh-1);
display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;
transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.swall .lw:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.swall img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
@media(max-width:980px){.swall{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.swall{grid-template-columns:repeat(2,1fr)}}
/* legal / policy pages */
.legal{max-width:78ch;margin:var(--s7) auto 0;text-align:left}
.legal h2{font-size:24px;margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--line)}
.legal h2:first-of-type{border-top:0;padding-top:0;margin-top:var(--s6)}
.legal p{color:var(--body);font-size:16.5px;line-height:1.8;margin-top:var(--s4)}
.legal ul{list-style:none;display:grid;gap:var(--s4);margin-top:var(--s5)}
.legal li{color:var(--body);font-size:16.5px;line-height:1.8;padding-left:var(--s5);position:relative}
.legal li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:8px;border-radius:50%;
background:var(--mint)}
.legal .eff{font-weight:700;color:var(--navy);margin-top:var(--s5)}
.legal a{text-decoration:underline;text-underline-offset:3px;font-weight:600}
.legal .flag{background:#FFF6ED;border:1px solid #F5CBA0;border-left:4px solid var(--coral);
border-radius:var(--r);padding:var(--s5);margin-top:var(--s5);font-size:15.5px;color:#7A4218;
line-height:1.7}
.legal .flag b{color:var(--coral);letter-spacing:.03em}
/* featured blog post */
.feat-post{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s7);align-items:center;
background:#fff;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-2);
margin-top:var(--s7);text-align:left}
.feat-post img,.feat-post .slot{width:100%;height:100%;min-height:320px;object-fit:cover;display:block}
.feat-post .fb{padding:var(--s7) var(--s7) var(--s7) 0}
.feat-post h3{font-size:28px;line-height:1.25;margin-bottom:var(--s4)}
.feat-post h3 a{color:var(--navy)}
.feat-post h3 a:hover{color:var(--indigo)}
.feat-post p{color:var(--body);font-size:16.5px;line-height:1.7}
@media(max-width:880px){.feat-post{grid-template-columns:1fr}.feat-post .fb{padding:0 var(--s6) var(--s6)}
.feat-post img,.feat-post .slot{min-height:0;aspect-ratio:16/9}}
/* headings promoted for accessibility keep their original visual weight */
h2.h-sm,h3.h-sm{font-size:clamp(19px,2.1vw,23px);font-weight:800;letter-spacing:-.02em}
.center h2.h-sm::after{width:40px;height:3px;margin-top:var(--s4)}
/* card and person titles moved h4/h5 -> h3; hold the old sizes */
.card h3{font-size:var(--t-xl);letter-spacing:-.022em}
.person h3{font-size:17px;margin:0 0 4px;color:var(--navy);line-height:1.25;letter-spacing:-.01em}
.step h3,.way h3{font-size:17px;margin-bottom:var(--s3);letter-spacing:-.015em}
.coal h3{font-size:var(--t-xl);margin-bottom:var(--s3);letter-spacing:-.022em}
/* a chips strip belongs to the hero above it, not floating in its own band */
section.band-tight .chips{margin-top:0}
/* gallery and logo walls sitting straight under a hero were floating too low */
.gallery:first-child,.swall:first-child{margin-top:0}
/* stop the last band colliding with the mint signup strip */
section.band-mint{padding-block:clamp(38px,4.6vw,72px)}
/* legal pages: the first rule was doubling up with the section padding */
.legal h2:first-of-type{margin-top:var(--s5)}
.legal .flag+.eff{margin-top:var(--s5)}
/* split blocks were bottom-heavy on tablet */
@media(max-width:980px){.split{grid-template-columns:1fr;gap:var(--s6)}}
/* hero grid collapses earlier so the headline never squeezes to 3 words a line */
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:var(--s7)}}
/* long single-column lists were running to full width and hurting readability */
.hlist.one{max-width:78ch;margin-inline:auto}
.center .hlist.one>div{text-align:left}
/* trio panels: even out ragged heights */
.trio div{display:flex;align-items:flex-start}
/* people grid: tighten the gap so 4-up does not look sparse */
.people{gap:var(--s4)}
/* video grid needed breathing room from the heading */
.vgrid{margin-top:var(--s7)}
/* footer was sitting too close to the signup strip */
.ftr{padding-block:clamp(44px,4.6vw,72px) var(--s5)}
/* headings promoted to h2 for structure, sized as they were */
h2.h-md{font-size:21px;margin-bottom:var(--s3);letter-spacing:-.022em;font-weight:800}
.card h2{font-size:var(--t-xl);letter-spacing:-.022em;font-weight:800}
.center h2.h-md::after,.card h2::after{display:none}
/* W-3 and W-p3 ....... animated sponsor marquee, replaces the static wall */
.mq{margin-top:var(--s7);position:relative;overflow:hidden;
-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq-in{display:flex;width:max-content;animation:mq 64s linear infinite}
.mq:hover .mq-in,.mq:focus-within .mq-in{animation-play-state:paused}
.mq-track{display:flex;align-items:center;gap:var(--s7);padding-right:var(--s7);flex:0 0 auto}
.mq .lw{flex:0 0 auto;width:148px;height:76px;display:grid;place-items:center;
filter:grayscale(1) contrast(.9);opacity:.62;
transition:filter .35s var(--ease-out),opacity .35s var(--ease-out),transform .35s var(--ease-out)}
.mq .lw:hover{filter:none;opacity:1;transform:translateY(-3px) scale(1.05)}
.mq .lw img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
@keyframes mq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){
.mq{-webkit-mask:none;mask:none;overflow-x:auto}
.mq-in{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
.mq-track[aria-hidden="true"]{display:none}
.mq-track{flex-wrap:wrap;justify-content:center;gap:var(--s5)}}
@media(max-width:600px){.mq .lw{width:112px;height:58px}.mq-track{gap:var(--s5)}}
/* W-p1 ............... card titles were sitting right on the image edge */
.card .card-media{margin-bottom:var(--s5)}
.card h2,.card h3{margin-top:0}
.card-media+h2,.card-media+h3{margin-top:var(--s2)}
/* W-p2 ............... breathing room between testimonial cards */
.tcard{padding:var(--s7)}
/* W-4 ................ the homepage feature chips, now free of the collision */
.feats{gap:var(--s3)}
.feat{min-height:0;display:block;text-align:center;padding:var(--s5) var(--s3)}
.feat .ic{margin:0 auto var(--s3);width:38px;height:38px;border-radius:12px;
background:linear-gradient(150deg,var(--mint-lt),#EAF6F1);display:grid;place-items:center}
.feat .ic svg{width:20px;height:20px}
/* W-1 ................ the official lockup, large, at the top of the homepage */
.hero-lockup{display:block;margin-bottom:var(--s5)}
.hero-lockup img{width:min(430px,80%);height:auto;display:block}
.hero h1.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
clip-path:inset(50%);white-space:nowrap}
@media(max-width:980px){.hero-lockup img{width:min(340px,74%)}}
/* W-c1 ............... the coalition list item read as a wall of text with a
bold-italic sentence buried mid paragraph. Copy is untouched; the call to
action is now given its own line and the card given room to breathe. */
.hlist.one.plain>div{padding:var(--s5) var(--s6);line-height:1.75}
.hlist.plain div b i,.hlist.plain div i b{display:block;margin:var(--s4) 0 var(--s2);
font-style:normal;font-weight:800;color:var(--indigo);letter-spacing:-.01em;font-size:16.5px}
.hlist div a{font-weight:600;text-decoration:underline;text-underline-offset:3px}
/* The live site sets each service icon in a soft rounded square, alternating
indigo and mint down the grid. Same idea, modernised: bigger radius, the
tint rather than a solid fill, and the stroke in the accent colour. */
.card .ic{width:54px;height:54px;border-radius:18px;
background:color-mix(in srgb, var(--indigo) 9%, #fff);
color:var(--indigo);box-shadow:none;border:1px solid color-mix(in srgb, var(--indigo) 14%, transparent)}
.grid>.card:nth-child(even) .ic{background:color-mix(in srgb, var(--mint-dp) 11%, #fff);
color:var(--mint-dp);border-color:color-mix(in srgb, var(--mint-dp) 18%, transparent)}
.card .ic svg{width:25px;height:25px}
.card:hover .ic{transform:scale(1.06) rotate(-3deg)}
/* older browsers without color-mix still get a sensible chip */
@supports not (background:color-mix(in srgb,red 5%,#fff)){
.card .ic{background:#EEF0FA;color:var(--indigo);border-color:#DCE1F4}
.grid>.card:nth-child(even) .ic{background:#E6F5EF;color:var(--mint-dp);border-color:#CDE9DF}}
/* the three counselling chips take the same treatment, indigo like the live site */
.feat .ic{background:color-mix(in srgb, var(--indigo) 9%, #fff);color:var(--indigo);
border:1px solid color-mix(in srgb, var(--indigo) 14%, transparent);border-radius:13px;
width:40px;height:40px}
.feat .ic svg{width:21px;height:21px}
@supports not (background:color-mix(in srgb,red 5%,#fff)){
.feat .ic{background:#EEF0FA;border-color:#DCE1F4}}
/* the five support group links, where the photo mosaic used to be */
.grouplist{display:grid;gap:var(--s3);align-content:start}
.grp{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
background:#fff;border-radius:var(--r);padding:var(--s5) var(--s6);box-shadow:var(--sh-1);
border-left:4px solid var(--mint);
transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s var(--ease-out)}
.grp:hover{transform:translateX(5px);box-shadow:var(--sh-2);border-left-color:var(--indigo)}
.grp h3{font-size:17.5px;line-height:1.35;color:var(--navy);letter-spacing:-.015em;margin:0}
.grp .link-arrow{color:var(--indigo);flex:0 0 auto}
.grp .link-arrow svg{width:17px;height:17px}
.grp .link-arrow::after{display:none}
/* the counselling chips are headings now, sized as the bold text was */
.feat h3{display:block;font-size:14.5px;color:var(--navy);font-weight:800;
letter-spacing:-.01em;line-height:1.35;margin:0}
/* The live site renders this as a 3 column grid of solid tiles, first cell
empty, alternating indigo and near-black, white heading, one icon each, and
a 32px rounded corner on the leftmost tile of each row. Structure matched;
colours and type drawn from our system. */
.gt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
border-radius:var(--r-lg);overflow:hidden}
.gt-blank{background:transparent}
.gt{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s6);
min-height:212px;padding:var(--s5);color:#fff;position:relative;isolation:isolate;
transition:transform .35s var(--ease-out),filter .35s var(--ease-out)}
.gt-a{background:var(--indigo)}
.gt-b{background:#2A2A3D}
.gt:nth-child(2),.gt:nth-child(4){border-top-left-radius:32px}
.gt::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
background:linear-gradient(150deg,var(--indigo-lt),var(--mint-dp));
transition:opacity .35s var(--ease-out)}
.gt:hover{transform:translateY(-3px)}
.gt:hover::after{opacity:1}
.gt h3{color:#fff;font-size:clamp(18px,1.5vw,22px);font-weight:600;line-height:1.25;
letter-spacing:-.018em;margin:0}
.gt-ic{width:44px;height:44px;border-radius:13px;background:#fff;color:var(--indigo);
display:grid;place-items:center;flex:0 0 auto}
.gt-ic svg{width:23px;height:23px}
@media(max-width:900px){.gt-grid{grid-template-columns:repeat(2,1fr)}
.gt-blank{display:none}
.gt:nth-child(2),.gt:nth-child(4){border-top-left-radius:0}
.gt:nth-child(2){border-top-left-radius:32px}}
@media(max-width:560px){.gt-grid{grid-template-columns:1fr}.gt{min-height:0}}
/* the statistic label is an h2 on the live site; keep it looking like a label */
.stat .stat-l{font-size:14.5px;font-weight:600;letter-spacing:.01em;color:var(--body);
line-height:1.45;margin:var(--s2) 0 0;text-transform:none}
.center .stat .stat-l::after{display:none}
/* the live hero rotates five photographs; ours crossfades the same five */
.hero-shot[data-hero-carousel]{position:relative;aspect-ratio:540/426}
.hero-shot .hc{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .9s var(--ease);}
.hero-shot .hc.on{opacity:1}
.hero-shot .hc img,.hero-shot .hc .slot{width:100%;height:100%;object-fit:cover;display:block}
@media(prefers-reduced-motion:reduce){
.hero-shot .hc{transition:none}
}
/* the lockup experiment is gone: the live hero uses a text H1 at 64px */
.hero-lockup{display:none}
/* Sponsor marquee. Full colour, always. The greyscale-until-hover treatment was
my choice and it is wrong for a donor wall: these are people who paid to be
recognised. Wider cell so long wordmarks are not squeezed, and generous
padding so nothing touches an edge. */
.mq .lw{width:170px;height:84px;padding:6px 10px;filter:none;opacity:1}
.mq .lw:hover{filter:none;opacity:1;transform:translateY(-3px) scale(1.04)}
.mq .lw img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
@media(max-width:600px){.mq .lw{width:132px;height:66px}
/* A width on the cell, not just on the image, so the row keeps its
rhythm whatever the logo does. Without it an unloaded logo collapses
the cell to its padding and the marquee becomes a line of stubs. */
.mq .lw img{min-width:44px}}
/* the older static wall, same rules */
.logos .lw{filter:none;opacity:1;aspect-ratio:auto;min-height:78px;padding:6px}
.logos .lw:hover{filter:none;opacity:1}
.logos img{max-height:78px;max-width:100%;width:auto;object-fit:contain}
/* Diagrams carry information. Never crop them, and give them a light card so a
transparent or white-background graphic still reads on a tinted band. */
.pair img[style*="contain"],.pair .slot{background:#fff;border-radius:var(--r-lg);
padding:var(--s5);box-shadow:var(--sh-1);height:auto}
/* Solid, not a gradient. The old bands faded to white at both edges, so where
two sat together they read as one block and the tint was nearly invisible. */
section.band-a{background:#fff}
section.band-b{background:var(--band)}
section.band-mint{background:#EAF8F2}
/* the collapse rule is no longer needed: alternation means no two neighbours
share a background. Left as a guard in case a page ever hand-sets a class. */
section.band-a+section.band-a,section.band-b+section.band-b{padding-top:0}
/* cards need to stay distinct from the tinted band behind them */
section.band-b .card,section.band-b .tcard,section.band-b .job,
section.band-b .person,section.band-b .coal article,section.band-b .news article,
section.band-b .faq details,section.band-b .hlist div,section.band-b .way,
section.band-b .step,section.band-b .trio div,section.band-b .soon{
background:#fff;border-color:var(--line)}
/* (removed) a white card on tinted bands, from the earlier attempt at the
white-background problem. The white is now gone from the files
themselves, so a card here would only put it back. */
/* Some sections carry .wrap themselves, which caps them at 1200px. Their tint
would then paint as a centred box with white gutters either side rather than
a band across the page. Break the background out to full viewport width
without touching the content's measure. */
section.wrap.band-a,section.wrap.band-b{background:transparent;position:relative;z-index:0}
section.wrap.band-a::before,section.wrap.band-b::before{
content:"";position:absolute;inset-block:0;left:50%;transform:translateX(-50%);
width:100vw;z-index:-1}
section.wrap.band-a::before{background:#fff}
section.wrap.band-b::before{background:var(--band)}
/* A real horizontal scroller. Works with a trackpad, a swipe, the arrows, or
the keyboard, and shows one quote at a time instead of stacking all six.
Scroll snapping does the work; the script only syncs the dots and arrows. */
[data-carousel]{display:flex;gap:var(--s5);overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;scrollbar-width:none;
padding-block:var(--s2);margin-top:var(--s7)}
[data-carousel]::-webkit-scrollbar{display:none}
[data-carousel]:focus-visible{outline:3px solid var(--mint);outline-offset:6px;border-radius:var(--r-lg)}
[data-carousel] .tcard{flex:0 0 100%;scroll-snap-align:center;margin:0}
@media(min-width:1100px){[data-carousel] .tcard{flex-basis:calc(50% - var(--s5)/2)}}
/* the arrows live once per carousel, under it, beside the dots */
.tcard footer .tnav{display:none}
.tctrl{display:flex;align-items:center;justify-content:center;gap:var(--s5);margin-top:var(--s5)}
.tctrl .tnav{display:flex;gap:var(--s3)}
.tnav button[disabled]{opacity:.35;cursor:default;transform:none}
.tnav button[disabled]:hover{background:#fff;border-color:var(--line);color:inherit;transform:none}
.tdots{margin-top:0}
@media(prefers-reduced-motion:reduce){[data-carousel]{scroll-behavior:auto}}
/* ---- marathon overlay ------------------------------------------------- */
.mdl{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;
justify-content:center;padding:clamp(0px,2.5vw,32px)}
.mdl[hidden]{display:none}
.mdl-back{position:absolute;inset:0;background:rgba(15,22,54,.62);
backdrop-filter:blur(3px);animation:mdlfade .22s ease both}
.mdl-panel{position:relative;width:min(1180px,100%);height:min(94vh,100%);
background:#fff;border-radius:clamp(0px,1.2vw,18px);overflow:hidden;
box-shadow:0 30px 80px rgba(15,22,54,.4);
animation:mdlrise .28s cubic-bezier(.2,.7,.3,1) both}
/* The frame scrolls, the page behind it does not. */
.mdl-frame{display:block;width:100%;height:100%;border:0}
.mdl-x{position:absolute;top:14px;right:14px;z-index:2;width:44px;height:44px;
border:0;border-radius:50%;background:rgba(255,255,255,.94);cursor:pointer;
box-shadow:0 2px 10px rgba(15,22,54,.28);display:grid;place-items:center;
transition:background .15s,transform .15s}
.mdl-x:hover{background:#fff;transform:scale(1.06)}
.mdl-x:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.mdl-x svg{width:20px;height:20px;fill:none;stroke:#1B2559;stroke-width:2.2;
stroke-linecap:round}
body.mdl-open{overflow:hidden}
@keyframes mdlfade{from{opacity:0}to{opacity:1}}
@keyframes mdlrise{from{opacity:0;transform:translateY(18px) scale(.985)}
to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
.mdl-back,.mdl-panel{animation:none}
}
/* A phone gets the whole screen; a rounded card with 8px of backdrop showing
round the edge just wastes the width. */
@media (max-width:640px){
.mdl{padding:0}
.mdl-panel{height:100%;border-radius:0}
}
/* ---- sponsor marquee: white cards -------------------------------------- */
/* Carlos: "remove the white backgrounds so we can see the whole icons".
Done in the files, not with a card behind them. knockout_white.py floods the
background out from the edges, so enclosed white inside a mark survives and
nothing gets a hole punched in it. See that file for why the flood cannot be
allowed to cross an anti-aliased edge. */
/* No card. The white is now gone from the files themselves, so the marks sit
straight on the band, which is what Carlos asked for and reads lighter.
Two exceptions stay as solid tiles because their background IS the logo:
Morgan Stanley and Westport Rotary are white artwork on navy. They get a
rounded corner so they read as intentional rather than as a stray box. */
.mq .lw{padding:8px 12px}
section.band-sponsors{background:#fff}
/* NO border-radius on the image. I put one here and it rounded the corners off
the artwork itself: 18 of these logos have their mark running right to the
file edge, so an 8px radius clipped the corner of every one of them. That was
the "cut on the edges". Rounding belongs on a card behind a picture, never on
a logo that is already trimmed to its own content. */
/* ---- hero, round 2 -----------------------------------------------------
Carlos: "This image carrousel has to be bigger and centered. The whole hero
section must be balanced, we're also missing the star pattern and grid we had
in the original to make this section pop."
All three, and the third one was a real gap: PD's hero carries two decorative
layers we never imported, because the import manifest was built from
tags and these are CSS backgrounds. They are
Hero-BG-Pattern.png the grid
hero-image-bg-art.svg the star, a mint starburst at 20%
The star is in 07-patterns/ now. Paths here are root relative on purpose:
url() resolves against the stylesheet, not the page, so "assets/..." would
become /assets/assets/... the moment the CSS is served as a file. The grid arrives with the next run of
IMPORT PD ASSETS.command; a missing CSS background just does not paint, so
nothing breaks in the meantime. */
/* Balance. The columns were 1.04fr / .96fr, which is neither equal nor a
deliberate emphasis, and the picture was tilted 5deg so it sat visually
higher on one side. Equal columns, no tilt, both halves centred on the same
line. */
.hero-grid{grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px);align-items:center}
.hero-shot{transform:none;aspect-ratio:5/4;max-width:none;
box-shadow:0 30px 70px rgba(0,0,0,.42)}
.hero-shot:hover{transform:translateY(-4px)}
/* Bigger. The carousel now fills its column and the hero has room to breathe
round it. */
.hero{padding-block:clamp(56px,6.4vw,104px)}
.hero-media{position:relative;display:grid;place-items:center}
/* The star, behind the picture and bleeding past it, which is what makes the
corner feel designed rather than empty. */
.hero-media::before{content:"";position:absolute;z-index:0;pointer-events:none;
width:132%;aspect-ratio:622/668;top:50%;left:50%;transform:translate(-46%,-52%);
background:url("/assets/img/pd/07-patterns/hero-image-bg-art.svg") center/contain no-repeat;
opacity:.85}
.hero-media .hero-shot{position:relative;z-index:1;width:100%}
/* The grid. PD's tile when we have it, and a matching CSS grid underneath so
the section still reads as intended before the import runs. */
.hero::after{opacity:.55;
background-image:
url("/assets/img/pd/07-patterns/Hero-BG-Pattern.png"),
linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
background-size:auto,52px 52px,52px 52px;
background-position:center top,0 0,0 0;
background-repeat:no-repeat,repeat,repeat;
mask-image:radial-gradient(78% 70% at 62% 34%,#000,transparent)}
@media(max-width:900px){
.hero-grid{grid-template-columns:1fr}
.hero-media::before{width:118%}
}
/* ---- sponsor wall: one authoritative definition -------------------------
It scrolls, and every logo is whole. Three separate faults got it here.
1. THE CELL WAS A FIXED BOX. 170x84 for everything, when these 38 logos run
from 0.71:1 (Martha Stewart, square) to 8.26:1 (Eversource). Contained
into a fixed box, Eversource rendered 146x18: eighteen pixels tall. That
reads as a broken logo, and no object-fit value fixes it, because the box
was the problem.
Cells are now fixed HEIGHT and automatic WIDTH. Each logo gets the width
its shape needs and the row keeps a common optical height.
2. FLEX AND GRID ITEMS DO NOT SHRINK BELOW THEIR INTRINSIC SIZE. The cell was
display:grid and the image its item, so min-width:auto resolved to the
image's natural width, which beats max-width. A 1024px-wide mark held
itself at 1024px, overflowed the 146px cell, and .mq{overflow:hidden}
sliced it. That is the incomplete logos, and it is why object-fit:contain
appeared to do nothing at all. min-width:0 and min-height:0 are not
optional here.
3. THE EDGE FADE. mask:linear-gradient(...transparent...) dissolved the first
and last 7% of the strip, so logos evaporated in place rather than sliding
off. Gone, and nothing replaces it.
Restated in full on purpose: five rounds had left five contradicting
`.mq .lw` blocks, which is how each of these survived the previous fix. */
.mq{margin-top:var(--s7);position:relative;overflow:hidden;
-webkit-mask:none;mask:none}
.mq-in{display:flex;width:max-content;flex-wrap:nowrap;
animation:mq 64s linear infinite}
.mq:hover .mq-in,.mq:focus-within .mq-in{animation-play-state:paused}
.mq-track{display:flex;flex-wrap:nowrap;align-items:center;
gap:var(--s7);padding-right:var(--s7);flex:0 0 auto}
.mq .lw{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
height:96px;width:auto;padding:12px 18px;
filter:none;opacity:1;overflow:visible;
transition:transform .35s var(--ease-out)}
.mq .lw:hover{transform:translateY(-3px) scale(1.04)}
.mq .lw img{display:block;width:auto;height:auto;
max-height:72px;max-width:300px;
min-width:0;min-height:0;
object-fit:contain;border-radius:0}
@media(prefers-reduced-motion:reduce){
.mq{overflow:visible}
.mq-in{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
.mq-track{flex-wrap:wrap;justify-content:center;gap:var(--s5) var(--s6);
padding-right:0}
.mq-track[aria-hidden="true"]{display:none}
}
@media(max-width:600px){
.mq .lw{height:76px;padding:8px 12px}
.mq .lw img{max-height:56px;max-width:210px}
.mq-track{gap:var(--s5)}
}
/* ==== ROUND 4: the QA pass against the live site =========================
Every rule here answers a specific numbered comment. The comment number is
quoted so nobody has to guess later why a value is what it is.
------------------------------------------------------------------------ */
/* index[1] "Still not happy with the size and balance of this hero image.
Needs to be resized, bigger and the rest of the hero copy too so we have a
balance hero with not much blanck space as we have now."
Three things were making the blank space. The wrap was 1200px on a hero that
wants the full page. The picture was 5/4, which is taller than it is wide
relative to the text column, so the text column ran out first and left a gap
under it. And the copy was sized for a body column, not a hero.
Wider wrap, a landscape picture at live's own 607x479 proportion, and the
headline and lead scaled up so the two columns finish at roughly the same
line. */
.hero .wrap{max-width:1320px}
.hero-grid{grid-template-columns:1fr 1.06fr;gap:clamp(32px,4.2vw,80px);align-items:center}
.hero-shot{aspect-ratio:607/479}
.hero h1{font-size:clamp(38px,5.2vw,64px);line-height:1.04;letter-spacing:-.032em}
.hero p.lead{font-size:clamp(17px,1.5vw,21px);line-height:1.55;max-width:46ch;margin-top:var(--s5)}
.hero .cta-row{margin-top:var(--s6)}
.hero-meta{margin-top:var(--s6);padding-top:var(--s4)}
@media(max-width:980px){
.hero .wrap{max-width:var(--wrap)}
.hero-grid{grid-template-columns:1fr}
.hero h1{font-size:clamp(32px,7vw,44px)}
}
/* coalitions[1][2][4] "This images are gigantic, redice an put next to their
copy, balanced sized both."
The three prevention diagrams were running in a .pair forced to a single
column, so each one stretched to the full 1200px wrap. Live renders all three
at 607px wide. Capped at 620px and centred, which is live's size and stops
a flow chart from filling a laptop screen. */
.pair[style*="1fr"]{max-width:620px;margin-inline:auto}
.pair img,.pair .slot{max-width:100%;height:auto}
/* coalitions[3][5][6][7]-[12] and trainings[2][3]
"this whole copy is incorrectly formatted, looks crushed and cramped"
"space all of this into two rows to reduce size and make people scroll less.
Implement this change to all sections like this site wide"
Two separate causes. The crushing was 18px of padding on a card holding a
four-line paragraph with a bullet dot pulling the first line in. The scroll
length was every catalogue running as one long single column.
.hlist.two is the site-wide two-column reading list. Items keep their reading
width, the column count halves the scroll, and the padding is now set for
paragraphs rather than for one-liners. */
.hlist.two{grid-template-columns:repeat(2,1fr);max-width:none;gap:14px 18px;align-items:start}
.hlist.two>div{padding:var(--s5) var(--s6);line-height:1.7;font-size:16px}
.hlist.two>div::before{margin-top:11px}
@media(max-width:900px){.hlist.two{grid-template-columns:1fr}}
/* Breathing room for every hlist card, two-column or not. 18px round a
paragraph is what "cramped" looks like. */
.hlist div{padding:var(--s5) var(--s6);gap:14px}
.hlist.one.plain>div{padding:var(--s5) var(--s7)}
/* coalitions[13]-[19] "missing logo" x7.
Each coalition card now leads with its own mark. Fixed optical height,
automatic width, so a wordmark and a roundel sit on the same line without
either being squashed. Same lesson as the sponsor wall: fix the height, never
the box. */
.coal-logo{height:74px;display:flex;align-items:center;justify-content:flex-start;
margin-bottom:var(--s4)}
.coal-logo img,.coal-logo .slot{height:auto;width:auto;max-height:74px;max-width:200px;
min-width:0;min-height:0;object-fit:contain;border-radius:0;box-shadow:none;background:none}
.coal .mark img,.coal .mark .slot{max-width:150px;max-height:150px;box-shadow:none;background:none;
border-radius:0}
/* The coalition cards hold real paragraphs, so they get paragraph padding. */
.coal article{padding:var(--s6) var(--s6) var(--s7)}
.coal p{line-height:1.72}
/* cannabis[1] "Whole section spaced and padding incorrect".
The dead PSA frame is gone from the markup; this stops the section that held
it from keeping the gap the frame used to occupy. */
.capt{margin-top:var(--s4);font-size:var(--t-sm);color:var(--muted);text-align:center}
.vgrid{margin-top:var(--s8)}
.vgrid video{background:var(--navy)}
/* ==== ROUND 4b: two faults found by SCREENSHOTTING the built pages ========
Neither was visible in the markup. Both needed a rendered page and a ruler.
------------------------------------------------------------------------ */
/* 1. THE CRUSHED COPY. This is the real cause of Carlos's eight identical
"this whole copy is incorrectly formatted, looks crushed and cramped"
comments, and it was never about padding.
.hlist div was display:flex, so that the ::before dot could sit beside the
text. Flex makes EVERY child a flex item, and that includes the anonymous
items CSS wraps around bare text runs. So a sentence like
By raising awareness, teaching skills to youth, and organizing
support programs such as our Teen Nights Out or our peer
support groups...
laid out as five side-by-side columns, each one a few words wide, wrapping
down the card. Measured: one bullet 844px wide and 468px TALL. It read as
a broken table. Any list item containing a link or a bold run was hit,
which is why the complaint clusters on the coalitions and trainings pages.
Fixed by taking the item out of flex. The dot is absolutely positioned and
the text flows as normal inline content, which is what it always was. */
.hlist div{display:block;position:relative;padding:var(--s5) var(--s6) var(--s5) 34px}
.hlist div::before{position:absolute;left:16px;top:calc(var(--s5) + 9px);margin-top:0}
.hlist.one.plain>div{padding:var(--s5) var(--s7) var(--s5) 38px}
.hlist.one.plain>div::before{left:18px}
.hlist.two>div{padding:var(--s5) var(--s6) var(--s5) 34px}
.hlist.two>div::before{margin-top:0}
/* 2. THE COALITION LOGOS NEVER LOADED. All five reported
naturalWidth=0, complete=false, box 200x0.
slot() writes width:100% inline, which beats the stylesheet, so my
width:auto did nothing. With height:auto and no intrinsic size yet, the
box computed to zero height. A zero-height image is never "in view", so
loading="lazy" never fired, so it never got an intrinsic size, so the box
stayed at zero. A deadlock that renders as a blank strip above each card
heading, which is what the first screenshot showed.
Fixed height, automatic width, and !important because inline styles are
what we are overriding. Same lesson the sponsor wall taught: fix the
HEIGHT of a logo cell and never the box. */
.coal-logo{height:74px;display:flex;align-items:center;justify-content:flex-start;
margin-bottom:var(--s4)}
.coal-logo img,.coal-logo .slot{height:74px !important;width:auto !important;
max-width:210px;max-height:74px;min-width:0;min-height:0;
object-fit:contain !important;aspect-ratio:auto !important;
border-radius:0;box-shadow:none;background:none}
.coal .mark img,.coal .mark .slot{height:132px !important;width:auto !important;
max-width:none;object-fit:contain !important;aspect-ratio:auto !important;
box-shadow:none;background:none;border-radius:0}
/* ==== ROUND 4c: balance, measured off the rendered pages =================
prevention[3] "we also must balance the size of this image and the copy,
dont want a huge column of text and a small image."
.split-media was locked to aspect-ratio 4/3. In a 570px column that is a
427px-tall picture sitting beside a 900px-tall column of prose. The picture
was not small in itself; it was small RELATIVE TO the text it was paired
with, and a fixed ratio can never respond to that.
The media column now stretches to the height of the row, so the picture is
always as tall as the copy beside it. min-height keeps it a decent size on
rows where the copy is short; the ratio only applies once there is nothing
to match. */
.split{align-items:stretch}
.split-media{align-self:stretch;aspect-ratio:auto;min-height:clamp(320px,30vw,480px);
display:flex}
.split-media img,.split-media .slot{width:100%;height:100%;object-fit:cover;display:block}
/* Cards and heroes keep their fixed ratios: those are grids of equal tiles,
where a fixed ratio is the point. */
.card-media{aspect-ratio:4/3}
@media(max-width:980px){
.split-media{align-self:auto;aspect-ratio:4/3;min-height:0}
}
/* ==== ROUND 4d: the hero, measured ======================================
index[1] "Still not happy with the size and balance of this hero image.
Needs to be resized, bigger and the rest of the hero copy too so we have a
balance hero with not much blanck space as we have now."
Measured at 1440px before this block:
text column 588 x 729
picture 623 x 492, centred in the 729 row
-> 118px of empty navy above the picture and 119px below it
CTA row three buttons needing 610px in a 588px column, so
"Peer Support" dropped to a second line
So the blank space was not padding. It was a fixed-ratio picture inside a
taller row: 492 into 729 leaves 237px of nothing, and no amount of resizing
the FILE changes that. The picture now takes the height of the row it is in,
capped so it cannot run away on a wide screen, and the copy column is wide
enough for its own buttons. */
.hero-grid{grid-template-columns:1.06fr 1fr;align-items:stretch}
.hero-media{align-self:stretch;height:100%}
.hero-shot,.hero-shot[data-hero-carousel]{aspect-ratio:auto;height:100%;
min-height:clamp(360px,32vw,520px);max-height:680px}
.hero .cta-row{gap:12px;flex-wrap:wrap}
.hero .cta-row .btn{padding-inline:22px}
.hero{padding-block:clamp(48px,5.2vw,84px)}
.hero-meta{margin-top:var(--s5)}
@media(max-width:980px){
.hero-grid{grid-template-columns:1fr;align-items:start}
.hero-media{align-self:auto;height:auto}
.hero-shot,.hero-shot[data-hero-carousel]{aspect-ratio:5/4;height:auto;max-height:none}
}
/* Card paragraphs were inheriting the global reading-measure rule, which sets
max-width and margin-inline:auto so body prose sits in a comfortable column.
Inside a left-aligned card that centres the paragraph and leaves it indented
away from its own heading. Measured on a job card: heading at x=302, first
line of copy at x=385, 83px of margin on each side and no reason for it.
Cards set their own width; they do not need the measure. */
.job p,.coal p,.way p,.news article p,.person p,.faq p,
.evt-body p,.evt-details dd,.embed-slot p,.step p{max-width:none;margin-inline:0}
/* ==== ROUND 5: Events, Therapy Request, Donation form ====================
These pages exist because the build was sending people back to the old
WordPress site: 28 Events links, 7 Donate Now, 7 Get Started/Begin Intake.
------------------------------------------------------------------------ */
/* An event card. Picture left, everything else right, so a list of them scans
down the dates rather than down the photographs. */
.evt-list{display:grid;gap:var(--s5);margin-top:var(--s8);text-align:left;
max-width:960px;margin-inline:auto}
.evt{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:var(--s6);
background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden;
transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.evt:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.evt-media{display:block;position:relative;min-height:190px}
.evt-media img,.evt-media .slot{width:100%;height:100%;object-fit:cover;display:block}
.evt-body{padding:var(--s6) var(--s6) var(--s6) 0;display:flex;flex-direction:column;
align-items:flex-start;gap:var(--s3)}
.evt-when{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.evt-when span{font-size:13px;font-weight:700;letter-spacing:.01em;
padding:5px 11px;border-radius:var(--r-pill)}
.evt-date{background:var(--navy);color:#fff}
.evt-time{background:var(--cloud);color:var(--body)}
.evt-cost{background:rgba(93,202,165,.22);color:#186049}
.evt h3{font-size:var(--t-xl);margin:0;letter-spacing:-.022em}
.evt h3 a{color:inherit;text-decoration:none}
.evt h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.evt-series,.evt-venue{color:var(--muted);font-size:15px;margin:0}
.evt .btn{margin-top:var(--s3)}
@media(max-width:760px){
.evt{grid-template-columns:1fr}
.evt-media{min-height:190px}
.evt-body{padding:var(--s5) var(--s6) var(--s6)}
}
/* The details list on an event page. */
.evt-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
gap:var(--s5);margin-top:var(--s7);text-align:left;max-width:900px;margin-inline:auto}
.evt-details div{background:#fff;border-radius:14px;padding:var(--s5) var(--s6);
box-shadow:var(--sh-1)}
.evt-details dt{font-size:12.5px;font-weight:800;letter-spacing:.06em;
text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.evt-details dd{margin:0;font-weight:600;color:var(--navy);line-height:1.55}
/* A mount point for a third-party embed William will drop in.
It is deliberately marked as a slot rather than dressed up as a working form.
A fake donation form on a nonprofit site is a trust problem, and a fake intake
form on a clinic site is worse: someone in difficulty types their situation
into a box that goes nowhere. */
.embed-slot{border:2px dashed rgba(43,57,144,.28);border-radius:var(--r-lg);
background:linear-gradient(180deg,rgba(43,57,144,.035),rgba(43,57,144,.015));
padding:var(--s8) var(--s7);max-width:760px;margin:var(--s7) auto 0;text-align:left}
.embed-slot p{color:var(--body);line-height:1.7;margin:0 0 var(--s4)}
.embed-slot p:last-child{margin-bottom:0}
.embed-slot-title{font-weight:800;color:var(--navy);font-size:var(--t-lg);
letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.embed-slot-title::before{content:"";flex:0 0 auto;width:9px;height:9px;
border-radius:50%;background:var(--mint);box-shadow:0 0 0 5px rgba(93,202,165,.2)}
.embed-slot-note{font-size:14.5px;color:var(--muted);border-top:1px solid rgba(43,57,144,.12);
padding-top:var(--s4)}
/* ==== ROUND 5b: bound the split image. My own regression, caught by measuring
every page instead of the one I happened to screenshot.
Round 4c made .split-media stretch to the height of the copy beside it, to
answer "dont want a huge column of text and a small image". It worked on the
page I looked at and quietly wrecked the ones I did not. Measured after that
change:
/prevention/ a 900x600 LANDSCAPE photograph rendered at 528x1276
ratio 2.42, so object-fit:cover threw away about 78% of
the image width to fill the box
/support/ 1024x702 rendered 528x841
/about/ 461x1024 rendered 528x740
Matching the copy height is right up to a point and wrong past it. The media
now stretches as before but stops at 620px and at 1.15x its own width, so a
landscape photograph is never cropped past a portrait frame, and it centres
in whatever space is left rather than sticking to the top. */
.split-media{align-self:start;position:sticky;top:96px;aspect-ratio:auto;
height:clamp(320px,32vw,560px)}
/* Capping the height alone left a hole: on /prevention/ the copy runs 1276px
and the picture stopped at 600, so the left column was blank for 676px.
Sticky keeps the picture beside the copy the whole way down at a sane size,
which is what "balance the size of this image and the copy" actually wants.
On short rows sticky does nothing and the picture just sits there. */
/* slot() writes aspect-ratio:4/3 inline on the , which wins over the
stylesheet. Without this the picture keeps its own 4:3 box inside a taller
media column and the stretch does nothing. */
/* NO !important ON aspect-ratio HERE. It used to say aspect-ratio:auto
!important, which silently overrode the ratio slot(flex=True) writes inline,
so the 1000x300 panorama rendered at its full 3.33:1 as a 158px sliver even
after the clamp was tightened to 1.90. The clamp was working; this rule was
throwing it away. */
.split-media img,.split-media .slot{width:100%;height:auto;object-fit:cover;display:block}
@media(max-width:980px){
.split-media{max-height:none;min-height:0;aspect-ratio:4/3}
}
/* ==== ROUND 5c: blog posts and staff bios ================================
51 pages that used to be links off the site. Long-form reading, which the
rest of the site does not have, so it gets its own measure and rhythm.
------------------------------------------------------------------------ */
/* The 18 post heroes are not one shape. Some are 1024x576 photographs, some are
1024x1024 designed graphics, one is 819x1024 portrait. Forcing them all to
16/9 and cropping took the top line off the Eating Disorder Awareness Week
card and cut "2026" off the bottom. A designed graphic cannot be cropped: the
words are the picture. Natural shape, capped height, centred. */
.post-hero{max-width:900px;margin:0 auto var(--s8);display:flex;justify-content:center}
/* width and height need !important: slot() writes width:100% inline and inline
beats the stylesheet, which left the box at 900x520 for every post and
letterboxed square graphics inside it. */
.post-hero img,.post-hero .slot{aspect-ratio:auto !important;
width:auto !important;height:auto !important;
max-width:100%;max-height:520px;object-fit:contain;display:block;
border-radius:var(--r-xl);box-shadow:var(--sh-2)}
/* A reading column, not a layout column. 68ch is about 12 words a line, which
is where sustained reading stops being work. */
.post-body{max-width:68ch;margin-inline:auto;text-align:left}
.post-body p{font-size:17.5px;line-height:1.78;color:var(--body);margin:0 0 var(--s5);
max-width:none}
.post-body h2{font-size:clamp(24px,2.6vw,32px);margin:var(--s8) 0 var(--s4);
letter-spacing:-.024em;line-height:1.2}
.post-body h2:first-child{margin-top:0}
.post-body h3{font-size:clamp(19px,2vw,23px);margin:var(--s7) 0 var(--s3);
letter-spacing:-.02em;line-height:1.3}
.post-body h4{font-size:17.5px;margin:var(--s6) 0 var(--s3);font-weight:800}
.post-body a{color:var(--indigo);font-weight:600;text-decoration:underline;
text-underline-offset:3px;text-decoration-thickness:1.5px}
.post-body a:hover{color:var(--navy)}
.post-body strong{color:var(--navy);font-weight:700}
.post-list{margin:0 0 var(--s5);padding:0;list-style:none;display:grid;gap:12px}
.post-list li{position:relative;padding-left:30px;font-size:17px;line-height:1.7;
color:var(--body)}
.post-list li::before{content:"";position:absolute;left:8px;top:11px;width:7px;height:7px;
border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(93,202,165,.18)}
.post-body blockquote{margin:var(--s7) 0;padding:var(--s6) var(--s7);
border-left:4px solid var(--mint);background:var(--cloud);border-radius:0 14px 14px 0;
font-size:19px;line-height:1.65;color:var(--navy);font-style:italic}
.post-body blockquote p{margin:0;font-size:inherit;font-style:inherit}
/* PD offers downloads on some posts. We do not hold those files, so the block
says what the document is rather than being a link that 404s. */
.post-dl{display:flex;gap:14px;align-items:flex-start;background:#fff;
border:1px solid rgba(43,57,144,.14);border-radius:14px;padding:var(--s5) var(--s6);
box-shadow:var(--sh-1);font-size:15.5px;line-height:1.6}
.post-dl-ico{flex:0 0 auto;width:22px;height:22px;border-radius:6px;margin-top:2px;
background:linear-gradient(150deg,var(--mint),var(--indigo))}
.post-dl strong{color:var(--navy)}
.post-meta{display:flex;gap:12px;align-items:center;justify-content:center;
margin-bottom:var(--s6)}
@media(max-width:720px){
.post-body{max-width:none}
.post-body p,.post-list li{font-size:16.5px}
}
/* ==== The stats row, from Carlos's screenshot ============================
Three faults in one band.
1. Every figure read 0. The values were never in the markup; see the note in
pages.py. Fixed there.
2. The numbers did not sit on a common line. Each card sized itself to its own
label, so a two-line label pushed its number up and a three-line label
pushed it down. Grid rows inside the card fix the number to one row and the
label to another, so all five numbers share a baseline whatever the labels
do.
3. The labels were double spaced. line-height on .stat-l was inherited from
the h2 rule, which is set for display headings, not for a caption. 1.35. */
.stats{grid-template-columns:repeat(5,1fr);gap:var(--s4);align-items:stretch}
.stat{display:grid;grid-template-rows:auto 1fr;gap:var(--s3);
padding:var(--s6) var(--s5);align-content:start}
.stat b{line-height:1;margin:0}
.stat .stat-l{line-height:1.35;margin:0;align-self:start;text-transform:uppercase;
letter-spacing:.045em;font-size:13px;font-weight:700}
@media(max-width:1080px){.stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.stats{grid-template-columns:1fr}}
/* ==== Image QA: pictures shown whole ====================================
slot() switches an image to contain and adds .fit-whole when cover would
discard more than 30% of it. The frame keeps its shape so grids stay tidy;
the picture sits inside it on a tint that matches the card, so a portrait
flyer in a landscape card reads as a deliberate mount rather than a mistake.
------------------------------------------------------------------------ */
.fit-whole{background:var(--cloud);padding:10px}
section.band-cloud .fit-whole,.band-cloud .fit-whole{background:#fff}
.card-media .fit-whole,.news article .fit-whole,.evt-media .fit-whole{padding:14px}
.hero-shot .fit-whole,.hc .fit-whole{background:rgba(255,255,255,.06);padding:0}
/* Inside a card the plate has to be the card's own surface. On a cloud
background it reads as a grey box drawn around a picture that has been cut
off, which is exactly how the team described it. The letterboxing is
deliberate, the box around it was not. */
.card .fit-whole{background:transparent}
.split-media .fit-whole{background:var(--cloud);padding:0}
.person .fit-whole{background:var(--cloud);padding:6px}
/* A contained image is centred in its frame rather than pinned left. */
.fit-whole{object-position:center;margin-inline:auto}
/* The donate gallery cells were 376px wide holding 300px source tiles, a 1.25x
upscale on six graphics at once. Cells now cap at the source width so the
tiles render 1:1. */
.gallery{grid-template-columns:repeat(auto-fit,minmax(0,300px));justify-content:center}
/* ==== ROUND 8: flexible frames actually flex ============================
slot(flex=True) now writes the picture's own aspect-ratio onto the .
These two frames were overriding it with a fixed height, so the ratio did
nothing. They now size from the picture.
The panorama that started this: 1000x300 of the youth presenters. Cover in a
528x461 box threw away 66% of it. Contain left it filling 34%. Now the frame
is 528x220 and the whole photograph is in it, at full width, cropped by
nothing. That is what the picture always wanted to be.
------------------------------------------------------------------------ */
.hero-shot,.hero-shot[data-hero-carousel]{height:auto;aspect-ratio:auto;
min-height:0;max-height:none}
.hero-shot>img{display:block;width:100%;height:auto}
/* The carousel still needs a fixed box: its slides are absolutely positioned on
top of each other, so they cannot each set their own height. */
.hero-shot[data-hero-carousel]{aspect-ratio:607/479;height:auto}
.hero-shot .hc img,.hero-shot .hc .slot{width:100%;height:100%;object-fit:cover;
aspect-ratio:auto !important}
.split-media{height:auto;min-height:0;max-height:none;align-self:start;
position:sticky;top:96px}
.split-media>img,.split-media>.slot{width:100%;height:auto;display:block}
@media(max-width:980px){
.split-media{position:static;top:auto}
}
/* ==== YouTube, click to play ============================================
PD publishes 9 YouTube videos. We were carrying none of them, because
Elementor lazy-loads YouTube and never puts an iframe in the page, so every
sweep I wrote found nothing. See the VIDEO header in pages.py.
These are facades, not iframes. Nothing contacts YouTube until someone asks
to watch, which matters on a site about mental health, and one page can hold
six of them without loading six players. The poster comes from YouTube's own
CDN, so offline, which is how the review file is usually opened, the card
keeps its title, its play button and PD's colours instead of going blank.
------------------------------------------------------------------------ */
.yt{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;
background:linear-gradient(145deg,var(--navy),var(--indigo));cursor:pointer;
box-shadow:var(--sh-1);transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.yt:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.yt-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
aspect-ratio:auto !important;opacity:.62;transition:opacity .3s}
.yt:hover .yt-thumb{opacity:.75}
.yt::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(19,28,69,.15) 40%,rgba(19,28,69,.88))}
.yt-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-58%);
width:64px;height:64px;border-radius:50%;border:0;cursor:pointer;z-index:2;
background:rgba(255,255,255,.94);box-shadow:0 8px 26px rgba(0,0,0,.34);
display:grid;place-items:center;transition:transform .25s var(--ease-out),background .25s}
.yt:hover .yt-play{transform:translate(-50%,-58%) scale(1.08);background:#fff}
.yt-play:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.yt-tri{width:0;height:0;margin-left:5px;
border-left:20px solid var(--navy);border-top:12px solid transparent;
border-bottom:12px solid transparent}
.yt-title{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;
padding:var(--s5) var(--s5) var(--s4);color:#fff;font-weight:700;
font-size:14.5px;line-height:1.4;letter-spacing:-.008em;text-align:left;
max-width:none;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.yt-solo{max-width:760px;margin:var(--s7) auto 0}
@media(max-width:760px){.yt-play{width:54px;height:54px}}
/* ==== ROUND 10: pictures beside copy, and no more sticky =================
Carlos, on the split image: "this image is weird and moves weird".
The "moves weird" is sticky, which I added in round 5 so a picture would stay
beside a long column of copy. It is a real technique and it was the wrong call
here: on a page you are scanning, a picture that stays put while everything
else scrolls reads as a bug, not as a feature. Gone.
------------------------------------------------------------------------ */
.split-media{position:static;top:auto;align-self:start}
/* The figure block: heading and copy on one side, picture on the other, copy
left-aligned. Replaces nine full-width bands that each had one photograph
centred alone in an empty row. */
.split.fig{align-items:center;gap:clamp(32px,4.5vw,72px)}
.fig-copy{text-align:left;min-width:0}
.fig-copy>h2,.fig-copy>h3{text-align:left}
.fig-copy .lede{margin-top:var(--s5);max-width:52ch}
.fig-copy .hlist{margin-top:var(--s6)}
.fig-copy .split-media{margin-top:var(--s6)}
.center .split.fig .fig-copy{text-align:left}
.center .split.fig .fig-copy h2::after,.center .split.fig .fig-copy h3::after{margin-inline:0}
@media(max-width:980px){
.split.fig{grid-template-columns:1fr}
.fig-copy .split-media{margin-top:var(--s5)}
}
/* The two-column reading list was leaving ragged rows and a hole at the end.
Carlos: "unbalanced spacing on this section". Multi-column flows the items
and balances the two columns itself, so there is no hole and no ragged row.
Reading order stays top-to-bottom, which is what a list wants. */
.hlist.two{display:block;columns:2;column-gap:18px;max-width:none}
.hlist.two>div{break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 14px}
@media(max-width:900px){.hlist.two{columns:1}}
/* Coalition cards, matching live: the mark centred at the top of each card on
white, then the name, then the copy. Ours had a 74px logo shoved against the
left edge, which is what Carlos meant by "Logos are also wrong".
Multi-Town Initiatives is one card holding two initiatives, not a full-width
banner and two loose cards. */
.coal{grid-template-columns:repeat(3,1fr);gap:var(--s5);align-items:stretch}
.coal article{display:flex;flex-direction:column;padding:var(--s6)}
.coal-logo{height:auto;min-height:96px;display:flex;align-items:center;justify-content:center;
margin:0 0 var(--s5);background:#fff;border-radius:12px;padding:var(--s4)}
.coal-logo img,.coal-logo .slot{height:auto !important;width:auto !important;
max-height:84px;max-width:210px;min-width:0;min-height:0;
object-fit:contain !important;aspect-ratio:auto !important;
border-radius:0;box-shadow:none;background:none}
.coal h4{font-size:var(--t-lg);margin:0 0 var(--s3);letter-spacing:-.02em;line-height:1.25}
.coal .sub-label{text-align:center;font-style:italic;font-weight:700;color:var(--muted);
margin:0 0 var(--s5);font-size:15px;grid-column:auto}
.coal-group h4{margin-top:var(--s5)}
.coal-group h4:first-of-type{margin-top:0}
.coal p{margin-bottom:0}
.coal p + h4{margin-top:var(--s6)}
@media(max-width:1000px){.coal{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.coal{grid-template-columns:1fr}}
/* A flexible frame may take the picture's shape, but not without a ceiling.
Carlos: "huge image here. resize so its the same size as copy". The Coalition
of the Year trophy is 461x1024, so at 528px wide its own proportions make it
754px tall, which towered over the paragraph beside it. Height is now capped
and the picture crops into the cap, so a portrait photograph sits at about the
height of the copy instead of setting the height of the section. */
.split-media img,.split-media .slot{max-height:clamp(340px,36vw,540px);object-fit:cover}
.hero-shot img{max-height:none}
@media(max-width:980px){
.split-media img,.split-media .slot{max-height:none}
}
/* ---------- R10-h: a heading that follows copy opens a new block ----------
Carlos: "bad spacing here", on /support/alzheimers-caregivers/.
Three head() blocks stacked inside one band. h2 carried no top margin, so
"When it meets." sat hard against the last line of the paragraph above it
while the generous space landed UNDER its rule. The page read as one runaway
column with the gaps in the wrong places: tight where a new subject starts,
loose where the subject continues.
Scoped to direct children of a band's .wrap, so it never touches headings
inside cards, splits, prose or post bodies, which set their own rhythm. */
section > .wrap > * + h2,
section > .wrap > * + h3{margin-top:var(--s9)}
section > .wrap > * + h2.h-sm,
section > .wrap > * + h3.h-sm{margin-top:var(--s8)}
@media(max-width:720px){
section > .wrap > * + h2,
section > .wrap > * + h3{margin-top:var(--s8)}
}
/* ---------- R10-p: the Press section ---------- */
/* The Press band sits inside a centred wrap, so .center was pulling the card's
own text to the middle and margin-inline:auto was indenting the deck away
from its heading. A press card is a document listing: everything in it is
left aligned, flush to one edge. */
.prgrid{margin-top:var(--s8);max-width:56rem;margin-inline:auto}
.prcard,.prcard *{text-align:left}
.prcard p{margin-inline:0;max-width:64ch}
.prmeta{justify-content:flex-start}
.grid.g1{grid-template-columns:1fr}
.prcard{padding:var(--s6) var(--s7)}
.prmeta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);
margin:0 0 var(--s4);font-size:var(--t-sm)}
.prkick{font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);
font-size:12px}
.prmeta time{color:var(--muted);font-weight:600}
.prcard h3{max-width:34ch}
.prcard p{margin-top:var(--s3);color:var(--body)}
/* A press release is a document, not a blog post: one measure, left aligned,
no drop caps, no pull quotes competing with the copy. */
.prbody{max-width:68ch;margin-inline:auto;text-align:left}
.prq{margin:var(--s7) 0;padding:var(--s2) 0 var(--s2) var(--s6);
border-left:4px solid var(--mint)}
.prq p{font-size:var(--t-lg);line-height:1.6;color:var(--ink)}
.prq footer{margin-top:var(--s4);font-size:var(--t-sm);font-weight:700;color:var(--muted)}
.prend{margin-top:var(--s8);text-align:center;letter-spacing:.18em;color:var(--muted);
font-weight:800}
.prbody .cta-row{margin-top:var(--s7);justify-content:flex-start}
@media(max-width:720px){.prcard{padding:var(--s5)}.prq{padding-left:var(--s5)}}
/* ---------- R10-w: the picture floats, the copy wraps past it ----------
Carlos: "small image, huge pillar of text, resize and wrap to make it look
better." See blocks.split() for which sections get this and why. */
/* Capped, because with the measure caps off the copy below the picture would
otherwise run the full 1152px of the wrap, about 105 characters a line, which
is past the point where the eye loses its place returning to the left. At
1080 the copy beside the picture is about 45 characters and the copy below it
about 99: both readable, and the picture is bigger than it was in the
two-column version rather than smaller. */
.split.wrapfig{display:block;max-width:1080px;margin-inline:auto}
.split.wrapfig::after{content:"";display:block;clear:both}
.wf-media{width:min(52%,620px);margin:0 0 var(--s6) 0;border-radius:var(--r-xl);
overflow:hidden;box-shadow:var(--sh-3);background:var(--cloud);position:relative}
.wf-media.wf-left{float:left;margin-right:var(--s8);shape-margin:var(--s8)}
.wf-media.wf-right{float:right;margin-left:var(--s8);shape-margin:var(--s8)}
/* No height cap here. The cap exists to keep a two-column row balanced, and in
this layout there is no row to balance, so the picture runs at its own size. */
.wf-media img,.wf-media .slot{width:100%;height:auto;max-height:none;display:block}
.wf-media::after{content:"";position:absolute;inset:0;border-radius:inherit;
pointer-events:none;box-shadow:inset 0 0 0 1px rgba(19,28,69,.07)}
.wf-copy{min-width:0}
/* .prose caps itself at 72ch for a two-column row. Wrapped copy is already
narrowed by the float at the top and wants the full measure below it. */
/* The measure caps come off inside a wrapped section, all of them.
p is capped at 68ch globally and .lede at 62ch, and a cap is measured from
the LEFT EDGE OF THE CONTAINER, not from where the text actually starts. With
a 530px picture floated into the first 530px of a 735px paragraph box, that
left 140px of usable line: eight words a row down the side of the picture.
Wrapped copy sets its own measure by wrapping, so the caps are wrong here. */
.wf-copy .prose,.wrapfig .wf-copy p,.wrapfig .wf-copy .lede,
.wrapfig .wf-copy .hlist,.wrapfig .wf-copy h2,.wrapfig .wf-copy h3{max-width:none}
.wf-copy .prose{margin-top:var(--s5)}
.wf-copy > h2:first-child,.wf-copy > h3:first-child{margin-top:0}
/* A list is a block box, so only its LINES wrap around a float; the box itself
would still start under the picture and put the bullet dots behind it.
flow-root makes each list its own formatting context, so it sits cleanly
beside the picture or below it, never underneath. */
.wrapfig .hlist,.wrapfig ul,.wrapfig ol{display:flow-root}
.wrapfig .hlist{padding-top:2px}
@media(max-width:860px){
.wf-media,.wf-media.wf-left,.wf-media.wf-right{float:none;width:100%;
margin:0 0 var(--s6) 0}
}
/* ---------- R10-v: an odd video does not leave a hole ----------
Carlos: "we have a space on the videos here." Five videos in a fixed
two-column grid put the fifth alone in the left cell with an empty cell
beside it. Flex wrapping keeps the same two-up rhythm but centres whatever
is left over on the last row, so an odd count reads as deliberate. */
.vgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s5)}
.vgrid > *{flex:0 1 calc(50% - var(--s5) / 2);min-width:min(340px,100%);
max-width:calc(50% - var(--s5) / 2)}
@media(max-width:760px){.vgrid > *{flex:1 1 100%;max-width:100%}}
/* ---------- R10-p2: the press card carries the release and the PDF ---------- */
.prcard{position:relative}
.prcard h3 a.prlink{color:inherit;text-decoration:none}
/* Stretched link: the whole card is clickable, without nesting in . */
.prcard h3 a.prlink::after{content:"";position:absolute;inset:0;border-radius:inherit}
.prcard:hover h3 a.prlink{color:var(--blue)}
.prcta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s6);
margin-top:var(--s5)}
/* Above the stretched link so it is separately clickable. */
.prcta > *{position:relative;z-index:1}
.prpdf{display:inline-flex;align-items:center;gap:9px;font-size:var(--t-sm);
font-weight:700;color:var(--body);text-decoration:none;padding:9px 16px;
border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;
transition:border-color .2s,color .2s,background .2s}
.prpdf svg{width:16px;height:16px;flex:none}
.prpdf:hover{color:var(--navy);border-color:var(--navy);background:var(--cloud)}
.prpdf:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
/* ---------- R10-pr: the press release, exactly as designed ----------
A direct port of PD-Press-Release-Kim (web), rule for rule. Every selector is
namespaced under .pressdoc so a document that is deliberately NOT in the site
design system cannot leak its type sizes and colours into 82 other pages.
Values are the designed ones, not approximations. */
.pressdoc{--pr-navy:#1B2559;--pr-navy2:#2B3990;--pr-mint:#5DCAA5;--pr-ink:#1E2B5C;
--pr-body:#3D4861;--pr-grey:#5A6580;--pr-light:#F2F4F8;--pr-line:#D5DBE8;
color:var(--pr-body);line-height:1.62;text-align:left;
/* The designed file's exact stack, not the site's. Both want DM Sans, but
they name different fallbacks, and when DM Sans has not arrived yet the two
fall back to different fonts with different widths: the title broke to
three lines instead of two and the opening spread ran 53px longer. Carrying
the document's own stack means it sets the same type in the same measure
whether or not the webfont has loaded. */
font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif}
.pressdoc *{box-sizing:border-box}
/* The release uses for About and Media Contact, the way the designed
file does. On this site is a full-width page band with 96px of
padding and its own background, so those two blocks arrived inside big empty
tinted boxes and the sheet grew 590px taller than the design. Inside the
document a section is just a section. */
.pressdoc section{padding:0;margin:0;background:none;border:0}
/* Measured against the designed file block by block, these four were the whole
difference. The site sets text-wrap:balance on headings, which turned a
two-line title into three; and its body line-height is looser than the
release's 1.62, which added 53px to the opening spread, 30px to each quote
and 19px to the boiler plate. The document keeps its own typography. */
.pressdoc h1,.pressdoc h2,.pressdoc p,.pressdoc .pr-deck{text-wrap:wrap}
.pressdoc p,.pressdoc .pr-deck{line-height:1.62}
.pressdoc .pr-deck{line-height:1.5}
.pressdoc blockquote p{line-height:1.58}
.pressdoc section > .wrap{max-width:none;padding:0;margin:0}
.pressdoc article{margin:0}
/* The release sits on a sheet, the way the PDF does. */
.pr-sheet{max-width:780px;margin:34px auto;background:#fff;
box-shadow:0 1px 3px rgba(27,37,89,.08),0 18px 46px rgba(27,37,89,.10)}
.pr-pad{padding:0 60px}
.pr-head{padding:26px 60px 22px;display:flex;align-items:center;
justify-content:space-between;gap:20px;border-bottom:4px solid var(--pr-navy);
position:relative}
.pr-head::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:3px;
background:var(--pr-mint)}
.pr-head img,.pr-head .slot{width:186px!important;height:auto!important;display:block;
max-width:186px!important;aspect-ratio:auto!important;object-fit:contain}
.pr-tag{font-size:10.5px;font-weight:800;letter-spacing:.22em;color:var(--pr-navy2);
text-transform:uppercase;white-space:nowrap}
.pr-meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
flex-wrap:wrap;padding-top:38px}
.pr-rel{font-size:10.5px;font-weight:800;letter-spacing:.2em;color:var(--pr-navy2);
text-transform:uppercase}
.pr-meta time{font-size:13px;color:var(--pr-grey)}
.pressdoc h1{font-size:clamp(27px,3.6vw,36px);line-height:1.16;font-weight:800;
color:var(--pr-navy);letter-spacing:-.016em;margin:22px 0 0;max-width:none}
.pr-rule{width:62px;height:3px;background:var(--pr-mint);border-radius:2px;margin:18px 0 16px}
.pr-deck{font-size:clamp(15.5px,1.9vw,17.5px);line-height:1.5;color:var(--pr-body);
font-weight:500;max-width:none}
.pr-lede{display:grid;grid-template-columns:1fr 196px;gap:34px;align-items:start;
margin-top:32px}
.pressdoc p{font-size:16.5px;margin:0 0 18px;max-width:none;color:var(--pr-body)}
.pressdoc p strong{color:var(--pr-ink);font-weight:700}
.pr-portrait figure{margin:0}
.pr-portrait img,.pr-portrait .slot{width:100%!important;height:auto!important;
max-width:none!important;max-height:none!important;display:block;border-radius:3px;
aspect-ratio:auto!important;object-fit:contain}
.pr-cap{margin-top:12px;padding-top:11px;border-top:3px solid var(--pr-mint);
display:inline-block}
.pr-cap b{display:block;font-size:13px;font-weight:700;color:var(--pr-navy2)}
.pr-cap span{display:block;font-size:13px;color:var(--pr-grey)}
.pressdoc blockquote{background:var(--pr-light);border-left:5px solid var(--pr-mint);
border-radius:0 9px 9px 0;padding:26px 30px 22px;margin:30px 0}
.pressdoc blockquote p{font-size:17.5px;line-height:1.58;color:var(--pr-navy);
font-weight:500;margin-bottom:14px}
.pressdoc blockquote cite{font-style:normal;font-size:13.5px;font-weight:700;
color:var(--pr-navy2)}
.pressdoc h2{font-size:10.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
color:var(--pr-navy2);margin:38px 0 13px}
.pressdoc h2::after{display:none}
.pr-about p{font-size:15px}
.pressdoc hr{border:0;border-top:1px solid var(--pr-line);margin:32px 0}
.pr-contact p{font-size:15.5px;margin-bottom:4px}
.pr-contact a{color:var(--pr-navy2);text-decoration:none;
border-bottom:1px solid var(--pr-mint)}
.pr-contact a:hover{color:var(--pr-navy)}
/* Web affordances the paper version cannot have. */
/* 44px under the buttons. .pr-pad has no bottom padding of its own and
.pr-tools is its last child, so a zero bottom margin put "Download the PDF"
hard against the mint rule of the footer with nothing in between. */
.pr-tools{display:flex;gap:11px;flex-wrap:wrap;margin:34px 0 44px;padding-top:26px;
border-top:1px solid var(--pr-line)}
.pr-btn{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700;
text-decoration:none;padding:12px 20px;border-radius:8px;transition:.16s;
border:1.5px solid transparent}
.pr-btn svg{width:16px;height:16px;flex:none}
.pr-btn-primary{background:var(--pr-navy2);color:#fff}
.pr-btn-primary:hover{background:var(--pr-navy)}
.pr-btn-ghost{border-color:var(--pr-line);color:var(--pr-navy2)}
.pr-btn-ghost:hover{border-color:var(--pr-navy2)}
.pr-foot{border-top:2.5px solid var(--pr-mint);background:var(--pr-light);
padding:26px 60px 30px}
.pr-foot p{font-size:12.5px;color:var(--pr-grey);margin-bottom:4px}
.pr-foot a{color:var(--pr-grey)}
@media(max-width:720px){
.pr-sheet{margin:0;box-shadow:none}
.pr-pad,.pr-head,.pr-foot{padding-left:24px;padding-right:24px}
.pr-lede{grid-template-columns:1fr}
.pr-portrait{order:-1;max-width:230px}
.pr-head{flex-direction:column;align-items:flex-start;gap:12px}
}
@media print{
.pr-sheet{margin:0;box-shadow:none;max-width:none}
.pr-pad,.pr-head,.pr-foot{padding-left:0;padding-right:0}
.pr-tools{display:none!important}
.pressdoc blockquote{background:none;border-left:3px solid var(--pr-mint);
padding:0 0 0 16px}
.pr-foot{background:none}
.pressdoc h1,.pressdoc h2,.pressdoc blockquote,.pressdoc figure{break-inside:avoid}
}
/* ---------------------------------------------------------------------------
Team, round 14.
TWO THINGS CARLOS ASKED FOR ON 16 SEPTEMBER.
"Clicking the team member photo should also open the bios." The name is a
link now, restored by the pd-team-links plugin, and this stretches that one
link over the whole card: the photograph, the role, the space around them.
Done with a pseudo element rather than by wrapping the card in an anchor,
because the wrapping anchor is exactly what the HTML to Gutenberg converter
threw away in the first place. Nothing in the stored content changes, so
nothing can lose it again.
"on the hero of each bio it feels empty, why not put the first paragraph of
every bio there to fill it up, bigger font". The paragraph is moved by
pd_team_lede and pd_team_drop_lede in inc/shortcodes.php. This is the type.
It sits between the role line and the photograph, so it is capped at 38
characters a line: any wider and it collides with the headshot at the
breakpoint where the hero is still two columns.
--------------------------------------------------------------------------- */
.person{position:relative}
.person h3 a{color:inherit;text-decoration:none}
.person h3 a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.person:focus-within{outline:3px solid var(--mint);outline-offset:3px}
.person h3 a:focus-visible{outline:none}
.person:hover h3{color:var(--indigo)}
.hero .bio-lede{
letter-spacing:-.005em;
color:#D8DEEF;
margin-top:var(--s6)}
/* The copy column sits centred against the headshot, not pinned to its top.
pd_team_meta renders the role line and the Email and phone buttons, so the
paragraph lands underneath the buttons: 16px was not enough air between a
solid white pill and a 30px sentence, and whatever the copy did not use
collected as dead navy at the bottom of the column. Both columns centre on
each other now, so the shorter one is centred against the taller one
whichever way round that falls. */
.bio-hero .hero-grid{align-items:center}
.bio-hero .hero-grid>*{align-self:center}
.bio-hero .hero-media{align-self:center;height:auto}
/* Three sizes, and the measure moves with the size. Measured on the live team
hero at 1920, where the headshot column is 579x515 and the copy column 613:
the title and role alone fill 180px of that 515, which is the emptiness
Carlos was looking at. Filled column against photograph, per bucket:
no lede 180 / 515 35%
short 30px/28ch 406 / 515 79% 5 lines, 29 characters a line
mid 24px/32ch 484 / 515 94% 8 lines, 44 characters a line
long 19px/38ch 696 / 696 100% 17 lines, 53 characters a line
The long one grows the hero rather than filling a fixed box, and that is
safe: the photograph is object-fit:cover, so a TALLER frame crops sideways
and never off the top. Checked on Ryan McGough at 696: full head clearance.
A narrower measure for the short one is what buys the extra lines. Setting
one size for all three was the obvious thing and it does not work, because
the shortest opening paragraph is 145 characters and the longest is 897. */
.hero .bio-lede.is-short{font-size:clamp(22px,2.1vw,30px);line-height:1.4;max-width:28ch}
.hero .bio-lede.is-mid {font-size:clamp(19px,1.7vw,24px);line-height:1.5;max-width:32ch}
.hero .bio-lede.is-long {font-size:clamp(17px,1.35vw,19px);line-height:1.55;max-width:38ch}
/* One column below 980, so the measure is the column and the cap comes off. */
@media(max-width:900px){
.hero .bio-lede{max-width:none}
.hero .bio-lede.is-short{font-size:19px}
.hero .bio-lede.is-mid{font-size:17.5px}
.hero .bio-lede.is-long{font-size:16.5px}
}
/* ==== ROUND 15: the picture on a card is part of the link ==================
"we have others like subsections with images that should be able to be
clicked and guide us to subsections and are not clickable, i.e. Survey Data
on the Building Healthier Communities Through Prevention page".
Forty two cards across seven pages: the heading and the arrow underneath it
were links, the photograph above them was not. The photograph is the biggest
thing on the card and the most obvious thing to aim at, and on a phone it is
most of what you can see.
The same stretched pseudo-element the team cards use in round 14, and for the
same reason: a real anchor wrapped round the card is exactly what the HTML to
Gutenberg converter threw away when this site was built. This adds nothing to
the stored content, so there is nothing for a converter or an editor to lose,
and a card added next year gets it without anybody remembering to.
Checked across all thirty pages before writing it: 57 cards, and not one of
them has a second link inside it. That is what makes this safe. The moment a
card has a phone number in it as well, the overlay would swallow it and this
rule needs a :not() or the card needs a real anchor.
------------------------------------------------------------------------ */
.card{position:relative}
.card a.card-link::after{
content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
/* A card whose link is a bare hash goes nowhere, so it must not grow a
click target the size of the card. pd_unwrap_dead_anchors takes those
anchors out of the content anyway; this is the belt to that pair of braces,
for anything served from cache before the filter reaches it. */
.card a.card-link[href="#"]::after{content:none}
.card-media{overflow:hidden}
.card-media img{transition:transform .5s var(--ease-out)}
.card:hover .card-media img{transform:scale(1.03)}
.card:hover h3{color:var(--indigo)}
.card:focus-within{outline:3px solid var(--mint);outline-offset:4px;border-radius:var(--r-lg)}
.card a.card-link:focus-visible{outline:none}
/* ==== ROUND 15: the Press band on News and Resources ===================== */
.presslist{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,320px));
gap:var(--s6);justify-content:center;margin-top:var(--s7)}
.presscard{position:relative;background:#fff;border:1px solid var(--line);
border-radius:var(--r-lg);overflow:hidden;text-align:left;
box-shadow:0 2px 10px rgba(19,28,69,.05);
transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.presscard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(19,28,69,.12)}
.presscard img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.presscard .pc{padding:var(--s5)}
.presscard .meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
font-size:12.5px;color:var(--body);margin-bottom:var(--s3)}
.presscard .tag{background:var(--mint-lt);color:var(--navy);font-weight:700;
padding:3px 10px;border-radius:var(--r-pill);font-size:11.5px;
letter-spacing:.03em;text-transform:uppercase}
.presscard h3{font-size:clamp(18px,1.5vw,21px);line-height:1.25;margin:0 0 var(--s3)}
.presscard h3 a{color:inherit;text-decoration:none}
.presscard h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.presscard p{font-size:15px;line-height:1.55;margin:0}
.presscard:focus-within{outline:3px solid var(--mint);outline-offset:3px}
.presscard h3 a:focus-visible{outline:none}
.presslist .pdf{display:inline-flex;align-items:center;gap:7px;margin-top:var(--s4);
font-weight:700;font-size:14px;color:var(--indigo);position:relative;z-index:2}
@media(max-width:700px){
.presslist{grid-template-columns:1fr}
}