/* =========================================================================
   YAKIN HIJRAH VENTURES — Corporate Profile
   Design language: corporate minimal, strict navy + white monochrome.
   Structural DNA: margin micro-labels, people-forward hero, two-tone
   headlines, pill tags, hairline borders, no shadows.
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  /* Navy scale — the only hue in the system */
  --navy-900: #0B0D26;
  --navy-800: #14163A;   /* brand navy, from the logo */
  --navy-700: #1D2050;
  --navy-600: #2E3266;
  --navy-400: #5F638F;
  --navy-300: #8B8EB0;
  --navy-200: #BFC1D4;
  --navy-100: #E4E5ED;
  --navy-050: #F1F1F6;

  /* Surfaces */
  --paper: #FBFBF9;      /* page canvas — near-white, a hair of warmth */
  --white: #FFFFFF;

  /* Text */
  --ink: #14163A;
  --ink-muted: #5F638F;
  --ink-faint: #8B8EB0;
  --on-dark: #F1F1F6;
  --on-dark-muted: #A8ABC4;

  /* Lines */
  --rule: #E4E5ED;
  --rule-strong: #BFC1D4;
  --rule-dark: rgba(241, 241, 246, 0.18);

  /* Type */
  /* All-sans, matching the reference. Kept as a separate token from --sans so
     a display face can be reintroduced in one place if wanted. */
  --display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale */
  --t-hero: clamp(2.75rem, 1.2rem + 6.2vw, 5.75rem);
  --t-h1: clamp(2.25rem, 1.2rem + 4.2vw, 4rem);
  --t-h2: clamp(1.75rem, 1.1rem + 2.6vw, 2.875rem);
  --t-h3: clamp(1.25rem, 1rem + 1vw, 1.625rem);
  --t-h4: clamp(1.0625rem, 0.98rem + 0.45vw, 1.25rem);
  --t-body: clamp(0.9875rem, 0.95rem + 0.22vw, 1.0625rem);
  --t-small: 0.875rem;
  --t-micro: 0.6875rem;

  /* Rhythm */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section-y: clamp(4.5rem, 9vw, 9rem);
  --maxw: 1800px;
  --measure: 62ch;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- 2. Reset & base --------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* `hidden` here would make body a scroll container, which silently breaks
     position: sticky in the pillar chapters. `clip` contains overflow without
     creating one; the first line is the fallback for older Safari. */
  overflow-x: hidden;
  overflow-x: clip;
}

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

/* Sans headings need real weight and tighter tracking — the 400/-0.022em that
   suited a serif reads thin and loose here. */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

h4 {
  font-family: var(--sans);
  font-size: var(--t-h4);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

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

ul { margin: 0; padding: 0; list-style: none; }

strong { font-weight: 600; }

::selection {
  background: var(--navy-800);
  color: var(--paper);
}

:focus-visible {
  outline: 2px solid var(--navy-800);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- 3. Layout primitives ---------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section--paper { background: var(--paper); }
.section--white { background: var(--white); }
.section--tinted { background: var(--navy-050); }

.section--dark {
  background: var(--navy-800);
  color: var(--on-dark);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--white); }
.section--dark p { color: var(--on-dark-muted); }

/* The signature device: a narrow margin column for the micro-label,
   with content running in the wide column beside it. */
.labelled {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 5rem);
  align-items: start;
}

/* Sized to the reference: ~13px, light tracking, mid-grey — not a tiny
   wide-tracked micro-label. */
.label {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.45;
  padding-top: 0.5em;
  margin: 0;
}

.section--dark .label { color: var(--navy-300); }

@media (max-width: 860px) {
  /* minmax(0,1fr), not 1fr: a bare 1fr is minmax(auto,1fr), which lets wide
     content stretch the track past the container and cause page overflow. */
  .labelled { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .label { padding-top: 0; }
}

.stack > * + * { margin-top: 1.5rem; }
.stack-sm > * + * { margin-top: 0.75rem; }
.stack-lg > * + * { margin-top: 2.5rem; }

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 56ch;
}

.section--dark .lede { color: var(--on-dark-muted); }

/* Two-tone headline: leading clause recedes, the point lands. */
.muted-clause { color: var(--ink-faint); }
/* navy-300 rather than navy-400 on dark: the clause needs to read as softer,
   not as barely legible — navy-400 on navy-800 is only about 2.5:1. */
.section--dark .muted-clause { color: var(--navy-300); }

.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}

/* ---------- 4. Buttons --------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.85em 1.5em;
  border-radius: 100px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease), transform 0.35s var(--ease);
  white-space: nowrap;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--solid {
  background: var(--navy-800);
  color: var(--paper);
}
.btn--solid:hover { background: var(--navy-700); }

.btn--outline {
  border-color: var(--rule-strong);
  color: var(--ink);
}
.btn--outline:hover {
  border-color: var(--navy-800);
  background: var(--navy-800);
  color: var(--paper);
}

.btn--light {
  background: var(--paper);
  color: var(--navy-800);
}
.btn--light:hover { background: var(--white); }

/* The primary conversion button should out-scale ordinary buttons; every button
   on the site was previously the same 14px, which left the CTA no emphasis. */
.btn--lg {
  font-size: 1rem;
  padding: 1.05em 2.1em;
}

/* Soft tinted rectangle — the reference's header button treatment. */
.btn--soft {
  background: var(--navy-050);
  color: var(--navy-800);
  border-radius: 8px;
  font-weight: 600;
  padding: 0.75em 1.2em;
}
.btn--soft:hover { background: var(--navy-100); }

.btn--ghost-dark {
  border-color: var(--rule-dark);
  color: var(--on-dark);
}
.btn--ghost-dark:hover {
  background: var(--paper);
  color: var(--navy-800);
  border-color: var(--paper);
}

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

/* Text link with a rule that draws in on hover */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink);
  padding-bottom: 0.2em;
  background-image: linear-gradient(var(--navy-800), var(--navy-800));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s var(--ease-out);
}
.link:hover { background-size: 100% 1px; }
.link .arrow { transition: transform 0.4s var(--ease-out); }
.link:hover .arrow { transform: translateX(4px); }

.section--dark .link {
  color: var(--on-dark);
  background-image: linear-gradient(var(--paper), var(--paper));
}

/* ---------- 5. Pills ----------------------------------------------------- */

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pill {
  display: inline-block;
  font-size: var(--t-small);
  font-weight: 450;
  color: var(--ink-muted);
  border: 1px solid var(--rule);
  background: var(--white);
  border-radius: 100px;
  padding: 0.5em 1.05em;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.pill:hover { border-color: var(--rule-strong); color: var(--ink); }

.section--dark .pill {
  background: transparent;
  border-color: var(--rule-dark);
  color: var(--on-dark-muted);
}

/* ---------- 6. Header / navigation --------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 251, 249, 0.86);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}

.header.is-stuck { border-bottom-color: var(--rule); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
}

.brand__mark {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
}

.brand__name {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--ink);
}
.brand__name span {
  display: block;
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
}

/* margin-left:auto groups the links tight against the CTA on the right,
   as in the reference, rather than floating them mid-header. */
.nav { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; }

.nav a {
  position: relative;
  font-size: var(--t-small);
  font-weight: 450;
  color: var(--ink-muted);
  padding: 0.55rem 0.9rem;
  border-radius: 100px;
  transition: color 0.3s var(--ease);
}
.nav a:hover { color: var(--ink); }

.nav a[aria-current="page"] { color: var(--ink); font-weight: 550; }
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.15rem;
  height: 1px;
  background: var(--navy-800);
}

.header__cta { flex-shrink: 0; }

/* The in-nav CTA exists for the mobile drawer only — the header carries
   its own at desktop, and showing both duplicates the button. */
.nav > .btn { display: none; }

.nav-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--rule);
  background: transparent;
  border-radius: 100px;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}

.nav-toggle span {
  display: block;
  width: 1rem;
  height: 1px;
  background: var(--ink);
  position: relative;
  transition: background-color 0.2s var(--ease);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 1rem;
  height: 1px;
  background: var(--ink);
  transition: transform 0.35s var(--ease-out);
}
.nav-toggle span::before { top: -5px; }
.nav-toggle span::after { top: 5px; }

.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 1020px) {
  .nav-toggle { display: inline-flex; }
  .header__cta { display: none; }

  .nav {
    position: fixed;
    inset: 4.75rem 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 0.75rem var(--gutter) 2rem;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), transform 0.35s var(--ease-out),
                visibility 0.35s;
    max-height: calc(100dvh - 4.75rem);
    overflow-y: auto;
  }

  .nav.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
  }

  .nav a {
    padding: 1rem 0;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
  }
  .nav a[aria-current="page"]::after { display: none; }
  .nav > .btn {
    display: inline-flex;
    margin-top: 1.5rem;
    justify-content: center;
    border-bottom: 0;
  }
}

/* ---------- 7. Hero ------------------------------------------------------ */
/* Geometry taken from the reference: centred stack (headline / sub / button)
   above a row of six bottom-aligned colour blocks with staggered tops, each
   carrying a cut-out figure that overflows its block horizontally. */

.hero {
  /* The hero had no background of its own and fell through to the body --paper.
     White here, matching the About block that follows it. */
  background: var(--white);
  text-align: center;
  padding-top: clamp(2.25rem, 4.6vw, 4.25rem);
  /* Whitespace below the cast so the figures don't run flush into whatever
     section follows — they read as clipped rather than composed otherwise. */
  padding-bottom: clamp(3rem, 6vw, 6rem);
  /* Figures deliberately overflow their blocks; clip at the section so that
     overhang can never produce page-level horizontal scroll. */
  overflow-x: clip;
}

.hero__title {
  font-family: var(--sans);
  font-size: clamp(2.1rem, 4.85vw, 4.4rem);
  line-height: 1.09;
  letter-spacing: -0.032em;
  margin: 0 auto;
  max-width: 20ch;
  text-wrap: balance;
}

/* Two-tone: the setup line recedes in grey, the payoff lands in navy. */
.hero__title .t-lead {
  display: block;
  font-weight: 600;
  color: var(--navy-300);
}

.hero__title .t-pay {
  display: block;
  font-weight: 700;
  color: var(--navy-800);
}

.hero__sub {
  font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 33rem;
  margin: clamp(1rem, 1.9vw, 1.6rem) auto 0;
}

.hero__sub strong { color: var(--ink); font-weight: 600; }

.hero__actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.1rem, 2.2vw, 2rem);
}

/* Squared-off rather than the pill used elsewhere, matching the reference. */
.btn--hero {
  background: var(--navy-800);
  color: var(--paper);
  border-radius: 10px;
  padding: 1.05em 1.85em;
  font-size: 0.9375rem;
  font-weight: 600;
}
.btn--hero:hover { background: var(--navy-700); }

/* ---- The cast row ---- */

.hero__cast {
  position: relative;
  /* Clearance for the figures overhanging the top of the block row — at the
     old 2.5rem they collided with the hero button. */
  margin-top: clamp(3.25rem, 9vw, 9rem);
  /* The reference row spans ~86% of the page, leaving side margin for the
     figures to overhang into. Full width would push them off-screen. */
  width: 86%;
  margin-inline: auto;
  /* Locked to the reference's row proportion (1244 x 465). Deriving height
     from the row's own width — not the viewport — keeps block aspect correct
     once the container hits its max-width. */
  aspect-ratio: 1244 / 585;
  min-height: 210px;
}

/* The staggered blocks, now purely a backdrop behind the photograph. */
.cast__blocks {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(5px, 1.1vw, 16px);
  align-items: end;
  z-index: 0;
}

.cast__block {
  height: var(--h, 100%);
  background: var(--block, var(--navy-800));
}

/* One cut-out group shot in front. Sized from the row HEIGHT, not its width:
   the photo is 2.20 wide-to-tall against the row box at 2.67, so driving it off
   width made it overflow upward and cover the button. Bottom-aligned so the
   people stand on the same baseline as the blocks. */
.cast__group {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 112%;
  width: auto;
  max-width: none;
  pointer-events: none;
}

/* Fewer blocks on smaller screens, with the row aspect re-stated each time so
   individual blocks keep the same shape rather than squashing. */
@media (max-width: 900px) {
  .hero__cast { aspect-ratio: 1.74; }
  .cast__blocks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cast__block:nth-child(n + 5) { display: none; }
  /* The photo is one image and cannot drop people, so it scales instead. */
  .cast__group { height: 112%; }
}

@media (max-width: 560px) {
  .hero__cast { aspect-ratio: 1.33; }
  .cast__blocks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cast__block:nth-child(n + 4) { display: none; }
  .cast__group { height: 104%; }
}

/* Inner-page hero — smaller, with the label device */
.page-hero {
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
/* No max-width: inner-page headings run the full content column. The 18ch cap
   that used to live here forced every page title into a narrow stack while the
   column beside it sat empty. `text-wrap: balance` (set globally on h1-h4) is
   what keeps the last line from stranding a single word. */
/* Display scale. The inner-page hero used to be a label, a heading and a lede
   on empty white — the heading now carries the page and the fact rule below
   occupies the space that was reading as unfinished. */
.page-hero__title {
  font-size: clamp(2.5rem, 1.1rem + 5.4vw, 5rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* Hairline between the copy and the banner. */
.page-hero__lower {
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--rule);
}

.page-hero__banner { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

/* ---------- 7b. About block ---------------------------------------------- */
/* Follows the reference's second section: margin label, bold heading, a
   semibold paragraph in a narrow measure, vertically stacked pills, and a
   decorative element bleeding off the right edge. */

.about {
  position: relative;
  overflow-x: clip;
  /* Tight to the marquee below — the two belong to the same introduction, and
     a full section gap between them read as two unrelated blocks. */
  padding-bottom: clamp(1.75rem, 3.5vw, 3rem);
}

.about .wrap { position: relative; z-index: 1; }

/* The copy sets the row height and the portrait stretches to match it. That way
   the heading shares a top line with the portrait (and with the margin label),
   and the portrait's base lands exactly on the stats rule below. Centring the
   copy instead left it floating clear of both edges. */
.about__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.about__body { max-width: 27rem; }

/* Ring motif behind, cut-out portrait in front. Stretches to the row height so
   the portrait's base is guaranteed to meet the stats rule. */
.about__figure {
  position: relative;
  align-self: stretch;
  min-height: 20rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  line-height: 0;
}

.about__person {
  position: relative;
  z-index: 1;
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
}


@media (max-width: 900px) {
  .about__top { grid-template-columns: minmax(0, 1fr); }
  /* Portrait above the copy once stacked, and capped so it doesn't dominate.
     The stretch/height:100% pairing only makes sense while the two sit side by
     side — in a single column it has no row to stretch into. */
  .about__figure {
    grid-row: 1;
    align-self: auto;
    min-height: 0;
    max-width: 20rem;
    justify-self: start;
  }
  .about__person { height: auto; width: 100%; }
  .about__body { grid-row: 2; }
}

/* Stats band merged in from the former Track Record section. Sits outside
   .about__body so it uses the full content column rather than the narrow
   measure the paragraph needs. No top margin: its rule is meant to meet the
   base of the portrait exactly. */
.about__proof { margin-top: 0; }

.about__title {
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.375rem);
  margin-bottom: clamp(1rem, 1.6vw, 1.4rem);
}

/* Notably heavier than body copy — the reference sets this paragraph in
   semibold, which is what gives the block its weight. */
.about__text {
  font-weight: 600;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.45;
  color: var(--ink);
  max-width: 26rem;
}

.pills--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: clamp(1.5rem, 2.6vw, 2.1rem);
}

/* Backdrop for the portrait. Square, anchored to the portrait's base and a
   little wider than it, so the rings sit behind as a halo. */
/* Sized from the row height (not the column width) so it tracks the portrait. */
.about__motif {
  position: absolute;
  left: 50%;
  bottom: -4%;
  transform: translateX(-50%);
  height: 104%;
  width: auto;
  max-width: 148%;
  aspect-ratio: 1;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ---------- 8. Portraits (navy duotone) ---------------------------------- */

.portraits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}

@media (max-width: 780px) {
  .portraits { grid-template-columns: 1fr; gap: 1rem; }
}

.portrait {
  position: relative;
  overflow: hidden;
  background: var(--navy-800);
  aspect-ratio: 3 / 4;
  isolation: isolate;
}

.portrait--wide { aspect-ratio: 4 / 3; }

/* Duotone: strip colour from the source, then tint navy. Real headshots
   dropped in here inherit the treatment automatically. */
.portrait__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: grayscale(1) contrast(1.06) brightness(1.03);
  transition: transform 0.9s var(--ease-out), filter 0.6s var(--ease);
}

.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--navy-800);
  mix-blend-mode: color;
  pointer-events: none;
  z-index: 1;
}

.portrait__scrim {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(1.1rem, 2.2vw, 1.65rem);
  background: linear-gradient(
    to top,
    rgba(11, 13, 38, 0.92) 0%,
    rgba(11, 13, 38, 0.62) 42%,
    rgba(11, 13, 38, 0) 100%
  );
  color: var(--white);
}

.portrait__name {
  font-family: var(--sans);
  font-size: var(--t-h4);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0 0 0.3rem;
  color: var(--white);
}

.portrait__role {
  font-size: var(--t-small);
  color: var(--navy-200);
  margin: 0;
  line-height: 1.4;
}

/* The credential is the point — it carries more weight than the job title. */
.portrait__prior {
  display: block;
  font-size: 0.8125rem;
  color: var(--white);
  font-weight: 500;
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

a.portrait:hover .portrait__img { transform: scale(1.035); }

/* ---------- 9a. Institution strip ---------------------------------------- */
/* The reference's logo wall: a single row spanning the full page width and cut
   off at both edges, so it reads as a continuous strip. Wordmarks rather than
   real brand logos — these are former employers, and reproducing bank logos
   would imply an endorsement that doesn't exist. */

.marks {
  /* Tight to the stats above — same introduction, not a separate block. */
  padding-top: clamp(1rem, 2vw, 1.75rem);
  padding-bottom: clamp(2.25rem, 4.5vw, 3.75rem);
  /* The track is deliberately wider than the viewport. */
  overflow-x: clip;
  --mark-gap: clamp(2.25rem, 5.5vw, 5.5rem);
}

.marks__note {
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 auto clamp(1.5rem, 2.6vw, 2.25rem);
  max-width: none;
}

.marks__strip {
  display: flex;
  /* Starts at the left edge and scrolls; content wraps to fill both sides. */
  justify-content: flex-start;
}

/* No gap here on purpose. Each set carries its own trailing gap instead, so the
   four sets are exactly identical in width — that is what makes translating by
   -25% land on a seamless repeat. A gap on the track would make the halves
   unequal and the loop would visibly jump. */
.marks__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  will-change: transform;
}

.marks__set {
  display: flex;
  align-items: center;
  gap: var(--mark-gap);
  padding-right: var(--mark-gap);
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.mark {
  font-size: clamp(1.15rem, 0.9rem + 1vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-faint);
}

/* ---------- 9b. Pillar chapters ------------------------------------------ */
/* Replaces the earlier tab set. Tabs gave both pillars equal weight but hid
   one of them; a visitor scrolling past never saw it. Each pillar now gets its
   own chapter with a sticky aside, so both are always present and neither is
   ranked by scroll position. */

.chapter { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

/* Three columns on one row: copy, image, list. Placement is explicit so the
   arrangement can be rebuilt at narrower widths without reordering the DOM —
   and with copy first, DOM order now matches visual order. */
.chapter__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 0.72fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 3.4vw, 3.5rem);
  align-items: start;
}

.chapter__aside { grid-column: 1; grid-row: 1; }
.chapter__media { grid-column: 2; grid-row: 1; }
.chapter__list  { grid-column: 3; grid-row: 1; }

/* Takaful chapter holds two numbered lists (Family / General), so they live in
   one stack cell that owns the third column; a bare list still owns it alone. */
.chapter__stack { grid-column: 3; grid-row: 1; }

/* Category heading inside a chapter list — client-requested segregation of the
   takaful offering into Family (people) and General (business & assets). */
.chapter__group {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 0.75rem;
}
.chapter__group span { color: var(--ink-faint); font-weight: 500; }
.chapter__stack .chapter__list + .chapter__group { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* Deliberately NOT sticky. In the two-column arrangement the list was far
   taller than the copy, so pinning gave real travel. With three columns the
   image (508px) is nearly as tall as the list — 300px of travel on the
   six-item chapter and almost none on the four-item one — so pinning would
   barely engage and would behave differently between the two. Top-aligned
   columns are honest about the geometry. */

.chapter__title {
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.875rem);
  margin-bottom: 0.9rem;
}

.chapter__text {
  font-size: var(--t-small);
  line-height: 1.65;
  color: var(--ink-muted);
  max-width: 34ch;
}

/* Client ask: the "01 — Training & Development" pillar label reads bigger and
   brighter than the standard micro-label. Ink (not grey) for the contrast. */
.chapter__aside .label {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
}

/* Fills as you scroll the chapter, so the list has a sense of position. */
.chapter__progress {
  height: 2px;
  background: var(--rule);
  margin: clamp(1.5rem, 2.6vw, 2.1rem) 0 clamp(1.25rem, 2.2vw, 1.75rem);
  max-width: 12rem;
  overflow: hidden;
}

.chapter__bar {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--navy-800);
  transform: scaleX(0);
  transform-origin: left center;
}

/* Its own column rather than inside the aside — nesting it there would push the
   sticky element past viewport height, and a sticky box taller than the
   viewport cannot pin. Portrait crop suits a narrow column. */
/* `relative` is required: the img and the two overlay pseudo-elements are
   absolutely positioned, and without a positioned ancestor here they resolve
   against a distant one and blow out to full-page size. */
/* Taller than the previous 4:5. Both chapters share this ratio and the same
   grid track, so the two images render at identical heights — they carry the
   same kind of content and shouldn't differ in weight. */
.chapter__media {
  position: relative;
  aspect-ratio: 5 / 8;
  overflow: hidden;
  background: var(--navy-100);
}

/* Oversized and inset, so the scroll parallax has room to move without
   exposing an edge. */
.chapter__media img {
  position: absolute;
  inset: -6% 0;
  width: 100%;
  height: 112%;
  object-fit: cover;
  /* Photographs run in their original colour here. The navy duotone that used
     to sit over them (a grayscale filter plus colour-blend and multiply
     overlays) has been removed deliberately. */
}

.chapter__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
  counter-reset: item;
}

.item {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: clamp(0.85rem, 2vw, 1.6rem);
  padding-block: clamp(1.25rem, 2.3vw, 1.9rem);
  border-bottom: 1px solid var(--rule);
}

.item__num {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  padding-top: 0.3em;
}

.item__title {
  font-family: var(--sans);
  font-size: var(--t-h4);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.3;
  margin: 0 0 0.35rem;
}

.item__desc {
  font-size: var(--t-small);
  color: var(--ink-muted);
  line-height: 1.6;
  margin: 0;
}

/* Intermediate: image beside the copy, list on its own row beneath. Three
   columns get too narrow to read much below this. */
@media (max-width: 1150px) {
  .chapter__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
  .chapter__aside { grid-column: 1; grid-row: 1; }
  .chapter__media { grid-column: 2; grid-row: 1; }
  .chapter__list  { grid-column: 1 / -1; grid-row: 2; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
  .chapter__stack { grid-column: 1 / -1; grid-row: 2; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
}

@media (max-width: 760px) {
  .chapter__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 2.25rem); }
  .chapter__aside { grid-column: 1; grid-row: 1; }
  /* Landscape once stacked — a 5:8 portrait would eat the whole screen. */
  .chapter__media { grid-column: 1; grid-row: 2; aspect-ratio: 3 / 2; }
  .chapter__list  { grid-column: 1; grid-row: 3; margin-top: 0; }
  .chapter__stack { grid-column: 1; grid-row: 3; margin-top: 0; }
  .chapter__progress { max-width: none; }
}

@media (max-width: 560px) {
  .item { grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.75rem; }
}

/* ---------- 9c. Figures (inner pages) ------------------------------------ */

/* The inner pages were written as pure prose — no photography at all. This is
   the single media primitive they share: --ar carries the crop, so a wide
   banner and a squarer inset are the same class at a different ratio rather
   than a new modifier each time. */
.figure {
  position: relative;
  aspect-ratio: var(--ar, 16 / 9);
  overflow: hidden;
  background: var(--navy-100);
}

.figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, center);
}

.figure__cap {
  margin: 0.7rem 0 0;
  font-size: var(--t-small);
  color: var(--ink-muted);
  max-width: 46ch;
}

/* Text and media side by side. Placed explicitly rather than by source order so
   the media can lead visually while the markup stays text-first — that keeps
   the reading order sane for screen readers and with styles off. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: start;
}

.split > :first-child { grid-column: 1; grid-row: 1; }
.split > :last-child { grid-column: 2; grid-row: 1; }

/* Media column runs the full height of the row instead of holding a fixed
   ratio. Without this, whichever column is shorter leaves a visible gap — the
   image kept its 4:3 while the copy beside it ended earlier. */
.split--fill { align-items: stretch; }

.figure--fill {
  aspect-ratio: auto;
  height: 100%;
  min-height: 14rem;
}

@media (max-width: 860px) {
  /* Stacked, there is no sibling height to match, so fall back to a ratio. */
  .figure--fill {
    height: auto;
    aspect-ratio: 4 / 3;
    min-height: 0;
  }
}

/* Media left, text right. */
.split--flip > :first-child { grid-column: 2; }
.split--flip > :last-child { grid-column: 1; }

@media (max-width: 860px) {
  /* minmax(0,1fr), never a bare 1fr — that resolves to minmax(auto,1fr) and
     lets a wide child stretch the track past the container. */
  .split { grid-template-columns: minmax(0, 1fr); }
  .split > :first-child,
  .split > :last-child { grid-column: 1; grid-row: auto; }
}

/* ---------- 10. Cards ---------------------------------------------------- */

.grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 980px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--white);
  border: 1px solid var(--rule);
  padding: clamp(1.35rem, 2.4vw, 1.9rem);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease-out);
}

.card:hover { border-color: var(--rule-strong); }
a.card:hover { transform: translateY(-3px); }

/* Card led by a photograph. The image bleeds to the card's edges, so the
   padding moves off .card and onto an inner wrapper. */
.card--media {
  padding: 0;
  overflow: hidden;
}

.card--media .figure { aspect-ratio: 16 / 10; }

.card--media .card__inner {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: clamp(1.35rem, 2.4vw, 1.9rem);
}

/* ---- Solid navy card family ---------------------------------------------- */

/* Tile grid: solid navy panels carrying one short phrase each. Tight gap so they
   read as one block rather than separate cards — the shade variation does the
   separating, the way the hero cast blocks do. */
.tile-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.375rem;
}

/* Tile — label only, bottom-aligned. */
.card--tile {
  background: var(--tile, var(--navy-800));
  border: 0;
  color: var(--white);
  min-height: clamp(8rem, 12vw, 10.5rem);
  justify-content: space-between;
  gap: 1rem;
}

.card--tile .card__title {
  color: var(--white);
  text-wrap: balance;
}

.card--tile .card__icon {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--navy-200);
  margin: 0;
}

/* Solid — same filled panel, but carries a description, so text is top-aligned
   and the body sits a shade lighter for contrast. */
.card--solid {
  background: var(--tile, var(--navy-800));
  border: 0;
  color: var(--white);
  padding: clamp(1.5rem, 2.6vw, 2rem);
  gap: 0.85rem;
}

.card--solid .card__title { color: var(--white); }

/* A linked card title keeps the card colour and picks up an underline on hover,
   rather than inheriting the default link treatment. */
.card--solid .card__title a { color: inherit; text-decoration: none; }
.card--solid .card__title a:hover { text-decoration: underline; text-underline-offset: 0.18em; }

.card--solid .card__body { color: var(--navy-200); }

/* HRD Corp Claimable badge on programme cards — client ask. Outline pill so it
   reads as a stamp, not a second title. --on-dark on the lightest tile
   (navy-600) computes to ~10.6:1. */
.card__tag {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--on-dark);
  border: 1px solid var(--rule-dark);
  border-radius: 100px;
  padding: 0.45em 0.95em;
  align-self: flex-start;
  margin: 0;
}

.card--solid .card__icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--navy-300);
  margin-bottom: 0.35rem;
}

/* Hover lifts the icon rather than the border, which these panels do not have. */
.card--tile:hover,
.card--solid:hover { border-color: transparent; }

.card--tile:hover .card__icon,
.card--solid:hover .card__icon { color: var(--white); }

@media (max-width: 640px) {
  /* Stay two-up — short labels in a single column just lengthen the page. */
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card--tile { min-height: 7rem; }
}

.card__icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--navy-600);
  margin-bottom: 0.5rem;
}

.card__title {
  font-family: var(--sans);
  font-size: var(--t-h4);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.3;
}

.card__body {
  font-size: var(--t-small);
  color: var(--ink-muted);
  line-height: 1.6;
  margin: 0;
}

.card--flush { background: transparent; border: 0; padding: 0; }

/* Numbered card — for programme and value lists */
.card--num { position: relative; padding-top: clamp(1.6rem, 2.6vw, 2.1rem); }

.card__num {
  font-family: var(--display);
  font-size: 0.875rem;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
  margin-bottom: 0.35rem;
}

/* Bordered list — hairlines instead of boxes, quieter than cards */
.rows { border-top: 1px solid var(--rule); }

.row {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(1.25rem, 2.4vw, 1.85rem) 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

@media (max-width: 760px) {
  .row { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* Rows sitting inside a .split have roughly half the page to work with, so the
   standalone 15rem term column left descriptions at ~40 characters a line and
   pushed the longer ones to six. Tighter term column and gap here only. */
.split .row {
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: clamp(0.85rem, 1.6vw, 1.5rem);
}

.row__term {
  font-family: var(--sans);
  font-size: var(--t-h4);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

.row__desc {
  font-size: var(--t-small);
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.65;
}

.section--dark .rows { border-top-color: var(--rule-dark); }
.section--dark .row { border-bottom-color: var(--rule-dark); }
.section--dark .row__desc { color: var(--on-dark-muted); }

/* ---------- 10b. Team profiles ------------------------------------------- */

.profile {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: start;
}

@media (max-width: 900px) {
  .profile { grid-template-columns: 1fr; }
  .profile .portrait { max-width: 22rem; }
}

.profile + .profile {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--rule);
}

.profile__name {
  font-size: var(--t-h2);
  margin-bottom: 0.4rem;
}

.profile__role {
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.5rem;
}

/* Prior institutional standing carries more weight than the current title. */
.profile__prior {
  display: inline-block;
  font-size: var(--t-small);
  color: var(--ink);
  border-left: 2px solid var(--navy-800);
  padding: 0.15rem 0 0.15rem 0.9rem;
  margin-bottom: 1.75rem;
  max-width: 44ch;
  line-height: 1.5;
}

.profile__meta {
  display: grid;
  gap: 0.85rem;
  margin: 1.75rem 0;
  padding: 1.35rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.profile__meta-row {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
}

@media (max-width: 560px) {
  .profile__meta-row { grid-template-columns: 1fr; gap: 0.2rem; }
}

.profile__meta-key {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}

.profile__meta-val {
  font-size: var(--t-small);
  color: var(--ink);
  margin: 0;
  line-height: 1.55;
}

/* ---------- 10b2. Trainers (horizontal scroll) ---------------------------- */
/* The pin is CSS sticky, not ScrollTrigger's `pin`. ScrollTrigger pins with
   position:fixed, which an overflow value on <body> is well known to break —
   and this page sets overflow-x on body. Sticky is already proven here, so GSAP
   only drives the horizontal translate. */

.trainers { position: relative; }

.trainers__sticky {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

/* Only reserve a full screen and pin when there is real travel. With three
   cards the row fits, nothing slides, and an unconditional 100vh frame just
   left a large empty band above and below the cards. */
.trainers.is-scrolling .trainers__sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  justify-content: center;
  /* Clips the track as it slides sideways. */
  overflow: hidden;
}

/* Lede left, "See full profiles" right, both sitting on the same baseline. Side
   by side rather than stacked so the header block stays short — under the pin
   there is only one screen to share with the cards. Wraps on narrow widths. */
.trainers__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: 1.1rem;
}

.trainers__intro .lede { margin: 0; }
.trainers__intro .btn { flex: 0 0 auto; }

/* Idle, the track takes the same box as .wrap so the card edges line up with
   the heading above them. (The track is not inside .wrap — it can't be, since
   the engaged state has to run full-bleed past the viewport edge.) */
.trainers__track {
  display: flex;
  gap: clamp(0.85rem, 1.6vw, 1.5rem);
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* Native horizontal scroll is the fallback when GSAP is absent or the
     visitor prefers reduced motion — the cards stay reachable either way. */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* The snapport is the scrollport minus scroll-padding, NOT minus padding — so
     without this the first card snaps to x:0 and the gutter vanishes on
     phones, leaving the card flush against the screen edge. */
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.trainers__track::-webkit-scrollbar { display: none; }

/* Once GSAP owns the translate, the native scroller must be released and the
   track allowed to run past the viewport. */
.trainers.is-scrolling .trainers__track {
  max-width: none;
  overflow: visible;
  scroll-snap-type: none;
}

/* Cards divide the row when they fit — no max-width, so three of them fill the
   measure exactly and align with the heading. min-width is what forces an
   overflow (and so the native scroller) once the viewport is too narrow.
   measure() in main.js applies .is-scrolling *before* reading scrollWidth, so
   the decision is made against the fixed-width engaged layout below: enough
   cards to overhang the viewport and the slide takes over; too few and it
   falls back to this flexible row. */
.tcard {
  position: relative;
  flex: 1 1 0;
  min-width: 15rem;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--navy-800);
  scroll-snap-align: start;
}

/* Engaged: fixed-width cards that overhang the viewport and slide. */
.trainers.is-scrolling .tcard {
  flex: 0 0 auto;
  width: clamp(15rem, 24vw, 30rem);
  max-width: none;
}

.tcard__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scrim so overlaid text stays legible whatever the photo does underneath. */
.tcard__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1.1rem, 1.8vw, 1.75rem);
  background: linear-gradient(
    to top,
    rgba(11, 13, 38, 0.94) 0%,
    rgba(11, 13, 38, 0.62) 46%,
    rgba(11, 13, 38, 0) 100%
  );
}

.tcard__name {
  font-family: var(--sans);
  font-size: var(--t-h4);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.25;
  color: var(--white);
  margin: 0 0 0.3rem;
}

.tcard__role {
  font-size: var(--t-small);
  color: var(--navy-200);
  margin: 0;
}

/* Phones never pin — a 100vh frame eats the whole screen, so measure() in
   main.js refuses to engage at this same 760px breakpoint and the deck stays a
   native swipe scroller. Deliberately no `position: static` override here: an
   override would fight the JS instead of agreeing with it, leaving the section
   inflated for a pin that never happens. Keep the two breakpoints in step. */
@media (max-width: 760px) {
  .tcard { min-width: min(72vw, 18rem); }
}

/* ---------- 10c. Industries ---------------------------------------------- */
/* One oversized typographic run instead of five body-size rows. Cards, pills,
   small numbered lists, a marquee and stat figures are all already spoken for
   elsewhere on this page, so this section gets its identity from scale.
   No hover state and no arrow: these aren't links, and a marker implying
   navigation that doesn't exist would be a small lie. */

.inds {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--display);
  font-size: clamp(1.35rem, 0.85rem + 2.2vw, 2.875rem);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.24;
  color: var(--ink);
}

/* inline-block so each name stays whole (never breaking mid-industry) and can
   still be transformed — transforms don't apply to plain inline boxes. */
.inds__item { display: inline-block; }

.inds__item:not(:last-child)::after {
  content: "·";
  color: var(--navy-200);
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 0.42em;
}

/* ---------- 11. Proof strip ---------------------------------------------- */

.proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}

@media (max-width: 780px) { .proof { grid-template-columns: repeat(2, 1fr); } }

.proof__fig {
  font-family: var(--display);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 0 0 0.5rem;
}

.proof__label {
  font-size: var(--t-small);
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.45;
  max-width: 24ch;
}

/* Client ask: the 75+ stat gets emphasis — bigger figure, different colour.
   Palette is navy/white/grey only, so "different" = white on a navy tile
   (17.5:1 figure, 7.8:1 label on navy-800). Alternatives offered to client. */
.proof__cell--lead {
  background: var(--navy-800);
  color: var(--white);
  padding: clamp(1.25rem, 2.4vw, 1.9rem);
}

.proof__cell--lead .proof__fig {
  font-size: clamp(2.75rem, 2rem + 2.6vw, 4.5rem);
  color: var(--white);
}

.proof__cell--lead .proof__label {
  color: var(--on-dark-muted);
  max-width: 26ch;
}

/* ---------- 12. Partner wall --------------------------------------------- */

.partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.75rem, 5vw, 4rem);
}

.partner {
  font-family: var(--display);
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-faint);
  transition: color 0.4s var(--ease);
}
.partner:hover { color: var(--ink); }

/* ---------- 13. Full-bleed statement band -------------------------------- */

.band {
  position: relative;
  background: var(--navy-800);
  color: var(--white);
  overflow: hidden;
}

/* Faint concentric arcs — the only ornament in the system, keyed to the
   circular logo mark. */
.band::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -12%;
  width: min(52rem, 78vw);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    repeating-radial-gradient(
      circle at center,
      transparent 0 4.4rem,
      rgba(241, 241, 246, 0.055) 4.4rem 4.45rem
    );
  pointer-events: none;
}

.band .wrap { position: relative; z-index: 1; }

/* The margin label had never been given a colour on dark bands, so it fell back
   to --ink-muted (#5F638F) — barely legible on navy, and worse on the lighter
   navy below. Affects the band on every page. */
.band .label { color: var(--navy-200); }

.band__title {
  font-size: var(--t-h1);
  color: var(--white);
}

/* Lighter, bluer navy band. Two jobs: a second dark block on a page that
   already owns navy-800, and — the reason it exists on Training — the last
   section before the navy-900 footer, where navy-800 sits too close in tone and
   the two merge into one long dark region. */
.band--lift { background: var(--navy-600); }

/* The arcs need a touch more presence on the lighter ground. */
.band--lift::before {
  background:
    repeating-radial-gradient(
      circle at center,
      transparent 0 4.4rem,
      rgba(241, 241, 246, 0.085) 4.4rem 4.45rem
    );
}

.band--lift .lede { color: var(--navy-100); }
/* The base .pill is a white chip, and this rule used to recolour only the text
   — navy-100 on white, 1.26:1, effectively invisible. On this band the chip
   stays white and the label goes dark instead. */
.band--lift .pill {
  background: var(--white);
  border-color: transparent;
  color: var(--navy-800);
}
.band--lift .pill:hover { color: var(--navy-900); border-color: transparent; }

/* ---------- 14. CTA ------------------------------------------------------ */

.cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: end;
}

@media (max-width: 820px) {
  .cta { grid-template-columns: 1fr; align-items: start; }
}

/* ---------- 15. Forms ---------------------------------------------------- */

.form { display: grid; gap: 1.35rem; }

.field { display: grid; gap: 0.5rem; }

.field__label {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.9em 1em;
  width: 100%;
  transition: border-color 0.3s var(--ease);
}

.field textarea { resize: vertical; min-height: 8rem; line-height: 1.6; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--rule-strong); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--navy-800);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-faint); }

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%235F638F' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.75rem;
}

.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.35rem;
}
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }

.form__note {
  font-size: var(--t-small);
  color: var(--ink-faint);
  margin: 0;
}

.form__status {
  font-size: var(--t-small);
  padding: 0.9em 1.15em;
  border: 1px solid var(--navy-800);
  background: var(--navy-050);
  color: var(--ink);
}
.form__status[hidden] { display: none; }

/* ---------- 16. Contact -------------------------------------------------- */

/* Map spans the full row above the two-column form/contact split. */
.contact-map {
  position: relative;
  aspect-ratio: 21 / 7;
  overflow: hidden;
  background: var(--navy-050);
  border: 1px solid var(--rule);
}

@media (max-width: 760px) {
  .contact-map { aspect-ratio: 4 / 3; }
}

.contact-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.contact-map__note {
  font-size: var(--t-small);
  color: var(--ink-muted);
  max-width: 68ch;
  margin: 0.9rem 0 clamp(2rem, 4vw, 3rem);
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; }
}

.contact-card {
  border: 1px solid var(--rule);
  background: var(--white);
  padding: clamp(1.35rem, 2.4vw, 1.85rem);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.contact-card__name {
  font-family: var(--sans);
  font-size: var(--t-h4);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

.contact-card__role {
  font-size: var(--t-small);
  color: var(--ink-faint);
  margin: 0 0 0.85rem;
}

.contact-card a {
  font-size: var(--t-small);
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.3s var(--ease);
}
.contact-card a:hover { color: var(--ink); }

/* ---------- 17. Footer --------------------------------------------------- */

.footer {
  background: var(--navy-900);
  color: var(--on-dark-muted);
  padding-top: clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
}

.footer a { color: var(--on-dark-muted); transition: color 0.3s var(--ease); }
.footer a:hover { color: var(--white); }

/* ---- Closing CTA, folded into the footer -------------------------------- */
/* The reference has no separate CTA band — it closes on one dark block — and
   ours was the palest surface on the site (navy-050) sitting directly above the
   darkest, with 280px of the 422px band empty. Moving the ask into the footer
   makes the page end on a single dark movement and lets the headline run at
   display scale instead of competing from a pale strip. */

/* Two columns: all the copy in the first, the action alone in the second. The
   headline previously sat on its own full-width row above the split, which left
   only the sub-line beside the button and read as two unrelated rows. */
.footer__cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--rule-dark);
}

/* Larger than a section h2 — this is the last thing said, and it now has a
   full-bleed dark field to carry it. */
.footer__cta-title {
  font-size: clamp(2rem, 1.05rem + 3.3vw, 3.5rem);
  color: var(--white);
  margin: 0 0 clamp(1.15rem, 2.4vw, 1.65rem);
}

.footer__cta-text {
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--on-dark-muted);
  max-width: 52ch;
  margin: 0;
}

/* auto column, so the button keeps its natural width and nothing wraps under
   or over it. */
.footer__cta .btn-row { flex: 0 0 auto; margin: 0; }

@media (max-width: 860px) {
  .footer__cta { grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 2rem); }
}

/* `.footer a` sets a muted link colour and outranks the button colour rules on
   specificity (0,1,1 vs 0,1,0). Unchecked, that painted the CTA label #A8ABC4
   on a near-white pill — 2.18:1, well under AA — and the hover rule turned it
   white on white. Buttons keep their own palette inside the footer. */
.footer .btn--light,
.footer .btn--light:hover { color: var(--navy-800); }

.footer .btn--ghost-dark { color: var(--on-dark); }
.footer .btn--ghost-dark:hover { color: var(--navy-800); }

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 0.85fr));
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

@media (max-width: 880px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer__top { grid-template-columns: 1fr; }
}

.footer__heading {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy-300);
  margin: 0 0 1.15rem;
}

.footer__list { display: grid; gap: 0.7rem; font-size: var(--t-small); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  padding-block: 1.75rem;
  font-size: var(--t-small);
  color: var(--navy-400);
}


/* ---------- 18. Motion --------------------------------------------------- */

/* Reveals are opt-in via the .js class set by an inline script in <head>.
   Without JS — or if the observer never fires — content stays visible
   rather than being hidden forever. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}

.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* When GSAP takes over it writes opacity/transform inline every frame; leaving
   the CSS transition on top of that causes visible lag and jitter. main.js adds
   this class only once GSAP is confirmed loaded. */
.gsap [data-reveal] { transition: none; }

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

/* ---------- 19. Utilities ------------------------------------------------ */

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

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--gutter);
  z-index: 200;
  background: var(--navy-800);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  font-size: var(--t-small);
}
.skip-link:focus { top: 0.75rem; }

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