/* ==========================================================================
   ZULTIV — Design System
   Brand blues sampled from the supplied logo files:
     #0144C0  Master Corporate Logo  -> primary / action blue
     #012B8F  Logo with tagline      -> deep institutional blue (dark sections)
   Gold #FCDA04 is an ACCENT ONLY — thin rules, small marks, underlines.
   Never a large fill. Never used as text colour on a light background
   (gold-on-white is ~1.6:1 contrast and fails WCAG).
   ========================================================================== */

/* ------------------------------- 1. TOKENS ------------------------------ */
:root {
  /* Brand */
  --blue-900: #011F69;
  --blue-800: #012B8F;
  --blue-700: #0136A6;
  --blue-600: #0144C0;
  --blue-500: #1A5AD4;
  --blue-100: #E6EDFB;
  --blue-050: #F2F6FE;

  --gold-600: #C9A800;
  --gold-500: #FCDA04;
  --gold-300: #FDE86B;

  /* Neutrals */
  --ink-900: #0A1230;
  --ink-700: #2A3459;
  --ink-500: #5A6486;
  --ink-300: #9AA2BC;
  --line: #E2E7F2;
  --paper: #FFFFFF;
  --paper-alt: #F6F8FC;

  /* Semantic */
  --bg: var(--paper);
  --text: var(--ink-900);
  --muted: var(--ink-500);

  /* Type */
  --font-display: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.38vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.32rem + 0.86vw, 2.1rem);
  --step-3:  clamp(1.9rem, 1.56rem + 1.62vw, 3rem);
  --step-4:  clamp(2.4rem, 1.78rem + 2.95vw, 4.4rem);
  --step-5:  clamp(2.9rem, 1.9rem + 4.6vw, 6rem);

  /* Space */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;

  /* Shape */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(1, 43, 143, .06), 0 2px 8px rgba(1, 43, 143, .05);
  --shadow-md: 0 4px 12px rgba(1, 43, 143, .08), 0 12px 28px rgba(1, 43, 143, .08);
  --shadow-lg: 0 8px 24px rgba(1, 43, 143, .10), 0 28px 60px rgba(1, 43, 143, .14);

  --header-h: 80px;
  --wrap: 1200px;
  --ease: cubic-bezier(.22, .8, .3, 1);
}

/* ------------------------------- 2. BASE -------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  /* The closed mobile drawer parks at translateX(100%), off the right edge.
     `clip` keeps that out of the scrollable area so the page cannot be swiped
     sideways into blank space; unlike `hidden` it does not break sticky. */
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

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

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-4);
  font-weight: 800;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); letter-spacing: -0.035em; font-weight: 800; }
h2 { font-size: var(--step-4); letter-spacing: -0.03em; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); font-weight: 700; }

p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue-600); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--blue-800); }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.15em; }
li { margin-bottom: .4em; }

:focus-visible {
  outline: 3px solid var(--blue-600);
  outline-offset: 3px;
  border-radius: 3px;
}
.on-dark :focus-visible { outline-color: var(--gold-500); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--blue-800); color: #fff; padding: .8rem 1.2rem;
  border-radius: 0 0 var(--r-md) 0; font-weight: 700;
}
.skip-link:focus { left: 0; color: #fff; }

/* ----------------------------- 3. LAYOUT -------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, 780px); margin-inline: auto; }

.section { padding-block: clamp(3.5rem, 7vw, 6.5rem); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.section--alt { background: var(--paper-alt); }
.section--blue {
  background: var(--blue-800);
  color: #fff;
  --text: #fff; --muted: rgba(255,255,255,.72);
}
.section--blue h2, .section--blue h3, .section--blue h4 { color: #fff; }

/* Blueprint grid texture — the motif carried through the brand imagery */
.section--blue::before,
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 100%);
}
.section--blue > *, .hero > * { position: relative; z-index: 1; }

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* --------------------------- 4. SECTION HEADS --------------------------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: var(--sp-4);
}
.section--blue .eyebrow, .on-dark .eyebrow { color: var(--gold-500); }

.section-head { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head p { color: var(--muted); font-size: var(--step-1); line-height: 1.55; }

.lede { font-size: var(--step-1); line-height: 1.6; color: var(--muted); }

/* ----------------------------- 5. BUTTONS ------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 700; font-size: .97rem;
  padding: .9rem 1.6rem; border-radius: var(--r-pill);
  border: 2px solid transparent; cursor: pointer;
  text-align: center; line-height: 1.2;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { flex: none; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn--primary { background: var(--blue-600); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--blue-800); color: #fff; box-shadow: var(--shadow-md); }

.btn--gold { background: var(--gold-500); color: var(--ink-900); box-shadow: var(--shadow-sm); }
.btn--gold:hover { background: var(--gold-300); color: var(--ink-900); box-shadow: var(--shadow-md); }

.btn--ghost { background: transparent; color: var(--blue-600); border-color: var(--blue-100); }
.btn--ghost:hover { background: var(--blue-050); border-color: var(--blue-600); color: var(--blue-800); }

.btn--onblue { background: #fff; color: var(--blue-800); }
.btn--onblue:hover { background: var(--gold-500); color: var(--ink-900); }

.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn--outline-light:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }

.btn--sm { padding: .62rem 1.15rem; font-size: .88rem; }
.btn--lg { padding: 1.05rem 2rem; font-size: 1.03rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.btn-row.center { justify-content: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-display); font-weight: 700; font-size: .93rem;
  color: var(--blue-600);
}
.link-arrow svg { transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ------------------------------ 6. HEADER ------------------------------- */
/* The bar carries the brand blue so the gold logo sits on its own ground.
   Everything inside therefore flips to light-on-dark: the tokens below are
   scoped to .site-header so the rest of the page keeps its light palette. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(180deg, rgba(1,68,192,.94), rgba(1,54,166,.94));
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.12);
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
  --on-bar: rgba(255,255,255,.86);
  --on-bar-strong: #fff;
}
.site-header.is-stuck {
  background: linear-gradient(180deg, rgba(1,60,175,.97), rgba(1,45,148,.97));
  border-bottom-color: rgba(255,255,255,.16);
  box-shadow: 0 6px 24px rgba(1,20,66,.28);
}
/* Focus rings need to read against blue, not against paper. */
.site-header :focus-visible { outline-color: var(--gold-500); }

.header-inner {
  display: flex; align-items: center; gap: var(--sp-5);
  min-height: var(--header-h);
}

.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 46px; width: auto; display: block; transition: transform .35s var(--ease); }
.brand:hover img { transform: scale(1.03); }
/* The full lockup below ~520px would render the tagline as mush, so the
   wordmark takes over rather than shrinking type nobody can read. */
.brand .brand-mark { display: none; }
@media (max-width: 520px) {
  .brand .brand-lockup { display: none; }
  .brand .brand-mark { display: block; height: 30px; }
}

.nav { margin-left: auto; }
.nav-list {
  display: flex; align-items: center; gap: .2rem;
  list-style: none; margin: 0; padding: 0;
}
.nav-list > li { margin: 0; position: relative; }

.nav-link {
  display: flex; align-items: center; gap: .3rem;
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  color: var(--on-bar); padding: .6rem .85rem; border-radius: var(--r-sm);
  background: none; border: 0; cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav-link:hover, .nav-link[aria-expanded="true"] {
  color: var(--on-bar-strong); background: rgba(255,255,255,.11);
}
.nav-link[aria-current="page"] {
  color: var(--on-bar-strong); background: rgba(255,255,255,.15);
}
.nav-link .caret { transition: transform .25s var(--ease); }
.nav-link[aria-expanded="true"] .caret { transform: rotate(180deg); }

.header-cta { display: flex; align-items: center; gap: .6rem; flex: none; }
@media (max-width: 1080px) { .header-cta .btn--outline-light { display: none; } }

/* Mega menu */
.mega {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translate(-50%, 8px);
  width: min(92vw, 720px);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: var(--sp-5);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.mega[data-open="true"] { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.mega-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-5); }
.mega-col h5 {
  font-size: .74rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-300); margin: 0 0 .55rem; font-weight: 800;
}
.mega-col ul { list-style: none; margin: 0; padding: 0; }
.mega-col li { margin: 0; }
.mega-col a {
  display: block; padding: .45rem .6rem; border-radius: var(--r-sm);
  color: var(--ink-700); font-weight: 500; font-size: .92rem;
  transition: background .18s var(--ease), color .18s var(--ease), padding-left .18s var(--ease);
}
.mega-col a:hover { background: var(--blue-050); color: var(--blue-700); padding-left: .85rem; }
.mega-foot {
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
}
.mega-foot span { font-size: .88rem; color: var(--muted); }

/* Mobile toggle */
.nav-toggle {
  display: none; flex: none;
  width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.08);
  border-radius: var(--r-md); cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.nav-toggle span {
  display: block; width: 20px; height: 2px; background: #fff;
  border-radius: 2px; position: relative;
  transition: background .2s var(--ease);
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: transform .28s var(--ease), top .28s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1150px) {
  .nav-toggle { display: flex; margin-left: auto; }
  .header-cta { display: none; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0 0;
    background: linear-gradient(180deg, var(--blue-700), var(--blue-900)); margin: 0;
    padding: var(--sp-5) 1.25rem var(--sp-8);
    overflow-y: auto;
    transform: translateX(100%);
    /* visibility, not just transform: an off-screen drawer that stays visible
       is still tabbable, so keyboard focus walks into an invisible menu. */
    visibility: hidden;
    transition: transform .35s var(--ease), visibility .35s var(--ease);
    border-top: 1px solid var(--line);
  }
  .nav[data-open="true"] { transform: translateX(0); visibility: visible; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li { border-bottom: 1px solid rgba(255,255,255,.14); }
  .nav-link { padding: 1rem .25rem; font-size: 1.05rem; width: 100%; justify-content: space-between; border-radius: 0; }
  .nav-link:hover, .nav-link[aria-expanded="true"],
  .nav-link[aria-current="page"] { background: none; color: #fff; }
  .mega {
    position: static; transform: none; width: 100%;
    box-shadow: none; border: 0; border-radius: 0;
    padding: 0 0 var(--sp-4) .25rem;
    display: none;
  }
  .mega[data-open="true"] { display: block; transform: none; }
  .mega { background: transparent; }
  .mega-col h5 { color: var(--gold-300); }
  .mega-col a { color: rgba(255,255,255,.82); }
  .mega-col a:hover { background: rgba(255,255,255,.1); color: #fff; }
  .mega-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .mega-foot { display: none; }
  .nav-mobile-cta { display: grid; gap: .6rem; margin-top: var(--sp-5); }
  .nav-mobile-cta .btn { width: 100%; }
}
@media (min-width: 1151px) { .nav-mobile-cta { display: none; } }

/* ------------------------------- 7. HERO -------------------------------- */
.hero {
  position: relative;
  background: linear-gradient(165deg, var(--blue-800) 0%, var(--blue-900) 55%, #01133F 100%);
  color: #fff;
  padding-block: clamp(3rem, 5.2vw, 5rem);
  overflow: hidden;
  --text: #fff; --muted: rgba(255,255,255,.75);
}
.hero h1 { color: #fff; }
/* Faint engineering grid, faded out toward the copy so the headline stays clean.
   The artwork sits behind it as a full-bleed background with its own scrim. */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 16% 34%, #000, transparent 68%);
}
.hero > .wrap { position: relative; z-index: 2; }
/* The artwork is the hero background, so the copy holds one readable column
   on the left and lets the stamp breathe on the right. */
/* The copy column and the hero's height are one decision, not two: a narrow
   column wraps the headline onto more lines, which makes the section taller,
   which makes background-size:cover crop the plate harder. 44rem holds the
   headline to three lines, which keeps the hero near 2:1 and the artwork whole. */
.hero-copy { max-width: 44rem; position: relative; z-index: 2; }
.hero h1 { max-width: 19ch; font-size: clamp(2.4rem, 1.5rem + 3.1vw, 4.15rem); }

.hero-lede {
  font-size: var(--step-1); max-width: 42ch;
  /* The lede is the only hero text small enough to need AA's 4.5:1 rather than
     the 3:1 large-text threshold, and it sits where the artwork's paper is
     brightest. .92 clears it without darkening the plate any further. */
  color: rgba(255,255,255,.92);
}

.hero-proof {
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.14);
}
.hero-proof div strong {
  display: block; font-family: var(--font-display);
  font-size: var(--step-2); font-weight: 800; color: var(--gold-500); line-height: 1;
}
.hero-proof div span { font-size: .85rem; color: rgba(255,255,255,.7); }

/* Hero visual — the "stamp" motif from the brand image system, drawn in CSS/SVG */
.hero-visual { position: relative; display: grid; place-items: center; min-height: 340px; }
.stamp-card {
  width: min(100%, 400px);
  background: linear-gradient(140deg, var(--blue-700), var(--blue-900));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--shadow-lg);
}
/* Inside the dark home hero the card sits on blue already, so it becomes glass. */
.hero-visual .stamp-card { background: rgba(255,255,255,.05); backdrop-filter: blur(8px); }
.stamp-card .doc-line { height: 8px; border-radius: 4px; background: rgba(255,255,255,.14); margin-bottom: .7rem; }
.stamp-card .doc-line.w80 { width: 80%; } .stamp-card .doc-line.w60 { width: 60%; }
.stamp-card .doc-line.w90 { width: 90%; } .stamp-card .doc-line.w45 { width: 45%; }

.stamp-mark {
  margin-top: var(--sp-5); display: flex; align-items: center; gap: var(--sp-4);
  padding-top: var(--sp-5); border-top: 1px solid rgba(255,255,255,.12);
}
.stamp-ring {
  width: 74px; height: 74px; border-radius: 50%; flex: none;
  border: 2px solid var(--gold-500);
  display: grid; place-items: center;
  position: relative;
  animation: stamp-press 4.5s var(--ease) infinite;
}
.stamp-ring::after {
  content: ''; position: absolute; inset: -10px; border-radius: 50%;
  border: 1px solid rgba(252,218,4,.35);
  animation: stamp-halo 4.5s var(--ease) infinite;
}
.stamp-ring svg { width: 34px; height: 34px; }
.stamp-mark p { font-size: .9rem; color: rgba(255,255,255,.75); margin: 0; }
.stamp-mark small { font-size: .85rem; color: rgba(255,255,255,.7); }
.stamp-mark strong { display: block; color: #fff; font-family: var(--font-display); font-size: 1.02rem; }

/* Page header (interior pages) */
.page-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--blue-800), var(--blue-900));
  color: #fff; padding-block: clamp(3rem, 6vw, 5rem);
  --text: #fff; --muted: rgba(255,255,255,.75);
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 80% 80% at 70% 30%, #000, transparent 75%);
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; max-width: 20ch; }
.page-hero .lede { color: rgba(255,255,255,.78); max-width: 60ch; }

/* Paper variant — used where the generated header art is on LIGHT ground
   (A4 Corporate, A5 Insights, A9 Contact). Keeps the editorial and
   conversational pages lighter than the audit/service pages. */
.page-hero--paper {
  background: var(--paper-alt);
  color: var(--ink-900);
  --text: var(--ink-900); --muted: var(--ink-500);
  border-bottom: 1px solid var(--line);
}
.page-hero--paper::before {
  background-image:
    linear-gradient(rgba(1,43,143,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(1,43,143,.05) 1px, transparent 1px);
}
.page-hero--paper h1 { color: var(--ink-900); }
.page-hero--paper .lede { color: var(--ink-500); }
.page-hero--paper .art { opacity: .55; }
.page-hero--paper .breadcrumb li { color: var(--ink-300); }
.page-hero--paper .breadcrumb li:not(:last-child)::after { color: var(--ink-300); }
.page-hero--paper .breadcrumb a { color: var(--ink-500); }
.page-hero--paper .breadcrumb a:hover { color: var(--blue-600); }
.page-hero--paper .breadcrumb [aria-current] { color: var(--blue-600); }

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  list-style: none; margin: 0 0 var(--sp-4); padding: 0;
  font-size: .86rem;
}
.breadcrumb li { margin: 0; color: rgba(255,255,255,.55); display: flex; align-items: center; gap: .5rem; }
.breadcrumb li:not(:last-child)::after { content: '/'; color: rgba(255,255,255,.3); }
.breadcrumb a { color: rgba(255,255,255,.75); }
.breadcrumb a:hover { color: var(--gold-500); }
.breadcrumb [aria-current] { color: var(--gold-500); font-weight: 600; }

/* ------------------------------- 8. CARDS ------------------------------- */
.card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-5);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  height: 100%;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--blue-100); }
.card h3, .card h4 { margin-bottom: .5rem; }
.card p { color: var(--muted); font-size: .95rem; }
.card .card-foot { margin-top: auto; padding-top: var(--sp-4); }

/* Whole-card link */
.card a.stretched::before { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }

.card-icon {
  width: 52px; height: 52px; border-radius: var(--r-md);
  background: var(--blue-050); color: var(--blue-600);
  display: grid; place-items: center; margin-bottom: var(--sp-4);
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.card:hover .card-icon { background: var(--blue-600); color: #fff; transform: scale(1.06) rotate(-3deg); }
.card-icon svg { width: 26px; height: 26px; }

/* Course card */
.course-card .meta {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--sp-3);
}
.tag {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .76rem; font-weight: 700; font-family: var(--font-display);
  letter-spacing: .04em; text-transform: uppercase;
  padding: .3rem .65rem; border-radius: var(--r-pill);
  background: var(--blue-050); color: var(--blue-700);
}
.tag--gold { background: #FEF7CC; color: #6B5A00; }
.tag--ghost { background: transparent; border: 1px solid var(--line); color: var(--ink-500); }

.course-specs {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  margin: var(--sp-4) 0 0; padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: .86rem; color: var(--muted);
}
.course-specs div { display: flex; align-items: center; gap: .4rem; }
.course-specs svg { width: 15px; height: 15px; color: var(--blue-600); flex: none; }

/* Value / why card */
.value-card {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding: var(--sp-5); border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--line);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  height: 100%;
}
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.value-card .num {
  font-family: var(--font-display); font-weight: 800; font-size: 1.6rem;
  color: var(--blue-100); line-height: 1; flex: none;
  -webkit-text-stroke: 0;
}
.value-card h4 { margin-bottom: .35rem; }
.value-card p { margin: 0; color: var(--muted); font-size: .93rem; }

/* Category tile (Training / Assurance landing) */
.tile {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-5); height: 100%;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--blue-100); }
.tile::before {
  content: ''; position: absolute; right: -30px; top: -30px;
  width: 120px; height: 120px; border-radius: 50%;
  border: 1px solid var(--blue-100);
  transition: transform .5s var(--ease);
}
.tile:hover::before { transform: scale(1.25) rotate(20deg); }


/* Industries served - compact icon + label chips. */
.industry-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.industry {
  display: flex; align-items: center; gap: .8rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-4);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.industry:hover { transform: translateY(-4px); border-color: var(--blue-100); box-shadow: var(--shadow-md); }
.industry svg { width: 22px; height: 22px; color: var(--blue-600); flex: none; }
.industry span { font-family: var(--font-display); font-weight: 600; color: var(--ink-900); font-size: .97rem; }

.tile ul { list-style: none; padding: 0; margin: var(--sp-4) 0 0; }
.tile ul li {
  padding: .4rem 0 .4rem 1.4rem; position: relative;
  font-size: .93rem; color: var(--ink-700); border-bottom: 1px solid var(--line);
}
.tile ul li:last-child { border-bottom: 0; }
.tile ul li::before {
  content: ''; position: absolute; left: 0; top: .78em;
  width: 13px; height: 13px;
  background: var(--blue-600);
  -webkit-mask: var(--ic-check) center/contain no-repeat;
          mask: var(--ic-check) center/contain no-repeat;
}

/* Blog card */
.post-card { overflow: hidden; padding: 0; }
.post-thumb {
  aspect-ratio: 16 / 10; background: linear-gradient(140deg, var(--blue-700), var(--blue-900));
  position: relative; overflow: hidden; display: grid; place-items: center;
}
.post-thumb::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 34px 34px;
}
.post-thumb .glyph { position: relative; z-index: 1; width: 56px; height: 56px; color: var(--gold-500); opacity: .9;
  transition: transform .4s var(--ease); }
.post-card:hover .post-thumb .glyph { transform: scale(1.12) translateY(-3px); }
.post-body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.post-meta { font-size: .8rem; color: var(--ink-300); margin-bottom: .6rem; display: flex; gap: .6rem; flex-wrap: wrap; }

/* --------------------------- 9. STATS / MARQUEE ------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-5); }
.stat { text-align: center; padding: var(--sp-4); }
.stat strong {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1;
  color: var(--gold-500); margin-bottom: .4rem;
}
.stat span { font-size: .92rem; color: rgba(255,255,255,.72); }

.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: var(--sp-6); width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  color: var(--ink-500); white-space: nowrap; padding: .5rem 0;
}
.marquee-item svg { width: 18px; height: 18px; color: var(--gold-600); flex: none; }

/* --------------------------- 10. STEPS / PROCESS ------------------------ */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-5); position: relative; }
.step { position: relative; padding-top: var(--sp-5); }
.step::before {
  content: ''; position: absolute; top: 14px; left: 0; right: 0; height: 2px;
  background: var(--blue-100);
}
.step:last-child::before { right: 50%; }
.step:first-child::before { left: 50%; }
@media (max-width: 700px) { .step::before { display: none; } }
.step .dot {
  position: absolute; top: 6px; left: 0;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--blue-600);
  display: grid; place-items: center;
}
.step .dot::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-600); }
.step:last-child .dot { border-color: var(--gold-600); }
.step:last-child .dot::after { background: var(--gold-600); }
.step h4 { margin: var(--sp-4) 0 .4rem; font-size: 1.05rem; }
.step p { font-size: .92rem; color: var(--muted); margin: 0; }

/* ----------------------------- 11. ACCORDION ---------------------------- */
.accordion { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: 1.25rem .25rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink-900);
  transition: color .2s var(--ease);
}
.acc-btn:hover { color: var(--blue-600); }
.acc-icon { flex: none; width: 24px; height: 24px; position: relative; }
.acc-icon::before, .acc-icon::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  background: var(--blue-600); border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.acc-icon::before { width: 14px; height: 2px; }
.acc-icon::after { width: 2px; height: 14px; }
.acc-btn[aria-expanded="true"] .acc-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.acc-btn[aria-expanded="true"] .acc-icon::before { background: var(--blue-600); }
.acc-panel { overflow: hidden; height: 0; transition: height .34s var(--ease); }
.acc-panel > div { padding: 0 .25rem 1.35rem; color: var(--muted); max-width: 68ch; }

/* ------------------------------ 12. TABS -------------------------------- */
.tabs {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line); padding-bottom: var(--sp-4);
}
.tab {
  font-family: var(--font-display); font-weight: 700; font-size: .92rem;
  padding: .6rem 1.15rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: #fff; color: var(--ink-700);
  cursor: pointer; transition: all .25s var(--ease); white-space: nowrap;
}
.tab:hover { border-color: var(--blue-600); color: var(--blue-600); }
.tab[aria-selected="true"] { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
.tab-panel[hidden] { display: none; }
.tab-panel { animation: fade-up .45s var(--ease) both; }

/* ------------------------------ 13. FORMS ------------------------------- */
.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: var(--shadow-sm);
}
.field { margin-bottom: var(--sp-4); }
.field label {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: .87rem; color: var(--ink-700); margin-bottom: .4rem;
}
.field .req { color: #C0392B; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: .97rem; color: var(--ink-900);
  padding: .8rem .95rem; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper-alt);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: #fff;
  border-color: var(--blue-600);
  box-shadow: 0 0 0 4px rgba(1,68,192,.12);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.form-note { font-size: .82rem; color: var(--ink-300); margin-top: var(--sp-3); }

.consent { display: flex; gap: .65rem; align-items: flex-start; font-size: .87rem; color: var(--muted); }
.consent input { width: auto; margin-top: .25rem; flex: none; }

.form-status {
  display: none; margin-top: var(--sp-4); padding: var(--sp-4);
  border-radius: var(--r-md); font-size: .92rem;
  background: #EAF7EE; border: 1px solid #BFE5CB; color: #1E6B36;
}
.form-status.show { display: block; animation: fade-up .4s var(--ease) both; }

/* Status variants — set by main.js §9 alongside the .show class. The base rule
   above is the success/green case, so only the other two need overriding. */
.form-status[data-state="pending"] {
  background: var(--blue-050); border-color: var(--blue-100); color: var(--blue-800);
}
.form-status[data-state="error"] {
  background: #FDECEA; border-color: #F5C6C0; color: #8E2A1E;
}
.form-status[data-state="error"] a { color: #8E2A1E; text-decoration: underline; }
.form-status a { color: inherit; text-decoration: underline; }

/* --------------------------- 14. CONTACT ITEMS -------------------------- */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); }
.contact-list li { display: flex; gap: var(--sp-4); align-items: flex-start; margin: 0; }
.contact-list .ic {
  width: 44px; height: 44px; border-radius: var(--r-md); flex: none;
  background: rgba(255,255,255,.1); display: grid; place-items: center; color: var(--gold-500);
}
.contact-list .ic svg { width: 20px; height: 20px; }
.contact-list strong { display: block; font-family: var(--font-display); font-size: .82rem;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: .15rem; }
.contact-list a, .contact-list span { color: #fff; font-size: 1.02rem; }
.contact-list a:hover { color: var(--gold-500); }

.contact-panel {
  position: relative; overflow: hidden;
  background: linear-gradient(140deg, var(--blue-700), var(--blue-900));
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  padding: var(--sp-6); color: #fff;
}
.contact-panel::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 70% at 80% 15%, #000, transparent 70%);
}
.contact-panel > * { position: relative; z-index: 1; }
.contact-panel h4 { color: #fff; margin-bottom: .25rem; }
.contact-panel .panel-sub {
  color: rgba(255,255,255,.7); font-size: .88rem;
  margin: 0 0 var(--sp-5); padding-bottom: var(--sp-5);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.contact-panel .panel-foot {
  margin: var(--sp-5) 0 0; padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: .82rem; color: rgba(255,255,255,.62);
}

/* --------------------------- 15. CTA BANNER ----------------------------- */
.cta-banner {
  position: relative; overflow: hidden;
  background: linear-gradient(140deg, var(--blue-600), var(--blue-900));
  border-radius: var(--r-xl);
  padding: clamp(2.2rem, 5vw, 3.75rem);
  color: #fff; text-align: center;
}
.cta-banner::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 50%, #000, transparent 72%);
}
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 { color: #fff; margin-bottom: var(--sp-3); }
.cta-banner p { color: rgba(255,255,255,.8); max-width: 58ch; margin-inline: auto; margin-bottom: var(--sp-5); }

/* ------------------------------ 16. FOOTER ------------------------------ */
.site-footer {
  background: var(--blue-900); color: rgba(255,255,255,.72);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  font-size: .93rem;
}
.footer-top { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--sp-6); }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }
.footer-brand img { height: 54px; margin-bottom: var(--sp-4); }
.footer-brand p { max-width: 34ch; font-size: .92rem; }
/* Live-site tagline, carried through to the footer lockup. */
.footer-brand .footer-tagline {
  color: var(--gold-500);
  font-family: var(--font-display, inherit);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .01em;
  margin: 0 0 var(--sp-3);
}
.footer-col h5 {
  font-family: var(--font-display); font-size: .78rem; letter-spacing: .13em;
  text-transform: uppercase; color: #fff; margin: 0 0 var(--sp-4); font-weight: 800;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: .55rem; }
.footer-col a { color: rgba(255,255,255,.72); font-size: .93rem; }
.footer-col a:hover { color: var(--gold-500); }

.footer-legal {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: var(--sp-5);
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between;
  font-size: .84rem; color: rgba(255,255,255,.55);
}
.footer-legal a { color: rgba(255,255,255,.65); }

/* --------------------------- 17. FLOATING CTA --------------------------- */
/* Icon only. A round action button, no label, present on every page. */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff;
  box-shadow: 0 10px 26px rgba(37,211,102,.38), 0 2px 8px rgba(0,0,0,.18);
  transform: translateY(120%); opacity: 0;
  transition: transform .4s var(--ease), opacity .4s var(--ease),
              background .25s var(--ease), box-shadow .25s var(--ease);
}
.wa-float.show { transform: translateY(0); opacity: 1; }
.wa-float:hover { background: #1FBA57; color: #fff; transform: translateY(-3px) scale(1.05); }
.wa-float svg { width: 29px; height: 29px; flex: none; }
/* Outward pulse, drawn behind the button so it never blurs the glyph. */
.wa-float::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25D366; animation: wa-pulse 2.6s var(--ease) infinite;
}
@keyframes wa-pulse {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
@media (max-width: 520px) { .wa-float { width: 52px; height: 52px; right: 14px; bottom: 14px; } }
@media (prefers-reduced-motion: reduce) { .wa-float::before { animation: none; opacity: 0; } }

/* --------------------------- 18. PROSE (blog) --------------------------- */
.prose { max-width: 70ch; }
.prose h2 { font-size: var(--step-2); margin-top: var(--sp-7); }
.prose h3 { font-size: var(--step-1); margin-top: var(--sp-6); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .55em; }
.prose blockquote {
  margin: var(--sp-6) 0; padding: var(--sp-5);
  background: var(--paper-alt); border: 1px solid var(--line);
  border-radius: var(--r-lg);
  font-size: var(--step-1); line-height: 1.5; color: var(--ink-700);
}

/* Sticky sidebar (course / service pages) */
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 980px) { .detail-layout { grid-template-columns: 1fr; } }
.sticky-card { position: sticky; top: calc(var(--header-h) + 20px); }
.enquiry-box {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md); overflow: hidden;
}
.enquiry-box .head {
  background: linear-gradient(140deg, var(--blue-600), var(--blue-800));
  color: #fff; padding: var(--sp-5);
}
.enquiry-box .head h4 { color: #fff; margin-bottom: .3rem; }
.enquiry-box .head p { color: rgba(255,255,255,.78); font-size: .88rem; margin: 0; }
.enquiry-box .body { padding: var(--sp-5); }
.spec-list { list-style: none; padding: 0; margin: 0 0 var(--sp-5); }
.spec-list li {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; margin: 0;
}
.spec-list li:last-child { border-bottom: 0; }
.spec-list dt, .spec-list .k { color: var(--muted); }
.spec-list .v { font-weight: 700; font-family: var(--font-display); color: var(--ink-900); text-align: right; }

.outcome-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.outcome-list li { display: flex; gap: .75rem; align-items: flex-start; margin: 0; }
.outcome-list svg { width: 20px; height: 20px; flex: none; color: var(--gold-600); margin-top: .18rem; }

/* Batch table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
table.batches { width: 100%; border-collapse: collapse; min-width: 560px; font-size: .93rem; }
table.batches th, table.batches td { padding: .95rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); }
table.batches th {
  background: var(--paper-alt); font-family: var(--font-display); font-weight: 800;
  font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-500);
}
table.batches tr:last-child td { border-bottom: 0; }
table.batches tbody tr { transition: background .2s var(--ease); }
table.batches tbody tr:hover { background: var(--blue-050); }

/* --------------------------- 19. ANIMATIONS ----------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(252,218,4,.55); }
  70%  { box-shadow: 0 0 0 10px rgba(252,218,4,0); }
  100% { box-shadow: 0 0 0 0 rgba(252,218,4,0); }
}
@keyframes stamp-press {
  0%, 62%, 100% { transform: scale(1); }
  68% { transform: scale(.9); }
  74% { transform: scale(1.03); }
  80% { transform: scale(1); }
}
@keyframes stamp-halo {
  0%, 62%, 100% { opacity: 0; transform: scale(.9); }
  70% { opacity: 1; transform: scale(1); }
  92% { opacity: 0; transform: scale(1.35); }
}

/* Emphasis inside a heading. A tonal shift, never a rule or an underline.
   On light ground it steps to the action blue; on dark ground it steps to gold,
   which is the only place gold clears contrast as text. */
.u-gold { color: var(--blue-600); }
.section--blue .u-gold, .on-dark .u-gold, .hero .u-gold,
.page-hero:not(.page-hero--paper) .u-gold, .cta-banner .u-gold { color: var(--gold-500); }

/* -------------------------- 20. REDUCED MOTION -------------------------- */
@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;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
}

/* ----------------------------- 21. UTILITIES ---------------------------- */
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); } .mt-7 { margin-top: var(--sp-7); }
.mt-8 { margin-top: var(--sp-8, 4rem); }
.muted { color: var(--muted); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --------------------- 22. GENERATED IMAGE LAYERS ----------------------- */
/* Art from assets/img/generated/ is applied as a background, never an <img>,
   so a page still renders correctly before the artwork exists — a missing
   background simply does not paint, where a missing <img> shows a broken icon.
   Set the URL inline per page:  style="--art:url('assets/img/generated/a1-home-hero.png')" */
/* The artwork itself is declared inline on the element, as background-image and
   NOT as a custom property: a url() carried through var() resolves against the
   stylesheet's own directory (assets/css/), not the page, so every plate 404s.
   An element with no inline image simply paints nothing, which is how the
   not-yet-generated plates stay invisible instead of breaking a layout. */
.art {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: .30;
  pointer-events: none;
}
.page-hero .art { mask-image: linear-gradient(90deg, transparent 0%, #000 45%); }
/* Full-bleed hero artwork with a scrim so the headline always clears contrast. */
/* The hero plate carries its own navy bed on the left, so the scrim here is only
   light insurance for very wide viewports where the cover crop shifts the frame. */
.hero .art { opacity: 1; background-position: 55% center; }
.hero .art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(1,19,63,.52) 0%, rgba(1,19,63,.26) 32%, rgba(1,31,105,0) 60%);
}
@media (max-width: 900px) {
  .page-hero .art { opacity: .16; mask-image: none; }
  /* Narrow viewports crop the plate hard to its centre, so the copy needs a full
     vertical scrim rather than the horizontal one. */
  .hero .art { background-position: 68% center; opacity: .8; }
  .hero .art::after { background: linear-gradient(0deg, rgba(1,19,63,.94) 26%, rgba(1,19,63,.74)); }
}

.post-thumb .art { opacity: .55; }
.post-thumb .art + .glyph { mix-blend-mode: normal; }

/* ==========================================================================
   23. CUSTOM ICON SET
   Drawn for ZULTIV, not pulled from an icon font. Each is a single-path SVG
   held as a CSS mask so it inherits currentColor and can never load broken.
   ========================================================================== */
:root {
  --ic-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5L9.2 17.3 4 12.1'/%3E%3C/svg%3E");
  --ic-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12.5 5.5L19 12l-6.5 6.5'/%3E%3C/svg%3E");
}

/* Icon frame — the shared lockup every custom glyph sits in. The notched
   corner is the ZULTIV mark's rising-arrow angle, reused at small scale. */
.ic-box {
  position: relative; flex: none;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  color: var(--blue-600);
  background: var(--blue-050);
  border: 1px solid var(--blue-100);
  border-radius: 16px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .35s var(--ease);
}
.ic-box svg { width: 28px; height: 28px; stroke-width: 1.7; }
.ic-box::after {
  content: ''; position: absolute; right: 0; top: 0;
  width: 14px; height: 14px;
  background: var(--gold-500);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  opacity: 0; transition: opacity .35s var(--ease);
}
.card:hover .ic-box, .tile:hover .ic-box, .stack-item:hover .ic-box {
  background: var(--blue-600); color: #fff; border-color: var(--blue-600);
  transform: translateY(-3px);
}
.card:hover .ic-box::after, .tile:hover .ic-box::after, .stack-item:hover .ic-box::after { opacity: 1; }
.on-dark .ic-box, .section--blue .ic-box {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #fff;
}

/* ==========================================================================
   24. STACKING CARDS
   Each panel pins under the header and the next one rides up over it. The
   scale/dim as a card is covered is driven from main.js so it stays smooth
   on browsers without scroll-linked animation support.
   ========================================================================== */
.stack { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.stack-item {
  position: sticky;
  top: calc(var(--header-h) + 1.6rem + (var(--i, 0) * 16px));
  transform-origin: center top;
  will-change: transform;
}
.stack-panel {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 88px 1fr auto;
  align-items: center; gap: clamp(1.2rem, 3vw, 2.4rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.6rem, 3.2vw, 2.6rem);
  box-shadow: var(--shadow-md);
}
.stack-panel .idx {
  font-family: var(--font-display); font-weight: 800; line-height: .85;
  font-size: clamp(2.6rem, 5vw, 3.9rem);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--blue-100);
  transition: -webkit-text-stroke-color .4s var(--ease), color .4s var(--ease);
}
.stack-item:hover .stack-panel .idx { -webkit-text-stroke-color: var(--blue-600); }
.stack-panel h3 { margin: 0 0 .45rem; font-size: var(--step-2); }
.stack-panel p { margin: 0; color: var(--muted); max-width: 62ch; }
.stack-panel .ic-box { grid-row: 1; }

/* Bulleted sub-points inside a panel. Each bullet is the custom check glyph
   in a soft chip, so the list reads as evidence rather than as decoration. */
.tick-list { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: grid; gap: .6rem; }
.tick-list li {
  position: relative; margin: 0; padding-left: 32px;
  font-size: .95rem; line-height: 1.5; color: var(--text);
}
.tick-list li::before {
  content: ''; position: absolute; left: 0; top: .05em;
  width: 21px; height: 21px; border-radius: 7px;
  background: var(--blue-050); border: 1px solid var(--blue-100);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.tick-list li::after {
  content: ''; position: absolute; left: 5px; top: calc(.05em + 5px);
  width: 12px; height: 12px; background: var(--blue-600);
  -webkit-mask: var(--ic-check) center/contain no-repeat;
          mask: var(--ic-check) center/contain no-repeat;
  transition: background .3s var(--ease);
}
.stack-item:hover .tick-list li::before,
.card:hover .tick-list li::before { background: var(--blue-600); border-color: var(--blue-600); }
.stack-item:hover .tick-list li::after,
.card:hover .tick-list li::after { background: #fff; }
@media (min-width: 700px) { .tick-list--2 { grid-template-columns: 1fr 1fr; gap: .6rem 1.6rem; } }

/* Course card facts: duration, mode, batches. Icon then label, left aligned. */
.meta-list { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: grid; gap: .45rem; }
.meta-list li {
  display: flex; align-items: center; gap: .55rem; margin: 0;
  font-size: .88rem; color: var(--muted);
}
.meta-list svg { width: 16px; height: 16px; flex: none; color: var(--blue-600); }
@media (max-width: 820px) {
  .stack-panel { grid-template-columns: 1fr; gap: var(--sp-4); }
  .stack-panel .idx { font-size: 2.2rem; }
  .stack-item { top: calc(var(--header-h) + 1rem + (var(--i, 0) * 10px)); }
}

/* ==========================================================================
   25. BENTO — the asymmetric homepage service grid
   ========================================================================== */
.bento {
  display: grid; gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(6, 1fr);
}
.bento > * { grid-column: span 2; }
.bento .b-wide { grid-column: span 4; }
.bento .b-full { grid-column: span 6; }
@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr; }
  .bento > *, .bento .b-wide, .bento .b-full { grid-column: 1 / -1; }
}

/* Feature panel — the tall dark cell inside the bento */
.b-feature {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--blue-700), var(--blue-900));
  border-radius: var(--r-xl); color: #fff;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 260px;
  --text: #fff; --muted: rgba(255,255,255,.75);
}
.b-feature h3, .b-feature h4 { color: #fff; }
.b-feature p { color: rgba(255,255,255,.78); font-size: .95rem; }
.b-feature::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 70% 20%, #000, transparent 78%);
}
.b-feature > * { position: relative; z-index: 1; }
/* Icon frame inverted for the dark feature cell. */
.ic-box--light {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); color: #fff;
}
.b-feature:hover .ic-box--light { background: var(--gold-500); border-color: var(--gold-500); color: var(--ink-900); }
.b-feature:hover .ic-box::after { opacity: 0; }

/* The full-width closing cell runs its icon beside the copy, not above it. */
.bento .b-full {
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(1.1rem, 3vw, 2rem); align-items: center;
}
.bento .b-full .ic-box { margin: 0; }
@media (max-width: 900px) { .bento .b-full { grid-template-columns: 1fr; } }

/* ==========================================================================
   26. MICRO-INTERACTIONS
   ========================================================================== */

/* Cursor spotlight — a soft highlight that tracks the pointer across a card.
   --mx/--my are written by main.js; with no JS the gradient simply sits at 50%. */
.card, .tile, .stack-panel, .industry {
  --mx: 50%; --my: 50%;
}
.card::before, .tile::after, .stack-panel::before, .industry::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(320px circle at var(--mx) var(--my),
              rgba(1,68,192,.07), transparent 62%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.card:hover::before, .tile:hover::after,
.stack-panel:hover::before, .industry:hover::before { opacity: 1; }
.card > *, .tile > *, .stack-panel > *, .industry > * { position: relative; z-index: 1; }

/* Arrow links travel on hover, and the rule under them wipes in from the left */
.link-arrow { position: relative; display: inline-flex; align-items: center; gap: .45rem; }
.link-arrow svg { transition: transform .32s var(--ease); }
.card:hover .link-arrow svg, .tile:hover .link-arrow svg,
.link-arrow:hover svg { transform: translateX(5px); }

/* Buttons: a sheen that sweeps across on hover, plus a real press state */
.btn { position: relative; overflow: hidden; }
.btn > * { position: relative; z-index: 1; }
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.32) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease);
}
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn--gold::after { background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); }

/* Headings resolve letter by letter as they arrive */
[data-reveal] .u-gold { transition: color .5s var(--ease) .25s; }

/* Tags lift slightly with their card */
.card:hover .tag { transform: translateY(-1px); }
.tag { transition: transform .3s var(--ease), background .3s var(--ease); }

/* ==========================================================================
   28. FOOTER — rebuilt lockup
   ========================================================================== */
.footer-cta {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--blue-600), var(--blue-800));
  border-radius: var(--r-xl);
  padding: clamp(1.8rem, 4vw, 3rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--sp-5);
}
.footer-cta::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse at 80% 30%, #000, transparent 75%);
}
.footer-cta > * { position: relative; z-index: 1; }
.footer-cta h3 { color: #fff; margin: 0 0 .35rem; font-size: var(--step-3); }
.footer-cta p { color: rgba(255,255,255,.8); margin: 0; max-width: 46ch; font-size: .95rem; }

.footer-brand img {
  height: 54px; width: auto; margin-bottom: var(--sp-4);
  /* transparent lockup — no plate behind it on the dark ground */
}
.footer-contact { list-style: none; padding: 0; margin: var(--sp-5) 0 0; }
.footer-contact li { margin-bottom: .6rem; }
.footer-contact a {
  display: inline-flex; align-items: center; gap: .6rem;
  color: rgba(255,255,255,.78); font-size: .93rem;
}
.footer-contact a:hover { color: #fff; }
.footer-contact svg { width: 16px; height: 16px; flex: none; color: var(--gold-500); }

.footer-col a {
  position: relative;
  transition: color .25s var(--ease), padding-left .25s var(--ease);
}
.footer-col a:hover { color: #fff; padding-left: 9px; }
.footer-col a::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold-500);
  transform: translate(-9px, -50%) scale(0);
  transition: transform .25s var(--ease);
}
.footer-col a:hover::before { transform: translate(0, -50%) scale(1); }


/* ==========================================================================
   29. REDUCED MOTION — additions
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .stack-item { position: static; transform: none !important; }
  .btn::after { display: none; }
}

/* ==========================================================================
   30. UTILITY STRIP  (review point 12)
   A thin contact bar above the main menu, in the deepest brand blue so the
   header below it reads as the lighter, primary layer. It scrolls away with
   the page; only .site-header is sticky, so the combined bar never eats the
   viewport on a laptop.
   ========================================================================== */
.utility {
  background: var(--blue-900);
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: .82rem;
}
.utility-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); min-height: 40px; padding-block: .3rem;
}
.utility ul { list-style: none; margin: 0; padding: 0; }
.utility li { margin: 0; }

.utility-contact { display: flex; align-items: center; gap: .4rem 1.6rem; flex-wrap: wrap; }
.utility-contact a {
  display: inline-flex; align-items: center; gap: .45rem;
  color: rgba(255,255,255,.74); font-weight: 500;
  transition: color .2s var(--ease);
}
.utility-contact a:hover { color: #fff; }
.utility-contact svg { width: 15px; height: 15px; flex: none; color: var(--gold-500); }
/* The WhatsApp route gets its own colour so it reads as an action, not a
   third phone number. */
.utility-wa { color: #7BE8A6 !important; font-weight: 700 !important; }
.utility-wa:hover { color: #B4F5CE !important; }
.utility-wa svg { color: #25D366 !important; }

.utility-social { display: flex; align-items: center; gap: .38rem; }

/* --------------------------------------------------------------------------
   Brand social icons. Per the reference image supplied with the review these
   are FULL-COLOUR brand marks, not monochrome outlines: each glyph sits on
   its own brand ground. Medium and X are black brands, so on a dark bar they
   are inverted / hairlined rather than disappearing into the background.
   -------------------------------------------------------------------------- */
.soc {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255,255,255,.1); color: #fff;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
}
.soc svg { width: 17px; height: 17px; display: block; }
.soc:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,.32); filter: saturate(1.15); }

.soc--linkedin  { background: #0A66C2; }
.soc--whatsapp  { background: #25D366; border-radius: 50%; }
.soc--youtube   { background: #FF0000; }
.soc--facebook  { background: #1877F2; }
.soc--instagram { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.soc--medium    { background: #FFFFFF; color: #0A1230; }
.soc--x         { background: #000000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.soc--x:hover   { box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 8px 18px rgba(0,0,0,.32); }

.utility-social .soc { width: 28px; height: 28px; border-radius: 8px; }
.utility-social .soc svg { width: 14px; height: 14px; }

/* Below the drawer breakpoint the strip keeps the contact routes (the thing
   a phone visitor actually taps) and drops the social row. */
@media (max-width: 860px) {
  .utility-social { display: none; }
  .utility-inner { justify-content: flex-start; }
  .utility-contact { gap: .3rem 1.1rem; }
}
@media (max-width: 560px) {
  .utility { font-size: .76rem; }
  /* Only the two tap-to-act routes survive; the email address is long and is
     repeated in the footer anyway. */
  .utility-contact li:first-child { display: none; }
}

/* ==========================================================================
   31. BRAND LOCKUP  (review point 1)
   The tagline used to be baked into the logo image at a size nobody could
   read. It is real text now, so it stays crisp at every width and can be
   sized independently of the wordmark.
   ========================================================================== */
.brand { flex-direction: column; align-items: flex-start; gap: 5px; }
.brand .brand-mark { display: block; height: 38px; }

/* Set to match the supplied logo artwork exactly: title case, regular weight,
   white words, gold dots between them and a short gold rule at each end. The
   lockup cannot be used as an image here because at a 38px wordmark the baked
   tagline lands under 5px tall, so it is rebuilt as live text instead. */
.brand-tagline {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 500;
  font-size: .74rem; line-height: 1; letter-spacing: .012em;
  text-transform: none; color: #fff;
  white-space: nowrap;
}
.brand-tagline b { font-weight: 500; }
.brand-tagline i {
  display: block; width: 4.5px; height: 4.5px; flex: none;
  border-radius: 50%; background: var(--gold-500);
}
.brand-tagline::before,
.brand-tagline::after {
  content: ""; display: block; flex: none;
  width: 20px; height: 2px; background: var(--gold-500);
}
@media (max-width: 560px) {
  .brand .brand-mark { height: 30px; }
  .brand-tagline { font-size: .62rem; gap: .34rem; }
  .brand-tagline::before, .brand-tagline::after { width: 12px; }
}
@media (max-width: 380px) { .brand-tagline { display: none; } }

/* ==========================================================================
   32. NAVIGATION ADDITIONS
   Nine top-level items now fit on the bar, so the desktop links tighten up
   and the drawer breakpoint moved from 980px to 1150px (see section 6).
   ========================================================================== */
@media (min-width: 1151px) {
  .nav-list { gap: .05rem; }
  .nav-link { padding: .5rem .58rem; font-size: .875rem; }
  .header-inner { gap: var(--sp-4); }
}
@media (min-width: 1151px) and (max-width: 1279px) {
  .nav-link { padding: .5rem .45rem; font-size: .84rem; }
}

/* Verify Certificate is a utility action, not a content section, so it is
   outlined rather than sitting flush with the content links. */
.nav-link--verify {
  border: 1px solid rgba(252,218,4,.45);
  color: var(--gold-300);
}
.nav-link--verify:hover {
  background: var(--gold-500); color: var(--ink-900); border-color: var(--gold-500);
}
.nav-link--verify[aria-current="page"] {
  background: var(--gold-500); color: var(--ink-900); border-color: var(--gold-500);
}
.nav-link--verify svg { flex: none; }

/* Language selector — no flags, per the review. A flag is a country, not a
   language, and picking one for Arabic or French means picking a side. */
.nav-lang > .nav-link .globe { opacity: .85; }
.lang-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 190px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  padding: .4rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  z-index: 5;
}
.lang-menu[data-open="true"] { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.lang-menu ul { list-style: none; margin: 0; padding: 0; }
.lang-menu li { margin: 0; }
.lang-menu a, .lang-menu span {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: .5rem .65rem; border-radius: var(--r-sm);
  font-size: .92rem; font-weight: 500; color: var(--ink-700);
}
.lang-menu a:hover { background: var(--blue-050); color: var(--blue-700); }
.lang-menu a.is-current { background: var(--blue-050); color: var(--blue-700); font-weight: 700; }
/* Locales that are not built yet are spans, not links: the menu never
   promises a page that does not exist. */
.lang-menu span { color: var(--ink-300); cursor: default; }
.lang-menu small {
  font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-300); border: 1px solid var(--line);
  padding: .12rem .38rem; border-radius: var(--r-pill);
}

/* The Resources / Insights / About panels only carry two columns, so they do
   not need the full 720px plate the Training panel uses. */
.mega--sm { width: min(92vw, 430px); }

@media (max-width: 1150px) {
  .lang-menu {
    position: static; opacity: 1; visibility: visible; pointer-events: auto;
    transform: none; background: transparent; border: 0; box-shadow: none;
    padding: 0 0 var(--sp-4) .25rem; display: none;
  }
  .lang-menu[data-open="true"] { display: block; }
  .lang-menu a, .lang-menu span { color: rgba(255,255,255,.82); }
  .lang-menu a:hover, .lang-menu a.is-current { background: rgba(255,255,255,.1); color: #fff; }
  .lang-menu span { color: rgba(255,255,255,.45); }
  .lang-menu small { color: rgba(255,255,255,.5); border-color: rgba(255,255,255,.2); }
  .nav-link--verify { border: 0; color: #fff; }
  .nav-link--verify:hover, .nav-link--verify[aria-current="page"] { background: none; color: #fff; }
  .mega--sm { width: 100%; }
}

/* ==========================================================================
   33. FOOTER ADDITIONS  (review points 10 and 16)
   ========================================================================== */
.footer-brand .footer-logo { height: 44px; margin-bottom: var(--sp-4); }

/* Review point 10: the ✅Training ✅Certification ✅Assurance tagline has to be
   legible. Set as real text with its own tick marks rather than shrunk-down
   artwork. */
.brand-promise {
  list-style: none; margin: 0 0 var(--sp-4); padding: 0;
  display: flex; flex-wrap: wrap; gap: .45rem .9rem;
}
.brand-promise li {
  display: inline-flex; align-items: center; gap: .4rem; margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: .88rem; letter-spacing: .01em; color: #fff;
}
.brand-promise svg {
  width: 16px; height: 16px; flex: none; color: var(--gold-500);
  stroke-width: 3;
}

.footer-legal { align-items: center; }
.legal-brand { display: inline-flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.legal-brand img { height: 18px; width: auto; display: block; }
.legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; }
.legal-links a { white-space: nowrap; transition: color .2s var(--ease); }
.legal-links a:hover { color: var(--gold-500); }
.legal-links a:not(:last-child)::after {
  content: '|'; margin-left: .55rem; color: rgba(255,255,255,.25);
}

/* ==========================================================================
   34. WHATSAPP DOCK  (review point 13)
   The float is now a dock: the button stays fixed on every page at every
   scroll position, and opens a small chat card above itself.
   ========================================================================== */
.wa-dock {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  display: flex; flex-direction: column; align-items: flex-end; gap: .7rem;
}
/* Overrides section 17: the dock is what is fixed now, not the button. */
.wa-float {
  position: relative; right: auto; bottom: auto;
  border: 0; padding: 0; cursor: pointer;
}
.wa-float .wa-icon-x { display: none; }
.wa-float[aria-expanded="true"] .wa-icon-chat { display: none; }
.wa-float[aria-expanded="true"] .wa-icon-x { display: block; }
.wa-float[aria-expanded="true"]::before { animation: none; opacity: 0; }

.wa-card {
  width: min(84vw, 310px);
  background: #fff; border-radius: var(--r-lg);
  box-shadow: 0 18px 44px rgba(1,20,66,.28), 0 2px 10px rgba(0,0,0,.12);
  overflow: hidden;
  transform-origin: bottom right;
  opacity: 0; transform: translateY(10px) scale(.96);
  transition: opacity .24s var(--ease), transform .24s var(--ease);
}
.wa-card.is-open { opacity: 1; transform: translateY(0) scale(1); }

.wa-card-head {
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem .9rem;
  background: #075E54; color: #fff;
}
.wa-avatar {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  background: #25D366; color: #fff; display: grid; place-items: center;
}
.wa-avatar svg { width: 21px; height: 21px; }
.wa-card-head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wa-card-head strong { font-family: var(--font-display); font-size: .95rem; }
.wa-card-head span {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .74rem; color: rgba(255,255,255,.78);
}
.wa-dot {
  width: 7px; height: 7px; flex: none; border-radius: 50%; background: #4ADE80;
  box-shadow: 0 0 0 0 rgba(74,222,128,.6);
  animation: pulse-dot 2.4s infinite;
}
.wa-close {
  margin-left: auto; flex: none;
  width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  transition: background .2s var(--ease);
}
.wa-close:hover { background: rgba(255,255,255,.26); }
.wa-close svg { width: 14px; height: 14px; }

/* Faint chat-paper texture so the bubbles read as a conversation. */
.wa-card-body {
  padding: var(--sp-4) .9rem;
  background:
    radial-gradient(circle at 20% 30%, rgba(1,68,192,.05) 0 2px, transparent 2px),
    var(--paper-alt);
  background-size: 26px 26px, auto;
}
.wa-bubble {
  position: relative;
  background: #fff; border: 1px solid var(--line);
  border-radius: 12px 12px 12px 3px;
  padding: .6rem .75rem; margin: 0 0 .5rem;
  font-size: .88rem; line-height: 1.5; color: var(--ink-700);
  box-shadow: 0 1px 2px rgba(1,43,143,.05);
}
.wa-bubble:last-child { margin-bottom: 0; }
.wa-bubble b { color: var(--ink-900); }

.wa-cta {
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem .9rem;
  background: #25D366; color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  transition: background .2s var(--ease);
}
.wa-cta:hover { background: #1FBA57; color: #fff; }
.wa-cta svg { width: 22px; height: 22px; flex: none; }
.wa-cta span { display: flex; flex-direction: column; line-height: 1.25; }
.wa-cta small { font-weight: 600; font-size: .78rem; opacity: .9; }

@media (max-width: 520px) {
  .wa-dock { right: 14px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-card { transition: none; }
  .wa-dot { animation: none; }
}

/* ==========================================================================
   35. BREATHING ROOM  (review point 6)
   Cards were sitting 1.5rem apart at every width, which reads as a dense
   block rather than a set of distinct offers. The gap now scales with the
   viewport, and section heads get more air beneath them.
   ========================================================================== */
.grid { gap: clamp(1.5rem, 2.6vw, 2.4rem); }
.section-head { margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }

/* Shared small helpers used by the new pages ------------------------------ */

/* A sub-heading inside a section that already has an h2 above it. */
.sub-head {
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 800;
  margin: var(--sp-8) 0 var(--sp-5); scroll-margin-top: calc(var(--header-h) + 2rem);
  display: flex; align-items: center; gap: .8rem;
}
.sub-head::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.sub-head:first-of-type { margin-top: 0; }

/* The small grey line under a download / playlist card. */
.file-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: var(--sp-3) 0 0;
  font-size: .82rem; color: var(--ink-300); font-weight: 600;
}
.file-meta .tag { font-size: .68rem; padding: .22rem .5rem; }

/* Review point 6: every section ends in one clear call to action. */
.split-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-4) var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  background: var(--blue-050); border: 1px solid var(--blue-100);
  border-radius: var(--r-lg);
}
.split-cta p { margin: 0; max-width: 62ch; color: var(--ink-700); }
.split-cta strong { color: var(--ink-900); }

/* A .split whose left column carries the argument and right column the proof:
   the copy needs more room than a straight 50/50. */
.split--wide { grid-template-columns: 1.05fr .95fr; align-items: start; }
@media (max-width: 980px) { .split--wide { grid-template-columns: 1fr; } }

/* Review point 6: the card CTAs are real links now, so they must sit above
   the whole-card .stretched overlay or the click never reaches them. */
.card-cta { position: relative; z-index: 2; }

/* Numbered process list (careers, methodology). */
.step-list {
  list-style: none; counter-reset: step; margin: 0; padding: 0;
  display: grid; gap: var(--sp-5);
}
.step-list > li {
  counter-increment: step; position: relative;
  margin: 0; padding-left: 4rem; min-height: 2.9rem;
}
.step-list > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  width: 2.9rem; height: 2.9rem; display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--blue-050); border: 1px solid var(--blue-100);
  font-family: var(--font-display); font-weight: 800; font-size: .95rem;
  color: var(--blue-600);
}
.step-list h3, .step-list h4 { margin: .35rem 0 .35rem; font-size: var(--step-1); }
.step-list p { color: var(--muted); margin: 0; }

/* ==========================================================================
   36. VERIFY CERTIFICATE  (review point 12)
   ========================================================================== */
.verify { max-width: 760px; margin-inline: auto; }

.verify-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: .4rem;
  padding: .4rem; margin-bottom: var(--sp-5);
  background: var(--paper-alt); border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.verify-tab {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1rem; border: 0; border-radius: var(--r-md);
  background: transparent; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  color: var(--ink-500);
  transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.verify-tab svg { width: 19px; height: 19px; flex: none; }
.verify-tab:hover { color: var(--blue-700); }
.verify-tab.is-active {
  background: #fff; color: var(--blue-700); box-shadow: var(--shadow-sm);
}
@media (max-width: 520px) {
  .verify-tabs { grid-template-columns: 1fr; }
  .verify-tab { justify-content: flex-start; }
}

.verify-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--shadow-sm);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.verify-card h2 { font-size: var(--step-2); margin-bottom: .5rem; }
.verify-card > p { color: var(--muted); margin-bottom: var(--sp-5); }
.verify-form .field input { font-family: var(--font-display); letter-spacing: .06em; }
.verify-form .btn { width: 100%; }

/* Result panel. Written by JS; the two states are colour-coded and both
   carry an icon, so the outcome does not depend on colour alone. */
.verify-result {
  margin-top: var(--sp-5); padding: var(--sp-5);
  border-radius: var(--r-lg); border: 1px solid var(--line);
  animation: verify-in .35s var(--ease) both;
}
@keyframes verify-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.verify-result--ok   { background: #F0FBF4; border-color: #A9E3C0; }
.verify-result--fail { background: #FDF2F1; border-color: #F0BDB6; }

.verify-status {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-weight: 800; font-size: var(--step-1);
  margin: 0 0 .35rem;
}
.verify-status svg { width: 26px; height: 26px; flex: none; }
.verify-result--ok   .verify-status { color: #16794A; }
.verify-result--fail .verify-status { color: #A62B1B; }
.verify-sub { margin: 0; font-size: .92rem; color: var(--ink-700); }

/* The rows are emitted as bare .k/.v pairs by main.js, so the grid is on the
   container rather than on a row element. Keys stay a fixed column so the
   values line up down the card. */
.verify-rows {
  margin: var(--sp-5) 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: minmax(150px, 32%) 1fr;
  column-gap: var(--sp-4);
}
.verify-rows .k, .verify-rows .v {
  padding: .72rem 0; border-top: 1px solid rgba(1,43,143,.12);
  font-size: .93rem; margin: 0;
}
.verify-rows .k {
  color: var(--ink-500); font-weight: 600; padding-top: .92rem;
  font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
}
.verify-rows .v { color: var(--ink-900); font-weight: 700; }
.verify-rows .v.is-valid { color: #16794A; }
@media (max-width: 520px) {
  .verify-rows { grid-template-columns: 1fr; }
  .verify-rows .k { padding-bottom: 0; }
  .verify-rows .v { border-top: 0; padding-top: .15rem; }
}

.verify-note {
  margin-top: var(--sp-7); font-size: .88rem; line-height: 1.65; color: var(--muted);
  background: var(--paper-alt); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-5);
}
.verify-note strong { color: var(--ink-900); }

/* ==========================================================================
   37. INSIGHTS  (review point 12)
   ========================================================================== */
.insights-hero {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
}
@media (max-width: 940px) { .insights-hero { grid-template-columns: 1fr; } }

/* Newsletter card, top right of the hero. The reference screenshot used a
   deep maroon plate; ZULTIV's own deep blue does the same job of separating
   the ask from the page without importing another brand's palette. */
.news-card {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--blue-800), var(--blue-900));
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: var(--shadow-lg);
  color: rgba(255,255,255,.82);
}
.news-card::before {
  content: ''; position: absolute; right: -60px; top: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(252,218,4,.22), transparent 70%);
  pointer-events: none;
}
.news-card > * { position: relative; z-index: 1; }
.news-badge {
  display: inline-block; margin-bottom: var(--sp-4);
  font-family: var(--font-display); font-weight: 800;
  font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold-500);
  border: 1px solid rgba(252,218,4,.4); border-radius: var(--r-pill);
  padding: .28rem .7rem;
}
.news-card h2 { color: #fff; font-size: var(--step-1); margin-bottom: .6rem; line-height: 1.25; }
.news-card p { font-size: .92rem; line-height: 1.6; margin-bottom: var(--sp-4); color: rgba(255,255,255,.78); }

.news-form { display: flex; gap: .5rem; flex-wrap: wrap; }
.news-form input {
  flex: 1 1 190px; min-width: 0;
  padding: .8rem 1rem; border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08); color: #fff;
  font-family: var(--font-body); font-size: .95rem;
}
.news-form input::placeholder { color: rgba(255,255,255,.5); }
.news-form input:focus {
  outline: 2px solid var(--gold-500); outline-offset: 1px;
  background: rgba(255,255,255,.14);
}
.news-form .btn { flex: none; }
.news-fine { font-size: .78rem !important; color: rgba(255,255,255,.55) !important; margin: var(--sp-3) 0 0 !important; }
.news-fine a { color: rgba(255,255,255,.8); text-decoration: underline; text-underline-offset: 2px; }
.news-fine a:hover { color: var(--gold-500); }
.news-msg {
  margin: var(--sp-3) 0 0 !important; font-size: .88rem !important; font-weight: 600;
  color: var(--gold-300) !important;
}

/* Off-site channel blocks (Medium, LinkedIn) ------------------------------ */
.chan {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.chan-head {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-5) clamp(1.25rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line);
  background: var(--paper-alt);
}
.chan-head h3 { margin: 0; font-size: var(--step-1); }
.chan-head p { margin: .2rem 0 0; font-size: .9rem; color: var(--muted); }
.chan-head .link-arrow { margin-left: auto; }
.chan-logo {
  width: 46px; height: 46px; flex: none; border-radius: 12px;
  display: grid; place-items: center; color: #fff;
}
.chan-logo svg { width: 24px; height: 24px; }
.chan-logo--medium   { background: #000000; }
.chan-logo--linkedin { background: #0A66C2; }

.chan-list { list-style: none; margin: 0; padding: .4rem clamp(.6rem, 2vw, 1.1rem); }
.chan-item { margin: 0; }
.chan-item > a {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: .95rem 1rem; border-radius: var(--r-md);
  transition: background .2s var(--ease), padding-left .2s var(--ease);
}
.chan-item + .chan-item > a { box-shadow: 0 -1px 0 var(--line); }
.chan-item > a:hover { background: var(--blue-050); padding-left: 1.35rem; }
.chan-item > a::after {
  content: ''; flex: none; width: 8px; height: 8px; margin-left: auto;
  border-right: 2px solid var(--ink-300); border-top: 2px solid var(--ink-300);
  transform: rotate(45deg);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.chan-item > a:hover::after { border-color: var(--blue-600); transform: rotate(45deg) translate(2px, -2px); }
.chan-title {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: .98rem; color: var(--ink-900); line-height: 1.4;
}
.chan-meta { display: block; margin-top: .25rem; font-size: .82rem; color: var(--ink-300); }
.chan-item > a > span:first-child { min-width: 0; }

/* ==========================================================================
   38. RESOURCES: WEBINARS  (review point 12)
   ========================================================================== */
.webinar-card { border-left: 3px solid var(--blue-600); }
.webinar-date {
  display: inline-flex; align-items: baseline; gap: .45rem;
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display); font-weight: 800;
  color: var(--blue-700);
}
.webinar-date b { font-size: var(--step-1); line-height: 1; }
.webinar-date span { font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-300); }

.webinar-reg {
  margin-top: clamp(2rem, 4vw, 3rem);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--shadow-sm);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  scroll-margin-top: calc(var(--header-h) + 2rem);
}
.webinar-reg h3 { font-size: var(--step-2); margin-bottom: .5rem; }
.webinar-reg > p { color: var(--muted); margin-bottom: var(--sp-5); max-width: 62ch; }

/* ==========================================================================
   39. PAST WEBINARS: PLAYLISTS  (review point 12)
   ========================================================================== */
.playlists .play-card { position: relative; padding-top: var(--sp-6); }
.play-badge {
  position: absolute; top: var(--sp-5); right: var(--sp-5);
  width: 40px; height: 28px; border-radius: 7px;
  background: #FF0000; color: #fff;
  display: grid; place-items: center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.play-badge svg { width: 20px; height: 20px; }
.play-card:hover .play-badge { transform: scale(1.08); box-shadow: 0 6px 16px rgba(255,0,0,.35); }

/* ==========================================================================
   40. TYPOGRAPHIC EMPHASIS  (review point 6)
   Body paragraphs carry bolded key phrases rather than running flat. The
   emphasis has to be visible without shouting, so it lifts to the ink tone
   and gains weight, and never becomes a colour-only signal.
   ========================================================================== */
.lede b, .lede strong { color: var(--ink-900); font-weight: 700; }
.page-hero:not(.page-hero--paper) .lede b,
.page-hero:not(.page-hero--paper) .lede strong,
.hero .lede b, .hero .lede strong,
.on-dark .lede b, .section--blue .lede b { color: #fff; }
.card p b, .card p strong { color: var(--ink-900); font-weight: 700; }
.meta-list b { color: var(--ink-900); }
.on-dark .meta-list b, .section--blue .meta-list b { color: #fff; }

/* ==========================================================================
   41. DECLUTTER PASS  (header + footer)

   Three things were making the bars read as noise:

   a) .socials had no rules at all, so the seven footer icons rendered as a
      bulleted vertical list running down the column. They are a row now.
   b) .footer-top was still cut for three link columns while the markup
      carries four (Company / Learning / Assurance / Legal), so Legal wrapped
      onto its own line under the brand.
   c) Nav labels wrapped mid-item, which is what made "Contact Us" and
      "Verify Certificate" look broken. Labels are nowrap, and the language
      selector has moved up into the utility strip to buy the room for it.
   ========================================================================== */

/* --- a) footer social row ------------------------------------------------ */
.socials {
  list-style: none; margin: var(--sp-5) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
}
.socials li { margin: 0; }
.socials .soc { width: 34px; height: 34px; border-radius: 9px; }
.socials .soc svg { width: 16px; height: 16px; }

/* --- b) footer column grid ----------------------------------------------- */
.footer-top { grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) {
  .footer-top { grid-template-columns: 1.6fr repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px)  { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .footer-top { grid-template-columns: 1fr; } }

/* --- c) header ------------------------------------------------------------ */
.nav-link { white-space: nowrap; }
.nav-link--verify { padding-inline: .7rem; gap: .38rem; }

/* Utility strip right side: four brand icons, then the language selector.
   Keeping the selector out of the main bar is what stops the nav wrapping. */
.utility-right { display: flex; align-items: center; gap: .2rem .9rem; }

.utility-lang { position: relative; z-index: 120; }
.lang-btn {
  display: inline-flex; align-items: center; gap: .38rem;
  background: none; border: 0; cursor: pointer;
  padding: .3rem .45rem; border-radius: var(--r-sm);
  font: inherit; font-size: .82rem; font-weight: 600;
  color: rgba(255,255,255,.78);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.lang-btn:hover { color: #fff; background: rgba(255,255,255,.08); }
.lang-btn .globe { opacity: .85; }
.lang-btn .caret { transition: transform .25s var(--ease); }
.lang-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }

/* The strip is only 40px tall and the sticky header sits at z-index 100, so
   the panel has to outrank it or it opens underneath. */
.utility-lang .lang-menu { top: calc(100% + 8px); z-index: 130; }

/* The selector is no longer inside the mobile drawer, so the drawer override
   written for it must not apply any more: it stays a dropdown at every width. */
@media (max-width: 1150px) {
  .utility-lang .lang-menu {
    position: absolute; display: block;
    background: #fff; border: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(1,20,66,.18);
    padding: .4rem; opacity: 0; visibility: hidden; pointer-events: none;
  }
  .utility-lang .lang-menu[data-open="true"] {
    opacity: 1; visibility: visible; pointer-events: auto;
  }
  .utility-lang .lang-menu a,
  .utility-lang .lang-menu span { color: var(--ink-700); }
  .utility-lang .lang-menu span { color: var(--ink-300); }
  .utility-lang .lang-menu a:hover,
  .utility-lang .lang-menu a.is-current { background: var(--blue-050); color: var(--blue-700); }
  .utility-lang .lang-menu small { color: var(--ink-500); border-color: var(--line); }
}

/* Below the drawer breakpoint the strip carries contact routes only. The
   social set is a footer job; repeating it on a phone is pure clutter. */
@media (max-width: 860px) {
  .utility-social { display: none; }
}
@media (max-width: 560px) {
  .lang-btn { padding: .3rem .2rem; }
}

/* The three promise items have to sit on one line inside the brand column, or
   "Assurance" drops on its own and the lockup stops reading as a lockup. */
.brand-promise { gap: .4rem .7rem; }
.brand-promise li { font-size: .82rem; }
.brand-promise svg { width: 14px; height: 14px; }
@media (min-width: 1181px) { .footer-top { grid-template-columns: 1.7fr repeat(4, minmax(0, 1fr)); } }

/* ==========================================================================
   42. UTILITY STRIP ON NARROW PHONES

   At 390px the strip was wrapping onto two rows and the language selector was
   floating vertically centred across both, which cost ~110px of viewport
   before the header even started. The WhatsApp route is the one that can go:
   the floating WhatsApp dock (review point 13) is on screen at all times, so
   the strip repeating it is pure duplication. Phone + language, one row.
   ========================================================================== */
@media (max-width: 560px) {
  .utility-contact li:has(.utility-wa) { display: none; }
  .utility-inner { justify-content: space-between; gap: var(--sp-3); }
  .utility-contact { flex-wrap: nowrap; }
}

/* :has() is unsupported in older engines, so the same row is also suppressed
   the long way round. Both selectors target the third contact item. */
@media (max-width: 560px) {
  .utility-contact li:nth-child(3) { display: none; }
}