@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Nunito:wght@400;600;700;800&display=swap');
:root{
  --cork:#C9A26B; --cork-dark:#B48A50; --cork-shadow:rgba(120,80,40,.28);
  --paper:#FFFDF6; --paper-cream:#FBF3E2; --ink:#3A3228; --ink-soft:#6B5F4E;
  --pin-red:#D0533F; --pin-blue:#4A7BA6; --pin-green:#5C8A5A; --pin-yellow:#E0A73E;
  --tape:rgba(244,232,190,.72); --tape-edge:rgba(210,190,140,.5);
  --note-yellow:#FFF3B0; --note-green:#D3EAC6; --note-pink:#FAD9D2; --note-blue:#CFE4F2;
  --line:#E7DCC4;
}
*{ box-sizing:border-box; }
html{ font-size:18px; scroll-behavior:smooth; }
body{ margin:0; color:var(--ink); font-family:Nunito,system-ui,sans-serif; line-height:1.6;
  background-color:#DFE6EC; }
h1,h2,h3{ line-height:1.15; margin:0; }
.hand{ font-family:'Caveat',cursive; }
.wrap{ max-width:1000px; margin:0 auto; padding:0 clamp(16px,4vw,32px); }

/* ---- pins & tape ---- */
.pin{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); width:22px; height:22px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.85), var(--pin-red) 70%);
  box-shadow:0 3px 5px rgba(0,0,0,.32), inset 0 -2px 3px rgba(0,0,0,.2); z-index:3; }
.pin.blue{ background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.85), var(--pin-blue) 70%); }
.pin.green{ background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.85), var(--pin-green) 70%); }
.pin.yellow{ background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.85), var(--pin-yellow) 70%); }
.tape{ position:absolute; top:-12px; left:50%; transform:translateX(-50%) rotate(-3deg); width:104px; height:30px;
  background:var(--tape); border-left:1px dashed var(--tape-edge); border-right:1px dashed var(--tape-edge);
  box-shadow:0 2px 4px rgba(0,0,0,.12); z-index:2; }
.tape.r{ transform:translateX(-50%) rotate(2.5deg); }

/* ---- buttons ---- */
.btn{ display:inline-block; border:none; border-radius:9px; padding:13px 24px; font-size:1rem; font-weight:800;
  font-family:Nunito,sans-serif; cursor:pointer; text-decoration:none; text-align:center;
  box-shadow:0 3px 0 rgba(0,0,0,.16); transition:transform .12s ease, box-shadow .12s ease; }
.btn:hover{ transform:translateY(-1px); box-shadow:0 4px 0 rgba(0,0,0,.16); }
.btn:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.16); }
.btn-red{ background:var(--pin-red); color:#fff; }
.btn-blue{ background:var(--pin-blue); color:#fff; }
.btn-cream{ background:var(--paper); color:var(--ink); }

/* ---- header ---- */
.site-head{ background:#3E6B89; box-shadow:0 4px 14px rgba(40,50,60,.14); margin-bottom:8px; }
.site-head .row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:14px 0; }
.brand{ font-family:'Caveat',cursive; font-weight:700; font-size:2.1rem; color:#fff; text-decoration:none;
  text-shadow:0 2px 4px rgba(0,0,0,.28); display:flex; align-items:center; gap:10px; }
.brand .badge{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; background:var(--paper);
  border-radius:50%; box-shadow:0 3px 6px rgba(0,0,0,.25); font-size:1.2rem; transform:rotate(-6deg); }
.nav{ display:flex; align-items:center; flex-wrap:wrap; }
.nav a{ color:#fff; text-decoration:none; font-weight:700; font-size:.95rem; margin-left:20px;
  text-shadow:0 1px 2px rgba(0,0,0,.28); }
.nav a.navlink{ padding-bottom:2px; border-bottom:2px dotted rgba(255,255,255,.5); }
.nav a.navlink:hover{ border-bottom-color:#fff; }
.nav .btn{ margin-left:20px; }

/* ---- generic pinned note ---- */
.note{ background:var(--paper); border-radius:3px; padding:28px; position:relative; box-shadow:0 8px 18px var(--cork-shadow); }
.note.tilt-l{ transform:rotate(-1.5deg); }
.note.tilt-r{ transform:rotate(1.3deg); }

/* ---- hero ---- */
.hero{ padding:clamp(30px,5vw,58px) 0 clamp(16px,3vw,28px); }
.hero .note{ max-width:680px; margin:0 auto; text-align:center; padding:clamp(32px,5vw,52px); }
.hero .eyebrow{ font-family:'Caveat',cursive; font-size:1.4rem; color:var(--pin-red); margin:0 0 2px; font-weight:700; }
.hero h1{ font-family:'Caveat',cursive; font-size:clamp(2.7rem,6.5vw,4.2rem); color:var(--ink); margin:4px auto .15em; max-width:16ch; font-weight:700; }
.hero .lede{ font-size:clamp(1.05rem,2.3vw,1.22rem); color:var(--ink-soft); max-width:44ch; margin:0 auto 26px; }
.hero-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.hero-note{ margin-top:18px; font-family:'Caveat',cursive; font-size:1.35rem; color:var(--ink-soft); }
.hero-note .star{ color:var(--pin-yellow); }

/* ---- section headings (on cork) ---- */
.section{ padding:clamp(34px,5.5vw,60px) 0; }
.section-title{ text-align:center; font-family:'Caveat',cursive; font-size:clamp(2.3rem,5vw,3.1rem); color:var(--pin-blue); margin:0 0 4px; }
.section-sub{ text-align:center; color:var(--ink-soft); opacity:1; max-width:52ch; margin:0 auto 42px; font-weight:600; }

/* ---- feature polaroids ---- */
.board{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:34px 26px; }
.polaroid{ background:#fff; padding:13px 13px 0; border-radius:3px; box-shadow:0 8px 18px var(--cork-shadow); position:relative; }
.polaroid:nth-child(3n+1){ transform:rotate(-2deg); }
.polaroid:nth-child(3n+2){ transform:rotate(1.5deg); }
.polaroid:nth-child(3n+3){ transform:rotate(-0.8deg); }
.polaroid .photo{ height:130px; border-radius:2px; display:flex; align-items:center; justify-content:center; font-size:2.8rem;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04); }
.polaroid .cap{ font-family:'Caveat',cursive; font-size:1.6rem; text-align:center; padding:8px 6px 2px; color:var(--ink); }
.polaroid p{ margin:0; padding:0 10px 16px; text-align:center; color:var(--ink-soft); font-size:.93rem; }

/* ---- band note ---- */
.band-note{ max-width:720px; margin:0 auto; text-align:center; }
.band-note h2{ font-family:'Caveat',cursive; font-size:clamp(2rem,4.2vw,2.7rem); color:var(--ink); margin:0 0 8px; }
.band-note p{ color:var(--ink-soft); max-width:48ch; margin:0 auto; }

/* ---- mission (cream torn note) ---- */
.mission-note{ max-width:720px; margin:0 auto; text-align:center; background:var(--paper-cream); }
.mission-note h2{ font-family:Nunito; text-transform:uppercase; letter-spacing:.14em; font-size:.85rem; color:var(--cork-dark); margin:0 0 14px; font-weight:800; }
.mission-note .quote{ font-family:'Caveat',cursive; font-size:clamp(1.6rem,3.4vw,2.15rem); color:var(--ink); line-height:1.35; margin:0; }

/* ---- privacy sticky notes ---- */
.privacy-list{ list-style:none; padding:0; margin:0 auto; max-width:760px; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; }
.privacy-list li{ padding:22px 20px; border-radius:2px; box-shadow:0 6px 14px var(--cork-shadow); position:relative; font-weight:600; color:var(--ink); }
.privacy-list li:nth-child(1){ background:var(--note-yellow); transform:rotate(-1.5deg); }
.privacy-list li:nth-child(2){ background:var(--note-green); transform:rotate(1.4deg); }
.privacy-list li:nth-child(3){ background:var(--note-pink); transform:rotate(1.1deg); }
.privacy-list li:nth-child(4){ background:var(--note-blue); transform:rotate(-1.3deg); }
.privacy-list strong{ display:block; margin-bottom:4px; font-size:1.05rem; }

/* ---- faq ---- */
.faq{ max-width:720px; margin:0 auto; }
.faq details{ background:var(--paper); border-radius:3px; padding:2px 22px; margin-bottom:14px; box-shadow:0 5px 12px var(--cork-shadow); }
.faq details:nth-child(odd){ transform:rotate(-.5deg); }
.faq details:nth-child(even){ transform:rotate(.5deg); }
.faq summary{ cursor:pointer; font-weight:800; padding:16px 0; font-size:1.08rem; color:var(--ink); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:'Caveat',cursive; font-size:1.8rem; color:var(--pin-red); line-height:1; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ margin:0 0 18px; color:var(--ink-soft); }

/* ---- final ---- */
.final-note{ max-width:620px; margin:0 auto; text-align:center; }
.final-note h2{ font-family:'Caveat',cursive; font-size:clamp(2.3rem,5vw,3.1rem); color:var(--ink); margin:0 0 6px; }
.final-note p{ color:var(--ink-soft); margin:0 0 22px; }

/* ---- footer ---- */
.footer .wrap{ padding:26px clamp(16px,4vw,32px) 34px; color:rgba(58,50,40,.82); font-size:.85rem; text-align:center; font-weight:600; }
.footer .disclaimer{ margin-top:8px; max-width:60ch; margin-inline:auto; }

@media (prefers-reduced-motion: reduce){ *{ transition:none!important; } html{ scroll-behavior:auto; } }
/* ============================================================
   Added homepage sections — stats, vision, support, news, contact
   Styled in the scrapbook aesthetic (pinned notes on cork).
   ============================================================ */

/* Stats — three torn note slips side by side */
.stats-strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:26px; }
.stat-note{ background:var(--paper); border-radius:3px; padding:26px 24px; position:relative; box-shadow:0 8px 18px var(--cork-shadow); font-family:'Caveat',cursive; font-size:1.7rem; line-height:1.25; color:var(--ink); }
.stat-note:nth-child(3n+1){ transform:rotate(-1.4deg); }
.stat-note:nth-child(3n+2){ transform:rotate(1.1deg); }
.stat-note:nth-child(3n+3){ transform:rotate(-.7deg); }
.stat-note::before{ content:""; position:absolute; top:-10px; left:26px; width:20px; height:20px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.85), var(--pin-blue) 70%); box-shadow:0 3px 5px rgba(0,0,0,.3); }
.stat-note em{ font-style:normal; color:var(--pin-blue); font-weight:700; }

/* Vision — a big cream note, left aligned, with a taped strategy button */
.vision-note{ max-width:760px; margin:0 auto; background:var(--paper-cream); border-radius:3px; padding:clamp(28px,4vw,42px); position:relative; box-shadow:0 8px 18px var(--cork-shadow); }
.vision-note::before{ content:""; position:absolute; top:-12px; left:50%; transform:translateX(-50%) rotate(-3deg); width:104px; height:28px; background:var(--tape); box-shadow:0 2px 4px rgba(0,0,0,.12); }
.vision-note h2{ font-family:'Caveat',cursive; font-size:clamp(2.1rem,4.5vw,2.9rem); color:var(--pin-blue); margin:0 0 .3em; }
.vision-note p{ margin:0 0 1em; color:var(--ink); font-size:1.05rem; }
.vision-note .btn-strategy{ display:inline-block; margin-top:8px; background:var(--pin-yellow); color:var(--ink); font-weight:800; font-family:Nunito,sans-serif; padding:14px 26px; border-radius:9px; text-decoration:none; box-shadow:0 3px 0 rgba(0,0,0,.16); }

/* Support trio — polaroid-style with round icon "photos" */
.support-trio{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:34px 26px; }
.support-item{ background:#fff; padding:20px 18px 22px; border-radius:3px; box-shadow:0 8px 18px var(--cork-shadow); position:relative; text-align:center; }
.support-item:nth-child(3n+1){ transform:rotate(-1.5deg); }
.support-item:nth-child(3n+2){ transform:rotate(1.2deg); }
.support-item:nth-child(3n+3){ transform:rotate(-.7deg); }
.support-item .circle{ width:70px; height:70px; border-radius:50%; background:#0A2C6B; color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.9rem; margin:6px auto 12px; box-shadow:0 4px 10px rgba(0,0,0,.2); }
.support-item h3{ font-family:'Caveat',cursive; font-size:1.7rem; margin:0 0 6px; }
.support-item h3 a{ color:var(--pin-blue); text-decoration:none; border-bottom:2px dotted var(--pin-blue); }
.support-item p{ margin:0; color:var(--ink-soft); font-size:.95rem; }

/* News / stories — polaroids with greyed placeholder photos */
.news-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:34px 26px; }
.news-card{ background:#fff; padding:13px 13px 20px; border-radius:3px; box-shadow:0 8px 18px var(--cork-shadow); position:relative; }
.news-card:nth-child(3n+1){ transform:rotate(-1.3deg); }
.news-card:nth-child(3n+2){ transform:rotate(1deg); }
.news-card:nth-child(3n+3){ transform:rotate(-.6deg); }
.news-card::before{ content:""; position:absolute; top:-10px; left:50%; transform:translateX(-50%); width:20px; height:20px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.85), var(--pin-red) 70%); box-shadow:0 3px 5px rgba(0,0,0,.3); }
.news-card .placeholder{ height:180px; border-radius:2px; background:
  repeating-linear-gradient(45deg, #d8d3c8 0 12px, #cfc9bd 12px 24px);
  display:flex; align-items:center; justify-content:center; color:#8a8578; font-weight:700; font-size:.85rem; letter-spacing:.05em; }
.news-card h3{ font-family:'Caveat',cursive; font-size:1.55rem; line-height:1.15; color:var(--pin-blue); margin:14px 8px 8px; }
.news-card p{ margin:0 8px 14px; color:var(--ink-soft); font-size:.95rem; }
.news-card .readmore{ display:inline-block; margin:0 8px; font-weight:800; color:var(--pin-blue); text-decoration:none; }

/* Contact split — two big notes: filled navy + white */
.contact-split{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:26px; max-width:900px; margin:0 auto; }
.contact-box{ border-radius:3px; padding:32px 26px; text-align:center; position:relative; box-shadow:0 8px 18px var(--cork-shadow); }
.contact-box.navy{ background:#0A2C6B; color:#fff; transform:rotate(-1deg); }
.contact-box.white{ background:var(--paper); color:var(--ink); transform:rotate(1deg); }
.contact-box .circle{ width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.7rem; margin:0 auto 14px; }
.contact-box.navy .circle{ background:rgba(255,255,255,.15); color:#fff; }
.contact-box.white .circle{ background:#0A2C6B; color:#fff; }
.contact-box h2{ font-family:'Caveat',cursive; font-size:2rem; margin:0 0 8px; }
.contact-box.navy h2{ color:#fff; }
.contact-box.white h2{ color:var(--pin-blue); }
.contact-box .big-link{ display:block; font-family:'Caveat',cursive; font-size:1.9rem; font-weight:700; margin-bottom:10px; text-decoration:none; }
.contact-box.navy .big-link{ color:#fff; border-bottom:2px solid rgba(255,255,255,.6); display:inline-block; }
.contact-box.white .big-link{ color:var(--pin-blue); border-bottom:2px solid var(--pin-blue); display:inline-block; }
.contact-box p{ margin:8px 0 0; font-size:.95rem; }
.contact-box.navy p{ color:rgba(255,255,255,.85); }
.contact-box.white p{ color:var(--ink-soft); }

/* Brand mark in header */
.brand{ display:inline-flex; align-items:center; gap:10px; }
.brand-mark{ display:block; width:34px; height:34px; flex:0 0 auto; }