@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Newsreader:ital,opsz,wght@1,6..72,400;1,6..72,500&display=swap');

:root {
  --ink: #18313a;
  --ink-soft: #456069;
  --cream: #f7f0e6;
  --paper: #fffaf4;
  --coral: #d64f59;
  --coral-dark: #aa3540;
  --blush: #f4c9c5;
  --teal: #69b9b1;
  --line: rgba(24,49,58,.15);
  font-family: "DM Sans", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  scroll-behavior: smooth;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
svg { display: block; }
.site-header {
  height: 86px; padding: 0 clamp(24px, 5vw, 80px); display: flex; align-items: center;
  justify-content: space-between; position: absolute; inset: 0 0 auto; z-index: 10;
  border-bottom: 1px solid rgba(255,255,255,.28); color: white;
}
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 600; letter-spacing: -.02em; }
.heart-mark { width: 38px; height: 38px; }
.heart-mark path:first-child { fill: var(--coral); stroke: none; }
.heart-mark path:last-child { fill: none; stroke: white; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.desktop-nav { display: flex; align-items: center; gap: 34px; font-size: 13px; font-weight: 500; }
.desktop-nav a { opacity: .88; transition: opacity .2s; }
.desktop-nav a:hover { opacity: 1; }
.desktop-nav .nav-cta { border: 1px solid rgba(255,255,255,.7); padding: 12px 18px; border-radius: 999px; }
.mobile-menu { display: none; }
.hero {
  min-height: 820px; height: min(94vh, 960px); position: relative; color: white; overflow: hidden;
  display: flex; align-items: center; padding: 110px clamp(24px, 8vw, 138px) 70px;
  background: #24424b;
}
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(12,38,47,.93) 0%,rgba(12,38,47,.73) 43%,rgba(12,38,47,.1) 78%); }
.hero-art { position: absolute; inset: 0; background: url('/hero-family.png') center/cover no-repeat; transform: scale(1.01); }
.image-wash { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(27,57,66,.1),rgba(27,57,66,.2)); }
.thread { position: absolute; border: 2px solid rgba(247,201,198,.6); border-radius: 50%; width: 620px; height: 620px; right: -200px; top: 125px; transform: rotate(-16deg); }
.thread-two { width: 780px; height: 330px; right: -90px; top: 470px; opacity: .35; transform: rotate(11deg); }
.hero-content { position: relative; z-index: 2; max-width: 760px; margin-top: 18px; }
.eyebrow { display: flex; align-items: center; gap: 12px; text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 600; margin: 0 0 26px; }
.eyebrow span { width: 30px; height: 1px; background: currentColor; opacity: .65; }
.hero h1 { font-size: clamp(62px, 7.4vw, 112px); line-height: .89; letter-spacing: -.065em; font-weight: 500; margin: 0; }
h1 em, h2 em { font-family: "Newsreader", serif; font-weight: 400; color: var(--blush); }
.hero-copy { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.65; max-width: 610px; margin: 34px 0; color: rgba(255,255,255,.85); }
.hero-actions { display: flex; align-items: center; gap: 32px; }
.button { display: inline-flex; align-items: center; gap: 24px; padding: 16px 22px; border-radius: 999px; font-size: 13px; font-weight: 600; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button svg, .text-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.button.primary { background: var(--coral); color: white; }
.button.primary:hover { background: var(--coral-dark); }
.text-link { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 5px; }
.hero-note { position: absolute; right: clamp(26px, 5vw, 80px); bottom: 130px; z-index: 2; display: flex; gap: 16px; align-items: flex-start; }
.hero-note span { font-size: 10px; opacity: .55; padding-top: 3px; }
.hero-note p { margin: 0; text-transform: uppercase; letter-spacing: .17em; font-size: 10px; line-height: 2; }
.scroll-cue { position: absolute; z-index: 2; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.scroll-cue i { display: block; width: 1px; height: 38px; background: white; }
.section-shell { padding: 120px clamp(24px, 8vw, 138px); }
.section-kicker { font-size: 10px; text-transform: uppercase; letter-spacing: .2em; font-weight: 600; color: var(--coral); margin-bottom: 42px; }
.intro { background: var(--paper); }
.intro-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 9vw; }
.intro h2, .film-copy h2, .understand-copy h2, .support-heading h2, .closing h2 {
  font-size: clamp(42px, 5.3vw, 76px); line-height: 1.03; letter-spacing: -.05em; font-weight: 500; margin: 0;
}
.intro h2 em, .closing h2 em { color: var(--coral); }
.intro-grid > div p { color: var(--ink-soft); line-height: 1.8; font-size: 15px; margin: 0 0 20px; }
.intro-grid > div .lead { font-size: 19px; line-height: 1.6; color: var(--ink); }
.promise-row { margin-top: 100px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3,1fr); }
.promise-row article { padding: 38px 40px 12px 0; border-right: 1px solid var(--line); min-height: 210px; }
.promise-row article + article { padding-left: 40px; }
.promise-row article:last-child { border-right: 0; }
.promise-row span { color: var(--coral); font-size: 11px; }
.promise-row h3 { font-family: "Newsreader", serif; font-style: italic; font-size: 30px; font-weight: 400; margin: 30px 0 10px; }
.promise-row p { color: var(--ink-soft); line-height: 1.65; font-size: 14px; max-width: 290px; }
.film-section { background: var(--ink); color: white; padding: 110px clamp(24px, 8vw, 138px); position: relative; overflow: hidden; }
.film-section::before { content:""; position:absolute; width:520px; height:520px; border:1px solid rgba(255,255,255,.08); border-radius:50%; right:-180px; top:-280px; }
.film-copy { display: grid; grid-template-columns: .65fr 1.35fr .8fr; gap: 4vw; align-items: end; margin-bottom: 52px; }
.film-copy .eyebrow { align-self: start; margin-top: 12px; }
.film-copy h2 { font-size: clamp(40px, 4.7vw, 66px); }
.film-copy > p:last-child { color: rgba(255,255,255,.65); line-height: 1.7; font-size: 14px; }
.video-frame { aspect-ratio: 16 / 9; position: relative; background: #0d1f25; overflow: hidden; border-radius: 3px; box-shadow: 0 32px 80px rgba(0,0,0,.28); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film-credit { text-align: right; font-size: 10px; text-transform: uppercase; letter-spacing: .15em; color: rgba(255,255,255,.45); margin: 18px 0 0; }
.understand { background: var(--cream); }
.understand-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 9vw; align-items: center; }
.stat-orbit { aspect-ratio: 1; max-width: 520px; position: relative; display: grid; place-items: center; text-align: center; }
.stat-orbit .heart-mark { width: 116px; height: 116px; }
.stat-orbit .heart-mark path:last-child { stroke-width: .8; }
.stat-orbit p { position: absolute; bottom: 15%; margin: 0; font-family: "Newsreader",serif; font-style: italic; font-size: 22px; line-height: 1.2; }
.orbit { position:absolute; inset:8%; border:1px solid rgba(214,79,89,.3); border-radius:49% 51% 44% 56% / 53% 43% 57% 47%; transform:rotate(23deg); }
.orbit-b { inset:16% 5%; transform:rotate(-28deg); border-color:rgba(105,185,177,.5); }
.understand-copy h2 { font-size: clamp(40px, 4.4vw, 64px); margin-bottom: 34px; }
.understand-copy > p { color: var(--ink-soft); line-height: 1.75; font-size: 15px; }
.soft-note { border-left: 2px solid var(--coral); padding: 3px 0 3px 22px; margin-top: 34px; }
.soft-note span { text-transform: uppercase; color: var(--coral); letter-spacing: .16em; font-size: 9px; font-weight: 600; }
.soft-note p { margin: 8px 0 0; font-size: 13px; line-height: 1.6; }
.support { padding: 120px clamp(24px, 5vw, 80px); background: var(--paper); }
.support-heading { display:flex; justify-content:space-between; align-items:end; margin:0 auto 58px; max-width:1350px; }
.support-heading .section-kicker { margin: 0; }
.support-heading h2 { font-size: clamp(44px,5vw,72px); max-width: 720px; text-align:right; }
.support-cards { display:grid; grid-template-columns:repeat(3,1fr); max-width:1350px; margin:auto; }
.support-cards article { min-height: 500px; padding: 32px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.support-cards article::after { content:""; position:absolute; width:280px; height:280px; border:1px solid rgba(255,255,255,.25); border-radius:50%; right:-120px; top:-100px; }
.card-family { background: var(--coral); color:white; }
.card-kids { background: var(--teal); color:var(--ink); transform:translateY(28px); }
.card-community { background: var(--ink); color:white; }
.card-number { font-size: 10px; opacity:.65; }
.support-cards article > div p { text-transform:uppercase; letter-spacing:.15em; font-size:9px; opacity:.7; }
.support-cards h3 { font-family:"Newsreader",serif; font-style:italic; font-weight:400; font-size:clamp(30px,3vw,44px); line-height:1.05; margin:18px 0; max-width:340px; }
.support-cards article > p { font-size:13px; line-height:1.65; max-width:320px; opacity:.75; }
.closing { padding: 160px 24px 130px; text-align:center; background:var(--paper); position:relative; overflow:hidden; }
.closing-heart { margin:0 auto 40px; width:72px; }
.closing-heart .heart-mark { width:72px; height:72px; }
.closing .eyebrow { justify-content:center; }
.closing h2 { max-width:850px; margin:auto; }
.closing p:not(.eyebrow) { max-width:610px; color:var(--ink-soft); font-size:16px; line-height:1.7; margin:30px auto; }
footer { background:#102a32; color:white; padding:65px clamp(24px,8vw,138px) 35px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:30px; align-items:center; }
.footer-brand .heart-mark { width:34px; }
footer > p { color:rgba(255,255,255,.55); font-size:12px; text-align:center; }
footer > div { display:flex; justify-content:flex-end; gap:20px; font-size:11px; }
footer small { grid-column:1/-1; border-top:1px solid rgba(255,255,255,.12); padding-top:24px; color:rgba(255,255,255,.4); font-size:10px; }
@media (max-width: 900px) {
  .desktop-nav { display:none; }
  .mobile-menu { display:block; position:relative; }
  .mobile-menu summary { list-style:none; width:36px; height:36px; display:grid; place-content:center; gap:6px; cursor:pointer; }
  .mobile-menu summary::-webkit-details-marker { display:none; }
  .mobile-menu summary span { width:22px; height:1px; background:white; display:block; }
  .mobile-menu nav { position:absolute; right:0; top:45px; background:var(--paper); color:var(--ink); width:220px; padding:20px; border-radius:8px; box-shadow:0 20px 45px rgba(0,0,0,.2); display:grid; gap:18px; font-size:13px; }
  .hero { min-height:760px; }
  .hero-note { display:none; }
  .intro-grid, .understand-grid { grid-template-columns:1fr; }
  .film-copy { grid-template-columns:1fr; }
  .promise-row { grid-template-columns:1fr; }
  .promise-row article, .promise-row article + article { border-right:0; border-bottom:1px solid var(--line); padding:30px 0; min-height:0; }
  .support-heading { display:block; }
  .support-heading h2 { text-align:left; margin-top:18px; }
  .support-cards { grid-template-columns:1fr; }
  .support-cards article { min-height:380px; }
  .card-kids { transform:none; }
  footer { grid-template-columns:1fr; text-align:center; }
  footer > div { justify-content:center; flex-wrap:wrap; }
  footer small { grid-column:1; }
}
@media (max-width: 560px) {
  .site-header { height:72px; }
  .hero { height:auto; min-height:740px; padding-top:110px; align-items:flex-end; padding-bottom:105px; }
  .hero::after { background:linear-gradient(0deg,rgba(12,38,47,.96) 0%,rgba(12,38,47,.72) 58%,rgba(12,38,47,.24) 100%); }
  .hero-art { background-position:64% center; }
  .hero h1 { font-size:56px; }
  .hero-copy { font-size:16px; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:22px; }
  .section-shell, .film-section, .support { padding:84px 24px; }
  .intro-grid { gap:34px; }
  .promise-row { margin-top:58px; }
  .understand-grid { gap:52px; }
  .stat-orbit { width:100%; }
  .support-cards article { padding:26px; min-height:345px; }
  .closing { padding:100px 24px; }
}
@media (prefers-reduced-motion: reduce) { :root { scroll-behavior:auto; } * { transition:none !important; } }

.system-page { min-height:100vh; display:grid; place-items:center; text-align:center; padding:24px; background:var(--paper); }
.system-page p { color:var(--coral); text-transform:uppercase; letter-spacing:.18em; font-size:11px; }
.system-page h1 { font-family:"Newsreader",serif; font-style:italic; font-size:48px; font-weight:400; margin:14px 0 28px; }
.system-page a, .system-page button { border:0; background:var(--coral); color:white; padding:14px 20px; border-radius:999px; cursor:pointer; }