:root{
  --navy:#24384F; --sea:#3E8C7A; --sage:#61A293; --mist:#F6F9F8; --ink:#17232F;
  --white:#ffffff;
  --green-ink:#2C6656;                 /* accessible green for small text on light */
  --navy-700:#1b2c3e; --navy-900:#122130;
  --line:rgba(36,56,79,.14);
  --line-soft:rgba(36,56,79,.09);
  --text:#1d2b3a; --muted:#5a6b7b;
  --display:"Cinzel", Georgia, "Times New Roman", serif;
  --body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --maxw:1180px;
  --r:14px; --r-sm:10px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--mist); color:var(--text);
  font-family:var(--body); font-size:17px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:var(--green-ink); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
h1,h2,h3{margin:0; font-family:var(--display); font-weight:600; color:var(--navy); line-height:1.14; letter-spacing:.005em}
p{margin:0}
:focus-visible{outline:2.5px solid var(--sea); outline-offset:3px; border-radius:4px}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,44px)}
.section{padding-block:clamp(64px,9vw,116px)}
.eyebrow{font-family:var(--body); font-weight:600; font-size:.74rem; letter-spacing:.19em; text-transform:uppercase; color:var(--green-ink); display:inline-flex; align-items:center; gap:.6em}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--sea); display:inline-block}
.lede{font-size:clamp(1.06rem,1.6vw,1.28rem); line-height:1.6; color:var(--muted); max-width:40ch}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--body); font-weight:600; font-size:.98rem; letter-spacing:.005em;
  padding:.86em 1.5em; border-radius:999px; border:1.5px solid transparent; cursor:pointer;
  transition:transform .12s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
  will-change:transform; text-decoration:none;
}
.btn:hover{text-decoration:none}
.btn:active{transform:scale(.975)}
.btn--primary{background:var(--navy); color:#fff}
.btn--primary:hover{background:var(--navy-700)}
.btn--ghost{background:transparent; color:var(--navy); border-color:var(--line)}
.btn--ghost:hover{border-color:var(--navy)}
.btn--on-dark{background:var(--mist); color:var(--navy)}
.btn--on-dark:hover{background:#fff}
.btn--ghost-dark{background:transparent; color:#fff; border-color:rgba(255,255,255,.42)}
.btn--ghost-dark:hover{border-color:#fff; background:rgba(255,255,255,.06)}
.btn .arw{transition:transform .18s var(--ease)}
.btn:hover .arw{transform:translateX(3px)}

/* seam signature */
.seam{display:block}
.seam-rule{display:flex; align-items:center; gap:18px; color:var(--line)}
.seam-rule::before,.seam-rule::after{content:""; height:1px; flex:1; background:currentColor}

/* ---------- utility bar ---------- */
.util{background:var(--navy-900); color:rgba(255,255,255,.72); font-size:.76rem; letter-spacing:.02em}
.util .wrap{display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:38px; padding-block:7px}
.util strong{color:#fff; font-weight:600}
.util .reg{font-variant-numeric:tabular-nums; letter-spacing:.04em; color:rgba(255,255,255,.62)}
.util-link{color:#fff; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.45)}
.util-link:hover{text-decoration-color:#fff}
@media (max-width:720px){ .util .reg{display:none} }

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:50;
  background:rgba(246,249,248,.82); backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid transparent; transition:background-color .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.site-header.scrolled{background:rgba(246,249,248,.95); box-shadow:0 1px 0 var(--line-soft), 0 10px 30px -22px rgba(18,33,48,.5); border-bottom-color:var(--line-soft)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:78px}
.brand{display:flex; align-items:center; gap:12px; flex:0 0 auto}
.brand img{height:52px; width:auto}
@media (max-width:520px){ .brand img{height:44px} }
.brand .b-txt{display:none}
.nav-links{display:flex; align-items:center; gap:30px; margin-left:auto}
.nav-links a{color:var(--navy); font-weight:500; font-size:.97rem; letter-spacing:.005em; position:relative; padding:6px 0}
.nav-links a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--sea); transition:right .22s var(--ease)}
.nav-links a:hover{text-decoration:none}
.nav-links a:hover::after{right:0}
.nav-cta{margin-left:6px}
.nav-toggle{display:none; background:none; border:1.5px solid var(--line); border-radius:10px; width:44px; height:44px; align-items:center; justify-content:center; cursor:pointer}
.nav-toggle svg{width:22px; height:22px; stroke:var(--navy)}

@media (max-width:940px){
  .nav-links,.nav-cta.desktop{display:none}
  .nav-toggle{display:inline-flex}
}
.mobile-panel{display:none; border-top:1px solid var(--line-soft); background:var(--mist)}
.mobile-panel.open{display:block}
.mobile-panel .wrap{display:flex; flex-direction:column; gap:2px; padding-block:14px 20px}
.mobile-panel a{color:var(--navy); font-weight:500; padding:12px 4px; border-bottom:1px solid var(--line-soft)}
.mobile-panel .btn{margin-top:14px; align-self:flex-start; color:#fff}

/* ---------- hero ---------- */
.hero{position:relative; background:var(--navy); color:#fff; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(62,140,122,.28), transparent 55%),
    radial-gradient(90% 80% at 10% 110%, rgba(36,56,79,.6), transparent 60%),
    linear-gradient(180deg,#26405a,#1f3348);
}
.hero-motif{position:absolute; right:2%; top:50%; transform:translateY(-50%); width:min(380px,34vw); opacity:.12; pointer-events:none}
@media (max-width:860px){ .hero-motif{width:260px; right:-8%; opacity:.085} }
.hero .wrap{position:relative; z-index:2}
.hero-inner{padding-block:clamp(74px,11vw,140px); max-width:720px}
.hero .eyebrow{color:rgba(255,255,255,.72)}
.hero .eyebrow::before{background:var(--sage)}
.hero h1{color:#fff; font-size:clamp(2.15rem,5.4vw,3.7rem); line-height:1.1; letter-spacing:.01em; margin:22px 0 0}
.hero .sub{color:#e6edf2; font-size:clamp(1.06rem,1.7vw,1.28rem); line-height:1.6; max-width:52ch; margin:22px 0 0; font-weight:300}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:36px}
.tagline-slot{margin-top:30px; display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.6); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase}
.tagline-slot .dot{width:7px;height:7px;border-radius:50%;background:var(--sea)}
.tagline-slot em{font-style:normal}

/* ---------- stats band ---------- */
.stats{background:var(--white); border-bottom:1px solid var(--line-soft)}
.stats .grid{display:grid; grid-template-columns:repeat(3,1fr)}
.stat{padding:clamp(30px,4vw,52px) clamp(18px,3vw,40px); border-left:1px solid var(--line-soft)}
.stat:first-child{border-left:0}
.stat .num{font-family:var(--display); font-weight:600; color:var(--sea); font-size:clamp(2.6rem,5vw,3.9rem); line-height:1}
.stat .num.small{font-size:clamp(1.5rem,3vw,2.15rem)}
.stat .lab{margin-top:12px; font-size:.78rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--muted)}
.stat .note{margin-top:6px; font-size:.76rem; color:#93a1ac}
@media (max-width:720px){
  .stats .grid{grid-template-columns:1fr}
  .stat{border-left:0; border-top:1px solid var(--line-soft)}
  .stat:first-child{border-top:0}
}

/* ---------- section heads ---------- */
.head{max-width:60ch}
.head h2{font-size:clamp(1.8rem,3.4vw,2.6rem); margin:16px 0 0}
.head .lede{margin-top:18px}

/* ---------- pillars ---------- */
.pillars .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:clamp(38px,5vw,58px)}
.card{background:#fff; border:1px solid var(--line-soft); border-radius:var(--r); padding:clamp(26px,3vw,38px);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease)}
.card:hover{transform:translateY(-3px); box-shadow:0 24px 44px -30px rgba(18,33,48,.4); border-color:var(--line)}
.card .ic{width:48px; height:48px; border-radius:12px; background:rgba(62,140,122,.12); display:flex; align-items:center; justify-content:center; margin-bottom:20px}
.card .ic svg{width:26px; height:26px; stroke:var(--navy); fill:none; stroke-width:1.6}
.card h3{font-size:1.24rem; letter-spacing:.01em}
.card p{margin-top:10px; color:var(--muted); font-size:1rem; line-height:1.6}
@media (max-width:1000px){ .pillars .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:680px){ .pillars .grid{grid-template-columns:1fr} }

/* ---------- how we work ---------- */
.model{background:var(--white)}
.model .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:clamp(40px,5vw,60px)}
.step{padding:0 clamp(16px,2.4vw,34px); position:relative}
.step + .step{border-left:1px solid var(--line-soft)}
.step .k{font-family:var(--display); font-size:1.05rem; color:var(--sea); letter-spacing:.06em}
.step h3{font-size:1.28rem; margin-top:14px}
.step p{margin-top:12px; color:var(--muted); line-height:1.62}
.step .joint{position:absolute; top:-2px; right:-13px; z-index:3}
.step:last-child .joint{display:none}
@media (max-width:760px){
  .model .steps{grid-template-columns:1fr; gap:34px}
  .step{padding:0}
  .step + .step{border-left:0; border-top:1px solid var(--line-soft); padding-top:34px}
  .step .joint{display:none}
}

/* ---------- case study ---------- */
.case{background:var(--navy); color:#fff; overflow:hidden}
.case .grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,4vw,64px); align-items:center}
.case .eyebrow{color:var(--sage)}
.case .eyebrow::before{background:var(--sage)}
.case h2{color:#fff; font-size:clamp(1.7rem,3.2vw,2.4rem); margin-top:16px}
.case p{margin-top:18px; color:#dbe4ea; line-height:1.68; max-width:46ch; font-weight:300}
.case-stats{display:flex; flex-wrap:wrap; gap:14px 40px; margin-top:30px}
.case-stats .cs .n{font-family:var(--display); font-size:clamp(1.5rem,2.6vw,2rem); color:#fff; line-height:1}
.case-stats .cs .l{font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-top:7px}
.photo-slot{aspect-ratio:4/3.4; border-radius:var(--r); background:linear-gradient(160deg,#1c2f43,#16273a); border:1px solid rgba(255,255,255,.12);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; position:relative; overflow:hidden}
.photo-slot::after{content:""; position:absolute; inset:0; background:radial-gradient(80% 60% at 30% 20%, rgba(62,140,122,.16), transparent 60%)}
.photo-slot .mk{width:74px; height:74px; opacity:.5; position:relative; z-index:2}
.photo-slot .cap{position:relative; z-index:2; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.5)}
@media (max-width:820px){
  .case .grid{grid-template-columns:1fr; gap:34px}
  .photo-slot{order:-1; aspect-ratio:16/10}
}

/* ---------- accountability ---------- */
.acct .grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(34px,5vw,72px); align-items:start}
.acct .disclosure{font-size:1.05rem; color:var(--text); line-height:1.7; border-left:3px solid var(--sea); padding-left:22px}
.acct-list{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.acct-list li{display:flex; gap:16px; padding:18px 0; border-top:1px solid var(--line-soft)}
.acct-list li:first-child{border-top:0; padding-top:0}
.acct-list .ck{flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:rgba(62,140,122,.14); display:flex; align-items:center; justify-content:center; margin-top:2px}
.acct-list .ck svg{width:15px; height:15px; stroke:var(--green-ink); stroke-width:2.4; fill:none}
.acct-list h3{font-family:var(--body); font-size:1.02rem; font-weight:600; color:var(--navy); letter-spacing:0}
.acct-list p{margin-top:4px; color:var(--muted); font-size:.96rem; line-height:1.55}
@media (max-width:820px){ .acct .grid{grid-template-columns:1fr; gap:30px} }

/* ---------- give ---------- */
.give{background:var(--white)}
.give .grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:clamp(38px,5vw,54px)}
.give .panel{border-radius:var(--r); padding:clamp(30px,3.4vw,46px); border:1px solid var(--line-soft)}
.give .panel.inst{background:var(--navy); color:#fff}
.give .panel.inst h3{color:#fff}
.give .panel.inst p{color:#d5dee5}
.give .panel.ind{background:var(--mist)}
.give .panel .tag{font-size:.74rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--sea)}
.give .panel.ind .tag{color:var(--green-ink)}
.give .panel h3{font-size:1.5rem; margin-top:12px}
.give .panel p{margin-top:14px; line-height:1.62; color:var(--muted); max-width:38ch}
.give .panel .btn{margin-top:26px}
.panel-mail{font-size:.92rem; margin-top:14px !important}
.give .panel.inst .panel-mail{color:#c3d0da}
.give .panel.inst .panel-mail a{color:#fff; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.5)}
.give .panel.inst .panel-mail a:hover{text-decoration-color:#fff}
@media (max-width:760px){ .give .grid{grid-template-columns:1fr} }

/* ---------- footer ---------- */
.footer{background:var(--ink); color:rgba(255,255,255,.72); padding-block:clamp(56px,7vw,84px) 34px}
.footer .top{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px}
.f-parent p{margin-bottom:11px}
.f-handle{color:rgba(255,255,255,.5) !important; font-size:.88rem; margin-bottom:12px !important}
.f-social{display:flex; gap:12px; margin-top:2px}
.f-social a{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.08); margin:0; transition:background .2s ease, transform .2s cubic-bezier(.32,.72,0,1)}
.f-social a:hover{background:rgba(255,255,255,.18)}
.f-social a:active{transform:scale(.92)}
.f-social svg{width:15px; height:15px; fill:rgba(255,255,255,.82)}
.f-social a:hover svg{fill:#fff}
@media (prefers-reduced-motion: reduce){ .f-social a{transition:none} }
.f-disc-line{margin-top:clamp(34px,4vw,48px); padding-top:26px; border-top:1px solid rgba(255,255,255,.12); font-size:.87rem; line-height:1.6; color:rgba(255,255,255,.6); max-width:none}
.to-top{position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.18); background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .28s cubic-bezier(.32,.72,0,1), transform .28s cubic-bezier(.32,.72,0,1), visibility .28s; z-index:60; box-shadow:0 6px 22px rgba(23,35,47,.26)}
.to-top.show{opacity:1; visibility:visible; transform:translateY(0)}
.to-top:hover{background:var(--ink)}
.to-top:active{transform:scale(.94)}
.to-top svg{width:19px; height:19px; stroke:#fff; stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round}
@media (prefers-reduced-motion: reduce){ .to-top{transition:opacity .01s} }
.f-brandrow{margin-bottom:clamp(30px,4vw,44px)}
.f-logo{height:74px; width:auto; opacity:.95}
@media (max-width:520px){ .f-logo{height:60px} }
.f-word{font-family:var(--display); color:#fff; font-size:1.7rem; letter-spacing:.06em; line-height:1}
.f-word span{display:block; font-family:var(--body); font-size:.72rem; letter-spacing:.42em; color:var(--sage); font-weight:600; margin-top:10px}
.f-disc{margin-top:20px; font-size:.9rem; line-height:1.65; max-width:44ch; color:rgba(255,255,255,.66)}
.f-col h4{font-family:var(--body); font-size:.76rem; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.5); margin:0 0 16px; font-weight:600}
.f-col a,.f-col p{display:block; color:rgba(255,255,255,.74); font-size:.95rem; margin-bottom:11px}
.f-col a:hover{color:#fff}
.f-bottom{margin-top:clamp(40px,5vw,60px); padding-top:24px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.8rem; color:rgba(255,255,255,.5)}
.f-bottom .reg{letter-spacing:.04em}
@media (max-width:820px){
  .footer .top{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){ .footer .top{grid-template-columns:1fr} }

/* ---------- reveal / motion ---------- */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.06s} .reveal.d2{transition-delay:.12s} .reveal.d3{transition-delay:.18s}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  .btn,.card,.story-card,.nav-links a::after,.btn .arw{transition:none}
  .btn:active{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  .site-header{background:var(--mist)!important; backdrop-filter:none; -webkit-backdrop-filter:none}
}
@media (prefers-contrast:more){
  :root{--line:rgba(36,56,79,.4); --line-soft:rgba(36,56,79,.28); --muted:#3f5060}
  .card,.story-card,.give .panel{border-color:var(--line)}
}

/* ---- give page ---- */
.give-hero{background:var(--navy); color:#fff; padding-block:clamp(64px,8vw,104px) clamp(48px,6vw,72px)}
.give-hero .eyebrow{color:#9fc9bd}
.give-hero h1{color:#fff; font-size:clamp(2rem,4.4vw,3.3rem); line-height:1.08; margin-top:16px; max-width:20ch}
.give-hero .sub{color:rgba(255,255,255,.8); font-size:clamp(1.05rem,1.5vw,1.2rem); line-height:1.6; margin-top:18px; max-width:58ch}
.give-body{padding-top:clamp(40px,5vw,64px)}
.give-grid{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr); gap:clamp(28px,4vw,56px); align-items:start}
.give-form-card{background:#fff; border:1px solid var(--line-soft); border-radius:18px; padding:clamp(22px,3vw,36px); box-shadow:0 10px 34px rgba(23,35,47,.07)}
.gf-title{font-size:1.5rem; color:var(--navy)}
.gf-note{color:var(--muted); font-size:.95rem; margin-top:6px; margin-bottom:22px}
.kindful-embed-wrapper{min-height:520px}
.gf-loading{display:flex; align-items:center; justify-content:center; min-height:520px; color:var(--muted); font-size:.95rem; border:1px dashed var(--line-soft); border-radius:12px}
.gf-fallback{margin-top:16px; font-size:.95rem; color:var(--text)}
.gf-fallback a{color:var(--green-ink); font-weight:600}
.give-aside{display:grid; gap:18px}
.ga-block{background:var(--mist); border:1px solid var(--line-soft); border-radius:14px; padding:22px 24px}
.ga-block h3{font-family:var(--body); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--green-ink); font-weight:700}
.ga-block p{margin-top:10px; color:var(--text); font-size:.96rem; line-height:1.6}
.ga-block a{color:var(--green-ink); font-weight:600}
.ga-list{list-style:none; padding:0; margin:12px 0 0; display:grid; gap:9px}
.ga-list li{position:relative; padding-left:20px; color:var(--text); font-size:.97rem}
.ga-list li::before{content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; border-radius:2px; background:var(--sea)}
@media (max-width:900px){ .give-grid{grid-template-columns:1fr} }

/* partnership enquiry form (/partner/) */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.hp{position:absolute; left:-9999px; top:0; width:1px; height:1px; overflow:hidden}
.req{color:var(--green-ink); font-weight:700}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px 20px}
.field{display:flex; flex-direction:column; gap:7px}
.field--full{grid-column:1 / -1}
.field label{font-size:.95rem; font-weight:600; color:var(--navy)}
.field input,.field select,.field textarea{
  font:inherit; font-size:1rem; color:var(--text); background:#fff;
  border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; width:100%; min-height:48px;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease)}
.field textarea{min-height:150px; resize:vertical; line-height:1.55}
.field select{appearance:none; -webkit-appearance:none; padding-right:42px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2324384F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px}
.field select:invalid{color:var(--muted)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--navy)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2.5px solid var(--sea); outline-offset:2px; border-color:var(--sea)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted); opacity:.85}
.form-privacy{margin-top:22px; font-size:.95rem; line-height:1.6; color:var(--muted)}
.form-privacy a{color:var(--green-ink); font-weight:600}
.pform-submit{margin-top:22px; border:0; cursor:pointer}
.thanks-actions{display:flex; flex-wrap:wrap; gap:14px}
@media (max-width:640px){ .form-grid{grid-template-columns:1fr} }

/* ---------- updates & stories (rendered by build/build.py) ---------- */
.stories-home{background:var(--mist)}
.stories-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:clamp(34px,4.5vw,52px)}
.stories-list .stories-grid{margin-top:0}
.story-card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; color:inherit; text-decoration:none;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease)}
.story-card:hover{transform:translateY(-3px); box-shadow:0 24px 44px -30px rgba(18,33,48,.4); border-color:var(--line); text-decoration:none}
.story-card:hover h3{text-decoration:underline; text-underline-offset:3px}
.sc-img{width:100%; aspect-ratio:16/10; object-fit:cover; display:block; background:var(--navy)}
.sc-img--mark{display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,#1c2f43,#16273a)}
.sc-img--mark img{width:64px; height:64px; opacity:.5}
.sc-body{padding:clamp(20px,2.4vw,28px)}
.sc-meta{font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); display:flex; flex-wrap:wrap; gap:0 .5em}
.sc-cat{color:var(--green-ink); font-weight:700}
.sc-cat::after{content:"·"; margin-left:.5em; color:var(--muted); font-weight:400}
.story-card h3{font-size:1.2rem; margin-top:12px; color:var(--navy)}
.story-card p{margin-top:10px; color:var(--muted); font-size:1rem; line-height:1.6}
.stories-more{margin-top:28px; font-weight:600}
.stories-more a{color:var(--green-ink)}
@media (max-width:1000px){ .stories-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:680px){ .stories-grid{grid-template-columns:1fr} }

.story-crumb{margin-bottom:14px; font-size:.9rem}
.story-crumb a{color:#9fc9bd; font-weight:600}
.story-hero h1{max-width:24ch}
.story-meta{margin-top:18px; color:rgba(255,255,255,.72); font-size:.95rem}
.sp-region::before{content:" · "}
.story-body-wrap{background:var(--white)}
.story-body{max-width:70ch; font-size:1.08rem; line-height:1.75; color:var(--text)}
.story-body > * + *{margin-top:1.2em}
.story-body h2,.story-body h3,.story-body h4{line-height:1.2; margin-top:1.8em}
.story-body h2{font-size:1.65rem} .story-body h3{font-size:1.3rem} .story-body h4{font-family:var(--body); font-weight:700; font-size:1.05rem}
.story-body a{color:var(--green-ink); font-weight:600; text-decoration:underline; text-underline-offset:3px}
.story-body ul,.story-body ol{padding-left:1.3em} .story-body li + li{margin-top:.45em}
.story-body blockquote{margin:1.6em 0; padding:4px 0 4px 22px; border-left:3px solid var(--sea); color:var(--navy); font-size:1.15rem; line-height:1.6}
.story-body blockquote p + p{margin-top:.8em}
.story-body figure{margin:1.8em 0}
.story-body figure img,.story-body p img{width:100%; height:auto; border-radius:var(--r-sm); display:block}
.story-body figcaption{margin-top:10px; font-size:.9rem; color:var(--muted)}
.story-body hr{border:0; border-top:1px solid var(--line-soft); margin:2em 0}
.story-body pre{background:var(--mist); border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:14px 16px; overflow:auto; font-size:.92rem}
.story-lead{margin:0 0 2em !important}
.story-foot{display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(40px,5vw,56px); padding-top:30px; border-top:1px solid var(--line-soft); max-width:70ch}