@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=Source+Sans+3:wght@400;500;600&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css');

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

:root {
  --navy: #0a2d38;
  --teal: #0a7a8c;
  --teal-dark: #0a4d5c;
  --teal-light: #eef6f8;
  --teal-mid: #5acce0;
  --gray-text: #4a6a75;
  --gray-light: #f6fbfc;
  --border: #dde8ec;
  --text: #0f2d3a;
}

body { font-family: 'Source Sans 3', sans-serif; color: var(--text); background: #fff; font-size: 16px; line-height: 1.7; }

a { text-decoration: none; }

/* CONTENT WRAPPER */
.inner { max-width: 1300px; margin: 0 auto; padding: 0 48px; }

/* NAV */
nav { display: flex; align-items: center; border-bottom: 1px solid var(--border); background: #fff; position: sticky; top: 0; z-index: 100; padding: 0; }
.nav-inner { max-width: 1300px; margin: 0 auto; padding: 0 48px; display: flex; align-items: center; justify-content: space-between; height: 84px; width: 100%; }
.logo { display: flex; align-items: center; }
.logo-img { height: 40px; width: auto; display: block; }
.footer-logo-img { height: 40px; width: auto; display: block; margin-bottom: 12px; }
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a { font-size: 14px; color: #2c4a55; font-weight: 500; }
.nav-links a.active { border-bottom: 2px solid var(--teal); padding-bottom: 1px; }
.btn-primary { background: var(--teal); color: #fff !important; padding: 9px 20px; border-radius: 6px; font-size: 14px; font-weight: 400; transition: background 0.2s ease; }
.btn-primary:hover { background: #086472; }
.btn-outline { border: 1px solid var(--teal-dark); color: var(--teal-dark) !important; padding: 8px 28px; border-radius: 6px; font-size: 15px; font-weight: 400; background: transparent; display: inline-flex; align-items: center; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.btn-outline:hover { background: #fff; color: var(--teal) !important; border-color: #c2c2c2; }
.btn-outline-white { border: 1px solid rgba(255,255,255,0.5); color: #fff !important; padding: 8px 22px; border-radius: 6px; font-size: 14px; font-weight: 400; background: transparent; display: inline-flex; align-items: center; transition: background 0.2s ease, border-color 0.2s ease; }
.btn-outline-white:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.5); }
.btn-primary-lg { background: var(--teal); color: #fff !important; padding: 8px 28px; border-radius: 6px; font-size: 15px; font-weight: 400; display: inline-flex; align-items: center; transition: background 0.2s ease; }
.btn-primary-lg:hover { background: #086472; }

/* PAGE HERO */
.page-hero { background: linear-gradient(135deg, #f0f7f9 0%, #e4f1f4 100%); padding: 70px 48px; border-bottom: 1px solid var(--border); }
.page-hero-inner { max-width: 680px; }
.section-label { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--teal); font-weight: 600; margin-bottom: 12px; }
.page-hero h1 { font-family: 'Playfair Display', serif; font-size: 40px; line-height: 1.15; color: var(--text); margin-bottom: 18px; }
.page-hero p { font-size: 16px; color: var(--gray-text); max-width: 580px; line-height: 1.75; }

/* SECTIONS */
section { padding: 64px 48px; }
section.alt { background: var(--gray-light); }
section.dark { background: var(--navy); }
h2.section-heading { font-family: 'Playfair Display', serif; font-size: 32px; color: var(--text); margin-bottom: 12px; }
h2.section-heading.center { text-align: center; }
h2.section-heading.light { color: #fff; }
p.section-intro { font-size: 15px; color: var(--gray-text); max-width: 640px; line-height: 1.75; margin-bottom: 40px; }
p.section-intro.center { text-align: center; margin-left: auto; margin-right: auto; }
p.section-intro.light { color: #a8c8d5; }

/* CARDS */
.card-grid { display: grid; gap: 20px; }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 28px; }
.card h3 { font-size: 17px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.card p { font-size: 14px; color: var(--gray-text); line-height: 1.7; }
.card .card-icon { width: 52px; height: 52px; background: var(--teal-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.card .card-icon i { font-size: 22px; color: var(--teal-dark); }
.card ul { list-style: none; margin-top: 14px; }
.card ul li { font-size: 14px; color: var(--gray-text); padding: 4px 0; display: flex; align-items: flex-start; gap: 8px; }
.card ul li::before { content: '—'; color: var(--teal); font-weight: 700; flex-shrink: 0; }

/* BULLET LIST */
.bullet-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.bullet-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--gray-text); }
.bullet-list li::before { content: '✓'; color: var(--teal); font-weight: 700; flex-shrink: 0; margin-top: 2px; }
.bullet-list.light li { color: #a8c8d5; }
.bullet-list.light li::before { color: var(--teal-mid); }

/* PROCESS STEPS */
.steps { display: flex; flex-direction: column; gap: 0; }
.step { display: flex; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--border); }
.step:last-child { border-bottom: none; }
.step-num { width: 40px; height: 40px; background: var(--teal); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 15px; flex-shrink: 0; margin-top: 2px; }
.step h3 { font-size: 17px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.step p { font-size: 14px; color: var(--gray-text); }

/* TWO-COL */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.two-col.align-center { align-items: center; }

/* CTA BAND */
.cta-band { background: var(--navy); padding: 60px 48px; text-align: center; }
.cta-band h2 { font-family: 'Playfair Display', serif; font-size: 30px; color: #fff; margin-bottom: 12px; }
.cta-band p { font-size: 15px; color: #a8c8d5; max-width: 520px; margin: 0 auto 28px; }
.cta-band .btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* FOOTER */
footer { background: var(--navy); padding: 50px 48px 24px; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-logo { margin-bottom: 0; }
.footer-tagline { font-size: 13px; color: #8ab8c8; margin: 12px 0 8px; line-height: 1.6; }
.footer-note { font-size: 11px; color: #4a6a75; line-height: 1.6; margin-top: 10px; }
.social { display: flex; gap: 10px; margin-top: 14px; }
.social a { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; color: #a8c8d5; font-size: 14px; }
.footer-col h5 { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--teal-mid); font-weight: 600; margin-bottom: 14px; }
.footer-col a { display: block; font-size: 13px; color: #a8c8d5; margin-bottom: 8px; }
.footer-col p { font-size: 13px; color: #a8c8d5; margin-bottom: 8px; display: flex; align-items: center; gap: 7px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 20px; display: flex; justify-content: space-between; }
.footer-bottom p, .footer-bottom a { font-size: 12px; color: #4a6a75; }
.footer-bottom div { display: flex; gap: 20px; }
.compliance { font-size: 11px; color: #3a5a65; line-height: 1.6; max-width: 560px; margin-top: 16px; }

/* =============================================
   RESPONSIVE BREAKPOINTS
   Tablet: max-width 1024px
   Mobile: max-width 640px
   ============================================= */

/* --- HAMBURGER NAV TOGGLE (shared JS needed) --- */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--teal-dark);
  border-radius: 2px;
  transition: all 0.25s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-links.mobile-open {
  display: flex !important;
}

/* ============ TABLET (≤1024px) ============ */
@media (max-width: 1024px) {

  /* Nav */
  nav { padding: 14px 28px; }

  /* Page hero */
  .page-hero { padding: 50px 28px; }
  .page-hero h1 { font-size: 34px; }

  /* Sections */
  section { padding: 52px 28px; }
  .cta-band { padding: 52px 28px; }
  footer { padding: 44px 28px 20px; }

  /* Two-col: tighten gap */
  .two-col { gap: 36px; }

  /* Card grids: 2-col max on tablet */
  .card-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }

  /* Footer: 2-col grid */
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ============ MOBILE (≤640px) ============ */
@media (max-width: 640px) {

  /* --- Nav: hamburger --- */
  nav { padding: 14px 20px; }
  .nav-hamburger { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px 24px;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(10,45,56,0.08);
    gap: 16px;
    z-index: 99;
  }
  .nav-links a { font-size: 15px; width: 100%; }
  .nav-links .btn-primary { width: 100%; text-align: center; padding: 12px; }

  /* Page hero */
  .page-hero { padding: 40px 20px; }
  .page-hero h1 { font-size: 28px; }
  .page-hero p { font-size: 15px; }

  /* Sections */
  section { padding: 44px 20px; }
  .cta-band { padding: 44px 20px; }
  .cta-band h2 { font-size: 24px; }
  .cta-band .btns { flex-direction: column; align-items: center; }

  /* Typography */
  h2.section-heading { font-size: 26px; }
  p.section-intro { font-size: 14px; }

  /* Two-col: stack */
  .two-col { grid-template-columns: 1fr; gap: 28px; }

  /* Card grids: single col */
  .card-grid.cols-2,
  .card-grid.cols-3 { grid-template-columns: 1fr; }

  /* Buttons */
  .btn-primary-lg { width: 100%; text-align: center; padding: 14px; }
  .btn-outline-white { width: 100%; text-align: center; padding: 13px; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 12px; }
  .footer-bottom div { gap: 16px; }
}

/* =============================================
   V2 ADDITIONS — Programs, Hub, Shared Components
   ============================================= */

/* Program badge chips */
.prog-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 20px; font-size: 11px;
  font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
}
.prog-badge-hf  { background: #1a2e1a; color: #c8d8a0; }
.prog-badge-sn  { background: #0a4d5c; color: #a0dce8; }
.prog-badge-nsps { background: #eef6f8; color: #0a4d5c; border: 1px solid #dde8ec; }

/* Program card (used on hub homepage) */
.prog-card {
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 4px 24px rgba(10,45,56,0.10);
  transition: transform 0.2s, box-shadow 0.2s;
}
.prog-card:hover { transform: translateY(-3px); box-shadow: 0 10px 40px rgba(10,45,56,0.15); }
.prog-card-header { padding: 36px 32px 28px; }
.prog-card-body   { padding: 28px 32px 32px; background: #fff; }
.prog-card-hf  .prog-card-header { background: #1c2e1c; }
.prog-card-sn  .prog-card-header { background: #0a2d38; }
.prog-card h3 { font-family: 'Playfair Display', serif; font-size: 24px; color: #fff; margin: 12px 0 8px; }
.prog-card p  { font-size: 14px; color: #a8c8a8; line-height: 1.7; }
.prog-card-sn p { color: #a8c8d5; }
.prog-card-body p { color: #4a6a75; }
.prog-card-body ul { list-style: none; margin: 14px 0 22px; display: flex; flex-direction: column; gap: 8px; }
.prog-card-body ul li { font-size: 13px; color: #4a6a75; display: flex; gap: 8px; align-items: flex-start; }
.prog-card-body ul li::before { content: '✓'; font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.prog-card-hf .prog-card-body ul li::before { color: #6a8a3a; }
.prog-card-sn .prog-card-body ul li::before { color: #0a7a8c; }

/* HF color overrides */
.hf-teal   { color: #6a8a3a; }
.hf-bg     { background: #1c2e1c; }
.hf-light  { background: #f4f6f0; }
.hf-border { border-color: #c8d8a0; }
.btn-hf    { background: #4a6a1a; color: #fff !important; padding: 11px 24px; border-radius: 6px; font-size: 14px; font-weight: 600; display: inline-block; }
.btn-hf-outline { border: 2px solid #4a6a1a; color: #4a6a1a !important; padding: 10px 22px; border-radius: 6px; font-size: 14px; font-weight: 600; background: transparent; display: inline-block; }
.btn-hf-outline-white { border: 2px solid rgba(255,255,255,0.5); color: #fff !important; padding: 10px 22px; border-radius: 6px; font-size: 14px; font-weight: 600; background: transparent; display: inline-block; }

/* SN color overrides (inherits existing teal) */
.btn-sn    { background: #0a7a8c; color: #fff !important; padding: 11px 24px; border-radius: 6px; font-size: 14px; font-weight: 600; display: inline-block; }
.btn-sn-outline { border: 2px solid #0a4d5c; color: #0a4d5c !important; padding: 10px 22px; border-radius: 6px; font-size: 14px; font-weight: 600; background: transparent; display: inline-block; }

/* Overlap callout box */
.overlap-box {
  background: #f8f6f0; border: 1px solid #d8c89a; border-left: 4px solid #8a6a2a;
  border-radius: 8px; padding: 18px 22px; display: flex; gap: 14px; align-items: flex-start;
}
.overlap-box i { font-size: 20px; color: #8a6a2a; flex-shrink: 0; margin-top: 2px; }
.overlap-box p { font-size: 13px; color: #5a4a2a; line-height: 1.7; }
.overlap-box a { color: #4a6a1a; font-weight: 600; }

/* Smart form styles */
.form-section { display: none; }
.form-section.active { display: block; }
.path-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 32px; }
.path-btn {
  border: 2px solid #dde8ec; border-radius: 10px; padding: 24px 20px;
  cursor: pointer; text-align: center; background: #fff;
  transition: border-color 0.2s, background 0.2s; position: relative;
}
.path-btn:hover { border-color: #0a7a8c; }
.path-btn.selected-hf { border-color: #4a6a1a; background: #f4f6f0; }
.path-btn.selected-sn { border-color: #0a7a8c; background: #eef6f8; }
.path-btn i { font-size: 28px; display: block; margin-bottom: 10px; }
.path-btn-hf i { color: #4a6a1a; }
.path-btn-sn i { color: #0a7a8c; }
.path-btn strong { display: block; font-size: 15px; color: #0f2d3a; margin-bottom: 4px; }
.path-btn span { font-size: 12px; color: #5a7a85; line-height: 1.5; display: block; }

/* Nav program links */
.nav-prog-hf { color: #4a6a1a !important; font-weight: 600 !important; }
.nav-prog-sn { color: #0a7a8c !important; font-weight: 600 !important; }

@media (max-width: 640px) {
  .path-selector { grid-template-columns: 1fr; }
  .prog-card-header, .prog-card-body { padding: 24px 20px; }
}