/* Contrast floor. Every text token below is measured against the surfaces it
   actually lands on and clears WCAG AA (4.5:1 body, 3:1 large/UI). The brand
   gold #C6A34E only reaches 2.4:1 on white, so it is a DECORATIVE colour here:
   icons, rules, borders, badges' borders, and text on navy. Gold *text* on a
   light surface must use --gold-dark. Don't swap one for the other by eye. */
  :root {
    --gold: #C6A34E;
    --gold-light: #DABB6C;
    --gold-pale: #E8D4A0;
    /* Gold you can read at body size on white/cream: 4.85:1 / 4.57:1. */
    --gold-dark: #896E2C;
    /* Muted white on the navy surfaces. Alpha below 0.46 fails AA on #080E18,
       which is why these are tokens and not hand-picked per rule. */
    --on-dark-muted: rgba(255,255,255,0.64);
    --on-dark-faint: rgba(255,255,255,0.52);
    --gold-faint: rgba(198,163,78,0.06);
    --gold-line: rgba(198,163,78,0.18);
    --gold-glow: rgba(198,163,78,0.10);
    --navy: #080E18;
    --navy-mid: #0F1824;
    --navy-card: #111C2C;
    /* Flagship card. Light mode wins attention by going dark against white cards;
       dark mode can't go darker than the page, so it lifts and takes more gold. */
    --lead-bg: #080E18;
    --lead-border: rgba(198,163,78,0.2);
    --lead-glow: rgba(198,163,78,0.12);
    --cream: #FAF8F4;
    --cream-dark: #F0EDE6;
    --text: #1A1D26;
    --text-body: #444A5A;
    /* 4.79:1 on white, 4.52:1 on cream. Was #7A7F90 (3.99 / 3.76). */
    --text-muted: #6D7283;
    --border: #E6E3DC;
    --card-bg: #FFFFFF;
    --card-border: rgba(0,0,0,0.05);
    --card-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.04);
    --card-shadow-hover: 0 12px 36px rgba(0,0,0,0.08), 0 24px 64px rgba(0,0,0,0.04);
    --page-bg: #FFFFFF;
    --section-alt: var(--cream);
    --footer-bg: #060A10;
    /* 4.57:1 on --footer-bg. Was #5A6578 (3.37) — the whole footer, including
       every nav link and the legal line, failed AA. */
    --footer-text: #6D7A91;
    --footer-heading: #FFFFFF;
    --nav-bg: rgba(255,255,255,0.82);
    --nav-text: #1A1D26;
    --nav-border: rgba(0,0,0,0.05);
    --glass: rgba(255,255,255,0.04);
    --glass-border: rgba(255,255,255,0.08);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --gold: #D4B96A; --gold-light: #E0CA82; --gold-pale: #E8D4A0;
      --gold-dark: #B89D4A;
      --gold-faint: rgba(212,185,106,0.04); --gold-line: rgba(212,185,106,0.14);
      --gold-glow: rgba(212,185,106,0.06);
      --cream: #0E1520; --cream-dark: #0A1018;
      /* --text-muted was #6B7084: 3.89:1 on the dark page, 3.56 on cards. */
    --text: #E4E7F0; --text-body: #A8ADC0; --text-muted: #7C8195;
      --border: #1C2434; --card-bg: #111A28; --card-border: rgba(255,255,255,0.04);
      --card-shadow: 0 1px 3px rgba(0,0,0,0.25), 0 8px 24px rgba(0,0,0,0.2);
      --card-shadow-hover: 0 12px 36px rgba(0,0,0,0.3), 0 24px 64px rgba(0,0,0,0.15);
      --page-bg: #0A1018; --section-alt: #0E1520;
      --footer-bg: #050810; --nav-bg: rgba(10,16,24,0.85); --nav-text: #E4E7F0;
      --nav-border: rgba(255,255,255,0.05);
      --glass: rgba(255,255,255,0.03); --glass-border: rgba(255,255,255,0.06);
      --lead-bg: #18263D; --lead-border: rgba(212,185,106,0.42);
      --lead-glow: rgba(212,185,106,0.16);
    }
  }
  :root[data-theme="dark"] {
    --gold: #D4B96A; --gold-light: #E0CA82; --gold-pale: #E8D4A0;
    --gold-dark: #B89D4A;
    --gold-faint: rgba(212,185,106,0.04); --gold-line: rgba(212,185,106,0.14);
    --gold-glow: rgba(212,185,106,0.06);
    --cream: #0E1520; --cream-dark: #0A1018;
    /* --text-muted was #6B7084: 3.89:1 on the dark page, 3.56 on cards. */
    --text: #E4E7F0; --text-body: #A8ADC0; --text-muted: #7C8195;
    --border: #1C2434; --card-bg: #111A28; --card-border: rgba(255,255,255,0.04);
    --card-shadow: 0 1px 3px rgba(0,0,0,0.25), 0 8px 24px rgba(0,0,0,0.2);
    --card-shadow-hover: 0 12px 36px rgba(0,0,0,0.3), 0 24px 64px rgba(0,0,0,0.15);
    --page-bg: #0A1018; --section-alt: #0E1520;
    --footer-bg: #050810; --nav-bg: rgba(10,16,24,0.85); --nav-text: #E4E7F0;
    --nav-border: rgba(255,255,255,0.05);
    --glass: rgba(255,255,255,0.03); --glass-border: rgba(255,255,255,0.06);
    --lead-bg: #18263D; --lead-border: rgba(212,185,106,0.42);
    --lead-glow: rgba(212,185,106,0.16);
  }
  :root[data-theme="light"] {
    --gold: #C6A34E; --gold-light: #DABB6C; --gold-pale: #E8D4A0;
    --gold-dark: #896E2C;
    --gold-faint: rgba(198,163,78,0.06); --gold-line: rgba(198,163,78,0.18);
    --gold-glow: rgba(198,163,78,0.10);
    --cream: #FAF8F4; --cream-dark: #F0EDE6;
    --text: #1A1D26; --text-body: #444A5A; --text-muted: #6D7283;
    --border: #E6E3DC; --card-bg: #FFFFFF; --card-border: rgba(0,0,0,0.05);
    --card-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.04);
    --card-shadow-hover: 0 12px 36px rgba(0,0,0,0.08), 0 24px 64px rgba(0,0,0,0.04);
    --page-bg: #FFFFFF; --section-alt: var(--cream);
    --footer-bg: #060A10; --footer-text: #6D7A91; --footer-heading: #FFFFFF;
    --nav-bg: rgba(255,255,255,0.82); --nav-text: #1A1D26; --nav-border: rgba(0,0,0,0.05);
    --glass: rgba(255,255,255,0.04); --glass-border: rgba(255,255,255,0.08);
    --lead-bg: #080E18; --lead-border: rgba(198,163,78,0.2);
    --lead-glow: rgba(198,163,78,0.12);
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  /* clip on html too, body alone doesn't stop the reveal-in transforms
     (.reveal-right starts translated +40px) from widening the page */
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }

  body {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-body);
    background: var(--page-bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  h1, h2, h3 {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    color: var(--text);
    font-weight: 700;
    line-height: 1.1;
    text-wrap: balance;
  }
  h4 {
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--text);
    font-weight: 600;
    line-height: 1.3;
  }

  h1 { font-size: clamp(2.8rem, 5.5vw, 4.2rem); letter-spacing: -0.035em; }
  h2 { font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -0.025em; }
  h3 { font-size: 1.15rem; letter-spacing: -0.01em; font-weight: 600; }
  p { max-width: 60ch; }
  a { color: var(--gold-dark); text-decoration: none; }
  /* --gold-dark is tuned for white/cream; on navy it drops to 3.99:1, so links
     inside the dark panels take the bright gold (8.05:1) instead. Buttons are
     excluded — they set their own colour against their own fill, and this
     selector would otherwise outrank .btn--gold and paint gold on gold. */
  .contact a:not([class*="btn"]), .hero a:not([class*="btn"]),
  .page-hero a:not([class*="btn"]), .method a:not([class*="btn"]),
  .sol-card--lead a:not([class*="btn"]),
  .lead-magnet-promo a:not([class*="btn"]) { color: var(--gold); }
  img { max-width: 100%; display: block; }

  .sans {
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  }

  .container { max-width: 1140px; margin: 0 auto; padding: 0 2rem; }
  .section { padding: 7.5rem 0; }
  .section--alt { background: var(--section-alt); }

  .eyebrow {
    display: inline-block;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin-bottom: 1.5rem;
  }

  .section-lead {
    color: var(--text-muted);
    font-size: 1.12rem;
    max-width: 50ch;
    margin-bottom: 4rem;
    line-height: 1.85;
  }

  .gold-rule {
    width: 48px;
    height: 1.5px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light), transparent);
    border: none;
    margin: 1.5rem 0 2rem;
  }

  /* ── Legal pages (Privacy/Terms/POPIA) ── */
  /* Standalone documents, not scroll-anchored sections of index.html, so they
     get a minimal static header instead of the fixed/scrolling main nav,
     that nav's JS and scrolled-state styling assume it's sitting over the
     hero photo, which these pages don't have. */
  .legal-header {
    border-bottom: 1px solid var(--border);
    padding: 1.5rem 0;
  }
  .legal-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .legal-header__logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
  .legal-header__logo img { height: 40px; width: 40px; }
  .legal-header__logo span {
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text);
  }
  .legal-header__back {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gold-dark);
  }
  .legal-content { padding: 4.5rem 0 6rem; max-width: 68ch; }
  .legal-content h1 { font-size: clamp(2rem, 4vw, 2.6rem); margin-bottom: 0.75rem; }
  .legal-content .legal-updated {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
  }
  .legal-content h2 {
    font-size: 1.35rem;
    margin: 2.75rem 0 1rem;
  }
  .legal-content p, .legal-content li { color: var(--text-body); margin-bottom: 1rem; max-width: 68ch; }
  .legal-content ul, .legal-content ol { padding-left: 1.35rem; margin-bottom: 1rem; }
  .legal-content li { margin-bottom: 0.5rem; }
  .legal-content strong { color: var(--text); }
  .legal-draft-notice {
    display: flex;
    gap: 0.85rem;
    padding: 1.1rem 1.35rem;
    border-radius: 4px;
    background: var(--gold-faint);
    border: 1px solid var(--gold-line);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.86rem;
    line-height: 1.65;
    color: var(--text-body);
    margin-bottom: 2.5rem;
    max-width: 68ch;
  }
  .legal-draft-notice strong { color: var(--gold-dark); }
  .btn-cookie-settings {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.4rem 0;
    background: none;
    border: none;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.92rem;
    color: var(--gold-dark);
    text-decoration: underline;
    cursor: pointer;
  }
  .btn-cookie-settings:hover, .btn-cookie-settings:focus-visible {
    color: var(--gold-dark);
    outline: 2px solid var(--gold-dark);
    outline-offset: 2px;
  }

  /* ── Interior pages (Solutions/Industries/Training) ── */
  /* These reuse the main .nav, unlike the legal pages, they're part of the
     marketing site, so the nav's scrolled state and mobile menu apply. The
     nav is fixed and transparent-over-hero on index.html, so interior pages
     need their own solid header band with top padding to clear it. */
  .page-hero {
    background: var(--navy);
    color: #FFFFFF;
    padding: 11rem 0 5rem;
    position: relative;
    overflow: hidden;
  }
  .page-hero::after {
    content: "";
    position: absolute;
    top: -50%; right: -20%;
    width: 70%; height: 200%;
    background: radial-gradient(ellipse at center, rgba(198,163,78,0.08) 0%, transparent 60%);
    pointer-events: none;
  }
  .page-hero__inner { position: relative; z-index: 1; }
  .page-hero--photo::after { display: none; }
  .page-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      radial-gradient(ellipse at center, rgba(198,163,78,0.08) 0%, transparent 60%),
      linear-gradient(180deg, rgba(8,14,24,0.82) 0%, rgba(8,14,24,0.90) 100%),
      var(--hero-image) center / cover no-repeat;
  }
  /* Eyebrows default to the readable gold for light sections. Every eyebrow
     that sits on navy takes the bright gold back — add new dark sections here
     or they inherit a gold meant for white and land at 3.99:1. */
  .page-hero .eyebrow,
  .hero .eyebrow { color: var(--gold-light); }
  .page-hero h1 { color: #FFFFFF; font-size: clamp(2.4rem, 4.5vw, 3.6rem); }
  .page-hero__lead {
    font-family: "Segoe UI", system-ui, sans-serif;
    color: rgba(255,255,255,0.62);
    font-size: 1.06rem;
    line-height: 1.85;
    max-width: 58ch;
    margin-top: 1.75rem;
  }
  .breadcrumb {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.78rem;
    color: var(--on-dark-muted);
    margin-bottom: 1.5rem;
  }
  .breadcrumb a { color: rgba(255,255,255,0.55); }
  .breadcrumb a:hover { color: var(--gold-light); }

  /* ── Checklist landing page ── */
  .checklist-hero__grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 4rem;
    align-items: start;
  }
  .checklist-form-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 2rem;
    /* clears the breadcrumb/eyebrow height on the text column so the card
       doesn't start lower than the heading beside it */
    margin-top: 2.6rem;
  }
  .checklist-form-card form { display: flex; flex-direction: column; gap: 1.1rem; }
  .checklist-form__submit { align-self: stretch; text-align: center; margin-top: 0.25rem; }
  .checklist-form-card .contact__privacy {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.72rem;
    line-height: 1.6;
    color: var(--on-dark-faint);
    margin: 0;
  }
  .checklist-form-card .contact__privacy a { color: var(--gold-light); }
  .breadcrumb span { margin: 0 0.5rem; }

  /* A single service/industry: title, intro, what's included, outcomes. */
  .detail-block { padding: 4.5rem 0; border-bottom: 1px solid var(--border); }
  .detail-block:last-of-type { border-bottom: none; }
  .detail-block__num {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--gold-dark);
    margin-bottom: 0.75rem;
  }
  .detail-block h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: 0.5rem; }
  .detail-block__tagline {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    font-size: 1.15rem;
    font-style: italic;
    color: var(--gold-dark);
    margin-bottom: 1.5rem;
  }
  .detail-block__intro {
    font-family: "Segoe UI", system-ui, sans-serif;
    color: var(--text-body);
    font-size: 0.96rem;
    line-height: 1.85;
    max-width: 62ch;
    margin-bottom: 2.5rem;
  }
  .detail-block__intro p + p { margin-top: 1rem; }
  .detail-block__cols {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 3rem;
  }
  .detail-list h3 {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1.15rem;
  }
  .detail-list ul { list-style: none; }
  .detail-list li {
    position: relative;
    padding-left: 1.35rem;
    margin-bottom: 0.7rem;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-body);
  }
  .detail-list li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.55em;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--gold);
  }
  /* Outcomes read as claims, so they get the affirmative check treatment
     while the services list stays neutral bullets. */
  .detail-list--outcomes {
    padding: 1.75rem;
    border-radius: 4px;
    background: var(--gold-faint);
    border: 1px solid var(--gold-line);
    align-self: start;
  }
  .detail-list--outcomes li::before {
    content: "";
    left: 0; top: 0.42em;
    width: 9px; height: 5px;
    border: 1.5px solid var(--gold);
    border-top: none;
    border-right: none;
    border-radius: 0;
    background: none;
    transform: rotate(-45deg);
  }

  /* Core values / benefit tiles. The 300px floor is deliberate: it resolves to
     3 columns in the 1140px container, so the 5 values break 3+2 instead of
     the 4+1 a narrower track produced, which stranded the last card alone. */
  .value-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
  }
  .value-card {
    padding: 2rem;
    border-radius: 4px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    transition: all 500ms cubic-bezier(0.23,1,0.32,1);
  }
  .value-card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-6px);
    border-color: var(--gold-line);
  }
  .value-card h3 { margin-bottom: 0.6rem; }
  .value-card p {
    font-family: "Segoe UI", system-ui, sans-serif;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.7;
  }

  /* Method stages, the activities list runs 7-8 items, so it goes two-up
     inside its own panel rather than as one long column. */
  .stage-activities {
    padding: 1.75rem;
    border-radius: 4px;
    background: var(--section-alt);
    border: 1px solid var(--card-border);
  }
  .stage-activities h3 {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1.15rem;
  }
  .stage-activities ul {
    list-style: none;
    columns: 2;
    column-gap: 2rem;
  }
  .stage-activities li {
    position: relative;
    padding-left: 1.35rem;
    margin-bottom: 0.7rem;
    break-inside: avoid;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-body);
  }
  .stage-activities li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.55em;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--gold);
  }

  /* Deliberately navy, like .method and .contact, a mid-page promo band
     between two sections that already alternate plain/alt. Giving it a
     third, distinct treatment avoids landing on the same background as
     whichever neighbour it collides with. */
  .lead-magnet-promo {
    background: var(--navy);
    color: #FFFFFF;
    padding: 5rem 0;
    text-align: center;
  }
  .lead-magnet-promo .eyebrow { color: var(--gold-light); }
  .lead-magnet-promo h2 { color: #FFFFFF; margin-bottom: 1rem; }
  .lead-magnet-promo p {
    font-family: "Segoe UI", system-ui, sans-serif;
    color: rgba(255,255,255,0.55);
    font-size: 1rem;
    line-height: 1.8;
    max-width: 54ch;
    margin: 0 auto 2.25rem;
  }

  .page-cta { background: var(--section-alt); padding: 6rem 0; text-align: center; }
  .page-cta h2 { margin-bottom: 1rem; }
  .page-cta p {
    font-family: "Segoe UI", system-ui, sans-serif;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.8;
    max-width: 54ch;
    margin: 0 auto 2.25rem;
  }
  .page-cta .btn-row { justify-content: center; }

  /* ── Buttons ── */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2.4rem;
    border-radius: 2px;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
    border: none;
    text-decoration: none;
    line-height: 1;
    position: relative;
    overflow: hidden;
  }
  .btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 50%);
    pointer-events: none;
  }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0); transition-duration: 100ms; }
  .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

  .btn--gold {
    background: var(--gold);
    color: var(--navy);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(198,163,78,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
  }
  .btn--gold:hover {
    background: var(--gold-light);
    box-shadow: 0 8px 24px rgba(198,163,78,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
    color: var(--navy);
  }

  .btn--outline {
    background: transparent;
    border: 1px solid var(--gold-line);
    color: var(--gold-dark);
  }
  .btn--outline::after { display: none; }
  .btn--outline:hover { background: var(--gold-faint); border-color: var(--gold); }

  /* Ghost is the secondary CTA and it runs on both backgrounds: the navy hero
     and the cream `.page-cta` band that closes about/method/solutions/
     industries/training. It was glass-on-dark only, so on the cream band it
     rendered white-on-cream at 1.05:1 — the second call to action on five
     pages was invisible. Light is the base; the dark surfaces opt back in. */
  .btn--ghost {
    background: transparent;
    border: 1px solid rgba(26,29,38,0.22);
    color: var(--text);
  }
  .hero .btn--ghost,
  .page-hero .btn--ghost,
  .contact .btn--ghost {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.85);
    backdrop-filter: blur(8px);
  }
  .btn--ghost::after { display: none; }
  .btn--ghost:hover {
    background: rgba(26,29,38,0.05);
    border-color: var(--gold-dark);
    color: var(--gold-dark);
  }
  .hero .btn--ghost:hover,
  .page-hero .btn--ghost:hover,
  .contact .btn--ghost:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.22);
    color: #FFFFFF;
  }

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

  .arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold-dark);
    transition: gap 400ms cubic-bezier(0.23,1,0.32,1), color 300ms;
  }
  .arrow-link:hover { gap: 0.8rem; color: var(--gold-dark); }
  .arrow-link svg { width: 16px; height: 16px; transition: transform 400ms cubic-bezier(0.23,1,0.32,1); }
  .arrow-link:hover svg { transform: translateX(4px); }

  /* ── Scroll reveal ── */
  .reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 900ms cubic-bezier(0.23, 1, 0.32, 1),
                transform 900ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .reveal.visible { opacity: 1; transform: translateY(0); }
  .reveal-delay-1 { transition-delay: 120ms; }
  .reveal-delay-2 { transition-delay: 240ms; }
  .reveal-delay-3 { transition-delay: 360ms; }
  .reveal-delay-4 { transition-delay: 480ms; }
  .reveal-delay-5 { transition-delay: 600ms; }

  .reveal-left {
    opacity: 0; transform: translateX(-50px);
    transition: opacity 900ms cubic-bezier(0.23,1,0.32,1), transform 900ms cubic-bezier(0.23,1,0.32,1);
  }
  .reveal-right {
    opacity: 0; transform: translateX(50px);
    transition: opacity 900ms cubic-bezier(0.23,1,0.32,1), transform 900ms cubic-bezier(0.23,1,0.32,1);
  }
  .reveal-left.visible, .reveal-right.visible { opacity: 1; transform: translateX(0); }

  .reveal-scale {
    opacity: 0; transform: scale(0.9);
    transition: opacity 800ms cubic-bezier(0.23,1,0.32,1), transform 800ms cubic-bezier(0.23,1,0.32,1);
  }
  .reveal-scale.visible { opacity: 1; transform: scale(1); }

  /* ── Skip link ── */
  /* Seven nav items sit before the content in tab order. Keyboard users need a
     way past them. Off-screen until focused, then it drops in below the top. */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
  .skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 200;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1.25rem;
    background: var(--gold);
    color: var(--navy);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 2px;
    transition: top 200ms ease;
  }
  .skip-link:focus { top: 1rem; }
  /* #main only takes focus programmatically, from the skip link, an outline
     round the whole page would be noise, not a wayfinding cue */
  #main:focus { outline: none; }

  /* ── Nav ── */
  .nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: transparent;
    backdrop-filter: blur(0px);
    border-bottom: 1px solid transparent;
    transition: all 500ms cubic-bezier(0.23,1,0.32,1);
  }
  .nav.scrolled {
    background: var(--nav-bg);
    backdrop-filter: blur(24px) saturate(1.3);
    border-bottom-color: var(--nav-border);
    box-shadow: 0 1px 20px rgba(0,0,0,0.04);
  }
  .nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 96px;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 2rem;
    transition: height 500ms cubic-bezier(0.23,1,0.32,1);
  }
  .nav.scrolled .nav__inner { height: 78px; }
  .nav__logo {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    text-decoration: none;
  }
  .nav__logo-img {
    height: 60px;
    width: 60px;
    display: block;
    border-radius: 50%;
    border: 1px solid rgba(198,163,78,0.32);
    transition: height 500ms cubic-bezier(0.23,1,0.32,1),
                width 500ms cubic-bezier(0.23,1,0.32,1),
                box-shadow 500ms, border-color 500ms;
  }
  .nav.scrolled .nav__logo-img { height: 50px; width: 50px; }
  .nav__logo:hover .nav__logo-img {
    border-color: var(--gold);
    box-shadow: 0 0 20px rgba(198,163,78,0.35);
  }
  .footer__logo { display: inline-block; text-decoration: none; }
  .footer__logo-img {
    width: 150px;
    height: auto;
    display: block;
  }
  /* Wordmark gold sampled off the logo artwork: #DDBD55 top → #DBB446 base,
     with the pale highlight and deep edge the metal shows at full size. */
  .nav__wordmark {
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: 1.32rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    /* Metallic ramp, clipped to the text. Because background-clip paints the
       gradient and `color` is only the fallback, the GRADIENT is what has to
       pass contrast. The original ramp (#F7EAAC-#B98F31) ran 1.21:1 to 2.98:1
       on the white nav — the company name was the least readable text on the
       site. This is the same ramp remapped into a readable lightness band;
       the dark-nav override below keeps the bright original, which is fine
       against navy. */
    background: var(--wordmark-ramp, linear-gradient(178deg,
      #A88E13 0%,
      #967511 30%,
      #8D7013 52%,
      #896A11 74%,
      #735617 100%));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--gold-dark);
    transition: font-size 500ms cubic-bezier(0.23,1,0.32,1);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .nav__wordmark {
      --wordmark-ramp: linear-gradient(178deg,
        #F7EAAC 0%, #E4C566 30%, #DDBD55 52%, #DBB446 74%, #B98F31 100%);
    }
  }
  :root[data-theme="dark"] .nav__wordmark {
    --wordmark-ramp: linear-gradient(178deg,
      #F7EAAC 0%, #E4C566 30%, #DDBD55 52%, #DBB446 74%, #B98F31 100%);
  }
  .nav.scrolled .nav__wordmark { font-size: 1.16rem; }
  .nav__links {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
  }
  .nav__links a {
    /* 44px min box is the WCAG 2.5.5 touch target. The nav bar is 96px tall
       (78px scrolled) so the taller hit area costs no layout. It matters on
       tablets between 1025px and ~1280px, which get the desktop nav and a
       touchscreen. */
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.75rem;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    border-radius: 3px;
    transition: color 300ms;
    letter-spacing: 0.02em;
  }
  .nav.scrolled .nav__links a { color: var(--text-muted); }
  .nav__links a:hover { color: #FFFFFF; }
  .nav.scrolled .nav__links a:hover { color: var(--nav-text); }
  .nav__cta {
    background: var(--gold) !important;
    color: var(--navy) !important;
    padding: 0.45rem 1.2rem !important;
    border-radius: 2px !important;
    font-weight: 700 !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.1em !important;
    margin-left: 1rem;
    box-shadow: 0 2px 8px rgba(198,163,78,0.25);
    transition: all 400ms cubic-bezier(0.23,1,0.32,1) !important;
  }
  .nav__cta:hover {
    background: var(--gold-light) !important;
    box-shadow: 0 4px 16px rgba(198,163,78,0.35) !important;
    transform: translateY(-1px);
    color: var(--navy) !important;
  }
  /* 22px icon in 0.5rem padding measured 38px, under the 44px touch target */
  .nav__mobile { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 0; color: #FFFFFF; transition: color 500ms; }
  .nav.scrolled .nav__mobile { color: var(--nav-text); }
  .nav__mobile:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }

  /* ── Mobile menu ── */
  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(4,8,14,0.6);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 350ms cubic-bezier(0.23,1,0.32,1);
  }
  .mobile-menu.is-open { opacity: 1; }
  .mobile-menu__panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(360px, 86vw);
    background: var(--navy);
    border-left: 1px solid rgba(198,163,78,0.15);
    padding: 2rem 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 400ms cubic-bezier(0.23,1,0.32,1);
  }
  .mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }
  .mobile-menu__close {
    align-self: flex-end;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,0.5);
    /* 24px icon + 2 x 0.625rem = 44px, the WCAG touch target. The negative
       margin cancels the padding so the icon sits where it did before. */
    padding: 0.625rem;
    margin: -0.625rem -0.625rem 1.5rem 0;
    transition: color 300ms;
  }
  .mobile-menu__close:hover { color: var(--gold); }
  .mobile-menu__close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }
  .mobile-menu__nav {
    display: flex;
    flex-direction: column;
  }
  .mobile-menu__nav a {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: #FFFFFF;
    text-decoration: none;
    padding: 0.9rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: color 300ms, padding-left 300ms;
  }
  .mobile-menu__nav a:hover,
  .mobile-menu__nav a:focus-visible { color: var(--gold); padding-left: 0.5rem; }
  .mobile-menu__nav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
  .mobile-menu__cta { margin-top: 2rem; text-align: center; justify-content: center; }
  .mobile-menu__contact {
    margin-top: auto;
    padding-top: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-family: "Segoe UI", system-ui, sans-serif;
  }
  .mobile-menu__contact a {
    color: var(--gold);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
  }
  .mobile-menu__contact span { font-size: 0.75rem; color: var(--on-dark-faint); }
  body.menu-open { overflow: hidden; }

  /* ── Site search ── */
  /* Trigger sits beside the hamburger but stays visible at every breakpoint
     (unlike .nav__mobile, which is display:none until the 1024px collapse). */
  .nav__search {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #FFFFFF;
    transition: color 500ms;
  }
  .nav.scrolled .nav__search { color: var(--nav-text); }
  .nav__search:hover { color: var(--gold); }
  .nav__search:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }

  /* z-index 9000: above the nav (100), below the consent banner (9999,
     consent.js) and the purchase modal (10000, .modal-overlay), so a
     first-time visitor's consent choice always wins over an open search. */
  .site-search {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 10vh 1.5rem 1.5rem;
    background: rgba(4,8,14,0.6);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 300ms cubic-bezier(0.23,1,0.32,1);
  }
  .site-search[hidden] { display: none; }
  .site-search.is-open { opacity: 1; }
  .site-search__panel {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 76vh;
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    border-radius: 6px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: 0 24px 64px rgba(0,0,0,0.25);
    transform: translateY(-12px);
    transition: transform 300ms cubic-bezier(0.23,1,0.32,1);
  }
  .site-search.is-open .site-search__panel { transform: translateY(0); }
  .site-search__close {
    position: absolute;
    top: 1rem; right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 3px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 300ms;
  }
  .site-search__close:hover { color: var(--gold-dark); }
  .site-search__close:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 2px; border-radius: 2px; }
  .site-search__input {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    padding: 0.7rem 3.25rem 0.7rem 1rem;
    margin-bottom: 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--page-bg);
    color: var(--text);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 1rem;
  }
  .site-search__input:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 2px; }
  .site-search__status {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
  }
  .site-search__results {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }
  .site-search__result {
    display: block;
    box-sizing: border-box;
    padding: 0.75rem 0.85rem;
    min-height: 44px;
    border-radius: 4px;
    text-decoration: none;
    border: 1px solid transparent;
  }
  .site-search__result:hover, .site-search__result.is-active {
    background: var(--gold-faint);
    border-color: var(--gold-line);
  }
  .site-search__result-title {
    display: block;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.2rem;
  }
  .site-search__result-snippet {
    display: block;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-body);
  }
  /* Dark text on a pale gold wash in light mode, light text on a muted gold
     wash in dark mode, per the same rule that keeps --gold decorative-only
     on light backgrounds elsewhere in this file. */
  .site-search mark {
    background: var(--gold-pale);
    color: var(--text);
    border-radius: 2px;
    padding: 0 0.15em;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .site-search mark { background: rgba(212,185,106,0.28); }
  }
  :root[data-theme="dark"] .site-search mark { background: rgba(212,185,106,0.28); }
  .site-search__empty {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.92rem;
    color: var(--text-body);
    line-height: 1.6;
  }
  .site-search__empty a { color: var(--gold-dark); }
  body.search-open { overflow: hidden; }

  /* ── Hero ── */
  .hero {
    background: var(--navy);
    color: #FFFFFF;
    padding: 0;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .hero__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }
  /* Hero photograph. Composed with the subject right and an empty left third,
     so the scrim only has to deepen what is already dark. */
  .hero__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% center;
  }
  .hero__scrim {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, var(--navy) 0%, rgba(8,14,24,0.94) 30%, rgba(8,14,24,0.76) 52%, rgba(8,14,24,0.22) 80%, rgba(8,14,24,0.34) 100%),
      linear-gradient(180deg, rgba(8,14,24,0.75) 0%, transparent 28%, transparent 62%, rgba(8,14,24,0.85) 100%);
  }
  .hero__bg-gradient {
    position: absolute;
    top: -60%;
    right: -25%;
    width: 90%;
    height: 220%;
    background: radial-gradient(ellipse at center, rgba(198,163,78,0.06) 0%, transparent 55%);
    animation: heroGlow 12s ease-in-out infinite alternate;
  }
  .hero__bg-gradient-2 {
    position: absolute;
    bottom: -40%;
    left: -15%;
    width: 70%;
    height: 140%;
    background: radial-gradient(ellipse at center, rgba(198,163,78,0.03) 0%, transparent 50%);
    animation: heroGlow 15s 4s ease-in-out infinite alternate;
  }
  .hero__bg-lines {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(198,163,78,0.018) 1px, transparent 1px),
      linear-gradient(90deg, rgba(198,163,78,0.018) 1px, transparent 1px);
    background-size: 100px 100px;
    mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 10%, transparent 60%);
    animation: gridDrift 40s linear infinite;
  }
  /* noise grain overlay */
  .hero__grain {
    position: absolute;
    inset: 0;
    opacity: 0.3;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    background-size: 256px 256px;
    pointer-events: none;
  }
  @keyframes heroGlow {
    0% { opacity: 0.4; transform: translate(0, 0) scale(1); }
    100% { opacity: 1; transform: translate(-30px, 20px) scale(1.1); }
  }
  @keyframes gridDrift {
    0% { transform: translate(0, 0); }
    100% { transform: translate(100px, 100px); }
  }

  .hero__content-area {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
    padding: 10rem 0 5rem;
  }

  .hero__content {
    max-width: 46rem;
    animation: heroIn 1100ms cubic-bezier(0.23,1,0.32,1) both;
  }
  @keyframes heroIn {
    from { opacity: 0; transform: translateY(45px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .hero h1 {
    color: #FFFFFF;
    margin-bottom: 2rem;
  }
  .hero h1 em {
    font-style: italic;
    background: linear-gradient(135deg, var(--gold-pale), var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .hero__sub {
    /* 0.45 was tuned against flat navy and measured 4.5:1, right on the AA
       limit. There is a photograph behind it now, so it has to carry more.

       A design review flagged 0.78 as a WCAG failure over the photo. Measured,
       it was not: sampling the brightest pixel under the paragraph and
       compositing the scrim (still 0.80 navy at the text's right edge) gives
       8.14:1 at 0.78, already past AA. 0.92 takes it to 10.62:1. Kept for
       legibility over a photo that may be re-cropped later, not to fix a
       violation. Anything at or above 0.78 is compliant here. */
    color: rgba(255,255,255,0.92);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 1.02rem;
    line-height: 1.85;
    text-shadow: 0 1px 12px rgba(4,8,14,0.55);
    max-width: 38ch;
    margin-bottom: 2.75rem;
    animation: heroIn 1100ms 200ms cubic-bezier(0.23,1,0.32,1) both;
  }
  .hero .btn-row {
    animation: heroIn 1100ms 400ms cubic-bezier(0.23,1,0.32,1) both;
  }


  /* Sector strip */
  .hero__stats-strip {
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(198,163,78,0.08);
  }
  .hero__sectors {
    max-width: 1140px;
    margin: 0 auto;
    padding: 2.1rem 2rem;
    display: flex;
    align-items: center;
    gap: 2.25rem;
    flex-wrap: wrap;
    animation: statIn 900ms cubic-bezier(0.23,1,0.32,1) both;
    animation-delay: 750ms;
  }
  @keyframes statIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .hero__sectors-label {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--on-dark-faint);
    flex-shrink: 0;
  }
  .hero__sectors-list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 2.25rem;
    flex-wrap: wrap;
  }
  .hero__sectors-list li {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.84rem;
    font-weight: 500;
    color: rgba(255,255,255,0.55);
    transition: color 400ms;
  }
  .hero__sectors-list li:hover { color: var(--gold-light); }

  /* ── Pillars ── */
  .pillars {
    background: var(--page-bg);
    border-bottom: 1px solid var(--border);
    padding: 4rem 0;
  }
  .pillars__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
  }
  .pillar {
    text-align: center;
    padding: 1.75rem 1rem;
    position: relative;
    transition: all 500ms cubic-bezier(0.23,1,0.32,1);
    cursor: default;
  }
  .pillar + .pillar::before {
    content: "";
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 1px;
    background: var(--border);
  }
  .pillar:hover { transform: translateY(-4px); }
  .pillar__icon {
    width: 36px; height: 36px;
    color: var(--gold);
    margin: 0 auto 1rem;
    transition: all 500ms cubic-bezier(0.23,1,0.32,1);
    opacity: 0.8;
  }
  .pillar:hover .pillar__icon { opacity: 1; transform: scale(1.15); }
  .pillar__name {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 0.4rem;
  }
  .pillar__desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
    font-style: italic;
  }

  /* ── Trust strip ── */
  .trust-strip {
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--border);
    text-align: center;
  }
  .trust-strip__label {
    display: block;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
  }
  .trust-strip__logos {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem 3rem;
  }
  .trust-strip__name {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    opacity: 0.7;
    transition: opacity 300ms;
  }
  .trust-strip__name:hover { opacity: 1; }

  /* ── Intro ── */
  .intro__grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 6rem;
    align-items: start;
  }
  .intro__body {
    color: var(--text-body);
    line-height: 1.95;
    font-size: 1.06rem;
  }
  .intro__body p + p { margin-top: 1.5rem; }
  .intro__figure {
    margin: 0 0 2.5rem;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
  }
  .intro__figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
  .training__figure {
    margin: 0 0 3rem;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
  }
  .training__figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
  .detail-block__figure {
    margin: 0 0 2rem;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
  }
  .detail-block__figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }
  .intro__tagline {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.4;
    padding-left: 1.75rem;
    border-left: 2px solid var(--gold);
    margin-bottom: 2.5rem;
    font-style: italic;
  }
  .intro__values {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }
  .intro__value {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text);
    padding: 0.9rem 1.25rem;
    border-radius: 3px;
    background: transparent;
    border: 1px solid var(--border);
    transition: all 500ms cubic-bezier(0.23,1,0.32,1);
  }
  .intro__value:hover {
    transform: translateX(8px);
    border-color: var(--gold-line);
    background: var(--gold-faint);
  }
  .intro__value-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
    transition: transform 400ms cubic-bezier(0.23,1,0.32,1);
  }
  .intro__value:hover .intro__value-dot { transform: scale(1.6); }

  /* ── Outcomes / metrics ── */
  .metrics__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin-top: 3.5rem;
    background: var(--border);
    border: 1px solid var(--border);
  }
  .metric {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.9rem 1.6rem;
    background: var(--page-bg);
    transition: background 400ms cubic-bezier(0.23,1,0.32,1);
  }
  .metric:hover { background: var(--gold-faint); }
  .metric__dir {
    width: 22px; height: 22px;
    flex-shrink: 0;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--gold-faint);
    border: 1px solid var(--gold-line);
    position: relative;
    transition: all 400ms cubic-bezier(0.23,1,0.32,1);
  }
  .metric__dir::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 0; height: 0;
    margin-left: -3.5px;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
  }
  .metric__dir--up::after {
    margin-top: -5px;
    border-bottom: 6px solid var(--gold);
  }
  .metric__dir--down::after {
    margin-top: -1px;
    border-top: 6px solid var(--gold);
  }
  .metric:hover .metric__dir {
    background: var(--gold);
    border-color: var(--gold);
    transform: scale(1.1);
  }
  .metric:hover .metric__dir--up::after { border-bottom-color: var(--navy); }
  .metric:hover .metric__dir--down::after { border-top-color: var(--navy); }
  .metric__name {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.005em;
    margin-bottom: 0.35rem;
  }
  .metric__note {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.6;
  }

  /* ── Solutions ── */
  .solutions__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
  .sol-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    padding: 2.75rem 2.25rem;
    transition: all 500ms cubic-bezier(0.23,1,0.32,1);
    position: relative;
    overflow: hidden;
  }
  .sol-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 500ms cubic-bezier(0.23,1,0.32,1);
  }
  .sol-card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-8px);
    border-color: var(--gold-line);
  }
  .sol-card:hover::before { transform: scaleX(1); }
  .sol-card__icon {
    width: 32px; height: 32px;
    color: var(--gold);
    margin-bottom: 1.75rem;
    opacity: 0.75;
    transition: all 500ms cubic-bezier(0.23,1,0.32,1);
  }
  .sol-card:hover .sol-card__icon { opacity: 1; transform: scale(1.1); }
  .sol-card h3 { margin-bottom: 0.8rem; }
  .sol-card p {
    font-family: "Segoe UI", system-ui, sans-serif;
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.7;
  }
  .sol-card .arrow-link { margin-top: 1.75rem; }

  /* Flagship, Supply Chain & Operations leads the grid */
  .sol-card--lead {
    grid-column: span 2;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    background: var(--lead-bg);
    border-color: var(--lead-border);
    padding: 3.25rem 3rem;
    /* Dark card inside a light grid: without this it inherits --text-body,
       which is 2.18:1 here. Any text added to this card must stay readable. */
    color: var(--on-dark-muted);
  }
  .sol-card--lead::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 85% 0%, var(--lead-glow) 0%, transparent 55%);
    pointer-events: none;
  }
  .sol-card--lead > * { position: relative; z-index: 1; }
  .sol-card--lead:hover { border-color: var(--gold); }
  .sol-card__tag {
    display: inline-block;
    align-self: flex-start;
    padding: 0.35rem 0.75rem;
    margin-bottom: 1.75rem;
    border: 1px solid rgba(198,163,78,0.35);
    border-radius: 2px;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
  }
  .sol-card--lead .sol-card__icon {
    width: 40px; height: 40px;
    color: var(--gold);
    opacity: 1;
    margin-bottom: 1.5rem;
  }
  .sol-card--lead h3 {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    margin-bottom: 1rem;
  }
  .sol-card--lead p {
    color: var(--on-dark-muted);
    font-size: 0.95rem;
    line-height: 1.8;
    max-width: 46ch;
  }
  .sol-card--lead .lead__list {
    list-style: none;
    margin: 2rem 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1.5rem;
  }
  .sol-card--lead .lead__list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.83rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.66);
  }
  .sol-card--lead .lead__list li::before {
    content: "";
    flex-shrink: 0;
    width: 5px; height: 5px;
    margin-top: 0.5rem;
    border-radius: 50%;
    background: var(--gold);
  }
  .sol-card--lead .arrow-link {
    margin-top: auto;
    padding-top: 2.25rem;
    color: var(--gold);
  }
  .sol-card--lead .arrow-link:hover { color: var(--gold-light); }

  /* ── Why choose ── */
  .why__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
  .why-card {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 2.25rem;
    border-radius: 4px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    transition: all 500ms cubic-bezier(0.23,1,0.32,1);
  }
  .why-card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-6px);
    border-color: var(--gold-line);
  }
  .why-card__icon {
    width: 48px; height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--gold-faint);
    border: 1px solid var(--gold-line);
    display: flex; align-items: center; justify-content: center;
    color: var(--gold);
    transition: all 500ms cubic-bezier(0.23,1,0.32,1);
  }
  .why-card:hover .why-card__icon {
    background: var(--gold);
    color: var(--navy);
    border-color: var(--gold);
    box-shadow: 0 4px 20px rgba(198,163,78,0.25);
  }
  .why-card__icon svg { width: 20px; height: 20px; }
  .why-card h3 { margin-bottom: 0.5rem; }
  .why-card p {
    font-family: "Segoe UI", system-ui, sans-serif;
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.7;
  }

  /* ── Track record ── */
  /* Deliberately separate from .metric (Outcomes above): those are financial
     operating metrics we measure per engagement, these are delivery/placement
     numbers from actual work completed. Mixing them under one heading would
     imply the track record proves the cost-per-km claims. It doesn't. */
  .track__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
  .track-card {
    padding: 2.25rem;
    border-radius: 4px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    transition: all 500ms cubic-bezier(0.23,1,0.32,1);
  }
  .track-card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-6px);
    border-color: var(--gold-line);
  }
  .track-card__stat {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--gold-dark);
    margin-bottom: 0.35rem;
  }
  .track-card__stat-unit {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .track-card__label {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    margin-bottom: 0.85rem;
  }
  .track-card__detail {
    font-family: "Segoe UI", system-ui, sans-serif;
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.7;
  }
  .track-card__tag {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.25rem 0.7rem;
    border-radius: 2px;
    background: var(--gold-faint);
    border: 1px solid var(--gold-line);
    color: var(--gold-dark);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  /* ── FAQ ── */
  /* Native <details>/<summary>: keyboard-operable and screen-reader exposed
     (expanded state, name) with no JS. The site has no other accordion, so
     there's no existing pattern to match here beyond the card language. */
  .faq__list {
    max-width: 46rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .faq-item {
    border-radius: 4px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    transition: border-color 400ms;
  }
  .faq-item[open] { border-color: var(--gold-line); }
  .faq-item summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem 1.75rem;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
    border-radius: 4px;
  }
  .faq-item__icon {
    flex-shrink: 0;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    color: var(--gold);
    transition: transform 300ms cubic-bezier(0.23,1,0.32,1);
  }
  .faq-item[open] .faq-item__icon { transform: rotate(45deg); }
  .faq-item__answer {
    margin: 0;
    padding: 0 1.75rem 1.5rem;
    font-family: "Segoe UI", system-ui, sans-serif;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.75;
    max-width: 58ch;
  }

  /* ── Training detail cards ── */
  /* Only the programmes with confirmed duration/delivery/investment get a
     card. The rest stay in the plain .training__item list further down,
     don't promote them here without real detail, that's how "Learn more"
     links to nowhere happened the first time. */
  .training-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
  }
  .training-card {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    border-radius: 4px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    transition: all 500ms cubic-bezier(0.23,1,0.32,1);
  }
  .training-card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-6px);
    border-color: var(--gold-line);
  }
  .training-card__figure {
    margin: -2rem -2rem 1.5rem;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
  }
  .training-card__figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
  .training-card h3 { font-size: 1.05rem; margin-bottom: 1.25rem; }
  .training-card__meta { flex-grow: 1; margin: 0 0 1.5rem; }
  .training-card__meta > div + div { margin-top: 0.9rem; }
  .training-card__meta dt {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin-bottom: 0.2rem;
  }
  .training-card__meta dd {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.84rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
  }
  .training-card__desc {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.84rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 0 1rem;
  }
  .training-card__outcomes {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .training-card__outcomes li {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--card-border);
    border-radius: 3px;
    color: var(--text-muted);
  }
  .training-card__price {
    padding-top: 1.25rem;
    border-top: 1px solid var(--card-border);
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--gold-dark);
  }
  .training-card__price span {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: normal;
  }
  .training-card__cta {
    margin-top: 1rem;
    align-self: flex-start;
  }
  .training-card__streams {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .training-card__streams-label {
    width: 100%;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.125rem;
  }
  .training-card__streams a,
  .training-card__streams button {
    font-size: 0.82rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--gold);
    border-radius: 4px;
    background: none;
    color: var(--gold-dark);
    text-decoration: none;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
  }
  .training-card__streams a:hover,
  .training-card__streams button:hover {
    background: var(--gold);
    color: #fff;
  }
  .training__more-label {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 1rem;
  }

  /* ── Training corporate options ── */
  .training-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin: 1.5rem 0;
  }
  .training-options > div {
    padding: 0.9rem 1rem;
    border: 1px solid var(--card-border);
    border-radius: 4px;
  }
  .training-options dt {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
  }
  .training-options dd {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.88rem;
    color: var(--heading);
    margin: 0;
    font-weight: 600;
  }
  .training-includes__heading {
    font-size: 1rem;
    margin: 1.5rem 0 0.75rem;
  }
  .training-includes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .training-includes li {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.82rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--gold-line);
    border-radius: 3px;
    color: var(--text);
  }

  /* ── Pricing & Engagement ── */
  .pricing__table-wrap {
    overflow-x: auto;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    margin-bottom: 2rem;
  }
  .pricing__table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.9rem;
  }
  .pricing__table th,
  .pricing__table td {
    padding: 1.1rem 1.5rem;
    text-align: left;
    white-space: nowrap;
  }
  .pricing__table th {
    background: var(--gold-faint);
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--gold-line);
  }
  .pricing__table td { color: var(--text-body); border-bottom: 1px solid var(--card-border); }
  .pricing__table tr:last-child td { border-bottom: none; }
  .pricing__table td:last-child { color: var(--gold-dark); font-weight: 600; }
  .pricing__note {
    font-family: "Segoe UI", system-ui, sans-serif;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.75;
    max-width: 58ch;
    margin-bottom: 1.75rem;
  }

  /* ── Method ── */
  .method {
    background: var(--navy);
    color: #FFFFFF;
    padding: 8rem 0;
    position: relative;
    overflow: hidden;
  }
  .method__bg {
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle at 15% 50%, rgba(198,163,78,0.04) 0%, transparent 45%),
      radial-gradient(circle at 85% 50%, rgba(198,163,78,0.025) 0%, transparent 45%);
  }
  .method__grain {
    position: absolute;
    inset: 0;
    opacity: 0.25;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    background-size: 256px 256px;
    pointer-events: none;
  }
  .method .eyebrow { color: var(--gold-light); }
  .method h2 { color: #FFFFFF; }
  .method .section-lead { color: var(--on-dark-muted); }

  .method__steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    margin-top: 4.5rem;
    position: relative;
    z-index: 1;
  }
  .method__cta { margin-top: 4rem; text-align: center; }
  .method__connector {
    position: absolute;
    top: 32px;
    left: 10%; right: 10%;
    height: 1px;
    background: rgba(198,163,78,0.08);
  }
  .method__connector-fill {
    position: absolute;
    top: 32px;
    left: 10%; right: 10%;
    height: 2px;
    margin-top: -0.5px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 2.5s cubic-bezier(0.23,1,0.32,1);
  }
  .method__steps.animating .method__connector-fill { transform: scaleX(1); }

  .method__step {
    text-align: center;
    position: relative;
    padding: 0 0.75rem;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms cubic-bezier(0.23,1,0.32,1),
                transform 700ms cubic-bezier(0.23,1,0.32,1);
  }
  .method__step.step-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .method__num {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(198,163,78,0.15);
    color: rgba(198,163,78,0.55);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: "Palatino Linotype", Georgia, serif;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
    transition: all 700ms cubic-bezier(0.23,1,0.32,1);
  }
  .method__step.step-active .method__num {
    background: var(--gold);
    color: var(--navy);
    border-color: var(--gold);
    box-shadow: 0 0 30px rgba(198,163,78,0.3), 0 0 60px rgba(198,163,78,0.1);
    transform: scale(1.08);
  }
  .method__step.step-visited .method__num {
    background: transparent;
    color: var(--gold);
    border-color: rgba(198,163,78,0.5);
    box-shadow: none;
    transform: scale(1);
  }
  .method__step:hover .method__num {
    background: var(--gold);
    color: var(--navy);
    border-color: var(--gold);
    box-shadow: 0 0 30px rgba(198,163,78,0.3), 0 0 60px rgba(198,163,78,0.08);
    transform: scale(1.12);
  }
  .method__step h3 {
    color: #FFFFFF;
    font-size: 1.05rem;
    margin-bottom: 0.6rem;
    transition: opacity 500ms;
  }
  .method__step p {
    font-family: "Segoe UI", system-ui, sans-serif;
    color: var(--on-dark-faint);
    font-size: 0.82rem;
    line-height: 1.6;
    max-width: 16ch;
    margin: 0 auto;
    transition: color 500ms;
  }
  /* Must stay clearly brighter than the resting --on-dark-faint above, or the
     active step reads as the dimmed one. */
  .method__step.step-active p { color: rgba(255,255,255,0.86); }
  .method__step.step-active h3 { color: var(--gold-pale); }
  .method__out {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.32rem 0.7rem;
    border: 1px solid rgba(198,163,78,0.22);
    border-radius: 2px;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(198,163,78,0.78);
    transition: all 500ms cubic-bezier(0.23,1,0.32,1);
  }
  .method__step.step-active .method__out,
  .method__step.step-visited .method__out {
    border-color: rgba(198,163,78,0.45);
    color: var(--gold-light);
  }

  /* ── Training ── */
  .training__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 3rem;
  }
  .training__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.5rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 3px;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text);
    transition: all 400ms cubic-bezier(0.23,1,0.32,1);
    cursor: default;
  }
  .training__item:hover {
    border-color: var(--gold-line);
    transform: translateX(8px);
    background: var(--gold-faint);
  }
  .training__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
    transition: all 400ms cubic-bezier(0.23,1,0.32,1);
  }
  .training__item:hover .training__dot {
    transform: scale(1.8);
    box-shadow: 0 0 8px rgba(198,163,78,0.4);
  }

  /* ── Products ── */
  .products__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 3rem;
  }
  .product__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 3px;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--text);
    transition: all 400ms cubic-bezier(0.23,1,0.32,1);
    cursor: default;
  }
  .product__item:hover {
    border-color: var(--gold-line);
    transform: translateY(-5px);
    box-shadow: var(--card-shadow);
  }
  .product__item svg {
    width: 18px; height: 18px;
    color: var(--gold);
    flex-shrink: 0;
    opacity: 0.7;
    transition: all 400ms cubic-bezier(0.23,1,0.32,1);
  }
  .product__item:hover svg { opacity: 1; transform: scale(1.15); }

  /* ── Contact ── */
  .contact {
    background: var(--navy);
    color: #FFFFFF;
    padding: 8rem 0;
    position: relative;
    overflow: hidden;
  }
  .contact__bg {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 15% 110%, rgba(198,163,78,0.07) 0%, transparent 55%),
      linear-gradient(180deg, rgba(8,14,24,0.86) 0%, rgba(8,14,24,0.93) 100%),
      url("images/contact_bg.webp") center / cover no-repeat;
  }
  .contact__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: start;
  }
  .contact .eyebrow { color: var(--gold-light); }
  .contact h2 { color: #FFFFFF; margin-bottom: 1.5rem; }
  .contact__lead {
    font-family: "Segoe UI", system-ui, sans-serif;
    color: var(--on-dark-muted);
    font-size: 0.98rem;
    line-height: 1.85;
    max-width: 44ch;
  }
  .contact__steps {
    list-style: none;
    counter-reset: none;
    margin: 2.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
  }
  .contact__steps li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.88rem;
    line-height: 1.65;
    /* This list appears on TWO backgrounds: the navy `section.contact` panel
       (index.html, text as a bare text node) and a plain white section
       (contact.html, text wrapped in its own <span>). It was styled for navy
       only, so the white-section copy rendered white-on-white — invisible.
       Light is the base now; the navy panel opts back in on the rules below. */
    color: var(--text-body);
  }
  .contact .contact__steps li { color: rgba(255,255,255,0.62); }
  /* :first-child, not `span` alone: contact.html wraps the message in its own
     <span> too (index.html uses a bare text node), and this rule must only
     style the number badge. Matching every span squashed the message text
     into the same 24x24 circle — invisible before the fix above, then
     visibly broken after it, since white-on-white had been hiding both bugs
     at once. */
  .contact__steps li span:first-child {
    flex-shrink: 0;
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(137,110,44,0.5);
    color: var(--gold-dark);
    font-size: 0.68rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
  }
  .contact .contact__steps li span:first-child {
    border-color: rgba(198,163,78,0.55);
    color: var(--gold);
  }
  .contact__direct {
    border-top: 1px solid rgba(255,255,255,0.07);
    padding-top: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-family: "Segoe UI", system-ui, sans-serif;
  }
  .contact__direct a {
    color: var(--gold);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 300ms;
  }
  .contact__direct a:hover { color: var(--gold-light); }
  .contact__direct span { font-size: 0.78rem; color: var(--on-dark-faint); }

  /* form */
  .contact__form {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 4px;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
  }
  .field { display: flex; flex-direction: column; gap: 0.5rem; }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.35rem; }
  .field label {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--on-dark-muted);
  }
  .field input,
  .field select,
  .field textarea {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.92rem;
    color: #FFFFFF;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 3px;
    padding: 0.85rem 1rem;
    width: 100%;
    transition: border-color 300ms, background 300ms, box-shadow 300ms;
  }
  .field textarea { resize: vertical; line-height: 1.6; }
  .field select { appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C6A34E' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 15px;
    padding-right: 2.6rem;
  }
  .field select option { background: var(--navy); color: #FFFFFF; }
  .field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,0.5); }
  .field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--gold);
    background: rgba(255,255,255,0.06);
    box-shadow: 0 0 0 3px rgba(198,163,78,0.12);
  }
  .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; }
  /* Honeypot: off-screen rather than display:none, which some bots skip. */
  .hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
  .field .is-invalid { border-color: #D96B6B; }
  .field__error {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.74rem;
    line-height: 1.4;
    color: #E89393;
  }
  .field__error[hidden] { display: none; }
  .contact__submit { align-self: flex-start; margin-top: 0.35rem; }
  /* the form posts nowhere yet, but the busy state has to exist before it does
, without it a slow endpoint reads as a dead button and gets clicked twice */
  .contact__submit[aria-busy="true"] { opacity: 0.65; cursor: progress; }
  .contact__submit:disabled { opacity: 0.65; cursor: not-allowed; }
  .contact__privacy {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.72rem;
    line-height: 1.65;
    color: var(--on-dark-faint);
  }
  .contact__result {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.84rem;
    color: var(--gold);
    min-height: 1.2em;
  }
  /* Failure has to read differently from success. Gold on gold would let a
     "could not send" message pass for the confirmation at a glance. */
  .contact__result--error { color: #E89393; }
  .contact__grain {
    position: absolute;
    inset: 0;
    opacity: 0.25;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    background-size: 256px 256px;
    pointer-events: none;
  }

  /* ── Footer ── */
  .footer {
    background: var(--footer-bg);
    color: var(--footer-text);
    padding: 5.5rem 0 2.5rem;
    border-top: 1px solid rgba(198,163,78,0.06);
  }
  .footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
    gap: 2.5rem;
    margin-bottom: 4rem;
  }
  .footer__brand-text {
    color: var(--footer-text);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.84rem;
    line-height: 1.8;
    max-width: 30ch;
    margin-top: 1.5rem;
  }
  .footer h4 {
    color: var(--footer-heading);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
  }
  .footer__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    /* was 0.65rem, the links now carry their own vertical padding to reach
       the 44px touch target, so the gap comes off to keep the same rhythm */
    gap: 0;
  }
  /* the Contact column holds plain <li> text as well as links, match the
     height so the two columns keep the same baseline rhythm */
  .footer__list li {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .footer__list a {
    color: var(--footer-text);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.82rem;
    text-decoration: none;
    transition: color 400ms, transform 400ms;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer__list a:hover { color: var(--gold); transform: translateX(4px); }
  .footer__social {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
  .footer__social-label {
    color: var(--footer-text);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .footer__social-icons { display: flex; gap: 12px; margin-left: -12px; }
  .footer__social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 20px icon + 12px padding each side = 44px touch target, matching the
       .mobile-menu__close pattern (icon size + padding = 44px). */
    padding: 12px;
    border-radius: 3px;
    color: var(--footer-text);
    transition: color 300ms;
  }
  .footer__social-icons a:hover { color: var(--gold); }
  .footer__social-icons a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.04);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .footer__copy {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
  }
  .footer__legal { display: flex; gap: 1.5rem; list-style: none; }
  .footer__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.72rem;
    color: var(--footer-text);
    transition: color 300ms;
  }
  .footer__legal a:hover { color: var(--gold); }

  /* ── Responsive ── */
  @media (max-width: 1024px) {
    .hero__content-area { padding: 8rem 0 4rem; }
    .hero { min-height: auto; }
    /* narrower viewport crops toward the driver, and the scrim goes flat-dark
       because there is no longer an empty third to put the headline over */
    .hero__photo { object-position: 68% center; }
    .hero__scrim {
      background:
        linear-gradient(90deg, rgba(8,14,24,0.94) 0%, rgba(8,14,24,0.82) 55%, rgba(8,14,24,0.68) 100%),
        linear-gradient(180deg, rgba(8,14,24,0.7) 0%, transparent 30%, rgba(8,14,24,0.9) 100%);
    }
    /* full lockup + six links + CTA needs ~945px; collapse before they collide */
    .nav__links { display: none; }
    .nav__mobile { display: flex; }
    .solutions__grid { grid-template-columns: repeat(2, 1fr); }
    .sol-card--lead { grid-column: span 2; grid-row: auto; }
    .metrics__grid { grid-template-columns: repeat(2, 1fr); }
    .track__grid { grid-template-columns: 1fr; }
    .training-cards { grid-template-columns: repeat(2, 1fr); }
    .contact__inner { grid-template-columns: 1fr; gap: 3.5rem; }
    .method__steps { grid-template-columns: repeat(3, 1fr); gap: 2.5rem 0; }
    .method__connector, .method__connector-fill { display: none; }
    .pillars__grid { grid-template-columns: repeat(3, 1fr); }
    .pillar + .pillar::before { display: none; }
    .intro__grid { grid-template-columns: 1fr; gap: 3.5rem; }
    .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  }
  @media (max-width: 768px) {
    .container { padding: 0 1.25rem; }
    .section { padding: 5rem 0; }
    .solutions__grid { grid-template-columns: 1fr; }
    .sol-card--lead { grid-column: auto; padding: 2.5rem 1.75rem; }
    .sol-card--lead h3 { font-size: 1.5rem; }
    .sol-card--lead .lead__list { grid-template-columns: 1fr; }
    .nav__inner, .nav.scrolled .nav__inner { height: 70px; }
    .nav__logo-img, .nav.scrolled .nav__logo-img { height: 44px; width: 44px; }
    .nav__wordmark, .nav.scrolled .nav__wordmark { font-size: 0.98rem; letter-spacing: 0.1em; }
    .why__grid { grid-template-columns: 1fr; }
    .detail-block__cols { grid-template-columns: 1fr; gap: 2rem; }
    .checklist-hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .checklist-form-card { margin-top: 0; }
    .stage-activities ul { columns: 1; }
    .page-hero { padding: 9rem 0 4rem; }
    .method { padding: 5.5rem 0; }
    .method__steps { grid-template-columns: 1fr; gap: 1.5rem; }
    .method__step { text-align: left; display: flex; align-items: flex-start; gap: 1.25rem; padding: 0; }
    .method__num { width: 50px; height: 50px; font-size: 1.1rem; flex-shrink: 0; margin-bottom: 0; }
    .method__step p { max-width: none; margin: 0; }
    .training__grid { grid-template-columns: 1fr; }
    .training-cards { grid-template-columns: 1fr; }
    .products__grid { grid-template-columns: 1fr; }
    .pillars__grid { grid-template-columns: repeat(2, 1fr); }
    .metrics__grid { grid-template-columns: 1fr; }
    .hero__sectors { gap: 1rem 1.75rem; padding: 1.6rem 1.25rem; }
    .hero__sectors-list { gap: 0.6rem 1.75rem; }
    .hero__content-area { padding: 7rem 0 3rem; }
    .footer__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .footer__bottom { flex-direction: column; text-align: center; }
    .contact { padding: 5.5rem 0; }
    .contact__form { padding: 1.75rem; }
    .field-row { grid-template-columns: 1fr; }
  }
  /* ── Digital Products ── */
  .dp-product__info { max-width: 62ch; }
  .dp-product__logo {
    height: 56px;
    width: auto;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    display: block;
  }
  .dp-product__tag {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    margin-bottom: 1.25rem;
    border-radius: 2px;
    background: var(--gold-faint);
    border: 1px solid var(--gold-line);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-dark);
  }
  .dp-product__tagline {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    font-size: 1.15rem;
    font-style: italic;
    color: var(--gold-dark);
    margin-bottom: 0.5rem;
  }
  .dp-product__body {
    font-family: "Segoe UI", system-ui, sans-serif;
    color: var(--text-body);
    font-size: 0.92rem;
    line-height: 1.8;
    margin-bottom: 2rem;
  }
  .dp-product__body p + p { margin-top: 1rem; }
  .dp-product__features {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 2rem;
    margin-bottom: 2.25rem;
  }
  .dp-product__features li {
    position: relative;
    padding-left: 1.35rem;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-body);
  }
  .dp-product__features li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.42em;
    width: 9px; height: 5px;
    border: 1.5px solid var(--gold);
    border-top: none;
    border-right: none;
    border-radius: 0;
    transform: rotate(-45deg);
  }

  @media (max-width: 640px) {
    .dp-product__features { grid-template-columns: 1fr; }
  }

  /* ── Training Courses (products.html) ── */
  .course-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
  .course-card {
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    border-radius: 4px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    transition: all 500ms cubic-bezier(0.23,1,0.32,1);
  }
  .course-card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-6px);
    border-color: var(--gold-line);
  }
  .course-card__name {
    font-size: 1rem;
    flex-grow: 1;
    margin-bottom: 1.25rem;
  }
  .course-card__price {
    padding-top: 1rem;
    margin-bottom: 1.25rem;
    border-top: 1px solid var(--card-border);
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gold-dark);
  }
  .course-card__price span {
    display: block;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 0.2rem;
  }
  .course-card__cta { width: 100%; text-align: center; cursor: pointer; border: none; }

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

  /* ── Purchase modal ── */
  .modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(8,14,24,0.72);
    opacity: 0;
    transition: opacity 300ms;
  }
  .modal-overlay[hidden] { display: none; }
  .modal-overlay.is-open { opacity: 1; }
  .modal {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 2.25rem;
    border-radius: 4px;
    background: var(--navy);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 24px 64px rgba(0,0,0,0.4);
    transform: translateY(12px);
    transition: transform 300ms;
  }
  .modal-overlay.is-open .modal { transform: translateY(0); }
  .modal__close {
    position: absolute;
    top: 1.1rem; right: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 3px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: border-color 300ms, color 300ms;
  }
  .modal__close:hover { border-color: var(--gold-line); color: #FFFFFF; }
  .modal__title {
    color: #FFFFFF;
    font-size: 1.35rem;
    margin: 0 1.5rem 0.75rem 0;
  }
  .modal__lead {
    font-family: "Segoe UI", system-ui, sans-serif;
    color: var(--on-dark-muted);
    font-size: 0.88rem;
    line-height: 1.7;
    margin: 0 0 1.5rem;
  }
  #purchaseForm { display: flex; flex-direction: column; gap: 1.25rem; }
  .modal__submit { width: 100%; }
  .modal__result {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.84rem;
    color: var(--on-dark-muted);
    margin: 0;
    min-height: 1.2em;
  }
  .modal__result--error { color: #E58989; }

  /* ── Knowledge Centre ── */
  .kc-articles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  .kc-card {
    display: flex;
    flex-direction: column;
    padding: 2.25rem;
    border-radius: 4px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    transition: all 500ms cubic-bezier(0.23,1,0.32,1);
  }
  .kc-card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-6px);
    border-color: var(--gold-line);
  }
  .kc-card__tag {
    display: inline-block;
    align-self: flex-start;
    padding: 0.3rem 0.7rem;
    margin-bottom: 1.25rem;
    border-radius: 2px;
    background: var(--gold-faint);
    border: 1px solid var(--gold-line);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-dark);
  }
  .kc-card h3 {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
  }
  .kc-card__date {
    display: block;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
  }
  .kc-card__summary {
    font-family: "Segoe UI", system-ui, sans-serif;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.75;
    flex-grow: 1;
    margin-bottom: 1.5rem;
  }
  .kc-card__topics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
  }
  .kc-card__topics span {
    padding: 0.2rem 0.55rem;
    border-radius: 2px;
    background: var(--section-alt);
    border: 1px solid var(--card-border);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
  }

  @media (max-width: 768px) {
    .kc-articles { grid-template-columns: 1fr; }
  }

  /* ── Resource Centre ── */
  .rc-pillar-nav {
    position: sticky;
    top: 60px;
    z-index: 90;
    background: var(--page-bg);
    border-bottom: 1px solid var(--border);
    padding: 0;
  }
  .rc-pillar-nav__list {
    display: flex;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .rc-pillar-nav__list::-webkit-scrollbar { display: none; }
  .rc-pillar-nav__list a {
    display: block;
    padding: 1rem 1.25rem;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 300ms, border-color 300ms;
  }
  .rc-pillar-nav__list a:hover,
  .rc-pillar-nav__list a.is-active {
    color: var(--gold-dark);
    border-bottom-color: var(--gold);
  }

  .rc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
  .rc-grid--compact { gap: 1.25rem; }

  .rc-card {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    border-radius: 4px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    transition: all 500ms cubic-bezier(0.23,1,0.32,1);
  }
  .rc-card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-6px);
    border-color: var(--gold-line);
  }
  .rc-card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--gold-faint);
    border: 1px solid var(--gold-line);
    color: var(--gold-dark);
    margin-bottom: 1.25rem;
  }
  .rc-card h3 {
    font-size: 1.05rem;
    margin-bottom: 0.75rem;
  }
  .rc-card p {
    font-family: "Segoe UI", system-ui, sans-serif;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.7;
    flex-grow: 1;
    margin-bottom: 1.25rem;
  }
  .rc-card__includes {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.82rem;
    color: var(--text-muted);
  }
  .rc-card__includes li {
    padding: 0.3rem 0;
    padding-left: 1.25rem;
    position: relative;
  }
  .rc-card__includes li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
  }
  .rc-card__badge {
    display: inline-block;
    align-self: flex-start;
    padding: 0.25rem 0.65rem;
    border-radius: 2px;
    background: var(--gold-faint);
    border: 1px solid var(--gold-line);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-dark);
  }
  .rc-card__tag {
    display: inline-block;
    align-self: flex-start;
    padding: 0.3rem 0.7rem;
    margin-bottom: 1rem;
    border-radius: 2px;
    background: var(--gold-faint);
    border: 1px solid var(--gold-line);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-dark);
  }

  .rc-card--guide { padding: 1.75rem; }
  .rc-card--guide h3 { font-size: 0.95rem; }
  .rc-card--guide p { margin-bottom: 0; }

  .rc-upgrade {
    text-align: center;
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--border);
  }
  .rc-upgrade p {
    font-family: "Segoe UI", system-ui, sans-serif;
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
  }

  .rc-toolkit-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  .rc-toolkit {
    padding: 2rem;
    border-radius: 4px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    transition: all 500ms cubic-bezier(0.23,1,0.32,1);
  }
  .rc-toolkit:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-4px);
    border-color: var(--gold-line);
  }
  .rc-toolkit h3 {
    font-size: 1.1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
  }
  .rc-toolkit__list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.88rem;
    color: var(--text-body);
    line-height: 1.7;
  }
  .rc-toolkit__list li {
    padding: 0.35rem 0 0.35rem 1.5rem;
    position: relative;
  }
  .rc-toolkit__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.85rem;
    width: 8px;
    height: 1.5px;
    background: var(--gold);
  }

  .rc-template-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
  .rc-template-group {
    padding: 1.75rem;
    border-radius: 4px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
  }
  .rc-template-group h3 {
    font-size: 0.95rem;
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
  }
  .rc-template-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.85rem;
    color: var(--text-body);
    line-height: 1.7;
  }
  .rc-template-group li {
    padding: 0.25rem 0 0.25rem 1.25rem;
    position: relative;
  }
  .rc-template-group li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1.5px solid var(--gold);
    background: transparent;
  }

  .rc-maturity { background: var(--navy); color: #FFFFFF; }
  .rc-maturity .eyebrow { color: var(--gold-light); }
  .rc-maturity .section-lead { color: var(--on-dark-muted); }
  .rc-maturity .gold-rule { margin-bottom: 2rem; }

  .rc-journey {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 3rem;
  }
  .rc-journey__step {
    flex: 1;
    padding: 1.75rem;
    border-radius: 4px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
  }
  .rc-journey__step--highlight {
    background: rgba(198,163,78,0.08);
    border-color: rgba(198,163,78,0.2);
  }
  .rc-journey__level {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    margin-bottom: 0.75rem;
    border-radius: 2px;
    background: var(--gold-faint);
    border: 1px solid var(--gold-line);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-light);
  }
  .rc-journey__step h3 {
    font-size: 1rem;
    color: #FFFFFF;
    margin-bottom: 0.5rem;
  }
  .rc-journey__step p {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.84rem;
    color: var(--on-dark-muted);
    line-height: 1.65;
    margin: 0;
  }
  .rc-journey__connector {
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    color: var(--gold);
    flex-shrink: 0;
  }
  .rc-journey__connector svg { width: 32px; height: 20px; }

  .rc-journey-path {
    text-align: center;
    padding: 1.5rem 2rem;
    border-radius: 4px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
  }
  .rc-journey-path p {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--on-dark-muted);
    margin: 0;
    letter-spacing: 0.02em;
  }
  .rc-journey-path__arrow { color: var(--gold); padding: 0 0.25rem; }

  @media (max-width: 900px) {
    .rc-grid { grid-template-columns: repeat(2, 1fr); }
    .rc-toolkit-grid { grid-template-columns: repeat(2, 1fr); }
    .rc-template-grid { grid-template-columns: repeat(2, 1fr); }
    .rc-journey { flex-wrap: wrap; gap: 1rem; }
    .rc-journey__connector { display: none; }
    .rc-journey__step { min-width: calc(50% - 0.5rem); }
  }
  @media (max-width: 640px) {
    .rc-grid { grid-template-columns: 1fr; }
    .rc-toolkit-grid { grid-template-columns: 1fr; }
    .rc-template-grid { grid-template-columns: 1fr; }
    .rc-journey__step { min-width: 100%; }
    .rc-pillar-nav__list a { padding: 0.85rem 1rem; font-size: 0.72rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
    html { scroll-behavior: auto; }
    .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1; transform: none; }
    .method__step { opacity: 1; transform: none; }
    .method__connector-fill { transform: scaleX(1); }
  }

  /* ── Mobile tap targets ─────────────────────────────────────────────────
     The project already targets 44px deliberately (see .footer__list a and
     the .mobile-menu__close padding note), but four standalone link types
     were missed and measured 17–35px tall at 375px. Inline links inside a
     sentence are left alone — enlarging those would break the line box, and
     they are exempt from the target-size guidance for that reason.
     Padding is used rather than min-height alone so the touch area actually
     grows around the glyphs instead of just centring them in a taller box. */
  @media (max-width: 768px) {
    /* The "Explore …" links are the only route into each service page on the
       homepage, and they were the smallest targets on it at 21px. */
    .arrow-link {
      min-height: 44px;
      padding: 0.5rem 0;
    }
    .breadcrumb a,
    .contact__direct a {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
    }
    .training-card__streams a,
    .training-card__streams button { padding: 0.7rem 0.85rem; }
  }

  /* 1px gold border on white is 2.4:1; a control's boundary needs 3:1
     (WCAG 1.4.11), so the chip outline uses the readable gold. */
  .training-card__streams a,
  .training-card__streams button { border-color: var(--gold-dark); }

  /* ── Sticky mobile CTA ─────────────────────────────────────────────────
     Below 1024px the nav's "Book a consultation" link is hidden behind the
     hamburger menu, so mobile visitors had no persistent booking CTA while
     scrolling. This bar keeps one on screen at all times. Desktop is
     unaffected: display:none until the same breakpoint the nav collapses at. */
  .sticky-mobile-cta { display: none; }
  @media (max-width: 1024px) {
    .sticky-mobile-cta {
      display: block;
      position: fixed;
      left: 0; right: 0; bottom: 0;
      z-index: 95;
      padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
      background: var(--navy);
      border-top: 1px solid var(--gold-line);
      box-shadow: 0 -4px 16px rgba(0,0,0,0.18);
    }
    .sticky-mobile-cta .btn {
      display: block;
      width: 100%;
      text-align: center;
    }
    /* Reserve space so the fixed bar never covers footer/form content. */
    body { padding-bottom: 64px; }
  }