:root{
  --cream:#fbf6ee; --cream-2:#f4ece0; --paper:#fffdf9;
  --navy:#1f2f4e; --navy-2:#2b3f66; --ink:#2a2733; --muted:#5d5866;
  --red:#b8323a; --red-dark:#9a2830; --gold:#c9a25a; --line:#e6dccb;
  --script:'Dancing Script', 'Brush Script MT', cursive;
  --hand:'Caveat', 'Segoe Print', cursive;
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius:14px; --shadow:0 10px 30px rgba(31,47,78,.10), 0 2px 6px rgba(31,47,78,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:80px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{transition:none!important}}
body{margin:0; background:var(--cream); color:var(--ink); font:400 1.0625rem/1.7 var(--sans); -webkit-font-smoothing:antialiased}
img{max-width:100%; height:auto; display:block}
a{color:var(--red-dark); text-underline-offset:3px}
a:hover{color:var(--red)}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:4px}
.wrap{width:min(1120px, 100% - 2.5rem); margin-inline:auto}
.skip{position:absolute; left:-999px; top:0; background:var(--navy); color:#fff; padding:.6rem 1rem; z-index:100}
.skip:focus{left:1rem; top:1rem}
.script{font-family:var(--script); font-weight:600}
h1,h2,h3{font-family:var(--serif); color:var(--navy); line-height:1.2; font-weight:600; margin:0 0 .6em}
h2{font-size:clamp(1.8rem, 3.2vw, 2.5rem); letter-spacing:-.01em}
h3{font-size:1.25rem}
p{margin:0 0 1em}
.center{text-align:center}
.eyebrow{font:700 .78rem/1.4 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--red-dark); margin-bottom:.8rem}
.eyebrow.light{color:#f3c9b8}

/* top bar */
.topbar{position:sticky; top:0; z-index:50; background:rgba(251,246,238,.92); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--line)}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:64px}
.brand{font:600 1.7rem/1 var(--script); color:var(--red-dark); text-decoration:none; white-space:nowrap}
.topbar nav ul{list-style:none; display:flex; flex-wrap:wrap; gap:.25rem 1.4rem; margin:0; padding:0; align-items:center}
.topbar nav a{color:var(--navy); text-decoration:none; font-weight:600; font-size:.95rem}
.topbar nav a:hover{color:var(--red)}
.topbar .nav-cta{background:var(--navy); color:#fff; padding:.45rem .95rem; border-radius:999px}
.topbar .nav-cta:hover{background:var(--red); color:#fff}

/* buttons */
.btn{display:inline-block; font:700 1rem/1 var(--sans); padding:1rem 1.5rem; border-radius:999px; text-decoration:none; transition:transform .15s, background .15s, color .15s; border:2px solid transparent}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--red); color:#fff}
.btn-primary:hover{background:var(--red-dark); color:#fff}
.btn-ghost{border-color:var(--navy); color:var(--navy)}
.btn-ghost:hover{background:var(--navy); color:#fff}
.btn-light{background:var(--cream); color:var(--navy)}
.btn-light:hover{background:#fff; color:var(--red-dark)}

/* hero */
.hero{position:relative; overflow:hidden; text-align:center; padding:clamp(4.5rem, 10vw, 8rem) 0 clamp(4rem, 9vw, 7rem);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.9), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23c9a25a' fill-opacity='.22'%3E%3Cpath d='M20 14l1.6 4.4L26 20l-4.4 1.6L20 26l-1.6-4.4L14 20l4.4-1.6z'/%3E%3Ccircle cx='86' cy='38' r='1.6'/%3E%3Ccircle cx='48' cy='92' r='1.3'/%3E%3Cpath d='M92 84l1.1 3 3 1.1-3 1.1-1.1 3-1.1-3-3-1.1 3-1.1z'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%)}
.hero h1{font-size:clamp(4rem, 13vw, 8.5rem); color:var(--red-dark); font-weight:600; margin:.1em 0 .25em; line-height:1}
.hero .lede{font:400 clamp(1.2rem, 2.3vw, 1.55rem)/1.5 var(--serif); color:var(--navy); max-width:34ch; margin:0 auto 2.2rem}
.actions{display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap}
.hero-heart{position:absolute; width:46px; height:46px; fill:var(--red); opacity:.14; right:12%; top:22%; transform:rotate(12deg)}
.hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:10px;
  background:repeating-linear-gradient(90deg, var(--red) 0 18px, var(--paper) 18px 26px, var(--navy) 26px 44px, var(--paper) 44px 52px); opacity:.85}

/* story */
.story{padding:clamp(4rem, 8vw, 6.5rem) 0; background:var(--paper)}
.story-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(2rem, 5vw, 4.5rem); align-items:start}
.polaroid{margin:0; background:#fff; padding:14px 14px 0; box-shadow:var(--shadow); transform:rotate(-2deg); border-radius:4px; position:relative; max-width:460px; justify-self:center}
.polaroid::before{content:""; position:absolute; top:-14px; left:50%; width:110px; height:28px; transform:translateX(-50%) rotate(3deg); background:rgba(201,162,90,.35); box-shadow:0 1px 2px rgba(0,0,0,.05)}
.polaroid img{width:100%; max-height:620px; object-fit:cover; object-position:center 30%; background:var(--cream-2)}
.polaroid figcaption{font:500 1.55rem/1 var(--hand); color:var(--navy); text-align:center; padding:1rem 0 1.1rem}
.story-short{font:400 clamp(1.15rem, 1.8vw, 1.32rem)/1.65 var(--serif); color:var(--navy)}
.signoff{font-style:italic; color:var(--muted); font-size:.98rem}
.signoff::before{content:"— "}
.full-story{margin-top:1.6rem; border-top:1px solid var(--line); padding-top:1.2rem}
.full-story summary{cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:.6rem; font-weight:700; color:var(--red-dark); padding:.7rem 1.2rem; border:2px solid var(--red); border-radius:999px}
.full-story summary::-webkit-details-marker{display:none}
.full-story summary::after{content:"+"; font-size:1.3rem; line-height:1}
.full-story[open] summary::after{content:"–"}
.full-story summary:hover{background:var(--red); color:#fff}
.full-story .when-open{display:none}
.full-story[open] .when-open{display:inline}
.full-story[open] .when-closed{display:none}
.full-story-body{margin-top:1.6rem; font-family:var(--serif); font-size:1.08rem; line-height:1.8; color:var(--ink)}
.full-story-body cite{font-style:italic}
.inline-sig{font-size:1.5em; color:var(--red-dark); white-space:nowrap}

/* what we do */
.what{padding:clamp(4rem, 8vw, 6.5rem) 0}
.intro{max-width:52ch; margin:0 auto 2.6rem; color:var(--muted); font-size:1.1rem}
.cards{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1.4rem}
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem 1.5rem; box-shadow:0 2px 0 var(--line)}
.card .icon{width:44px; height:44px; fill:var(--red); margin-bottom:1rem}
.card:nth-child(even) .icon{fill:var(--navy-2)}
.card p{color:var(--muted); margin:0; font-size:1rem}
.safe{margin:2.6rem auto 0; max-width:780px; text-align:center; background:var(--cream-2); border-radius:var(--radius); padding:1.3rem 1.6rem; color:var(--navy); border:1px dashed var(--gold)}

/* note */
.note-section{padding:clamp(4rem, 8vw, 6.5rem) 0; background:linear-gradient(180deg, var(--cream-2), var(--cream))}
.note-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2rem, 5vw, 4rem); align-items:center}
.readaloud{background:var(--paper); border-left:4px solid var(--red); padding:1rem 1.2rem; border-radius:0 10px 10px 0; color:var(--navy)}
.note-cards{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem}
.notecard{position:relative; margin:0; background:var(--paper); border-radius:6px; padding:1.5rem 1.4rem 1.1rem; box-shadow:var(--shadow);
  outline:1.5px solid rgba(184,50,58,.35); outline-offset:-9px; display:flex; flex-direction:column; justify-content:space-between; min-height:200px}
.notecard p{font:500 1.42rem/1.25 var(--hand); color:#3c3442; margin:.4rem .3rem .6rem}
.notecard figcaption{font-size:1.75rem; color:var(--red-dark); text-align:right; margin-right:.4rem}
.nc-label{position:absolute; top:-11px; left:16px; background:var(--navy); color:#fff; font:700 .7rem/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; padding:.4rem .6rem; border-radius:999px}
.nc-1{transform:rotate(-1.4deg)} .nc-2{transform:rotate(1.2deg) translateY(10px)} .nc-3{transform:rotate(.8deg)} .nc-4{transform:rotate(-1deg) translateY(10px)}
.nc-4 .nc-label{background:var(--red)}
.nc-5{grid-column:1 / -1; justify-self:center; width:min(100%, calc(50% - .7rem)); transform:rotate(.6deg) translateY(6px)}
.nc-5 .nc-label{background:#2f5d9e}

/* hospitals */
.hospitals{background:var(--navy); color:#e9edf5; padding:clamp(4rem, 8vw, 6.5rem) 0; position:relative}
.hospitals h2{color:#fff}
.hospitals p{color:#d7deea}
.hosp-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(2rem, 5vw, 4.5rem); align-items:start}
.checklist{list-style:none; margin:0; padding:0; display:grid; gap:1rem}
.checklist li{position:relative; padding:1rem 1.2rem 1rem 3.2rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:12px; color:#d7deea; font-size:1rem}
.checklist li strong{color:#fff; display:block; font-size:1.05rem}
.checklist li::before{content:""; position:absolute; left:1.1rem; top:1.2rem; width:22px; height:22px; border-radius:50%; background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
.hospitals .btn{margin-top:.6rem; word-break:break-word}

/* help */
.help{padding:clamp(4rem, 8vw, 6.5rem) 0}
.help-grid{list-style:none; margin:2.4rem 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1.4rem}
.help-card{background:var(--paper); border:1px solid var(--line); border-top:5px solid var(--navy); border-radius:var(--radius); padding:1.7rem 1.5rem; display:flex; flex-direction:column; position:relative}
.help-card:first-child{border-top-color:var(--red)}
.help-card p{color:var(--muted); font-size:1rem; flex:1}
.help-card a{font-weight:700}
.badge{align-self:flex-start; background:var(--gold); color:var(--navy); font:800 .7rem/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; padding:.4rem .65rem; border-radius:999px; margin-bottom:.8rem}

/* footer */
.site-footer{background:var(--cream-2); border-top:1px solid var(--line); padding:3.2rem 0 2.6rem; text-align:center; color:var(--muted)}
.footer-sig{font-size:2.6rem; color:var(--red-dark); margin:0 0 .2rem}
.memory{font-family:var(--serif); color:var(--navy); font-size:1.05rem}
.fine{font-size:.86rem; line-height:1.6; margin-top:.8rem}

@media (min-width: 821px){ .polaroid{position:sticky; top:110px} }

/* responsive */
@media (max-width: 980px){
  .cards, .help-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .topbar nav li:not(:last-child){display:none}
}
@media (max-width: 820px){
  .story-grid, .note-grid, .hosp-grid{grid-template-columns:1fr}
  .polaroid{max-width:380px}
}
@media (max-width: 560px){
  body{font-size:1rem}
  .cards, .help-grid, .note-cards{grid-template-columns:1fr}
  .nc-2, .nc-4{transform:rotate(1deg)}
  .nc-5{width:100%}
  .notecard{min-height:0}
  .brand{font-size:1.45rem}
  .hero-heart{display:none}
  .topbar .nav-cta{padding:.4rem .8rem; font-size:.88rem}
  .btn{width:100%; text-align:center}
}

.note-library{margin-top:clamp(3rem,6vw,4.5rem)}
.note-library h3{font-family:var(--serif, Georgia, serif); color:var(--navy); font-size:1.7rem; margin:0 0 .3rem; text-align:center}
.nl-intro{text-align:center; margin:0 auto 1.8rem; color:#4a4452}
.nl-intro .script{color:var(--red-dark); font-size:1.4em}
.nl-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem}
.nl-col{background:var(--paper); border-radius:10px; padding:1.2rem 1.3rem; box-shadow:var(--shadow)}
.nl-col h4{margin:0 0 .6rem; font:700 .75rem/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--red-dark)}
.nl-col ul{list-style:none; margin:0; padding:0}
.nl-col li{font:500 1.15rem/1.3 var(--hand); color:#3c3442; padding:.4rem 0; border-bottom:1px dashed rgba(184,50,58,.25)}
.nl-col li:last-child{border-bottom:0}
@media (max-width: 860px){ .nl-grid{grid-template-columns:1fr 1fr} }
@media (max-width: 560px){ .nl-grid{grid-template-columns:1fr} }