/* ---------------- Hero ---------------- */
.hero {
  background: linear-gradient(160deg, var(--green-800) 0%, var(--green-700) 55%, var(--green-600) 100%);
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  padding: 30px 20px 30px;
}
.hero-copy h1 {
  color: var(--white);
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 600;
  line-height: 1.08;
  margin: 0;
}
.hero-copy p {
  color: rgba(255,255,255,0.82);
  font-size: 17px;
  line-height: 1.65;
  margin-top: 20px;
  max-width: 520px;
}
.hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 24px;
  margin-top: 44px;
}
.stat { display: flex; align-items: center; gap: 12px; }
.stat-icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: rgba(226,144,15,0.16);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}
.stat-value { font-family: var(--font-display); color: var(--white); font-size: 18px; font-weight: 600; line-height: 1.1; }
.stat-label { color: rgba(255,255,255,0.72); font-size: 12.5px; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* ---------------- Carousel ---------------- */
.carousel {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 60px -25px rgba(18,42,34,0.45);
  border: 1px solid var(--green-600);
}
.carousel-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--green-900);
}
.carousel-img { width: 100%; height: 100%; object-fit: cover; }
.carousel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(18,42,34,0.92) 0%, rgba(18,42,34,0.35) 45%, rgba(18,42,34,0.05) 65%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px 28px 22px;
}
.carousel-overlay.no-caption { background: none; }
.carousel-eyebrow {
  font-size: 12px;
  color: var(--marigold-light);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.carousel-title {
  color: var(--white);
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 600;
  margin: 0;
  max-width: 640px;
}
.carousel-caption {
  color: rgba(255,255,255,0.82);
  margin-top: 8px;
  font-size: 14.5px;
  max-width: 560px;
  line-height: 1.55;
}
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(18,42,34,0.55);
  border: 1px solid rgba(255,255,255,0.35);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 14px;
}
.carousel-arrow.left { left: 14px; }
.carousel-arrow.right { right: 14px; }

.carousel-track {
  display: flex;
  gap: 2px;
  background: var(--green-900);
}
.carousel-dot {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,0.18);
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  padding: 0;
}
.carousel-dot .fill {
  position: absolute;
  inset: 0;
  background: var(--marigold);
  width: 0%;
}
.carousel-dot.done .fill { width: 100%; background: rgba(255,255,255,0.5); }
.carousel-dot.active .fill { animation: timerFill 4s linear forwards; }
@keyframes timerFill { from { width: 0%; } to { width: 100%; } }

/* ---------------- Mission strip ---------------- */
.mission-strip {
  background: var(--marigold-pale);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.mission-inner {
  padding: 26px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.quote-mark {
  font-family: var(--font-display);
  font-size: 40px;
  color: var(--marigold);
  line-height: 0.5;
}
.mission-inner p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  color: #6E4A08;
  font-style: italic;
  line-height: 1.5;
}

/* ---------------- Home-specific heading tweak ---------------- */

/* ---------------- Looking Ahead (roadmap teaser) ---------------- */
.looking-ahead-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: start;
}
.looking-ahead-copy { padding-top: 6px; }
.looking-ahead-copy .section-sub { margin-bottom: 30px; }
.la-cta { display: inline-flex; }

.la-timeline {
  position: relative;
  padding-left: 4px;
}
.la-timeline::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, var(--marigold) 0%, var(--line) 100%);
  opacity: .5;
}
.la-item {
  position: relative;
  display: flex;
  gap: 20px;
  padding-bottom: 34px;
}
.la-item.last { padding-bottom: 0; }
.la-dot {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--marigold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  box-shadow: 0 8px 20px -8px rgba(23,58,47,0.25);
}
.la-item-body h4 {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--green-800);
  margin: 6px 0 6px;
}
.la-item-body p {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
  max-width: 420px;
}

@media (max-width: 860px) {
  .looking-ahead-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ---------------- Certifications ---------------- */
.cert-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.cert-list { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 14px; }
.cert-list li { display: flex; gap: 14px; align-items: flex-start; }
.cert-list li::before {
  content: '✓';
  color: var(--marigold-light);
  font-weight: 700;
  flex-shrink: 0;
}
.cert-list strong { display: block; color: var(--white); font-size: 15px; }
.cert-list span { display: block; color: rgba(255,255,255,0.72); font-size: 13.5px; margin-top: 2px; }

.cert-panel {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 28px;
}
.cert-panel-title { color: var(--marigold-light); font-size: 11.5px; text-transform: uppercase; margin-bottom: 14px; }
.cert-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.cert-row span { color: rgba(255,255,255,0.65); font-size: 13.5px; }
.cert-row strong { font-family: var(--font-mono); color: var(--white); font-size: 13px; font-weight: 500; }
.cert-note { font-size: 11.5px; color: rgba(255,255,255,0.55); margin-top: 14px; line-height: 1.6; }

@media (max-width: 860px) {
  .cert-grid { grid-template-columns: 1fr; }
}

/* ---------------- CTA ---------------- */
.cta-section { text-align: center; }
.cta-section .section-title { margin: 0 auto 14px; }
.cta-section .section-sub { margin: 0 auto 28px; }

/* Home page refresh */
.hero{background:radial-gradient(circle at 75% 18%,rgba(109,190,255,.45),transparent 32%),linear-gradient(135deg,#fafdff 0%,#eaf5ff 48%,#dceeff 100%);border-bottom:1px solid #d4e7f8}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#5aa9ee 1px,transparent 1px);background-size:30px 30px;opacity:.12}
.hero-grid{position:relative;z-index:1;padding-top:65px;padding-bottom:65px}
.hero-copy h1{color:#073a80}.hero-copy p{color:#526982}.hero-copy .btn-outline{color:#0756ad;border-color:#8fc3ef;background:rgba(255,255,255,.75)}
.hero-stats{padding:18px;border:1px solid rgba(93,157,219,.2);background:rgba(255,255,255,.7);border-radius:18px;backdrop-filter:blur(8px)}
.stat-icon{background:#e4f2ff}.stat-value{color:#073d87}.stat-label{color:#64768b}
.carousel{border-color:#b9dcfa;box-shadow:0 30px 70px -30px rgba(12,80,150,.45)}
.mission-strip{background:linear-gradient(90deg,#e8f5ff,#fafdff)}
.mission-inner p{color:#174f8e}

/* ============================================================
   PREMIUM HOME HERO — 2026 redesign
   ============================================================ */
.hero-premium {
  position: relative;
  overflow: hidden;
  padding: 34px 0 0;
  background:
    radial-gradient(circle at 78% 28%, rgba(64,156,247,.18), transparent 29%),
    radial-gradient(circle at 10% 90%, rgba(30,121,225,.08), transparent 25%),
    linear-gradient(135deg,#ffffff 0%,#f4f9ff 50%,#eaf5ff 100%);
  border-bottom: 1px solid #d8eafb;
}
.hero-premium::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:radial-gradient(rgba(36,128,218,.18) 1px,transparent 1px);
  background-size:34px 34px;
  opacity:.22;
  mask-image:linear-gradient(90deg,transparent 0%,#000 42%,#000 100%);
}
.hero-premium .hero-grid {
  position:relative;
  z-index:2;
  grid-template-columns:.92fr 1.08fr;
  gap:64px;
  min-height:570px;
  padding-top:38px;
  padding-bottom:50px;
}
.hero-kicker {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 13px;
  border:1px solid #d6e9fb;
  border-radius:999px;
  background:rgba(255,255,255,.84);
  box-shadow:0 10px 28px rgba(38,105,173,.08);
  color:#176bd0;
  font-weight:700;
  font-size:13px;
  letter-spacing:.01em;
}
.hero-premium .hero-copy h1 {
  margin-top:24px;
  max-width:650px;
  color:#0a397b;
  font-size:clamp(42px,5vw,70px);
  font-weight:650;
  line-height:1.03;
  letter-spacing:-.035em;
}
.hero-premium .hero-copy h1 span { color:#0B2E6D; }
.hero-divider { display:flex;align-items:center;gap:7px;margin:24px 0 0; }
.hero-divider i { width:55px;height:2px;background:#1976dc;border-radius:3px; }
.hero-divider b { width:6px;height:6px;border:2px solid #1976dc;border-radius:50%; }
.hero-premium .hero-copy p {
  max-width:600px;
  margin-top:22px;
  color:#526b87;
  font-size:16.5px;
  line-height:1.7;
}
.hero-premium .hero-actions { margin-top:28px;gap:16px; }
.hero-premium .btn { padding:14px 25px; }
.hero-secondary {
  color:#0a5fbe !important;
  border:1px solid #8cc3f4 !important;
  background:rgba(255,255,255,.74) !important;
  box-shadow:none !important;
}
.hero-secondary:hover { background:#fff !important;box-shadow:0 12px 28px rgba(24,99,175,.12)!important; }
.hero-visual { position:relative;min-height:465px;display:grid;place-items:center; }
.hero-visual::before {
  content:"";
  position:absolute;
  width:470px;height:470px;
  border-radius:50%;
  border:24px solid rgba(25,119,224,.9);
  box-shadow:0 0 0 10px rgba(255,255,255,.85),0 24px 70px rgba(36,118,198,.2);
  z-index:0;
}
.hero-premium .carousel {
  width:min(100%,520px);
  position:relative;
  z-index:2;
  border-radius:50%;
  border:8px solid #fff;
  box-shadow:0 28px 75px rgba(15,87,164,.26);
  overflow:hidden;
}
.hero-premium .carousel-frame { aspect-ratio:1 / 1;background:#d9ecff; }
.hero-premium .carousel-img { object-fit:cover; }
.hero-premium .carousel-overlay { padding:28px 48px 42px;background:linear-gradient(0deg,rgba(4,39,87,.82),transparent 60%); }
.hero-premium .carousel-overlay.no-caption { background:linear-gradient(0deg,rgba(4,39,87,.12),transparent 45%); }
.hero-premium .carousel-track { position:absolute;left:28%;right:28%;bottom:20px;z-index:5;background:transparent;gap:5px; }
.hero-premium .carousel-dot { height:4px;border-radius:999px;background:rgba(255,255,255,.35); }
.hero-premium .carousel-arrow { background:rgba(6,66,135,.72);backdrop-filter:blur(6px); }
.impact-badge {
  position:absolute;
  z-index:4;
  width:118px;height:118px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  border:7px solid #fff;
  box-shadow:0 18px 44px rgba(20,77,138,.2);
  font-size:12px;
  line-height:1.2;
  font-weight:700;
}
.impact-badge strong { font-size:29px;line-height:1;margin-bottom:7px; }
.badge-health { right:-10px;top:22px;background:linear-gradient(145deg,#0b75e6,#0754b3); }
.badge-education { left:-20px;top:190px;background:linear-gradient(145deg,#159e72,#08734f); }
.badge-community { right:-8px;bottom:18px;background:linear-gradient(145deg,#ffb517,#e88700); }
.hero-orbit { position:absolute;border:1px solid rgba(34,126,220,.14);border-radius:50%;z-index:0; }
.hero-orbit-one { width:600px;height:600px; }
.hero-orbit-two { width:700px;height:700px; }
.hero-stats-premium {
  position:relative;
  z-index:5;
  transform:translateY(-18px);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  margin-top:0;
  padding:20px 24px;
  border:1px solid #d9eafb;
  border-radius:22px;
  background:rgba(255,255,255,.95);
  box-shadow:0 22px 52px rgba(25,89,153,.13);
}
.hero-stats-premium .stat { padding:6px 24px; }
.hero-stats-premium .stat + .stat { border-left:1px solid #e0edf8; }
.hero-stats-premium .stat-icon { width:48px;height:48px;border-radius:50%;background:#edf7ff;color:#0b68d4;font-size:20px; }
.hero-stats-premium .stat-value { color:#0a3d82;font-size:20px; }
.hero-stats-premium .stat-label { color:#677a91;font-size:12.5px;line-height:1.35;margin-top:3px; }
.hero-decoration { position:absolute;border-radius:50%;filter:blur(1px);pointer-events:none; }
.hero-decoration-one { width:260px;height:260px;background:rgba(88,170,247,.08);left:-130px;bottom:-80px; }
.hero-decoration-two { width:180px;height:180px;background:rgba(80,153,237,.08);right:-80px;top:80px; }

@media (max-width:1100px){
  .hero-premium .hero-grid{grid-template-columns:1fr 1fr;gap:35px;}
  .hero-visual::before{width:390px;height:390px;border-width:18px}
  .hero-premium .carousel{width:400px}
  .impact-badge{width:96px;height:96px;border-width:5px;font-size:10px}
  .impact-badge strong{font-size:23px}
  .hero-stats-premium .stat{padding:6px 14px}
}
@media (max-width:900px){
  .hero-premium{padding-top:10px}
  .hero-premium .hero-grid{grid-template-columns:1fr;gap:35px;padding-top:45px;padding-bottom:65px}
  .hero-premium .hero-copy{text-align:center}
  .hero-kicker{margin:0 auto}
  .hero-premium .hero-copy h1,.hero-premium .hero-copy p{margin-left:auto;margin-right:auto}
  .hero-divider,.hero-premium .hero-actions{justify-content:center}
  .hero-visual{min-height:470px}
  .hero-stats-premium{grid-template-columns:repeat(2,1fr);transform:none;margin-bottom:34px}
  .hero-stats-premium .stat:nth-child(3){border-left:0;border-top:1px solid #e0edf8;margin-top:12px;padding-top:18px}
  .hero-stats-premium .stat:nth-child(4){border-top:1px solid #e0edf8;margin-top:12px;padding-top:18px}
}
@media (max-width:620px){
  .hero-premium .hero-grid{padding:38px 20px 48px}
  .hero-premium .hero-copy h1{font-size:42px}
  .hero-visual{min-height:365px}
  .hero-visual::before{width:300px;height:300px;border-width:13px}
  .hero-premium .carousel{width:305px;border-width:5px}
  .impact-badge{width:78px;height:78px;border-width:4px;font-size:8px}
  .impact-badge strong{font-size:18px;margin-bottom:4px}
  .badge-health{right:0;top:22px}.badge-education{left:0;top:145px}.badge-community{right:0;bottom:8px}
  .hero-stats-premium{grid-template-columns:1fr;padding:12px 18px}
  .hero-stats-premium .stat{padding:13px 4px!important;border:0!important;margin:0!important}
  .hero-stats-premium .stat + .stat{border-top:1px solid #e0edf8!important}
}


/* ============================================================
   HERO TITLE ALIGNMENT — matches the approved visual mockup
   ============================================================ */
@media (min-width: 901px) {
  .hero-premium .container {
    max-width: 1340px;
  }

  .hero-premium .hero-grid {
    grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr);
    gap: 46px;
  }

  .hero-premium .hero-copy {
    min-width: 0;
    padding-left: 8px;
  }

  .hero-premium .hero-copy .hero-title {
    max-width: 640px;
    font-size: clamp(50px, 4.15vw, 68px);
    line-height: 1.04;
    letter-spacing: -.038em;
  }

  .hero-title-line {
    display: block;
    white-space: nowrap;
  }

  .hero-title-highlight {
    color: #1470dc;
  }
}

@media (max-width: 900px) {
  .hero-title-line {
    display: inline;
    white-space: normal;
  }

  .hero-title-line::after {
    content: " ";
  }

  .hero-title-highlight {
    color: #1470dc;
  }
}

@media (max-width: 620px) {
  .hero-premium .hero-copy .hero-title {
    font-size: clamp(39px, 11vw, 46px);
    line-height: 1.07;
    letter-spacing: -.03em;
  }
}
/* ============================================================
   Append this to the END of site/css/home.css
   Makes the 12A/80G and CSR stat blocks behave like proper
   clickable links instead of plain divs — purely additive,
   doesn't touch any existing .stat rules.
   ============================================================ */
.hero-stats a.stat,
.hero-stats a.stat:visited {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  transition: transform .15s ease, opacity .15s ease;
}
.hero-stats a.stat:hover {
  transform: translateY(-2px);
  opacity: .85;
}