/* =========================================================
   AL RESALAH — design tokens (v2)
   Palette derived from the real ARCT logo:
     navy  #27146C  (wordmark)
     gold  #C0A166  (Arabic script / secondary wordmark)
   Type: Poppins everywhere, IBM Plex Mono only for course codes/data
   ========================================================= */

:root {
  /* color — derived from logo */
  --navy:        #27146C;
  --navy-deep:   #190F47;
  --navy-soft:   #3B2390;
  --gold:        #C0A166;
  --gold-light:  #D9C194;
  --gold-deep:   #9C7F4D;
  --bone:        #F7F5F0;
  --bone-dim:    #EDE9DF;
  --paper:       #FFFFFF;
  --ink:         #1C1730;
  --stone:       #8C87A0;
  --stone-dark:  #5C5670;

  /* type */
  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* layout */
  --maxw: 1180px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-card: 0 1px 2px rgba(39,20,108,0.05), 0 10px 28px -10px rgba(39,20,108,0.14);
  --shadow-elevated: 0 6px 12px rgba(39,20,108,0.08), 0 24px 56px -18px rgba(39,20,108,0.24);
  --header-h: 76px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-parallax] { transform: none !important; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  width: 100%;
}

/* =========================================================
   AMBIENT BACKGROUND WAVES
   A fixed, full-viewport layer of slow-drifting waves that
   sits behind all content. Deliberately faint and opaque —
   it should read as a gentle sense of motion, never as a
   feature you actively notice. Brand navy + gold.
   ========================================================= */
.bg-waves {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bg-waves svg { position: absolute; width: 160%; height: 160%; left: -30%; top: -30%; }
.bg-waves .wave {
  transform-origin: center;
  will-change: transform;
}
.bg-waves .wave-1 { animation: wave-drift-1 34s ease-in-out infinite alternate; }
.bg-waves .wave-2 { animation: wave-drift-2 46s ease-in-out infinite alternate; }
.bg-waves .wave-3 { animation: wave-drift-3 58s ease-in-out infinite alternate; }

@keyframes wave-drift-1 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-4%, 2.5%, 0) scale(1.08); }
}
@keyframes wave-drift-2 {
  0%   { transform: translate3d(0, 0, 0) scale(1.04); }
  100% { transform: translate3d(3.5%, -2%, 0) scale(1); }
}
@keyframes wave-drift-3 {
  0%   { transform: translate3d(0, 1%, 0) scale(1); }
  100% { transform: translate3d(-2.5%, -3%, 0) scale(1.06); }
}

/* keep all real content above the wave layer */
.site-header, main, .site-footer { position: relative; z-index: 1; }

/* On dark sections the bone-toned body waves would vanish; each dark
   section paints its own faint wave tint via its existing backgrounds,
   so we simply let the fixed layer sit behind the translucent bone
   sections and be overpainted by the opaque navy ones. */

@media (prefers-reduced-motion: reduce) {
  .bg-waves .wave { animation: none !important; }
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: var(--bone);
  padding: 10px 16px; z-index: 200;
}
.skip-link:focus { left: 12px; top: 12px; border-radius: var(--radius-sm); }

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--navy);
}
p { margin: 0; }

/* image placeholder fallback (shown until real images are dropped in) */
.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(45deg, rgba(39,20,108,0.06) 0px, rgba(39,20,108,0.06) 10px, transparent 10px, transparent 20px),
    var(--bone-dim);
  color: var(--stone);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 12px;
  width: 100%;
  height: 100%;
  min-height: 120px;
  border-radius: inherit;
  border: 1px dashed rgba(39,20,108,0.18);
}
/* Placeholders sitting on dark sections (hero, catalogue, contact) need a
   variant that doesn't disappear or overwhelm against the navy background */
.hero-bg-layer .img-placeholder,
.page-hero-bg .img-placeholder,
.contact-bg .img-placeholder,
.final-cta-bg .img-placeholder,
.cat-panel-media .img-placeholder {
  background:
    repeating-linear-gradient(45deg, rgba(247,245,240,0.04) 0px, rgba(247,245,240,0.04) 10px, transparent 10px, transparent 20px),
    transparent;
  color: rgba(247,245,240,0.25);
  border-color: rgba(247,245,240,0.12);
}
/* Background-layer placeholders shouldn't fight for visual weight —
   keep them quiet so text on top stays readable */
.hero-bg-layer, .page-hero-bg, .contact-bg {
  opacity: 1;
}
.hero-bg-layer .img-placeholder,
.page-hero-bg .img-placeholder,
.contact-bg .img-placeholder,
.final-cta-bg .img-placeholder {
  opacity: 0.4;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.94rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--gold-deep); color: var(--bone); }
.btn-primary:hover { background: var(--navy); transform: translateY(-1px); box-shadow: var(--shadow-elevated); }
.btn-outline { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: var(--bone); }
.btn-ghost { background: transparent; color: var(--navy-soft); font-family: var(--font-mono); font-weight: 500; font-size: 0.88rem; }
.btn-ghost:hover { color: var(--gold-deep); }
.btn-lg { padding: 15px 30px; font-size: 1rem; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(247,245,240,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(39,20,108,0.08);
}
.header-inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand-logo-img { height: 42px; width: auto; object-fit: contain; }
.brand-mark {
  width: 40px; height: 40px;
  border-radius: 9px;
  background: var(--navy);
  color: var(--bone);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; color: var(--navy); }
.brand-text small { font-size: 0.68rem; color: var(--gold-deep); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }

.main-nav { display: flex; gap: 30px; font-size: 0.93rem; font-weight: 500; }
.main-nav a { color: var(--navy-soft); transition: color 0.15s ease; position: relative; padding: 6px 0; }
.main-nav a:hover, .main-nav a.is-active { color: var(--gold-deep); }
.main-nav a.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--gold-deep); border-radius: 2px;
}

.header-cta { display: flex; align-items: center; gap: 18px; }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 8px;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none; flex-direction: column; gap: 4px;
  padding: 8px 20px 20px; border-top: 1px solid rgba(39,20,108,0.08);
  background: var(--bone);
}
.mobile-nav a { padding: 12px 6px; font-weight: 500; border-bottom: 1px solid rgba(39,20,108,0.06); }
.mobile-nav .btn { margin-top: 10px; width: 100%; }
.mobile-nav.is-open { display: flex; }

/* =========================================================
   PARALLAX UTILITIES
   ========================================================= */
.parallax-wrap { position: relative; overflow: hidden; }
[data-parallax] { will-change: transform; }

.parallax-layer {
  position: absolute;
  inset: -10% -10%;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* =========================================================
   PAGE HERO BANNER (used on sub-pages)
   ========================================================= */
.page-hero {
  position: relative;
  padding: 96px 28px 64px;
  text-align: center;
  overflow: hidden;
  background: var(--navy);
  color: var(--bone);
}
.page-hero-bg {
  position: absolute; inset: -15% -10%;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  z-index: 0;
}
.page-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.28; mix-blend-mode: luminosity; }
.page-hero-content { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.page-hero .eyebrow { color: var(--gold-light); justify-content: center; }
.page-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); color: var(--bone); }
.page-hero p { color: rgba(247,245,240,0.78); font-size: 1.08rem; margin-top: 16px; line-height: 1.6; }
.breadcrumb {
  display: flex; justify-content: center; gap: 8px;
  font-family: var(--font-mono); font-size: 0.78rem;
  color: rgba(247,245,240,0.5); margin-bottom: 18px;
}
.breadcrumb a:hover { color: var(--gold-light); }

/* =========================================================
   HERO (home page)
   ========================================================= */
.hero {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: var(--bone);
}
.hero-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg-layer .parallax-img {
  width: 100%; height: 130%;
  object-fit: cover;
  opacity: 0.14;
}
.hero-bg-fallback {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(192,161,102,0.16), transparent 45%),
    radial-gradient(circle at 82% 75%, rgba(39,20,108,0.10), transparent 50%);
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 100px 28px 0;
  text-align: center;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 0.78rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--navy-soft); margin: 0 0 22px;
}
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-deep); flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(192,161,102,0.2);
}

.hero-title { font-size: clamp(2.4rem, 5.4vw, 4.1rem); line-height: 1.08; font-weight: 700; }
.hero-title em { font-style: normal; color: var(--gold-deep); font-weight: 700; }

.hazard-rule {
  width: 90px; height: 6px; margin: 26px auto 28px;
  background: repeating-linear-gradient(-45deg, var(--gold-deep) 0px, var(--gold-deep) 8px, var(--navy) 8px, var(--navy) 16px);
  border-radius: 3px; opacity: 0.92;
}

.hero-sub { font-size: 1.13rem; line-height: 1.65; color: var(--stone-dark); max-width: 620px; margin: 0 auto; }
.hero-actions { display: flex; gap: 14px; justify-content: center; margin: 36px 0 18px; flex-wrap: wrap; }
.hero-note { font-size: 0.85rem; color: var(--stone); }

.hero-plate {
  position: relative; z-index: 1;
  margin: 56px auto 0; max-width: var(--maxw);
}
.plate-row {
  display: flex; justify-content: center; flex-wrap: wrap;
  background: var(--navy); padding: 18px 24px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.plate-row span {
  font-family: var(--font-mono); font-size: 0.78rem;
  color: rgba(247,245,240,0.8); padding: 6px 18px;
  border-right: 1px solid rgba(247,245,240,0.16); letter-spacing: 0.02em;
}
.plate-row span:last-child { border-right: none; }

/* hero foreground parallax cutout (optional) */
.hero-parallax-front {
  position: absolute;
  right: 4%;
  bottom: -6%;
  width: 280px;
  z-index: 2;
  pointer-events: none;
  opacity: 0.95;
}

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee-section { background: var(--navy); padding: 30px 0 38px; overflow: hidden; }
.marquee-label {
  text-align: center; font-family: var(--font-mono); font-size: 0.74rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: rgba(247,245,240,0.5); margin-bottom: 18px;
}
.marquee { overflow: hidden; position: relative; }
.marquee::before, .marquee::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(to right, var(--navy), transparent); }
.marquee::after { right: 0; background: linear-gradient(to left, var(--navy), transparent); }
.marquee-track {
  display: flex; gap: 56px; white-space: nowrap;
  animation: scroll-left 38s linear infinite; width: max-content;
}
.marquee-track .accred-badge {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 600;
  color: rgba(247,245,240,0.45);
}
.marquee-track .accred-badge img { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: 0.5; }
@keyframes scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =========================================================
   SECTION HEAD (shared)
   ========================================================= */
.section-head { max-width: 680px; margin: 0 auto 52px; text-align: center; padding: 0 28px; }
.section-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin: 14px 0 14px; }
.section-sub { color: var(--stone-dark); font-size: 1.05rem; line-height: 1.6; }
.eyebrow-dark { color: var(--gold-deep); }

/* =========================================================
   SERVICES — pillar grid
   ========================================================= */
.services { max-width: var(--maxw); margin: 0 auto; padding: 100px 28px; }
.pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pillar-card {
  background: var(--paper); border: 1px solid rgba(39,20,108,0.08);
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pillar-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated); }
.pillar-media { aspect-ratio: 4/3; overflow: hidden; background: var(--bone-dim); }
.pillar-media img { width: 100%; height: 100%; object-fit: cover; }
.pillar-body { padding: 24px 24px 26px; }
.pillar-index { display: inline-block; font-family: var(--font-mono); font-size: 0.78rem; color: var(--gold-deep); font-weight: 600; margin-bottom: 12px; }
.pillar-card h3 { font-size: 1.15rem; margin-bottom: 10px; line-height: 1.3; }
.pillar-card p { font-size: 0.92rem; color: var(--stone-dark); line-height: 1.58; }
.pillar-link { display: inline-block; margin-top: 16px; font-size: 0.86rem; font-weight: 600; color: var(--navy-soft); transition: color 0.15s ease; }
.pillar-link:hover { color: var(--gold-deep); }

/* =========================================================
   STICKY SCROLL CATALOGUE
   ========================================================= */
.catalogue-scroller {
  background: var(--navy);
  color: var(--bone);
  position: relative;
}
.catalogue-intro { max-width: 680px; margin: 0 auto; text-align: center; padding: 100px 28px 0; }
.catalogue-intro h2 { color: var(--bone); font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin: 14px 0 14px; }
.catalogue-intro .section-sub { color: rgba(247,245,240,0.62); }
.catalogue-intro .eyebrow-dark { color: var(--gold-light); }

/* the tall scroll-track: height drives how long the sticky panel "holds" */
.cat-scroll-track {
  position: relative;
  max-width: var(--maxw);
  margin: 60px auto 0;
  padding: 0 28px 100px;
}

.cat-sticky-stage {
  position: sticky;
  top: calc(var(--header-h) + 36px);
  height: calc(100vh - var(--header-h) - 72px);
  max-height: 620px;
  display: grid;
  grid-template-columns: 300px 1fr;
  background: rgba(247,245,240,0.04);
  border: 1px solid rgba(247,245,240,0.12);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.cat-tabs { display: flex; flex-direction: column; border-right: 1px solid rgba(247,245,240,0.12); overflow-y: auto; }
.cat-tab {
  display: flex; align-items: baseline; gap: 12px; text-align: left;
  background: none; border: none; border-bottom: 1px solid rgba(247,245,240,0.08);
  color: rgba(247,245,240,0.6); font-family: var(--font-body); font-size: 0.92rem; font-weight: 500;
  padding: 20px 22px; cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  line-height: 1.35; width: 100%;
}
.cat-tab:hover { background: rgba(247,245,240,0.05); color: var(--bone); }
.cat-tab.is-active {
  background: rgba(192,161,102,0.14); color: var(--bone);
  border-left: 3px solid var(--gold-deep); padding-left: 19px;
}
.cat-num { font-family: var(--font-mono); font-size: 0.76rem; color: var(--gold-light); flex-shrink: 0; }

.cat-panels { position: relative; padding: 36px 38px; overflow-y: auto; }
.cat-panel {
  display: none;
  grid-template-columns: 220px 1fr;
  gap: 28px;
}
.cat-panel.is-active { display: grid; animation: fade-in 0.35s ease; }
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.cat-panel-media { border-radius: var(--radius-md); overflow: hidden; background: var(--navy-deep); aspect-ratio: 4/5; }
.cat-panel-media img { width: 100%; height: 100%; object-fit: cover; }

.course-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 32px; align-content: start; }
.course-list li {
  display: flex; align-items: baseline; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid rgba(247,245,240,0.08);
  font-size: 0.91rem; color: rgba(247,245,240,0.88);
}
.course-code { font-family: var(--font-mono); font-size: 0.74rem; color: var(--gold-light); flex-shrink: 0; min-width: 32px; }

.cat-progress {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: rgba(247,245,240,0.08);
}
.cat-progress-bar { height: 100%; width: 20%; background: var(--gold-deep); transition: width 0.2s ease; border-radius: 0 3px 3px 0; }

.catalogue-note { max-width: var(--maxw); margin: 32px auto 0; text-align: center; font-size: 0.9rem; color: rgba(247,245,240,0.55); padding: 0 28px 90px; }
.catalogue-note a { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; }
.catalogue-note a:hover { color: var(--gold-light); }

/* =========================================================
   TRUST STRIP
   ========================================================= */
.trust { background: var(--bone-dim); padding: 60px 28px; border-top: 1px solid rgba(39,20,108,0.06); border-bottom: 1px solid rgba(39,20,108,0.06); }
.trust-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.trust-number { display: block; font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: var(--navy); line-height: 1; }
.trust-label { display: block; margin-top: 8px; font-size: 0.88rem; color: var(--stone-dark); }

/* =========================================================
   OFFICES
   ========================================================= */
.offices { max-width: var(--maxw); margin: 0 auto; padding: 100px 28px; }
.office-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.office-card { background: var(--paper); border: 1px solid rgba(39,20,108,0.08); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); }
.office-media { aspect-ratio: 16/10; background: var(--bone-dim); overflow: hidden; }
.office-media img { width: 100%; height: 100%; object-fit: cover; }
.office-body { padding: 26px 26px 28px; }
.office-tag {
  display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--gold-deep); background: rgba(192,161,102,0.12); padding: 4px 10px; border-radius: 4px; margin-bottom: 14px;
}
.office-card h3 { font-size: 1.3rem; margin-bottom: 10px; }
.office-address { color: var(--stone-dark); font-size: 0.92rem; line-height: 1.55; margin-bottom: 16px; }
.office-card a { display: block; font-size: 0.92rem; font-weight: 600; color: var(--navy-soft); margin-top: 4px; }
.office-card a:hover { color: var(--gold-deep); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact { position: relative; background: var(--navy); color: var(--bone); padding: 100px 28px; overflow: hidden; }
.contact-bg { position: absolute; inset: 0; z-index: 0; }
.contact-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.18; }
.contact-inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: start; }
.contact-copy .eyebrow { color: var(--gold-light); }
.contact-copy h2 { color: var(--bone); font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 14px 0 16px; }
.contact-copy p { color: rgba(247,245,240,0.68); font-size: 1.02rem; line-height: 1.6; margin-bottom: 24px; }

.contact-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.contact-points li { padding-left: 22px; position: relative; font-size: 0.94rem; color: rgba(247,245,240,0.82); }
.contact-points li::before { content: ''; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; background: var(--gold-deep); border-radius: 2px; }

.contact-form {
  background: rgba(247,245,240,0.05); border: 1px solid rgba(247,245,240,0.16);
  border-radius: var(--radius-lg); padding: 32px; display: flex; flex-direction: column; gap: 16px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form label { display: flex; flex-direction: column; gap: 7px; font-size: 0.86rem; color: rgba(247,245,240,0.7); }
.contact-form input, .contact-form textarea, .contact-form select {
  background: rgba(247,245,240,0.07); border: 1px solid rgba(247,245,240,0.2);
  border-radius: var(--radius-sm); padding: 11px 14px; font-family: var(--font-body);
  font-size: 0.94rem; color: var(--bone); resize: vertical;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(247,245,240,0.4); }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { outline: none; border-color: var(--gold-deep); background: rgba(247,245,240,0.1); }
.form-full { width: 100%; }
.form-submit { margin-top: 6px; }
.form-note { font-size: 0.86rem; color: rgba(247,245,240,0.6); min-height: 1.2em; }
.form-note.is-success { color: #9fd6b8; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: var(--navy-deep); color: rgba(247,245,240,0.7); padding: 56px 28px 28px; border-top: 1px solid rgba(247,245,240,0.1); }
.footer-top { max-width: var(--maxw); margin: 0 auto; padding-bottom: 36px; border-bottom: 1px solid rgba(247,245,240,0.1); }
.footer-brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--bone); margin-bottom: 14px; }
.footer-brand img { height: 34px; width: auto; }
.footer-brand .brand-mark { background: var(--gold-deep); }
.footer-accred { max-width: 740px; font-size: 0.88rem; line-height: 1.6; color: rgba(247,245,240,0.55); }

.footer-grid { max-width: var(--maxw); margin: 0 auto; padding: 36px 0; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 24px; }
.footer-col h4 { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(247,245,240,0.45); margin-bottom: 14px; }
.footer-col a, .footer-col p { display: block; font-size: 0.88rem; color: rgba(247,245,240,0.72); margin-bottom: 8px; line-height: 1.5; }
.footer-col a:hover { color: var(--gold-light); }

.footer-bottom {
  max-width: var(--maxw); margin: 0 auto; padding-top: 24px; border-top: 1px solid rgba(247,245,240,0.1);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  font-size: 0.82rem; color: rgba(247,245,240,0.45);
}
.footer-legal { display: flex; gap: 20px; }
.footer-legal a:hover { color: var(--bone); }

/* =========================================================
   GENERIC CONTENT PAGE BLOCKS (about / services / etc.)
   ========================================================= */
.split-section { max-width: var(--maxw); margin: 0 auto; padding: 100px 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split-section.is-reverse { direction: rtl; }
.split-section.is-reverse > * { direction: ltr; }
.split-media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; background: var(--bone-dim); box-shadow: var(--shadow-card); }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-copy .eyebrow { color: var(--gold-deep); }
.split-copy h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 14px 0 18px; }
.split-copy p { color: var(--stone-dark); font-size: 1.04rem; line-height: 1.65; margin-bottom: 16px; }

.stat-band { background: var(--navy); color: var(--bone); padding: 70px 28px; }
.stat-band-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; text-align: center; }
.stat-band .trust-number { color: var(--gold-light); }
.stat-band .trust-label { color: rgba(247,245,240,0.7); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
  .pillar-grid { grid-template-columns: 1fr 1fr; }
  .office-grid { grid-template-columns: 1fr; }
  .trust-inner, .stat-band-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .cat-sticky-stage { grid-template-columns: 1fr; height: auto; max-height: none; position: relative; top: 0; }
  .cat-scroll-track { height: auto !important; }
  .cat-tabs { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid rgba(247,245,240,0.12); }
  .cat-tab { border-bottom: none; border-right: 1px solid rgba(247,245,240,0.08); white-space: nowrap; }
  .cat-tab.is-active { border-left: none; border-bottom: 3px solid var(--gold-deep); padding-left: 22px; }
  .cat-panel { grid-template-columns: 1fr; }
  .cat-panel-media { display: none; }
  .contact-inner { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .split-section { grid-template-columns: 1fr; gap: 36px; }
  .split-section.is-reverse { direction: ltr; }
}

@media (max-width: 720px) {
  .main-nav, .header-cta { display: none; }
  .nav-toggle { display: flex; }
  .hero-content { padding: 56px 20px 0; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .plate-row { flex-direction: column; align-items: center; gap: 2px; padding: 16px; }
  .plate-row span { border-right: none; padding: 4px 0; }
  .pillar-grid { grid-template-columns: 1fr; }
  .services, .offices, .contact, .split-section { padding: 64px 20px; }
  .catalogue-intro { padding: 64px 20px 0; }
  .course-list { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .trust-inner, .stat-band-inner { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .hero-parallax-front { display: none; }
}

/* =========================================================
   ============  REDESIGN LAYER ("Built to a Standard")  ===
   Everything below extends/overrides the base styles above.
   ========================================================= */

/* ---- Refined motion: scroll reveal ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, transform;
}
/* Safety: until JS marks the page ready, and if JS never runs, content
   stays visible rather than being trapped at opacity:0. */
html:not(.js) [data-reveal] { opacity: 1 !important; transform: none !important; }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal][data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal][data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal][data-reveal-delay="4"] { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ---- Clause-numbered eyebrow (signature element) ---- */
.clause {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 18px;
}
.clause::before {
  content: attr(data-clause);
  color: var(--navy);
  background: var(--gold);
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.catalogue-scroller .clause::before,
.contact .clause::before,
.page-hero .clause::before { color: var(--navy-deep); }
.clause.on-dark { color: var(--gold-light); }

/* ---- Section scaffold ---- */
.section { max-width: var(--maxw); margin: 0 auto; padding: 104px 28px; position: relative; }
.section-head-left { max-width: 640px; margin-bottom: 52px; }
.section-head-left h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.1; margin: 0 0 16px; }
.section-head-left p { color: var(--stone-dark); font-size: 1.06rem; line-height: 1.6; }

/* refined hairline divider w/ gold tick */
.rule-tick { display: flex; align-items: center; gap: 0; margin: 0 0 28px; }
.rule-tick::before { content: ''; width: 40px; height: 2px; background: var(--gold); border-radius: 2px; }
.rule-tick::after { content: ''; flex: 1; height: 1px; background: rgba(39,20,108,0.12); }

/* =========================================================
   HERO — elevated
   ========================================================= */
.hero-content { padding-top: 92px; }
.hero-live {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--navy-soft);
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(39,20,108,0.12);
  padding: 7px 14px; border-radius: 100px; margin-bottom: 26px;
  backdrop-filter: blur(6px);
}
.hero-live .pulse {
  width: 8px; height: 8px; border-radius: 50%; background: #2faa6a; position: relative; flex-shrink: 0;
}
.hero-live .pulse::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: #2faa6a;
  animation: pulse-ring 2.4s ease-out infinite;
}
@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(3.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .hero-live .pulse::after { animation: none; } }

/* credential bar under hero — refined from plate */
.hero-credbar {
  position: relative; z-index: 1;
  max-width: var(--maxw); margin: 52px auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--navy);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
}
.hero-credbar .cred {
  padding: 26px 24px; border-right: 1px solid rgba(247,245,240,0.1);
  display: flex; flex-direction: column; gap: 4px;
}
.hero-credbar .cred:last-child { border-right: none; }
.hero-credbar .cred-num { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: var(--gold-light); line-height: 1; }
.hero-credbar .cred-label { font-size: 0.82rem; color: rgba(247,245,240,0.7); line-height: 1.35; }

/* =========================================================
   INDUSTRIES
   ========================================================= */
.industries { background: var(--bone-dim); border-top: 1px solid rgba(39,20,108,0.06); border-bottom: 1px solid rgba(39,20,108,0.06); }
.industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.industry-card {
  background: var(--paper); border: 1px solid rgba(39,20,108,0.08); border-radius: var(--radius-md);
  padding: 28px; display: flex; flex-direction: column; gap: 14px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.industry-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated); border-color: rgba(192,161,102,0.5); }
.industry-icon {
  width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%); color: var(--gold-light);
}
.industry-icon svg { width: 26px; height: 26px; }
.industry-card h3 { font-size: 1.12rem; margin: 0; }
.industry-card p { font-size: 0.9rem; color: var(--stone-dark); line-height: 1.55; margin: 0; }

/* =========================================================
   WHY US — differentiators
   ========================================================= */
.why { background: var(--navy); color: var(--bone); position: relative; overflow: hidden; }
.why::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(192,161,102,0.14), transparent 45%);
  pointer-events: none;
}
.why .section-head-left h2 { color: var(--bone); }
.why .section-head-left p { color: rgba(247,245,240,0.72); }
.why .clause { color: var(--gold-light); }
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(247,245,240,0.12); border: 1px solid rgba(247,245,240,0.12); border-radius: var(--radius-lg); overflow: hidden; position: relative; z-index: 1; }
.why-item { background: var(--navy); padding: 36px 34px; transition: background-color 0.25s ease; }
.why-item:hover { background: var(--navy-soft); }
.why-item-top { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.why-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px; background: rgba(192,161,102,0.16); color: var(--gold-light); display: flex; align-items: center; justify-content: center; }
.why-icon svg { width: 22px; height: 22px; }
.why-item h3 { font-size: 1.18rem; color: var(--bone); margin: 0; }
.why-item p { font-size: 0.94rem; color: rgba(247,245,240,0.74); line-height: 1.6; margin: 0; }

/* =========================================================
   PROCESS — how it works
   ========================================================= */
.process-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
.process-step { position: relative; padding: 0 18px; }
.process-step:not(:last-child)::after {
  content: ''; position: absolute; top: 26px; left: 50%; right: -50%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 8px, transparent 8px 16px);
  opacity: 0.5; z-index: 0;
}
.process-num {
  position: relative; z-index: 1;
  width: 54px; height: 54px; border-radius: 50%; background: var(--paper); border: 2px solid var(--gold);
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
  font-family: var(--font-mono); font-weight: 600; color: var(--navy); font-size: 1.05rem;
  box-shadow: 0 4px 14px -4px rgba(192,161,102,0.5);
}
.process-step h3 { font-size: 1.05rem; margin: 0 0 8px; }
.process-step p { font-size: 0.88rem; color: var(--stone-dark); line-height: 1.5; margin: 0; }

/* =========================================================
   STAT BAND — animated count-up
   ========================================================= */
.statband2 { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%); color: var(--bone); padding: 80px 28px; position: relative; overflow: hidden; }
.statband2::before { content:''; position:absolute; inset:0; background: radial-gradient(circle at 15% 80%, rgba(192,161,102,0.12), transparent 50%); }
.statband2-inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.stat2 { text-align: center; padding: 0 16px; }
.stat2 .num { font-family: var(--font-display); font-size: clamp(2.4rem,4.5vw,3.4rem); font-weight: 700; color: var(--gold-light); line-height: 1; letter-spacing: -0.02em; }
.stat2 .num .suffix { color: var(--bone); }
.stat2 .lbl { display: block; margin-top: 10px; font-size: 0.9rem; color: rgba(247,245,240,0.75); line-height: 1.4; }
.stat2:not(:last-child) { border-right: 1px solid rgba(247,245,240,0.14); }

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.testi-card {
  background: var(--paper); border: 1px solid rgba(39,20,108,0.08); border-radius: var(--radius-md);
  padding: 30px 28px; display: flex; flex-direction: column; gap: 18px;
  box-shadow: var(--shadow-card); position: relative;
}
.testi-card::before {
  content: '\201C'; position: absolute; top: 14px; right: 24px;
  font-family: Georgia, serif; font-size: 4rem; color: var(--gold); opacity: 0.28; line-height: 1;
}
.testi-quote { font-size: 0.98rem; line-height: 1.6; color: var(--ink); margin: 0; }
.testi-who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.testi-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--bone-dim); flex-shrink: 0; }
.testi-avatar.is-mono { display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 600; color: var(--navy); font-size: 0.95rem; background: var(--gold-light); }
.testi-name { font-weight: 600; font-size: 0.92rem; color: var(--navy); }
.testi-role { font-size: 0.8rem; color: var(--stone); }
.testi-stars { display: flex; gap: 2px; color: var(--gold-deep); }
.testi-stars svg { width: 16px; height: 16px; }

/* =========================================================
   FINAL CTA — elevated
   ========================================================= */
.final-cta { position: relative; background: var(--navy-deep); color: var(--bone); padding: 96px 28px; overflow: hidden; text-align: center; }
.final-cta-bg { position: absolute; inset: 0; z-index: 0; }
.final-cta-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.16; }
.final-cta::after { content:''; position:absolute; inset:0; background: radial-gradient(circle at 50% 120%, rgba(192,161,102,0.2), transparent 55%); z-index: 0; }
.final-cta-inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; }
.final-cta h2 { color: var(--bone); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; margin: 0 0 18px; }
.final-cta p { color: rgba(247,245,240,0.78); font-size: 1.1rem; line-height: 1.6; margin: 0 0 32px; }
.final-cta .hazard-rule { margin: 22px auto 28px; }
.final-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* =========================================================
   ACCREDITATION — promoted to a real section
   ========================================================= */
.accred-section { background: var(--bone); }
.accred-wall { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.accred-chip {
  display: flex; align-items: center; justify-content: center; min-height: 92px;
  background: var(--paper); border: 1px solid rgba(39,20,108,0.08); border-radius: var(--radius-md);
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--navy);
  letter-spacing: 0.01em; transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  padding: 16px; text-align: center;
}
.accred-chip:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); color: var(--gold-deep); }
.accred-chip img { max-height: 48px; max-width: 100%; width: auto; object-fit: contain; }

/* =========================================================
   RESPONSIVE — redesign layer
   ========================================================= */
@media (max-width: 980px) {
  .hero-credbar { grid-template-columns: repeat(2, 1fr); }
  .hero-credbar .cred:nth-child(2) { border-right: none; }
  .hero-credbar .cred:nth-child(1), .hero-credbar .cred:nth-child(2) { border-bottom: 1px solid rgba(247,245,240,0.1); }
  .industry-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: 1fr; }
  .process-track { grid-template-columns: 1fr 1fr; gap: 36px 0; }
  .process-step::after { display: none; }
  .statband2-inner { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .stat2:nth-child(2) { border-right: none; }
  .testi-grid { grid-template-columns: 1fr; }
  .accred-wall { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .section { padding: 68px 20px; }
  .industry-grid { grid-template-columns: 1fr; }
  .process-track { grid-template-columns: 1fr; gap: 28px; }
  .statband2-inner { grid-template-columns: 1fr 1fr; }
  .stat2 { border-right: none !important; }
  .accred-wall { grid-template-columns: repeat(2, 1fr); }
  .hero-credbar { grid-template-columns: 1fr; }
  .hero-credbar .cred { border-right: none; border-bottom: 1px solid rgba(247,245,240,0.1); }
  .hero-credbar .cred:last-child { border-bottom: none; }
}

/* =========================================================
   ============  SOCIALS + FLOATING CONTACT FAB  ===========
   ========================================================= */

/* ---- Social icon rows ---- */
.social-row { display: flex; align-items: center; gap: 12px; }
.social-link {
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem; transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* light-section variant (footer top area / contact copy on dark uses on-dark) */
.social-link.on-light {
  background: var(--paper); border: 1px solid rgba(39,20,108,0.12); color: var(--navy);
}
.social-link.on-light:hover { background: var(--navy); color: var(--gold-light); transform: translateY(-3px); border-color: var(--navy); }
/* dark-section variant */
.social-link.on-dark {
  background: rgba(247,245,240,0.08); border: 1px solid rgba(247,245,240,0.18); color: var(--bone);
}
.social-link.on-dark:hover { background: var(--gold-deep); color: var(--bone); transform: translateY(-3px); border-color: var(--gold-deep); }

.social-heading {
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: rgba(247,245,240,0.45); margin: 0 0 14px;
}
.contact-socials { margin-top: 28px; padding-top: 26px; border-top: 1px solid rgba(247,245,240,0.14); }
.footer-socials { margin-top: 18px; }

/* ---- Floating contact FAB ---- */
.fab-wrap {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 90;
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
}
.fab-actions {
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  /* hidden state */
  opacity: 0; visibility: hidden;
  transform: translateY(12px) scale(0.92);
  transform-origin: bottom right;
  transition: opacity 0.28s cubic-bezier(0.16,1,0.3,1), transform 0.28s cubic-bezier(0.16,1,0.3,1), visibility 0.28s;
  pointer-events: none;
}
.fab-wrap.is-open .fab-actions {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto;
}
.fab-action {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--paper); color: var(--navy);
  border: 1px solid rgba(39,20,108,0.1);
  border-radius: 100px; padding: 9px 16px 9px 9px;
  font-size: 0.9rem; font-weight: 600; white-space: nowrap;
  box-shadow: 0 8px 24px -8px rgba(39,20,108,0.4);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.fab-action:hover { transform: translateX(-3px); box-shadow: var(--shadow-elevated); }
/* stagger the actions when opening */
.fab-wrap.is-open .fab-action:nth-child(1) { transition-delay: 0.04s; }
.fab-wrap.is-open .fab-action:nth-child(2) { transition-delay: 0.10s; }
.fab-action-icon {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.05rem;
}
.fab-action.whatsapp .fab-action-icon { background: #25D366; }
.fab-action.call .fab-action-icon { background: var(--navy); }

.fab-toggle {
  width: 60px; height: 60px; border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--gold-deep); color: var(--bone);
  font-size: 1.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px -6px rgba(156,127,77,0.7);
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), background-color 0.2s ease;
  position: relative;
}
.fab-toggle:hover { background: var(--navy); }
.fab-toggle .fab-icon-open,
.fab-toggle .fab-icon-close {
  position: absolute; transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.fab-toggle .fab-icon-close { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.fab-wrap.is-open .fab-toggle { background: var(--navy); transform: rotate(0deg); }
.fab-wrap.is-open .fab-toggle .fab-icon-open { opacity: 0; transform: rotate(90deg) scale(0.6); }
.fab-wrap.is-open .fab-toggle .fab-icon-close { opacity: 1; transform: rotate(0deg) scale(1); }

/* gentle attention pulse on the toggle (stops once opened) */
.fab-toggle::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--gold-deep);
  animation: fab-pulse 2.6s ease-out infinite;
}
.fab-wrap.is-open .fab-toggle::after { animation: none; opacity: 0; }
@keyframes fab-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  70%, 100% { transform: scale(1.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fab-toggle::after { animation: none; opacity: 0; }
}

@media (max-width: 720px) {
  .fab-wrap { right: 16px; bottom: 16px; }
  .fab-toggle { width: 54px; height: 54px; font-size: 1.35rem; }
}

/* =========================================================
   ============  PRODUCTION POLISH LAYER  ==================
   scroll progress · smart header · course search ·
   FAQ accordion · cookie banner · anchor offsets
   ========================================================= */

/* ---- Anchor offset (so sticky header doesn't cover targets) ---- */
#courses, #services, #contact, [id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ---- Scroll progress bar ---- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-deep) 100%);
  z-index: 110; pointer-events: none;
  transition: width 0.05s linear;
}

/* ---- Smart header (scrolled state) ---- */
.site-header { transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease, background-color 0.3s ease; }
.site-header.is-scrolled {
  box-shadow: 0 4px 24px -10px rgba(39,20,108,0.3);
  background: rgba(247,245,240,0.96);
}
.site-header.is-hidden { transform: translateY(-100%); }

/* ---- Course search ---- */
.course-search { max-width: 560px; margin: 26px auto 0; position: relative; z-index: 3; }
.course-search-box {
  display: flex; align-items: center; gap: 12px;
  background: rgba(247,245,240,0.07);
  border: 1px solid rgba(247,245,240,0.2);
  border-radius: 100px; padding: 4px 6px 4px 18px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.course-search-box:focus-within { border-color: var(--gold); background: rgba(247,245,240,0.1); }
.course-search-box i { color: rgba(247,245,240,0.55); font-size: 0.95rem; }
.course-search-box input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--bone); font-family: var(--font-body); font-size: 0.96rem; padding: 11px 0;
}
.course-search-box input::placeholder { color: rgba(247,245,240,0.45); }
.course-search-clear {
  background: rgba(247,245,240,0.12); border: none; color: var(--bone);
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer; flex-shrink: 0;
  display: none; align-items: center; justify-content: center; transition: background-color 0.2s ease;
}
.course-search-clear:hover { background: rgba(247,245,240,0.22); }
.course-search.has-query .course-search-clear { display: inline-flex; }

.course-results {
  margin-top: 14px; background: var(--paper); border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevated); overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height 0.3s ease, opacity 0.25s ease; text-align: left;
}
.course-search.has-query .course-results { max-height: 420px; opacity: 1; overflow-y: auto; }
.course-results-meta {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--stone); padding: 14px 18px; border-bottom: 1px solid rgba(39,20,108,0.07); position: sticky; top: 0; background: var(--paper);
}
.course-result {
  display: flex; align-items: baseline; gap: 12px; padding: 12px 18px;
  border-bottom: 1px solid rgba(39,20,108,0.06); cursor: pointer; transition: background-color 0.15s ease;
}
.course-result:hover { background: var(--bone-dim); }
.course-result:last-child { border-bottom: none; }
.course-result .rc-code { font-family: var(--font-mono); font-size: 0.74rem; color: var(--gold-deep); flex-shrink: 0; min-width: 34px; }
.course-result .rc-name { font-size: 0.92rem; color: var(--ink); }
.course-result .rc-cat { margin-left: auto; font-size: 0.74rem; color: var(--stone); white-space: nowrap; padding-left: 12px; }
.course-results-empty { padding: 22px 18px; text-align: center; color: var(--stone); font-size: 0.9rem; }

/* ---- FAQ accordion ---- */
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--paper); border: 1px solid rgba(39,20,108,0.1); border-radius: var(--radius-md);
  overflow: hidden; transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.faq-item.is-open { border-color: rgba(192,161,102,0.55); box-shadow: var(--shadow-card); }
.faq-q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 16px; padding: 22px 24px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--navy);
}
.faq-q .faq-icon {
  margin-left: auto; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  background: var(--bone-dim); color: var(--gold-deep); display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), background-color 0.2s ease, color 0.2s ease;
  font-size: 0.85rem;
}
.faq-item.is-open .faq-q .faq-icon { transform: rotate(45deg); background: var(--gold-deep); color: var(--bone); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.16,1,0.3,1); }
.faq-a-inner { padding: 0 24px 24px; color: var(--stone-dark); line-height: 1.65; font-size: 0.98rem; }

/* ---- Cookie consent banner ---- */
.cookie-banner {
  position: fixed; left: 24px; bottom: 24px; z-index: 95;
  max-width: 420px; background: var(--navy); color: var(--bone);
  border: 1px solid rgba(247,245,240,0.14); border-radius: var(--radius-lg);
  padding: 22px 24px; box-shadow: var(--shadow-elevated);
  transform: translateY(140%); opacity: 0; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), opacity 0.4s ease;
}
.cookie-banner.is-visible { transform: translateY(0); opacity: 1; }
.cookie-banner p { font-size: 0.9rem; line-height: 1.55; color: rgba(247,245,240,0.82); margin: 0 0 16px; }
.cookie-banner a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 2px; }
.cookie-actions { display: flex; gap: 10px; }
.cookie-actions .btn { padding: 9px 18px; font-size: 0.86rem; }
.cookie-accept { background: var(--gold-deep); color: var(--bone); border: none; }
.cookie-accept:hover { background: var(--gold); color: var(--navy); }
.cookie-decline { background: transparent; color: rgba(247,245,240,0.75); border: 1px solid rgba(247,245,240,0.25); }
.cookie-decline:hover { background: rgba(247,245,240,0.08); color: var(--bone); }

@media (max-width: 720px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .course-result .rc-cat { display: none; }
}

/* =========================================================
   ============  MOBILE + MOTION ENHANCEMENTS  =============
   full-screen mobile menu · scroll cue · parallax orbs ·
   directional reveals · card tilt
   ========================================================= */

/* ---- Full-screen mobile menu (upgrade) ---- */
@media (max-width: 720px) {
  .mobile-nav {
    position: fixed; inset: 0; top: 0;
    height: 100dvh; width: 100%;
    background: var(--navy);
    flex-direction: column; justify-content: center; align-items: stretch;
    gap: 6px; padding: 96px 32px 40px; border: none;
    transform: translateX(100%);
    transition: transform 0.42s cubic-bezier(0.16,1,0.3,1);
    display: flex; z-index: 99; overflow-y: auto;
  }
  .mobile-nav.is-open { transform: translateX(0); }
  .mobile-nav a {
    color: var(--bone); font-family: var(--font-display); font-weight: 600;
    font-size: 1.5rem; padding: 14px 4px; border-bottom: 1px solid rgba(247,245,240,0.1);
    opacity: 0; transform: translateX(28px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1), color 0.2s ease;
  }
  .mobile-nav.is-open a { opacity: 1; transform: translateX(0); }
  .mobile-nav.is-open a:nth-child(1) { transition-delay: 0.10s; }
  .mobile-nav.is-open a:nth-child(2) { transition-delay: 0.16s; }
  .mobile-nav.is-open a:nth-child(3) { transition-delay: 0.22s; }
  .mobile-nav.is-open a:nth-child(4) { transition-delay: 0.28s; }
  .mobile-nav.is-open a:nth-child(5) { transition-delay: 0.34s; }
  .mobile-nav a:active { color: var(--gold-light); }
  .mobile-nav .btn {
    font-size: 1rem; font-family: var(--font-body); margin-top: 16px;
    opacity: 0; transform: translateY(16px);
    transition: opacity 0.4s ease 0.40s, transform 0.4s cubic-bezier(0.16,1,0.3,1) 0.40s;
  }
  .mobile-nav.is-open .btn { opacity: 1; transform: translateY(0); }
  .mobile-nav .btn.btn-ghost { color: var(--gold-light); border: 1px solid rgba(247,245,240,0.2); }
  /* keep toggle above the overlay */
  .nav-toggle { position: relative; z-index: 101; }
  .nav-toggle.is-active span { background: var(--bone); }
  body.menu-open { overflow: hidden; }
}

/* ---- Hero scroll-down cue ---- */
.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 2; display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--navy-soft); font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75;
  background: none; border: none; cursor: pointer;
  animation: cue-fade 0.8s ease 1s both;
}
.scroll-cue .cue-arrow {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--gold-deep); color: var(--gold-deep);
  display: inline-flex; align-items: center; justify-content: center;
  animation: cue-bounce 1.8s ease-in-out infinite;
}
@keyframes cue-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes cue-fade { from { opacity: 0; } to { opacity: 0.75; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue .cue-arrow { animation: none; } }
@media (max-width: 980px) { .scroll-cue { display: none; } }

/* ---- Decorative floating parallax orbs ---- */
.orb {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  filter: blur(44px); opacity: 0.5; will-change: transform;
}
.orb-gold { background: radial-gradient(circle, rgba(192,161,102,0.5), transparent 70%); }
.orb-navy { background: radial-gradient(circle, rgba(59,35,144,0.45), transparent 70%); }
.orb-light { background: radial-gradient(circle, rgba(217,193,148,0.4), transparent 70%); }
/* sections that host orbs must clip them */
.has-orbs { position: relative; overflow: hidden; }

/* ---- Directional scroll reveals ---- */
[data-reveal="left"]  { opacity: 0; transform: translateX(-42px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
[data-reveal="right"] { opacity: 0; transform: translateX(42px);  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
[data-reveal="scale"] { opacity: 0; transform: scale(0.94);       transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible,
[data-reveal="scale"].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal="left"], [data-reveal="right"], [data-reveal="scale"] { opacity: 1 !important; transform: none !important; }
}

/* ---- Subtle card tilt (desktop pointer only) ---- */
@media (hover: hover) and (pointer: fine) {
  .tilt { transform-style: preserve-3d; transition: transform 0.2s cubic-bezier(0.16,1,0.3,1); }
}

/* ---- Mobile parallax safety: prevent any horizontal overflow ---- */
.hero, .industries, .why, .final-cta, .page-hero { overflow-x: clip; }

/* =========================================================
   ============  LIVING / ACTIVE LAYER  ===================
   animated gradient backgrounds · aurora blobs · shimmer
   text · button sheen · marching hazard stripes
   ========================================================= */

/* ---- Animated "living" gradient backgrounds (dark sections) ---- */
@keyframes bg-pan {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.why {
  background: linear-gradient(125deg, #190F47 0%, #27146C 30%, #3B2390 50%, #27146C 70%, #190F47 100%);
  background-size: 300% 300%;
  animation: bg-pan 22s ease infinite;
}
.catalogue-scroller {
  background: linear-gradient(135deg, #27146C 0%, #190F47 40%, #2a1675 70%, #27146C 100%);
  background-size: 280% 280%;
  animation: bg-pan 26s ease infinite;
}
.statband2 {
  background: linear-gradient(120deg, #190F47 0%, #27146C 35%, #3B2390 55%, #27146C 75%, #190F47 100%);
  background-size: 320% 320%;
  animation: bg-pan 20s ease infinite;
}
.final-cta {
  background: linear-gradient(130deg, #190F47 0%, #27146C 30%, #2a1675 50%, #27146C 70%, #190F47 100%);
  background-size: 300% 300%;
  animation: bg-pan 24s ease infinite;
}
.hero-credbar {
  background: linear-gradient(110deg, #27146C 0%, #3B2390 45%, #27146C 100%);
  background-size: 240% 240%;
  animation: bg-pan 16s ease infinite;
}
.page-hero {
  background: linear-gradient(135deg, #27146C 0%, #190F47 45%, #2a1675 70%, #27146C 100%);
  background-size: 280% 280%;
  animation: bg-pan 22s ease infinite;
}
.marquee-section {
  background: linear-gradient(100deg, #27146C 0%, #190F47 50%, #27146C 100%);
  background-size: 220% 220%;
  animation: bg-pan 18s ease infinite;
}
.site-footer {
  background: linear-gradient(160deg, #190F47 0%, #1d1150 50%, #160c3e 100%);
  background-size: 200% 200%;
  animation: bg-pan 28s ease infinite;
}

/* ---- Aurora blobs (self-animating, injected into .has-aurora) ---- */
.has-aurora { position: relative; }
.aurora {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  filter: blur(60px); mix-blend-mode: screen; will-change: transform, opacity;
}
.aurora-a { background: radial-gradient(circle, rgba(192,161,102,0.55), transparent 68%); }
.aurora-b { background: radial-gradient(circle, rgba(91,60,200,0.50), transparent 68%); }
.aurora-c { background: radial-gradient(circle, rgba(217,193,148,0.45), transparent 68%); }
@keyframes aurora-1 {
  0%,100% { transform: translate3d(0,0,0) scale(1); opacity: 0.55; }
  50%     { transform: translate3d(60px,-44px,0) scale(1.25); opacity: 0.8; }
}
@keyframes aurora-2 {
  0%,100% { transform: translate3d(0,0,0) scale(1.1); opacity: 0.45; }
  50%     { transform: translate3d(-54px,40px,0) scale(0.9); opacity: 0.7; }
}
@keyframes aurora-3 {
  0%,100% { transform: translate3d(0,0,0) scale(0.95); opacity: 0.4; }
  50%     { transform: translate3d(40px,50px,0) scale(1.2); opacity: 0.65; }
}
.aurora.a1 { animation: aurora-1 17s ease-in-out infinite; }
.aurora.a2 { animation: aurora-2 21s ease-in-out infinite; }
.aurora.a3 { animation: aurora-3 25s ease-in-out infinite; }
.has-aurora > .section,
.has-aurora > .statband2-inner,
.has-aurora > .final-cta-inner,
.has-aurora > .page-hero-content,
.has-aurora > .page-hero-bg,
.has-aurora > .final-cta-bg { position: relative; z-index: 1; }

/* ---- Shimmering gradient on the gold "certified" wordmark ---- */
.hero-title em {
  background: linear-gradient(100deg, var(--gold-deep) 0%, var(--gold) 25%, var(--gold-light) 50%, var(--gold) 75%, var(--gold-deep) 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: text-shimmer 7s linear infinite;
}
@keyframes text-shimmer { to { background-position: 220% center; } }

/* gentle gradient on credential numbers */
.cred-num {
  background: linear-gradient(120deg, var(--gold-light), var(--gold), var(--gold-light));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: text-shimmer 9s linear infinite;
}

/* ---- Light sweep across primary buttons ---- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ''; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.38), transparent);
  transform: skewX(-22deg); pointer-events: none;
}
.btn-primary:hover::after { animation: btn-sheen 0.85s ease; }
@keyframes btn-sheen { from { left: -130%; } to { left: 150%; } }

/* ---- Marching hazard stripes ---- */
.hazard-rule {
  background-size: 22.6px 22.6px;
  animation: hazard-march 2.2s linear infinite;
}
@keyframes hazard-march { to { background-position: 22.6px 0; } }

/* ---- Card top-edge gradient reveal on hover ---- */
.pillar-card, .industry-card { position: relative; }
.pillar-card::before, .industry-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-light), var(--gold-deep));
  background-size: 200% auto;
  transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
  z-index: 2;
}
.pillar-card:hover::before, .industry-card:hover::before { transform: scaleX(1); animation: text-shimmer 3s linear infinite; }

/* ---- Animated gradient on the scroll progress bar ---- */
.scroll-progress {
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-light), var(--gold), var(--gold-deep));
  background-size: 200% auto;
  animation: text-shimmer 4s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .why, .catalogue-scroller, .statband2, .final-cta, .hero-credbar, .page-hero,
  .marquee-section, .site-footer { animation: none !important; }
  .aurora { animation: none !important; }
  .hero-title em, .cred-num, .scroll-progress { animation: none !important; }
  .hazard-rule { animation: none !important; }
}

/* perf: soften aurora on small screens */
@media (max-width: 720px) {
  .aurora { filter: blur(42px); }
}