@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;1,600&display=swap');

:root{
  --blue:#ccecff; --blue2:#eaf7ff; --blue3:#78bde5; --navy:#24465c;
  --ink:#27343d; --white:#fff; --cream:#fffdf8; --gold:#e8c675;
  --shadow:0 18px 45px rgba(54,107,139,.13); --radius:26px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"DM Sans",sans-serif;color:var(--ink);background:var(--cream);line-height:1.65}
a{color:inherit;text-decoration:none}
.container{width:min(1120px,calc(100% - 40px));margin:auto}
.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:15px;top:15px;background:#fff;padding:10px;z-index:100}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,253,248,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(36,70,92,.08)}
.nav-wrap{height:78px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;gap:10px;align-items:center;color:var(--navy);line-height:1.05}.brand-mark{font-size:27px;color:var(--blue3)}.brand strong{display:block;font-family:"Playfair Display",serif;font-size:19px}.brand small{display:block;font-size:10px;text-transform:uppercase;letter-spacing:1.8px;margin-top:4px}
.site-nav{display:flex;gap:24px;align-items:center;font-size:14px;font-weight:600}.site-nav a:hover{color:#559bc4}.nav-button{background:var(--navy);color:#fff!important;padding:10px 17px;border-radius:999px}.menu-toggle{display:none;border:0;background:none;font-size:25px;color:var(--navy)}
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#f9fdff 0%,var(--blue2) 45%,#d8f1ff 100%);padding:95px 0 110px}.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:70px}.eyebrow{text-transform:uppercase;letter-spacing:3px;font-size:12px;font-weight:700;color:#5898bc;margin:0 0 12px}.hero h1,.section h2{font-family:"Playfair Display",serif;color:var(--navy);line-height:1.05}.hero h1{font-size:clamp(50px,7vw,84px);margin:0}.hero h1 span{font-style:italic;color:#6eb2da}.tagline{font-family:"Playfair Display",serif;font-style:italic;font-size:24px;color:#557182;margin:24px 0 12px}.intro{max-width:620px;font-size:17px}.hero-actions{display:flex;gap:12px;margin-top:30px}.button{display:inline-block;padding:13px 22px;border-radius:999px;font-weight:700;font-size:14px;transition:.2s}.button:hover{transform:translateY(-2px)}.primary{background:var(--navy);color:#fff;box-shadow:0 8px 20px rgba(36,70,92,.15)}.secondary{border:1.5px solid #7ab8d9;color:var(--navy);background:rgba(255,255,255,.45)}
.hero-photo{position:relative}.photo-placeholder{aspect-ratio:4/5;border-radius:48% 48% 28px 28px;background:linear-gradient(160deg,#fff,#c6eaff);border:7px solid rgba(255,255,255,.8);box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#66879b}.photo-placeholder span{font-size:44px;color:var(--gold)}.photo-placeholder strong{font-family:"Playfair Display",serif;font-size:25px}.photo-placeholder small{margin-top:10px}.photo-note{position:absolute;bottom:22px;left:-38px;background:#fff;padding:13px 20px;border-radius:999px;box-shadow:var(--shadow);font-family:"Playfair Display",serif;font-style:italic;color:var(--navy)}.sparkles{position:absolute;right:5%;top:45px;color:#fff;font-size:38px;letter-spacing:20px}.wave{position:absolute;bottom:-1px;width:100%;height:45px;background:var(--cream);clip-path:ellipse(60% 55% at 50% 100%)}
.section{padding:90px 0}.two-col{display:grid;grid-template-columns:1fr 1.1fr;gap:90px}.section h2{font-size:clamp(38px,5vw,57px);margin:0 0 20px}.story p{font-size:17px}.story blockquote{font-family:"Playfair Display",serif;font-style:italic;font-size:29px;color:#67a9cf;border-left:3px solid var(--blue);padding-left:24px;margin:30px 0 0}
.centered{text-align:center}.section-lead{max-width:680px;margin:0 auto 45px;font-size:18px}.mission{background:#f1f9fd}.values-grid,.project-grid,.action-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.value-card,.project-card{background:#fff;border-radius:var(--radius);padding:34px;box-shadow:0 10px 35px rgba(54,107,139,.08)}.value-card .icon{width:54px;height:54px;margin:0 auto 17px;border-radius:50%;background:var(--blue2);display:grid;place-items:center;color:#66a8ce;font-size:25px}.value-card h3,.project-card h3,.action-grid h3{color:var(--navy);margin:0 0 8px}.value-card p,.project-card p{margin:0;font-size:14px}
.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:35px}.pill{background:var(--blue);color:var(--navy);padding:8px 14px;border-radius:999px;font-size:12px;font-weight:700}.featured-project{display:grid;grid-template-columns:.8fr 1.2fr;background:var(--navy);border-radius:32px;overflow:hidden;color:#eaf6fc}.project-art{min-height:390px;background:radial-gradient(circle at center,#dce8f0,#8fb5ca);display:grid;place-items:center}.wreath{width:210px;height:210px;border:32px dotted #567c68;border-radius:50%;display:grid;place-items:center;font-size:65px;color:#f2d37e;text-shadow:0 3px 0 rgba(0,0,0,.08)}.project-copy{padding:55px}.project-copy h3{font-family:"Playfair Display",serif;font-size:37px;line-height:1.1;color:#fff;margin:7px 0 18px}.kicker{text-transform:uppercase;letter-spacing:2px;font-size:11px;color:#a9d8ef}.note{font-size:12px;opacity:.72}.project-copy .primary{background:#fff;color:var(--navy);margin-top:8px}.disabled-link{pointer-events:none;opacity:.85}.past-projects{margin-top:70px}.project-number{font-family:"Playfair Display",serif;font-size:50px;color:#6aafd4;line-height:1;margin-bottom:17px}
.impact{padding-top:30px}.impact-box{background:linear-gradient(135deg,#dff3ff,#f8fcff);border-radius:35px;padding:60px;display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:center}.impact-quote{text-align:center;font-family:"Playfair Display",serif;font-style:italic;color:var(--navy);font-size:27px}.big-sparkle{display:block;color:var(--gold);font-size:55px}
.krew{background:#fff}.krew-art{display:grid;place-items:center}.badge{width:260px;height:260px;border-radius:50%;background:var(--blue2);border:8px double #86c5e8;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--navy);box-shadow:var(--shadow);transform:rotate(-4deg)}.badge span{color:var(--gold);font-size:32px}.badge strong{font-family:"Playfair Display",serif;font-size:32px;line-height:1}.badge small{text-transform:uppercase;letter-spacing:3px;margin-top:10px}.krew .button{margin-top:15px}
.get-involved{background:var(--navy);color:#eaf6fc}.get-involved h2{color:#fff}.get-involved .eyebrow{color:#9fd4ef}.action-grid{text-align:left;margin:45px 0}.action-grid div{border-top:1px solid rgba(255,255,255,.25);padding:22px 8px}.action-grid span{font-family:"Playfair Display",serif;color:#9fd4ef;font-size:25px}.action-grid h3{color:#fff}.parent-note{max-width:760px;margin:35px auto 0;padding:18px 24px;border-radius:16px;background:rgba(255,255,255,.08);font-size:13px}
footer{background:#1b3546;color:#c8dae5;padding:40px 0}.footer-grid{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}.footer-brand{display:flex;gap:12px;align-items:center}.footer-brand>span{font-size:28px;color:var(--gold)}.footer-brand strong,.footer-brand small{display:block}.footer-brand small{font-family:"Playfair Display",serif;font-style:italic}.footer-links{display:flex;gap:20px;font-size:13px}.copyright{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:20px;margin:5px 0 0;font-size:12px}
@media(max-width:800px){
 .menu-toggle{display:block}.site-nav{display:none;position:absolute;top:78px;left:0;right:0;background:#fff;padding:24px;flex-direction:column;box-shadow:var(--shadow)}.site-nav.open{display:flex}
 .hero{padding-top:60px}.hero-grid,.two-col,.featured-project,.impact-box{grid-template-columns:1fr;gap:40px}.hero-photo{max-width:470px;margin:auto}.photo-note{left:10px}.values-grid,.project-grid,.action-grid{grid-template-columns:1fr}.section{padding:65px 0}.section-heading{align-items:start;gap:15px}.featured-project .project-art{min-height:300px}.project-copy{padding:35px}.impact-box{padding:35px}.footer-grid{grid-template-columns:1fr}.footer-links{flex-wrap:wrap}.copyright{grid-column:auto}
}
@media(max-width:480px){.container{width:min(100% - 28px,1120px)}.hero h1{font-size:49px}.hero-actions{flex-direction:column;align-items:flex-start}.photo-note{position:static;margin:12px auto 0;text-align:center}.section-heading{flex-direction:column}.wreath{width:170px;height:170px}.project-copy h3{font-size:31px}}


/* Aria hero photo */
.aria-photo{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:48% 48% 28px 28px;border:7px solid rgba(255,255,255,.8);box-shadow:var(--shadow);display:block}

/* Sprinkle of Honor flyer */
.project-flyer-link{display:block;background:#e9f6ff;min-height:390px}
.project-flyer{width:100%;height:100%;max-height:650px;object-fit:contain;display:block;margin:auto}
.text-link{display:inline-block;margin:18px 0 0 16px;color:#d8effc;font-weight:700;font-size:13px;text-decoration:underline;text-underline-offset:4px}
.text-link:hover{color:#fff}
@media(max-width:800px){.project-flyer-link{min-height:auto}.project-flyer{max-height:none}}

/* Image sizing fixes */
.hero-photo{
  width:100%;
  max-width:380px;
  justify-self:center;
  margin-inline:auto;
}
.aria-photo{
  width:100%;
  max-width:380px;
  height:475px;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:center top;
  border-radius:48% 48% 28px 28px;
  border:7px solid rgba(255,255,255,.8);
  box-shadow:var(--shadow);
  display:block;
}
.project-flyer-link{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  min-height:0;
}
.project-flyer{
  width:auto;
  max-width:100%;
  height:auto;
  max-height:520px;
  object-fit:contain;
  border-radius:14px;
}
@media(max-width:800px){
  .hero-photo{max-width:330px}
  .aria-photo{max-width:330px;height:410px}
  .project-flyer{max-height:500px}
}
@media(max-width:480px){
  .hero-photo{max-width:290px}
  .aria-photo{max-width:290px;height:360px}
  .project-flyer-link{padding:12px}
  .project-flyer{max-height:430px}
}


/* FINAL hero portrait sizing — intentionally compact */
.hero-grid{
  grid-template-columns:minmax(0,1.25fr) minmax(250px,.55fr);
}
.hero-photo{
  width:250px !important;
  max-width:250px !important;
  justify-self:center !important;
  margin:0 auto !important;
}
.aria-photo{
  width:250px !important;
  max-width:250px !important;
  height:313px !important;
  aspect-ratio:250 / 313 !important;
  object-fit:cover !important;
  object-position:center top !important;
  display:block !important;
}
@media(max-width:800px){
  .hero-grid{grid-template-columns:1fr}
  .hero-photo{width:230px !important;max-width:230px !important}
  .aria-photo{width:230px !important;max-width:230px !important;height:288px !important}
}
@media(max-width:480px){
  .hero-photo{width:210px !important;max-width:210px !important}
  .aria-photo{width:210px !important;max-width:210px !important;height:263px !important}
}


/* DEFINITIVE Sprinkle of Honor fix:
   do not place the tall flyer and text side-by-side. */
.featured-project{
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  max-width:900px !important;
  margin:0 auto !important;
  overflow:hidden !important;
}
.project-flyer-link{
  display:flex !important;
  width:100% !important;
  min-width:0 !important;
  padding:28px !important;
  justify-content:center !important;
  align-items:center !important;
  background:#e9f6ff !important;
}
.project-flyer{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:min(100%, 560px) !important;
  max-height:720px !important;
  object-fit:contain !important;
}
.project-copy{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  padding:42px 48px 48px !important;
}
.project-copy h3{
  max-width:none !important;
  font-size:36px !important;
  line-height:1.15 !important;
}
.project-copy p{
  max-width:720px !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}
.project-copy .button{
  display:inline-block !important;
  width:auto !important;
  white-space:normal !important;
  margin:12px 10px 0 0 !important;
}
.project-copy .text-link{
  display:inline-block !important;
  margin:12px 0 !important;
}
@media(max-width:800px){
  .project-flyer-link{padding:16px !important}
  .project-flyer{max-width:100% !important;max-height:none !important}
  .project-copy{padding:30px 25px 34px !important}
  .project-copy h3{font-size:29px !important}
}