/* ==========================================================================
   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);

  /* The two bars of fixed chrome. --header-h is the main bar's own height;
     --utility-h is the thin strip above it; --chrome-h is what any element
     that scrolls under both has to clear. Anything asking "how much is hidden
     behind the top of the viewport" wants --chrome-h, not --header-h. */
  --utility-h: 40px;
  --header-h: 80px;
  --chrome-h: calc(var(--utility-h) + var(--header-h));
  --wrap: 1200px;
  /* The page runs on two measures. --wrap is the reading measure: prose,
     cards, anything meant to be read sits on it. --gut-wide is the gutter for
     the full-bleed furniture - the top bars and the hero tile row - which
     spans the viewport instead and only holds itself off the edge. Keeping it
     one token is what stops the header and the tile row drifting apart. The
     low end is the page gutter, so on a phone every left edge still lines up. */
  --gut-wide: clamp(1.25rem, 4.5vw, 5rem);
  --ease: cubic-bezier(.22, .8, .3, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--chrome-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; inset-inline-start: 0; 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;
  /* Clipped out of sight rather than parked at left:-9999px. A left offset is
     overflow in the start direction under LTR, which the browser discards -
     but under RTL the start direction is the other way, so the same offset
     turned into ~10,000px of scrollable emptiness on every Arabic page. This
     keeps the link in the accessibility tree and in the tab order while never
     putting it outside the viewport. */
  width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link:focus { width: auto; height: auto; overflow: visible; clip-path: none; 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); }

/* Honeypot field on the enquiry forms. Taken out of the layout and out of the
   accessibility tree rather than display:none, because some bots skip anything
   that is outright hidden - and a bot that skips it is a bot that passes. */
.hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden;
      clip-path: inset(50%); opacity: 0; pointer-events: none; }

.section-head { max-width: 720px; margin-bottom: clamp(2.25rem, 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;
  /* Keeps a two-line lede from ending on an orphan - these sit under a
     balanced heading, so a ragged last line reads as a mistake. */
  text-wrap: pretty; }

/* Rhythm inside the head. The three parts used to sit 1rem apart whatever
   their size, which left the eyebrow floating between the section above and
   the heading it labels rather than reading as attached to it. The gaps are
   graded instead: the eyebrow binds tight to the heading, and the heading
   opens up to its lede - so the stack reads label / statement / explanation
   at a glance. The heading gap is fluid because the heading is. */
.section-head .eyebrow { margin-bottom: var(--sp-2); }
.section-head h1,
.section-head h2 { margin-bottom: clamp(.85rem, 1.1vw, 1.3rem); }
.section-head > p:last-child { margin-bottom: 0; }

/* Two sections back to back each pay their full block padding, so the space
   between them is the sum of the two - 168px between the standards strip and
   the first heading on the home page at 1440, which reads as a dropped
   section rather than a break. A tight strip is a band, not a section: it
   lets the section below it carry the break on its own. */
.section--tight + .section,
.section--tight + .section--alt { padding-top: clamp(2.25rem, 3.6vw, 3.25rem); }

.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: var(--utility-h); 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);
  /* On the reading measure the row had no slack left: lockup, nav and CTA
     added up to exactly 1200px, so the promise row ran straight into the
     first menu item. The bar is full bleed anyway, so it takes the wide
     measure - the lockup moves outward and the space that opens up lands
     between the brand and the menu, which is where it was wanted. */
  width: 100%; max-width: none; padding-inline: var(--gut-wide);
}

.brand { display: flex; align-items: center; }
.brand img { width: auto; display: block; transition: transform .35s var(--ease); }
.brand:hover img { transform: scale(1.03); }
/* The lockup itself is built in section 31, together with its tagline, so the
   wordmark and the three promises stay sized against each other. */

.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); }

/* 1280, not 1200: the bar now carries the language selector as well, and the
   translated menus are the long ones - French, Spanish and Portuguese were
   already overflowing this row at 1201-1264 before the selector arrived. A
   menu that overflows is worse than a drawer, so the drawer takes over up to
   1279 and the horizontal bar only renders where all six locales measurably
   fit. Kept in step with DESKTOP in assets/js/main.js. */
@media (max-width: 1279px) {
  .nav-toggle { display: flex; margin-left: auto; }
  .header-cta { display: none; }
  .nav {
    position: fixed; inset: var(--chrome-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: 1280px) { .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);
}

/* --- 50/50 split hero ----------------------------------------------------
   ZULTIV sells two things, so the homepage opens by giving each of them
   exactly half the width. The seam is a vertical hairline at 50% rather than
   a diagonal, which would hand one side more area than the other. The plate
   overrides that go with this block live with the rest of .art in §22. */
.hero--split { padding-block: 0; }
.hero--split::before { display: none; }   /* the grid would only cover one half */
/* Flat navy, not the 165deg gradient the other heroes use: the tile row under
   the plates sits on this ground, and a gradient there draws a bright edge
   across the full width exactly where the pictures stop. One colour, and it is
   the same colour the plates ramp to, so the join does not read as a join. */
.hero--split { background: #01133F; }


.hero-split {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr;
  /* No gap. The two plates meet edge to edge and the seam is drawn over the
     join, so the halves stay exactly equal at every viewport width. */
  /* The plates are full bleed but the copy is not: the outer edge of each
     half lines up with the page container, so the hero sits on the same grid
     as the header and every section under it. */
  /* Half the hero is half the page, so the page gutter measured from inside a
     half is (half width - half the container). 100% here resolves against the
     half, which is exactly what the padding it feeds is measured against. */
  --gut: max(clamp(1.4rem, 3vw, 2.6rem), calc(100% - var(--wrap) / 2));
  --seam-gap: clamp(1.4rem, 3vw, 2.6rem);
}

.hero-half {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: clamp(23rem, 29vw, 31rem);
}
.hero-half-body {
  position: relative; z-index: 2; width: 100%;
  padding: clamp(2.6rem, 7vw, 5rem) var(--seam-gap) clamp(1.7rem, 3.2vw, 3rem);
}
/* Logical, not physical: in Arabic the grid flips, so the first half lands on
   the right and its page-edge gutter has to flip with it. */
.hero-half:first-child  .hero-half-body { padding-inline-start: var(--gut); }
.hero-half + .hero-half .hero-half-body { padding-inline-end: var(--gut); }

/* The glyph is a marker, not an illustration: gold on glass so it belongs to
   the same family as the two buttons under it. */
.hero--split .hero-half .ic-box {
  margin-bottom: var(--sp-4);
  background: rgba(1,19,63,.55);
  border: 1.5px solid rgba(252,218,4,.55);
  color: var(--gold-500); backdrop-filter: blur(4px);
  /* A ring, not the cut-corner plate used in the body of the site: over a
     photograph the clipped corner reads as a printing fault. */
  border-radius: 50%; clip-path: none;
}
.hero--split .hero-half .ic-box::after { display: none; }
/* Both halves take the same size because they are the same kind of thing.
   The h1/h2 split is semantic ordering only, never a difference in weight.
   The 12ch cap holds each heading to two lines, so the two sides keep the
   same silhouette instead of one running long and the other short. */
.hero-half h1, .hero-half h2 {
  margin: 0 0 var(--sp-4); color: #fff; max-width: 12ch;
  font-size: clamp(1.85rem, 1.1rem + 2vw, 2.85rem);
  text-wrap: balance;
}
.hero-half .hero-lede {
  margin: 0 0 var(--sp-6);
  font-size: clamp(.98rem, .93rem + .28vw, 1.1rem);
  max-width: 40ch;
}

@media (max-width: 820px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-half { min-height: 21rem; }
}

/* Six tiles under the two halves, still inside the hero so they sit on the
   navy rather than opening a new band. The row rewraps as the viewport
   narrows - six, then three, then two - instead of scrolling sideways: a
   tile parked off-screen is a tile nobody sees, and most of this audience
   arrives on a phone. */
.hero-strip {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: clamp(.5rem, 1.1vw, .85rem);
  padding-block: clamp(1rem, 2.4vw, 1.7rem) clamp(1.7rem, 3.6vw, 2.8rem);
  /* Not on the 1200px reading measure: the plates above are full bleed, so a
     row inset to that container leaves a band of empty navy down each side and
     the two stop reading as one block. It takes the wide gutter instead, the
     same one the bars at the top of the page use, so the row keeps a margin
     off the edge without being pulled all the way in to the prose. */
  width: 100%;
  padding-inline: var(--gut-wide);
}
.hero-tile {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  transition: transform .45s var(--ease), border-color .45s var(--ease);
}
.hero-tile:hover { transform: translateY(-4px); border-color: rgba(252,218,4,.55); }

@media (max-width: 900px) { .hero-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) {
  .hero-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem; padding-block: 1rem 1.6rem;
  }
  .hero-tile { border-radius: 10px; }
}

.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); }
/* A tag draws its own pill even with nothing written in it, which reads as
   a stray dot beside the real ones. Nothing to say, nothing to draw. */
.tag:empty, .webinar-date:empty { display: none; }

.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; }
.acc-panel > div > p { margin: 0; }

/* ------------------------------ 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 p { margin: 0; }
.contact-list a, .contact-list span, .contact-list p { 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; }
/* minmax(0, 1fr), not a bare 1fr: a bare fr track floors at min-content, so a
   single wide child kept the column at 562px inside a 350px wrap and every
   line was clipped - off the right under LTR, off the start under RTL. */
@media (max-width: 980px) { .detail-layout { grid-template-columns: minmax(0, 1fr); } }
.sticky-card { position: sticky; top: calc(var(--chrome-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%);
}
/* Split hero: each half owns its own plate. background-position sits above
   centre because the scene lives in the top half of both plates and the copy
   needs the bed underneath it. */
.hero--split .art { opacity: 1; background-position: center center; }
/* The plates end on a ramp to the page navy, so the picture is already bedded
   where the copy sits. This only has to hold the contrast steady as the cover
   crop moves with the viewport, which is why the top two thirds are clear. */
.hero--split .art::after {
  background: linear-gradient(180deg,
    rgba(1,19,63,0) 0%, rgba(1,19,63,.08) 34%,
    rgba(1,19,63,.46) 62%, rgba(1,19,63,.72) 86%,
    /* The last rows go all the way to the page navy rather than stopping at
       .80: the plate has to hand off to the band the tiles sit on without a
       step, and there is nothing left of the picture down there to protect. */
    rgba(1,19,63,.92) 96%, rgba(1,19,63,1) 100%);
}

@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)); }
  /* Stacked, the plate is cropped hard to its centre and the copy sits over
     more of the picture, so this runs a little heavier than the desktop scrim
     without going back to covering the plate. */
  .hero--split .art { background-position: center center; opacity: 1; }
  .hero--split .art::after {
    background: linear-gradient(180deg,
      /* Stacked, the foot of one plate meets the head of the next, so each
         picture eases in out of the navy instead of starting at full
         brightness against it and drawing a bright line across the phone. */
      rgba(1,19,63,.58) 0%, rgba(1,19,63,.10) 9%,
      rgba(1,19,63,.18) 32%,
      rgba(1,19,63,.56) 62%, rgba(1,19,63,.92) 100%);
  }
}

.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(--chrome-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(--chrome-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. Contact routes left;
   the language selector and the brand social icons right.

   30a. It sticks, with .site-header hanging off it at top:var(--utility-h).
   Both bars travel together because the language selector lives up here now
   (section 44) and a visitor half way down a page in the wrong language must
   be able to fix it without scrolling back to the top. The price is 120px of
   permanent chrome, which is a lot of a phone viewport, so the strip is held
   to exactly --utility-h at every width: it drops the social icons at 860 and
   the email route at 560 rather than growing a second line. Anything inside
   it that would exceed 40px has to be made to fit instead.

   The hairline is an inset shadow, not a border, so the rendered height stays
   exactly --utility-h and the token the rest of the sheet offsets against
   does not quietly drift a pixel.
   ========================================================================== */
.utility {
  position: sticky; top: 0;
  /* Above .site-header's 100: the strip is painted first and the dropdown it
     holds has to open over the bar below it, not under it. */
  z-index: 110;
  background: var(--blue-900);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);
  font-size: .82rem;
}
.utility-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); height: var(--utility-h); padding-block: .3rem;
  /* Wide measure, and it has to be the same one the header uses or the email
     address sits inboard of the logo and the two bars read as misaligned. */
  width: 100%; max-width: none; padding-inline: var(--gut-wide);
}
.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-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, translates
   with the rest of the page, and can be sized independently of the wordmark.

   It is the same list and the same tick mark the footer uses, centred under
   the wordmark, so the two ends of the page make the same three claims in
   the same way.
   ========================================================================== */
.brand-lockup {
  flex: none;
  /* The wordmark is centred over the tick row, not aligned to its left edge.
     The row is the wider of the two, so this is what makes the pair read as
     one lockup rather than two stacked items. The block as a whole still sits
     on the page gutter - what moved it left is --gut-wide on .header-inner,
     not this, so centring here costs nothing in the gap to the menu. */
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.brand .brand-mark { height: 40px; }

.brand-promise.brand-promise--header {
  margin: 0; flex-wrap: nowrap; justify-content: center;
  gap: .78rem;
  font-size: .68rem;
}
.brand-promise.brand-promise--header li {
  gap: .3rem;
  font-size: inherit; white-space: nowrap;
}
.brand-promise.brand-promise--header svg { width: 12px; height: 12px; }

/* Most of this audience arrives on a phone, so the promises shrink to keep
   their place beside the menu button rather than being dropped. Sized against
   a 320px viewport, the narrowest screen still in real use. */
@media (max-width: 560px) {
  .brand-lockup { gap: 5px; }
  .brand .brand-mark { height: 31px; }
  .brand-promise.brand-promise--header { gap: .5rem; font-size: .6rem; }
  .brand-promise.brand-promise--header svg { width: 10.5px; height: 10.5px; }
}
@media (max-width: 400px) {
  .brand .brand-mark { height: 27px; }
  .brand-promise.brand-promise--header { gap: .38rem; font-size: .54rem; }
  .brand-promise.brand-promise--header li { gap: .22rem; }
  .brand-promise.brand-promise--header svg { width: 9.5px; height: 9.5px; }
}

/* Below 480 the tick row comes off the lockup and the wordmark stands alone.
   Translated, that row is the widest object in the bar - "Treinamento
   Certificacao Asseguracao" measures 215px on a 320px screen, where the whole
   row has 280px to hold the lockup, the language pill and a 44px menu button
   - and it was pushing the hamburger clean off the right edge in Spanish and
   Portuguese. It is also set at 8.6px there, which reads as a smudge under
   the wordmark rather than as three claims. The claims still run in the
   footer of every page, the lockup is whole again from 480 up, and the
   wordmark takes back some of the height the row was using. */
@media (max-width: 479px) {
  .brand-promise.brand-promise--header { display: none; }
  .brand .brand-mark { height: 34px; }
}

/* ==========================================================================
   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 1279px (see section 6).
   ========================================================================== */
@media (min-width: 1280px) {
  .nav-list { gap: .05rem; }
  .nav-link { padding: .5rem .58rem; font-size: .875rem; }
  .header-inner { gap: var(--sp-4); }
}

/* 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: 1279px) {
  .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); }
/* The head's own bottom margin, and the graded rhythm inside it, are in
   section 4 with the rest of .section-head - it was declared in both places
   and the two values had already drifted apart. */

/* 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(--chrome-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(--chrome-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: 1279px) {
  .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; }
}


/* 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; }
}

/* ==========================================================================
   43. FOOTER BRAND LOCKUP
   The header centres its wordmark over the ✓Training ✓Certification
   ✓Assurance row (section 31); the footer now does the same, so the mark
   reads identically at both ends of the page.

   inline-flex is what makes it work without touching the rest of the column:
   the lockup shrinks to its widest child - the tick row - so the wordmark
   centres on that row while the block itself stays on the column's left
   edge, with the tagline and contact details below it still left aligned.
   ========================================================================== */
.footer-lockup {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: .55rem; margin-bottom: var(--sp-4);
}
.footer-lockup .footer-logo { margin-bottom: 0; }
.footer-lockup .brand-promise { margin-bottom: 0; justify-content: center; }

/* ==========================================================================
   44. LANGUAGE SELECTOR IN THE STICKY STRIP
   The selector lives in the utility strip (section 30) with the other "how to
   reach us" controls. That used to mean it scrolled away, which made changing
   language a scroll-to-the-top job; the strip sticks now (section 30a), so the
   control is on screen at every scroll position without costing the main nav
   any width.

   What is left here is only the part that is specific to the selector inside a
   40px bar: the compact label bands. The nine translated menu items still need
   the graduated steps further down, because the long locales were overflowing
   this row below 1366 before the selector was ever added to it.
   ========================================================================== */

/* Two labels ship in the markup (tools/i18n.py nav()): the endonym, and the
   two-letter code for the widths where "Portugues" spelled out does not fit
   beside four social tiles. CSS picks one; the aria-label says what the
   control does either way. */
.lang-code { display: none; }

.utility-lang { flex: none; }
.lang-btn .lang-name { max-width: 10ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 861-1099: the social tiles are back on the strip and the endonym is what
   gives, since the globe plus FR says the same thing in a third of the room. */
@media (min-width: 861px) and (max-width: 1099px) {
  .lang-name { display: none; }
  .lang-code { display: inline; letter-spacing: .04em; }
  .lang-btn { padding-inline: .34rem; gap: .3rem; }
  .lang-btn .caret { display: none; }
}

/* Phones: the strip is down to two contact routes and the selector, so the
   endonym fits again - but the button needs a real touch target, which .3rem
   of padding does not give it. It gets a 30px pill instead, which is the
   tallest thing that still fits inside --utility-h (section 30a). */
@media (max-width: 560px) {
  .lang-btn {
    min-height: 30px; padding-inline: .5rem;
    border: 1px solid rgba(255,255,255,.26);
    background: rgba(255,255,255,.07);
    border-radius: var(--r-md);
  }
  .lang-btn:hover,
  .lang-btn[aria-expanded="true"] { background: rgba(255,255,255,.18); }
}
/* The narrowest phones: code only, so the pill never pushes the WhatsApp
   route off the right edge in Spanish or Portuguese. */
@media (max-width: 420px) {
  .lang-name { display: none; }
  .lang-code { display: inline; letter-spacing: .04em; }
  .lang-btn { padding-inline: .42rem; gap: .26rem; }
  .lang-btn .caret { display: none; }
}


/* --------------------------------------------------------------------------
   The bar has to hold the lockup, eight menu items, the selector and the CTA
   in every locale, and the translated menus are the long ones: "Verifier un
   certificat" is 164px where "Verify a Certificate" is 137, and French,
   Spanish and Portuguese were already overflowing this row below 1366 before
   the selector arrived. Rather than drop a menu item or send a 1366 laptop to
   the drawer - which would take the CTA off the bar with it, since section 6
   hides .header-cta there - the row buys the width back in four graduated
   steps, tightest at the bottom, defaults again from 1700.

   Measured as free space in .header-inner (content box, not border box: a row
   that spills into the page gutter is misaligned even when nothing clips) in
   all six locales at 1280, 1320, 1365, 1366, 1440, 1499, 1500, 1560, 1599,
   1600, 1699, 1700, 1800 and 1920. Worst case is French, and it stays in
   credit at every one of them.
   -------------------------------------------------------------------------- */

/* Step 1 and 2 share the gutter. The page gutter is 4.5vw, which is 58px of
   padding at 1280 on a row that is 30px short in French - the spaces outside
   the content cost more than the ones inside it, so this band takes a
   narrower gutter and keeps the menu legible. It is the page gutter, not the
   header's, so the bars, the hero strip and the tile row all move together
   and stay aligned with each other. */
@media (min-width: 1280px) and (max-width: 1499px) {
  :root { --gut-wide: clamp(1.75rem, 2.6vw, 3.5rem); }
}
/* Step 1: 1280-1365, the tightest the row ever runs. */
@media (min-width: 1280px) and (max-width: 1365px) {
  .header-inner { gap: .45rem; }
  .nav-link { padding: .5rem .28rem; font-size: .82rem; }
  .nav-link--verify { padding-inline: .44rem; gap: .28rem; }
  .header-cta .btn { padding-inline: .78rem; font-size: .82rem; }
}
/* Step 2: 1366-1499, a hair of the spacing back. */
@media (min-width: 1366px) and (max-width: 1499px) {
  .header-inner { gap: .5rem; }
  .nav-link { padding: .5rem .3rem; font-size: .83rem; }
  .nav-link--verify { padding-inline: .46rem; gap: .28rem; }
  .header-cta .btn { padding-inline: .8rem; font-size: .83rem; }
}
/* Step 3: 1500-1599, full gutter again, still the compact label. */
@media (min-width: 1500px) and (max-width: 1599px) {
  .header-inner { gap: .6rem; }
  .nav-link { padding: .5rem .36rem; font-size: .84rem; }
  .nav-link--verify { padding-inline: .5rem; gap: .3rem; }
  .header-cta .btn { padding-inline: .85rem; font-size: .84rem; }
}
/* Step 4: 1600-1699, the endonym is back and only the spaces are trimmed. */
@media (min-width: 1600px) and (max-width: 1699px) {
  .header-inner { gap: .75rem; }
  .nav-link { padding: .5rem .46rem; font-size: .86rem; }
  .nav-link--verify { padding-inline: .55rem; gap: .3rem; }
  .header-cta .btn { padding-inline: .9rem; font-size: .86rem; }
}

/* ==========================================================================
   35. HEADER BALANCE  (review: "space on the left, cluttered on the right")
   Both halves of that complaint are one fault. `.nav` was pushed over with
   margin-left:auto, and auto on a single side collects every spare pixel in
   the row on that side of the menu: measured on the home page at 1456 the
   lockup ends at 280 and "Home" starts at 583, so 303px of empty blue sits in
   the middle while the menu, the verify link and the CTA share 8px of air at
   the other end. The right end is not actually overfull - it is just carrying
   all of the row's content with none of its space.

   Two fixes, neither of which moves anything in the DOM or changes any
   width. Order in the markup is load-bearing: the i18n keys are positional
   (tools/cms.py derives them from element order), so a link relocated between
   the strip and the bar would silently re-point every translation after it.
   Widths matter too - the graduated compaction in section 34 is measured
   against French at thirteen viewport sizes, and it still holds exactly as
   measured because nothing here resizes a link.
   ========================================================================== */
@media (min-width: 1280px) {

  /* a) Split the slack instead of piling it up. margin-inline, not
     margin-left: auto on both sides halves that 303px into 155 either side of
     the menu and the row reads as three groups - brand, menu, action. Logical
     rather than physical, so Arabic gets the same balance from the same
     declaration; the [dir=rtl] override for .nav came out of rtl.css because
     it would have re-pinned the menu to one side. */
  .nav { margin-inline: auto; }

  /* b) Take the weight out of the two links that were shouting.

     The current page was a filled block, which in a row of plain text links
     reads at a glance as a stray button - that is what the grey box around
     "Home" was. A gold rule under the word carries the same information and
     weighs nothing. */
  .nav-link { position: relative; }
  .nav-link[aria-current="page"] { background: none; color: var(--on-bar-strong); }
  .nav-list > li > .nav-link[aria-current="page"]::after {
    content: ""; position: absolute;
    inset-inline: .5rem; bottom: .1rem; height: 2px;
    border-radius: 2px; background: var(--gold-500);
  }

  /* Verify Certificate keeps its gold and its shield and loses the box. An
     outlined pill immediately left of a solid white button is two buttons
     competing for the same job; the colour on its own is enough to mark it as
     the one link that is not a content section, and the hover still fills
     gold so nothing is lost from the affordance. */
  .nav-link--verify { border-color: transparent; }
  .nav-list > li > .nav-link--verify[aria-current="page"] {
    background: var(--gold-500); color: var(--ink-900); border-color: var(--gold-500);
  }
  .nav-list > li > .nav-link--verify[aria-current="page"]::after { content: none; }
}

/* c) Air between the items. Nine labels at .05rem apart read as one word-wall,
   which is the other half of "cluttered" - the row was dense, not just
   lopsided. The spacing is bought back in bands rather than all at once,
   because the budget is set by French, not English: at 1280 the French menu
   has 13px of slack either side of it and there is nothing to spend, while at
   1456 it has 89. So 1280-1365 is left exactly as section 34 measured it and
   each band above only spends what the longest locale can afford. Checked in
   all six locales at every breakpoint; the figures are in the sweep below. */
@media (min-width: 1366px) { .nav-list { gap: .2rem; } }
@media (min-width: 1500px) { .nav-list { gap: .3rem; } .nav-link { padding-inline: .5rem; } }
@media (min-width: 1700px) {
  .nav-list { gap: .4rem; }
  .nav-link { padding-inline: .7rem; font-size: .9rem; }
}

/* ==========================================================================
   45. FOOTER — REFERENCE LAYOUT

   The client's reference footer is a different shape from sections 16/28/33/41,
   not a restyle of it: the brand block runs full width across the top instead
   of sitting in a column, accreditations take a column of their own on the
   left, and contact and social become their own banded rows underneath. Four
   gold hairlines separate the five bands. This section is last in the file so
   it wins over the earlier .footer-top column counts without editing them.

   The old rules were scoped .footer-brand, which no longer exists in the
   markup, so the tagline and logo sizes are re-declared here rather than
   inherited - without that the tagline would drop back to body text.
   ========================================================================== */

:root { --footer-rule: 1px solid rgba(252, 218, 4, .45); }

/* --- band 1: brand ------------------------------------------------------- */
.footer-masthead {
  text-align: center;
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: var(--footer-rule);
}
.footer-masthead .footer-lockup { margin-bottom: var(--sp-3); }
/* width:auto matters: the <img> carries width="1100" for layout stability, and
   the rule that used to unset it was scoped to the deleted .footer-brand. */
.footer-masthead .footer-logo { height: clamp(38px, 4.4vw, 52px); width: auto;
  max-width: 100%; margin-bottom: 0; }
.footer-masthead .brand-promise { justify-content: center; }

.footer-tagline {
  color: var(--gold-500);
  font-family: var(--font-display, inherit);
  font-weight: 800;
  font-size: clamp(1rem, 1.6vw, 1.22rem);
  letter-spacing: .01em;
  margin: 0 0 var(--sp-3);
}
.footer-blurb {
  color: rgba(255, 255, 255, .86);
  font-size: .95rem;
  line-height: 1.6;
  max-width: 78ch;
  margin: 0 auto;
  text-wrap: balance;
}

/* --- band 2: five link columns ------------------------------------------- */
.footer-top {
  grid-template-columns: 1.35fr repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
  padding-block: clamp(2rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 1181px) { .footer-top { grid-template-columns: 1.35fr repeat(4, minmax(0, 1fr)); } }
/* Below the five-up breakpoint the accreditation block is roughly twice a link
   column's height, so leaving it in the flow strands an empty quadrant beside
   the last two link columns. Sending it to the end as a full-width band keeps
   the link grid solid and reads as a credentials strip under the navigation. */
@media (max-width: 1180px) {
  .footer-top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-col--accred { order: 9; grid-column: 1 / -1;
    border-top: var(--footer-rule); padding-top: clamp(1.25rem, 3vw, 1.75rem); }
}
/* As a full-width band the block's five children would stack in a narrow left
   column and strand the rest of the row, so they are placed on an explicit
   two-track grid: the mark holds the left track across both of its rows while
   the alignment heading, lede and tick list fill the right. */
@media (min-width: 681px) and (max-width: 1180px) {
  .footer-col--accred {
    display: grid; align-items: start;
    column-gap: clamp(1.5rem, 4vw, 3rem); row-gap: var(--sp-2);
    grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
    grid-template-areas: "mkhead alhead" "mark lede" "mark list";
  }
  .footer-col--accred > h5:first-child { grid-area: mkhead; }
  .footer-col--accred .accred-mark { grid-area: mark; margin-bottom: 0; }
  .footer-col--accred .accred-head { grid-area: alhead; margin-top: 0; }
  .footer-col--accred .accred-lede { grid-area: lede; margin-bottom: 0; }
  .footer-col--accred .accred-list { grid-area: list; align-self: start;
    grid-auto-flow: column; justify-content: start; gap: clamp(1rem, 3vw, 2rem); }
}

@media (max-width: 760px) { .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .footer-top { grid-template-columns: 1fr; } }

/* The accreditation column carries two headings, so the second one needs the
   air that the first gets from the grid. */
.footer-col--accred .accred-head { margin-top: var(--sp-5); }
.accred-mark {
  display: block; width: 100%; max-width: 205px; height: auto;
  margin: 0 0 var(--sp-2);
}
.accred-lede {
  margin: 0 0 var(--sp-3); font-size: .88rem; color: rgba(255, 255, 255, .7);
}
.accred-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.accred-list li {
  display: flex; align-items: center; gap: .5rem; margin: 0;
  font-size: .92rem; font-weight: 600; color: rgba(255, 255, 255, .9);
}
.accred-list svg { width: 15px; height: 15px; flex: none; color: var(--gold-500); }

/* --- band 3: contact ----------------------------------------------------- */
.footer-reach {
  border-top: var(--footer-rule);
  border-bottom: var(--footer-rule);
  padding-block: var(--sp-4);
}
.footer-reach .footer-contact {
  margin: 0; display: flex; flex-wrap: wrap;
  justify-content: space-evenly; align-items: center;
  gap: .75rem clamp(1rem, 4vw, 3rem);
}
.footer-reach .footer-contact li { margin: 0; }

/* --- band 4: social ------------------------------------------------------ */
.footer-social { padding-block: clamp(1.1rem, 2.4vw, 1.75rem); }
.footer-social .socials { margin: 0; justify-content: center; gap: .55rem; }

/* RTL: the bands are centred or evenly spread, so only the column text needs
   the flip, and that already comes from the document direction. */

/* The social band already carries its own padding; the legal strip's own
   top margin on top of that opened a ~150px void under the icons. */
.footer-social + .footer-legal,
.footer-legal { margin-top: 0; padding-top: var(--sp-4); }

/* --- the whole footer in one screen -------------------------------------- */
/* Five stacked bands each carrying generous padding added up to roughly 790px,
   so the footer always arrived needing a scroll of its own. Every value below
   is a trim to the breathing room between bands, never to the type or to the
   hit areas, which keeps the proportions while bringing the stack under the
   fold on a 1080p screen. */
.site-footer { padding-top: clamp(1.75rem, 3.4vw, 2.5rem); }
.footer-masthead { padding-bottom: clamp(1.1rem, 2.2vw, 1.5rem); }
.footer-masthead .footer-logo { height: clamp(34px, 3.8vw, 44px); }
.footer-masthead .footer-lockup { margin-bottom: var(--sp-2); }
.footer-tagline { margin-bottom: var(--sp-2); }
.footer-blurb { max-width: 68ch; font-size: .91rem; line-height: 1.55; }
.footer-top { padding-block: clamp(1.25rem, 2.6vw, 1.85rem); }
.footer-col li { margin-bottom: .36rem; }
.footer-reach { padding-block: var(--sp-3); }
.footer-social { padding-block: clamp(.7rem, 1.4vw, 1rem); }
.footer-legal { padding-block: var(--sp-3); }
.footer-social + .footer-legal,
.footer-legal { padding-top: var(--sp-3); }

/* Narrow screens stack the five link columns, which no amount of padding
   trimming will fit in one view - so there the bands get their air back. */
@media (max-width: 860px) {
  .site-footer { padding-top: var(--sp-6); }
  .footer-top { padding-block: var(--sp-5); }
  .footer-col li { margin-bottom: .5rem; }
}

/* --- an icon can never size itself to the column ------------------------- */
/* An <svg> carrying only a viewBox has no intrinsic size, so it stretches to
   whatever box it lands in - which is how the telephone came to be rendered
   the height of the whole column. Every icon now states its size in the
   markup, but the contact links are editable: a saved edit rewrites the inside
   of the link, icon included, and can put a dimensionless one back. This rule
   is the floor under that. It touches nothing that declares its own size. */
.site-footer svg:not([width]),
.wa-widget svg:not([width]) { width: 16px; height: 16px; flex: none; }

/* --- the icon stays on the number's line --------------------------------- */
/* The contact link is laid out as inline-flex further up, which keeps the icon
   and the number together. If that rule is ever missing - an older stylesheet
   still in a cache, a saved edit that rewrites the link - the anchor falls back
   to ordinary inline content, and in a narrow column the line then breaks
   between the icon and the digits, leaving the icon stranded above them.
   These two declarations hold the pair together in that fallback too: nothing
   inside the link may break, and an inline icon sits on the text's own line
   rather than its baseline. Harmless where the flex rule does apply. */
.footer-contact a { white-space: nowrap; }
.footer-contact a svg { vertical-align: middle; }

/* --- an icon with no stated size ----------------------------------------- */
/* An <svg> that carries only a viewBox has no intrinsic size. Given a box, it
   takes all of it - which is how the telephone came to be drawn the height of
   its whole column once the rule that sized it stopped arriving. Most icons
   now state their size in the markup, but 200-odd across the page bodies still
   lean on the stylesheet, and the editable ones can have their markup rewritten
   by a saved edit at any time.
   :where() holds this at zero specificity, so it is a floor and never a
   ceiling: every real rule in this file outranks it, including the one-line
   ones above, and it only takes effect where nothing else has set a size at
   all. That is exactly the case that breaks a layout. */
:where(svg:not([width])) { width: 1em; height: 1em; }