:root{
  --navy: #01203A;
  --red: #C62828;
  --white: #FFFFFF;
  --muted: #f6f7f9;
  --max-width: 1100px;
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Arial,Helvetica,sans-serif;margin:0;background:var(--white);color:#111}
.container{max-width:var(--max-width);margin:0 auto;padding:24px}
.header{background:var(--white);border-bottom:1px solid #eee;position:sticky;top:0;z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:46px;width:auto}
.nav a{margin:0 8px;color:var(--navy);text-decoration:none;font-weight:600}
.nav a.cta{background:var(--red);color:#fff;padding:10px 14px;border-radius:8px}
.hero{background:linear-gradient(180deg, rgba(1,32,58,0.02), rgba(1,32,58,0.0));padding:60px 0;text-align:left}
.hero h1{color:var(--navy);font-size:36px;margin:0 0 12px}
.hero p{color:#333;margin:0 0 18px;max-width:720px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:18px}
.card{background:#fff;border:1px solid #eee;padding:18px;border-radius:10px;box-shadow:0 6px 18px rgba(10,10,10,0.03)}
.section-title{color:var(--navy);margin:0 0 12px;font-size:20px}
.footer{background:var(--navy);color:#fff;padding:24px;margin-top:32px;text-align:center}
.donate-amounts{display:flex;gap:8px;flex-wrap:wrap}
.amount{border:1px solid #ddd;padding:10px 12px;border-radius:8px;cursor:pointer}
.amount.selected{border-color:var(--navy);background:rgba(1,32,58,0.04)}
.form-row{margin-bottom:12px}
.input, .textarea, .select{width:100%;padding:10px;border:1px solid #ddd;border-radius:8px}
.btn{display:inline-block;background:var(--navy);color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:700}
.small{font-size:13px;color:#666}
.center{text-align:center}
@media (max-width:800px){ .hero h1{font-size:28px} .nav{display:none} }

/* === Enhancements for responsiveness and visual polish === */

/* Ensure images, videos, and embeds scale well */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* Improve layout spacing */
section, header, footer, div {
  box-sizing: border-box;
  padding-left: clamp(1rem, 4vw, 3rem);
  padding-right: clamp(1rem, 4vw, 3rem);
}

/* Slightly larger company logo */
.logo img {
  max-height: 80px !important;
}

/* Responsive text scaling */
h1 { font-size: clamp(1.8rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.5rem); }
p  { font-size: clamp(1rem, 2vw, 1.2rem); }

/* Responsive layout adjustments */
@media (max-width: 768px) {
  .container, .row, .content, .section {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  nav ul {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
}

/* Slightly more modern spacing */
button, .btn {
  border-radius: 8px;
  padding: 0.75em 1.5em;
}

/* Smooth transitions for hover effects */
a, button, .btn {
  transition: all 0.3s ease-in-out;
}

/* Appended by responsiveness script */

/* appended responsive rules - safe override */
@media (max-width: 900px){
  header, nav, .site-header { padding: 0.6rem 1rem !important; }
  .hero .container, .hero .wrap { padding: 0; }
}