:root {
    --gold: #C6A34E;
    --gold-light: #DABB6C;
    --gold-pale: #E8D4A0;
    --gold-dark: #A6893B;
    --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;
    --text-muted: #7A7F90;
    --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: #5A6578;
    --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: #E4E7F0; --text-body: #A8ADC0; --text-muted: #6B7084;
      --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: #E4E7F0; --text-body: #A8ADC0; --text-muted: #6B7084;
    --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: #A6893B;
    --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: #7A7F90;
    --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: #5A6578; --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; }
  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);
    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); }

  /* ── 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 .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: rgba(255,255,255,0.4);
    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: rgba(255,255,255,0.3);
    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);
    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);
  }
  .btn--outline::after { display: none; }
  .btn--outline:hover { background: var(--gold-faint); border-color: var(--gold); }

  .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(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);
    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. */
  .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;
    background: linear-gradient(178deg,
      #F7EAAC 0%,
      #E4C566 30%,
      #DDBD55 52%,
      #DBB446 74%,
      #B98F31 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--gold);
    transition: font-size 500ms cubic-bezier(0.23,1,0.32,1);
  }
  .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: rgba(255,255,255,0.3); }
  body.menu-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: rgba(255,255,255,0.28);
    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;
  }

  /* ── 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;
  }
  .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;
  }
  .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: rgba(255,255,255,0.45);
    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);
    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);
    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 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);
    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__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);
  }
  .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 {
    font-size: 0.82rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--gold);
    border-radius: 4px;
    color: var(--gold);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
  }
  .training-card__streams a: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;
  }

  /* ── 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: rgba(255,255,255,0.35); }

  .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.4);
    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: rgba(255,255,255,0.3);
    font-size: 0.82rem;
    line-height: 1.6;
    max-width: 16ch;
    margin: 0 auto;
    transition: color 500ms;
  }
  .method__step.step-active p { color: rgba(255,255,255,0.5); }
  .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.6);
    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: rgba(255,255,255,0.42);
    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;
    color: rgba(255,255,255,0.62);
  }
  .contact__steps li span {
    flex-shrink: 0;
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(198,163,78,0.4);
    color: var(--gold);
    font-size: 0.68rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
  }
  .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: rgba(255,255,255,0.3); }

  /* 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: rgba(255,255,255,0.4);
  }
  .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.22); }
  .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: rgba(255,255,255,0.25);
  }
  .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.6fr 1fr 1fr 1fr;
    gap: 3rem;
    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__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; }
  }
  @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__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);
  }
  .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; }
  }

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

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