@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Montserrat:wght@400;500;600;700&family=Libre+Baskerville:ital@1&display=swap');

/* ══════════════════════════════════════════════
   DG25 — LIGHT THEME · FAITH IN ACTION
   Soft White backgrounds · Crimson Red accents
   Warm Gold highlights · Charcoal Black text
══════════════════════════════════════════════ */
:root {
  /* Light palette — Faith in Action inverted */
  --bg:              #FAFAF8;
  --bg-section:      #F5F3EF;
  --bg-card:         #FFFFFF;
  --bg-card-hover:   #FFFDF9;

  --red:             #C4161C;
  --red-hover:       #a81218;
  --red-light:       rgba(196,22,28,0.08);
  --red-border:      rgba(196,22,28,0.22);

  --gold:            #B8902E;   /* slightly deeper for light bg contrast */
  --gold-light:      rgba(184,144,46,0.12);
  --gold-border:     rgba(184,144,46,0.35);

  --text:            #1A1A1A;   /* near-charcoal */
  --text-sub:        #3D3D3D;
  --text-muted:      #777777;

  --border:          #E2DDD6;
  --border-strong:   #C8C0B5;

  --shadow-sm:   0 2px 12px rgba(0,0,0,0.07);
  --shadow-md:   0 6px 28px rgba(0,0,0,0.10);
  --shadow-lg:   0 14px 48px rgba(0,0,0,0.13);
  --shadow-red:  0 6px 24px rgba(196,22,28,0.18);

  --radius:      14px;
  --touch-min:   60px;
  --font-base:   20px;
  --font-large:  22px;
  --nav-h:       88px;

  /* Animation easing */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:var(--font-base); }
body {
  font-family:'Montserrat', sans-serif;
  background:var(--bg); color:var(--text);
  overflow-x:hidden; line-height:1.9;
  -webkit-text-size-adjust:100%;
}

/* ══════════════════════════════════════════════
   SKIP LINK
══════════════════════════════════════════════ */
.skip-link {
  position:absolute; top:-80px; left:16px;
  background:var(--red); color:#fff;
  padding:16px 24px; border-radius:8px;
  font-size:18px; font-weight:700;
  text-decoration:none; z-index:9999; transition:top 0.2s;
}
.skip-link:focus { top:16px; }

/* ══════════════════════════════════════════════
   SCROLL REVEAL — base state
   JS adds .revealed when element enters viewport
══════════════════════════════════════════════ */
.reveal {
  opacity:0;
  transform:translateY(32px);
  transition:opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}
.reveal.revealed {
  opacity:1;
  transform:translateY(0);
}
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }
.reveal-delay-4 { transition-delay:0.4s; }

/* ══════════════════════════════════════════════
   NAV — light version
══════════════════════════════════════════════ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(250,250,248,0.94);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:2px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 48px; height:var(--nav-h);
  box-shadow:0 2px 20px rgba(0,0,0,0.06);
  transition:box-shadow 0.3s, background 0.3s;
}
nav.scrolled {
  box-shadow:0 4px 32px rgba(0,0,0,0.10);
  border-bottom-color:var(--red);
}
.nav-logo {
  display:flex; align-items:center; gap:14px;
  text-decoration:none; min-height:var(--touch-min);
  transition:opacity 0.2s;
}
.nav-logo:hover { opacity:0.85; }
.nav-logo img {
  width:56px; height:56px; border-radius:50%;
  box-shadow:0 2px 12px rgba(196,22,28,0.18);
  flex-shrink:0;
}
.nav-logo-text { display:flex; flex-direction:column; line-height:1.25; }
.logo-name   { font-family:'Playfair Display',serif; font-weight:700; font-size:18px; color:var(--text); }
.logo-church { font-size:11px; font-weight:700; color:var(--gold); letter-spacing:0.12em; text-transform:uppercase; }

.nav-links { display:flex; align-items:center; gap:2px; list-style:none; }
.nav-links a {
  text-decoration:none; color:var(--text-sub);
  font-size:13px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase;
  padding:14px 16px; border-radius:8px;
  transition:color 0.2s, background 0.2s;
  display:flex; align-items:center; min-height:var(--touch-min);
  position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:8px; left:16px; right:16px;
  height:2px; background:var(--red); border-radius:2px;
  transform:scaleX(0); transform-origin:center;
  transition:transform 0.25s var(--ease-out);
}
.nav-links a:hover { color:var(--red); background:var(--red-light); }
.nav-links a:hover::after { transform:scaleX(1); }
.nav-links a.active { color:var(--red); }
.nav-links a.active::after { transform:scaleX(1); }
.nav-links a:focus {
  outline:3px solid var(--gold); outline-offset:2px;
}
.nav-cta {
  background:var(--red) !important; color:#fff !important;
  border-radius:8px; padding:14px 26px !important;
  box-shadow:var(--shadow-red);
  transition:background 0.2s, transform 0.2s, box-shadow 0.2s !important;
}
.nav-cta::after { display:none !important; }
.nav-cta:hover {
  background:var(--red-hover) !important;
  transform:translateY(-1px) !important;
  box-shadow:0 8px 28px rgba(196,22,28,0.28) !important;
}
.nav-cta:focus { outline-color:#fff !important; }

/* HAMBURGER */
.nav-hamburger {
  display:none;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:52px; height:52px; border-radius:8px;
  background:transparent; border:2px solid var(--border-strong);
  cursor:pointer; padding:10px;
  transition:background 0.2s, border-color 0.2s;
  flex-shrink:0;
}
.nav-hamburger:hover, .nav-hamburger:focus {
  background:var(--red-light); border-color:var(--red);
  outline:3px solid var(--gold); outline-offset:2px;
}
.nav-hamburger span {
  display:block; width:22px; height:2px;
  background:var(--text); border-radius:2px;
  transition:transform 0.3s, opacity 0.3s;
}
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* MOBILE DRAWER */
.nav-drawer {
  display:none;
  position:fixed; top:var(--nav-h); left:0; right:0; bottom:0;
  background:#FAFAF8; z-index:999;
  padding:16px 0 40px; overflow-y:auto;
  border-top:2px solid var(--red);
  animation:drawerIn 0.25s var(--ease-out);
}
@keyframes drawerIn { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }
.nav-drawer.open { display:block; }
.nav-drawer ul { list-style:none; padding:8px 20px; }
.nav-drawer ul li a {
  display:flex; align-items:center;
  text-decoration:none; color:var(--text);
  font-size:20px; font-weight:700; letter-spacing:0.04em;
  padding:22px 20px; border-radius:10px;
  border-bottom:1px solid var(--border);
  transition:background 0.2s, color 0.2s;
  min-height:72px;
}
.nav-drawer ul li:last-child a { border-bottom:none; }
.nav-drawer ul li a:hover, .nav-drawer ul li a:focus {
  background:var(--red-light); color:var(--red);
  outline:3px solid var(--gold); outline-offset:-2px;
}
.nav-drawer ul li a.active { color:var(--red); font-weight:700; }
.nav-drawer-cta {
  display:block; margin:20px 20px 0;
  background:var(--red); color:#fff !important;
  text-align:center; border-radius:10px;
  font-size:20px !important; font-weight:700 !important;
  padding:24px 20px !important; min-height:72px;
  box-shadow:var(--shadow-red); text-decoration:none;
  transition:background 0.2s;
}
.nav-drawer-cta:hover, .nav-drawer-cta:focus {
  background:var(--red-hover) !important;
  outline:3px solid var(--red) !important; outline-offset:3px !important;
}

/* ══════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════ */
main { padding-top:var(--nav-h); min-height:100vh; }

/* ══════════════════════════════════════════════
   HERO — light version with geometric accent
══════════════════════════════════════════════ */
.hero {
  position:relative; min-height:calc(100vh - var(--nav-h));
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg, #FFFBF5 0%, #F5EDE0 40%, #FBF5F0 100%);
  overflow:hidden;
}
/* Decorative background cross-hatch */
.hero-texture {
  position:absolute; inset:0; pointer-events:none; opacity:0.035;
  background-image:repeating-linear-gradient(0deg,#C4161C 0,#C4161C 1px,transparent 0,transparent 40px),
                   repeating-linear-gradient(90deg,#C4161C 0,#C4161C 1px,transparent 0,transparent 40px);
}
/* Red accent bar left edge */
.hero::before {
  content:''; position:absolute; left:0; top:15%; bottom:15%;
  width:5px; background:linear-gradient(to bottom, transparent, var(--red), transparent);
  border-radius:0 4px 4px 0;
}
/* Gold circle accent */
.hero::after {
  content:''; position:absolute; right:-120px; top:-120px;
  width:480px; height:480px; border-radius:50%;
  border:2px solid rgba(184,144,46,0.15);
  pointer-events:none;
}
.hero-content {
  text-align:center; max-width:900px; padding:80px 40px;
  position:relative; z-index:2;
  animation:heroIn 0.9s var(--ease-out) both;
}
@keyframes heroIn { from{opacity:0;transform:translateY(36px)} to{opacity:1;transform:translateY(0)} }
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:14px;
  font-size:12px; font-weight:700; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--gold); margin-bottom:28px;
}
.hero-eyebrow::before, .hero-eyebrow::after {
  content:''; width:32px; height:2px; background:var(--gold);
}
.hero-logo {
  width:120px; height:120px; border-radius:50%; margin:0 auto 32px;
  box-shadow:0 0 0 6px rgba(196,22,28,0.08), var(--shadow-md);
  transition:transform 0.4s var(--ease-spring), box-shadow 0.4s;
}
.hero-logo:hover {
  transform:scale(1.06);
  box-shadow:0 0 0 8px rgba(196,22,28,0.12), var(--shadow-lg);
}
.hero h1 {
  font-family:'Playfair Display',serif;
  font-size:clamp(42px,6vw,82px); font-weight:900; line-height:1.05;
  color:var(--text); margin-bottom:12px;
}
.hero h1 span { color:var(--red); }
.hero-location {
  font-size:13px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:24px;
}
.hero-tagline {
  font-family:'Libre Baskerville',serif; font-style:italic;
  font-size:24px; color:var(--gold); margin-bottom:10px;
}
.hero-scripture { font-size:14px; letter-spacing:0.1em; color:var(--text-muted); margin-bottom:52px; }

/* ANIMATED STATS */
.hero-stats {
  display:flex; justify-content:center; gap:56px; margin-bottom:52px; flex-wrap:wrap;
}
.hero-stat { text-align:center; }
.hero-stat-num {
  font-family:'Playfair Display',serif; font-size:54px; font-weight:700;
  color:var(--red); display:block; line-height:1;
  transition:transform 0.3s var(--ease-spring);
}
.hero-stat:hover .hero-stat-num { transform:scale(1.12); }
.hero-stat-label {
  font-size:12px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--text-muted); margin-top:8px; display:block;
}
.hero-divider { width:1px; background:var(--border-strong); align-self:stretch; }
.hero-btns { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }

/* ══════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════ */
.btn-primary {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--red); color:#fff;
  font-size:17px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase;
  padding:22px 52px; border-radius:10px; text-decoration:none; border:none; cursor:pointer;
  transition:background 0.2s, transform 0.2s var(--ease-spring), box-shadow 0.2s;
  min-height:var(--touch-min); box-shadow:var(--shadow-red);
  position:relative; overflow:hidden;
}
/* Shimmer effect on hover */
.btn-primary::before {
  content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition:left 0.5s;
}
.btn-primary:hover::before { left:140%; }
.btn-primary:hover, .btn-primary:focus {
  background:var(--red-hover); transform:translateY(-3px);
  box-shadow:0 10px 32px rgba(196,22,28,0.28);
  outline:3px solid var(--red); outline-offset:3px;
}
.btn-primary:active { transform:translateY(-1px); }

.btn-secondary {
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:var(--text);
  font-size:17px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase;
  padding:21px 52px; border-radius:10px; text-decoration:none;
  border:2px solid var(--border-strong); cursor:pointer;
  transition:all 0.2s var(--ease-out); min-height:var(--touch-min);
}
.btn-secondary:hover, .btn-secondary:focus {
  border-color:var(--gold); color:var(--gold); transform:translateY(-2px);
  background:var(--gold-light); box-shadow:0 6px 20px rgba(184,144,46,0.18);
  outline:3px solid var(--gold); outline-offset:2px;
}

.btn-outline-dark {
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:var(--text-sub);
  font-size:17px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase;
  padding:21px 52px; border-radius:10px; text-decoration:none;
  border:2px solid var(--border-strong); cursor:pointer;
  transition:all 0.2s; min-height:var(--touch-min);
}
.btn-outline-dark:hover, .btn-outline-dark:focus {
  border-color:var(--gold); color:var(--gold);
  background:var(--gold-light);
  outline:3px solid var(--gold); outline-offset:2px;
}

/* ══════════════════════════════════════════════
   EVENT BANNER
══════════════════════════════════════════════ */
.event-banner {
  background:var(--red); color:#fff;
  padding:24px 48px;
  display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.event-banner::before {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,0.04) 0,rgba(255,255,255,0.04) 1px,transparent 1px,transparent 60px);
  pointer-events:none;
}
.event-banner-label {
  font-size:11px; font-weight:700; letter-spacing:0.24em; text-transform:uppercase;
  color:rgba(255,255,255,0.75); white-space:nowrap;
  background:rgba(255,255,255,0.15); padding:6px 14px; border-radius:20px;
}
.event-banner-title { font-family:'Playfair Display',serif; font-size:21px; font-weight:700; color:#fff; }
.event-banner-date  { font-size:15px; color:rgba(255,255,255,0.85); font-weight:600; }
.event-banner-cta {
  background:#fff; border:none; color:var(--red);
  font-size:14px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  padding:14px 26px; border-radius:8px; text-decoration:none;
  transition:all 0.2s var(--ease-spring); white-space:nowrap;
  display:inline-flex; align-items:center; min-height:var(--touch-min);
  box-shadow:0 3px 12px rgba(0,0,0,0.15);
}
.event-banner-cta:hover, .event-banner-cta:focus {
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 6px 20px rgba(0,0,0,0.2);
  outline:3px solid #fff; outline-offset:3px;
}

/* ══════════════════════════════════════════════
   SECTIONS
══════════════════════════════════════════════ */
section { padding:96px 56px; }
.section-eyebrow {
  font-size:12px; font-weight:700; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--gold); margin-bottom:16px; display:block;
}
.section-title {
  font-family:'Playfair Display',serif;
  font-size:clamp(32px,4.5vw,56px); font-weight:700; line-height:1.08;
  color:var(--text); margin-bottom:24px;
}
.section-title span { color:var(--red); }
.section-body { font-size:var(--font-large); line-height:1.9; color:var(--text-sub); max-width:720px; }
.red-rule { width:60px; height:4px; background:var(--red); border-radius:2px; margin-bottom:28px; }

/* ══════════════════════════════════════════════
   PAGE HEADER
══════════════════════════════════════════════ */
.page-header {
  background:linear-gradient(135deg, #FFF8F0 0%, #F5EDE0 60%, #FBF5F0 100%);
  padding:96px 56px 72px; border-bottom:2px solid var(--border);
  position:relative; overflow:hidden;
}
.page-header::after {
  content:''; position:absolute; right:-80px; bottom:-80px;
  width:320px; height:320px; border-radius:50%;
  border:2px solid rgba(196,22,28,0.06); pointer-events:none;
}
.page-header .section-eyebrow { color:var(--gold); }
.page-header .section-title   { color:var(--text); }
.page-header .section-title span { color:var(--red); }
.page-header .section-body    { color:var(--text-sub); }
.page-header .red-rule        { background:var(--gold); }

/* ══════════════════════════════════════════════
   PARTNER CARDS — interactive lift
══════════════════════════════════════════════ */
.partners-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:24px; margin-top:64px;
}
.partner-card {
  background:var(--bg-card); padding:44px 36px;
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-spring), border-color 0.3s;
  position:relative; overflow:hidden; cursor:default;
}
.partner-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--red), var(--gold));
  transform:scaleX(0); transform-origin:left; transition:transform 0.35s var(--ease-out);
}
.partner-card:hover {
  box-shadow:var(--shadow-lg); transform:translateY(-6px);
  border-color:var(--red-border);
}
.partner-card:hover::before { transform:scaleX(1); }
.partner-icon  { font-size:38px; margin-bottom:18px; display:block; transition:transform 0.3s var(--ease-spring); }
.partner-card:hover .partner-icon { transform:scale(1.15); }
.partner-name  { font-family:'Playfair Display',serif; font-size:23px; font-weight:700; color:var(--text); margin-bottom:14px; line-height:1.2; }
.partner-desc  { font-size:var(--font-large); line-height:1.85; color:var(--text-sub); margin-bottom:24px; }
.partner-link  {
  font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--red); text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
  border-bottom:2px solid transparent; padding-bottom:2px;
  transition:gap 0.2s, border-color 0.2s;
  min-height:44px; line-height:44px;
}
.partner-link:hover, .partner-link:focus {
  border-color:var(--red); gap:10px;
  outline:3px solid var(--gold); outline-offset:4px; border-radius:2px;
}

/* ══════════════════════════════════════════════
   EVENTS / CALENDAR
══════════════════════════════════════════════ */
.quarter-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:56px; }
.quarter-block {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:44px 36px; box-shadow:var(--shadow-sm);
  transition:box-shadow 0.25s;
}
.quarter-block:hover { box-shadow:var(--shadow-md); }
.quarter-label { font-size:11px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--red); margin-bottom:8px; display:block; }
.quarter-title { font-family:'Playfair Display',serif; font-size:26px; font-weight:700; color:var(--text); margin-bottom:24px; padding-bottom:18px; border-bottom:2px solid var(--border); }
.event-item { display:flex; gap:20px; padding:20px 0; border-bottom:1px solid var(--border); transition:background 0.2s; border-radius:8px; padding-left:8px; margin-left:-8px; }
.event-item:last-child { border-bottom:none; }
.event-item:hover { background:var(--red-light); }
.event-date-block {
  min-width:68px; text-align:center; background:var(--red-light);
  border:1px solid var(--red-border); border-radius:10px;
  padding:10px 6px; height:fit-content; flex-shrink:0;
  transition:background 0.2s, border-color 0.2s;
}
.event-item:hover .event-date-block { background:var(--red); border-color:var(--red); }
.event-month { font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--red); display:block; transition:color 0.2s; }
.event-item:hover .event-month { color:#fff; }
.event-day   { font-family:'Playfair Display',serif; font-size:28px; font-weight:700; color:var(--text); display:block; line-height:1; transition:color 0.2s; }
.event-item:hover .event-day { color:#fff; }
.event-info-title { font-size:var(--font-base); font-weight:700; color:var(--text); margin-bottom:5px; line-height:1.3; }
.event-info-desc  { font-size:16px; color:var(--text-sub); line-height:1.8; }
.event-tag { display:inline-block; font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:5px 12px; border-radius:20px; margin-top:8px; }
.tag-community { background:var(--red-light); color:var(--red); }
.tag-fellowship { background:var(--gold-light); color:var(--gold); }
.tag-spiritual  { background:rgba(26,26,26,0.06); color:var(--text-muted); }

/* ══════════════════════════════════════════════
   ABOUT
══════════════════════════════════════════════ */
.mission-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.mission-block {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:52px 44px; box-shadow:var(--shadow-sm);
  transition:box-shadow 0.3s, transform 0.3s var(--ease-spring);
}
.mission-block:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); }
.mission-block-label { font-size:12px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; display:block; }
.mission-block-text  { font-family:'Playfair Display',serif; font-size:22px; line-height:1.7; color:var(--text); font-weight:400; }
.officers-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:44px; }
.officer-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:10px;
  padding:32px 24px; box-shadow:var(--shadow-sm);
  transition:box-shadow 0.25s, transform 0.25s var(--ease-spring), border-color 0.25s;
  border-top:4px solid var(--red); cursor:default;
}
.officer-card:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:var(--red); }
.officer-role { font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; display:block; }
.officer-name { font-family:'Playfair Display',serif; font-size:20px; font-weight:700; color:var(--text); }
.structure-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; margin-top:44px; }
.structure-block {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:40px 32px; box-shadow:var(--shadow-sm);
  transition:box-shadow 0.25s, transform 0.25s;
}
.structure-block:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.structure-num   { font-family:'Playfair Display',serif; font-size:52px; font-weight:900; color:rgba(196,22,28,0.09); line-height:1; margin-bottom:18px; display:block; }
.structure-title { font-size:var(--font-base); font-weight:700; color:var(--text); margin-bottom:12px; }
.structure-desc  { font-size:17px; color:var(--text-sub); line-height:1.85; }

/* ══════════════════════════════════════════════
   NEWSLETTER
══════════════════════════════════════════════ */
.newsletter-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:44px; }
.newsletter-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:44px 36px; box-shadow:var(--shadow-sm);
  transition:box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-spring);
  position:relative; overflow:hidden;
}
.newsletter-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--red), var(--gold));
  transform:scaleX(0); transform-origin:left; transition:transform 0.35s var(--ease-out);
}
.newsletter-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-5px); }
.newsletter-card:hover::after { transform:scaleX(1); }
.newsletter-issue   { font-size:11px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; display:block; }
.newsletter-month   { font-family:'Playfair Display',serif; font-size:32px; font-weight:700; color:var(--text); margin-bottom:4px; }
.newsletter-year    { font-size:16px; color:var(--text-muted); margin-bottom:18px; }
.newsletter-preview { font-size:17px; line-height:1.85; color:var(--text-sub); margin-bottom:24px; }
.newsletter-download {
  font-size:15px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:#fff; background:var(--red); text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  padding:15px 26px; border-radius:8px;
  transition:background 0.2s, transform 0.2s var(--ease-spring), box-shadow 0.2s;
  min-height:var(--touch-min); box-shadow:var(--shadow-red);
}
.newsletter-download:hover, .newsletter-download:focus {
  background:var(--red-hover); transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(196,22,28,0.28);
  outline:3px solid var(--gold); outline-offset:3px;
}

/* ══════════════════════════════════════════════
   FORMS
══════════════════════════════════════════════ */
.submit-section { padding:96px 56px; background:var(--bg-section); }
.submit-inner   { max-width:800px; }
.submit-callout {
  background:var(--bg-card); border:1px solid var(--border);
  border-left:5px solid var(--gold); border-radius:0 var(--radius) var(--radius) 0;
  padding:28px 32px; margin-bottom:48px; box-shadow:var(--shadow-sm);
}
.submit-callout p { font-family:'Libre Baskerville',serif; font-style:italic; font-size:20px; line-height:1.75; color:var(--text-sub); }
.form-group  { margin-bottom:32px; }
.form-label  { display:block; font-size:14px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-sub); margin-bottom:10px; }
.form-input, .form-textarea {
  width:100%; background:#fff; border:2px solid var(--border); border-radius:10px;
  color:var(--text); font-family:'Montserrat',sans-serif;
  font-size:var(--font-base); padding:18px 22px;
  transition:border-color 0.2s, box-shadow 0.2s; outline:none; line-height:1.6;
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.04);
}
.form-input:focus, .form-textarea:focus {
  border-color:var(--red); box-shadow:0 0 0 4px rgba(196,22,28,0.1);
}
.form-textarea { min-height:240px; resize:vertical; }
.form-input::placeholder, .form-textarea::placeholder { color:#ABABAB; }
.form-file-area {
  width:100%; background:#fff; border:2px dashed var(--border-strong); border-radius:10px;
  padding:52px 32px; text-align:center; cursor:pointer;
  transition:border-color 0.2s, background 0.2s; position:relative;
}
.form-file-area:hover { border-color:var(--gold); background:var(--gold-light); }
.form-file-area input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.file-icon  { font-size:44px; margin-bottom:14px; display:block; }
.file-label { font-size:var(--font-base); color:var(--text-sub); line-height:1.5; }
.file-label strong { color:var(--red); }
.form-note  { font-size:15px; color:var(--text-muted); margin-top:10px; line-height:1.7; }
.form-submit {
  background:var(--red); color:#fff;
  font-family:'Montserrat',sans-serif; font-size:var(--font-base); font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase;
  padding:22px 40px; border:none; border-radius:10px; cursor:pointer;
  transition:background 0.2s, transform 0.2s var(--ease-spring), box-shadow 0.2s;
  width:100%; margin-top:16px; min-height:68px;
  box-shadow:var(--shadow-red);
  display:flex; align-items:center; justify-content:center; gap:12px;
}
.form-submit:hover:not(:disabled), .form-submit:focus:not(:disabled) {
  background:var(--red-hover); transform:translateY(-2px);
  box-shadow:0 10px 32px rgba(196,22,28,0.28);
  outline:3px solid var(--gold); outline-offset:3px;
}
.form-submit:active:not(:disabled) { transform:translateY(0); }
.form-submit:disabled { background:#CCCCCC; color:#888; cursor:not-allowed; box-shadow:none; transform:none; }
.spinner { width:22px; height:22px; border:3px solid rgba(255,255,255,0.3); border-top-color:#fff; border-radius:50%; animation:spin 0.8s linear infinite; display:none; flex-shrink:0; }
@keyframes spin { to { transform:rotate(360deg); } }
.form-submit.loading .spinner   { display:block; }
.form-submit.loading .btn-label { opacity:0.8; }
.submit-success { display:none; background:rgba(46,125,50,0.08); border:2px solid #4caf50; border-radius:10px; padding:28px; margin-top:24px; text-align:center; }
.submit-success p { font-size:var(--font-base); color:#2e7d32; font-weight:700; line-height:1.7; }
.submit-error { display:none; background:var(--red-light); border:2px solid var(--red); border-radius:10px; padding:28px; margin-top:24px; text-align:center; }
.submit-error p { font-size:17px; color:var(--red); font-weight:600; line-height:1.7; }

/* ══════════════════════════════════════════════
   GET INVOLVED
══════════════════════════════════════════════ */
.involve-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.involve-block {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:48px 40px;
  box-shadow:var(--shadow-sm); border-top:4px solid var(--red);
  transition:box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-spring);
}
.involve-block:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); }
.involve-block-icon  { font-size:42px; margin-bottom:20px; display:block; transition:transform 0.3s var(--ease-spring); }
.involve-block:hover .involve-block-icon { transform:scale(1.12) rotate(-3deg); }
.involve-block-title { font-family:'Playfair Display',serif; font-size:27px; font-weight:700; color:var(--text); margin-bottom:16px; line-height:1.2; }
.involve-block-body  { font-size:var(--font-large); line-height:1.9; color:var(--text-sub); margin-bottom:24px; }
.realm-steps       { background:var(--bg-section); border:1px solid var(--border); border-radius:10px; padding:24px 28px; margin-top:20px; }
.realm-steps-title { font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); margin-bottom:18px; display:block; }
.realm-step        { display:flex; gap:14px; margin-bottom:16px; align-items:flex-start; }
.realm-step:last-child { margin-bottom:0; }
.realm-step-num    { min-width:36px; height:36px; background:var(--red); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; color:#fff; flex-shrink:0; }
.realm-step-text   { font-size:17px; color:var(--text-sub); line-height:1.65; padding-top:6px; }

/* ══════════════════════════════════════════════
   CONTACT
══════════════════════════════════════════════ */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:52px; }
.contact-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:40px; box-shadow:var(--shadow-sm);
  transition:box-shadow 0.25s, transform 0.25s var(--ease-spring);
}
.contact-card:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); }
.contact-role  { font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--red); margin-bottom:8px; display:block; }
.contact-name  { font-family:'Playfair Display',serif; font-size:23px; font-weight:700; color:var(--text); margin-bottom:12px; }
.contact-email {
  font-size:17px; color:var(--red); font-weight:700; text-decoration:none;
  border-bottom:2px solid transparent; transition:border-color 0.2s;
  display:inline-block; min-height:44px; line-height:44px;
}
.contact-email:hover, .contact-email:focus {
  border-color:var(--red);
  outline:3px solid var(--gold); outline-offset:4px; border-radius:2px;
}

/* ══════════════════════════════════════════════
   INFO CALLOUT & SIDEBAR
══════════════════════════════════════════════ */
.info-callout {
  background:var(--bg-card); border:1px solid var(--border);
  border-left:5px solid var(--gold); border-radius:0 var(--radius) var(--radius) 0;
  padding:28px 32px; max-width:740px; box-shadow:var(--shadow-sm); margin-top:44px;
}
.info-callout p { font-size:var(--font-large); color:var(--text-sub); line-height:1.85; }
.sidebar-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:40px 32px;
  position:sticky; top:108px; box-shadow:var(--shadow-sm);
}
.sidebar-item { margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid var(--border); }
.sidebar-item:last-child { margin-bottom:0; padding-bottom:0; border-bottom:none; }
.sidebar-item-title { font-size:15px; font-weight:700; color:var(--text); margin-bottom:8px; }
.sidebar-item-text  { font-size:var(--font-large); color:var(--text-sub); line-height:1.8; }

/* ══════════════════════════════════════════════
   UPCOMING EVENTS
══════════════════════════════════════════════ */
.upcoming-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px; margin-top:0;
}
.upcoming-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden;
  transition:box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-spring);
}
.upcoming-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-6px); }
.upcoming-date-bar {
  background:var(--red); padding:18px 22px;
  display:flex; align-items:baseline; gap:10px;
  position:relative; overflow:hidden;
}
.upcoming-date-bar::after {
  content:''; position:absolute; right:-16px; top:-16px;
  width:64px; height:64px; border-radius:50%;
  background:rgba(255,255,255,0.08);
}
.upcoming-month { font-size:12px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.8); }
.upcoming-day   { font-family:'Playfair Display',serif; font-size:44px; font-weight:900; color:#fff; line-height:1; }
.upcoming-card-body { padding:24px 24px 32px; }
.upcoming-tag   { display:inline-block; font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:5px 12px; border-radius:20px; margin-bottom:12px; }
.upcoming-title { font-family:'Playfair Display',serif; font-size:20px; font-weight:700; color:var(--text); margin-bottom:10px; line-height:1.3; }
.upcoming-desc  { font-size:17px; line-height:1.8; color:var(--text-sub); margin-bottom:18px; }
.upcoming-cta   {
  font-size:14px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--red); text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
  transition:gap 0.2s; min-height:44px; line-height:44px;
}
.upcoming-cta:hover, .upcoming-cta:focus {
  gap:10px;
  outline:3px solid var(--gold); outline-offset:4px; border-radius:2px;
}

/* ══════════════════════════════════════════════
   FOOTER — light version
══════════════════════════════════════════════ */
footer {
  background:var(--text); color:#F5F5F5;
  border-top:4px solid var(--red);
  padding:60px 56px; display:flex; align-items:center;
  justify-content:space-between; flex-wrap:wrap; gap:28px;
}
.footer-left    { display:flex; align-items:center; gap:18px; }
.footer-logo    { width:56px; height:56px; border-radius:50%; }
.footer-text    { font-size:16px; color:rgba(245,245,245,0.65); line-height:1.85; }
.footer-text strong { color:#F5F5F5; font-weight:700; }
.footer-text a  { color:#C9A44C; text-decoration:none; font-weight:600; }
.footer-text a:hover { text-decoration:underline; }
.footer-right   { text-align:right; }
.footer-scripture { font-family:'Libre Baskerville',serif; font-style:italic; font-size:16px; color:#C9A44C; line-height:1.65; }
.footer-asbc    { font-size:13px; color:rgba(245,245,245,0.3); margin-top:8px; }

/* Scrollbar */
::-webkit-scrollbar       { width:7px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--red); }

/* Focus visible */
:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }

/* ══════════════════════════════════════════════
   SCROLL REVEAL — JS animation classes
══════════════════════════════════════════════ */
.reveal {
  opacity:0; transform:translateY(28px);
  transition:opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.reveal.revealed { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:0.08s; }
.reveal-delay-2 { transition-delay:0.16s; }
.reveal-delay-3 { transition-delay:0.24s; }
.reveal-delay-4 { transition-delay:0.32s; }
.reveal-delay-5 { transition-delay:0.40s; }

/* ══════════════════════════════════════════════
   BACK TO TOP BUTTON
══════════════════════════════════════════════ */
.back-to-top {
  position:fixed; bottom:32px; right:32px; z-index:900;
  width:52px; height:52px; border-radius:50%;
  background:var(--red); color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; box-shadow:var(--shadow-red);
  opacity:0; transform:translateY(16px) scale(0.9);
  transition:opacity 0.3s, transform 0.3s var(--ease-spring), background 0.2s;
  pointer-events:none;
}
.back-to-top.visible { opacity:1; transform:translateY(0) scale(1); pointer-events:all; }
.back-to-top:hover { background:var(--red-hover); transform:translateY(-3px) scale(1.05); }
.back-to-top:focus { outline:3px solid var(--gold); outline-offset:3px; }

/* ══════════════════════════════════════════════
   TABLET (max 980px)
══════════════════════════════════════════════ */
@media (max-width:980px) {
  :root { --font-base:21px; --font-large:23px; }
  nav { padding:0 24px; }
  .nav-links     { display:none; }
  .nav-hamburger { display:flex; }
  section { padding:72px 28px; }
  .page-header { padding:72px 28px 52px; }
  .submit-section { padding:72px 28px; }
  .quarter-grid, .mission-grid, .structure-grid,
  .newsletter-grid, .involve-grid, .contact-grid { grid-template-columns:1fr; }
  .hero-divider { display:none; }
  .hero-stats   { gap:32px; }
  .hero-content { padding:72px 28px; }
  .btn-secondary, .btn-outline-dark { margin-left:0; margin-top:0; }
  footer { flex-direction:column; text-align:center; padding:48px 28px; }
  .footer-right { text-align:center; }
  .footer-left  { justify-content:center; }
  .partners-grid { grid-template-columns:1fr; }
  .back-to-top { bottom:24px; right:20px; width:48px; height:48px; }
}

/* ══════════════════════════════════════════════
   MOBILE (max 600px)
══════════════════════════════════════════════ */
@media (max-width:600px) {
  :root { --font-base:20px; --font-large:22px; --nav-h:80px; }
  nav { padding:0 16px; }
  .nav-logo img { width:46px; height:46px; }
  .logo-name  { font-size:16px; }
  .logo-church{ font-size:10px; }
  section { padding:56px 16px; }
  .page-header { padding:56px 16px 40px; }
  .submit-section { padding:56px 16px; }
  .hero-content { padding:52px 16px; }
  .hero-tagline { font-size:20px; }
  .hero-logo    { width:96px; height:96px; }
  .hero-stats   { gap:20px; flex-direction:column; align-items:center; }
  .btn-primary, .btn-secondary, .btn-outline-dark { width:100%; padding:20px 20px; font-size:17px; margin-left:0; justify-content:center; }
  .hero-btns { flex-direction:column; width:100%; max-width:340px; margin:0 auto; }
  .event-banner { flex-direction:column; text-align:center; padding:20px 16px; gap:12px; }
  .event-banner-cta { width:100%; justify-content:center; }
  .newsletter-download { width:100%; justify-content:center; }
  .partner-card  { padding:32px 20px; }
  .involve-block { padding:36px 20px; }
  .officer-card  { padding:26px 18px; }
  .contact-card  { padding:28px 20px; }
  .mission-block { padding:36px 24px; }
  .structure-block { padding:32px 20px; }
  .quarter-block { padding:32px 20px; }
  .event-item    { flex-direction:column; gap:10px; }
  .event-date-block { min-width:auto; width:fit-content; display:flex; align-items:center; gap:8px; padding:8px 14px; }
  .event-day { font-size:22px; }
  .form-input, .form-textarea { padding:16px 14px; }
  footer { padding:36px 16px; }
  .footer-left { flex-direction:column; align-items:center; text-align:center; gap:10px; }
  .nav-drawer ul li a { font-size:21px; padding:22px 14px; }
  .nav-drawer-cta { font-size:21px !important; padding:24px 16px !important; margin:18px 16px 0; }
  .back-to-top { bottom:16px; right:12px; width:44px; height:44px; font-size:17px; }
}

/* ══════════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; }
}