/* ==========================================================================
   Hayjaf Synergies Limited, site styles
   Section order: tokens > base > layout > components > responsive > motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Self-hosted fonts (inactive)
   Vendor Archivo 400/500/600/700 and IBM Plex Sans 400/500/600 as .woff2 into
   assets/fonts/, uncomment this block, and drop the Google Fonts <link> from
   both page heads. Runtime Google Fonts is render-blocking and sends every
   visitor's IP to a third-party host, which is the wrong default here.

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand, navy */
  --navy-900: #08111F;
  --navy-800: #0B1B33;
  --navy-700: #0F2440;
  --navy-600: #14304F;

  /* Brand, blue. --blue-dk is the accessible variant for blue text or fills
     on light surfaces; plain --blue only clears AA against white. */
  --blue: #2E6FD6;
  --blue-dk: #2559AC;
  --blue-lt: #3A88DA;
  --blue-pale: #6FA8E8;
  --blue-soft: #9EC6F5;
  --blue-wash: #EAF1FC;

  /* Brand, green. Green carries the "verified outcome" role and is the second
     accent by design, not by drift. */
  --green: #34B67A;
  --green-mid: #31A98C;
  --green-dk: #1E7C55;
  --green-wash: #E9F7F0;
  --teal: #2E93B4;

  /* Neutrals */
  --ink-900: #0B1B33;
  --ink-700: #3D4C63;
  --ink-500: #5A6B84;
  --ink-400: #5F7189;   /* muted on white, clears AA at 4.99:1 */
  --ink-300: #8DA0BC;   /* dark surfaces only, never on white */
  --ink-200: #7E92AE;
  --on-dark: #C3D2E6;
  --on-dark-soft: #AFC2DA;
  --line: #E3E8F0;
  --line-strong: #D8E0EC;
  --line-dashed: #C7D2E2;
  --wash: #F5F7FB;
  --wash-blue: #FAFCFF;
  --white: #FFFFFF;

  --danger: #C0392B;

  /* Type. IBM Plex sits between Archivo and system-ui as a per-glyph safety
     net, so currency marks such as the naira degrade to a designed face rather
     than to whatever the operating system supplies. */
  --font-display: "Archivo", "IBM Plex Sans", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;

  /* Rhythm */
  --pad-x: clamp(20px, 4.4vw, 64px);
  --sec-y: clamp(56px, 7vw, 104px);
  --maxw: 1440px;

  /* Page gutter. Section backgrounds run edge to edge while their content stays
     capped at --maxw: past 1568px the gutter absorbs everything the content
     column will not take. Resolved as a percentage of the element's containing
     block, never 100vw, so a classic scrollbar cannot push the page sideways.
     Only meaningful on direct children of .page, whose containing block is the
     full page width. */
  --gutter: max(var(--pad-x), (100% - var(--maxw)) / 2);

  /* Radii. Every rounded corner on the site resolves to one of these. */
  --r-sm: 3px;
  --r: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-pill: 100px;

  /* Motion. MOTION_INTENSITY 4: fluid CSS, no scroll hijacking. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: .16s;
  --t-mid: .3s;
  --t-reveal: .6s;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--blue-dk); text-decoration: none; }
a:hover { color: var(--green-dk); }

h1, h2, h3, h4, p, figure, ul, ol, dl, dd, fieldset, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--blue-lt);
  outline-offset: 2px;
}

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

.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 20;
  background: var(--white);
  color: var(--navy-800);
  font-weight: 600;
  font-size: 14.5px;
  padding: 12px 18px;
  border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(8, 17, 31, .28);
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 8px; color: var(--navy-800); }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
/* Full width by design. Capping the wrapper instead would letterbox every
   full-bleed band, the navy hero, the work section, the CTA and the footer, in
   white once the viewport passes --maxw. The cap lives on the content via
   --gutter, so the dark bands always reach the screen edge. */
.page { background: var(--white); }

.section { padding: var(--sec-y) var(--gutter); }
.section--wash {
  background: var(--wash);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section--navy { background: var(--navy-800); }
.section--quote {
  background: var(--wash);
  border-top: 1px solid var(--line);
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 48px;
}

.eyebrow {
  font-size: 12.5px;
  letter-spacing: .14em;
  font-weight: 600;
  color: var(--blue-dk);
}
.eyebrow--light { color: var(--blue-pale); }

.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(27px, 3.1vw, 36px);
  line-height: 1.14;
  letter-spacing: -.016em;
  color: var(--ink-900);
  text-wrap: balance;
}
.eyebrow + .h2 { margin-top: 14px; }

.lede {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-500);
  text-wrap: pretty;
}
.lede--light { color: var(--on-dark-soft); }

/* --------------------------------------------------------------------------
   4. Buttons & links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-size: 15.5px;
  font-weight: 600;
  padding: 16px 28px;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition:
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--sm { font-size: 14.5px; padding: 12px 22px; }

.btn--primary { background: var(--blue); color: var(--white); }
.btn--primary:hover { background: var(--blue-dk); color: var(--white); }

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

.btn--outline {
  border-color: var(--line-strong);
  color: var(--ink-900);
  background: var(--white);
}
.btn--outline:hover { border-color: var(--blue-dk); color: var(--ink-900); }

.btn--white {
  background: var(--white);
  color: var(--navy-800);
  font-family: var(--font-display);
  font-size: 16px;
  padding: 18px 32px;
}
.btn--white:hover { background: var(--green-wash); color: var(--navy-800); }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 15px;
  color: var(--blue-dk);
  align-self: flex-start;
}
.arrow-link .arrow {
  font-family: var(--font-display);
  transition: transform var(--t-mid) var(--ease);
}
.arrow-link:hover .arrow { transform: translateX(4px); }
.arrow-link--light { color: var(--white); }
.arrow-link--light:hover { color: var(--green); }

/* --------------------------------------------------------------------------
   5. Header: utility bar, logo, nav
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--navy-900);
  color: var(--ink-300);
  font-size: 13px;
  letter-spacing: .01em;
  padding: 9px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.topbar__group {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
}
.topbar a { color: inherit; }
.topbar a:hover { color: var(--white); }
.topbar__email { color: #DDE5F0; }

/* Logo -------------------------------------------------------------------- */
/* The supplied mark, plate knocked out and wordmark inverted, sized by height
   so the intrinsic 679x396 ratio does the rest. The CSS-drawn wordmark this
   replaced was an approximation of the same lockup. */
.logo {
  display: flex;
  align-items: center;
  color: inherit;
  flex-shrink: 0;
}
.logo:hover { color: inherit; }

.logo__img {
  display: block;
  height: 62px;   /* the asset is shipped at exactly 2x this */
  width: auto;
}

/* Nav --------------------------------------------------------------------- */
.nav {
  background: var(--navy-800);
  padding: 16px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  position: relative;
}
.nav--plain { border-bottom: 0; }

/* On desktop the menu wrapper dissolves so links and actions sit as flex kids. */
.nav__menu { display: contents; }

.nav__links {
  display: flex;
  gap: clamp(18px, 2.2vw, 34px);
  align-items: center;
  font-size: 14.5px;
  font-weight: 500;
}
.nav__links a {
  color: var(--on-dark);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.nav__links a:hover { color: var(--white); border-bottom-color: rgba(255, 255, 255, .28); }
.nav__links a[aria-current="page"] {
  color: var(--white);
  border-bottom-color: var(--green);
}

.nav__actions {
  display: flex;
  gap: 14px;
  align-items: center;
}
.nav__portal {
  font-size: 14.5px;
  color: var(--on-dark);
  white-space: nowrap;
}
.nav__portal:hover { color: var(--white); }

.nav__toggle {
  display: none;
  width: 42px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--r);
  background: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 2px;
  background: var(--white);
  transform: translateX(-50%);
  transition: transform .18s var(--ease), opacity .18s var(--ease);
}
.nav__toggle span { top: 50%; margin-top: -1px; }
.nav__toggle span::before { content: ""; top: -6px; left: 0; transform: none; }
.nav__toggle span::after  { content: ""; top: 6px;  left: 0; transform: none; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. Media slots
   The designed placeholder sits beneath the photograph and is revealed only if
   the image fails, so a blocked CDN degrades to brand, not to a broken icon.
   -------------------------------------------------------------------------- */
.media {
  display: block;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy-600), var(--navy-700));
  width: 100%;
  height: 100%;
}
.media img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media__ph {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .58);
  background-image:
    repeating-linear-gradient(45deg,
      rgba(255, 255, 255, .03) 0 12px,
      transparent 12px 24px);
}
.media__ph span { max-width: 30ch; }

.media--light { background: linear-gradient(135deg, #E7ECF4, #DAE2EE); }
.media--light .media__ph {
  color: var(--ink-400);
  background-image:
    repeating-linear-gradient(45deg,
      rgba(11, 27, 51, .035) 0 12px,
      transparent 12px 24px);
}
.media--round { border-radius: 50%; }
/* Matches the hero render's own ground, so the slot stays seamless while the
   image decodes and the fallback placeholder does not flash a lighter navy. */
.media--globe { background: radial-gradient(120% 90% at 62% 34%, #16345C, #060C16 70%); }

/* --------------------------------------------------------------------------
   7. Hero
   Two true columns at desktop: headline, lede and CTAs stack down the left,
   the render spans both of those rows on the right. The copy is anchored to
   the top of its row rather than centred against the media, so it reads as
   continuous with the headline instead of floating away from it.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--navy-800);
  padding: clamp(48px, 6vw, 88px) var(--gutter) clamp(56px, 6.5vw, 88px);
  overflow: hidden;
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
/* Offset from the gutter, not the viewport edge, so both glows stay pinned to
   the headline and the render rather than drifting into the margins on a wide
   screen. The arithmetic reproduces the -120px / 120px page-edge offsets these
   carried when .page itself was the thing capped at --maxw. */
.hero::before {
  top: -160px; left: calc(var(--gutter) - 184px);
  width: 640px; height: 520px;
  background: radial-gradient(closest-side, rgba(46, 111, 214, .42), rgba(11, 27, 51, 0));
}
.hero::after {
  bottom: -220px; right: calc(var(--gutter) + 56px);
  width: 700px; height: 600px;
  background: radial-gradient(closest-side, rgba(52, 182, 122, .20), rgba(11, 27, 51, 0));
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  /* Declared, not implicit: the media spans these two rows, and a span to -1
     only resolves against an explicit grid. */
  grid-template-rows: auto auto;
  column-gap: clamp(32px, 4.5vw, 72px);
  row-gap: clamp(28px, 3.4vw, 44px);
  align-items: start;
}

.hero__title {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(33px, 4.6vw, 60px);
  line-height: 1.05;
  letter-spacing: -.022em;
  color: var(--white);
  text-wrap: balance;
}

.hero__copy {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.hero__lede {
  font-size: 18.5px;
  line-height: 1.62;
  color: var(--on-dark-soft);
  max-width: 54ch;
  text-wrap: pretty;
}
.hero__actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.hero__media {
  position: relative;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  width: 100%;
  min-height: clamp(340px, 30vw, 440px);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
}

/* --------------------------------------------------------------------------
   8. Accreditation strip
   -------------------------------------------------------------------------- */
.accred {
  background: var(--wash);
  border-bottom: 1px solid var(--line);
  padding: 28px var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  flex-wrap: wrap;
}
.accred__label {
  font-size: 12.5px;
  letter-spacing: .12em;
  color: var(--ink-400);
  font-weight: 600;
  white-space: nowrap;
}
.accred__list {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  flex: 1;
}
.accred__item {
  border: 1px solid var(--line-strong);
  background: var(--white);
  border-radius: var(--r);
  padding: 10px 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--navy-800);
}

/* --------------------------------------------------------------------------
   9. Services: sticky intro against a hairline grid
   -------------------------------------------------------------------------- */
.services {
  display: grid;
  grid-template-columns: minmax(300px, 400px) 1fr;
  gap: clamp(36px, 4.5vw, 64px);
  align-items: start;
}
.services__intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 40px;
}
.services__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(29px, 3.4vw, 40px);
  line-height: 1.12;
  letter-spacing: -.018em;
  color: var(--navy-800);
  text-wrap: balance;
}

/* 1px gap over a shared background draws the hairline rules. */
.services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.service-card {
  background: var(--white);
  padding: 34px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 210px;
  transition: background-color var(--t-mid) var(--ease);
}
.service-card:hover { background: var(--wash); }
.service-card--wide { grid-column: span 2; }
.service-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--navy-800);
  line-height: 1.25;
}
.service-card__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-500);
}
.service-card--wide .service-card__body { max-width: 68ch; }

/* --------------------------------------------------------------------------
   10. Sectors: grouped index
   -------------------------------------------------------------------------- */
.sectors__title { margin-bottom: 44px; max-width: 20ch; }

.sectors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 72px);
}
.sector-group {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* Sentence case on purpose. Uppercase plus wide tracking here would read as a
   second eyebrow inside a section that already has none. */
.sector-group__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0;
  color: var(--ink-400);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-strong);
}
.sector-group__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sector-group__list li {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.3;
  color: var(--navy-800);
}

/* --------------------------------------------------------------------------
   11. Engagement rail
   The blue-to-green ramp across the top borders carries the progression, so
   the phases need no numbering.
   -------------------------------------------------------------------------- */
/* Stacked, not a right-hand floater beside the headline. A small paragraph
   parked in the top-right corner of a section header is the split-header tell. */
.method__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 48px;
}
.method__note {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-500);
  max-width: 46ch;
}
/* The rule above each step continues across the gutter and resolves into an
   arrowhead, so the four stages read as one progression rather than four
   parallel cards. The connector is drawn from the step's own colour into the
   next one, and is decorative: the <ol> already carries the order. */
.rail {
  --rail-gap: clamp(20px, 2.6vw, 36px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--rail-gap);
}
.rail__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 22px;
  border-top: 3px solid var(--c);
  /* --c drives the rule and the connector; --c-ink is its accessible partner
     for the stage label, since the rule colours only clear AA as fills. */
  --c: var(--blue);
  --c-next: #2E8FCF;
  --c-ink: var(--blue-dk);
}
.rail__step:nth-child(2) { --c: #2E8FCF;          --c-next: var(--green-mid); --c-ink: #1F6F8B; }
.rail__step:nth-child(3) { --c: var(--green-mid); --c-next: var(--green);     --c-ink: var(--green-dk); }
.rail__step:nth-child(4) { --c: var(--green);     --c-next: var(--green);     --c-ink: var(--green-dk); }

/* Connector line across the gutter. */
.rail__step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 100%;
  width: var(--rail-gap);
  height: 3px;
  background: linear-gradient(90deg, var(--c), var(--c-next));
}
/* Arrowhead. Rotating about the top-right corner pins that corner as the tip,
   so it lands on the centre line of the rule exactly where the next step
   begins. */
.rail__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: -1.5px;
  left: 100%;
  margin-left: calc(var(--rail-gap) - 11px);
  width: 11px;
  height: 11px;
  border-top: 3px solid var(--c-next);
  border-right: 3px solid var(--c-next);
  transform: rotate(45deg);
  transform-origin: 100% 0;
}

.rail__stage {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--c-ink);
}
.rail__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18.5px;
  line-height: 1.25;
  color: var(--navy-800);
}
.rail__body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-500);
}

/* --------------------------------------------------------------------------
   12. Selected work
   -------------------------------------------------------------------------- */
.work { padding: var(--sec-y) 0; }
.work__head {
  padding: 0 var(--gutter);
  margin-bottom: 40px;
}
.work__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.12;
  letter-spacing: -.018em;
  color: var(--white);
  max-width: 22ch;
  margin-top: 14px;
  text-wrap: balance;
}
/* Capped rather than truly full-bleed: unbounded, 16/6 against max-height
   collapses into an 8:1 slit on an ultrawide. The cap is --maxw plus one
   --pad-x per side, so the band overhangs the copy by exactly that much at
   every width, the relationship it had when it ran to the edges of a capped
   .page. Below 1568px there is no room for the overhang and it simply runs
   edge to edge, as before. */
.work__media {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--pad-x));
  margin-inline: auto;
  aspect-ratio: 16 / 6;
  max-height: 420px;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, .10);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.work__detail {
  padding: 40px var(--gutter) 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.work__detail .lede { max-width: 56ch; }
.work__points {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 26px;
}
.work__points li {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--on-dark);
  padding-left: 20px;
  position: relative;
}
.work__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 9px;
  height: 1px;
  background: var(--green);
}

/* --------------------------------------------------------------------------
   13. Trainings: featured programme plus compact list
   -------------------------------------------------------------------------- */
.courses {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}

.course-feature {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.course-feature:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.course-feature__media { aspect-ratio: 16 / 9; position: relative; }
.course-feature__body {
  padding: 26px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.course-feature__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.22;
  color: var(--navy-800);
}
.course-feature__body p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-500);
  flex: 1;
}
.course-list {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
}
.course-row {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  display: grid;
  grid-template-columns: 104px 1fr;
  transition: border-color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.course-row:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.course-row__media { position: relative; }
.course-row__body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.course-row__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.25;
  color: var(--navy-800);
}
.course-row__body p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-500);
}
.tags { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tag {
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: var(--r-sm);
  letter-spacing: .06em;
  background: var(--blue-wash);
  color: var(--blue-dk);
}
.tag--green { background: var(--green-wash); color: var(--green-dk); }
.tag--alt { background: var(--wash); color: var(--ink-700); border: 1px solid var(--line-strong); }

/* --------------------------------------------------------------------------
   14. Procurement: offset credentials panel
   -------------------------------------------------------------------------- */
.procure {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
}
.procure__copy { display: flex; flex-direction: column; gap: 20px; }
.procure__copy .h2 { max-width: 18ch; }
.procure__copy .lede { max-width: 58ch; }
.procure__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}
.procure__list li {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-700);
  padding-left: 20px;
  position: relative;
}
.procure__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 9px;
  height: 1px;
  background: var(--blue);
}

.credentials {
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.credentials__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16.5px;
  color: var(--navy-800);
}
.credentials__list { display: flex; flex-direction: column; }
.credentials__row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.credentials__row:last-child { border-bottom: 0; padding-bottom: 0; }
.credentials__row:first-child { padding-top: 0; }
.credentials__row dt {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy-800);
}
.credentials__row dd {
  font-size: 14px;
  color: var(--ink-500);
}

/* --------------------------------------------------------------------------
   15. Pull quote
   -------------------------------------------------------------------------- */
.quote {
  max-width: 820px;
  margin-left: clamp(0px, 7vw, 130px);
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.quote__body {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(21px, 2.5vw, 30px);
  line-height: 1.38;
  color: var(--navy-800);
  letter-spacing: -.012em;
  text-wrap: pretty;
}
.quote__by {
  display: flex;
  align-items: center;
  gap: 16px;
}
.quote__avatar {
  display: block;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.quote__meta { display: flex; flex-direction: column; gap: 2px; }
.quote__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--navy-800);
  line-height: 1.35;
}
.quote__role { font-size: 14px; color: var(--ink-500); line-height: 1.4; }

/* --------------------------------------------------------------------------
   16. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  background: linear-gradient(100deg, var(--navy-800) 0%, #123561 58%, #166B52 100%);
  padding: clamp(44px, 4.8vw, 68px) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 3.4vw, 48px);
  flex-wrap: wrap;
}
.cta-band__copy { display: flex; flex-direction: column; gap: 12px; }
.cta-band__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -.016em;
  color: var(--white);
}
.cta-band__body {
  font-size: 16.5px;
  line-height: 1.6;
  color: #C9DAEE;
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--navy-900);
  padding: 60px var(--gutter) 32px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.footer__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(28px, 3.4vw, 48px);
}
.footer__brand { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.footer__address {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-200);
  max-width: 330px;
}
.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__heading {
  font-size: 12.5px;
  letter-spacing: .12em;
  color: var(--white);
  font-weight: 600;
}
.footer__col a {
  font-size: 14.5px;
  color: var(--ink-200);
}
.footer__col a:hover { color: var(--white); }
.footer__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 13.5px;
  color: var(--ink-200);
}
.footer__legal { display: flex; gap: 26px; flex-wrap: wrap; }
.footer__legal a { color: var(--ink-200); }
.footer__legal a:hover { color: var(--white); }

.footer--mini {
  background: var(--navy-900);
  padding: 26px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--ink-200);
}
.footer--mini a { color: var(--ink-200); }
.footer--mini a:hover { color: var(--white); }

/* --------------------------------------------------------------------------
   18. Contact page
   -------------------------------------------------------------------------- */
.page-head {
  background: var(--navy-800);
  padding: clamp(44px, 4.8vw, 64px) var(--gutter);
}
.page-head__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 3.8vw, 44px);
  letter-spacing: -.02em;
  color: var(--white);
  max-width: 22ch;
  line-height: 1.1;
  text-wrap: balance;
}

/* Capped here rather than via --gutter: the aside and the form are grid tracks,
   so a percentage gutter inside them would resolve against their own column
   instead of the page. Constraining the grid itself gives both children the
   same widths they had when .page carried the cap. */
.contact {
  display: grid;
  grid-template-columns: minmax(320px, 400px) 1fr;
  align-items: stretch;
  max-width: var(--maxw);
  margin-inline: auto;
}
.contact__aside {
  background: var(--wash);
  border-right: 1px solid var(--line);
  padding: 44px clamp(20px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.contact__aside-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--navy-800);
}
.contact__block { display: flex; flex-direction: column; gap: 6px; }
.contact__block h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16.5px;
  color: var(--navy-800);
}
.contact__block p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-500);
}
.contact__commitment {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-700);
}
.rule { height: 1px; background: var(--line-strong); }
.contact__media {
  aspect-ratio: 4 / 3;
  max-height: 200px;
  border-radius: var(--r-md);
  overflow: hidden;
  margin-top: auto;
}

.contact__main {
  padding: 44px var(--pad-x) 56px;
  display: flex;
  flex-direction: column;
}
.contact__form {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Borderless fieldset used purely for grouping. */
.fieldset-plain {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fieldset-plain legend {
  padding: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy-800);
}
.field-note { font-weight: 400; color: var(--ink-400); }

/* Enquiry type, segmented radio group ------------------------------------- */
.segmented { display: flex; gap: 10px; flex-wrap: wrap; }
.segment { position: relative; cursor: pointer; }
.segment input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.segment span {
  display: block;
  border: 1px solid var(--line-strong);
  background: var(--white);
  color: var(--ink-700);
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.segment:hover span { border-color: var(--blue-dk); }
.segment:has(input:checked) span {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: var(--white);
}
.segment:has(input:focus-visible) span {
  outline: 2px solid var(--blue-lt);
  outline-offset: 2px;
}

/* Fields ------------------------------------------------------------------- */
.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field > label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy-800);
  letter-spacing: .01em;
}
.req { color: var(--danger); }
.field input,
.field select,
.field textarea {
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: 13px 14px;
  font-size: 15px;
  font-family: var(--font-body);
  color: var(--navy-800);
  background: var(--white);
  width: 100%;
  transition: border-color var(--t-fast) var(--ease);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-400); opacity: 1; }
.field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-400) 50%),
    linear-gradient(135deg, var(--ink-400) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}
.field textarea {
  min-height: 124px;
  resize: vertical;
  line-height: 1.6;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--blue-dk); }
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--danger); }

.field__error {
  font-size: 13px;
  color: var(--danger);
  display: none;
}
.field__error.is-shown { display: block; }

/* Service chips, real checkboxes ------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 10px 18px;
  font-size: 14.5px;
  color: var(--navy-800);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--white);
  transition: border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.chip__mark {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border: 1px solid var(--line-dashed);
  border-radius: var(--r-sm);
  background: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}
.chip:hover { border-color: var(--blue-dk); }
.chip:has(input:checked) {
  border-color: var(--blue-dk);
  background: var(--blue-wash);
}
.chip:has(input:checked) .chip__mark {
  background: var(--blue-dk);
  border-color: var(--blue-dk);
}
.chip:has(input:checked) .chip__mark::after { content: "\2713"; }
.chip:has(input:focus-visible) {
  outline: 2px solid var(--blue-lt);
  outline-offset: 2px;
}



/* Submit row --------------------------------------------------------------- */
.submit-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 6px;
  flex-wrap: wrap;
}
.submit-row .btn--primary { padding: 16px 32px; }


/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */

/* Small desktop. Collapses the two-up compositions before the text column is
   squeezed, which the previous 1080px breakpoint left too late. */
@media (max-width: 1240px) {
  /* Single column, so the desktop row-span has to be unwound explicitly or the
     media keeps trying to straddle rows that no longer sit beside it. */
  .hero__inner { grid-template-columns: 1fr; }
  .hero__title,
  .hero__copy,
  .hero__media { grid-column: 1; }
  .hero__media {
    grid-row: auto;
    aspect-ratio: 16 / 10;
    min-height: 0;
    max-width: 720px;
    max-height: 340px;
  }

  .services { grid-template-columns: 1fr; }
  .services__intro { position: static; }

  .work__detail { grid-template-columns: 1fr; }

  .courses { grid-template-columns: 1fr; }
  .course-feature__media { aspect-ratio: 21 / 9; }

  .procure { grid-template-columns: 1fr; }
  .credentials { max-width: 520px; }

  .contact { grid-template-columns: 1fr; }
  .contact__aside {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .contact__media { margin-top: 0; max-width: 420px; }
}

/* Tablet */
@media (max-width: 1080px) {
  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  /* Two up: the step at the end of each row has nothing to its right, so its
     connector would point into the margin. */
  .rail__step:nth-child(even)::before,
  .rail__step:nth-child(even)::after { content: none; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .quote { margin-left: 0; }
}

/* Mobile nav and stacked headers */
@media (max-width: 900px) {
  .nav { flex-wrap: wrap; }
  .nav__toggle { display: block; }

  .nav__menu {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: 20px;
    padding-top: 18px;
    margin-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }
  .nav__menu.is-open { display: flex; }

  .nav__links {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    font-size: 16px;
  }
  .nav__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .nav__actions .btn { width: 100%; }
  .nav__portal { padding: 4px 0; }

  .section-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .method__note { max-width: none; }

  .topbar { font-size: 12px; gap: 8px 20px; }
  .topbar__group { gap: 8px 20px; }
}

/* Phone */
@media (max-width: 680px) {
  .logo__img { height: 48px; }

  .services__grid { grid-template-columns: 1fr; }
  .service-card--wide { grid-column: span 1; }
  /* Stacked: the connector turns through 90 degrees and runs down the gutter,
     so the progression survives the single-column layout. */
  .rail { grid-template-columns: 1fr; row-gap: 44px; }
  .rail__step:not(:last-child)::before,
  .rail__step:not(:last-child)::after { content: ""; }
  .rail__step:not(:last-child)::before {
    top: 100%;
    left: 0;
    margin-left: 0;
    width: 3px;
    height: 44px;
    background: linear-gradient(180deg, var(--c), var(--c-next));
  }
  /* Same corner-pinned arrowhead, turned a further 90 degrees to point down
     the gutter. left offsets the pinned corner onto the connector's centre. */
  .rail__step:not(:last-child)::after {
    top: calc(100% + 40px);
    left: -9.5px;
    margin-left: 0;
    transform: rotate(135deg);
  }

  .sectors { grid-template-columns: 1fr; }
  .field-grid { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr; }

  .hero__media { aspect-ratio: 4 / 3; max-height: none; }
  .hero__actions .btn { width: 100%; }

  .work__media { aspect-ratio: 4 / 3; max-height: 300px; }

  .course-row { grid-template-columns: 1fr; }
  .course-row__media { aspect-ratio: 16 / 9; }

  .segmented { flex-direction: column; align-items: stretch; }
  .segment span { text-align: center; }

  .submit-row .btn--primary { width: 100%; }

  .topbar { display: none; }
}

/* --------------------------------------------------------------------------
   20. Motion
   MOTION_INTENSITY 4. Entry reveals communicate reading order as a section
   comes into view; hover physics acknowledge a pointer target. Nothing pins,
   hijacks scroll, or loops. The initial hidden state is gated on .has-js so
   the page is fully readable with scripting off.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .has-js .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--t-reveal) var(--ease),
      transform var(--t-reveal) var(--ease);
    will-change: opacity, transform;
  }
  .has-js .reveal.is-visible {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
  .has-js .reveal[data-reveal-delay="1"] { transition-delay: 70ms; }
  .has-js .reveal[data-reveal-delay="2"] { transition-delay: 140ms; }
  .has-js .reveal[data-reveal-delay="3"] { transition-delay: 210ms; }
  .has-js .reveal[data-reveal-delay="4"] { transition-delay: 280ms; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}