/* ================================================================
   01. CSS CUSTOM PROPERTIES — DESIGN TOKENS
   ================================================================ */
:root {
  /* --- Color Palette --- */
  --color-navy:          #0A0F1E;        /* Deepest background */
  --color-navy-800:      #111827;        /* Card backgrounds */
  --color-navy-700:      #1A2236;        /* Elevated surfaces */
  --color-navy-600:      #243047;        /* Border / divider */
  --color-navy-500:      #2E3D5A;        /* Subtle borders */

  --color-gold:          #F67D36;        /* Primary accent — warm gold */
  --color-gold-light:    #E6C975;        /* Hover / lighter gold */
  --color-gold-pale:     #F5E6BB;        /* Very light gold tint */

  --color-teal:          #0D9E8A;        /* Secondary accent — teal */
  --color-teal-light:    #14C4AC;
  --color-teal-pale:     rgba(13, 158, 138, 0.12);

  --color-orange:        #E8692A;        /* Tertiary accent */
  --color-orange-light:  #F0874E;
  --color-orange-pale:   rgba(232, 105, 42, 0.12);

  --color-purple:        #7C4DFF;
  --color-purple-pale:   rgba(124, 77, 255, 0.12);

  --color-red:           #E84545;
  --color-red-pale:      rgba(232, 69, 69, 0.12);

  --color-blue:          #1E88E5;
  --color-blue-pale:     rgba(30, 136, 229, 0.12);

  --color-white:         #FFFFFF;
  --color-grey-100:      #F4F6F8;
  --color-grey-200:      #E2E8F0;
  --color-grey-300:      #CBD5E1;
  --color-grey-500:      #94A3B8;
  --color-grey-700:      #475569;
  --color-text-light:    rgba(255,255,255,0.85);
  --color-text-muted:    rgba(255,255,255,0.55);

  /* --- Typography --- */
  --font-display:  'Playfair Display', Georgia, serif;
  --font-body:     'DM Sans', system-ui, sans-serif;

  /* Font sizes — 8px base scale */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-md:    1.125rem;   /* 18px */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   2rem;       /* 32px */
  --text-3xl:   2.5rem;     /* 40px */
  --text-4xl:   3.25rem;    /* 52px */
  --text-5xl:   4rem;       /* 64px */

  /* Font weights */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   900;

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.6;
  --lh-relaxed: 1.8;

  /* --- Spacing (8px system) --- */
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* --- Border Radius --- */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.25);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg:  0 16px 48px rgba(0,0,0,0.45);
  --shadow-gold: 0 0 24px rgba(201,168,76,0.2);
  --shadow-teal: 0 0 24px rgba(13,158,138,0.2);

  /* --- Transitions --- */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Navbar height --- */
  --navbar-height: 72px;

  /* --- Z-Index layers --- */
  --z-base:    1;
  --z-card:    10;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;
}


/* ================================================================
   02. CSS RESET & BASE
   ================================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  font-size:             16px;
  scroll-behavior:       smooth;
  scroll-padding-top:    calc(var(--navbar-height) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family:      var(--font-body);
  font-size:        var(--text-base);
  font-weight:      var(--fw-regular);
  line-height:      var(--lh-normal);
  color:            var(--color-text-light);
  background-color: var(--color-navy);
  overflow-x:       hidden;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video,
iframe {
  display:   block;
  max-width: 100%;
}

a {
  color:           inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  cursor:     pointer;
  border:     none;
  background: none;
  font:       inherit;
}

address {
  font-style: normal;
}

/* Focus styles — accessible */
:focus-visible {
  outline:        2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius:  var(--radius-sm);
}


/* ================================================================
   03. UTILITY CLASSES
   ================================================================ */

/* Screen-reader only */
.sr-only {
  position: absolute;
  width:    1px;
  height:   1px;
  padding:  0;
  margin:  -1px;
  overflow: hidden;
  clip:     rect(0, 0, 0, 0);
  white-space: nowrap;
  border:   0;
}

/* Skip link — accessibility */
.skip-link {
  position:   absolute;
  top:        -100%;
  left:       0;
  background: var(--color-gold);
  color:      var(--color-navy);
  padding:    var(--space-3) var(--space-6);
  font-weight: var(--fw-bold);
  z-index:    var(--z-modal);
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  top: 0;
}


/* ================================================================
   04. LAYOUT — CONTAINER & GRID
   ================================================================ */
.container {
  width:     100%;
  max-width: 1280px;
  margin:    0 auto;
  padding:   0 var(--space-8);
}

@media (max-width: 768px) {
  .container {
    padding: 0 var(--space-5);
  }
}


/* ================================================================
   05. TYPOGRAPHY SCALE
   ================================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family:  var(--font-display);
  line-height:  var(--lh-tight);
  color:        var(--color-white);
  font-weight:  var(--fw-bold);
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); }
h4 { font-size: var(--text-xl); }

p {
  color:       var(--color-text-light);
  line-height: var(--lh-relaxed);
}

em { font-style: italic; color: var(--color-gold); }
strong { font-weight: var(--fw-semi); color: var(--color-white); }


/* ================================================================
   06. ANIMATION SYSTEM
   ================================================================ */

/* Fade-up: default entrance animation */
[data-animate="fade-up"] {
  opacity:   0;
  transform: translateY(32px);
  transition:
    opacity   var(--transition-slow),
    transform var(--transition-slow);
}

/* Fade from left */
[data-animate="fade-left"] {
  opacity:   0;
  transform: translateX(40px);
  transition:
    opacity   var(--transition-slow),
    transform var(--transition-slow);
}

/* Fade from right */
[data-animate="fade-right"] {
  opacity:   0;
  transform: translateX(-40px);
  transition:
    opacity   var(--transition-slow),
    transform var(--transition-slow);
}

/* Active state — triggered by JS IntersectionObserver */
[data-animate].is-visible {
  opacity:   1;
  transform: none;
}

/* Staggered delay — set via data-delay attribute by JS */
[data-delay="80"]  { transition-delay: 80ms; }
[data-delay="100"] { transition-delay: 100ms; }
[data-delay="160"] { transition-delay: 160ms; }
[data-delay="200"] { transition-delay: 200ms; }
[data-delay="240"] { transition-delay: 240ms; }
[data-delay="300"] { transition-delay: 300ms; }
[data-delay="320"] { transition-delay: 320ms; }
[data-delay="400"] { transition-delay: 400ms; }
[data-delay="480"] { transition-delay: 480ms; }
[data-delay="560"] { transition-delay: 560ms; }
[data-delay="640"] { transition-delay: 640ms; }
[data-delay="720"] { transition-delay: 720ms; }
[data-delay="800"] { transition-delay: 800ms; }
[data-delay="880"] { transition-delay: 880ms; }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-animate].is-visible {
    opacity:    1;
    transform:  none;
    transition: none;
  }
}


/* ================================================================
   07. COMPONENTS — BUTTONS
   ================================================================ */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  padding:         var(--space-3) var(--space-6);
  font-family:     var(--font-body);
  font-size:       var(--text-sm);
  font-weight:     var(--fw-semi);
  letter-spacing:  0.03em;
  border-radius:   var(--radius-full);
  border:          2px solid transparent;
  cursor:          pointer;
  transition:
    background     var(--transition-base),
    color          var(--transition-base),
    border-color   var(--transition-base),
    transform      var(--transition-spring),
    box-shadow     var(--transition-base);
  white-space: nowrap;
  text-decoration: none;
}

/* Primary — Gold */
.btn--primary {
  background:   var(--color-gold);
  color:        var(--color-navy);
  border-color: var(--color-gold);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background:   var(--color-gold-light);
  border-color: var(--color-gold-light);
  transform:    translateY(-2px);
  box-shadow:   var(--shadow-gold);
}
.btn--primary:active {
  transform: translateY(0);
}

/* Outline — transparent with gold border */
.btn--outline {
  background:   transparent;
  color:        var(--color-gold);
  border-color: var(--color-gold);
}
.btn--outline:hover,
.btn--outline:focus-visible {
  background:   var(--color-gold);
  color:        var(--color-navy);
  transform:    translateY(-2px);
}

/* Ghost — subtle for dark backgrounds */
.btn--ghost {
  background:   rgba(255,255,255,0.1);
  color:        var(--color-white);
  border-color: rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background:   rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.4);
  transform:    translateY(-2px);
}

/* Submit button variant */
.btn--submit {
  width:          100%;
  padding:        var(--space-4) var(--space-8);
  font-size:      var(--text-base);
  font-weight:    var(--fw-bold);
  background:     linear-gradient(135deg, var(--color-gold), var(--color-gold-light));
  color:          var(--color-navy);
  border-radius:  var(--radius-md);
  border-color:   transparent;
  box-shadow:     0 4px 16px rgba(201,168,76,0.3);
}
.btn--submit:hover {
  transform:  translateY(-2px);
  box-shadow: 0 8px 24px rgba(201,168,76,0.4);
}

/* Large variant */
.btn--large {
  padding:   var(--space-4) var(--space-10);
  font-size: var(--text-base);
}


/* ================================================================
   08. COMPONENTS — SECTION HEADERS
   ================================================================ */
.section-header {
  text-align:    center;
  margin-bottom: var(--space-16);
}

.section-eyebrow {
  display:        inline-block;
  font-family:    var(--font-body);
  font-size:      var(--text-xs);
  font-weight:    var(--fw-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--color-teal);
  margin-bottom:  var(--space-4);
  padding:        var(--space-1) var(--space-4);
  border:         1px solid rgba(13, 158, 138, 0.35);
  border-radius:  var(--radius-full);
  background:     rgba(13, 158, 138, 0.08);
}

.section-eyebrow--light {
  color:        var(--color-gold);
  border-color: rgba(201, 168, 76, 0.35);
  background:   rgba(201, 168, 76, 0.08);
}

.section-title {
  font-size:     clamp(2rem, 4vw, 3rem);
  margin-bottom: var(--space-5);
  color:         var(--color-white);
}

.section-title--light {
  color: var(--color-white);
}

.section-subtitle {
  max-width:  640px;
  margin:     0 auto;
  font-size:  var(--text-md);
  color:      var(--color-text-muted);
  line-height: var(--lh-relaxed);
}

.section-subtitle--light {
  color: rgba(255,255,255,0.65);
}


/* ================================================================
   09. NAVBAR
   ================================================================ */
.navbar {
  position:    fixed;
  top:         0;
  left:        0;
  width:       100%;
  z-index:     var(--z-sticky);
  background:  rgba(10, 15, 30, 0.7);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition:
    background     var(--transition-slow),
    box-shadow     var(--transition-slow),
    border-color   var(--transition-slow);
}

/* Scrolled state — deeper background and shadow */
.navbar--scrolled {
  background:   rgba(10, 15, 30, 0.96);
  border-color: rgba(201, 168, 76, 0.15);
  box-shadow:   0 4px 24px rgba(0,0,0,0.5);
}

.navbar__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          var(--navbar-height);
  gap:             var(--space-8);
}

.navbar__logo {
  flex-shrink: 0;
  display:     block;
  line-height: 0;
}

.navbar__logo-img {
  height:     48px;
  width:      auto;
  object-fit: contain;
}

/* Nav links */
.navbar__nav {
  flex: 1;
}

.navbar__links {
  display:     flex;
  align-items: center;
  gap:         var(--space-8);
  justify-content: center;
}

.navbar__link {
  font-size:      var(--text-sm);
  font-weight:    var(--fw-medium);
  color:          var(--color-text-light);
  letter-spacing: 0.02em;
  position:       relative;
  padding-bottom: 2px;
  transition:     color var(--transition-base);
}

/* Animated underline on hover */
.navbar__link::after {
  content:          '';
  position:         absolute;
  bottom:           -2px;
  left:             0;
  width:            0;
  height:           2px;
  background:       var(--color-gold);
  border-radius:    var(--radius-full);
  transition:       width var(--transition-base);
}

.navbar__link:hover,
.navbar__link.is-active {
  color: var(--color-gold);
}

.navbar__link:hover::after,
.navbar__link.is-active::after {
  width: 100%;
}

.navbar__cta {
  flex-shrink: 0;
  font-size:   var(--text-xs);
  padding:     var(--space-2) var(--space-5);
}

/* Hamburger button */
.navbar__hamburger {
  display:        none;
  flex-direction: column;
  gap:            5px;
  padding:        var(--space-2);
  flex-shrink:    0;
}

.hamburger-bar {
  display:          block;
  width:            24px;
  height:           2px;
  background:       var(--color-white);
  border-radius:    var(--radius-full);
  transition:       transform var(--transition-base), opacity var(--transition-base);
}

/* Hamburger active state */
.navbar__hamburger.is-open .hamburger-bar:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.navbar__hamburger.is-open .hamburger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.navbar__hamburger.is-open .hamburger-bar:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile menu */
.mobile-menu {
  display: flex; /* change from none → flex */
  flex-direction: column;
  background: var(--color-navy-800);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 0 var(--space-8); /* remove vertical padding when closed */
  gap: var(--space-4);

  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;

  transition: 
    max-height var(--transition-slow) ease,
    opacity var(--transition-base);
}

/* OPEN STATE */
.mobile-menu.is-open {
  max-height: 500px;
  padding: var(--space-5) var(--space-8); /* restore padding */
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 768px) {
  .mobile-menu {
    position: absolute;
    width: 100%;
    left: 0;
    top: var(--navbar-height);
  }
}
.mobile-menu__links {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}

.mobile-menu__link {
  font-size:   var(--text-base);
  font-weight: var(--fw-medium);
  color:       var(--color-text-light);
  padding:     var(--space-3) 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition:  color var(--transition-base);
}

.mobile-menu__link:hover {
  color: var(--color-gold);
}

.mobile-menu__cta {
  margin-top: var(--space-2);
  width:      fit-content;
}


/* ================================================================
   10. HERO SECTION
   ================================================================ */
.hero {
  position:   relative;
  min-height: calc(100vh - var(--navbar-height));
  padding:    calc(var(--navbar-height) + var(--space-16)) 0 var(--space-16);
  overflow:   hidden;
  background: radial-gradient(ellipse at 20% 40%, rgba(13, 158, 138, 0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 20%, rgba(201, 168, 76, 0.07) 0%, transparent 50%),
              var(--color-navy);
}

/* Decorative background shapes */
.hero__bg-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.hero__bg-shape--1 {
  width:   600px;
  height:  600px;
  top:    -200px;
  right:  -150px;
  background: radial-gradient(circle, rgba(201,168,76,0.06) 0%, transparent 70%);
}

.hero__bg-shape--2 {
  width:   400px;
  height:  400px;
  bottom: -100px;
  left:   -100px;
  background: radial-gradient(circle, rgba(13,158,138,0.07) 0%, transparent 70%);
}

/* Dot grid texture */
.hero__bg-dots {
  position:   absolute;
  inset:      0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display:  grid;
  grid-template-columns: 1fr 1fr;
  gap:      var(--space-12);
  align-items: start;
}

/* ------ LEFT: Hero Content ------ */
.hero__content {
  padding-top: var(--space-8);
}

.hero__eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-2);
  font-size:      var(--text-xs);
  font-weight:    var(--fw-bold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--color-teal);
  margin-bottom:  var(--space-5);
  padding:        var(--space-2) var(--space-4);
  background:     rgba(13, 158, 138, 0.1);
  border:         1px solid rgba(13, 158, 138, 0.3);
  border-radius:  var(--radius-full);
}

.hero__title {
  font-size:     clamp(3rem, 5.5vw, 4.5rem);
  font-weight:   var(--fw-black);
  line-height:   var(--lh-tight);
  margin-bottom: var(--space-4);
  color:         var(--color-white);
  letter-spacing: -0.02em;
}

.hero__subtitle {
  font-family:   var(--font-body);
  font-size:     var(--text-xl);
  font-weight:   var(--fw-medium);
  color:         var(--color-text-muted);
  margin-bottom: var(--space-6);
  line-height:   var(--lh-snug);
}

.hero__subtitle strong {
  color:       var(--color-gold);
  font-weight: var(--fw-bold);
}

.hero__description {
  font-size:     var(--text-md);
  color:         var(--color-text-muted);
  margin-bottom: var(--space-8);
  max-width:     480px;
  line-height:   var(--lh-relaxed);
}

/* Highlights strip */
.hero__highlights {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-3) var(--space-4);
  margin-bottom:         var(--space-8);
}

.hero__highlight-item {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  font-size:   var(--text-sm);
  font-weight: var(--fw-medium);
  color:       var(--color-text-light);
}

.hero__highlight-item i {
  font-size: 1.1rem;
  color:     var(--color-teal);
  flex-shrink: 0;
}

/* Hero image placeholder */
.hero__img-placeholder {
  height:         200px;
  border-radius:  var(--radius-lg);
  background:     linear-gradient(135deg, var(--color-navy-700) 0%, var(--color-navy-600) 100%);
  border:         1px solid rgba(255,255,255,0.07);
  display:        flex;
  align-items:    center;
  justify-content: center;
  text-align:     center;
  padding:        var(--space-0);
  color:          var(--color-text-muted);
  font-size:      var(--text-sm);
  font-style:     italic;
  position:       relative;
  overflow:       hidden;
}

/* White inner form wrapper — wraps both the npf widget and custom form */
.admission-card .npf_wgts,
.admission-card .admission-form-inner {
  background:    #ffffff;
  border-radius: var(--radius-md);
  padding:       var(--space-6);
  margin-top:    var(--space-2);
}

/* Override dark input styles inside white container */
.admission-card .admission-form-inner .form-label {
  color: #374151;   /* dark grey — readable on white */
}

.admission-card .admission-form-inner .form-input {
  background:   #ffffff;
  border:       1px solid #D1D5DB;
  color:        #111827;
}

.admission-card .admission-form-inner .form-input::placeholder {
  color: #9CA3AF;
}

.admission-card .admission-form-inner .form-input:focus {
  border-color: var(--color-teal);
  background:   #ffffff;
  box-shadow:   0 0 0 3px rgba(13, 158, 138, 0.12);
}

.admission-card .admission-form-inner .form-input:valid:not(:placeholder-shown) {
  border-color: var(--color-teal);
}

/* Icon colour fix inside white container */
.admission-card .admission-form-inner .form-input-wrap > i:first-child {
  color: #6B7280;
}

/* Error text stays readable */
.admission-card .admission-form-inner .form-error {
  color: #DC2626;
}

/* Submit button — keep branded gold on white */
.admission-card .admission-form-inner .btn--submit {
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-light));
  color:      var(--color-navy);
}
/* ================================================================
   11. STATS BAR
   ================================================================ */
.stats-bar {
  background:  linear-gradient(135deg, var(--color-navy-700) 0%, var(--color-navy-800) 100%);
  border-top:    1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding:       var(--space-12) 0;
}

.stats-bar__list {
  display:             grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
justify-content: center;
  gap:                 var(--space-8);
  text-align:          center;
}

.stats-bar__item {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             var(--space-2);
  position:        relative;
}

/* Vertical divider between items */
.stats-bar__item:not(:first-child)::before {
  content:  '';
  position: absolute;
  left:     0;
  top:      20%;
  height:   60%;
  width:    1px;
  background: rgba(255,255,255,0.1);
}

.stats-bar__number {
  font-family:  var(--font-display);
  font-size:    clamp(2rem, 3.5vw, 2.75rem);
  font-weight:  var(--fw-bold);
  color:        var(--color-gold);
  line-height:  1;
}

.stats-bar__label {
  font-size:   var(--text-sm);
  font-weight: var(--fw-medium);
  color:       var(--color-text-muted);
}


/* ================================================================
   12. DELIVERABLES SECTION
   ================================================================ */
.deliverables {
  padding: var(--space-24) 0;
  background: var(--color-navy);
}

.deliverables__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-6);
}

/* Individual deliverable card */
.deliverable-card {
  background:    var(--color-navy-800);
  border:        1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg);
  padding:       var(--space-6);
  display:       flex;
  gap:           var(--space-5);
  transition:
    transform    var(--transition-base),
    border-color var(--transition-base),
    box-shadow   var(--transition-base);
  position:      relative;
  overflow:      hidden;
}

.deliverable-card::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(135deg, rgba(255,255,255,0.015) 0%, transparent 100%);
  pointer-events: none;
}

.deliverable-card:hover {
  transform:    translateY(-4px);
  border-color: rgba(201, 168, 76, 0.25);
  box-shadow:   var(--shadow-md), var(--shadow-gold);
}

/* Featured card — GIP & Skill Passport */
.deliverable-card--featured {
  border-color: rgba(201, 168, 76, 0.3);
  background:   linear-gradient(135deg, rgba(201,168,76,0.06) 0%, var(--color-navy-800) 100%);
}

/* Exclusion card — warning style */
.deliverable-card--exclusion {
  border-color: rgba(232, 69, 69, 0.2);
  background:   linear-gradient(135deg, rgba(232,69,69,0.04) 0%, var(--color-navy-800) 100%);
}

/* Passport card — gold dark style */
.deliverable-card--passport {
  border-color: rgba(201, 168, 76, 0.35);
  grid-column:  span 2;
}

/* Icon wrapper */
.deliverable-card__icon-wrap {
  flex-shrink:     0;
  width:           52px;
  height:          52px;
  border-radius:   var(--radius-md);
  display:         flex;
  align-items:     center;
  justify-content: center;
  position:        relative;
}

.deliverable-card__icon-wrap i {
  font-size: 1.4rem;
  color:     var(--color-white);
}

.deliverable-card__sno {
  position:    absolute;
  bottom:     -4px;
  right:      -4px;
  font-size:  0.6rem;
  font-weight: var(--fw-bold);
  background: var(--color-navy);
  color:      var(--color-text-muted);
  padding:    1px 4px;
  border-radius: var(--radius-sm);
  line-height: 1.4;
}

/* Icon colour variants */
.deliverable-card__icon-wrap--teal   { background: var(--color-teal-pale); }
.deliverable-card__icon-wrap--orange { background: var(--color-orange-pale); }
.deliverable-card__icon-wrap--blue   { background: var(--color-blue-pale); }
.deliverable-card__icon-wrap--purple { background: var(--color-purple-pale); }
.deliverable-card__icon-wrap--gold   { background: rgba(201, 168, 76, 0.12); }
.deliverable-card__icon-wrap--red    { background: var(--color-red-pale); }

.deliverable-card__icon-wrap--teal   i { color: var(--color-teal); }
.deliverable-card__icon-wrap--orange i { color: var(--color-orange); }
.deliverable-card__icon-wrap--blue   i { color: var(--color-blue); }
.deliverable-card__icon-wrap--purple i { color: var(--color-purple); }
.deliverable-card__icon-wrap--gold   i { color: var(--color-gold); }
.deliverable-card__icon-wrap--red    i { color: var(--color-red); }

.deliverable-card__body {
  flex: 1;
  min-width: 0;
}

.deliverable-card__title {
  font-family:   var(--font-body);
  font-size:     var(--text-sm);
  font-weight:   var(--fw-semi);
  line-height:   var(--lh-snug);
  color:         var(--color-white);
  margin-bottom: var(--space-4);
}

.deliverable-card__title em {
  color: var(--color-gold);
}

.deliverable-card__title small {
  display:     block;
  font-size:   0.75em;
  font-weight: var(--fw-regular);
  color:       var(--color-red);
  margin-top:  var(--space-1);
  font-style:  normal;
}

.deliverable-card__points {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}

.deliverable-card__points li {
  font-size:   var(--text-xs);
  color:       var(--color-text-muted);
  line-height: var(--lh-normal);
  display:     flex;
  gap:         var(--space-2);
}

.deliverable-card__points li::before {
  content:     '—';
  color:       var(--color-teal);
  flex-shrink: 0;
  font-size:   0.7rem;
  margin-top:  0.2em;
}

/* Card badge */
.deliverable-card__badge {
  display:        inline-block;
  margin-top:     var(--space-4);
  font-size:      var(--text-xs);
  font-weight:    var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--color-gold);
  background:     rgba(201, 168, 76, 0.1);
  padding:        var(--space-1) var(--space-3);
  border-radius:  var(--radius-full);
  border:         1px solid rgba(201, 168, 76, 0.25);
}




/* ================================================================
   14. GIP SECTION
   ================================================================ */
.gip {
  padding:    var(--space-24) 0;
  background: var(--color-navy);
}

/* Programme types — icon grid */
.gip__types-grid {
  display:               grid;
  grid-template-columns: repeat(5, 1fr);
  gap:                   var(--space-4);
  margin-bottom:         var(--space-16);
}

.gip-type-card {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  text-align:      center;
  gap:             var(--space-3);
  background:      var(--color-navy-800);
  border:          1px solid rgba(255,255,255,0.07);
  border-radius:   var(--radius-lg);
  padding:         var(--space-6) var(--space-4);
  transition:
    transform      var(--transition-base),
    border-color   var(--transition-base);
}

.gip-type-card:hover {
  transform:    translateY(-4px);
  border-color: rgba(201, 168, 76, 0.3);
}

.gip-type-card__icon {
  width:           56px;
  height:          56px;
  border-radius:   var(--radius-md);
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.gip-type-card__icon i {
  font-size: 1.5rem;
  color:     var(--color-white);
}

/* Icon colour variants — matching brand */
.gip-type-card__icon--sscp { background: var(--color-teal-pale); }
.gip-type-card__icon--sscp i { color: var(--color-teal); }
.gip-type-card__icon--siip { background: var(--color-blue-pale); }
.gip-type-card__icon--siip i { color: var(--color-blue); }
.gip-type-card__icon--olt  { background: var(--color-orange-pale); }
.gip-type-card__icon--olt  i { color: var(--color-orange); }
.gip-type-card__icon--fep  { background: var(--color-purple-pale); }
.gip-type-card__icon--fep  i { color: var(--color-purple); }
.gip-type-card__icon--gip  { background: rgba(201, 168, 76, 0.12); }
.gip-type-card__icon--gip  i { color: var(--color-gold); }

.gip-type-card__code {
  font-family:  var(--font-display);
  font-size:    var(--text-xl);
  font-weight:  var(--fw-bold);
  color:        var(--color-teal);
}

.gip-type-card__name {
  font-size:   var(--text-xs);
  font-weight: var(--fw-medium);
  color:       var(--color-text-muted);
  line-height: var(--lh-snug);
}

/* GIP detail cards */
.gip__details {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-5);
  margin-bottom:  var(--space-12);
}

.gip-detail-card {
  display:       flex;
  gap:           var(--space-6);
  background:    var(--color-navy-800);
  border:        1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg);
  padding:       var(--space-6) var(--space-8);
  transition:
    border-color var(--transition-base),
    transform    var(--transition-base);
}

.gip-detail-card:hover {
  border-color: rgba(201, 168, 76, 0.2);
  transform:    translateX(4px);
}

.gip-detail-card--highlight {
  border-color: rgba(201, 168, 76, 0.25);
  background:   linear-gradient(135deg, rgba(201,168,76,0.06) 0%, var(--color-navy-800) 100%);
}

.gip-detail-card__label {
  flex-shrink:     0;
  width:           72px;
  height:          72px;
  border-radius:   var(--radius-md);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--font-display);
  font-size:       var(--text-lg);
  font-weight:     var(--fw-black);
  color:           var(--color-white);
  letter-spacing:  0.04em;
}

.gip-detail-card__label--sscp { background: var(--color-teal); }
.gip-detail-card__label--siip { background: var(--color-blue); }
.gip-detail-card__label--olt  { background: var(--color-orange); }
.gip-detail-card__label--fep  { background: var(--color-purple); }
.gip-detail-card__label--gip  { background: linear-gradient(135deg, var(--color-gold), var(--color-gold-light)); color: var(--color-navy); }

.gip-detail-card__content {
  flex: 1;
}

.gip-detail-card__title {
  font-size:     var(--text-lg);
  font-weight:   var(--fw-semi);
  color:         var(--color-white);
  margin-bottom: var(--space-3);
}

.gip-detail-card__text {
  font-size:    var(--text-sm);
  color:        var(--color-text-muted);
  line-height:  var(--lh-relaxed);
  margin-bottom: var(--space-3);
}

.gip-detail-card__list {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  margin:         var(--space-3) 0;
}

.gip-detail-card__list li {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  font-size:   var(--text-sm);
  color:       var(--color-text-light);
}

.gip-detail-card__list li i {
  color:       var(--color-teal);
  font-size:   1.1rem;
  flex-shrink: 0;
}

/* Platform chips */
.gip-detail-card__platforms {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-2);
  margin-top: var(--space-4);
}

.platform-chip {
  font-size:      var(--text-xs);
  font-weight:    var(--fw-medium);
  color:          var(--color-teal);
  background:     var(--color-teal-pale);
  padding:        var(--space-1) var(--space-3);
  border-radius:  var(--radius-full);
  border:         1px solid rgba(13, 158, 138, 0.25);
}

/* GIP image placeholder */
.gip__img-placeholder {
  height:         280px;
  border-radius:  var(--radius-xl);
  background:     linear-gradient(135deg, var(--color-navy-700) 0%, var(--color-navy-600) 100%);
  border:         1px solid rgba(255,255,255,0.07);
  display:        flex;
  align-items:    center;
  justify-content: center;
  text-align:     center;
  padding:        var(--space-0);
  color:          var(--color-text-muted);
  font-size:      var(--text-sm);
  font-style:     italic;
  position:       relative;
  overflow:       hidden;
}

.gip__img-placeholder::before {
  content:    '🌏';
  position:   absolute;
  font-size:  5rem;
  opacity:    0.1;
  top:        50%;
  left:       50%;
  transform:  translate(-50%, -55%);
}


/* ================================================================
   15. SKILL PASSPORT SECTION
   ================================================================ */
.skill-passport {
  padding:  var(--space-24) 0;
  position: relative;
  overflow: hidden;
}

.skill-passport__bg {
  position:   absolute;
  inset:      0;
  background: linear-gradient(160deg, #0A0F1E 0%, #0D1A2E 50%, #111520 100%);
  z-index:    0;
}

.skill-passport .container {
  position: relative;
  z-index:  1;
}

.skill-passport__inner {
  display:               grid;
  grid-template-columns: 1fr 1.4fr;
  gap:                   var(--space-10);
  align-items:           start;
  margin-bottom:         var(--space-12);
}

/* Passport card — premium dark + gold */
.passport-card {
  background:    linear-gradient(160deg, #0C1625 0%, #070D1A 100%);
  border:        2px solid var(--color-gold);
  border-radius: var(--radius-xl);
  padding:       var(--space-10) var(--space-8);
  text-align:    center;
  box-shadow:    var(--shadow-gold), inset 0 1px 0 rgba(201,168,76,0.1);
  position:      relative;
  overflow:      hidden;
}

/* Corner decoration */
.passport-card::before,
.passport-card::after {
  content:  '';
  position: absolute;
  width:    60px;
  height:   60px;
  border:   2px solid rgba(201, 168, 76, 0.3);
}

.passport-card::before {
  top:    var(--space-4);
  left:   var(--space-4);
  border-right:  none;
  border-bottom: none;
}

.passport-card::after {
  bottom: var(--space-4);
  right:  var(--space-4);
  border-left: none;
  border-top:  none;
}

.passport-card__top {
  margin-bottom: var(--space-6);
}

.passport-card__logo-area {
  margin-bottom: var(--space-6);
}

.passport-card__logo {
  margin:       0 auto;
  max-width:    180px;
  height:       auto;
  object-fit:   contain;
  filter:       brightness(0) invert(1);
  opacity:      0.85;
}

.passport-card__heading {
  font-family:   var(--font-display);
  font-size:     var(--text-2xl);
  font-weight:   var(--fw-black);
  color:         var(--color-gold);
  letter-spacing: 0.06em;
  line-height:   var(--lh-tight);
  margin-bottom: var(--space-4);
}

.passport-card__tagline {
  font-size:      var(--text-xs);
  font-weight:    var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--color-gold-light);
  opacity:        0.7;
}

.passport-card__seal {
  font-size:  3rem;
  color:      var(--color-gold);
  opacity:    0.5;
  animation:  pulse 3s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%       { opacity: 0.8; transform: scale(1.05); }
}

/* SCORE card */
.score-card {
  background:    var(--color-navy-800);
  border:        1px solid rgba(201, 168, 76, 0.2);
  border-radius: var(--radius-xl);
  padding:       var(--space-8);
}

.score-card__title {
  font-size:     var(--text-lg);
  font-weight:   var(--fw-semi);
  color:         var(--color-white);
  margin-bottom: var(--space-6);
  line-height:   var(--lh-snug);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(201, 168, 76, 0.15);
}

.score-card__title em {
  color: var(--color-gold);
}

/* SCORE table */
.score-card__table {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.score-table-header {
  display:             grid;
  grid-template-columns: 1.5fr 2fr 1fr;
  gap:                 var(--space-4);
  padding:             var(--space-2) var(--space-3);
  font-size:           var(--text-xs);
  font-weight:         var(--fw-bold);
  letter-spacing:      0.08em;
  text-transform:      uppercase;
  color:               var(--color-text-muted);
  border-bottom:       1px solid rgba(255,255,255,0.08);
  margin-bottom:       var(--space-2);
}

.score-table-row {
  display:             grid;
  grid-template-columns: 1.5fr 2fr 1fr;
  gap:                 var(--space-4);
  align-items:         center;
  padding:             var(--space-3) var(--space-3);
  border-radius:       var(--radius-sm);
  transition:          background var(--transition-fast);
}

.score-table-row:hover {
  background: rgba(255,255,255,0.03);
}

.score-table-row--crs {
  background:   rgba(201, 168, 76, 0.06);
  border-radius: var(--radius-sm);
}

.score-row__label {
  font-weight: var(--fw-semi);
  color:       var(--color-white);
  font-size:   var(--text-sm);
}

.score-row__stars {
  display: flex;
  gap:     2px;
}

.score-row__stars i {
  font-size: 0.9rem;
  color:     var(--color-gold);
}

.score-row__stars .ph-star { /* empty star */
  color: rgba(201, 168, 76, 0.25);
}

.score-row__yn {
  font-size:   var(--text-xs);
  font-weight: var(--fw-semi);
  color:       var(--color-text-muted);
}

.score-row__crs {
  font-family:  var(--font-display);
  font-size:    var(--text-xl);
  font-weight:  var(--fw-bold);
  color:        var(--color-gold);
}

.score-table-footer {
  display:             grid;
  grid-template-columns: 1.5fr 2fr 1fr;
  gap:                 var(--space-4);
  padding:             var(--space-4) var(--space-3) var(--space-2);
  margin-top:          var(--space-2);
  border-top:          1px solid rgba(201, 168, 76, 0.2);
  font-size:           var(--text-sm);
  color:               var(--color-text-muted);
}

.score-footer__recommend {
  color:       var(--color-teal);
  font-weight: var(--fw-semi);
}

.score-card__crs-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-2);
  margin-top:     var(--space-6);
  font-size:      var(--text-sm);
  color:          var(--color-text-muted);
  background:     rgba(201, 168, 76, 0.08);
  padding:        var(--space-2) var(--space-4);
  border-radius:  var(--radius-full);
  border:         1px solid rgba(201, 168, 76, 0.2);
}

.score-card__crs-badge strong {
  color:       var(--color-gold);
  font-size:   var(--text-base);
  font-family: var(--font-display);
}

/* Passport description block */
.passport-description {
  background:    var(--color-navy-700);
  border:        1px solid rgba(201, 168, 76, 0.15);
  border-left:   4px solid var(--color-gold);
  border-radius: var(--radius-lg);
  padding:       var(--space-8);
}

.passport-description__inner {
  max-width: 800px;
  margin:    0 auto;
}

.passport-description__title {
  font-size:     var(--text-xl);
  font-weight:   var(--fw-semi);
  color:         var(--color-gold);
  margin-bottom: var(--space-5);
  font-family:   var(--font-body);
}

.passport-description p {
  font-size:     var(--text-sm);
  color:         var(--color-text-muted);
  margin-bottom: var(--space-4);
  line-height:   var(--lh-relaxed);
}

.passport-description__quote {
  margin:  var(--space-6) 0;
  padding: var(--space-5) var(--space-6);
  background:   rgba(201, 168, 76, 0.06);
  border-radius: var(--radius-md);
  border:        1px solid rgba(201, 168, 76, 0.15);
}

.passport-description__quote blockquote {
  font-family: var(--font-display);
  font-size:   var(--text-lg);
  font-style:  italic;
  color:       var(--color-gold-pale);
  line-height: var(--lh-snug);
}


/* ================================================================
   16. VIDEO SECTION
   ================================================================ */

   .video-thumbnail {
  position: relative;
  cursor: pointer;
  border-radius: 16px;
  overflow: hidden;
}

.video-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}

/* Overlay */
.video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  transition: 0.3s;
}

.video-thumbnail:hover .video-overlay {
  background: rgba(0, 0, 0, 0.089);
}

/* Button */
.video-play-btn {
  background: #ff0000;
  color: #fff;
  padding: 12px 20px;
  border-radius: 50px;
  font-weight: bold;
  font-size: 14px;
}
.video-section {
  padding:    var(--space-24) 0;
  background: var(--color-navy);
}

.video-wrapper {
  max-width:     960px;
  margin:        0 auto;
}

.video-frame-wrapper iframe {
  width: 100%;
  height: 400px;
  border-radius: 12px;
}

.video-container {
  position:      relative;
  border-radius: var(--radius-xl);
  overflow:      hidden;
  box-shadow:    var(--shadow-lg);
  border:        1px solid rgba(255,255,255,0.08);
  aspect-ratio:  16 / 9;
  background:    var(--color-navy-800);
}

/* Thumbnail (pre-play state) */
.video-thumbnail {
  position:        absolute;
  inset:           0;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-6);
  cursor:          pointer;
}

.video-thumbnail__img {
  position:   absolute;
  inset:      0;
  background: linear-gradient(135deg, var(--color-navy-700) 0%, var(--color-navy-600) 100%);
  display:    flex;
  align-items: center;
  justify-content: center;
  color:      var(--color-text-muted);
  font-size:  var(--text-sm);
  font-style: italic;
  text-align: center;
  padding:    var(--space-8);
}

/* Dark overlay for thumbnail */
.video-thumbnail::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: rgba(10, 15, 30, 0.55);
  z-index:    1;
}

/* Play button */
.video-play-btn {
  position:        relative;
  z-index:         2;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             var(--space-3);
  color:           var(--color-white);
  font-size:       var(--text-sm);
  font-weight:     var(--fw-semi);
  letter-spacing:  0.08em;
  text-transform:  uppercase;
  background:      none;
  border:          none;
  cursor:          pointer;
  transition:      transform var(--transition-spring);
}

.video-play-btn i {
  font-size: 5rem;
  color:     var(--color-gold);
  filter:    drop-shadow(0 0 20px rgba(201,168,76,0.5));
  transition: filter var(--transition-base), transform var(--transition-spring);
}

.video-play-btn:hover i {
  filter:    drop-shadow(0 0 32px rgba(201,168,76,0.7));
  transform: scale(1.08);
}

/* IFrame wrapper */
.video-frame-wrapper {
  position: absolute;
  inset:    0;
}

.video-frame-wrapper iframe {
  width:  100%;
  height: 100%;
}


/* ================================================================
   17. CTA SECTION
   ================================================================ */
.cta-section {
  padding:  var(--space-24) 0;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.cta-section__bg {
  position:   absolute;
  inset:      0;
  background: linear-gradient(135deg, #0C1422 0%, #0A1A2E 50%, #0D1120 100%);
  z-index:    0;
}

/* Glowing orbs */
.cta-section__orb {
  position:      absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index:       0;
}

.cta-section__orb--1 {
  width:    600px;
  height:   600px;
  top:      -200px;
  left:     -150px;
  background: radial-gradient(circle, rgba(13,158,138,0.12) 0%, transparent 70%);
}

.cta-section__orb--2 {
  width:    500px;
  height:   500px;
  bottom:  -150px;
  right:   -100px;
  background: radial-gradient(circle, rgba(201,168,76,0.1) 0%, transparent 70%);
}

.cta-section .container {
  position: relative;
  z-index:  1;
}

.cta-section__inner {
  max-width: 720px;
  margin:    0 auto;
}

.cta-section__title {
  font-size:     clamp(2.5rem, 5vw, 4rem);
  line-height:   var(--lh-tight);
  margin-bottom: var(--space-6);
  color:         var(--color-white);
}

.cta-section__text {
  font-size:     var(--text-md);
  color:         rgba(255,255,255,0.6);
  max-width:     560px;
  margin:        0 auto var(--space-10);
  line-height:   var(--lh-relaxed);
}

.cta-section__actions {
  display:     flex;
  align-items: center;
  justify-content: center;
  gap:         var(--space-5);
  flex-wrap:   wrap;
}


/* ================================================================
   18. FOOTER
   ================================================================ */
.footer {
  background:   var(--color-navy-800);
  border-top:   1px solid rgba(255,255,255,0.07);
}

.footer__main {
  display:               grid;
  grid-template-columns: 1.8fr 1fr 1fr 1.2fr;
  gap:                   var(--space-12);
  padding:               var(--space-16) var(--space-8);
}

/* Brand column */
.footer__logo {
  height:        48px;
  width:         auto;
  object-fit:    contain;
  margin-bottom: var(--space-5);
  filter:        brightness(0.9);
}

.footer__tagline {
  font-size:     var(--text-sm);
  color:         var(--color-text-muted);
  line-height:   var(--lh-relaxed);
  margin-bottom: var(--space-6);
  max-width:     280px;
}

.footer__social {
  display: flex;
  gap:     var(--space-3);
}

.footer__social-icon {
  width:           40px;
  height:          40px;
  border-radius:   var(--radius-md);
  background:      rgba(255,255,255,0.06);
  border:          1px solid rgba(255,255,255,0.08);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.1rem;
  color:           var(--color-text-muted);
  transition:
    background   var(--transition-base),
    color        var(--transition-base),
    border-color var(--transition-base),
    transform    var(--transition-spring);
}

.footer__social-icon:hover {
  background:   rgba(201, 168, 76, 0.12);
  color:        var(--color-gold);
  border-color: rgba(201, 168, 76, 0.3);
  transform:    translateY(-3px);
}

/* Column titles */
.footer__col-title {
  font-family:    var(--font-body);
  font-size:      var(--text-xs);
  font-weight:    var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--color-gold);
  margin-bottom:  var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom:  1px solid rgba(201, 168, 76, 0.2);
}

/* Footer links */
.footer__links {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}

.footer__link {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  font-size:   var(--text-sm);
  color:       var(--color-text-muted);
  transition:  color var(--transition-base), gap var(--transition-base);
}

.footer__link i {
  font-size: 0.9rem;
  color:     var(--color-orange);
  flex-shrink: 0;
}

.footer__link:hover {
  color: var(--color-white);
  gap:   var(--space-3);
}

/* Contact info */
.footer__contact-item {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--space-2);
  font-size:     var(--text-sm);
  color:         var(--color-text-muted);
  margin-bottom: var(--space-4);
  line-height:   var(--lh-snug);
}

.footer__contact-item i {
  font-size:   1rem;
  color:       var(--color-orange);
  flex-shrink: 0;
  margin-top:  2px;
}

.footer__contact-link {
  color:      var(--color-text-muted);
  transition: color var(--transition-base);
}

.footer__contact-link:hover {
  color: var(--color-gold);
}

/* Map placeholder */
.footer__map-placeholder {
  border-radius: var(--radius-md);
  overflow:      hidden;
  border:        1px solid rgba(255,255,255,0.08);
}

.footer__map-placeholder iframe {
  display:    block;
  filter:     grayscale(30%) brightness(0.85);
  transition: filter var(--transition-slow);
}

.footer__map-placeholder:hover iframe {
  filter: none;
}

/* Footer bottom bar */
.footer__bottom {
  background:   var(--color-navy);
  border-top:   1px solid rgba(255,255,255,0.05);
  padding:      var(--space-5) var(--space-8);
}

.footer__bottom-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.footer__copy {
  font-size: var(--text-xs);
  color:     var(--color-text-muted);
}

.footer__credit {
  font-size: var(--text-xs);
  color:     var(--color-text-muted);
}

.footer__credit-link {
  color:      var(--color-orange);
  font-weight: var(--fw-semi);
  transition: color var(--transition-base);
}

.footer__credit-link:hover {
  color: var(--color-orange-light);
}


/* ================================================================
   19. BACK TO TOP
   ================================================================ */
.back-to-top {
  position:        fixed;
  bottom:          var(--space-8);
  right:           var(--space-8);
  width:           48px;
  height:          48px;
  border-radius:   var(--radius-full);
  background:      var(--color-gold);
  color:           var(--color-navy);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.25rem;
  box-shadow:      var(--shadow-md), var(--shadow-gold);
  z-index:         var(--z-sticky);
  transition:
    opacity     var(--transition-base),
    transform   var(--transition-spring),
    visibility  var(--transition-base);
  opacity:         0;
  visibility:      hidden;
  transform:       translateY(12px);
}

.back-to-top:not([hidden]) {
  opacity:    1;
  visibility: visible;
  transform:  translateY(0);
}

.back-to-top[hidden] {
  display:    flex; /* Override hidden — use opacity instead */
  opacity:    0;
  visibility: hidden;
  transform:  translateY(12px);
}

.back-to-top:hover {
  transform:  translateY(-3px) scale(1.05);
  box-shadow: var(--shadow-lg), 0 0 32px rgba(201,168,76,0.4);
}


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

  /* Navbar */
  .navbar__nav    { display: none; }
  .navbar__cta    { display: none; }
  .navbar__hamburger { display: flex; }
  .mobile-menu       { display: flex; }

  /* Hero */
  .hero__inner {
    grid-template-columns: 1fr;
    gap:                   var(--space-12);
  }

  .hero__form-wrapper {
    position: static;
  }

  /* Stats Bar */
  .stats-bar__list {
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-6);
  }

  .stats-bar__item:nth-child(4)::before,
  .stats-bar__item:nth-child(5)::before {
    display: none;
  }

  /* Deliverables */
  .deliverables__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .deliverable-card--passport {
    grid-column: span 1;
  }

  /* GIP types */
  .gip__types-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Skill Passport */
  .skill-passport__inner {
    grid-template-columns: 1fr;
  }

  .passport-card {
    max-width: 400px;
    margin:    0 auto;
  }

  /* Add-ons */
  .addons__grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Footer */
  .footer__main {
    grid-template-columns: 1fr 1fr;
    gap:                   var(--space-10);
  }
}


/* ================================================================
   21. RESPONSIVE — MOBILE (≤ 768px)
   ================================================================ */
@media (max-width: 768px) {

  /* Reduce section padding on mobile */
  .hero,
  .deliverables,
  .addons,
  .gip,
  .skill-passport,
  .video-section,
  .cta-section {
    padding-top:    var(--space-16);
    padding-bottom: var(--space-16);
  }

  /* Navbar */
  .navbar__logo-img {
    height: 36px;
  }

  /* Hero */
  .hero {
    padding-top: calc(var(--navbar-height) + var(--space-10));
  }

  .hero__highlights {
    grid-template-columns: 1fr;
  }

  /* Stats bar */
  .stats-bar__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-bar__item:nth-child(3)::before {
    display: none;
  }

  /* Deliverables */
  .deliverables__grid {
    grid-template-columns: 1fr;
  }

  .deliverable-card {
    flex-direction: column;
    gap:            var(--space-4);
  }

  /* Add-ons */
  .addons__grid {
    grid-template-columns: 1fr;
  }

  /* GIP types */
  .gip__types-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* GIP detail cards */
  .gip-detail-card {
    flex-direction: column;
    gap:            var(--space-4);
  }

  .gip-detail-card__label {
    width:  auto;
    height: auto;
    padding: var(--space-2) var(--space-5);
    align-self: flex-start;
  }

  /* CTA */
  .cta-section__actions {
    flex-direction: column;
    align-items:    center;
  }

  .cta-section__actions .btn {
    width: 100%;
    max-width: 320px;
  }

  /* Footer */
  .footer__main {
    grid-template-columns: 1fr;
    gap:                   var(--space-8);
    padding:               var(--space-10) var(--space-5);
  }

  .footer__bottom-inner {
    flex-direction: column;
    text-align:     center;
    gap:            var(--space-2);
  }

  /* Back to top */
  .back-to-top {
    bottom: var(--space-5);
    right:  var(--space-5);
    width:  40px;
    height: 40px;
  }
}


/* ================================================================
   22. RESPONSIVE — SMALL MOBILE (≤ 480px)
   ================================================================ */
@media (max-width: 480px) {

  /* Smaller section headers */
  .section-title {
    font-size: var(--text-2xl);
  }

  /* Stats bar */
  .stats-bar__list {
    grid-template-columns: 1fr 1fr;
  }

  .stats-bar__item::before {
    display: none !important;
  }

  /* Admission card — tighten on tiny screens */
  .admission-card {
    padding: var(--space-6);
  }

  /* Pricing cards */
  .pricing-card {
    padding: var(--space-6);
  }

  /* GIP types */
  .gip__types-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Passport inner */
  .skill-passport__inner {
    gap: var(--space-6);
  }

  /* Score table — tight */
  .score-table-header,
  .score-table-row,
  .score-table-footer {
    grid-template-columns: 1fr 1.5fr 0.8fr;
    gap:                   var(--space-2);
    padding-left:          var(--space-2);
    padding-right:         var(--space-2);
  }
}