/* ============================================
   HELP2SERVE.CARE — SHARED STYLESHEET
   Steward of ISV Legacy Programs
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,600;0,700;0,900;1,400&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── CSS VARIABLES ── */
:root {
  --green-deep:    #1B4332;
  --green-mid:     #2D6A4F;
  --green-bright:  #52B788;
  --green-light:   #95D5B2;
  --gold:          #E9C46A;
  --gold-dark:     #C9A84C;
  --ivory:         #F8F5F0;
  --ivory-dark:    #EEE9E0;
  --charcoal:      #1C2321;
  --text:          #2D3A35;
  --text-muted:    #5A6B62;
  --white:         #FFFFFF;
  --border:        #D4CFC5;
  --shadow-sm:     0 2px 12px rgba(27,67,50,0.08);
  --shadow-md:     0 8px 32px rgba(27,67,50,0.12);
  --shadow-lg:     0 16px 48px rgba(27,67,50,0.18);
  --radius-sm:     6px;
  --radius-md:     12px;
  --radius-lg:     20px;
  --radius-pill:   50px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ── TYPOGRAPHY ── */
h1, h2, h3 { font-family: 'Fraunces', serif; line-height: 1.1; color: var(--green-deep); }
h1 { font-size: clamp(2.2rem, 5.5vw, 4.2rem); font-weight: 900; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 700; }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 600; }
h4 { font-size: 1rem; font-weight: 700; color: var(--green-mid); letter-spacing: 0.1em; text-transform: uppercase; }
p { font-size: 1rem; color: var(--text-muted); line-height: 1.8; }

.display-serif { font-family: 'Fraunces', serif; }
.label-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-mid);
  margin-bottom: 12px;
}
.label-tag.gold { color: var(--gold-dark); }
.label-tag.white { color: rgba(255,255,255,0.75); }

.divider-line {
  width: 48px; height: 4px;
  background: var(--green-bright);
  border-radius: 2px;
  margin: 14px 0 22px;
}
.divider-line.gold { background: var(--gold); }

/* ── ANNOUNCEMENT BAR ── */
.announcement-bar {
  background: var(--green-deep);
  color: var(--gold);
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 10px 20px;
  position: relative;
  z-index: 201;
}
.announcement-bar a { color: var(--gold); text-decoration: underline; }

/* ── NAVIGATION ── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.nav-accent {
  height: 4px;
  background: linear-gradient(90deg, var(--green-deep) 0%, var(--green-mid) 35%, var(--green-bright) 65%, var(--gold) 100%);
}
.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* ── LOGO — HELP2SERVE.CARE PRIMARY ── */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo-img {
  height: 44px;
  width: auto;
  display: block;
}
.nav-logo-text .brand-main {
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--green-deep);
  line-height: 1.1;
}
.nav-logo-text .brand-sub {
  font-size: 0.58rem;
  color: var(--gold-dark);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-links a {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.nav-links a:hover { background: var(--ivory); color: var(--green-deep); }
.nav-links .has-dropdown { position: relative; }
.nav-links .has-dropdown > a::after { content: ' ▾'; font-size: 0.65rem; }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 220px;
  padding: 8px;
  display: none;
  z-index: 300;
}
.has-dropdown:hover .nav-dropdown { display: block; }
.nav-dropdown a {
  display: block;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.87rem;
  color: var(--text);
}
.nav-dropdown a:hover { background: var(--ivory); color: var(--green-deep); }
.btn-apply-nav {
  background: var(--green-deep) !important;
  color: var(--white) !important;
  padding: 9px 22px !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 600 !important;
  transition: background 0.2s, transform 0.15s !important;
}
.btn-apply-nav:hover { background: var(--green-mid) !important; transform: translateY(-1px); }
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
}
.hamburger span {
  width: 24px; height: 2px;
  background: var(--green-deep);
  border-radius: 2px;
  transition: all 0.3s;
  display: block;
}

/* ── BUTTONS ── */
.btn-primary {
  display: inline-block;
  background: var(--green-deep);
  color: var(--white);
  padding: 13px 30px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.92rem;
  font-family: 'DM Sans', sans-serif;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  text-decoration: none;
}
.btn-primary:hover {
  background: var(--green-mid);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(27,67,50,0.25);
}
.btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--green-deep);
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.92rem;
  border: 2px solid var(--green-deep);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.btn-secondary:hover { background: var(--green-deep); color: var(--white); }
.btn-gold {
  display: inline-block;
  background: var(--gold);
  color: var(--green-deep);
  padding: 13px 30px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.92rem;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  text-decoration: none;
}
.btn-gold:hover { background: var(--gold-dark); transform: translateY(-2px); }
.btn-outline-white {
  display: inline-block;
  background: transparent;
  color: var(--white);
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.92rem;
  border: 2px solid rgba(255,255,255,0.6);
  transition: all 0.2s;
  text-decoration: none;
}
.btn-outline-white:hover { background: rgba(255,255,255,0.15); border-color: white; }
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green-mid);
  font-weight: 600;
  font-size: 0.9rem;
  transition: gap 0.2s, color 0.2s;
}
.link-arrow::after { content: '→'; }
.link-arrow:hover { gap: 10px; color: var(--green-deep); }

/* ── LAYOUT HELPERS ── */
.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.section { padding: 80px 0; }
.section-sm { padding: 48px 0; }
.section-lg { padding: 100px 0; }
.section-ivory { background: var(--ivory); }
.section-green { background: var(--green-deep); }
.section-dark { background: var(--charcoal); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }

/* ── HERO — FIXED z-index so buttons are always above CTA panels ── */
.hero {
  position: relative;
  min-height: 88vh;
  background: linear-gradient(160deg, var(--green-deep) 0%, #2A5741 50%, #1E4F3A 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding-bottom: 160px; /* space for CTA cards */
}
.hero-bg-photo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 35%;
  opacity: 0.32;
}
.hero-pattern {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 15% 85%, rgba(82,183,136,0.2) 0%, transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(233,196,106,0.12) 0%, transparent 45%),
    radial-gradient(circle at 55% 55%, rgba(255,255,255,0.03) 0%, transparent 40%);
}
.hero-grid-overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 64px 64px;
}
.hero-content {
  position: relative;
  z-index: 4; /* FIXED: above CTA cards which are z-index 3 */
  max-width: 880px;
  padding: 0 24px;
  animation: heroFadeIn 1s ease both;
}
.hero-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.95);
  border: 1px solid rgba(255,255,255,0.5);
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  margin-bottom: 24px;
}
.hero h1 {
  color: var(--white);
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  font-weight: 900;
  line-height: 1.05;
  margin-bottom: 24px;
}
.hero h1 em { font-style: normal; color: var(--gold); }
.hero p.hero-sub {
  font-size: clamp(1rem, 1.8vw, 1.18rem);
  color: rgba(255,255,255,0.95);
  max-width: 620px;
  margin: 0 auto 36px;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.hero-btns {
  position: relative;
  z-index: 4; /* FIXED: explicitly above panels */
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.hero-since {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 12px;
  position: relative;
  z-index: 4;
}
/* CTA PANELS — FIXED z-index, sits below hero buttons */
.hero-cta-cards {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  z-index: 3; /* FIXED: below hero content z-index 4 */
}
.hero-cta-card {
  padding: 28px 32px 32px;
  text-decoration: none;
  display: block;
  position: relative;
  overflow: hidden;
  transition: filter 0.2s, transform 0.2s;
}
.hero-cta-card:hover { filter: brightness(1.1); transform: translateY(-3px); }
.hero-cta-card.c1 { background: var(--green-mid); }
.hero-cta-card.c2 { background: var(--green-deep); }
.hero-cta-card.c3 { background: #7D6025; }
.hero-cta-card p.card-label {
  color: rgba(255,255,255,0.65);
  font-size: 0.82rem;
  margin-top: 6px;
  font-weight: 300;
}
.hero-cta-card h3 {
  color: var(--white);
  font-size: 1.1rem;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
}
.hero-cta-card h3 strong { font-weight: 800; }

@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── STAT BAR — updated to 5 stats, no countries ── */
.stat-bar {
  background: var(--ivory-dark);
  border-bottom: 1px solid var(--border);
}
.stat-bar-inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px 32px;
  max-width: 1280px;
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 20px;
}
.stat-item { text-align: center; }
.stat-number {
  font-family: 'Fraunces', serif;
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--green-deep);
  line-height: 1;
}
.stat-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; letter-spacing: 0.06em; margin-top: 4px; }

/* ── PHOTO SECTIONS ── */
.photo-block {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--green-deep);
}
.photo-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── CARDS ── */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow 0.25s, transform 0.25s;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.card-img {
  height: 260px;
  background: var(--ivory);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  overflow: hidden;
  position: relative;
}
.card-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* ── Per-image position overrides (desktop) ── */
.card-img img[src="girldoingbloodpressureoutside.png"] { object-position: center 55%; }
.card-img img[src="dominicanrepublicvolunteershelpinggrowcoral1.png"] { object-position: center 60% !important; }
.card-img img[src="australiafirestickspinatnight.png"] { object-position: center 75% !important; }
.card-img img[src="austrailiavolunteergirlssurfing.png"] { object-fit: cover !important; object-position: center top !important; }
.card-img img[src="austrailiagreatbarrierreefdiving.png"] { object-fit: cover !important; }
@media (min-width: 601px) {
  .card-img img[src="Volunteerwithkids.png"] { object-fit: cover !important; object-position: center 20% !important; }
}


img[src="RuthAbebe_final.jpg"] { object-position: center top !important; }

.card-body { padding: 24px; }
.card-body h3 { margin-bottom: 10px; font-size: 1.1rem; color: var(--green-deep); }
.card-body p { font-size: 0.92rem; margin-bottom: 16px; }

/* ── PROGRAM CARDS (destination cards with photos) ── */
.program-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 340px;
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s;
}
.program-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.program-card-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.4s;
}
.program-card:hover .program-card-bg { transform: scale(1.04); }
.program-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(transparent 20%, rgba(15,40,25,0.85) 100%);
}
.program-card-content {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 28px;
  color: var(--white);
}
.program-card-tag {
  position: absolute; top: 18px; right: 18px;
  background: var(--gold);
  color: var(--green-deep);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}
/* When two status pills appear together (e.g. Enrolling Now + Early Planning),
   wrap them in .program-card-tag-stack. The wrapper takes the absolute position;
   each inner .program-card-tag-pill keeps the same visual pill styling. */
.program-card-tag-stack {
  position: absolute; top: 18px; right: 18px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  z-index: 2;
}
.program-card-tag-pill {
  background: var(--gold);
  color: var(--green-deep);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.program-card-content .flag { font-size: 1.6rem; margin-bottom: 8px; }
.program-card-content h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 4px; color: var(--white); }
.program-card-content p { font-size: 0.82rem; color: rgba(255,255,255,0.78); }

/* ── TESTIMONIAL CARDS ── */
.testimonial-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px;
  position: relative;
}
.testimonial-card::before {
  content: none;
}
.testimonial-card p { font-size: 0.95rem; line-height: 1.75; font-style: italic; margin-bottom: 16px; padding-top: 8px; }
.testimonial-card .author { font-weight: 700; font-size: 0.88rem; color: var(--green-deep); }
.testimonial-card .school { font-size: 0.8rem; color: var(--text-muted); }
.stars {
  color: var(--gold);
  font-size: 0.85rem;
  margin-bottom: 6px;
  display: block;
}
.stars::before {
  content: '\201C';
  font-family: 'Fraunces', serif;
  font-size: 2.8rem;
  color: var(--green-light);
  line-height: 0.8;
  display: block;
  margin-bottom: 4px;
}

/* ── APPLY HUB (new master apply page) ── */
.apply-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.apply-hub-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow 0.25s, transform 0.2s;
}
.apply-hub-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.apply-hub-card-photo {
  height: 200px;
  background: var(--green-deep);
  overflow: hidden;
  position: relative;
}
.apply-hub-card-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.apply-hub-card-body { padding: 24px; }
.apply-hub-card-body h3 { margin-bottom: 6px; font-size: 1.1rem; }
.status-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
}
.status-open { background: #D1FAE5; color: #065F46; }
.status-early { background: #FEF3C7; color: #92400E; }

/* ── FAQ ── */
.faq-item { border-top: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--green-deep);
  text-align: left;
  gap: 20px;
}
.faq-icon { font-size: 1.3rem; color: var(--green-bright); transition: transform 0.3s; flex-shrink: 0; }
.faq-question.open .faq-icon { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.3s; }
.faq-answer.open { max-height: 500px; padding-bottom: 20px; }
.faq-answer p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.8; }

/* ── CONNECT SECTION ── */
.connect-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.connect-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-md);
  padding: 32px;
  text-decoration: none;
  display: block;
  transition: background 0.2s, transform 0.2s;
}
.connect-card:hover { background: rgba(255,255,255,0.13); transform: translateY(-3px); }
.connect-card .cc-icon { font-size: 2rem; margin-bottom: 14px; }
.connect-card h3 { color: var(--green-light); font-size: 1.05rem; margin-bottom: 10px; font-family: 'DM Sans', sans-serif; }
.connect-card p { color: rgba(255,255,255,0.65); font-size: 0.9rem; }

/* ── PRICING BOX ── */
.pricing-highlight {
  background: var(--ivory);
  border: 2px solid var(--green-bright);
  border-radius: var(--radius-lg);
  padding: 40px;
  text-align: center;
}
.price-range {
  font-family: 'Fraunces', serif;
  font-size: 3rem;
  font-weight: 900;
  color: var(--green-deep);
  line-height: 1;
}
.price-note { font-size: 0.85rem; color: var(--text-muted); margin-top: 8px; }
.includes-list { list-style: none; text-align: left; margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.includes-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text);
}
.includes-list li::before { content: '✓'; color: var(--green-bright); font-weight: 700; flex-shrink: 0; }

/* ── FORM ── */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-field label { font-size: 0.82rem; font-weight: 600; color: var(--green-deep); }
.form-field input,
.form-field select,
.form-field textarea {
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  background: var(--white);
  transition: border-color 0.2s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--green-bright);
}
.form-field textarea { min-height: 100px; resize: vertical; }

/* ── COUNTDOWN ── */
.countdown-bar {
  background: linear-gradient(135deg, var(--green-deep), #1A5C3A);
  padding: 60px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.countdown-bar h2 { color: var(--white); margin-bottom: 8px; }
.countdown-bar p { color: rgba(255,255,255,0.7); max-width: 600px; margin: 0 auto 36px; }
.countdown-grid { display: flex; justify-content: center; gap: 20px; margin-bottom: 36px; }
.countdown-box {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-md);
  padding: 20px 28px;
  min-width: 90px;
  text-align: center;
}
.countdown-num {
  font-family: 'Fraunces', serif;
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
}
.countdown-unit { font-size: 0.7rem; color: rgba(255,255,255,0.6); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 4px; }

/* ── FOOTER — HELP2SERVE.CARE PRIMARY ── */
.site-footer { background: var(--green-deep); color: rgba(255,255,255,0.8); }
.footer-top {
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 32px 40px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
}
.footer-logo-img {
  height: 52px;
  width: auto;
  margin-bottom: 14px;
}
.footer-brand .brand-main { font-family: 'Fraunces', serif; font-size: 1.1rem; color: var(--white); font-weight: 700; }
.footer-brand .brand-sub { font-size: 0.6rem; color: var(--gold); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 2px; }
.footer-brand p { font-size: 0.85rem; color: rgba(255,255,255,0.55); margin-top: 14px; line-height: 1.7; }
.footer-brand .nonprofit-badge {
  display: inline-block;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  font-size: 0.7rem;
  color: var(--green-light);
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-top: 14px;
}
.footer-col h4 { color: var(--white); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; margin-bottom: 16px; font-family: 'DM Sans', sans-serif; }
.footer-col ul { display: flex; flex-direction: column; gap: 9px; }
.footer-col ul a { color: rgba(255,255,255,0.55); font-size: 0.87rem; transition: color 0.2s; }
.footer-col ul a:hover { color: var(--green-light); }
.footer-divider { border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 0 32px; }
.footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-bottom p { font-size: 0.78rem; color: rgba(255,255,255,0.35); }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { font-size: 0.78rem; color: rgba(255,255,255,0.4); transition: color 0.2s; }
.footer-links a:hover { color: rgba(255,255,255,0.8); }
.social-icons { display: flex; gap: 10px; }
.social-icons a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.55);
  font-size: 0.82rem;
  transition: all 0.2s;
  text-decoration: none;
}
.social-icons a:hover { background: rgba(82,183,136,0.2); border-color: var(--green-light); color: var(--green-light); }

/* ── PAGE HERO (interior pages) ── */
.page-hero {
  background: linear-gradient(135deg, var(--green-deep) 0%, #2D6A4F 100%);
  padding: 80px 0 60px;
  position: relative;
  overflow: hidden;
}
.page-hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.18;
}
.page-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 50%, rgba(233,196,106,0.08) 0%, transparent 60%);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero .label-tag { color: var(--green-light); }
.page-hero h1 { color: var(--white); font-size: clamp(2rem, 4vw, 3.2rem); }
.page-hero p { color: rgba(255,255,255,0.72); max-width: 560px; margin-top: 14px; }
.breadcrumb {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 20px;
}
.breadcrumb a { color: rgba(255,255,255,0.5); }
.breadcrumb a:hover { color: var(--green-light); }
.breadcrumb span { color: var(--green-light); }

/* ── CALLOUT QUOTE ── */
.callout-quote {
  background: var(--ivory);
  border-left: 5px solid var(--green-bright);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 32px 40px;
  margin: 40px 0;
}
.callout-quote p {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--green-deep);
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
}
.callout-quote .cite { font-size: 0.85rem; color: var(--text-muted); font-style: normal; margin-top: 10px; display: block; font-family: 'DM Sans', sans-serif; font-weight: 600; }

/* ── NEXT STEPS BAR ── */
.next-steps {
  background: var(--green-mid);
  padding: 48px 0;
}
.next-steps-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}
.next-steps h3 { color: var(--white); font-family: 'Fraunces', serif; font-size: 1.5rem; flex-shrink: 0; }
.next-steps-divider { width: 1px; height: 40px; background: rgba(255,255,255,0.25); flex-shrink: 0; }
.next-step-link { display: flex; flex-direction: column; }
.next-step-link a {
  color: var(--gold);
  font-weight: 700;
  font-size: 1.05rem;
  transition: color 0.2s;
}
.next-step-link a:hover { color: var(--white); }
.next-step-link span { color: rgba(255,255,255,0.55); font-size: 0.8rem; }

/* ── IMPACT PHOTO STRIP ── */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  overflow: hidden;
}
.photo-strip-item {
  height: 220px;
  overflow: hidden;
  position: relative;
}
.photo-strip-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.photo-strip-item:hover img { transform: scale(1.06); }

/* ── MOBILE RESPONSIVE ── */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-links.mobile-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 72px; left: 0; right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 16px 24px;
    box-shadow: var(--shadow-md);
    z-index: 500;
    gap: 4px;
  }
  .nav-links.mobile-open .has-dropdown > a::after { content: ' ▸'; }
  .nav-links.mobile-open .nav-dropdown { display: none; }
  .nav-links.mobile-open .has-dropdown.dropdown-open > a::after { content: ' ▾'; }
  .nav-links.mobile-open .has-dropdown.dropdown-open .nav-dropdown { display: block; position: static; box-shadow: none; border: none; background: var(--ivory); }
  .hamburger { display: flex; }
  .hero { padding-bottom: 0; min-height: auto; padding-top: 80px; }
  .hero-cta-cards { grid-template-columns: 1fr; position: static; margin-top: 40px; }
  .grid-2 { grid-template-columns: 1fr; gap: 40px; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .connect-cards { grid-template-columns: 1fr; }
  .includes-list { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .stat-bar-inner { gap: 24px; }
  .next-steps-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .next-steps-divider { display: none; }
  .apply-hub-grid { grid-template-columns: 1fr; }
  .photo-strip { grid-template-columns: 1fr 1fr; }
  .discovery-overlay { bottom: auto !important; top: 16px !important; }
  .card-img { height: 200px; }
}

@media (max-width: 600px) {

  /* ══ LAYOUT & SPACING ══ */
  .container          { padding: 0 16px; }
  .section            { padding: 48px 0; }
  .section-sm         { padding: 32px 0; }

  /* ══ PHASES GRID — stack Phase 1 & 2 cards vertically on mobile ══ */
  .phases-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* ══ GRID COLLAPSE ══ */
  .grid-4             { grid-template-columns: 1fr; gap: 24px; }
  .grid-3             { grid-template-columns: 1fr; gap: 24px; }
  .grid-2             { grid-template-columns: 1fr; gap: 24px; }
  .footer-top         { grid-template-columns: 1fr; gap: 32px; }

  /* ══ HERO ══ */
  .hero-cta-card      { padding: 22px 20px 26px; }

  /* ══ COUNTDOWN ══ */
  .countdown-grid     { gap: 12px; }
  .countdown-box      { min-width: 70px; padding: 16px 14px; }
  .countdown-num      { font-size: 1.8rem; }

  /* ══ PRICING ══ */
  .pricing-highlight  { padding: 28px 20px; }

  /* ══ CARDS — NEW MOBILE LAYOUT ══
     Image box: fixed 260px tall, full width, shows full scene.
     Text box: sits below, fully separate, clean padding.
     All card images are identical size. */

  .card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--white);
    box-shadow: var(--shadow-sm);
  }

  /* ── CARD IMAGE — MOBILE REBUILD ──
     Work WITH the existing mobile JS (not against it).
     JS sets: height auto, position static, objectFit unset.
     CSS matches that exactly so there is zero conflict.
     Result: images show at full natural proportions, nothing cropped. */
  .card-img {
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
    background: transparent !important;
    aspect-ratio: unset !important;
    display: block !important;
  }

  .card-img img {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    object-fit: unset !important;
    object-position: unset !important;
    display: block !important;
  }

  /* Text box — fully separate below image */
  .card-body {
    padding: 20px 18px 24px;
    background: var(--white);
  }

  .card-body h3  { font-size: 1.05rem; margin-bottom: 8px; }
  .card-body p   { font-size: 0.9rem; line-height: 1.6; margin-bottom: 14px; }

  /* ══ PHOTO STRIP ══ */
  .photo-strip            { grid-template-columns: 1fr; gap: 20px; }
  .photo-strip-item       {
    width: 100%;
    height: auto !important;
    overflow: visible !important;
    position: static !important;
    border-radius: var(--radius-md);
  }
  .photo-strip-item img   {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    object-fit: unset !important;
    display: block !important;
  }

  /* ══ PROGRAM CARDS (background-image based) ══ */
  .program-card           { height: 280px; }

  /* ══ APPLY HUB ══ */
  .apply-hub-grid             { grid-template-columns: 1fr; }
  .apply-hub-card-photo       {
    width: 100%;
    height: 260px !important;
    overflow: hidden !important;
    position: relative !important;
  }
  .apply-hub-card-photo img   {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 30% !important;
  }

  /* ══ MISC ══ */
  .includes-list      { grid-template-columns: 1fr; }
  .form-row           { grid-template-columns: 1fr; }
  .discovery-overlay  { bottom: auto !important; top: 16px !important; }
  .stat-bar-inner     { gap: 16px; }
  .connect-cards      { grid-template-columns: 1fr; }
  .next-steps-inner   { flex-direction: column; align-items: flex-start; gap: 20px; }
  .next-steps-divider { display: none; }

}

/* DESKTOP-ONLY overrides for index.html photo grid + Impact Your World card.
   All scoped to min-width: 901px so mobile (≤900px) renders identically to before. */

/* DESKTOP-ONLY: rebalance the impact photo grid for a more professional layout.
   The nurse/baby photo is taller (portrait composition) than the others, so
   on desktop we rearrange into a 2x2 grid of landscape photos on the left
   alongside one tall portrait photo on the right that spans both rows.
   Mobile (≤900px) keeps the original 3x2 grid completely unchanged. */
@media (min-width: 901px) {
  .impact-photo-grid {
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-template-areas:
      "p1 p2 nb"
      "p4 p5 nb" !important;
  }
  /* Map the existing children to the named areas in source order:
     p1, p2, nurse-baby, p4, p5, empty-cell */
  .impact-photo-grid > *:nth-child(1) { grid-area: p1; }
  .impact-photo-grid > *:nth-child(2) { grid-area: p2; }
  .impact-photo-grid > *:nth-child(3) { grid-area: nb; }
  .impact-photo-grid > *:nth-child(4) { grid-area: p4; }
  .impact-photo-grid > *:nth-child(5) { grid-area: p5; }

  /* Nurse + baby cell: spans both grid rows. Constrain its height to match
     the two-row span exactly (220 + 16 gap + 220 = 456px) so the cell aligns
     with the rest of the grid instead of growing arbitrarily tall.
     The image uses 'contain' to fit fully within that height with no cropping. */
  .impact-photo-nurse-baby-wrap {
    height: 456px !important;
    background: var(--ivory);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  .impact-photo-nurse-baby {
    object-fit: contain !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
    display: block;
  }

  /* Hide the empty placeholder cell on desktop — no longer needed since the
     nurse/baby photo now fills the full right column. */
  .impact-photo-empty-cell {
    display: none !important;
  }
}

/* Coral restoration: ensure the rounded corners are visually crisp by applying
   the radius directly to the image as well as the wrapper. */
@media (min-width: 901px) {
  .impact-photo-coral {
    border-radius: var(--radius-md);
  }
}

/* "Impact Your World" silhouette: the photo's aspect ratio is wider than the
   card was, so 'cover' was cropping out the second person and 'contain' left
   green letterbox bars. Solution: switch to 'contain' AND let the card's height
   shrink to match the image's natural height — no cropping, no green bars.
   ALSO make the whole card visibly larger on desktop by giving it a wider
   column in the parent grid + a generous min-height.
   Mobile (≤900px) is unaffected. */
@media (min-width: 901px) {
  /* Give the image card column more width than the text column on desktop. */
  .apply-hub-grid {
    grid-template-columns: 1fr 1.4fr !important;
  }
  .impact-world-wrap {
    height: auto !important;
    background: var(--green-deep) !important;
  }
  .impact-world-img {
    object-fit: contain !important;
    object-position: center center !important;
    opacity: 1 !important;
    height: auto !important;
    width: 100% !important;
    display: block !important;
  }
  /* Subtle radial scrim so white text/badges stay readable over the photo. */
  .impact-world-overlay {
    background: radial-gradient(ellipse at center, rgba(20,40,30,0.55) 0%, rgba(20,40,30,0.25) 70%, rgba(20,40,30,0) 100%);
  }
}

/* MOBILE-ONLY: "Impact Your World" hero card — text OVERLAYS the entire photo,
   centered, no green bar of dead space. Strategy: give both the wrap and the
   image element a fixed height tall enough to contain the overlay text
   (~340px). The image uses object-fit:contain so the ENTIRE photo is visible
   (both silhouettes, full beach/sunset scene) — letterboxed within that
   340px frame against the green wrap background. The overlay is absolutely
   positioned over that frame and centers the text. Because the wrap height
   EQUALS the image element height, there is NO green bar below the photo —
   any green visible at top/bottom is contain's letterbox, which is part of
   the photo frame itself with the text sitting on top of it.
   Desktop (≥901px) is unaffected — its rules live at lines 1121-1142. */
@media (max-width: 900px) {
  .impact-world-wrap {
    height: 340px !important;
    min-height: 0 !important;
    background: var(--green-deep) !important;
  }
  .impact-world-img {
    object-fit: contain !important;
    object-position: center center !important;
    opacity: 1 !important;
    height: 100% !important;
    width: 100% !important;
    display: block !important;
  }
  /* Subtle radial scrim so white text/badges stay readable over the photo. */
  .impact-world-overlay {
    background: radial-gradient(ellipse at center, rgba(20,40,30,0.55) 0%, rgba(20,40,30,0.25) 70%, rgba(20,40,30,0) 100%);
  }
}

/* Hide the 3 status pills (DR Open Now / CR Early Planning / AU Early Planning)
   on BOTH desktop AND mobile — per design decision the card shows photo +
   heading + subtitle + year only across all viewports. Lives outside any
   media query so it applies universally. */
.impact-world-pills {
  display: none !important;
}

/* MOBILE-ONLY: rebuild the impact photo grid into a 2-column layout where the
   first 4 photos sit in a 2x2 grid and the nurse-baby photo (currently the 3rd
   child in source order) spans the full width on its own bottom row. The
   default inline grid-template-columns:1fr 1fr 1fr made each photo too narrow
   to read on a phone. Desktop (≥901px) is fully unaffected — its rules at
   lines ~1066-1104 take over via min-width: 901px. */
@media (max-width: 900px) {
  .impact-photo-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "p1 p2"
      "p4 p5"
      "nb nb" !important;
  }
  .impact-photo-grid > *:nth-child(1) { grid-area: p1; }
  .impact-photo-grid > *:nth-child(2) { grid-area: p2; }
  .impact-photo-grid > *:nth-child(3) { grid-area: nb; }
  .impact-photo-grid > *:nth-child(4) { grid-area: p4; }
  .impact-photo-grid > *:nth-child(5) { grid-area: p5; }

  /* Nurse-baby cell on mobile: spans both columns. The photo is portrait
     composition so 'cover' would crop awkwardly in a wide cell — switch to
     'contain' (matching the desktop treatment) and add ivory background to
     fill any letterbox space cleanly. */
  .impact-photo-nurse-baby-wrap {
    background: var(--ivory);
  }
  .impact-photo-nurse-baby {
    object-fit: contain !important;
    object-position: center center !important;
  }

  /* Hide the empty placeholder cell on mobile — only 5 real photos render. */
  .impact-photo-empty-cell {
    display: none !important;
  }
}

/* =========================================================
   COHORT CAPACITY — strikethrough + AT CAPACITY label
   Used on apply-dr-2026 (Summer 2026 Cohort A Health-Focused)
   ========================================================= */
.cohort-capacity-strike {
  text-decoration: line-through;
  color: #808080;
}
.cohort-capacity-label {
  font-weight: 700;
  color: #C00000;
  margin-left: 0.5em;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
  text-transform: uppercase;
}

/* =========================================================
   ENGAGEMENT HUB — "Get Involved" / Join the Movement
   New section: homepage teaser + engage.html pill-box system
   Reuses existing design tokens — no new colors introduced.
   ========================================================= */

/* --- Homepage teaser section --- */
.engage-teaser { background: var(--ivory); }
.engage-teaser .engage-pill-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 940px;
  margin: 0 auto 32px;
}
.engage-teaser-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  color: var(--green-deep);
  border: 2px solid var(--gold);
  border-radius: var(--radius-pill);
  padding: 11px 22px;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, transform 0.15s, box-shadow 0.18s;
  box-shadow: 0 2px 8px rgba(233,196,106,0.15);
}
.engage-teaser-pill:hover {
  background: var(--green-deep);
  color: var(--white);
  border-color: var(--green-deep);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(27,67,50,0.2);
}
.engage-teaser-pill .ep-icon { font-size: 1rem; }

/* --- Engage hub page: pill-box menu --- */
.engage-hub-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 1000px;
  margin: 0 auto 40px;
}
.engage-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FDF6E3;
  color: var(--green-deep);
  border: 2px solid var(--gold);
  border-radius: var(--radius-pill);
  padding: 13px 24px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, transform 0.15s, border-color 0.18s, box-shadow 0.18s;
  box-shadow: 0 3px 10px rgba(233,196,106,0.16);
}
.engage-pill:hover {
  background: var(--gold);
  transform: translateY(-2px);
}
.engage-pill[aria-selected="true"] {
  background: var(--green-deep);
  color: var(--white);
  border-color: var(--green-deep);
  box-shadow: 0 4px 14px rgba(27,67,50,0.22);
}
.engage-pill .ep-icon { font-size: 1.05rem; }

/* --- Engage hub page: theme panel --- */
.engage-panel {
  display: none;
  max-width: 980px;
  margin: 0 auto;
  border: 2px solid var(--green-bright);
  border-radius: var(--radius-lg);
  padding: 44px 40px 40px;
  position: relative;
  background: var(--white);
  animation: engageFadeIn 0.35s ease both;
}
.engage-panel.active { display: block; }
@keyframes engageFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.engage-panel-label {
  position: absolute;
  top: -22px;
  left: 36px;
  background: var(--white);
  padding: 0 16px;
  font-family: 'Fraunces', serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}
.engage-panel-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 36px;
  align-items: start;
  margin-top: 8px;
}
.engage-panel-body h2 { font-size: 1.7rem; margin-bottom: 4px; }
.engage-panel-body .engage-panel-lead {
  font-size: 1rem;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 14px;
}
.engage-panel-body p { margin-bottom: 14px; }
.engage-panel-body .engage-bullets {
  margin: 0 0 14px;
  padding: 0;
}
.engage-panel-body .engage-bullets li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
  font-size: 0.93rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.engage-panel-body .engage-bullets li::before {
  content: '✦';
  position: absolute;
  left: 0;
  color: var(--green-bright);
  font-size: 0.85rem;
}
.engage-panel-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 6px;
}

/* --- Engage conversion card (holds the form) --- */
.engage-form-card {
  background: var(--ivory);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
}
.engage-form-card .engage-form-eyebrow {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-mid);
  display: block;
  margin-bottom: 6px;
}
.engage-form-card h3 {
  font-size: 1.15rem;
  margin-bottom: 6px;
  font-family: 'Fraunces', serif;
  color: var(--green-deep);
}
.engage-form-card p.engage-form-note {
  font-size: 0.84rem;
  color: var(--text-muted);
  margin-bottom: 16px;
  line-height: 1.6;
}
.engage-form-card .form-field { margin-bottom: 12px; }
.engage-form-card .btn-gold { width: 100%; text-align: center; border: none; cursor: pointer; }
.engage-form-card .engage-success {
  display: none;
  background: var(--green-deep);
  color: var(--white);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  font-size: 0.9rem;
  line-height: 1.6;
}
.engage-form-card .engage-success.show { display: block; }
.engage-form-card .engage-success strong { color: var(--gold); }
.engage-hidden-honey { position: absolute; left: -5000px; }

/* --- Always-visible newsletter band on engage.html --- */
.engage-newsletter-band {
  background: linear-gradient(135deg, var(--green-deep), #2D6A4F);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  max-width: 980px;
  margin: 0 auto 48px;
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 32px;
  align-items: center;
}
.engage-newsletter-band h2 { color: var(--white); font-size: 1.5rem; margin-bottom: 6px; }
.engage-newsletter-band p { color: rgba(255,255,255,0.78); font-size: 0.92rem; }
.engage-newsletter-band .engage-nl-form { display: flex; flex-direction: column; gap: 10px; }
.engage-newsletter-band input {
  padding: 13px 16px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.93rem;
  font-family: 'DM Sans', sans-serif;
  width: 100%;
}
.engage-newsletter-band .btn-gold { width: 100%; text-align: center; border: none; cursor: pointer; }
.engage-newsletter-band .engage-success {
  display: none;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(233,196,106,0.4);
  color: var(--white);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 0.88rem;
  line-height: 1.6;
}
.engage-newsletter-band .engage-success.show { display: block; }
.engage-newsletter-band .engage-success strong { color: var(--gold); }

/* --- Free resource downloads inside a pathway panel --- */
.engage-downloads {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.engage-downloads .engage-dl-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-mid);
  margin-bottom: 12px;
}
.engage-dl-link {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ivory);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 10px;
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.engage-dl-link:hover {
  border-color: var(--green-bright);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.engage-dl-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  background: var(--green-deep);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em;
}
.engage-dl-text { display: flex; flex-direction: column; }
.engage-dl-text strong {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem; color: var(--green-deep); font-weight: 700;
}
.engage-dl-text span { font-size: 0.78rem; color: var(--text-muted); }
.engage-dl-arrow { margin-left: auto; color: var(--green-mid); font-weight: 700; }

/* --- Responsive --- */
@media (max-width: 860px) {
  .engage-panel-grid { grid-template-columns: 1fr; gap: 24px; }
  .engage-newsletter-band { grid-template-columns: 1fr; gap: 20px; padding: 26px 24px; }
  .engage-panel { padding: 40px 22px 28px; }
  .engage-panel-label { font-size: 1.6rem; left: 24px; }
}
@media (max-width: 600px) {
  .engage-teaser-pill, .engage-pill { font-size: 0.82rem; padding: 10px 16px; }
  .engage-panel-body h2 { font-size: 1.4rem; }
}

/* ── PHONE-TYPE PILL TOGGLE ──
   Side-by-side choice for "U.S. number" vs "WhatsApp number".
   Light variant for white/ivory form backgrounds; .on-dark variant
   for the green newsletter sections. */
.phone-type-toggle { display: flex; flex-direction: column; gap: 8px; }
.phone-type-prompt {
  font-size: 0.82rem;
  font-weight: 600;
}
.phone-type-pills { display: flex; gap: 10px; }
.phone-type-pill {
  flex: 1;
  text-align: center;
  padding: 11px 14px;
  border-radius: var(--radius-pill);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--text);
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s;
}
.phone-type-pill:hover { transform: translateY(-1px); }
.phone-type-pill[aria-pressed="true"] {
  background: var(--green-deep);
  color: var(--white);
  border-color: var(--green-deep);
}
/* Light-background variant (application forms) */
.phone-type-toggle .phone-type-prompt { color: var(--green-deep); }
/* Dark-background variant (green newsletter sections) */
.phone-type-toggle.on-dark .phone-type-prompt { color: rgba(255,255,255,0.85); }
.phone-type-toggle.on-dark .phone-type-pill {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.35);
}
.phone-type-toggle.on-dark .phone-type-pill[aria-pressed="true"] {
  background: var(--gold);
  color: var(--green-deep);
  border-color: var(--gold);
}

/* ── GATED DOWNLOAD (subscribe-first) ──
   A guide download that asks the visitor to subscribe before the
   PDF link is revealed. Reuses the .engage-dl-link card styling. */
.gated-dl { margin-bottom: 10px; }
.gated-dl-trigger {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  background: var(--ivory);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.gated-dl-trigger:hover {
  border-color: var(--green-bright);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.gated-dl-form {
  display: none;
  margin-top: 8px;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.gated-dl-form.show { display: block; }
.gated-dl-form .gdl-prompt {
  font-size: 0.86rem; color: var(--green-deep);
  font-weight: 600; margin-bottom: 10px;
}
.gated-dl-form input {
  width: 100%; padding: 10px 14px; margin-bottom: 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 0.9rem; font-family: 'DM Sans', sans-serif;
}
.gated-dl-form .gdl-fineprint {
  font-size: 0.72rem; color: var(--text-muted); margin-top: 2px;
}
.gated-dl-ready { display: none; margin-top: 8px; }
.gated-dl-ready.show { display: block; }