/* Shayanewako — shared stylesheet */

:root{
  --navy:#123A67;
  --navy-deep:#0B2440;
  --orange:#F57C00;
  --orange-deep:#C85F00;
  --text:#1C232D;
  --text-soft:#525B68;
  --border:#CBD9E8;
  --alt-bg:#EAF0F7;
  --footer-bg:#0B2440;
  --footer-text:#AEBBCE;
  --radius:14px;
  --wrap-width:1180px;
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:#ffffff;
  color:var(--text);
  font-family:'Montserrat',Arial,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Libre Baskerville',Georgia,'Times New Roman',serif;
  font-weight:700;
  color:var(--navy);
  line-height:1.25;
  margin:0;
}
h1{font-size:clamp(30px,4vw,46px);}
h2{font-size:clamp(24px,3vw,32px);}
h3{font-size:19px; margin-bottom:8px;}
h4{font-size:15px; letter-spacing:.03em; text-transform:uppercase; color:#fff; margin-bottom:14px;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block; border-radius:var(--radius);}

.wrap{
  width:100%;
  max-width:var(--wrap-width);
  margin-inline:auto;
  padding-inline:24px;
}

/* ---------- Header ---------- */
header{
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);
}
.headbar{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:16px;
  gap:20px;
}
.logo{display:flex; align-items:center;}
.logo-img{height:92px; width:auto; display:block;}
.footer-logo{justify-content:flex-start; width:100%;}
.mainnav{display:flex; align-items:center; gap:30px;}
.navlink{font-size:15px; font-weight:500; color:var(--text-soft); padding-block:6px; border-bottom:2px solid transparent;}
.navlink:hover{color:var(--navy);}
.navlink[aria-current="page"]{color:var(--navy); border-bottom-color:var(--orange);}
.head-actions{display:flex; align-items:center; gap:14px;}
.menu-toggle{
  display:none; background:none; border:1px solid var(--border); border-radius:10px;
  width:42px; height:42px; align-items:center; justify-content:center; color:var(--navy); cursor:pointer;
}
#mobilenav{
  display:none; flex-direction:column; border-top:1px solid var(--border);
  padding:8px 24px 18px;
}
#mobilenav a{padding-block:12px; font-size:15.5px; color:var(--text-soft); border-bottom:1px solid var(--border);}
#mobilenav a:last-child{border-bottom:none;}
#mobilenav a[aria-current="page"]{color:var(--orange); font-weight:600;}
#mobilenav.open{display:flex;}
#mobilenav a.mnav-donate{color:var(--orange); font-weight:600;}

@media (max-width:860px){
  .mainnav{display:none;}
  .menu-toggle{display:flex;}
}

@media (max-width:480px){
  .logo-img{height:64px;}
  .headbar{gap:10px;}
  .head-actions{gap:8px;}
  .head-actions .btn-primary{display:none;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 24px; border-radius:999px; font-weight:600; font-size:15px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--orange); color:#fff; border:1.5px solid var(--orange); box-shadow:0 6px 16px -6px rgba(245,124,0,.55);}
.btn-primary:hover{background:#fff; color:var(--orange); border-color:var(--orange); transform:translateY(-1px);}
.btn-ghost{border:1.5px solid var(--navy); color:var(--navy);}
.btn-ghost:hover{background:var(--navy); color:#fff;}
.btn-ghost-onNavy{border:1.5px solid rgba(255,255,255,.55); color:#fff;}
.btn-ghost-onNavy:hover{background:#fff; color:var(--navy); border-color:#fff;}

/* ---------- Layout sections ---------- */
main section{padding-block:52px;}
.alt{background:var(--alt-bg);}
.eyebrow{
  color:var(--orange); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
}
.lede{
  font-size:16px; color:var(--text-soft); max-width:none; width:100%;
}
main section p:not(.eyebrow):not([class]){
  width:100%;
}

/* generic body copy following a heading spans the full column it sits in */
.sec-head p, .split > div > p, section > .wrap > p{width:100%; max-width:none;}

.sec-head{max-width:none; margin-bottom:44px;}
.sec-head h2{margin-top:8px;}
.sec-head .lede{max-width:none; width:100%;}

/* single trial: restructured section headings in orange instead of navy */
.h-orange{color:var(--orange) !important;}

/* ---------- Page header (single heading, no eyebrow duplicate) ---------- */
.page-head{padding-block:52px 40px;}
.page-head h1{white-space:normal; font-size:clamp(24px,3vw,32px);}
.page-head .lede{max-width:none; width:100%; margin-top:16px;}
.page-head .lede strong{color:var(--navy);}

/* ---------- Navy stat band ---------- */
.stat-band{background:var(--navy); color:#fff; padding-block:38px;}
.stat-band .stat-strip{margin-top:0; padding-top:0; border-top:none;}
.stat-band .stat b{color:#fff;}
.stat-band .stat span{color:#AFC2DC;}

/* ---------- Full-width top banner ---------- */
.top-banner{width:100%; line-height:0; overflow:hidden; padding:0;}
.top-banner img{
  width:100%; height:clamp(420px, calc(100svh - 125px), 760px);
  object-fit:cover; object-position:center; display:block;
}
@media (max-width:480px){
  .top-banner img{height:clamp(380px, calc(100svh - 97px), 640px);}
}

/* ---------- Top banner image slider (alternating slide-to-left) ---------- */
.top-banner.slider{position:relative; height:clamp(420px, calc(100svh - 125px), 760px);}
.top-banner.slider img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
  border-radius:0;
  animation:bannerSlide 16s infinite;
  backface-visibility:hidden;
}
.top-banner.slider img:first-child{animation-delay:0s;}
.top-banner.slider img:last-child{animation-delay:-8s;}
@keyframes bannerSlide{
  0%{transform:translateX(0%);}
  47.5%{transform:translateX(0%);}
  50%{transform:translateX(-100%);}
  50.1%{transform:translateX(100%);}
  97.5%{transform:translateX(100%);}
  100%{transform:translateX(0%);}
}
@media (max-width:480px){
  .top-banner.slider{height:clamp(380px, calc(100svh - 97px), 640px);}
}
@media (prefers-reduced-motion: reduce){
  .top-banner.slider img{animation:none; transform:none;}
  .top-banner.slider img:not(:first-child){display:none;}
}

/* ---------- Hero ---------- */
.hero{padding-top:48px;}
.hero .wrap{max-width:760px; text-align:center;}
.hero h1{margin-top:0;}
.hero .lede{margin-top:18px; max-width:none;}
.hero-cta{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; justify-content:center;}
.stat-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  margin-top:64px; padding-top:40px; border-top:1px solid var(--border);
}
.stat b{display:block; font-family:'Libre Baskerville',serif; font-size:clamp(26px,3vw,34px); color:var(--navy);}
.stat span{display:block; font-size:12px; letter-spacing:.05em; color:var(--text-soft); margin-top:6px;}

@media (max-width:900px){
  .stat-strip{grid-template-columns:repeat(2,1fr);}
}

/* ---------- Split (image + text) ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.split img{width:100%; height:auto; aspect-ratio:4/3.2; object-fit:cover;}
.split-square img{aspect-ratio:1/1;}
.split .photo-pending{aspect-ratio:4/3.2;}
.quote-block{
  background:var(--navy); border-left:4px solid var(--orange);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:22px 26px; margin-top:22px;
}
.quote-block p{font-family:'Libre Baskerville',serif; font-size:17px; font-style:italic; color:#fff;}
@media (max-width:860px){
  .split{grid-template-columns:1fr;}
  .split img{order:-1;}
}

/* ---------- Card grids ---------- */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:28px 26px;
}
.card p{color:var(--text-soft); width:100%;}
.measure-card{
  background:#fff; border:1.5px solid var(--orange); border-radius:var(--radius);
  padding:24px 22px; transition:transform .2s ease, box-shadow .2s ease;
}
.measure-card:hover{transform:translateY(-6px); box-shadow:0 16px 28px -12px rgba(245,124,0,.45);}
.measure-card p{color:var(--text-soft); width:100%;}
.card-orange{
  border-color:var(--orange);
  box-shadow:0 0 0 1px rgba(245,124,0,.08), 0 10px 22px -16px rgba(245,124,0,.35);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card-orange:hover{transform:translateY(-6px); box-shadow:0 0 0 1px rgba(245,124,0,.18), 0 16px 28px -12px rgba(245,124,0,.5);}
.icon{
  width:46px; height:46px; border-radius:12px; background:#FFF3E6;
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.icon svg{width:24px; height:24px;}
.involve-card{display:flex; flex-direction:column; gap:12px;}
.involve-card .btn{margin-top:6px; align-self:flex-start;}

@media (max-width:900px){
  .grid3{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  .grid3,.grid2{grid-template-columns:1fr;}
}

/* ---------- CTA band (full-bleed navy, two-column) ---------- */
.cta-band{background:var(--navy); color:#fff; padding-block:64px;}
.cta-band-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;
}
.cta-band h2{color:#fff;}
.cta-band p{color:#C7D4E4; margin-top:14px;}
.cta-band .hero-cta{margin-top:28px;}
.cta-band .photo-pending{aspect-ratio:4/3.2;}
.cta-band img{width:100%; height:auto; aspect-ratio:4/3.2; object-fit:cover;}
.cta-band-square img{aspect-ratio:1/1;}
.cta-band-square{grid-template-columns:1.3fr .7fr;}
.cta-band-half{grid-template-columns:1fr 1fr;}
.cta-band-half > div:first-child{text-align:left;}
.cta-band-half .hero-cta{justify-content:flex-start;}
.contact-grid img{width:100%; height:100%; object-fit:cover; min-height:360px;}
@media (max-width:860px){
  .cta-band-grid{grid-template-columns:1fr; gap:32px;}
  .cta-band .photo-pending{order:-1;}
}

/* ---------- Photo placeholder (pending real photography) ---------- */
.photo-pending{
  width:100%; border-radius:var(--radius); background:linear-gradient(135deg, var(--navy-deep), var(--navy));
  display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; overflow:hidden;
  min-height:220px; gap:14px;
}
.photo-pending::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 25% 30%, rgba(245,124,0,.28), transparent 55%);
}
.photo-pending svg{
  position:relative; z-index:1; width:64px; height:64px; opacity:.28;
}
.photo-pending span{
  position:relative; z-index:1; color:rgba(255,255,255,.55); font-size:12.5px; letter-spacing:.06em;
  text-transform:uppercase; text-align:center; padding:0 24px;
}

/* ---------- Timeline (staggered, connected) ---------- */
.timeline-zigzag{position:relative; max-width:920px; margin:0 auto; padding-block:20px;}
.timeline-zigzag::before{
  content:""; position:absolute; left:50%; top:53px; bottom:228px; width:2px;
  background:var(--border); transform:translateX(-50%);
}
.tlz-item{
  position:relative; width:calc(50% - 34px); padding:22px 24px; margin-bottom:34px;
  background:#fff; border:1px solid var(--navy); border-radius:var(--radius);
}
.tlz-item:nth-child(odd){margin-right:calc(50% + 34px);}
.tlz-item:nth-child(even){margin-left:calc(50% + 34px);}
.tlz-item::before{
  content:""; position:absolute; top:26px; width:14px; height:14px; border-radius:999px;
  background:var(--orange); border:3px solid #fff; box-shadow:0 0 0 2px var(--orange);
}
.tlz-item:nth-child(odd)::before{right:-41px;}
.tlz-item:nth-child(even)::before{left:-41px;}
.tlz-item::after{
  content:""; position:absolute; top:32px; width:22px; height:2px; background:var(--border);
}
.tlz-item:nth-child(odd)::after{right:-22px;}
.tlz-item:nth-child(even)::after{left:-22px;}
.tlz-year{font-family:'Libre Baskerville',serif; font-weight:700; color:var(--orange); font-size:17px; display:block; margin-bottom:6px;}
.tlz-item p{color:var(--text-soft); width:100%;}
@media (max-width:700px){
  .timeline-zigzag::before{left:18px;}
  .tlz-item, .tlz-item:nth-child(odd), .tlz-item:nth-child(even){
    width:auto; margin-left:46px; margin-right:0;
  }
  .tlz-item:nth-child(odd)::before, .tlz-item:nth-child(even)::before{left:-34px; right:auto;}
  .tlz-item:nth-child(odd)::after, .tlz-item:nth-child(even)::after{left:-20px; right:auto;}
}

/* ---------- Impact tiles ---------- */
.impact-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.impact-tile{
  border:1px solid var(--border); border-radius:var(--radius); padding:26px 20px; text-align:center;
  animation:fadeInUp .6s ease both;
}
.impact-tile:nth-child(1){animation-delay:.05s;}
.impact-tile:nth-child(2){animation-delay:.15s;}
.impact-tile:nth-child(3){animation-delay:.25s;}
.impact-tile:nth-child(4){animation-delay:.35s;}
.impact-tile b{display:block; font-family:'Libre Baskerville',serif; font-size:clamp(28px,3vw,36px); color:var(--navy);}
.impact-tile span{display:block; margin-top:8px; color:var(--text-soft); font-size:14px; width:100%;}
@media (max-width:900px){
  .impact-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:360px){
  .impact-grid{grid-template-columns:1fr;}
}
@keyframes fadeInUp{
  from{opacity:0; transform:translateY(14px);}
  to{opacity:1; transform:translateY(0);}
}
/* navy full-bleed variant, for the historical (since-2000) figures */
.impact-band{background:var(--navy); color:#fff; padding-block:56px;}
.impact-band .impact-tile{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16);
}
.impact-band .impact-tile b{color:var(--orange);}
.impact-band .impact-tile span{color:#AFC2DC;}

.privacy-note{
  display:flex; gap:14px; align-items:flex-start;
  background:#FFF7EC; border:1px solid #F3DDB8; border-radius:var(--radius);
  padding:20px 22px; margin-top:32px;
}
.privacy-note svg{width:22px; height:22px; color:var(--orange); flex-shrink:0; margin-top:2px;}
.privacy-note p{color:#6B4B18; font-size:14.5px; width:100%;}

/* ---------- Contact page ---------- */
.contact-form{
  display:flex; flex-direction:column; gap:18px;
  background:transparent; border:2px solid var(--navy); border-radius:var(--radius);
  padding:32px;
}
.contact-form label{font-size:13.5px; font-weight:600; color:var(--navy); margin-bottom:6px; display:block;}
.contact-form input,.contact-form select,.contact-form textarea{
  width:100%; border:1px solid #B9BEC6; border-radius:10px; padding:12px 14px;
  font-family:inherit; font-size:15px; background:#fff; color:var(--text);
}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
  outline:none; border-color:var(--navy);
}
.contact-form textarea{min-height:110px; resize:vertical;}

.contact-form-full{
  width:100%; max-width:none; margin:0 auto;
}
.contact-form-full .cf-row{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
}
@media (max-width:700px){
  .contact-form-full .cf-row{grid-template-columns:1fr;}
}

.cf-phone-group{display:flex; gap:8px;}
.cf-phone-group select{
  flex:0 0 148px; width:148px; padding-left:14px; padding-right:6px;
  font-size:14px;
}
.cf-phone-group input{flex:1; min-width:0;}
.cf-phone-group select.is-placeholder{color:#8A93A3;}
.cf-phone-group select:not(.is-placeholder){color:var(--text);}

/* ---------- Footer ---------- */
footer{background:var(--footer-bg); color:var(--footer-text); padding-block:56px 28px; margin-top:40px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:32px;}
.foot-grid > div:first-child{display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;}
.foot-desc{margin-top:16px; font-size:14px; color:var(--footer-text); max-width:320px; width:auto; text-align:left;}
.foot-desc strong{display:block; color:#fff; font-weight:600; margin-bottom:6px;}
.flinks{display:flex; flex-direction:column; gap:10px;}
.flinks a{font-size:14.5px; color:var(--footer-text);}
.flinks a:hover{color:#fff;}

.foot-social{display:flex; align-items:center; gap:16px; margin-top:18px;}
.foot-social a{
  display:flex; align-items:center; justify-content:center; color:var(--orange);
  transition:color .15s ease;
}
.foot-social a:hover{color:#fff;}
.foot-social svg{height:22px; width:auto; fill:currentColor;}

.foot-bottom{
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12);
  font-size:12.5px; color:#8195AE;
}

@media (max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr;}
}

/* ---------- Toast notification ---------- */
.toast{
  position:fixed; top:108px; right:24px; z-index:200;
  display:flex; align-items:center; gap:14px;
  background:var(--navy); color:#fff;
  padding:16px 44px 16px 20px; border-radius:10px;
  box-shadow:0 12px 28px -8px rgba(11,36,64,.45);
  font-size:15px; font-weight:500;
  opacity:0; transform:translateY(-12px);
  pointer-events:none; transition:opacity .25s ease, transform .25s ease;
}
.toast.show{opacity:1; transform:translateY(0); pointer-events:auto;}
.toast.toast-error{background:var(--orange-deep);}
.toast-close{
  position:absolute; top:10px; right:10px;
  width:22px; height:22px; padding:0; border:none; background:none; cursor:pointer;
  color:rgba(255,255,255,.7); display:flex; align-items:center; justify-content:center;
}
.toast-close:hover{color:#fff;}
.toast-close svg{width:16px; height:16px;}
@media (max-width:480px){
  .toast{left:16px; right:16px; top:84px;}
}