/* =====================================================================
   AIVEX ACADEMY — MAIN STYLESHEET
   Structure:
   1. Font faces (self-hosted Plus Jakarta Sans)
   2. Design tokens (CSS variables) — brand colors live here
   3. Reset & base
   4. Layout utilities
   5. Typography
   6. Buttons & form elements
   7. Header & navigation
   8. Hero (background image)
   9. Section eyebrows, cards, grids
   10. Learning tracks (multi-department)
   11. Process / steps
   12. Blog components
   13. CTA banner & footer
   14. Page header banner (inner pages)
   15. About-page specific
   16. Contact-page specific
   17. Accordion (FAQ)
   18. Scroll-reveal & motion
   19. Responsive breakpoints
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. FONT FACES — self-hosted, no external requests, fast + private
   --------------------------------------------------------------------- */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/pjs-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/pjs-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/pjs-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/pjs-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/pjs-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------
   2. DESIGN TOKENS
   Swap the values in this block once your official brand palette and
   logo are ready — every component below references these variables,
   so the whole site re-themes from here.
   --------------------------------------------------------------------- */
:root{
  /* ---- Brand colors — a sophisticated near-black neutral foundation
     with the logo's indigo (#4C37DE) and amber (#FFB30B) used as
     deliberate accents, not as the dominant color everywhere. ---- */
  --navy-900:#0E0D13;     /* deepest near-black — footer, deep gradients */
  --navy-800:#18171F;     /* structural dark — headings, dark section backgrounds */
  --navy-700:#333140;     /* lighter dark neutral — hover states, borders on dark */
  --navy-600:#4A4759;     /* lightest dark neutral — focus borders, subtle dark accents */

  --orange-500:#FFB30B;   /* AMBER (from the logo) — primary CTA buttons, highlights (use WITH dark ink text) */
  --orange-700:#8A5A00;   /* deep gold — safe for text/links on light backgrounds */
  --orange-100:#FFF0D1;   /* tint — chips, soft backgrounds */

  --teal-500:#4C37DE;     /* INDIGO (from the logo) — secondary accent: links, active states, tags/icons */
  --teal-700:#4230C4;     /* deep indigo — safe for text/links on light backgrounds */
  --teal-100:#EBE7FC;     /* tint — chips, soft backgrounds */

  --white:#FFFFFF;
  --cloud:#F6F5F8;
  --cloud-200:#EFEEF2;
  --ink:#18171F;
  --slate:#56545F;
  --slate-300:#726F7D;
  --border:#E3E1E8;
  --border-dark:rgba(255,255,255,.14);

  /* Text-on-color pairing kept consistent for accessibility. Amber is
     bright, so it always pairs with dark ink text, never white. Indigo
     is dark enough to pair with white text when used as a background. */
  --on-orange:var(--ink);

  /* ---- Type ---- */
  --font-sans:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ---- Radii ---- */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-full:999px;

  /* ---- Shadows ---- */
  --shadow-sm:0 1px 2px rgba(24,23,31,.07), 0 1px 1px rgba(24,23,31,.05);
  --shadow-md:0 8px 24px -8px rgba(24,23,31,.18);
  --shadow-lg:0 24px 48px -16px rgba(24,23,31,.26);

  /* ---- Layout ---- */
  --container:1220px;
  --container-narrow:820px;
  --gutter:1.25rem;
  --section-y:clamp(3.5rem, 7vw, 6.5rem);

  /* ---- Motion ---- */
  --ease:cubic-bezier(.4,0,.2,1);
  --dur-fast:.18s;
  --dur:.32s;
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:hidden;
  width:100%;
  /* Stops mobile browsers' horizontal rubber-band/overscroll from ever
     exposing anything positioned outside the viewport (e.g. the closed
     mobile nav drawer) when a user swipes sideways. */
  overscroll-behavior-x:none;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

body{
  font-family:var(--font-sans);
  font-weight:400;
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  width:100%;
  max-width:100%;
  overscroll-behavior-x:none;
  touch-action:pan-y pinch-zoom; /* disable horizontal swipe panning, keep vertical scroll + pinch zoom */
}

img, svg{ display:block; max-width:100%; }
img{ height:auto; }

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

ul, ol{ list-style:none; }

button, input, textarea, select{
  font-family:inherit;
  font-size:inherit;
  color:inherit;
}
button{ cursor:pointer; background:none; border:none; }

h1,h2,h3,h4{
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.15;
  color:var(--navy-800);
}

/* Visible, consistent keyboard focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline:2.5px solid var(--orange-500);
  outline-offset:3px;
  border-radius:4px;
}

.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.skip-link{
  position:absolute;
  left:1rem; top:-4rem;
  background:var(--navy-800);
  color:var(--white);
  padding:.75rem 1.25rem;
  border-radius:var(--r-sm);
  z-index:1000;
  transition:top var(--dur-fast) var(--ease);
  font-weight:600;
}
.skip-link:focus{ top:1rem; }

/* ---------------------------------------------------------------------
   4. LAYOUT UTILITIES
   --------------------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container-narrow{
  width:100%;
  max-width:var(--container-narrow);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{ padding-block:var(--section-y); }
.section-alt{ background:var(--cloud); }
.section-navy{ background:var(--navy-800); color:var(--white); }
.section-navy h2, .section-navy h3{ color:var(--white); }
.section-tight{ padding-block:0 var(--section-y); }

.section-head{
  max-width:640px;
  margin-bottom:clamp(2rem, 4vw, 3rem);
}
.section-head.center{ margin-inline:auto; text-align:center; }

.grid{ display:grid; gap:1.5rem; }
.grid-2{ grid-template-columns:1fr; }
.grid-3{ grid-template-columns:1fr; }
.grid-4{ grid-template-columns:1fr; }

.flex{ display:flex; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; }
.flex-center{ display:flex; align-items:center; justify-content:center; }
.flex-wrap{ flex-wrap:wrap; }
.gap-sm{ gap:.5rem; }
.gap-md{ gap:1rem; }
.gap-lg{ gap:2rem; }

.mt-0{margin-top:0;}
.text-center{ text-align:center; }

/* ---------------------------------------------------------------------
   5. TYPOGRAPHY
   --------------------------------------------------------------------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--orange-700);
  margin-bottom:.85rem;
}
.eyebrow::before{
  content:"";
  width:10px; height:2px;
  background:var(--orange-500);
  border-radius:var(--r-full);
  flex-shrink:0;
}
.eyebrow.on-navy{ color:#FFCB66; }
.eyebrow.teal{ color:var(--teal-700); }
.eyebrow.teal::before{ background:var(--teal-500); }

h1{ font-size:clamp(2rem, 5.5vw + 1rem, 3.6rem); }
h2{ font-size:clamp(1.6rem, 3vw + 1rem, 2.5rem); }
h3{ font-size:1.2rem; letter-spacing:-.01em; }
h4{ font-size:1.02rem; }

.lede{
  font-size:clamp(1.02rem, 1.4vw + .6rem, 1.2rem);
  color:var(--slate);
  line-height:1.65;
}
p{ color:var(--slate); }
p + p{ margin-top:1em; }

.text-navy{ color:var(--navy-800) !important; }
.text-white{ color:var(--white) !important; }
.text-slate-light{ color:rgba(255,255,255,.75) !important; }

/* ---------------------------------------------------------------------
   6. BUTTONS & FORM ELEMENTS
   --------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  font-weight:700;
  font-size:.95rem;
  padding:.95rem 1.6rem;
  border-radius:var(--r-full);
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  white-space:nowrap;
  border:1.5px solid transparent;
}
.btn svg{ width:18px; height:18px; flex-shrink:0; transition:transform var(--dur-fast) var(--ease); }

.btn-primary{
  background:var(--orange-500);
  color:var(--on-orange);
  box-shadow:var(--shadow-sm);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-primary:hover svg{ transform:translateX(3px); }

.btn-dark{
  background:var(--navy-800);
  color:var(--white);
}
.btn-dark:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); background:var(--navy-700); }

.btn-outline{
  background:transparent;
  border-color:var(--border);
  color:var(--navy-800);
}
.btn-outline:hover{ border-color:var(--navy-800); background:var(--cloud); }

.btn-outline-light{
  background:transparent;
  border-color:rgba(255,255,255,.4);
  color:var(--white);
}
.btn-outline-light:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.7); }

.btn-block{ width:100%; }
.btn-sm{ padding:.65rem 1.15rem; font-size:.85rem; }

.btn-row{ display:flex; flex-wrap:wrap; gap:.9rem; }

/* Forms */
.field{ margin-bottom:1.25rem; }
.field label{
  display:block;
  font-size:.85rem;
  font-weight:600;
  color:var(--navy-800);
  margin-bottom:.45rem;
}
.field .required{ color:var(--orange-700); }

.field input,
.field select,
.field textarea{
  width:100%;
  border:1.5px solid var(--border);
  background:var(--white);
  border-radius:var(--r-sm);
  padding:.85rem 1rem;
  font-size:.95rem;
  color:var(--ink);
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--navy-600);
  box-shadow:0 0 0 4px rgba(76,55,222,.12);
  outline:none;
}
.field textarea{ resize:vertical; min-height:130px; }
.field-row{ display:grid; gap:1.25rem; grid-template-columns:1fr; }

.form-note{ font-size:.82rem; color:var(--slate-300); margin-top:.4rem; }

.form-status{
  display:none;
  padding:.9rem 1.1rem;
  border-radius:var(--r-sm);
  font-size:.9rem;
  font-weight:600;
  margin-bottom:1.25rem;
}
.form-status.show{ display:block; }
.form-status.success{ background:var(--teal-100); color:var(--teal-700); }
.form-status.error{ background:#FDE8E4; color:#B3311A; }

/* ---------------------------------------------------------------------
   7. HEADER & NAVIGATION
   --------------------------------------------------------------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:900;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.site-header.is-scrolled{
  border-bottom-color:var(--border);
  box-shadow:0 4px 20px -12px rgba(76,55,222,.22);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:80px;
  gap:1rem;
}

/* Groups nav + CTA + hamburger with predictable, generous spacing —
   prevents the "congested" look that pure space-between across 3+
   top-level flex items can produce at in-between desktop widths. */
.header-right{
  display:flex;
  align-items:center;
  gap:1.75rem;
}

.brand{ display:flex; align-items:center; z-index:2; }
.brand-logo{ height:40px; width:auto; display:block; }
.footer-brand .brand-logo{ height:46px; }

/* Mobile off-canvas nav drawer.
   `visibility` + `pointer-events` are toggled alongside `transform` (not
   just transform alone) so the closed drawer can never be swiped into
   view or interacted with by accident on touch devices — only JS adding
   .is-open makes it visible/interactive again. */
.main-nav{
  position:fixed;
  inset:0 0 0 auto;
  width:min(88vw, 380px);
  height:100dvh;
  background:var(--navy-800);
  padding:6.5rem 2rem 2.5rem;
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  visibility:hidden;
  pointer-events:none;
  transition:transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  overflow-y:auto;
}
.main-nav.is-open{
  transform:translateX(0);
  visibility:visible;
  pointer-events:auto;
  transition:transform var(--dur) var(--ease);
}

.nav-links{ display:flex; flex-direction:column; gap:.2rem; margin-bottom:2rem; }
.nav-links a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:1.15rem;
  font-weight:700;
  color:var(--white);
  padding:.9rem .25rem;
  border-bottom:1px solid var(--border-dark);
}
.nav-links a svg{ width:18px; height:18px; opacity:.5; }
.nav-links a.is-active{ color:var(--white); background:rgba(76,55,222,.35); border-radius:var(--r-sm); padding-inline:.6rem; margin-inline:-.6rem; }

.nav-meta{ margin-top:auto; padding-top:1.5rem; }
.nav-meta p{ color:rgba(255,255,255,.6); font-size:.85rem; margin-bottom:1rem; }
.nav-meta .btn{ width:100%; }

.nav-scrim{
  position:fixed; inset:0;
  background:rgba(7,21,40,.5);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
  z-index:850;
}
.nav-scrim.is-open{ opacity:1; visibility:visible; pointer-events:auto; }

.nav-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  border-radius:var(--r-sm);
  z-index:2;
  flex-shrink:0;
}
.nav-toggle .bars{ position:relative; width:20px; height:14px; }
.nav-toggle .bars span{
  position:absolute; left:0; width:100%; height:2px;
  background:var(--navy-800); border-radius:2px;
  transition:transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), top var(--dur-fast) var(--ease);
}
.nav-toggle .bars span:nth-child(1){ top:0; }
.nav-toggle .bars span:nth-child(2){ top:6px; }
.nav-toggle .bars span:nth-child(3){ top:12px; }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(1){ top:6px; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(3){ top:6px; transform:rotate(-45deg); }

.header-cta{ display:none; }

body.nav-open{ overflow:hidden; }

/* ---------------------------------------------------------------------
   8. HERO — image carousel background with a scrim for text contrast
   --------------------------------------------------------------------- */
.hero{
  position:relative;
  isolation:isolate;
  padding-block:clamp(1.5rem, 6vw, 6rem) clamp(3rem, 8vw, 4rem);
  background:var(--navy-900); /* shows instantly while the first slide loads */
  overflow:clip;
}

.hero-carousel{ position:absolute; inset:0; }
.hero-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:0;
  transition:opacity 1.4s var(--ease);
}
.hero-slide.is-active{ opacity:1; }

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg, rgba(6,14,26,.86), rgba(6,14,26,.8));
  pointer-events:none;
}

/* Prev/next controls — hidden on small phones to keep the hero
   uncluttered there; swipe + dots cover mobile navigation instead. */
.hero-arrow{
  display:none;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:44px; height:44px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  align-items:center;
  justify-content:center;
  color:var(--white);
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.hero-arrow:hover{ background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.35); }
.hero-arrow svg{ width:19px; height:19px; }
.hero-arrow.prev{ left:1rem; }
.hero-arrow.next{ right:1rem; }

.hero-inner{
  position:relative;
  z-index:2;
  max-width:660px;
}
.hero-inner .lede{ margin:1.15rem 0 1.75rem; max-width:52ch; }

.hero-dots{
  position:relative;
  z-index:2;
  display:flex;
  gap:.35rem;
  margin-top:2rem;
}
.hero-dot{
  width:36px; height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:none;
}
.hero-dot span{
  width:8px; height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.35);
  transition:background var(--dur-fast) var(--ease), width var(--dur-fast) var(--ease);
}
.hero-dot:hover span{ background:rgba(255,255,255,.65); }
.hero-dot.is-active span{ width:22px; border-radius:var(--r-full); background:var(--orange-500); }

.trust-row{
  display:flex;
  flex-direction:column;
  gap:.65rem;
  margin-top:2rem;
}
.trust-row li{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-size:.88rem;
  font-weight:600;
  color:var(--navy-700);
}
.trust-row svg{
  width:20px; height:20px;
  color:var(--teal-700);
  background:var(--teal-100);
  border-radius:var(--r-full);
  padding:3px;
  flex-shrink:0;
}
.trust-row.on-navy li{ color:rgba(255,255,255,.92); }
.trust-row.on-navy svg{ color:#B8ACF7; background:rgba(255,255,255,.12); }

/* ---------------------------------------------------------------------
   9. EYEBROWS, CARDS, GRIDS
   --------------------------------------------------------------------- */
.card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:1.75rem;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; }

.icon-tile{
  width:52px; height:52px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.1rem;
  flex-shrink:0;
}
.icon-tile svg{ width:26px; height:26px; }
.icon-tile.navy{ background:var(--navy-800); color:var(--white); }
.icon-tile.orange{ background:var(--orange-100); color:var(--orange-700); }
.icon-tile.teal{ background:var(--teal-100); color:var(--teal-700); }

.feature-card h3{ margin-bottom:.5rem; }
.feature-card p{ font-size:.94rem; }

/* Course cards */
.course-card{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
}
.course-card .corner{
  position:absolute;
  top:14px; right:14px;
  width:14px; height:14px;
  border-top:2px solid var(--border);
  border-right:2px solid var(--border);
  opacity:.9;
}
.course-tag{
  display:inline-flex;
  align-self:flex-start;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--teal-700);
  background:var(--teal-100);
  padding:.3rem .65rem;
  border-radius:var(--r-full);
  margin-bottom:1rem;
}
.course-tag.is-dept-accounting{ color:var(--orange-700); background:var(--orange-100); }
.course-card h3{ margin-bottom:.55rem; }
.course-card p{ font-size:.92rem; margin-bottom:1.1rem; }
.course-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.1rem;
  font-size:.8rem;
  color:var(--slate);
  margin-top:auto;
  padding-top:1.1rem;
  border-top:1px solid var(--border);
  margin-bottom:1.1rem;
}
.course-meta span{ display:flex; align-items:center; gap:.35rem; font-weight:600; color:var(--navy-700); }
.course-meta svg{ width:15px; height:15px; color:var(--slate-300); flex-shrink:0; }
.course-card .btn{ align-self:flex-start; }

/* Stat-free "trust" chips row used under headings, and course filter tabs */
.chip-row{ display:flex; flex-wrap:wrap; gap:.6rem; }
.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.82rem; font-weight:700;
  padding:.5rem .9rem;
  border-radius:var(--r-full);
  background:var(--cloud);
  color:var(--navy-700);
  border:1px solid var(--border);
}
.chip svg{ width:15px; height:15px; color:var(--orange-700); }
button.chip{ transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
button.chip:hover{ border-color:var(--navy-700); }
button.chip.is-active{ background:var(--navy-800); border-color:var(--navy-800); color:var(--white); }

/* ---------------------------------------------------------------------
   10. LEARNING TRACKS (multi-department)
   --------------------------------------------------------------------- */
.track-card{
  display:flex;
  flex-direction:column;
  height:100%;
}
.track-card .track-count{
  display:inline-flex;
  align-self:flex-start;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--navy-700);
  background:var(--cloud);
  padding:.3rem .7rem;
  border-radius:var(--r-full);
  margin-bottom:.9rem;
}
.track-card p{ font-size:.92rem; margin-bottom:1.25rem; }
.track-card .btn{ margin-top:auto; align-self:flex-start; }

.track-card.is-upcoming{
  background:var(--cloud);
  border:1.5px dashed var(--border);
  box-shadow:none;
}
.track-card.is-upcoming:hover{ transform:none; box-shadow:none; }
.track-card.is-upcoming .icon-tile{ background:var(--white); color:var(--slate-300); border:1.5px dashed var(--border); }

/* ---------------------------------------------------------------------
   11. PROCESS / STEPS (genuine sequence — numbered)
   --------------------------------------------------------------------- */
.steps{ display:grid; gap:1.5rem; counter-reset:step; }
.step{
  position:relative;
  padding-left:3.5rem;
}
.step::before{
  counter-increment:step;
  content:counter(step, decimal-leading-zero);
  position:absolute;
  left:0; top:0;
  width:2.5rem; height:2.5rem;
  border-radius:10px;
  background:var(--navy-800);
  color:var(--orange-500);
  font-weight:800;
  font-size:.9rem;
  display:flex; align-items:center; justify-content:center;
}
.step h3{ font-size:1.05rem; margin-bottom:.35rem; }
.step p{ font-size:.92rem; }
.step:not(:last-child){ padding-bottom:1.5rem; }
.step:not(:last-child)::after{
  content:"";
  position:absolute;
  left:1.25rem; top:2.5rem;
  width:2px;
  height:calc(100% - 2.5rem);
  background:repeating-linear-gradient(180deg, var(--border) 0 6px, transparent 6px 12px);
}

/* ---------------------------------------------------------------------
   12. BLOG COMPONENTS
   --------------------------------------------------------------------- */
.blog-card{ display:flex; flex-direction:column; height:100%; }
.blog-thumb{
  aspect-ratio:16/10;
  border-radius:var(--r-md);
  background:linear-gradient(140deg, var(--navy-700), var(--navy-900));
  position:relative;
  overflow:hidden;
  margin-bottom:1.25rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
.blog-thumb svg{ width:38px; height:38px; color:rgba(255,255,255,.35); }
.blog-thumb .cat-tag{
  position:absolute;
  left:.9rem; top:.9rem;
  background:rgba(255,255,255,.94);
  color:var(--navy-800);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:.35rem .65rem;
  border-radius:var(--r-full);
}
.blog-meta{ display:flex; gap:.9rem; font-size:.78rem; color:var(--slate-300); font-weight:600; margin-bottom:.6rem; }
.blog-card h3{ font-size:1.08rem; margin-bottom:.5rem; }
.blog-card p{ font-size:.9rem; margin-bottom:1rem; }
.read-more{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:700; font-size:.88rem; color:var(--navy-800);
  margin-top:auto;
}
.read-more svg{ width:16px; height:16px; transition:transform var(--dur-fast) var(--ease); }
.blog-card:hover .read-more svg{ transform:translateX(4px); }

/* ---------------------------------------------------------------------
   13. CTA BANNER & FOOTER
   --------------------------------------------------------------------- */
.cta-banner{
  position:relative;
  background:var(--navy-800);
  border-radius:var(--r-lg);
  padding:clamp(2.25rem, 5vw, 3.5rem);
  overflow:hidden;
  text-align:center;
}
.cta-banner h2{ color:var(--white); max-width:24ch; margin-inline:auto; }
.cta-banner p{ color:rgba(255,255,255,.68); max-width:52ch; margin:1rem auto 1.75rem; }
.cta-banner .btn-row{ justify-content:center; }
/* Mobile-first: stack the heading/text block above the buttons instead of
   forcing them into a cramped row via the shared .flex-between utility. */
.cta-banner .flex-between{ flex-direction:column; align-items:stretch; gap:1.5rem; }
.cta-banner .btn-row .btn{ width:100%; }
.cta-glow{
  position:absolute;
  width:420px; height:420px;
  background:radial-gradient(circle, rgba(255,179,11,.24), transparent 70%);
  border-radius:50%;
  top:-160px; right:-120px;
  pointer-events:none;
}

.site-footer{ background:var(--navy-900); color:rgba(255,255,255,.65); padding-top:clamp(3rem,6vw,4.5rem); }
.footer-top{ display:grid; gap:2.5rem; padding-bottom:2.5rem; }
.footer-brand p{ color:rgba(255,255,255,.55); font-size:.9rem; margin:1rem 0 1.25rem; max-width:32ch; }

.social-row{ display:flex; gap:.6rem; }
.social-row a{
  width:38px; height:38px;
  border-radius:var(--r-full);
  background:rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.1);
  transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.social-row a:hover{ background:var(--orange-500); transform:translateY(-3px); }
.social-row svg{ width:17px; height:17px; color:var(--white); }

.footer-col h4{ color:var(--white); font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:1.1rem; }
.footer-col ul{ display:flex; flex-direction:column; gap:.7rem; }
.footer-col a{ font-size:.92rem; transition:color var(--dur-fast) var(--ease); }
.footer-col a:hover{ color:var(--white); }
.footer-col .contact-item{ display:flex; gap:.65rem; align-items:flex-start; font-size:.92rem; }
.footer-col .contact-item svg{ width:17px; height:17px; margin-top:.15rem; color:var(--orange-500); flex-shrink:0; }

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding:1.5rem 0;
  display:flex;
  flex-direction:column;
  gap:.75rem;
  font-size:.8rem;
  color:rgba(255,255,255,.45);
}
.footer-bottom .legal-links{ display:flex; gap:1.25rem; flex-wrap:wrap; }

/* ---------------------------------------------------------------------
   14. PAGE HEADER BANNER (inner pages)
   --------------------------------------------------------------------- */
.page-banner{
  position:relative;
  background:var(--navy-800);
  color:var(--white);
  padding-block:1.5rem 3rem;
  overflow:clip;
}
.page-banner .breadcrumb{
  display:flex; align-items:center; gap:.5rem;
  font-size:.85rem; font-weight:600;
  color:rgba(255,255,255,.55);
  margin-bottom:1rem;
  flex-wrap:wrap;
}
.page-banner .breadcrumb a:hover{ color:var(--white); }
.page-banner .breadcrumb svg{ width:14px; height:14px; }
.page-banner h1{ color:var(--white); font-size:clamp(1.9rem, 5vw, 2.9rem); max-width:26ch; }
.page-banner p{ color:rgba(255,255,255,.62); margin-top:.9rem; max-width:56ch; font-size:1.02rem; }

/* ---------------------------------------------------------------------
   15. ABOUT PAGE
   --------------------------------------------------------------------- */
.value-card{ text-align:left; }
.value-card .icon-tile{ margin-bottom:1rem; }

.people-card{ text-align:center; }
.people-avatar{
  width:84px; height:84px;
  border-radius:50%;
  background:var(--cloud-200);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1rem;
  border:2px dashed var(--border);
}
.people-avatar svg{ width:34px; height:34px; color:var(--slate-300); }
.people-card h3{ font-size:1rem; margin-bottom:.15rem; }
.people-card .role{ font-size:.82rem; font-weight:700; color:var(--orange-700); margin-bottom:.6rem; }
.people-card p{ font-size:.85rem; }
.people-card .placeholder-note{
  font-size:.72rem;
  color:var(--slate-300);
  font-style:italic;
  margin-top:.5rem;
}

.mv-card{ background:var(--white); }
.mv-card .icon-tile{ margin-bottom:1.1rem; }

.timeline-note{
  display:flex; gap:1rem; align-items:flex-start;
  background:var(--cloud);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:1.25rem 1.4rem;
  margin-top:2.5rem;
}
.timeline-note svg{ width:22px; height:22px; color:var(--teal-700); flex-shrink:0; margin-top:.15rem; }
.timeline-note p{ font-size:.9rem; color:var(--navy-700); }
.timeline-note strong{ color:var(--navy-800); }

.manifest-details{ display:flex; flex-direction:column; gap:1.1rem; }
.manifest-details .row{ display:flex; justify-content:space-between; gap:1rem; font-size:.85rem; }
.manifest-details .k{ color:var(--slate-300); font-weight:600; }
.manifest-details .v{ color:var(--navy-800); font-weight:700; text-align:right; }

/* ---------------------------------------------------------------------
   16. CONTACT PAGE
   --------------------------------------------------------------------- */
.contact-layout{ display:grid; gap:2.5rem; align-items:start; }
.contact-info-card{
  background:var(--navy-800);
  color:var(--white);
  border-radius:var(--r-lg);
  padding:2rem;
}
.contact-info-card h3{ color:var(--white); font-size:1.15rem; margin-bottom:1.5rem; }
.contact-info-list{ display:flex; flex-direction:column; gap:1.35rem; }
.contact-info-list .item{ display:flex; gap:.9rem; align-items:flex-start; }
.contact-info-list .ico{
  width:42px; height:42px; border-radius:11px;
  background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.contact-info-list svg{ width:19px; height:19px; color:var(--orange-500); }
.contact-info-list .label{ font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:.25rem; }
.contact-info-list .value{ font-size:.95rem; font-weight:600; }
.contact-info-card .social-row{ margin-top:2rem; }

.map-frame{
  margin-top:1.5rem;
  border-radius:var(--r-md);
  overflow:hidden;
  border:1px solid var(--border);
  aspect-ratio:16/9;
}
.map-frame iframe{ width:100%; height:100%; border:0; display:block; }

.contact-form-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:clamp(1.5rem, 4vw, 2.5rem);
  box-shadow:var(--shadow-sm);
}

/* ---------------------------------------------------------------------
   17. ACCORDION (FAQ)
   --------------------------------------------------------------------- */
.accordion{ border-top:1px solid var(--border); }
.accordion-item{ border-bottom:1px solid var(--border); }
.accordion-trigger{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.35rem 0;
  text-align:left;
  font-weight:700;
  font-size:1rem;
  color:var(--navy-800);
}
.accordion-trigger svg{ width:20px; height:20px; color:var(--orange-700); flex-shrink:0; transition:transform var(--dur) var(--ease); }
.accordion-trigger[aria-expanded="true"] svg{ transform:rotate(180deg); }
.accordion-panel{
  max-height:0;
  overflow:hidden;
  transition:max-height var(--dur) var(--ease);
}
.accordion-panel-inner{ padding-bottom:1.35rem; font-size:.94rem; color:var(--slate); max-width:70ch; }

/* ---------------------------------------------------------------------
   REGISTER NOW MODAL
   --------------------------------------------------------------------- */
body.modal-open{ overflow:hidden; }

.modal-overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.25rem;
  background:rgba(14,10,40,.62);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.modal-overlay.is-open{ opacity:1; visibility:visible; pointer-events:auto; }

.modal-card{
  position:relative;
  width:100%;
  max-width:440px;
  max-height:88vh;
  overflow-y:auto;
  background:var(--white);
  border-radius:var(--r-lg);
  padding:clamp(1.75rem, 5vw, 2.5rem);
  box-shadow:var(--shadow-lg);
  transform:translateY(18px) scale(.97);
  transition:transform var(--dur) var(--ease);
}
.modal-overlay.is-open .modal-card{ transform:none; }

.modal-close{
  position:absolute;
  top:1rem; right:1rem;
  width:36px; height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--cloud);
  color:var(--navy-700);
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.modal-close:hover{ background:var(--border); color:var(--navy-800); }
.modal-close svg{ width:18px; height:18px; }

.modal-card h3{ margin:0 0 .5rem; padding-right:2.25rem; }

@media (prefers-reduced-motion: reduce){
  .modal-card{ transition:none; }
}

/* ---------------------------------------------------------------------
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* Back to top */
.back-to-top{
  position:fixed;
  right:1.1rem; bottom:1.1rem;
  width:46px; height:46px;
  border-radius:50%;
  background:var(--navy-800);
  color:var(--white);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden;
  transform:translateY(10px);
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast) var(--ease);
  z-index:400;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:none; }
.back-to-top svg{ width:20px; height:20px; }

/* Newsletter */
.newsletter{
  background:var(--cloud);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:clamp(1.75rem, 4vw, 2.5rem);
  display:grid;
  gap:1.5rem;
  align-items:center;
}
.newsletter h3{ margin-bottom:.4rem; }
.newsletter p{ font-size:.92rem; }
.newsletter-form{ display:flex; flex-direction:column; gap:.75rem; }
.newsletter-form .row{ display:flex; flex-direction:column; gap:.75rem; }
.newsletter-form input{
  border:1.5px solid var(--border);
  border-radius:var(--r-full);
  padding:.85rem 1.2rem;
  background:var(--white);
  font-size:.92rem;
  flex:1;
}
.newsletter-form input:focus{ outline:none; border-color:var(--navy-600); }

/* Pagination */
.pagination{ display:flex; justify-content:center; gap:.5rem; margin-top:1rem; }
.pagination a, .pagination span{
  width:42px; height:42px;
  border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.9rem;
  border:1.5px solid var(--border);
  color:var(--navy-700);
}
.pagination a:hover{ border-color:var(--navy-800); }
.pagination .is-active{ background:var(--navy-800); border-color:var(--navy-800); color:var(--white); }
.pagination .next{ width:auto; padding:0 1.1rem; gap:.4rem; }
.pagination .next svg{ width:16px; height:16px; }

/* 404 */
.error-page{ min-height:70vh; display:flex; align-items:center; }
.error-page .code{ font-size:clamp(4rem,14vw,7rem); font-weight:800; color:var(--navy-800); line-height:1; }
.error-page .code span{ color:var(--orange-700); }

/* Single blog post */
.post-header{ max-width:var(--container-narrow); margin-inline:auto; }
.post-header .blog-meta{ margin-bottom:1rem; }
.post-hero-thumb{
  max-width:var(--container-narrow);
  margin:2rem auto 0;
  aspect-ratio:16/8;
  border-radius:var(--r-lg);
  background:linear-gradient(140deg, var(--navy-700), var(--navy-900));
  display:flex; align-items:center; justify-content:center;
}
.post-hero-thumb svg{ width:56px; height:56px; color:rgba(255,255,255,.3); }
.post-body{ max-width:var(--container-narrow); margin-inline:auto; }
.post-body h2{ font-size:1.4rem; margin:2rem 0 .85rem; }
.post-body h3{ margin:1.5rem 0 .6rem; }
.post-body p{ font-size:1.02rem; margin-bottom:1.1rem; }
.post-body ul{ margin:0 0 1.1rem 0; display:flex; flex-direction:column; gap:.6rem; }
.post-body ul li{ display:flex; gap:.7rem; font-size:1.02rem; color:var(--slate); }
.post-body ul li svg{ width:19px; height:19px; color:var(--teal-700); flex-shrink:0; margin-top:.2rem; }
.post-callout{
  background:var(--cloud);
  border-left:3px solid var(--orange-500);
  border-radius:var(--r-sm);
  padding:1.1rem 1.3rem;
  font-size:.95rem;
  color:var(--navy-700);
  margin:1.5rem 0;
}
.post-share{ display:flex; align-items:center; gap:1rem; margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--border); }
.post-share span{ font-size:.85rem; font-weight:700; color:var(--navy-700); }
.author-box{
  max-width:var(--container-narrow);
  margin:2.5rem auto 0;
  display:flex;
  gap:1.1rem;
  align-items:flex-start;
  background:var(--cloud);
  border-radius:var(--r-md);
  padding:1.5rem;
}
.author-box .people-avatar{ margin:0; width:56px; height:56px; flex-shrink:0; }
.author-box .people-avatar svg{ width:24px; height:24px; }
.author-box h4{ font-size:.95rem; margin-bottom:.2rem; }
.author-box p{ font-size:.85rem; }

/* =====================================================================
   19. RESPONSIVE BREAKPOINTS (mobile-first base above; enhance upward)
   ===================================================================== */

/* ---- ~600px : large phones / small tablets ---- */
@media (min-width:600px){
  .field-row{ grid-template-columns:1fr 1fr; }
  .newsletter-form .row{ flex-direction:row; }
  .newsletter-form button{ flex-shrink:0; }
  .grid-2{ grid-template-columns:repeat(2,1fr); }
  .footer-bottom{ flex-direction:row; align-items:center; justify-content:space-between; }
}

/* ---- 768px : tablets ---- */
@media (min-width:768px){
  :root{ --gutter:2rem; }

  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .grid-4{ grid-template-columns:repeat(2,1fr); }

  .hero{
    min-height:min(82vh, 680px);
    display:flex;
    align-items:center;
    padding-block:3rem 4rem;
  }
  .hero::before{
    background:linear-gradient(100deg, rgba(6,14,26,.94) 0%, rgba(6,14,26,.82) 42%, rgba(6,14,26,.5) 72%, rgba(6,14,26,.28) 100%);
  }
  .hero-arrow{ display:flex; }

  .steps{ grid-template-columns:repeat(2,1fr); column-gap:2.5rem; }
  .step:not(:last-child)::after{ display:none; }

  .contact-layout{ grid-template-columns:.85fr 1.15fr; }
  .footer-top{ grid-template-columns:1.3fr 1fr 1fr; }
  .newsletter{ grid-template-columns:1.2fr 1fr; text-align:left; }

  .people-card{ text-align:left; }
  .people-avatar{ margin:0 0 1rem; }

  .cta-banner{ text-align:left; }
  .cta-banner h2, .cta-banner p{ margin-inline:0; }
  .cta-banner .flex-between{ display:flex; flex-direction:row; align-items:center; gap:2rem; }
  .cta-banner .btn-row{ justify-content:flex-start; flex-shrink:0; }
  .cta-banner .btn-row .btn{ width:auto; }
}

/* ---- 1024px : small desktops ---- */
@media (min-width:1024px){
  .header-cta{
    display:inline-flex;
    padding:.68rem 1.4rem;
    font-size:.88rem;
  }
  .nav-toggle{ display:none; }

  .main-nav{
    position:static;
    width:auto; height:auto;
    background:none;
    padding:0;
    transform:none;
    visibility:visible;
    pointer-events:auto;
    flex-direction:row;
    align-items:center;
    overflow:visible;
  }
  .nav-links{ flex-direction:row; gap:.4rem; margin-bottom:0; }
  .nav-links a{
    font-size:.94rem;
    font-weight:600;
    color:var(--navy-700);
    padding:.55rem .95rem;
    border-bottom:none;
    border-radius:var(--r-full);
    transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .nav-links a svg{ display:none; }
  .nav-links a:hover{ background:var(--cloud); color:var(--navy-800); }
  .nav-links a.is-active{ color:var(--teal-700); background:var(--teal-100); }
  .nav-meta{ display:none; }
  .nav-scrim{ display:none; }

  .grid-3{ grid-template-columns:repeat(3,1fr); }
  .grid-4{ grid-template-columns:repeat(4,1fr); }
  .grid{ gap:1.85rem; }

  .trust-row{ flex-direction:row; flex-wrap:wrap; gap:1.5rem; }

  .footer-top{ grid-template-columns:1.4fr 1fr 1fr 1fr; }
}

/* ---- 1280px : large desktops ---- */
@media (min-width:1280px){
  .hero-inner{ max-width:700px; }
}