:root {
  --navy:#1A2A6C;
  --orange:#FF6F3C;
  --teal:#008080;
  --gray:#555555;
  --light:#ffffff;
  --light-gray:#f7f7f8;
}

*{box-sizing:border-box}
body {
  margin:0;
  font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
  background:var(--light);
  color:var(--gray);
}
h1,h2,h3,h4 {color:var(--navy);margin-top:0}
a {text-decoration:none}

.container {
  max-width:1100px;
  margin:auto;
  padding:20px;
}

.section {
  padding:60px 20px;
}
.section.gray {background:var(--light-gray);}
.section.light {background:#fff;}
.section.donate {background:var(--navy);color:#fff;}
.section.donate h2, .section.donate p {color:#fff;}

.hero {
  background: linear-gradient(135deg, #0f0f28 55%, #2b3d87 45%, #FF6F3C 100%);
  color:#fff;
  padding:60px 20px;
}

.hero-inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:40px;
}
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .brand{justify-content:center}
  .hero-image{display:none;}
}

.brand {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
}
.brand .logo {
  width:40px;
  height:auto;
}
.brand-name {
  font-weight:700;
  font-size:1.2rem;
  color:#fff;
}

.hero-content h1 {
  font-size:2.8rem;
  line-height:1.2;
  margin-bottom:20px;
  color:#FFD700; /* goldish to stand out */
}
.hero-content .lead {
  font-size:1.25rem;
  margin-bottom:20px;
}

.hero-image img {
  width:100%;
  max-width:400px;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.65);
}

/* --- HERO SPLIT --- */
.hero-split{
  background:linear-gradient(135deg, #0f0f28 55%, #2b3d87 45%, #FF6F3C 100%);
  color:#fff;
  padding:72px 20px;
}
.hero-grid{
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:32px;
  align-items:center;
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;text-align:center}
}

/* Brand lockup */
.brand{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.logo{width:42px;height:auto}
.brand-name{font-weight:700;letter-spacing:.2px;color:#fff}

/* Headline + lead */
.hero-title{
  color:#FDF6D8;               /* pop against gradient */
  font-size:clamp(32px,4vw,56px);
  line-height:1.1;
  margin:6px 0 12px;
}
.lead{font-size:clamp(18px,2.2vw,20px);margin:0 0 18px}

/* Figure */
.hero-figure{text-align:center}
.hero-img{
  width:100%;
  max-width:520px;
  height:auto;
  filter:drop-shadow(0 16px 44px rgba(0,0,0,.25));
}
@media (max-width:900px){
  .hero-img{max-width:420px}
}


.hero h1 {font-size:2.5rem;line-height:1.2}
.hero .lead {font-size:1.25rem;max-width:700px;margin:20px auto}
.hero .cta-buttons {margin-top:20px}

.btn {
  display:inline-block;
  padding:12px 24px;
  margin:6px;
  border-radius:999px;
  font-weight:600;
  transition:.2s ease;
}
.btn.primary {background:var(--orange);color:#fff;}
.btn.primary:hover {background:var(--teal);}
.btn.outline {border:2px solid var(--orange);color:var(--orange);}
.btn.outline:hover {background:var(--teal);color:#fff;}
.btn.teal {background:var(--teal);color:#fff;}
.btn.teal:hover {background:var(--orange);}

.values {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
}
.values div {
  background:#fff;
  border-radius:12px;
  padding:20px;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}

.two-col {
  display:grid;
  gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  align-items:start;
}

blockquote {
  font-size:1.2rem;
  margin:0;
  padding-left:20px;
  border-left:4px solid var(--orange);
}
blockquote cite {display:block;margin-top:10px;font-size:.9rem;color:var(--gray)}

footer {
  background:#0f1830;
  color:#dfe7ff;
  padding:30px 20px;
  text-align:center;
}
footer a {color:#dfe7ff}
footer .small {font-size:.85rem;margin-top:10px}

.hero .brand-name,
.hero .logo-text {
  text-shadow: 2px 2px 6px rgba(0,0,0,0.65);
}

/* Desktop split */
.hero-grid{
  max-width:1100px; margin:auto;
  display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center;
}

/* Make sure the image is NOT hidden on mobile */
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; text-align:center; }
  .brand{ justify-content:center; }
  .hero-figure{ display:block !important; }   /* override any previous display:none */
  .hero-img{
    width:100%; max-width:420px; height:auto;
    margin:16px auto 0; filter:drop-shadow(0 16px 44px rgba(0,0,0,.25));
  }
}

/* If you had a rule like .hero-image{display:none;} remove it or force-show: */
.hero-image, .hero-figure { display:block; }