/* ================================================
   Active Helping Hands — Global Stylesheet
   Navy #0D1B34 | Teal #2D6A6A | Gold #D4A017
   Coral #C0392B | Cream #F5F0E8
   ================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:  #0D1B34;
  --teal:  #2D6A6A;
  --gold:  #D4A017;
  --coral: #C0392B;
  --cream: #F5F0E8;
  --white: #FFFFFF;
  --gray:  #6B7280;
  --light: #F9F8F5;
  --border:#E5E0D8;
  --font-h: 'Playfair Display', Georgia, serif;
  --font-b: 'Inter', system-ui, sans-serif;
  --r-sm: 4px; --r-md: 8px; --r-lg: 16px;
  --sh-sm: 0 1px 3px rgba(0,0,0,.08);
  --sh-md: 0 4px 16px rgba(0,0,0,.12);
  --sh-lg: 0 8px 32px rgba(0,0,0,.18);
}

html { scroll-behavior: smooth; }
body { font-family: var(--font-b); color: var(--navy); background: #fff; line-height: 1.6; overflow-x: hidden; }
img  { max-width: 100%; display: block; }

/* TYPOGRAPHY */
h1,h2,h3,h4,h5 { font-family: var(--font-h); line-height: 1.2; color: var(--navy); }
h1 { font-size: clamp(1.8rem,4vw,3.2rem); font-weight:700; }
h2 { font-size: clamp(1.4rem,3vw,2.4rem); font-weight:700; }
h3 { font-size: clamp(1rem,2vw,1.35rem); font-weight:600; }
p  { color: #4A5568; line-height: 1.75; }
.eyebrow { font-family:var(--font-b); font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); display:block; margin-bottom:10px; }

/* BUTTONS */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:12px 24px; border-radius:var(--r-sm);
  font-family:var(--font-b); font-size:.78rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  cursor:pointer; border:2px solid transparent;
  transition:all .22s ease; white-space:nowrap;
}
.btn-primary   { background:var(--coral); color:#fff; border-color:var(--coral); }
.btn-primary:hover { background:#a93226; border-color:#a93226; transform:translateY(-1px); }
.btn-secondary { background:var(--teal);  color:#fff; border-color:var(--teal); }
.btn-secondary:hover { background:#235555; border-color:#235555; transform:translateY(-1px); }
.btn-outline   { background:transparent; color:#fff; border-color:rgba(255,255,255,.75); }
.btn-outline:hover { background:#fff; color:var(--navy); }
.btn-gold      { background:var(--gold); color:var(--navy); border-color:var(--gold); }
.btn-gold:hover { background:#b8890f; border-color:#b8890f; transform:translateY(-1px); }
.btn-ghost     { background:transparent; color:var(--navy); border-color:var(--border); }
.btn-ghost:hover { background:var(--cream); border-color:var(--teal); color:var(--teal); }
.btn-dark      { background:var(--navy); color:#fff; border-color:var(--navy); }
.btn-dark:hover { background:#162440; transform:translateY(-1px); }

/* ── NAVBAR ── */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:transparent;
  transition:background .3s ease, box-shadow .3s ease;
}
.navbar.scrolled { background:var(--navy); box-shadow:var(--sh-lg); }
.nav-inner {
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  height:72px; padding:0 24px;
}
.nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.nav-logo img { height:42px; width:auto; filter:brightness(0) invert(1); }
.nav-logo-text { display:flex; flex-direction:column; line-height:1; }
.logo-name { font-family:var(--font-h); font-size:.9rem; font-weight:700; color:#fff; }
.logo-sub  { font-size:.58rem; font-weight:500; color:rgba(255,255,255,.55); letter-spacing:.07em; text-transform:uppercase; margin-top:3px; }
.nav-links { display:flex; align-items:center; gap:2px; list-style:none; }
.nav-links a { font-size:.8rem; font-weight:500; color:rgba(255,255,255,.88); text-decoration:none; padding:7px 11px; border-radius:var(--r-sm); transition:all .2s; }
.nav-links a:hover, .nav-links a.active { color:#fff; background:rgba(255,255,255,.12); }
.nav-links a.active { color:var(--gold); background:none; }
.nav-cta { margin-left:8px; }
/* Dropdown */
.nav-dropdown { position:relative; }
.dropdown-menu { display:none; position:absolute; top:calc(100% + 6px); left:0; min-width:190px; background:#fff; border-radius:var(--r-md); box-shadow:var(--sh-lg); border:1px solid var(--border); overflow:hidden; }
.nav-dropdown:hover .dropdown-menu { display:block; }
.dropdown-menu a { display:block; padding:10px 18px; color:var(--navy) !important; font-size:.84rem; background:none; border-radius:0; border-bottom:1px solid var(--border); }
.dropdown-menu a:last-child { border-bottom:none; }
.dropdown-menu a:hover { background:var(--cream); color:var(--teal) !important; }
/* Hamburger */
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.hamburger span { display:block; width:24px; height:2px; background:#fff; border-radius:2px; transition:.3s; }
/* Mobile nav */
.mobile-menu { display:none; position:fixed; top:72px; left:0; right:0; background:var(--navy); padding:16px 24px 28px; z-index:999; border-top:1px solid rgba(255,255,255,.1); max-height:calc(100vh - 72px); overflow-y:auto; }
.mobile-menu.open { display:block; }
.mobile-menu a { display:block; color:#fff; text-decoration:none; padding:13px 0; font-size:.95rem; font-weight:500; border-bottom:1px solid rgba(255,255,255,.08); }
.mobile-menu a:last-of-type { border-bottom:none; }
.mobile-menu .btn { margin-top:20px; width:100%; justify-content:center; }

/* ── LAYOUT ── */
.section    { padding:80px 24px; }
.section-sm { padding:56px 24px; }
.container  { max-width:1200px; margin:0 auto; }
.container-narrow { max-width:800px; margin:0 auto; }
.section-header { text-align:center; margin-bottom:52px; }
.section-header p { font-size:1rem; max-width:560px; margin:12px auto 0; }

/* ── HERO ── */
.hero { min-height:100vh; position:relative; display:flex; align-items:center; overflow:hidden; background:var(--navy); }
.hero-bg { position:absolute; inset:0; background-size:cover; background-position:center 30%; }
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to right,rgba(13,27,52,.97) 0%,rgba(13,27,52,.88) 42%,rgba(13,27,52,.3) 70%,transparent 100%);
}
.hero-content { position:relative; z-index:2; max-width:580px; padding:120px 24px 80px; margin-left:max(24px,calc((100vw - 1200px) / 2)); }
.hero h1 { color:#fff; font-size:clamp(1.75rem,3.8vw,3rem); line-height:1.2; margin-bottom:16px; }
.hero h1 span { color:var(--gold); }
.hero-sub { font-size:.97rem; color:rgba(255,255,255,.82); margin:0 0 32px; max-width:440px; line-height:1.72; }
.hero-buttons { display:flex; gap:10px; flex-wrap:wrap; }
.hero-buttons .btn { font-size:.76rem; padding:10px 18px; }

/* ── CARDS ── */
.card { background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:32px 28px; transition:transform .25s,box-shadow .25s; }
.card:hover { transform:translateY(-4px); box-shadow:var(--sh-lg); }
.card-icon { width:50px; height:50px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.35rem; margin-bottom:18px; }
.card-icon.teal  { background:rgba(45,106,106,.1); }
.card-icon.coral { background:rgba(192,57,43,.1); }
.card-icon.gold  { background:rgba(212,160,23,.15); }
.card h3 { margin-bottom:8px; font-size:1.05rem; }
.card p  { font-size:.9rem; }
.card-link { display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-size:.83rem; font-weight:600; color:var(--teal); text-decoration:none; transition:gap .2s; }
.card-link:hover { gap:10px; color:var(--navy); }

/* ── GRIDS ── */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:40px; align-items:center; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }

/* ── IMPACT BAR ── */
.impact-bar { background:var(--navy); padding:52px 24px; }
.impact-grid { display:flex; justify-content:space-evenly; flex-wrap:wrap; gap:28px; max-width:1100px; margin:0 auto; }
.impact-item { text-align:center; }
.impact-num   { font-family:var(--font-h); font-size:2.6rem; font-weight:700; color:var(--gold); line-height:1; }
.impact-label { font-size:.75rem; color:rgba(255,255,255,.65); text-transform:uppercase; letter-spacing:.09em; margin-top:6px; }

/* WWD Cards */
.wwd-card { border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border); background:#fff; display:flex; flex-direction:column; position:relative; }
.wwd-photo { width:100%; aspect-ratio:4/3; object-fit:cover; }
.wwd-icon-wrap { position:absolute; top:calc(33% - 22px); left:50%; transform:translateX(-50%); width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.1rem; border:3px solid #fff; }
.wwd-icon-wrap.teal  { background:var(--teal); }
.wwd-icon-wrap.coral { background:var(--coral); }
.wwd-icon-wrap.gold  { background:var(--gold); }
.wwd-body { padding:28px 16px 18px; flex:1; display:flex; flex-direction:column; }
.wwd-body h4 { font-family:var(--font-b); font-weight:700; font-size:.9rem; color:var(--navy); margin-bottom:8px; }
.wwd-body p  { font-size:.82rem; color:#4A5568; line-height:1.55; flex:1; }
.wwd-link { display:inline-flex; align-items:center; margin-top:12px; font-size:.8rem; font-weight:700; color:var(--gold); text-decoration:none; }

/* GET INVOLVED cols */
.gi-col { padding:28px 16px; border-right:1px solid rgba(255,255,255,.1); text-align:center; }
.gi-col:last-child { border-right:none; }
.gi-icon { width:58px; height:58px; border-radius:50%; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.gi-title { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:#fff; margin-bottom:8px; }
.gi-desc  { font-size:.8rem; color:rgba(255,255,255,.65); line-height:1.55; margin-bottom:12px; }
.gi-link  { font-size:.8rem; font-weight:700; color:var(--gold); text-decoration:none; }

/* CTA banner */
.cta-banner { background:var(--navy); padding:80px 24px; text-align:center; }
.cta-banner h2 { color:#fff; margin-bottom:14px; }
.cta-banner p  { color:rgba(255,255,255,.75); font-size:1rem; max-width:540px; margin:0 auto 36px; }
.cta-buttons   { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* Page hero */
.page-hero { background:var(--navy); padding:130px 24px 72px; text-align:center; }
.page-hero h1 { color:#fff; }
.page-hero p  { color:rgba(255,255,255,.75); font-size:1rem; max-width:560px; margin:14px auto 0; }
.page-hero .eyebrow { color:var(--gold); }

/* Service rows */
.service-row { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:60px 0; border-bottom:1px solid var(--border); }
.service-row:last-child { border-bottom:none; }
.service-image { background:var(--cream); border-radius:var(--r-lg); aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; font-size:4rem; }
.service-feature { display:flex; gap:10px; margin-bottom:10px; font-size:.9rem; color:#4A5568; align-items:flex-start; }
.service-feature::before { content:'✓'; width:20px; height:20px; border-radius:50%; background:rgba(45,106,106,.12); color:var(--teal); font-size:.7rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }

/* Events */
.event-card { display:grid; grid-template-columns:68px 1fr auto; gap:18px; align-items:center; padding:20px; border:1px solid var(--border); border-radius:var(--r-lg); margin-bottom:14px; transition:box-shadow .25s; }
.event-card:hover { box-shadow:var(--sh-md); }
.event-date { text-align:center; background:var(--navy); color:#fff; border-radius:var(--r-md); padding:10px 6px; }
.event-date .month { font-size:.64rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold); font-weight:700; }
.event-date .day   { font-size:1.6rem; font-weight:700; line-height:1; font-family:var(--font-h); }
.event-info h4 { margin-bottom:4px; font-size:.93rem; }
.event-info p  { font-size:.8rem; }
.event-tag { font-size:.68rem; font-weight:600; padding:4px 10px; border-radius:100px; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }
.tag-community { background:rgba(45,106,106,.1); color:var(--teal); }
.tag-workforce  { background:rgba(212,160,23,.15); color:#9a7200; }
.tag-volunteer  { background:rgba(192,57,43,.1); color:var(--coral); }

/* Get involved page */
.involve-card { background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:40px 28px; text-align:center; transition:transform .25s,box-shadow .25s; }
.involve-card:hover { transform:translateY(-4px); box-shadow:var(--sh-lg); }
.involve-card .big-icon { font-size:3rem; margin-bottom:20px; display:block; }
.involve-card p { margin-bottom:24px; }

/* Contact / forms */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-size:.875rem; font-weight:600; color:var(--navy); margin-bottom:6px; }
.form-control { width:100%; padding:11px 14px; border:1.5px solid var(--border); border-radius:var(--r-md); font-size:.9rem; font-family:var(--font-b); color:var(--navy); transition:border .2s; outline:none; background:#fff; }
.form-control:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(45,106,106,.1); }
textarea.form-control { min-height:130px; resize:vertical; }
select.form-control { appearance:none; cursor:pointer; }
.contact-icon { width:44px; height:44px; border-radius:var(--r-md); background:rgba(45,106,106,.1); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.contact-info-item { display:flex; gap:14px; margin-bottom:26px; }
.contact-info-item h4 { margin-bottom:3px; font-size:.95rem; }
.contact-info-item p  { font-size:.87rem; }

/* Donate */
.amount-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:18px; }
.amount-btn { padding:14px; border:2px solid var(--border); border-radius:var(--r-md); text-align:center; font-size:1rem; font-weight:700; font-family:var(--font-h); color:var(--navy); cursor:pointer; background:#fff; transition:all .2s; }
.amount-btn:hover,.amount-btn.selected { border-color:var(--teal); background:rgba(45,106,106,.06); color:var(--teal); }

/* Teams & values */
.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.team-grid   { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.team-card { text-align:center; padding:28px 18px; border:1px solid var(--border); border-radius:var(--r-lg); transition:transform .25s,box-shadow .25s; }
.team-card:hover { transform:translateY(-4px); box-shadow:var(--sh-lg); }
.team-avatar { width:76px; height:76px; border-radius:50%; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; font-size:1.7rem; }
.team-card p { font-size:.82rem; color:var(--teal); font-weight:600; }

/* Testimonial */
.testimonial-card { background:#fff; border-radius:var(--r-lg); padding:40px; box-shadow:var(--sh-md); display:grid; grid-template-columns:1fr 260px; gap:40px; align-items:center; max-width:960px; margin:0 auto; }
.testimonial-quote { font-family:var(--font-h); font-size:1.15rem; color:var(--navy); line-height:1.65; font-style:italic; margin-bottom:20px; }
.testimonial-author { font-weight:700; }
.testimonial-role   { font-size:.84rem; color:var(--gray); }

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width:1024px) {
  .grid-4    { grid-template-columns:repeat(2,1fr); }
  .team-grid { grid-template-columns:repeat(2,1fr); }
  .values-grid { grid-template-columns:repeat(2,1fr); }
  .amount-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:768px) {
  /* Nav */
  .nav-links,.nav-cta { display:none !important; }
  .hamburger { display:flex; }

  /* Layout */
  .section    { padding:52px 20px; }
  .section-sm { padding:38px 20px; }
  .section-header { margin-bottom:36px; }

  /* Hero */
  .hero-content { padding:100px 20px 60px; margin-left:0; max-width:100%; }
  .hero h1 { font-size:clamp(1.6rem,7vw,2.4rem); }
  .hero-sub { max-width:100%; font-size:.93rem; }
  .hero-buttons .btn { font-size:.75rem; padding:10px 15px; }
  .hero-overlay {
    background:linear-gradient(to bottom,
      rgba(13,27,52,.95) 0%,
      rgba(13,27,52,.88) 55%,
      rgba(13,27,52,.55) 100%) !important;
  }

  /* Grids stack */
  .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr !important; }
  .values-grid { grid-template-columns:repeat(2,1fr); }
  .contact-grid { grid-template-columns:1fr; gap:32px; }
  .service-row  { grid-template-columns:1fr; gap:24px; padding:40px 0; }

  /* Events */
  .event-card { grid-template-columns:56px 1fr; gap:14px; }
  .event-tag  { display:none; }

  /* Testimonial */
  .testimonial-card { grid-template-columns:1fr; gap:24px; padding:28px 20px; }

  /* Page hero */
  .page-hero { padding:100px 20px 52px; }

  /* Impact */
  .impact-num { font-size:2.2rem; }

  /* CTA */
  .cta-buttons { flex-direction:column; align-items:center; }
  .cta-buttons .btn { width:100%; justify-content:center; max-width:300px; }

  /* Footer grid */
  .footer-grid-custom { grid-template-columns:1fr 1fr !important; }

  /* GI cols */
  .gi-grid-4 { grid-template-columns:repeat(2,1fr) !important; }
}

@media (max-width:480px) {
  .hero h1 { font-size:clamp(1.45rem,8vw,2rem); }
  .hero-buttons .btn { width:100%; justify-content:center; }
  .values-grid,.team-grid { grid-template-columns:1fr; }
  .footer-grid-custom { grid-template-columns:1fr !important; }
  .amount-grid { grid-template-columns:repeat(2,1fr); }
  .page-hero h1 { font-size:clamp(1.35rem,8vw,1.9rem); }
  .gi-grid-4 { grid-template-columns:1fr !important; }
  .involve-card { padding:28px 18px; }
}